/* Rockybilly.ttf: DevMenta preview use only. Free-for-personal-use license — a
   commercial license (thomasaradea@gmail.com / letterarastudio.com/product/rockybilly)
   must be purchased before this ships to a paying client's live site. */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@500;600;700&family=Tajawal:wght@300;400;500;700&display=swap');
@font-face{
  font-family:'Rockybilly'; src:url('fonts/Rockybilly.ttf') format('truetype');
  font-display:swap; font-weight:normal; font-style:normal;
}

/* ===================== THEME TOKENS ===================== */
:root{
  --bg:#FAF8F5; --bg-alt:#F2EDE7; --surface:#FFFFFF; --surface-2:#FDFBF9;
  --text:#241519; --text-muted:#7D6862;
  --primary:#8C2F45; --primary-dark:#5E1D2E; --primary-light:#B4536A;
  --gold:#A9812E; --gold-light:#E8D3A0; --gold-soft:#F3E7CC;
  --border:rgba(140,47,69,0.14);
  --shadow-color:336,45%,20%;
  --overlay:rgba(43,26,31,0.55);
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-full:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px; --space-9:128px;
  --container:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-f:.25s; --dur-m:.5s; --dur-s:.9s;
  --font-body:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  --font-display:'El Messiri','Segoe UI',Tahoma,Arial,sans-serif;
  --font-en-head:'El Messiri',Georgia,'Times New Roman',serif;
  --font-signature:'Rockybilly',cursive;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171013; --bg-alt:#20161A; --surface:#26191E; --surface-2:#2E1F25;
    --text:#F5EAE5; --text-muted:#C7ACA5;
    --primary:#E28CA3; --primary-dark:#C96E86; --primary-light:#F0AEBF;
    --gold:#D9B571; --gold-light:#E9D6A6; --gold-soft:rgba(217,181,113,0.14);
    --border:rgba(217,181,113,0.22);
    --overlay:rgba(10,6,7,0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#171013; --bg-alt:#20161A; --surface:#26191E; --surface-2:#2E1F25;
  --text:#F5EAE5; --text-muted:#C7ACA5;
  --primary:#E28CA3; --primary-dark:#C96E86; --primary-light:#F0AEBF;
  --gold:#D9B571; --gold-light:#E9D6A6; --gold-soft:rgba(217,181,113,0.14);
  --border:rgba(217,181,113,0.22);
  --overlay:rgba(10,6,7,0.6);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#FAF8F5; --bg-alt:#F2EDE7; --surface:#FFFFFF; --surface-2:#FDFBF9;
  --text:#241519; --text-muted:#7D6862;
  --primary:#8C2F45; --primary-dark:#5E1D2E; --primary-light:#B4536A;
  --gold:#A9812E; --gold-light:#E8D3A0; --gold-soft:#F3E7CC;
  --border:rgba(140,47,69,0.14);
  --overlay:rgba(43,26,31,0.55);
  color-scheme: light;
}

/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.7; overflow-x:hidden;
  transition:background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
}
#app{overflow-x:hidden;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{margin:0; font-weight:700; font-family:var(--font-display); letter-spacing:.005em;}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4{letter-spacing:.02em;}
p{margin:0;}
.icon{width:1.4em; height:1.4em; stroke:currentColor; fill:none; stroke-width:1.6; flex-shrink:0;}
.icon-solid{stroke:none; fill:currentColor;}
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5);}
@media (min-width:900px){.container{padding-inline:var(--space-7);}}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
::selection{background:var(--gold-soft); color:var(--primary-dark);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ===================== REVEAL ANIM ===================== */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].in-view{opacity:1; transform:translateY(0);}
[data-reveal="scale"]{transform:translateY(0) scale(.92);}
[data-reveal="scale"].in-view{transform:scale(1);}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:14px 30px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-weight:700; font-size:.98rem; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform var(--dur-f) var(--ease), box-shadow var(--dur-f) var(--ease), background var(--dur-f) var(--ease);
}
.btn:active{transform:scale(.96);}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 10px 30px -8px hsla(var(--shadow-color),0.55);}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease);}
.btn-primary:hover::after{transform:translateX(120%);}
.btn-primary:hover{box-shadow:0 14px 34px -6px hsla(var(--shadow-color),0.6); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#241519;}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(169,129,46,.5);}
.btn-block{width:100%;}
.btn-sm{padding:10px 20px; font-size:.88rem;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.pill-badge{display:inline-flex; align-items:center; gap:var(--space-2); background:transparent; border:1px solid var(--border); padding:7px 14px; border-radius:var(--radius-full); font-size:.8rem; font-weight:500; color:var(--text-muted);}
.pill-badge .icon{width:1.1em; height:1.1em; color:var(--gold);}

.section{padding-block:var(--space-9);}
.section-head{max-width:640px; margin-inline:auto; text-align:center; margin-block-end:var(--space-7); position:relative;}
.eyebrow{display:inline-flex; align-items:center; gap:var(--space-2); color:var(--gold); font-weight:700; letter-spacing:.04em; font-size:.85rem; text-transform:uppercase; margin-block-end:var(--space-3); font-family:var(--font-body);}
.eyebrow::before,.eyebrow::after{content:"";width:22px; height:1px; background:var(--gold);}
.section-title{font-size:clamp(2rem,4vw,2.9rem); margin-block-end:var(--space-4); color:var(--text); position:relative; z-index:1;}
.section-sub{color:var(--text-muted); font-size:1.05rem;}
.section-num{position:absolute; top:-.5em; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-size:6rem; color:var(--gold); opacity:.08; z-index:0; pointer-events:none; line-height:1;}

/* ===================== HEADER ===================== */
header.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding-block:18px; transition:padding var(--dur-m) var(--ease), background var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
header.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);}
header.site-header.scrolled{
  padding-block:10px; background:var(--surface); box-shadow:0 8px 30px hsla(var(--shadow-color),.10); backdrop-filter:blur(14px); background:color-mix(in srgb, var(--surface) 88%, transparent);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:44px; height:44px; border-radius:var(--radius-sm); flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  display:flex; align-items:center; justify-content:center;
  padding:7px; border:2px solid var(--surface); box-shadow:0 4px 14px hsla(var(--shadow-color),.3);
}
.brand-mark img{width:100%; height:100%; object-fit:contain;}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-name{font-size:1.2rem; font-weight:800; color:var(--text); font-family:var(--font-display);}
.brand-tag{font-size:.68rem; color:var(--gold); letter-spacing:.06em; text-transform:uppercase; font-weight:700; font-family:var(--font-body);}

