/* ============================================
   Digital Laser Dentistry — luxury edition
   Design system: Editorial serif + refined sans
   Palette: Deep navy + coral + cream + gold accent
   ============================================ */

:root{
  /* Palette (kept from the clinic's real brand, refined) */
  --navy:#132539;
  --navy-deep:#0b1929;
  --navy-soft:#1c3550;
  --coral:#ff8562;
  --coral-hover:#f96e46;
  --coral-soft:rgba(255,133,98,.14);
  --gold:#c9a56b;
  --gold-soft:rgba(201,165,107,.14);
  --cream:#f7f2ec;
  --cream-2:#ede4d8;
  --white:#ffffff;
  --ink:#1a2432;
  --ink-soft:#5c6879;
  --ink-mute:#8a95a5;
  --line:#e7ddd0;
  --line-strong:#d5c8b4;

  --shadow-sm: 0 4px 16px -6px rgba(11,25,41,.16);
  --shadow-md: 0 20px 50px -20px rgba(11,25,41,.28);
  --shadow-lg: 0 40px 80px -30px rgba(11,25,41,.35);

  --radius-sm: 8px;
  --radius: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.5,0,.75,0);

  --maxw: 1240px;
  --gutter: 32px;

  /* Typography scale */
  --font-serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fs-eyebrow: .72rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h4: 1.15rem;
  --fs-h3: 1.4rem;
  --fs-h2: clamp(2rem, 3.6vw, 3rem);
  --fs-h1: clamp(2.6rem, 6.5vw, 5.2rem);
  --fs-display: clamp(3.4rem, 9vw, 7.2rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
  font-size:var(--fs-body);
  font-weight:400;
}

h1,h2,h3,h4,h5{
  font-family:var(--font-serif);
  color:var(--navy);
  line-height:1.05;
  margin:0 0 .5em;
  letter-spacing:-0.02em;
  font-weight:400;
  text-wrap:balance;
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 30, "WONK" 0;
}
h1{ font-size:var(--fs-h1); font-weight:400; }
h2{ font-size:var(--fs-h2); font-weight:400; }
h3{ font-size:var(--fs-h3); font-weight:500; letter-spacing:-0.015em; }
h4{ font-size:var(--fs-h4); font-weight:600; letter-spacing:-0.01em; font-family:var(--font-sans); }

p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0; }
::selection{ background:var(--coral); color:var(--white); }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coral);
  font-weight:600;
  margin-bottom:20px;
}
.eyebrow::before{
  content:"";
  width:32px; height:1px;
  background:var(--coral);
}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.005em;
  transition:transform .5s var(--ease-out), box-shadow .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  position:relative;
  overflow:hidden;
  will-change:transform;
}
.btn::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 55%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.btn:hover::after{ opacity:1; }
.btn-primary{
  background:var(--coral);
  color:var(--white);
  box-shadow:0 16px 34px -12px rgba(255,133,98,.55);
}
.btn-primary:hover{ background:var(--coral-hover); box-shadow:0 22px 44px -12px rgba(255,133,98,.68); }
.btn-ghost{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--navy); }
.btn-light{
  background:rgba(255,255,255,.12);
  color:var(--white);
  border:1.5px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.btn-light:hover{ background:rgba(255,255,255,.22); }
.btn-dark{
  background:var(--navy);
  color:var(--white);
}
.btn-dark:hover{ background:var(--navy-soft); }
.btn-sm{
  padding:11px 22px;
  font-size:.88rem;
  white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(255,133,98,.5);
}
.btn-sm:hover{ box-shadow:0 14px 30px -12px rgba(255,133,98,.62); }
@media (pointer:coarse){ .btn{ min-height:48px; } .btn-sm{ min-height:44px; } }

.btn-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.9rem; color:var(--coral);
  transition:gap .3s var(--ease-out);
}
.btn-arrow svg{ width:14px; height:14px; transition:transform .3s var(--ease-out); }
.btn-arrow:hover{ gap:12px; }
.btn-arrow:hover svg{ transform:translateX(4px); }