nav.main-nav{display:none;}
nav.main-nav ul{display:flex; align-items:center; gap:var(--space-6);}
nav.main-nav a{font-weight:600; font-size:.95rem; color:var(--text); position:relative; padding-block:4px;}
nav.main-nav a::after{content:"";position:absolute; inset-inline-start:0; bottom:0; width:0; height:2px; background:var(--gold); transition:width var(--dur-f) var(--ease);}
nav.main-nav a:hover::after, nav.main-nav a.current::after{width:100%;}
nav.main-nav a.current{color:var(--primary);}
@media (min-width:960px){nav.main-nav{display:block;}}

.header-actions{display:flex; align-items:center; gap:var(--space-3);}
.lang-toggle{display:flex; border:1px solid var(--border); border-radius:var(--radius-full); padding:3px; background:var(--surface);}
.lang-toggle button{padding:6px 14px; border-radius:var(--radius-full); border:none; background:transparent; font-weight:700; font-size:.78rem; color:var(--text-muted); transition:all var(--dur-f) var(--ease);}
.lang-toggle button.active{background:var(--primary); color:#fff;}
.hamburger{display:flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface);}
@media (min-width:960px){.hamburger{display:none;}}
.header-actions .btn{display:none;}
@media (min-width:600px){.header-actions .btn{display:inline-flex;}}