/* ========== Preloader ========== */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease-out), visibility .8s var(--ease-out);
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.preloader-mark{
  width:92px; height:92px;
  background:var(--gold);
  -webkit-mask:url('assets/img/logo-mark.png') center/contain no-repeat;
  mask:url('assets/img/logo-mark.png') center/contain no-repeat;
  opacity:0;
  transform:translateY(10px) scale(.94);
  animation:markIn 1s var(--ease-out) forwards;
}
@keyframes markIn{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.preloader-brand{
  font-family:var(--font-serif);
  color:var(--white);
  font-size:1.4rem;
  letter-spacing:.02em;
  font-weight:300;
  opacity:0;
  animation:fadeUp .7s .7s var(--ease-out) forwards;
}
.preloader-brand em{ font-style:italic; color:var(--coral); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ========== Header ========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-header.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  padding:14px 0;
  box-shadow:0 8px 32px -18px rgba(11,25,41,.28);
  border-bottom:1px solid rgba(231,221,208,.5);
}
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
/* Real clinic logo mark. Uses the PNG's alpha as a mask so the mark
   can take the right brand colour on light and dark backgrounds. */
.brand-mark{
  width:46px; height:46px;
  flex-shrink:0;
  background:var(--navy);
  -webkit-mask:url('assets/img/logo-mark.png') center/contain no-repeat;
  mask:url('assets/img/logo-mark.png') center/contain no-repeat;
  transition:background .4s var(--ease);
}
.brand:hover .brand-mark{ background:var(--gold); }
.site-footer .brand-mark{ background:var(--gold); }
.brand-text{ font-family:var(--font-serif); line-height:1.1; }
.brand-text strong{ display:block; font-size:1.05rem; font-weight:500; color:var(--navy); letter-spacing:-0.01em; white-space:nowrap; }
.brand-text span{ display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:28px; flex-shrink:0; }
.nav-links a{
  font-size:.9rem; font-weight:500; color:var(--navy);
  position:relative; padding:6px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--coral);
  transition:right .4s var(--ease-out);
}
.nav-links a:hover{ color:var(--coral); }
.nav-links a:hover::after{ right:0; }

.header-cta{ display:flex; align-items:center; gap:12px; }
.lang-toggle{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:3px; overflow:hidden;
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600;
}
.lang-toggle button{
  padding:5px 10px; border-radius:999px; color:var(--ink-soft);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.lang-toggle button.active{ background:var(--navy); color:var(--white); }

.header-whatsapp{
  display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:.85rem; color:var(--navy);
  white-space:nowrap; transition:color .3s var(--ease);
}
.header-whatsapp svg{ width:15px; height:15px; fill:#25d366; flex-shrink:0; }
.header-whatsapp:hover{ color:#1eb355; }

.header-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color:var(--navy);
  transition:color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.header-social svg{ width:18px; height:18px; }
.header-social:hover{
  color:#e1306c;
  background:linear-gradient(135deg, rgba(240,148,51,.14), rgba(220,39,67,.14), rgba(133,89,215,.14));
  transform:scale(1.06);
}

.menu-toggle{
  display:none; width:44px; height:44px; border-radius:12px;
  align-items:center; justify-content:center; background:var(--cream);
}
.menu-toggle span{ display:block; width:20px; height:2px; background:var(--navy); position:relative; }
.menu-toggle span::before,.menu-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--navy); transition:transform .3s var(--ease);
}
.menu-toggle span::before{ top:-6px; }
.menu-toggle span::after{ top:6px; }
.menu-toggle.open span{ background:transparent; }
.menu-toggle.open span::before{ transform:translateY(6px) rotate(45deg); }
.menu-toggle.open span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:480;
  background:var(--navy-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; pointer-events:none; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.mobile-nav a{ color:var(--white); font-size:1.6rem; font-family:var(--font-serif); font-weight:400; }
.mobile-nav .btn{ margin-top:10px; }

/* ========== Hero ========== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 40%;
  transform:scale(1.08);
  opacity:0;
  transition:opacity 1.4s var(--ease-out), transform 8s var(--ease-out);
}
.hero-media img.loaded{ opacity:1; transform:scale(1.02); }
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:60% 40%;
  opacity:0;
  transition:opacity 1.2s var(--ease-out);
  pointer-events:none;
  will-change:opacity;
}
.hero-video.playing{ opacity:1; }
.hero-video-toggle{
  position:absolute; bottom:20px; right:20px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); color:var(--white);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.hero-video-toggle:hover{ background:rgba(255,255,255,.22); transform:scale(1.06); }
.hero-video-toggle svg{ width:16px; height:16px; }
.hero-video-toggle .icon-play{ display:none; }
.hero-video-toggle.paused .icon-pause{ display:none; }
.hero-video-toggle.paused .icon-play{ display:block; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,25,41,.7) 0%, rgba(11,25,41,.28) 32%, rgba(11,25,41,.42) 66%, rgba(11,25,41,.94) 100%);
}
.hero-glow{
  position:absolute; inset:-10%;
  background:radial-gradient(60% 45% at 18% 22%, rgba(255,133,98,.22), transparent 60%),
             radial-gradient(50% 40% at 85% 70%, rgba(201,165,107,.15), transparent 65%);
  animation:drift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(2%,-2%,0) scale(1.05);} }

.hero-content{
  position:relative; z-index:2;
  /* keep the container's horizontal gutter (padding:0 var(--gutter) from .container) */
  padding-top:220px;
  padding-bottom:110px;
  width:100%;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  color:var(--white); font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  margin-bottom:30px;
  font-weight:600;
}
.hero-badge .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--coral); box-shadow:0 0 0 4px rgba(255,133,98,.2);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  50%{ box-shadow:0 0 0 8px rgba(255,133,98,0); }
}