/* mobile nav overlay */
.mobile-nav{
  position:fixed; inset-block:0; right:0; width:min(86vw,360px); z-index:200;
  background:var(--surface); box-shadow:-20px 0 60px hsla(var(--shadow-color),.25);
  transform:translateX(110%); transition:transform var(--dur-m) var(--ease);
  display:flex; flex-direction:column; padding:var(--space-6);
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-top{display:flex; justify-content:space-between; align-items:center; margin-block-end:var(--space-7);}
.mobile-nav ul{display:flex; flex-direction:column; gap:var(--space-5);}
.mobile-nav a{font-size:1.3rem; font-weight:700;}
.mobile-nav a.current{color:var(--primary);}
.mobile-nav-bottom{margin-block-start:auto; display:flex; flex-direction:column; gap:var(--space-4);}
.mobile-social{display:flex; gap:var(--space-3);}
.scrim{position:fixed; inset:0; background:var(--overlay); z-index:190; opacity:0; pointer-events:none; transition:opacity var(--dur-m) var(--ease);}
.scrim.open{opacity:1; pointer-events:auto;}
.icon-btn{width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; justify-content:center; transition:all var(--dur-f) var(--ease);}
.icon-btn:hover{background:var(--gold); color:#fff; border-color:var(--gold);}

/* ===================== HERO ===================== */
#home{position:relative; min-height:100svh; display:flex; align-items:center; padding-block-start:110px; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.42; animation:float 18s ease-in-out infinite; will-change:transform;}
.blob-1{width:420px; height:420px; background:radial-gradient(circle,var(--primary-light),transparent 70%); top:-120px; inset-inline-end:-120px;}
.blob-2{width:360px; height:360px; background:radial-gradient(circle,var(--gold-light),transparent 70%); bottom:-140px; inset-inline-start:-100px; animation-delay:-6s;}
.blob-3{width:260px; height:260px; background:radial-gradient(circle,var(--primary),transparent 70%); top:40%; inset-inline-start:30%; opacity:.18; animation-delay:-3s;}
@keyframes float{0%,100%{transform:translate(var(--px,0px),var(--py,0px)) scale(1);}50%{transform:translate(calc(var(--px,0px) - 30px),calc(var(--py,0px) + 30px)) scale(1.08);}}
.particles{position:absolute; inset:0; pointer-events:none;}
.particle{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.5; animation:drift 9s ease-in-out infinite;}
@keyframes drift{0%,100%{transform:translateY(0) translateX(0); opacity:.2;}50%{transform:translateY(-40px) translateX(10px); opacity:.7;}}

.hero-grid{position:relative; z-index:1; display:grid; gap:var(--space-8); align-items:center;}
@media (min-width:960px){.hero-grid{grid-template-columns:1fr 1.1fr;}}
.hero-copy{text-align:center;}
@media (min-width:960px){.hero-copy{text-align:start;}}
.hero-title{font-size:clamp(2.4rem,5.6vw,3.9rem); line-height:1.15; margin-block:var(--space-4); color:var(--text);}
.hero-title .accent{color:var(--primary); position:relative; white-space:nowrap;}
.hero-title .word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em;}
.hero-title .word-inner{display:inline-block; transform:translateY(115%); opacity:0; transition:transform .85s var(--ease), opacity .7s var(--ease);}
.hero-title.words-in .word-inner{transform:translateY(0); opacity:1;}
.hero-sub{font-size:1.15rem; color:var(--text-muted); max-width:520px; margin-inline:auto;}
@media (min-width:960px){.hero-sub{margin-inline:0;}}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-block-start:var(--space-6); justify-content:center;}
@media (min-width:960px){.hero-cta{justify-content:flex-start;}}
.hero-badges{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-block-start:var(--space-7); justify-content:center;}
@media (min-width:960px){.hero-badges{justify-content:flex-start;}}
@media (max-width:959px){
  #home{padding-block-start:80px;}
  .hero-grid{gap:var(--space-4);}
  .hero-visual{order:-1; margin-block-end:0;}
  .hero-title{margin-block:var(--space-3); font-size:clamp(1.9rem,7vw,2.6rem);}
  .hero-sub{font-size:1rem;}
  .hero-cta{margin-block-start:var(--space-4);}
  .hero-badges{margin-block-start:var(--space-4); gap:var(--space-2);}
  .pill-badge{font-size:.74rem; padding:6px 12px;}
  .floating-chip{padding:8px 12px;}
}

.hero-visual{position:relative; display:flex; align-items:center; justify-content:center; min-height:380px; perspective:1000px;}
.hero-ring{position:absolute; inset:0; margin:auto; border-radius:50%; pointer-events:none;}
.hero-ring-1{width:112%; height:112%; border:1px solid var(--gold-light); opacity:.55; animation:spin 70s linear infinite;}
.hero-ring-2{width:130%; height:130%; border:1px dashed var(--gold-light); opacity:.3; animation:spin 100s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-frame{
  width:min(80vw,440px); aspect-ratio:3/4; border-radius:50% 50% 12px 12px/32% 32% 12px 12px;
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:2px solid var(--gold-light); box-shadow:0 30px 70px -20px hsla(var(--shadow-color),.35);
  position:relative; overflow:hidden;
}
.hero-frame img{width:100%; height:100%; object-fit:cover;}
.floating-chip{position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 16px; box-shadow:var(--shadow-md,0 10px 30px hsla(336,45%,20%,.15)); display:flex; align-items:center; gap:10px; animation:bob 6.5s ease-in-out infinite;}
.floating-chip strong{display:block; font-size:1rem; color:var(--text);}
.floating-chip span{font-size:.72rem; color:var(--text-muted);}
@media (max-width:959px){
  .hero-visual{min-height:0;}
  .hero-frame{width:min(46vw,260px);}
}
@media (max-width:479px){
  .hero-frame{width:min(48vw,200px);}
}
@media (max-width:959px) and (max-height:740px){
  #home{padding-block-start:64px;}
  .hero-grid{gap:var(--space-3);}
  .hero-frame{width:min(38vw,170px);}
  .hero-title{margin-block:var(--space-2); font-size:clamp(1.6rem,7vw,2.2rem);}
  .hero-sub{font-size:.92rem;}
  .hero-cta{margin-block-start:var(--space-3);}
  .hero-cta .btn{padding-block:10px;}
  .hero-badges{margin-block-start:var(--space-3);}
}
.chip-1{top:4%; inset-inline-start:-6%; animation-delay:0s;}
.chip-2{bottom:6%; inset-inline-end:-8%; animation-delay:-3.2s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.chip-icon{width:32px; height:32px; border-radius:var(--radius-sm); background:var(--gold-soft); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0;}
.chip-icon .icon{width:18px; height:18px;}

.scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-muted); font-size:.75rem; z-index:1;}
@media (max-width:767px){.scroll-cue{display:none;}}
.scroll-cue .mouse{width:22px; height:34px; border:2px solid var(--text-muted); border-radius:12px; position:relative;}
.scroll-cue .mouse::after{content:"";position:absolute; top:6px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--gold); border-radius:2px; animation:scrollDot 1.6s ease-in-out infinite;}
@keyframes scrollDot{0%{opacity:1; top:6px;}100%{opacity:0; top:18px;}}

/* ===================== PAGE HERO (inner pages) ===================== */
.page-hero{position:relative; padding-block:160px var(--space-8); overflow:hidden; text-align:center;}
.page-hero .container{position:relative; z-index:1;}
.page-hero-bg{position:absolute; inset:0; background:linear-gradient(180deg,var(--bg-alt),var(--bg)); z-index:0;}
.page-hero-title{font-size:clamp(2.2rem,4.6vw,3.2rem); margin-block:var(--space-3);}
.page-hero-sub{color:var(--text-muted); font-size:1.05rem; max-width:560px; margin-inline:auto;}
.breadcrumb{display:flex; align-items:center; justify-content:center; gap:8px; font-size:.85rem; color:var(--text-muted); margin-block-end:var(--space-4);}
.breadcrumb a:hover{color:var(--primary);}

/* ===================== ABOUT ===================== */
.about-grid{display:flex; flex-direction:column; gap:var(--space-8); align-items:center;}
@media (min-width:900px){.about-grid{flex-direction:row;}}
.about-visual{flex:0 0 auto; width:min(80vw,360px); position:relative;}
.about-frame{aspect-ratio:4/5; border-radius:var(--radius-lg); position:relative; overflow:hidden; box-shadow:0 30px 60px -20px hsla(var(--shadow-color),.4); border:6px solid var(--surface); outline:2px solid var(--gold-light);}
.about-frame img{width:100%; height:100%; object-fit:cover;}
.about-stat-float{position:absolute; background:var(--surface); border-radius:var(--radius-md); padding:14px 18px; box-shadow:var(--shadow-md,0 10px 30px hsla(336,45%,20%,.18)); text-align:center; border:1px solid var(--border);}
.about-stat-float b{display:block; font-size:1.4rem; color:var(--primary); font-family:var(--font-display);}
.about-stat-float span{font-size:.7rem; color:var(--text-muted);}
.stat-float-1{top:-18px; inset-inline-start:-24px;}
.stat-float-2{bottom:-18px; inset-inline-end:-24px;}
.about-copy{flex:1; text-align:center;}
@media (min-width:900px){.about-copy{text-align:start;}}
.about-copy .section-head{margin-inline:0; text-align:inherit; margin-block-end:var(--space-5);}
.about-body{color:var(--text-muted); font-size:1.05rem; margin-block-end:var(--space-6);}
.feature-list{display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-block-end:var(--space-7); text-align:start;}
@media (min-width:560px){.feature-list{grid-template-columns:1fr 1fr;}}
.feature-item{display:flex; gap:12px; align-items:flex-start;}
.feature-item .chip-icon{background:var(--gold-soft);}
.feature-item p{font-weight:600; font-size:.92rem;}
.stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5);}
@media (min-width:540px){.stat-row{grid-template-columns:repeat(4,1fr);}}
.stat-card{text-align:center; padding:var(--space-4); background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--border);}
.stat-num{font-size:1.8rem; font-weight:800; color:var(--primary); display:block; font-family:var(--font-display);}
.stat-label{font-size:.76rem; color:var(--text-muted); margin-block-start:4px;}