.hero h1{
  color:var(--white);
  font-size:var(--fs-h1);
  max-width:18ch;
  margin-bottom:26px;
  font-weight:300;
  letter-spacing:-0.025em;
}
.hero h1 em{
  font-style:italic; color:var(--coral); font-weight:400;
}
.hero-word{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hero-word.in{ opacity:1; transform:translateY(0); }
/* keep two words on the same line even when the H1 wraps */
.hero-nowrap{ white-space:nowrap; }

.hero-sub{
  color:rgba(255,255,255,.82);
  font-size:var(--fs-lead);
  max-width:48ch;
  margin-bottom:42px;
  line-height:1.55;
  opacity:0; transform:translateY(20px);
  transition:opacity .8s .5s var(--ease-out), transform .8s .5s var(--ease-out);
}
.hero-sub.in{ opacity:1; transform:translateY(0); }

.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:70px;
  opacity:0; transform:translateY(20px);
  transition:opacity .8s .7s var(--ease-out), transform .8s .7s var(--ease-out);
}
.hero-actions.in{ opacity:1; transform:translateY(0); }

.hero-stats{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:40px;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:32px;
  opacity:0; transform:translateY(20px);
  transition:opacity .8s .9s var(--ease-out), transform .8s .9s var(--ease-out);
}
.hero-stats.in{ opacity:1; transform:translateY(0); }
.hero-stats .stat b{
  display:block; font-family:var(--font-serif);
  font-size:2.2rem; color:var(--white); font-weight:400;
  letter-spacing:-0.02em;
  line-height:1;
  margin-bottom:6px;
}
.hero-stats .stat span{ font-family:var(--font-mono); font-size:.68rem; color:rgba(255,255,255,.62); letter-spacing:.1em; text-transform:uppercase; }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.7); font-family:var(--font-mono);
  font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:36px; background:linear-gradient(180deg, rgba(255,255,255,.8), transparent); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 50.01%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ========== Sections ========== */
section{ position:relative; }
.section-pad{ padding:140px 0; }
.section-head{ max-width:640px; margin-bottom:80px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head p{ font-size:var(--fs-lead); color:var(--ink-soft); }
.bg-cream{ background:var(--cream); }
.bg-navy{ background:var(--navy-deep); color:var(--white); }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:var(--white); }
.bg-navy p{ color:rgba(255,255,255,.72); }

/* reveal */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }
.stagger.in > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ========== Trust bar ========== */
.trust-bar{
  padding:36px 0;
  background:var(--white);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-bar .container{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.trust-item{ display:flex; align-items:center; gap:12px; }
.trust-item svg{ width:22px; height:22px; stroke:var(--coral); flex-shrink:0; }
.trust-item .stars svg{ width:16px; height:16px; fill:var(--gold); stroke:none; }
.trust-item .stars{ display:flex; gap:2px; }
.trust-item strong{
  font-family:var(--font-serif); font-weight:500;
  color:var(--navy); font-size:1.1rem; letter-spacing:-0.01em;
}
/* Stack via the parent, not `display:block` on the children: a display rule
   here would outrank [data-lang]{display:none} and leak the other language. */
.trust-item > div{ display:flex; flex-direction:column; }
.trust-item .lbl{
  font-family:var(--font-mono); font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  margin-top:2px;
}

/* ========== Why us ========== */
.why-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.why-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:38px 30px;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
  position:relative; overflow:hidden;
}
.why-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, var(--coral), var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.why-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.why-card:hover::before{ transform:scaleX(1); }
.why-icon{
  width:56px; height:56px; border-radius:14px;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
  transition:background .5s var(--ease-out);
}
.why-card:hover .why-icon{ background:var(--coral-soft); }
.why-icon svg{ width:26px; height:26px; stroke:var(--coral); }
.why-card h3{ font-size:1.15rem; margin-bottom:12px; }
.why-card p{ font-size:.94rem; margin:0; line-height:1.6; }

/* ========== About ========== */
.about-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:90px; align-items:center;
}
.about-media{ position:relative; }
.about-media img{ border-radius:var(--radius); box-shadow:var(--shadow-md); aspect-ratio:4/5; object-fit:cover; }
.about-media .float-card{
  position:absolute; bottom:-32px; left:-32px;
  background:var(--white); border-radius:20px; padding:24px 28px;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:16px;
}
.about-media .float-card .num{ font-family:var(--font-serif); font-size:2.4rem; font-weight:400; color:var(--coral); line-height:1; letter-spacing:-0.02em; }
.about-media .float-card .lbl{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-mute); letter-spacing:.1em; text-transform:uppercase; max-width:14ch; line-height:1.4; }
.about-copy p{ font-size:var(--fs-lead); }
.about-copy .values{ display:grid; gap:18px; margin-top:34px; padding-top:34px; border-top:1px solid var(--line); }
.value-row{ display:flex; gap:14px; align-items:flex-start; }
.value-row svg{ width:22px; height:22px; stroke:var(--coral); flex-shrink:0; margin-top:1px; }
.value-row span{ font-weight:500; color:var(--navy); font-size:1rem; }