/* ===================== PORTFOLIO ===================== */
.filter-row{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-block-end:var(--space-7);}
.filter-btn{padding:10px 22px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--surface); font-weight:700; font-size:.85rem; color:var(--text-muted); transition:all var(--dur-f) var(--ease);}
.filter-btn.active,.filter-btn:hover{background:var(--primary); color:#fff; border-color:var(--primary);}
.portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5);}
@media (min-width:700px){.portfolio-grid{grid-template-columns:repeat(3,1fr);}}
.portfolio-item{border-radius:var(--radius-md); overflow:hidden; position:relative; aspect-ratio:3/4; cursor:pointer; transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); box-shadow:var(--shadow-sm,0 4px 14px hsla(336,45%,20%,.1));}
.portfolio-item.hide{display:none;}
.portfolio-item:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg,0 24px 50px hsla(336,45%,20%,.28));}
.portfolio-item img,.portfolio-item video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.portfolio-item:hover img,.portfolio-item:hover video{transform:scale(1.06);}
.portfolio-item.portfolio-video.playing .reel-play{opacity:0; pointer-events:none;}
.portfolio-item .tile-overlay{position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%); opacity:0; transition:opacity var(--dur-m) var(--ease); display:flex; align-items:flex-end; padding:var(--space-4); pointer-events:none;}
.portfolio-item:hover .tile-overlay{opacity:1;}
.portfolio-item .tile-caption{color:#fff;}
.portfolio-item .tile-caption strong{display:block; font-size:.95rem;}
.portfolio-item .tile-caption span{font-size:.72rem; opacity:.85;}
.portfolio-note{text-align:center; color:var(--text-muted); font-size:.85rem; margin-block-start:var(--space-6);}

/* ===================== PRICING ===================== */
.pricing-group-title{display:flex; align-items:center; gap:var(--space-3); font-size:1.2rem; font-weight:800; margin-block:var(--space-7) var(--space-5); color:var(--primary); font-family:var(--font-display);}
.pricing-group-title::after{content:""; flex:1; height:1px; background:var(--border);}
.pricing-grid{display:grid; grid-template-columns:1fr; gap:var(--space-5);}
@media (min-width:640px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.pricing-grid{grid-template-columns:repeat(3,1fr);}}
.price-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6); position:relative; display:flex; flex-direction:column; transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); overflow:hidden;}
.price-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg,0 20px 44px hsla(336,45%,20%,.2));}
.price-card.featured{border-color:var(--gold); background:linear-gradient(160deg,var(--surface),var(--gold-soft));}
.featured-badge{position:absolute; top:18px; inset-inline-end:-34px; background:var(--gold); color:#241519; font-size:.7rem; font-weight:800; padding:5px 40px; transform:rotate(35deg); box-shadow:0 4px 10px rgba(0,0,0,.15);}
[dir="ltr"] .featured-badge{transform:rotate(-35deg);}
.price-card-title{font-size:1.15rem; font-weight:800; margin-block-end:6px; font-family:var(--font-display);}
.price-card-desc{color:var(--text-muted); font-size:.86rem; min-height:2.6em; margin-block-end:var(--space-4);}
.price-amount{font-size:2.1rem; font-weight:800; color:var(--primary); margin-block-end:var(--space-5); font-family:var(--font-display);}
.price-amount small{font-size:.85rem; font-weight:700; color:var(--text-muted); font-family:var(--font-body);}
.price-card .btn{margin-block-start:auto;}
.duration-box{margin-block-start:var(--space-7); display:flex; flex-wrap:wrap; gap:var(--space-5); justify-content:center; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-md); padding:var(--space-5);}
.duration-item{display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--text-muted);}
.duration-item strong{color:var(--text);}
.duration-item .icon{color:var(--gold);}
.private-note{text-align:center; color:var(--text-muted); font-size:.85rem; margin-block-start:var(--space-4); font-style:italic;}
.trust-row{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-block-start:var(--space-7);}

/* ===================== TESTIMONIALS ===================== */
.testi-wrap{max-width:920px; margin-inline:auto; position:relative; display:flex; align-items:center; justify-content:center; gap:var(--space-5);}
.testi-body{flex:1 1 600px; max-width:600px; min-width:0; display:flex; flex-direction:column; align-items:center;}
.testi-card{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6) var(--space-6); text-align:center; box-shadow:0 24px 60px -24px hsla(var(--shadow-color),.3); position:relative; overflow:hidden;}
.testi-card::before{content:"";position:absolute; top:-50px; inset-inline-end:-30px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,var(--gold-soft),transparent 70%); pointer-events:none;}
.testi-slide{display:none; animation:fadeIn .6s var(--ease); position:relative;}
.testi-slide.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:translateY(0);}}
.testi-avatar{width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--primary-light),var(--primary-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-display); font-size:1.25rem; margin-inline:auto; margin-block-end:var(--space-3); box-shadow:0 10px 22px -8px hsla(var(--shadow-color),.5); position:relative;}
.testi-quote-mark{font-family:Georgia,serif; font-size:4rem; line-height:1; color:var(--gold-light); font-weight:700; margin-block-end:-14px; position:relative;}
.testi-quote{font-size:1.15rem; line-height:1.8; color:var(--text); position:relative; font-family:var(--font-display); font-weight:500;}
.testi-stars{color:var(--gold); margin-block-end:var(--space-3); font-size:1rem; letter-spacing:2px; position:relative;}
.testi-name{margin-block-start:var(--space-5); font-weight:800; font-family:var(--font-display); display:block; position:relative;}
.testi-role{color:var(--text-muted); font-size:.85rem; position:relative;}
.testi-dots{display:flex; justify-content:center; gap:10px; margin-block-start:var(--space-6);}
.testi-dot{width:9px; height:9px; border-radius:50%; background:var(--border); border:none; transition:all var(--dur-f) var(--ease);}
.testi-dot.active{background:var(--primary); width:24px; border-radius:6px;}
.testi-arrow{position:static; flex-shrink:0; background:var(--surface); border:1px solid var(--border); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 10px 22px -10px hsla(var(--shadow-color),.35);}
.testi-arrow:hover{background:var(--primary); color:#fff; border-color:var(--primary);}
@media (max-width:760px){.testi-arrow{display:none;}}

/* ===================== CONTACT ===================== */
.contact-grid{display:flex; flex-direction:column; gap:var(--space-7);}
@media (min-width:960px){.contact-grid{flex-direction:row; align-items:flex-start;}}
.booking-card{flex:1.3; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-7); box-shadow:var(--shadow-md,0 14px 40px hsla(336,45%,20%,.12));}
.form-row{display:grid; grid-template-columns:1fr; gap:var(--space-5); margin-block-end:var(--space-5);}
@media (min-width:560px){.form-row.two{grid-template-columns:1fr 1fr;}}
.field label{display:block; font-weight:700; font-size:.85rem; margin-block-end:8px; color:var(--text);}
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font:inherit; transition:border-color var(--dur-f), box-shadow var(--dur-f);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft);}
.field textarea{resize:vertical; min-height:90px;}
.field.pulse select{animation:pulseField 1.1s var(--ease);}
@keyframes pulseField{0%,100%{box-shadow:0 0 0 0 var(--gold-soft);}50%{box-shadow:0 0 0 6px var(--gold-soft);}}
.loc-toggle{display:flex; gap:var(--space-3);}
.loc-toggle label{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border:1px solid var(--border); border-radius:var(--radius-sm); font-weight:700; font-size:.88rem; cursor:pointer; transition:all var(--dur-f);}
.loc-toggle input{position:absolute; opacity:0; pointer-events:none;}
.loc-toggle input:checked + span{color:inherit;}
.loc-toggle label:has(input:checked){background:var(--primary); border-color:var(--primary); color:#fff;}
.addr-field{overflow:hidden; max-height:0; transition:max-height var(--dur-m) var(--ease), margin var(--dur-m) var(--ease); margin-block-end:0;}
.addr-field.show{max-height:160px; margin-block-end:var(--space-5);}
.private-hint{font-size:.78rem; color:var(--gold); margin-block-start:8px; display:none;}
.private-hint.show{display:block;}
.result-panel{margin-block-start:var(--space-5); padding:var(--space-5); border-radius:var(--radius-md); background:var(--gold-soft); border:1px solid var(--gold-light); display:none; align-items:center; gap:var(--space-4); flex-wrap:wrap;}
.result-panel.show{display:flex; animation:fadeIn .5s var(--ease);}
.result-panel p{font-weight:700; flex:1; min-width:200px;}

.info-card{flex:1; display:flex; flex-direction:column; gap:var(--space-4);}
.info-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); display:flex; gap:14px; align-items:flex-start;}
.info-tile .chip-icon{background:var(--gold-soft); color:var(--gold);}
.info-tile strong{display:block; margin-block-end:2px;}
.info-tile span, .info-tile a{color:var(--text-muted); font-size:.9rem;}
.info-tile a:hover{color:var(--primary);}
.trust-strip{display:flex; align-items:center; gap:10px; background:var(--primary); color:#fff; padding:14px 20px; border-radius:var(--radius-md); font-weight:700; font-size:.9rem;}
.wa-direct{display:flex; align-items:center; justify-content:center; gap:10px; background:#25D366; color:#fff; padding:14px; border-radius:var(--radius-md); font-weight:800;}
.wa-direct:hover{filter:brightness(1.08);}

/* ===================== FOOTER ===================== */
footer.site-footer{background:var(--bg-alt); border-top:1px solid var(--border); padding-block-start:var(--space-9); margin-block-start:var(--space-8);}
.footer-grid{display:grid; grid-template-columns:1fr; gap:var(--space-7); padding-block-end:var(--space-8);}
@media (min-width:720px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.1fr;}}
@media (max-width:719px){
  footer.site-footer{padding-block-start:var(--space-6); margin-block-start:var(--space-7);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-4); padding-block-end:var(--space-5);}
  .footer-brand{grid-column:1 / -1;}
  .footer-col ul{gap:9px;}
  .footer-col h4{margin-block-end:var(--space-3);}
  .footer-bottom{padding-block:var(--space-4);}
}
.footer-brand p{color:var(--text-muted); font-size:.9rem; margin-block:var(--space-4);}
.footer-signature{font-family:var(--font-signature); font-size:1.6rem; color:var(--gold); margin-block-end:var(--space-2); line-height:1;}
.footer-social{display:flex; gap:10px;}
.footer-col h4{font-size:.95rem; margin-block-end:var(--space-4); color:var(--gold); font-family:var(--font-display); letter-spacing:.02em;}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col a,.footer-col span{color:var(--text-muted); font-size:.9rem;}
.footer-col a:hover{color:var(--primary);}
.footer-bottom{border-top:1px solid var(--border); padding-block:var(--space-5); display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; color:var(--text-muted); font-size:.82rem;}
@media (min-width:640px){.footer-bottom{flex-direction:row; justify-content:space-between;}}
.footer-bottom .credit{color:var(--gold); font-weight:700;}