/* ========== Process timeline ========== */
.process-section{ background:var(--navy-deep); color:var(--white); }
.process-section .eyebrow{ color:var(--gold); }
.process-section .eyebrow::before{ background:var(--gold); }
.process-list{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:24px; position:relative;
}
.process-list::before{
  content:""; position:absolute; top:36px; left:5%; right:5%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,165,107,.35), transparent);
  z-index:0;
}
.process-item{
  position:relative; z-index:1;
  text-align:center;
  padding:0 8px;
}
.process-num{
  width:72px; height:72px; border-radius:50%;
  background:var(--navy-deep);
  border:1.5px solid var(--gold);
  color:var(--gold);
  font-family:var(--font-serif); font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px;
  transition:transform .5s var(--ease-out), background .5s var(--ease-out), color .5s var(--ease-out);
  position:relative;
}
.process-num::before{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px dashed rgba(201,165,107,.35);
  animation:spin 40s linear infinite;
}
.process-item:hover .process-num{ background:var(--gold); color:var(--navy-deep); transform:scale(1.08); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.process-item h3{
  color:var(--white); font-family:var(--font-serif);
  font-size:1.1rem; margin-bottom:8px; font-weight:500;
}
.process-item p{ font-size:.86rem; color:rgba(255,255,255,.6); line-height:1.55; }

/* ========== Team ========== */
.team-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:32px;
}
.team-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:grid; grid-template-columns:240px 1fr;
  transition:box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.team-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.team-photo{ position:relative; height:100%; min-height:300px; background:var(--cream-2); overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.team-card:hover .team-photo img{ transform:scale(1.06); }
.team-avatar{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--navy), var(--navy-deep));
}
.team-avatar span{
  font-family:var(--font-serif); color:var(--white); font-weight:400; font-size:3rem;
  opacity:.7;
}
.team-body{ padding:34px 32px; display:flex; flex-direction:column; }
.team-body h3{ font-size:1.35rem; margin-bottom:2px; }
.team-role{ font-family:var(--font-mono); color:var(--coral); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.team-exp{ font-size:.82rem; color:var(--ink-mute); margin-bottom:20px; }
.team-quote{
  font-family:var(--font-serif); font-style:italic;
  font-size:1.05rem; color:var(--ink);
  border-left:2px solid var(--coral);
  padding-left:18px; margin:0; line-height:1.5;
}
.team-tag{
  display:inline-block; margin-top:20px; align-self:flex-start;
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--navy); background:var(--gold-soft); padding:6px 12px; border-radius:999px;
  border:1px solid rgba(201,165,107,.35);
}

/* ========== Services (editorial alternating) ========== */
.services-list{ display:flex; flex-direction:column; gap:30px; }
.service-row{
  display:grid; grid-template-columns:1fr 1fr; gap:70px;
  align-items:center;
  padding:50px 0;
  border-top:1px solid var(--line);
}
.service-row:nth-child(even) .service-row-media{ order:2; }
.service-row-media{
  position:relative;
  aspect-ratio:5/4;
  border-radius:var(--radius);
  overflow:hidden;
}
.service-row-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.service-row:hover .service-row-media img{ transform:scale(1.05); }
.service-row-media .service-tag{
  position:absolute; top:20px; left:20px;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  color:var(--navy); font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
}
.service-num{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--ink-mute); text-transform:uppercase; margin-bottom:10px;
}
.service-row h3{ font-family:var(--font-serif); font-size:clamp(1.7rem, 2.6vw, 2.3rem); font-weight:400; letter-spacing:-0.02em; margin-bottom:14px; }
.service-row p{ font-size:var(--fs-lead); margin-bottom:24px; }
.service-benefits{
  display:grid; gap:10px; margin:0 0 30px;
}
.service-benefits li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.92rem; color:var(--ink); font-weight:500;
}
.service-benefits svg{ width:18px; height:18px; stroke:var(--coral); flex-shrink:0; margin-top:2px; }
.service-price-row{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line);
}
.service-price{ display:flex; align-items:baseline; gap:6px; }
.service-price .from{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-mute); }
.service-price .amount{ font-family:var(--font-serif); font-size:2rem; font-weight:400; color:var(--navy); letter-spacing:-0.02em; }
.service-price .cur{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-mute); }

/* ========== Technology ========== */
.tech-section{ background:var(--navy-deep); color:var(--white); }
.tech-section .eyebrow{ color:var(--gold); }
.tech-section .eyebrow::before{ background:var(--gold); }
.tech-grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:160px; gap:18px;
}
.tech-item{
  position:relative; border-radius:18px; overflow:hidden;
  grid-column:span 2; grid-row:span 2;
  cursor:pointer;
}
.tech-item.wide{ grid-column:span 3; }
.tech-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.tech-item:hover img{ transform:scale(1.08); }
.tech-caption{
  position:absolute; inset:auto 0 0 0; padding:20px 22px;
  background:linear-gradient(180deg, transparent 30%, rgba(11,25,41,.94));
  color:var(--white);
}
.tech-caption h4{
  font-family:var(--font-serif); font-weight:500; font-size:1.1rem;
  color:var(--white); margin-bottom:4px; letter-spacing:-0.01em;
}
.tech-caption span{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(201,165,107,.85); }

/* ========== Reviews ========== */
.reviews-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px;
  transition:box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.review-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.review-stars{ display:flex; gap:3px; margin-bottom:18px; }
.review-stars svg{ width:16px; height:16px; fill:var(--gold); stroke:none; }
.review-card p{ font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:var(--ink); margin-bottom:22px; line-height:1.55; }
.review-name{ display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.review-avatar{
  width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--navy), var(--navy-soft));
  color:var(--white); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:.9rem; font-weight:500;
}
.review-name b{ display:block; font-size:.9rem; color:var(--navy); font-weight:600; }
.review-name span{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }

/* ========== Contact ========== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact-info{ display:flex; flex-direction:column; gap:28px; }
.info-row{ display:flex; gap:16px; align-items:flex-start; }
.info-icon{
  width:48px; height:48px; border-radius:14px; background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-icon svg{ width:20px; height:20px; stroke:var(--coral); }
.info-row h4{ font-size:.95rem; margin-bottom:4px; color:var(--navy); font-weight:600; }
.info-row p{ margin:0; font-size:.94rem; }
.info-row a:hover{ color:var(--coral); }

.contact-form{
  background:var(--cream); border-radius:var(--radius); padding:42px;
  display:grid; gap:20px;
}
.contact-form h3{ margin-bottom:8px; }
.form-row{ display:grid; gap:8px; }
.form-row label{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; color:var(--navy); letter-spacing:.1em; text-transform:uppercase; }
.form-row input,.form-row textarea,.form-row select{
  width:100%; padding:14px 18px; border-radius:12px; border:1.5px solid var(--line);
  font-family:inherit; font-size:.95rem; background:var(--white);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  color:var(--ink);
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  outline:none; border-color:var(--coral); box-shadow:0 0 0 4px var(--coral-soft);
}
.form-row textarea{ resize:vertical; min-height:110px; }
.form-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-success{ display:none; text-align:center; padding:36px 12px; }
.form-success.show{ display:block; }
.form-success svg{ width:52px; height:52px; stroke:var(--coral); margin-bottom:16px; }
.contact-form.submitted form{ display:none; }

.whatsapp-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:999px;
  background:#25d366; color:var(--white); font-weight:600; font-size:.9rem;
  margin-top:16px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  box-shadow:0 8px 20px -8px rgba(37,211,102,.5);
}
.whatsapp-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(37,211,102,.65); }
.whatsapp-cta svg{ width:18px; height:18px; fill:var(--white); }

.contact-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.contact-actions .whatsapp-cta{ margin-top:0; }
.instagram-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:999px;
  background:linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color:var(--white); font-weight:600; font-size:.9rem;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  box-shadow:0 8px 20px -8px rgba(220,39,67,.5);
}
.instagram-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(220,39,67,.65); }
.instagram-cta svg{ width:18px; height:18px; color:var(--white); }

/* ========== Google reviews CTA ========== */
.reviews-cta{ margin-top:56px; display:flex; justify-content:center; }
.google-reviews-btn{
  display:inline-flex; align-items:center; gap:18px;
  padding:18px 26px 18px 22px;
  border-radius:20px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  max-width:520px;
}
.google-reviews-btn:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.google-reviews-btn .g-logo{
  flex-shrink:0;
  width:40px; height:40px; border-radius:12px;
  background:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
}
.google-reviews-btn .g-logo svg{ width:22px; height:22px; }
.google-reviews-btn .g-copy{ display:flex; flex-direction:column; text-align:left; }
.google-reviews-btn .g-copy strong{
  font-family:var(--font-serif); font-weight:500;
  color:var(--navy); font-size:1.05rem; letter-spacing:-0.01em;
}
.google-reviews-btn .g-copy .g-sub{
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  margin-top:4px;
}
.google-reviews-btn .g-arrow{
  width:18px; height:18px; color:var(--coral);
  margin-left:auto; flex-shrink:0;
  transition:transform .35s var(--ease-out);
}
.google-reviews-btn:hover .g-arrow{ transform:translateX(6px); }
@media (max-width: 480px){
  .google-reviews-btn{ padding:16px 20px; gap:14px; }
  .google-reviews-btn .g-arrow{ display:none; }
}