/* ===================== FLOATING UI ===================== */
.fab{position:fixed; inset-inline-end:22px; bottom:22px; z-index:80; display:flex; flex-direction:column; gap:14px; align-items:center;}
.fab-wa{width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(37,211,102,.45); position:relative;}
.fab-wa::before{content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(1); opacity:.6;}100%{transform:scale(1.9); opacity:0;}}
.fab-wa .icon{width:28px; height:28px; position:relative;}
.fab-top{width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(10px); transition:all var(--dur-f) var(--ease);}
.fab-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}

/* divider flourish */
.flourish{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); margin-block:var(--space-7); opacity:.7;}
.flourish .line{width:60px; height:1px; background:currentColor;}

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{position:fixed; top:0; inset-inline:0; height:3px; z-index:300; pointer-events:none; background:rgba(0,0,0,0.03);}
.scroll-progress-bar{height:100%; width:var(--progress,0%); background:linear-gradient(90deg,var(--gold),var(--primary)); box-shadow:0 0 12px hsla(var(--shadow-color),.4);}
@media (max-width:767px){
  .scroll-progress{inset-inline:auto; inset-inline-end:0; top:0; bottom:0; height:auto; width:3px;}
  .scroll-progress-bar{width:100%; height:var(--progress,0%); background:linear-gradient(180deg,var(--gold),var(--primary));}
}

/* ===================== MARQUEE ===================== */
.marquee-wrap{overflow:hidden; background:var(--primary-dark); position:relative;}
.marquee-track{display:flex; width:max-content; animation:marquee 30s linear infinite;}
[dir="ltr"] .marquee-track{animation-direction:reverse;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.marquee-item{display:flex; align-items:center; gap:12px; padding:16px 20px; color:#fff; font-weight:700; font-size:.92rem; white-space:nowrap; letter-spacing:.03em; font-family:var(--font-display);}
.marquee-item .icon{width:13px; height:13px; color:var(--gold-light); flex-shrink:0;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none;}}

/* ===================== MAGNETIC + TILT ===================== */
.price-card.tilting,.portfolio-item.tilting{transition:transform .1s linear;}

/* ===================== CUSTOM CURSOR ===================== */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:400; transform:translate(-50%,-50%); opacity:0;}
.cursor-dot{width:6px; height:6px; background:var(--gold); transition:opacity .3s ease;}
.cursor-ring{width:38px; height:38px; border:1px solid var(--gold); transition:opacity .3s ease, width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);}
.cursor-ready .cursor-dot,.cursor-ready .cursor-ring{opacity:1;}
.cursor-hover .cursor-ring{width:64px; height:64px; background:var(--gold-soft);}
body.cursor-enabled{cursor:none;}
body.cursor-enabled a, body.cursor-enabled button, body.cursor-enabled input, body.cursor-enabled select, body.cursor-enabled textarea, body.cursor-enabled label{cursor:none;}
@media (max-width:900px), (pointer:coarse){.cursor-dot,.cursor-ring{display:none !important;}}