/* ========== Footer ========== */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,.72); padding:80px 0 32px; position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; inset:auto 0 0 0; height:200px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(255,133,98,.06), transparent);
  pointer-events:none;
}
.footer-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:60px;
  padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.1);
  position:relative;
}
.footer-brand .brand-text strong{ color:var(--white); }
.footer-brand .brand-text span{ color:rgba(255,255,255,.5); }
.footer-brand p{ color:rgba(255,255,255,.58); font-size:.92rem; margin:18px 0 22px; max-width:36ch; line-height:1.65; }
.footer-licenses{ display:flex; gap:12px; flex-wrap:wrap; }
.footer-license{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.footer-license svg{ width:12px; height:12px; stroke:var(--gold); }
.footer-col h4{ color:var(--white); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; font-weight:600; }
.footer-col ul{ display:grid; gap:14px; }
.footer-col a{ font-size:.92rem; color:rgba(255,255,255,.68); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--coral); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:28px;
  font-family:var(--font-mono); font-size:.7rem; color:rgba(255,255,255,.4);
  flex-wrap:wrap; gap:12px; letter-spacing:.06em;
}
.footer-legal-links{ display:flex; gap:20px; }
.footer-legal-links a{ color:rgba(255,255,255,.5); transition:color .3s; }
.footer-legal-links a:hover{ color:var(--coral); }

/* ========== Credentials strip ========== */
.credentials{
  padding:56px 0;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.credentials-label{
  text-align:center; font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:34px;
}
.credentials-row{
  display:flex; align-items:center; justify-content:center;
  gap:56px; flex-wrap:wrap;
}
.credential{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:.72; transition:opacity .4s var(--ease);
}
.credential:hover{ opacity:1; }
.credential svg{ width:30px; height:30px; stroke:var(--navy); }
.credential span{
  font-family:var(--font-serif); font-size:.95rem; color:var(--navy); font-weight:500;
  letter-spacing:-0.01em;
}
.credential small{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }

/* ========== Before / After slider ========== */
.beforeafter-section{ background:var(--cream); }
.ba-wrap{ max-width:820px; margin:0 auto; }
.ba-slider{
  position:relative; aspect-ratio:16/10; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-md);
  -webkit-user-select:none; user-select:none; cursor:ew-resize;
  touch-action:none;
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-after{ z-index:1; }
.ba-before-wrap{ position:absolute; inset:0; z-index:2; width:50%; overflow:hidden; }
.ba-before-wrap .ba-img{ width:auto; }
.ba-before-inner{ position:absolute; inset:0; }
.ba-label{
  position:absolute; top:16px; z-index:3;
  padding:6px 14px; border-radius:999px;
  background:rgba(11,25,41,.7); color:var(--white);
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.ba-label.before{ left:16px; }
.ba-label.after{ right:16px; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; z-index:4;
  width:2px; background:var(--white); transform:translateX(-50%);
  box-shadow:0 0 12px rgba(0,0,0,.3);
}
.ba-handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--white);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23132539' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 7l-4 5 4 5M15 7l4 5-4 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.ba-note{ text-align:center; margin-top:20px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }

/* ========== FAQ ========== */
.faq-list{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:28px 0;
  font-family:var(--font-serif); font-size:1.2rem; color:var(--navy); font-weight:500;
  letter-spacing:-0.01em;
  transition:color .3s var(--ease);
}
.faq-q:hover{ color:var(--coral); }
.faq-icon{
  flex-shrink:0; width:26px; height:26px; position:relative;
}
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--coral); transition:transform .35s var(--ease-out);
}
.faq-icon::before{ width:14px; height:2px; }
.faq-icon::after{ width:2px; height:14px; }
.faq-item.open .faq-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-a{
  overflow:hidden; max-height:0;
  transition:max-height .45s var(--ease-out);
}
.faq-a-inner{ padding:0 0 28px; }
.faq-a p{ margin:0; font-size:1.02rem; line-height:1.65; }

/* Dark FAQ variant — same treatment as the old Technology section */
.faq-section{ background:var(--navy-deep); color:var(--white); position:relative; overflow:hidden; }
.faq-section::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(45% 40% at 15% 20%, rgba(201,165,107,.12), transparent 70%),
    radial-gradient(50% 45% at 85% 80%, rgba(255,133,98,.10), transparent 70%);
  pointer-events:none;
}
.faq-section .container{ position:relative; }
.faq-section .eyebrow{ color:var(--gold); }
.faq-section .eyebrow::before{ background:var(--gold); }
.faq-section h2{ color:var(--white); }
.faq-section .faq-item{ border-bottom-color:rgba(201,165,107,.22); }
.faq-section .faq-q{ color:var(--white); }
.faq-section .faq-q:hover{ color:var(--gold); }
.faq-section .faq-icon::before,
.faq-section .faq-icon::after{ background:var(--gold); }
.faq-section .faq-a p{ color:rgba(255,255,255,.75); }

/* ========== Sticky booking bar ========== */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:550;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 30px -14px rgba(11,25,41,.2);
  transform:translateY(110%);
  transition:transform .5s var(--ease-out);
  padding:14px 0;
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.sticky-cta-text{ display:flex; flex-direction:column; }
.sticky-cta-text strong{ font-family:var(--font-serif); font-weight:500; color:var(--navy); font-size:1.05rem; }
.sticky-cta-text span{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }
.sticky-cta-actions{ display:flex; align-items:center; gap:12px; }
.sticky-cta-dismiss{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-mute); transition:background .3s var(--ease); }
.sticky-cta-dismiss:hover{ background:var(--cream); }
.sticky-cta-dismiss svg{ width:16px; height:16px; }
@media (max-width:640px){
  .sticky-cta{ padding:12px 0; }
  /* deliberate responsive hide: must outrank the language show rule */
  .sticky-cta-text span{ display:none !important; }
  .sticky-cta .btn{ padding:12px 22px; }
  .sticky-cta.show ~ .chat-launcher, .sticky-cta.show ~ .chat-panel{ bottom:88px; }
}

/* ========== Cookie consent ========== */
.cookie-banner{
  position:fixed; left:20px; bottom:20px; z-index:620;
  max-width:400px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:24px;
  transform:translateY(30px); opacity:0; pointer-events:none;
  transition:transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.cookie-banner.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cookie-banner p{ font-size:.88rem; margin:0 0 16px; color:var(--ink-soft); line-height:1.55; }
.cookie-banner .cookie-actions{ display:flex; gap:10px; }
.cookie-banner .btn{ padding:10px 20px; font-size:.85rem; }
@media (max-width:640px){ .cookie-banner{ left:12px; right:12px; bottom:12px; max-width:none; } }

/* ========== Chat widget ========== */
.chat-launcher{
  position:fixed; bottom:26px; right:26px; z-index:600;
  width:64px; height:64px; border-radius:50%;
  background:var(--coral); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 38px -10px rgba(255,133,98,.6);
  transition:transform .35s var(--ease-out);
}
.chat-launcher:hover{ transform:scale(1.08); }
.chat-launcher svg{ width:26px; height:26px; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.chat-launcher .icon-close{ position:absolute; opacity:0; transform:rotate(-45deg); }
.chat-launcher.open .icon-chat{ opacity:0; transform:rotate(45deg); }
.chat-launcher.open .icon-close{ opacity:1; transform:rotate(0); }
.chat-dot{
  position:absolute; top:4px; right:4px; width:12px; height:12px; border-radius:50%;
  background:#3ddc84; border:2px solid var(--navy-deep);
}
.chat-panel{
  position:fixed; bottom:104px; right:26px; z-index:600;
  width:380px; max-width:calc(100vw - 40px);
  height:min(540px, 72vh);
  background:var(--white); border-radius:22px;
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(20px) scale(.97); pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  border:1px solid var(--line);
}
.chat-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chat-head{
  background:linear-gradient(135deg, var(--navy), var(--navy-deep));
  color:var(--white); padding:20px 22px;
  display:flex; align-items:center; gap:14px;
}
.chat-head .avatar{
  width:40px; height:40px; border-radius:50%; background:var(--coral);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:500; font-size:.95rem;
}
.chat-head > div:last-child{ display:flex; flex-direction:column; }
.chat-head strong{ font-size:.95rem; font-weight:600; }
.chat-head span{ font-size:.72rem; color:rgba(255,255,255,.65); margin-top:2px; }
.chat-body{ flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:12px; background:var(--cream); }
.msg{ max-width:82%; padding:12px 15px; border-radius:16px; font-size:.88rem; line-height:1.5; }
.msg.bot{ background:var(--white); border:1px solid var(--line); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.user{ background:var(--coral); color:var(--white); align-self:flex-end; border-bottom-right-radius:4px; }
.chat-form{ display:flex; gap:10px; padding:16px; border-top:1px solid var(--line); background:var(--white); }
.chat-form input{
  flex:1; border:1.5px solid var(--line); border-radius:999px; padding:12px 18px; font-family:inherit; font-size:.88rem;
}
.chat-form input:focus{ outline:none; border-color:var(--coral); }
.chat-form button{
  width:42px; height:42px; border-radius:50%; background:var(--coral); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .3s var(--ease);
}
.chat-form button:hover{ background:var(--coral-hover); }
.chat-form button svg{ width:17px; height:17px; }

/* ========== Cursor glow (desktop only) ========== */
.cursor-glow{
  position:fixed; width:340px; height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,133,98,.16), transparent 60%);
  pointer-events:none; z-index:999;
  transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease), width .3s var(--ease), height .3s var(--ease);
  opacity:0;
  mix-blend-mode:screen;
  will-change:transform;
}
.cursor-glow.on{ opacity:1; }
.cursor-glow.hover{ width:420px; height:420px; }