/* ===================== DARK PREMIUM CTA ===================== */
.dark-cta{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(135deg,#241017,#3a1420 55%,#1a0c11);
  padding:var(--space-7) var(--space-6);
  display:grid; gap:var(--space-7); align-items:center;
  box-shadow:0 40px 80px -30px hsla(var(--shadow-color),.55);
}
@media (min-width:900px){.dark-cta{grid-template-columns:1.15fr .85fr; padding:var(--space-9);}}
.dark-cta::before{content:"";position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(217,181,113,.2), transparent 55%); pointer-events:none;}
.dark-cta-body{position:relative; z-index:1; text-align:center;}
@media (min-width:900px){.dark-cta-body{text-align:start;}}
.dark-cta-badge{display:inline-flex; align-items:center; gap:8px; background:rgba(217,181,113,.15); border:1px solid rgba(217,181,113,.35); color:var(--gold-light); padding:8px 18px; border-radius:var(--radius-full); font-size:.76rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; margin-block-end:var(--space-4); font-family:var(--font-body);}
.dark-cta-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-light); flex-shrink:0;}
.dark-cta-body h2{color:#fff; font-size:clamp(1.8rem,3.6vw,2.7rem); margin-block-end:var(--space-4);}
.dark-cta-body p{color:rgba(255,255,255,.72); font-size:1.02rem; margin-block-end:var(--space-6); max-width:480px; margin-inline:auto;}
@media (min-width:900px){.dark-cta-body p{margin-inline:0;}}
.dark-cta-checks{display:inline-grid; grid-template-columns:1fr; gap:var(--space-3) var(--space-5); text-align:start;}
@media (min-width:560px){.dark-cta-checks{grid-template-columns:1fr 1fr;}}
.dark-cta-checks div{display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.85); font-size:.88rem; font-weight:600;}
.dark-cta-checks .icon{color:#7FD4A0; width:1.1em; height:1.1em; flex-shrink:0;}
.dark-cta-panel{position:relative; z-index:1; background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:0 30px 60px -20px rgba(0,0,0,.4); text-align:center;}
.dark-cta-panel-badge{position:absolute; top:16px; inset-inline-end:16px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#241519; font-weight:800; font-size:.72rem; padding:6px 16px; border-radius:var(--radius-full); box-shadow:0 4px 10px rgba(0,0,0,.15); font-family:var(--font-body);}
.dark-cta-panel h3{font-size:1.2rem; margin-block:20px var(--space-3); color:var(--text);}
.dark-cta-panel p{color:var(--text-muted); font-size:.9rem; margin-block-end:var(--space-5);}
.dark-cta-panel .btn-block + .btn-block{margin-block-start:10px;}

/* ===================== VIDEO REEL GALLERY ===================== */
.reel-grid{display:grid; grid-template-columns:1fr; gap:var(--space-5); max-width:360px; margin-inline:auto;}
@media (min-width:480px){.reel-grid{grid-template-columns:repeat(2,1fr); max-width:none;}}
@media (min-width:700px){.reel-grid{grid-template-columns:repeat(3,1fr);}}
.reel-item{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:9/16; background:#000; box-shadow:var(--shadow-sm,0 4px 14px hsla(336,45%,20%,.1)); transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);}
.reel-item:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg,0 24px 50px hsla(336,45%,20%,.28));}
.reel-item video{width:100%; height:100%; object-fit:cover; display:block;}
.reel-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,8,12,.32); transition:opacity .3s var(--ease); cursor:pointer; border:none; padding:0;}
.reel-play::after{content:"";position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(4px);}
.reel-play .icon{position:relative; width:22px; height:22px; color:#fff; fill:#fff; margin-inline-start:3px;}
.reel-item.playing .reel-play{opacity:0; pointer-events:none;}
.reel-caption{position:absolute; bottom:0; inset-inline:0; padding:var(--space-3) var(--space-3) var(--space-2); background:linear-gradient(to top,rgba(0,0,0,.7),transparent); color:#fff; font-size:.78rem; font-weight:700; pointer-events:none;}

/* ===================== MAP ===================== */
.map-embed{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm,0 4px 14px hsla(336,45%,20%,.1)); position:relative; aspect-ratio:16/10;}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ===================== FAQ ===================== */
.faq-list{max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-4);}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.faq-question{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5); font-weight:700; cursor:pointer; background:none; border:none; width:100%; text-align:start; color:var(--text); font-size:.98rem;}
.faq-question .icon{color:var(--gold); flex-shrink:0; transition:transform var(--dur-f) var(--ease); transform:rotate(-90deg);}
.faq-item.open .faq-question .icon{transform:rotate(90deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease);}
.faq-answer p{padding:0 var(--space-5) var(--space-5); color:var(--text-muted); font-size:.92rem; line-height:1.8;}
.faq-item.open .faq-answer{max-height:220px;}

/* ===================== JOURNEY / TIMELINE ===================== */
.journey{display:flex; flex-direction:column; gap:var(--space-6); max-width:640px; margin-inline:auto;}
.journey-item{display:flex; gap:var(--space-4); align-items:flex-start;}
.journey-dot{width:44px; height:44px; border-radius:var(--radius-sm); background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#241519; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; font-family:var(--font-display); font-size:1.1rem;}
.journey-text strong{display:block; margin-block-end:4px; font-family:var(--font-display); font-size:1.05rem;}
.journey-text p{color:var(--text-muted); font-size:.92rem;}