/* ========== Utilities ========== */
body.paused *, body.paused *::before, body.paused *::after{ animation-play-state:paused !important; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:6px; }

/* Language visibility.
   `revert` restores each element's own natural display. `inherit` must not be
   used here: inside an <li> it inherits `list-item`, which makes every
   translated child render its own list marker. */
[data-lang]{ display:none; }
html[lang="en"] [data-lang="en"]{ display:revert; }
html[lang="ru"] [data-lang="ru"]{ display:revert; }
html[lang="en"] .hero-word[data-lang]{ display:inline-block; }
html[lang="ru"] .hero-word[data-lang]{ display:inline-block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal, .hero-word, .hero-sub, .hero-actions, .hero-stats{ opacity:1 !important; transform:none !important; }
  .cursor-glow, .hero-glow, .preloader-mark .draw, .preloader-brand{ display:none !important; }
  .preloader{ display:none; }
}

/* ========== Responsive ========== */
@media (max-width: 1080px){
  :root{ --gutter:26px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .reviews-track{ grid-template-columns:repeat(2,1fr); }
  .tech-grid{ grid-template-columns:repeat(4,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .process-list{ grid-template-columns:repeat(3, 1fr); row-gap:60px; }
  .process-list::before{ display:none; }
  .about-grid, .contact-grid{ gap:60px; }
}

@media (max-width: 860px){
  .nav-links{ display:none; }
  .header-whatsapp{ display:none; }
  .header-social{ display:none; }
  .lang-toggle{ display:none; }
  .header-cta .btn-primary{ display:none; }
  .menu-toggle{ display:flex; }
  .about-grid,.contact-grid{ grid-template-columns:1fr; gap:44px; }
  .team-card{ grid-template-columns:1fr; }
  .team-photo{ min-height:280px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .service-row{ grid-template-columns:1fr; gap:32px; }
  .service-row:nth-child(even) .service-row-media{ order:0; }
  .process-list{ grid-template-columns:repeat(2, 1fr); }
  .trust-bar .container{ justify-content:center; }
}

@media (max-width: 640px){
  :root{ --gutter:20px; --fs-lead:1.05rem; }
  .section-pad{ padding:90px 0; }
  .section-head{ margin-bottom:56px; }
  .why-grid, .reviews-track{ grid-template-columns:1fr; }
  .tech-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .tech-item.wide{ grid-column:span 2; }
  .form-two{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .chat-panel{ right:16px; left:16px; width:auto; bottom:96px; }
  .chat-launcher{ right:18px; bottom:18px; }
  .hero-content{ padding-top:160px; padding-bottom:80px; }
  .process-list{ grid-template-columns:1fr; }
  .contact-form{ padding:28px; }
  .hero-video-toggle{ bottom:14px; right:14px; }
  .about-media .float-card{ left:16px; bottom:-24px; padding:16px 20px; }
}