/* ==========================================================
   GlucoCare — Design System v2
   Palette: Midnight navy · Neon mint · Electric violet
   Fonts: Sora (display) + Inter (body)
   ========================================================== */

:root{
  /* --- Core brand --- */
  --mint-300:#5CFFC9;
  --mint-400:#00E5A0;      /* primary accent */
  --mint-500:#00C98D;
  --mint-600:#00A876;
  --violet-400:#9B7CFF;
  --violet-500:#7C5CFF;    /* secondary accent */
  --violet-600:#6340F0;
  --cyan-400:#22D3EE;
  --amber-400:#FFB020;

  /* --- Neutrals --- */
  --night-950:#04080F;
  --night-900:#070D18;
  --night-850:#0A1322;
  --night-800:#0E1A2C;
  --night-700:#16263D;
  --line-dark:rgba(255,255,255,.10);

  --ink-900:#081018;
  --ink-800:#16222F;
  --ink-600:#42566B;
  --ink-400:#7A8CA0;
  --ink-200:#D7E1E9;
  --paper-0:#FFFFFF;
  --paper-50:#F4F9F7;
  --paper-100:#E8F1EE;

  --whatsapp:#25D366;
  --whatsapp-dark:#128C4A;

  /* --- Gradients --- */
  --grad-mint: linear-gradient(135deg, #5CFFC9 0%, #00E5A0 45%, #00B589 100%);
  --grad-violet: linear-gradient(135deg, #9B7CFF 0%, #7C5CFF 50%, #5B34E8 100%);
  --grad-duo: linear-gradient(120deg, #00E5A0 0%, #22D3EE 45%, #7C5CFF 100%);
  --grad-night: linear-gradient(160deg, #0A1322 0%, #070D18 60%, #04080F 100%);
  --grad-text: linear-gradient(100deg, #FFFFFF 0%, #5CFFC9 45%, #9B7CFF 100%);

  /* --- Effects --- */
  --glow-mint: 0 12px 40px rgba(0,229,160,.38);
  --glow-violet: 0 12px 40px rgba(124,92,255,.38);
  --shadow-sm: 0 2px 10px rgba(8,16,24,.05);
  --shadow-md: 0 12px 34px rgba(8,16,24,.09);
  --shadow-lg: 0 28px 70px rgba(4,8,15,.20);
  --glass: rgba(255,255,255,.07);
  --glass-line: rgba(255,255,255,.14);

  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:30px;
  --radius-xl:40px;
  --radius-full:999px;

  --container:1220px;
  --nav-h:88px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink-800);
  background:var(--paper-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Sora','Inter',sans-serif;
  font-weight:700; line-height:1.12; letter-spacing:-0.03em;
  margin:0 0 .5em; color:var(--ink-900);
}
p{ margin:0 0 1em; color:var(--ink-600); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 26px; }
::selection{ background:var(--mint-400); color:var(--night-900); }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--night-900); }
::-webkit-scrollbar-thumb{ background:var(--mint-500); border-radius:10px; }

.gradient-text{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mint-text{
  background:var(--grad-mint); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal-scale.visible{ opacity:1; transform:none; }
.stagger .reveal:nth-child(1){ transition-delay:.05s }
.stagger .reveal:nth-child(2){ transition-delay:.14s }
.stagger .reveal:nth-child(3){ transition-delay:.23s }
.stagger .reveal:nth-child(4){ transition-delay:.32s }
.stagger .reveal:nth-child(5){ transition-delay:.41s }
.stagger .reveal:nth-child(6){ transition-delay:.50s }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border-radius:var(--radius-full);
  font-weight:650; font-size:15px; letter-spacing:-.01em;
  border:none; position:relative; overflow:hidden; cursor:pointer;
  transition:transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .4s ease, background .3s ease;
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; flex-shrink:0; }
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.45) 45%,transparent 65%);
  transform:translateX(-130%); transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after{ transform:translateX(130%); }
.btn:active{ transform:scale(.96); }

.btn-primary{ background:var(--grad-mint); color:#04231A; box-shadow:var(--glow-mint); }
.btn-primary:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(0,229,160,.5); }

.btn-violet{ background:var(--grad-violet); color:#fff; box-shadow:var(--glow-violet); }
.btn-violet:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(124,92,255,.5); }

.btn-glass{
  background:var(--glass); color:#fff; border:1.5px solid var(--glass-line);
  backdrop-filter:blur(14px);
}
.btn-glass:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); transform:translateY(-4px); }

.btn-dark{ background:var(--night-900); color:#fff; }
.btn-dark:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.btn-whatsapp{
  background:linear-gradient(135deg,#3BE87E,var(--whatsapp-dark)); color:#fff;
  box-shadow:0 12px 40px rgba(37,211,102,.4);
}
.btn-whatsapp:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(37,211,102,.55); }
.btn-block{ width:100%; }
.btn-sm{ padding:12px 24px; font-size:14px; }

/* ==========================================================
   LOADING SCREEN
   The shell is empty in the HTML so it paints a dark screen
   instantly — the contents are filled in by main.js.
   ========================================================== */
.preloader{
  position:fixed; inset:0; z-index:5000;
  background:var(--grad-night);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  transition:opacity .6s ease, visibility 0s linear .6s;
}
.preloader::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 35%, rgba(0,229,160,.16), transparent 65%),
             radial-gradient(60% 80% at 80% 90%, rgba(124,92,255,.20), transparent 65%);
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
body.loading{ overflow:hidden; }

.pre-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }

.pre-logo-full{
  width:min(280px, 62vw); height:auto; display:block;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.45));
  animation:preLogoIn .8s cubic-bezier(.34,1.4,.64,1) both;
}

.pre-logo{
  width:84px; height:84px; border-radius:26px; background:var(--grad-mint);
  color:#04231A; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:29px; letter-spacing:-.02em;
  box-shadow:var(--glow-mint); position:relative;
  animation:preLogoIn .8s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes preLogoIn{ from{ transform:scale(.6); opacity:0 } to{ transform:none; opacity:1 } }
.pre-logo::before,.pre-logo::after{
  content:""; position:absolute; inset:0; border-radius:26px;
  border:1.5px solid var(--mint-400);
  animation:preRing 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.pre-logo::after{ animation-delay:1.2s; }
@keyframes preRing{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.75); opacity:0 } }

.pre-name{
  font-family:'Sora',sans-serif; font-weight:700; font-size:21px; color:#fff;
  margin-top:28px; letter-spacing:-.02em;
  animation:preFade .7s ease .25s both;
}
.pre-tagline{
  font-size:13.5px; color:rgba(255,255,255,.5); margin-top:6px; letter-spacing:.02em;
  animation:preFade .7s ease .4s both;
}
@keyframes preFade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* ECG heartbeat line */
.pre-ecg{ margin-top:26px; animation:preFade .7s ease .5s both; }
.pre-ecg svg{ width:190px; height:42px; display:block; overflow:visible; }
.pre-ecg path{
  fill:none; stroke:var(--mint-400); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  filter:drop-shadow(0 0 6px rgba(0,229,160,.7));
  animation:preEcg 1.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes preEcg{
  0%{ stroke-dashoffset:340 }
  55%{ stroke-dashoffset:0 }
  100%{ stroke-dashoffset:-340 }
}

/* Progress bar */
.pre-bar{
  width:190px; height:3px; border-radius:3px; margin-top:22px; overflow:hidden;
  background:rgba(255,255,255,.12);
  animation:preFade .7s ease .55s both;
}
.pre-bar span{
  display:block; height:100%; width:0; border-radius:3px;
  background:var(--grad-mint); box-shadow:var(--glow-mint);
  transition:width .35s ease;
}

@media (prefers-reduced-motion:reduce){
  .pre-logo::before,.pre-logo::after{ display:none; }
  .pre-ecg path{ animation:none; stroke-dashoffset:0; }
}

/* ==========================================================
   NAVBAR
   ========================================================== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s ease, box-shadow .45s ease, height .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent;
}
/* Header spans the full width and uses the same fluid padding as the hero,
   so the logo lines up with the headline below it. */
.navbar .container{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  max-width:none;
  padding-left:clamp(20px, 5.5vw, 120px);
  padding-right:clamp(20px, 5.5vw, 120px);
}
.navbar.scrolled{
  height:72px; background:rgba(7,13,24,.78);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--line-dark);
}
body.light-nav .navbar.scrolled{
  background:rgba(255,255,255,.85); border-bottom-color:var(--paper-100);
  box-shadow:0 6px 30px rgba(8,16,24,.07);
}
.nav-brand{ display:flex; align-items:center; gap:13px; }
.nav-logo{
  width:48px; height:48px; border-radius:15px; background:var(--grad-mint);
  color:#04231A; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:17px; flex-shrink:0;
  box-shadow:var(--glow-mint);
}
.nav-logo-img{
  width:48px; height:48px; object-fit:contain; flex-shrink:0; display:block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
.nav-clinic-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:#fff; letter-spacing:-.02em; }
.nav-doctor-name{ font-size:12px; color:rgba(255,255,255,.55); font-weight:500; }
body.light-nav .nav-clinic-name{ color:var(--ink-900); }
body.light-nav .nav-doctor-name{ color:var(--ink-400); }
body.light-nav .navbar:not(.scrolled) .nav-clinic-name,
body.light-nav .navbar:not(.scrolled) .nav-doctor-name{ color:#fff; }
body.light-nav .navbar:not(.scrolled) .nav-doctor-name{ color:rgba(255,255,255,.55); }

.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-links a{
  font-weight:600; font-size:14.5px; padding:9px 18px; border-radius:var(--radius-full);
  color:rgba(255,255,255,.72); transition:color .3s ease, background .3s ease;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav-links a.active{ color:var(--mint-300); background:rgba(0,229,160,.12); }
body.light-nav .navbar.scrolled .nav-links a{ color:var(--ink-600); }
body.light-nav .navbar.scrolled .nav-links a:hover{ color:var(--ink-900); background:var(--paper-100); }
body.light-nav .navbar.scrolled .nav-links a.active{ color:var(--mint-600); background:rgba(0,229,160,.13); }

.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-call{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:rgba(255,255,255,.8); }
.nav-call svg{ width:17px; height:17px; color:var(--mint-400); }
body.light-nav .navbar.scrolled .nav-call{ color:var(--ink-800); }

.nav-toggle{
  display:none; width:46px; height:46px; border:none; background:transparent; color:#fff;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; z-index:1200;
}
body.light-nav .navbar.scrolled .nav-toggle{ color:var(--ink-900); }
.nav-toggle span{ width:24px; height:2.5px; border-radius:2px; background:currentColor; transition:all .4s cubic-bezier(.68,-.4,.27,1.4); }
.nav-toggle.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:1100; background:var(--grad-night);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  clip-path:circle(0% at 92% 6%); transition:clip-path .7s cubic-bezier(.76,0,.24,1);
}
.mobile-menu.active{ clip-path:circle(150% at 92% 6%); }
.mobile-menu a{ color:#fff; font-family:'Sora',sans-serif; font-size:30px; font-weight:600; }
.mobile-menu a:hover{ color:var(--mint-400); }

@media (max-width:960px){ .nav-links,.nav-call{ display:none; } .nav-toggle{ display:flex; } .nav-right .btn{ display:none; } }

/* ==========================================================
   HERO — full-bleed background video
   ========================================================== */
.hero{
  position:relative; display:flex; align-items:center;
  /* Exactly one screen tall. The ticker is pinned to the hero's bottom edge, so
     locking the hero to the viewport height puts the ticker on the fold line —
     never stranded mid-screen, never pushed below it. */
  min-height:100svh; max-height:100svh;
  padding:calc(var(--nav-h) + 28px) 0 92px; overflow:hidden; color:#fff;
  background:var(--night-950);
}
.hero-video-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(.85) contrast(1.05);
  pointer-events:none;          /* no hover controls over a backdrop */
}
.hero-video-bg::-webkit-media-controls{ display:none !important; }
/* YouTube used as the hero background — scaled to fill, clicks pass through */
.hero-yt-wrap{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background-size:cover; background-position:center;
}
/* The stage carries the zoom/offset; the player fills it. Kept invisible until
   the clip is genuinely playing, so YouTube's opening player UI is never seen. */
.hero-yt-stage{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh;
  transform-origin:center center; pointer-events:none;
}
.hero-yt-stage iframe,
.hero-yt-stage > div{
  width:100%; height:100%; border:0; pointer-events:none;
  filter:saturate(.9) contrast(1.03);
  opacity:0; transition:opacity .8s ease;
}
.hero-yt-wrap.ready .hero-yt-stage iframe{ opacity:1; }

/* Swallows any stray pointer event so the backdrop can never be clicked,
   paused or turned into a picture-in-picture window. */
.hero-yt-shield{ position:absolute; inset:0; z-index:2; background:transparent; }

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(4,8,15,.96) 0%, rgba(7,13,24,.88) 42%, rgba(4,8,15,.55) 70%, rgba(4,8,15,.75) 100%),
    radial-gradient(90% 80% at 85% 20%, rgba(0,229,160,.18) 0%, transparent 60%),
    radial-gradient(70% 70% at 10% 90%, rgba(124,92,255,.22) 0%, transparent 65%);
}
.hero-noise{
  position:absolute; inset:0; z-index:2; opacity:.5; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.hero-orb{
  position:absolute; border-radius:50%; filter:blur(90px); z-index:1; pointer-events:none;
  animation:orbFloat 16s ease-in-out infinite;
}
.hero-orb.o1{ width:460px; height:460px; background:rgba(0,229,160,.30); top:-140px; right:-60px; }
.hero-orb.o2{ width:360px; height:360px; background:rgba(124,92,255,.32); bottom:-120px; left:-60px; animation-delay:-6s; }
@keyframes orbFloat{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-30px,40px) scale(1.12);} }

/* The hero is a full-bleed banner — it ignores the site's centred container width
   and uses fluid side padding instead, so the headline sits closer to the edge. */
.hero .container{
  position:relative; z-index:5; width:100%;
  max-width:none;
  padding-left:clamp(20px, 5.5vw, 120px);
  padding-right:clamp(20px, 5.5vw, 120px);
}
.hero-inner{ max-width:880px; }

.hero-badge{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
  padding:9px 20px 9px 12px; border-radius:var(--radius-full);
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line);
  backdrop-filter:blur(14px); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9);
}
.hero-badge .live-dot{
  width:9px; height:9px; border-radius:50%; background:var(--mint-400); position:relative; flex-shrink:0;
}
.hero-badge .live-dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--mint-400);
  animation:ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 0%{ transform:scale(.7); opacity:1;} 100%{ transform:scale(1.6); opacity:0;} }

.hero h1{
  color:#fff; font-size:clamp(2.3rem,5.1vw,4.1rem); line-height:1.06; margin-bottom:20px;
  letter-spacing:-.045em; font-weight:700;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{
  display:block; animation:riseIn 1.1s cubic-bezier(.16,1,.3,1) both;
}
.hero h1 .line:nth-child(1) > span{ animation-delay:.1s }
.hero h1 .line:nth-child(2) > span{ animation-delay:.24s }
.hero h1 .line:nth-child(3) > span{ animation-delay:.38s }
@keyframes riseIn{ from{ transform:translateY(105%); opacity:0 } to{ transform:none; opacity:1 } }

.hero .lead{
  color:rgba(255,255,255,.76); font-size:clamp(15.5px,1.3vw,18px); max-width:540px; margin-bottom:30px;
  animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .52s both;
}
@keyframes fadeUp{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .64s both; }

.hero-trust{
  display:flex; align-items:center; gap:24px; margin-top:30px; flex-wrap:wrap;
  animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .78s both;
}
.trust-item{ display:flex; align-items:center; gap:11px; }
.trust-item svg{ width:20px; height:20px; color:var(--mint-400); flex-shrink:0; }
.trust-item span{ font-size:14px; color:rgba(255,255,255,.72); font-weight:500; }

/* Mute / sound-off chip + video credit */
.hero-videochip{
  position:absolute; right:26px; bottom:74px; z-index:6;
  display:flex; align-items:center; gap:9px; padding:9px 16px;
  border-radius:var(--radius-full); background:rgba(4,8,15,.5);
  border:1px solid var(--glass-line); backdrop-filter:blur(12px);
  font-size:12.5px; color:rgba(255,255,255,.7); font-weight:500;
}
.hero-videochip .bars{ display:flex; align-items:flex-end; gap:2.5px; height:14px; }
.hero-videochip .bars i{
  width:2.5px; background:var(--mint-400); border-radius:2px; animation:eq 1.1s ease-in-out infinite;
}
.hero-videochip .bars i:nth-child(1){ height:40%; animation-delay:0s }
.hero-videochip .bars i:nth-child(2){ height:100%; animation-delay:.18s }
.hero-videochip .bars i:nth-child(3){ height:65%; animation-delay:.36s }
.hero-videochip .bars i:nth-child(4){ height:85%; animation-delay:.54s }
@keyframes eq{ 0%,100%{ transform:scaleY(.4) } 50%{ transform:scaleY(1) } }

/* Scroll cue */
.scroll-cue{
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.scroll-cue .rail{ width:1.5px; height:38px; background:linear-gradient(to bottom,var(--mint-400),transparent); position:relative; overflow:hidden; }
.scroll-cue .rail::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:16px; background:#fff;
  animation:railDrop 2s ease-in-out infinite;
}
@keyframes railDrop{ 0%{ transform:translateY(-18px) } 100%{ transform:translateY(44px) } }

@media (max-width:960px){
  /* On phones let a tall stack grow rather than clip it — the ticker may sit just
     below the fold there, which is fine on a scrolling touch screen. */
  .hero{ min-height:100svh; max-height:none; text-align:left; }
  .hero-videochip{ display:none; }
  .hero-trust{ gap:16px; }
}

/* Short desktop screens (most laptops are ~640-780px of usable viewport).
   Tighten the hero so the ticker along its bottom edge stays above the fold. */
@media (min-width:961px) and (max-height:820px){
  .hero{ padding:calc(var(--nav-h) + 16px) 0 80px; }
  .hero h1{ font-size:clamp(2rem,3.5vw,3.1rem); margin-bottom:16px; }
  .hero-badge{ margin-bottom:14px; }
  .hero .lead{ margin-bottom:22px; }
  .hero-trust{ margin-top:22px; }
  .scroll-cue{ display:none; }
}

/* ==========================================================
   MARQUEE TICKER
   ========================================================== */
.marquee{
  background:var(--night-900); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  padding:22px 0; overflow:hidden; position:relative;
}
.marquee-track{ display:flex; gap:52px; width:max-content; animation:scrollX 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scrollX{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee-item{
  display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.55);
  font-family:'Sora',sans-serif; font-size:17px; font-weight:600; white-space:nowrap; letter-spacing:-.02em;
}
.marquee-item .dot{ width:7px; height:7px; border-radius:50%; background:var(--mint-400); flex-shrink:0; }

/* Ticker sitting along the bottom edge of the hero, over the video */
.hero-marquee{
  position:absolute; bottom:0; left:0; right:0; z-index:6;
  padding:13px 0;
  background:linear-gradient(to top, rgba(4,8,15,.82), rgba(4,8,15,.42));
  backdrop-filter:blur(14px) saturate(150%);
  border-top:1px solid var(--glass-line); border-bottom:none;
}
.hero-marquee .marquee-item{ font-size:15.5px; color:rgba(255,255,255,.72); }

/* ==========================================================
   STATS
   ========================================================== */
.stats-bar{ background:var(--night-900); position:relative; overflow:hidden; }
.stats-bar::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 130% at 50% 0%, rgba(0,229,160,.12) 0%, transparent 70%);
}
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); padding:64px 0; position:relative; }
.stat-item{ text-align:center; color:#fff; position:relative; }
.stat-item:not(:last-child)::after{
  content:""; position:absolute; right:0; top:12%; height:76%; width:1px;
  background:linear-gradient(to bottom,transparent,var(--line-dark),transparent);
}
.stat-number{
  font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2rem,3.6vw,3.1rem);
  background:var(--grad-mint); -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.04em;
}
.stat-label{ font-size:13.5px; color:rgba(255,255,255,.5); margin-top:6px; font-weight:500; letter-spacing:.01em; }
@media (max-width:760px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:40px 0; padding:48px 0; }
  .stat-item:not(:last-child)::after{ display:none; }
}

/* ==========================================================
   SECTIONS
   ========================================================== */
.section{ padding:130px 0; position:relative; }
.section-tight{ padding:90px 0; position:relative; }
.bg-tint{ background:var(--paper-50); }
.bg-dark{ background:var(--grad-night); color:#fff; }
.bg-dark h2,.bg-dark h3{ color:#fff; }
.bg-dark p{ color:rgba(255,255,255,.62); }

.section-head{ text-align:center; max-width:680px; margin:0 auto 66px; }
.section-head.left{ text-align:left; margin-left:0; }
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,229,160,.10); color:var(--mint-600); border:1px solid rgba(0,229,160,.28);
  padding:8px 18px; border-radius:var(--radius-full);
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px;
}
.bg-dark .eyebrow-pill{ color:var(--mint-300); background:rgba(0,229,160,.12); }
.section-head h2{ font-size:clamp(2rem,3.9vw,3.1rem); margin-bottom:16px; }
.section-head p{ font-size:17.5px; }

.section-foot{ display:flex; justify-content:center; margin-top:54px; }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }

/* ==========================================================
   FEATURE CARDS (dark glass)
   ========================================================== */
.feature-card{
  position:relative; padding:38px 30px; border-radius:var(--radius-md);
  background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(16px);
  overflow:hidden; transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, background .4s ease;
}
.feature-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,160,.7),transparent);
  opacity:0; transition:opacity .45s ease;
}
.feature-card:hover{ transform:translateY(-10px); background:rgba(255,255,255,.11); border-color:rgba(0,229,160,.35); }
.feature-card:hover::before{ opacity:1; }
.feature-icon{
  width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:var(--grad-mint); margin-bottom:24px; box-shadow:var(--glow-mint);
}
.feature-icon svg{ width:27px; height:27px; color:#04231A; }
.feature-icon.violet{ background:var(--grad-violet); box-shadow:var(--glow-violet); }
.feature-icon.violet svg{ color:#fff; }
.feature-card h3{ font-size:19.5px; margin-bottom:10px; color:#fff; }
.feature-card p{ font-size:14.5px; margin:0; color:rgba(255,255,255,.6); }

/* ==========================================================
   SERVICE CARDS (light)
   ========================================================== */
.service-card{
  background:#fff; border-radius:var(--radius-md); padding:34px 30px;
  border:1px solid var(--paper-100); box-shadow:var(--shadow-sm);
  display:flex; gap:20px; position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.service-card::after{
  content:""; position:absolute; inset:auto -40% -70% auto; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,160,.16),transparent 70%);
  opacity:0; transition:opacity .5s ease;
}
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:rgba(0,229,160,.4); }
.service-card:hover::after{ opacity:1; }
.service-icon{
  width:54px; height:54px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,229,160,.16),rgba(124,92,255,.14));
  display:flex; align-items:center; justify-content:center;
}
.service-icon svg{ width:25px; height:25px; color:var(--mint-600); }
.service-card h3{ font-size:17.5px; margin-bottom:7px; }
.service-card p{ font-size:14.5px; margin:0; }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonial-track{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0 18px; }
.testimonial-track::-webkit-scrollbar{ height:6px; }
.testimonial-track::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:6px; }
.testimonial-card{
  scroll-snap-align:start; min-width:360px; max-width:360px; padding:34px;
  border-radius:var(--radius-md); background:var(--glass);
  border:1px solid var(--glass-line); backdrop-filter:blur(16px);
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.testimonial-card:hover{ transform:translateY(-8px); border-color:rgba(0,229,160,.35); }
.quote-mark{ font-family:'Sora',sans-serif; font-size:56px; line-height:.6; color:var(--mint-400); opacity:.45; }
.stars{ display:flex; gap:3px; margin:14px 0 16px; }
.stars svg{ width:16px; height:16px; fill:var(--amber-400); color:var(--amber-400); }
.testimonial-card p{ font-size:15.5px; color:rgba(255,255,255,.82); line-height:1.65; }
.testimonial-person{ display:flex; align-items:center; gap:13px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-dark); }
.testimonial-avatar{
  width:48px; height:48px; border-radius:50%; background:var(--grad-duo); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#04231A; font-weight:800; font-size:15px;
  font-family:'Sora',sans-serif;
}
.testimonial-name{ font-weight:700; font-size:15px; color:#fff; }
.testimonial-role{ font-size:12.5px; color:rgba(255,255,255,.45); }

/* ==========================================================
   CTA BAND
   ========================================================== */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  background:var(--grad-night); border:1px solid var(--line-dark);
  border-radius:var(--radius-xl); padding:86px 50px; margin:0 26px;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 90% at 20% 10%, rgba(0,229,160,.22), transparent 60%),
    radial-gradient(60% 90% at 85% 90%, rgba(124,92,255,.26), transparent 60%);
}
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,3.5vw,2.9rem); max-width:700px; margin:0 auto 16px; }
.cta-band p{ color:rgba(255,255,255,.68); max-width:520px; margin:0 auto 38px; font-size:17px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================
   PAGE HERO (inner pages)
   ========================================================== */
.page-hero{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  background:var(--grad-night); padding:calc(var(--nav-h) + 90px) 0 110px;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(0,229,160,.18), transparent 60%),
    radial-gradient(70% 90% at 90% 100%, rgba(124,92,255,.24), transparent 60%);
}
.page-hero .container{ position:relative; z-index:3; }
.page-hero h1{ color:#fff; font-size:clamp(2.3rem,4.6vw,3.6rem); }
.page-hero p{ color:rgba(255,255,255,.7); font-size:17.5px; max-width:600px; margin:0 auto; }
.breadcrumb{ display:flex; gap:9px; justify-content:center; font-size:13px; color:rgba(255,255,255,.45); margin-bottom:20px; letter-spacing:.02em; }
.breadcrumb a:hover{ color:var(--mint-400); }

/* ==========================================================
   ABOUT PAGE
   ========================================================== */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:74px; align-items:center; }
.about-portrait{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.about-portrait::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,8,15,.75) 0%, transparent 45%);
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; }
.about-badge{ position:absolute; bottom:24px; left:24px; right:24px; z-index:3; }
.about-badge .name{ font-family:'Sora',sans-serif; font-weight:700; font-size:19px; color:#fff; }
.about-badge .cred{ font-size:13px; color:var(--mint-300); font-weight:500; }

.credential-list li{
  display:flex; gap:13px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid var(--paper-100); font-size:15px; color:var(--ink-600);
}
.credential-list li:last-child{ border-bottom:none; }
.credential-list svg{ width:19px; height:19px; color:var(--mint-500); flex-shrink:0; margin-top:3px; }

.tag-pill{
  display:inline-block; padding:11px 22px; border-radius:var(--radius-full);
  font-size:14px; font-weight:600; margin:0 9px 10px 0;
  background:#fff; color:var(--ink-800); border:1.5px solid var(--paper-100);
  transition:all .35s cubic-bezier(.34,1.4,.64,1);
}
.tag-pill:hover{ background:var(--grad-mint); color:#04231A; border-color:transparent; transform:translateY(-3px); box-shadow:var(--glow-mint); }

.timeline{ position:relative; max-width:780px; margin:0 auto; padding-left:38px; }
.timeline::before{
  content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(to bottom, var(--mint-400), var(--violet-500));
  opacity:.35;
}
.timeline-item{ position:relative; padding-bottom:42px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-38px; top:3px; width:22px; height:22px; border-radius:50%;
  background:var(--grad-mint); border:5px solid var(--paper-50); box-shadow:0 0 0 2px var(--mint-400);
}
.timeline-year{ font-family:'Sora',sans-serif; font-weight:800; color:var(--mint-600); font-size:14px; letter-spacing:.04em; margin-bottom:5px; }
.timeline-event{ font-size:15.5px; color:var(--ink-800); font-weight:500; }

.achieve-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.achieve-card{
  text-align:center; padding:38px 22px; border-radius:var(--radius-md); background:#fff;
  border:1px solid var(--paper-100); box-shadow:var(--shadow-sm);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.achieve-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.achieve-number{
  font-family:'Sora',sans-serif; font-weight:800; font-size:2.3rem; letter-spacing:-.04em;
  background:var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.achieve-label{ font-size:13.5px; color:var(--ink-400); margin-top:6px; }

.philosophy-block{
  position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:72px;
  background:var(--grad-night); border:1px solid var(--line-dark); color:#fff;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.philosophy-block::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 100% at 10% 20%, rgba(0,229,160,.18), transparent 60%),
             radial-gradient(60% 90% at 95% 90%, rgba(124,92,255,.24), transparent 60%);
}
.philosophy-block > *{ position:relative; z-index:2; }
.philosophy-block blockquote{
  font-family:'Sora',sans-serif; font-size:clamp(19px,2vw,25px); line-height:1.5;
  color:#fff; margin:0; font-weight:600; letter-spacing:-.02em;
}
.philosophy-points li{ display:flex; gap:13px; padding:11px 0; color:rgba(255,255,255,.78); font-size:15.5px; }
.philosophy-points svg{ width:21px; height:21px; color:var(--mint-400); flex-shrink:0; }

@media (max-width:960px){
  .about-grid,.philosophy-block{ grid-template-columns:1fr; gap:44px; }
  .philosophy-block{ padding:44px 28px; }
  .achieve-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================
   BLOGS
   ========================================================== */
.blog-filter{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-bottom:54px; }
.filter-chip{
  padding:11px 24px; border-radius:var(--radius-full); font-size:14px; font-weight:600;
  border:1.5px solid var(--paper-100); background:#fff; color:var(--ink-600);
  transition:all .35s cubic-bezier(.34,1.4,.64,1);
}
.filter-chip:hover{ border-color:var(--mint-400); color:var(--mint-600); transform:translateY(-2px); }
.filter-chip.active{ background:var(--grad-mint); color:#04231A; border-color:transparent; box-shadow:var(--glow-mint); }

.blog-card{
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--paper-100); box-shadow:var(--shadow-sm);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.blog-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.blog-card[data-post-index]{ cursor:pointer; }
.blog-thumb{ aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--paper-100); }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.blog-card:hover .blog-thumb img{ transform:scale(1.09); }
.blog-cat{
  position:absolute; top:16px; left:16px; padding:6px 15px; border-radius:var(--radius-full);
  background:rgba(4,8,15,.72); backdrop-filter:blur(10px); color:var(--mint-300);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
}
.blog-body{ padding:28px; }
.blog-meta{ display:flex; gap:12px; font-size:12.5px; color:var(--ink-400); margin-bottom:12px; }
.blog-body h3{ font-size:19px; margin-bottom:11px; line-height:1.3; }
.blog-body p{ font-size:14.5px; margin:0; }
.blog-readmore{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-weight:700; font-size:14px; color:var(--mint-600); }
.blog-readmore svg{ width:16px; height:16px; transition:transform .4s cubic-bezier(.34,1.4,.64,1); }
.blog-card:hover .blog-readmore svg{ transform:translateX(6px); }

/* ==========================================================
   SOCIAL CARDS (Home page → Blogs page)
   ========================================================== */
.social-card{
  display:flex; flex-direction:column; gap:16px;
  padding:36px; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--paper-100); box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.social-card::after{
  content:""; position:absolute; inset:auto -30% -60% auto; width:260px; height:260px; border-radius:50%;
  opacity:0; transition:opacity .5s ease;
}
.social-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.social-card:hover::after{ opacity:1; }
.social-ig:hover{ border-color:rgba(221,42,123,.4); }
.social-ig::after{ background:radial-gradient(circle, rgba(221,42,123,.16), transparent 70%); }
.social-yt:hover{ border-color:rgba(196,48,43,.4); }
.social-yt::after{ background:radial-gradient(circle, rgba(196,48,43,.16), transparent 70%); }
.social-card > *{ position:relative; z-index:2; }

.social-card-top{ display:flex; align-items:center; gap:16px; }
.social-card-top h3{ font-size:20px; margin:0 0 2px; }
.social-handle{ font-size:13.5px; color:var(--ink-400); font-weight:500; }
.social-badge{
  width:56px; height:56px; border-radius:17px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.social-badge svg{ width:26px; height:26px; color:#fff; }
.social-badge.ig{
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF,#515BD4);
  box-shadow:0 10px 28px rgba(221,42,123,.35);
}
.social-badge.yt{
  background:linear-gradient(135deg,#FF4E45,#C4302B);
  box-shadow:0 10px 28px rgba(196,48,43,.32);
}
.social-card p{ font-size:15px; margin:0; }

.social-reels{ display:flex; gap:10px; margin-top:4px; }
.reel-tile{
  flex:1; aspect-ratio:9/14; border-radius:12px; overflow:hidden;
  background:linear-gradient(150deg,#F58529,#DD2A7B 45%,#8134AF 78%,#515BD4);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1);
}
.reel-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.social-card:hover .reel-tile img{ transform:scale(1.07); }
.reel-play{
  position:relative; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(4,8,15,.42); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
}
.social-card:hover .reel-tile{ transform:translateY(-4px); }
.social-card:hover .reel-tile:nth-child(2){ transition-delay:.05s }
.social-card:hover .reel-tile:nth-child(3){ transition-delay:.1s }
.social-card:hover .reel-tile:nth-child(4){ transition-delay:.15s }
.reel-tile svg{ width:14px; height:14px; fill:#fff; color:#fff; margin-left:2px; }
.reel-tile.more{
  background:var(--paper-100); color:var(--ink-600);
  font-family:'Sora',sans-serif; font-weight:700; font-size:16px;
}

.social-thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.social-thumb{
  position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:var(--night-800); display:block;
}
.social-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.social-card:hover .social-thumb img{ transform:scale(1.07); }
.thumb-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#FF4E45,#C4302B);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(196,48,43,.45);
}
.thumb-play svg{ width:15px; height:15px; fill:#fff; color:#fff; margin-left:2px; }

.social-btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:auto; padding-top:6px;
  font-weight:700; font-size:14.5px; color:var(--ink-900);
}
.social-btn svg{ width:17px; height:17px; transition:transform .4s cubic-bezier(.34,1.4,.64,1); }
.social-card:hover .social-btn svg{ transform:translateX(6px); }
.social-ig:hover .social-btn{ color:#DD2A7B; }
.social-yt:hover .social-btn{ color:#C4302B; }

@media (max-width:640px){ .social-card{ padding:26px; } }

/* Anchor links from the Home page land below the fixed header */
#instagramRoot, #youtubeRoot{ scroll-margin-top:90px; }

/* YouTube */
.youtube-section{ background:var(--paper-50); }
.yt-header{ display:flex; justify-content:center; margin-bottom:18px; }
.yt-icon-badge{
  width:54px; height:54px; border-radius:17px; background:linear-gradient(135deg,#FF4E45,#C4302B);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 36px rgba(196,48,43,.35);
}
.yt-icon-badge svg{ width:28px; height:28px; color:#fff; }
.youtube-section .eyebrow-pill{ background:rgba(196,48,43,.09); color:#C4302B; border-color:rgba(196,48,43,.28); }

.yt-card{ cursor:pointer; }
.yt-thumb{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden;
  background:var(--grad-night); box-shadow:var(--shadow-sm); border:1px solid var(--paper-100);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.yt-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,8,15,.65), transparent 55%),
             radial-gradient(70% 100% at 20% 20%, rgba(0,229,160,.20), transparent 60%),
             radial-gradient(70% 100% at 90% 90%, rgba(124,92,255,.22), transparent 60%);
}
.yt-card:hover .yt-thumb{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.yt-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.yt-card:hover .yt-thumb img{ transform:scale(1.06); }
.yt-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,#FF4E45,#C4302B);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 40px rgba(196,48,43,.5);
  transition:transform .45s cubic-bezier(.34,1.4,.64,1);
}
.yt-play svg{ width:26px; height:26px; fill:#fff; color:#fff; margin-left:4px; }
.yt-play::before{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.55);
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.yt-card:hover .yt-play{ transform:translate(-50%,-50%) scale(1.12); }
.yt-title{
  margin-top:16px; font-family:'Sora',sans-serif; font-weight:600; font-size:17px;
  color:var(--ink-900); letter-spacing:-.02em; line-height:1.35;
}

/* Instagram */
.instagram-section{ background:var(--grad-night); position:relative; overflow:hidden; }
.instagram-section::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 80% 10%, rgba(221,42,123,.20), transparent 60%),
             radial-gradient(60% 80% at 10% 90%, rgba(124,92,255,.24), transparent 60%);
}
.instagram-section .container{ position:relative; z-index:3; }
.instagram-section h2,.instagram-section h3{ color:#fff; }
.instagram-section .section-head p{ color:rgba(255,255,255,.62); }
.instagram-section .eyebrow-pill{ background:rgba(221,42,123,.14); color:#FF8FC4; border-color:rgba(221,42,123,.35); }
.ig-header{ display:flex; justify-content:center; margin-bottom:18px; }
.ig-icon-badge{
  width:54px; height:54px; border-radius:17px;
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF,#515BD4);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 36px rgba(221,42,123,.45);
}
.ig-icon-badge svg{ width:26px; height:26px; color:#fff; }
.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ig-embed-wrap{
  border-radius:var(--radius-md); overflow:hidden; background:#fff;
  border:1px solid var(--glass-line); min-height:440px;
  display:flex; align-items:center; justify-content:center;
}
.ig-caption{ text-align:center; font-size:14px; color:rgba(255,255,255,.6); margin-top:14px; font-weight:500; }
.ig-follow-card{
  border-radius:var(--radius-md); min-height:440px; padding:36px; gap:16px; text-align:center;
  background:linear-gradient(150deg,#F58529,#DD2A7B 45%,#8134AF 75%,#515BD4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.ig-follow-card:hover{ transform:translateY(-10px); box-shadow:0 26px 60px rgba(221,42,123,.45); }
.ig-follow-card svg{ width:52px; height:52px; }
.ig-follow-card h3{ color:#fff; margin-bottom:0; }
.ig-follow-card p{ color:rgba(255,255,255,.88); font-size:14.5px; }

@media (max-width:1000px){ .ig-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   CONTACT
   ========================================================== */
.contact-actions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:-150px; position:relative; z-index:6; }
.contact-action-card{
  background:#fff; border-radius:var(--radius-md); padding:40px 30px; text-align:center;
  box-shadow:var(--shadow-lg); border:1px solid var(--paper-100);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.contact-action-card:hover{ transform:translateY(-10px); }
.cac-icon{ width:68px; height:68px; border-radius:20px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; }
.cac-icon svg{ width:29px; height:29px; color:#fff; }
.cac-icon.whatsapp{ background:linear-gradient(135deg,#3BE87E,var(--whatsapp-dark)); box-shadow:0 12px 34px rgba(37,211,102,.38); }
.cac-icon.call{ background:var(--grad-mint); box-shadow:var(--glow-mint); }
.cac-icon.call svg{ color:#04231A; }
.cac-icon.email{ background:var(--grad-violet); box-shadow:var(--glow-violet); }
.contact-action-card h3{ font-size:18.5px; }
.contact-action-card p{ font-size:14.5px; margin-bottom:24px; }

.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.info-block{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--paper-100); }
.info-block:last-of-type{ border-bottom:none; }
.info-icon{
  width:50px; height:50px; border-radius:15px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,229,160,.16),rgba(124,92,255,.14));
  display:flex; align-items:center; justify-content:center;
}
.info-icon svg{ width:22px; height:22px; color:var(--mint-600); }
.info-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-400); font-weight:700; margin-bottom:4px; }
.info-value{ font-size:15.5px; color:var(--ink-900); font-weight:500; }

.map-frame{ border-radius:var(--radius-md); overflow:hidden; margin-top:28px; border:1px solid var(--paper-100); box-shadow:var(--shadow-sm); }
.map-frame iframe{ width:100%; height:280px; border:0; display:block; filter:grayscale(.25); }

.form-card{
  background:#fff; border-radius:var(--radius-lg); padding:48px;
  box-shadow:var(--shadow-md); border:1px solid var(--paper-100);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:13px; font-weight:700; color:var(--ink-800); margin-bottom:9px; letter-spacing:.01em; }
.form-group input,.form-group textarea,.form-group select{
  width:100%; padding:15px 17px; border-radius:14px; border:1.5px solid var(--paper-100);
  font-family:inherit; font-size:15px; color:var(--ink-900); background:var(--paper-50);
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none; border-color:var(--mint-400); background:#fff;
  box-shadow:0 0 0 4px rgba(0,229,160,.16);
}
.form-group textarea{ resize:vertical; min-height:130px; }
.form-note{ font-size:12.5px; color:var(--ink-400); margin-top:12px; text-align:center; }

.faq-item{
  border:1px solid var(--paper-100); border-radius:18px; margin-bottom:14px; overflow:hidden;
  background:#fff; transition:box-shadow .35s ease, border-color .35s ease;
}
.faq-item.open{ box-shadow:var(--shadow-sm); border-color:rgba(0,229,160,.4); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 26px; cursor:pointer; font-weight:700; font-size:16px; color:var(--ink-900);
}
.faq-q .chev{ width:20px; height:20px; color:var(--mint-600); flex-shrink:0; transition:transform .4s cubic-bezier(.34,1.4,.64,1); }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1); }
.faq-item.open .faq-a{ max-height:260px; }
.faq-a-inner{ padding:0 26px 24px; font-size:15px; color:var(--ink-600); }

@media (max-width:960px){
  .contact-actions-grid{ grid-template-columns:1fr; margin-top:-110px; }
  .contact-split{ grid-template-columns:1fr; gap:44px; }
  .form-row{ grid-template-columns:1fr; }
  .form-card{ padding:30px; }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{ background:var(--night-950); color:rgba(255,255,255,.6); padding:96px 0 0; position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,160,.5),rgba(124,92,255,.5),transparent);
}
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:54px; padding-bottom:64px; border-bottom:1px solid var(--line-dark); }
.footer-brand{ display:flex; gap:13px; align-items:center; margin-bottom:20px; }
.footer-col h4{ color:#fff; font-size:15px; margin-bottom:22px; letter-spacing:-.01em; }
.footer-col ul li{ margin-bottom:13px; }
.footer-col a{ font-size:14.5px; color:rgba(255,255,255,.55); transition:color .3s ease, padding-left .3s ease; }
.footer-col a:hover{ color:var(--mint-400); padding-left:4px; }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{
  width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); transition:all .4s cubic-bezier(.34,1.4,.64,1);
}
.footer-social a:hover{ background:var(--grad-mint); color:#04231A; transform:translateY(-4px); border-color:transparent; box-shadow:var(--glow-mint); }
.footer-social svg{ width:18px; height:18px; }
.footer-bottom{ text-align:center; padding:30px 0; font-size:13px; color:rgba(255,255,255,.35); }

@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:620px){ .footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   FLOATING BUTTONS + MODAL
   ========================================================== */
.wa-float{
  position:fixed; bottom:28px; right:28px; z-index:900; width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#3BE87E,var(--whatsapp-dark));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 40px rgba(37,211,102,.5);
  transition:transform .4s cubic-bezier(.34,1.4,.64,1);
}
.wa-float:hover{ transform:scale(1.12) rotate(6deg); }
.wa-float svg{ width:31px; height:31px; color:#fff; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--whatsapp);
  animation:waRing 2.4s cubic-bezier(0,0,.2,1) infinite; z-index:-1;
}
@keyframes waRing{ 0%{ transform:scale(1); opacity:.55 } 100%{ transform:scale(2); opacity:0 } }

.to-top{
  position:fixed; bottom:28px; left:28px; z-index:900; width:50px; height:50px; border-radius:50%;
  background:var(--night-900); color:var(--mint-400); border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:all .4s ease;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--grad-mint); color:#04231A; }
.to-top svg{ width:20px; height:20px; }

.video-modal{
  position:fixed; inset:0; z-index:2000; background:rgba(4,8,15,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s;
}
.video-modal.active{ opacity:1; visibility:visible; transition:opacity .45s ease; }
.video-modal-inner{ width:100%; max-width:960px; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#000; box-shadow:var(--shadow-lg); }
.video-modal-inner iframe,.video-modal-inner video{ width:100%; height:100%; border:0; }
.video-modal-close{
  position:absolute; top:28px; right:28px; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid var(--glass-line); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:all .35s ease;
}
.video-modal-close:hover{ background:rgba(255,255,255,.22); transform:rotate(90deg); }
.video-modal-close svg{ width:21px; height:21px; }

/* ==========================================================
   ARTICLE POPUP
   ========================================================== */
.article-modal{
  position:fixed; inset:0; z-index:2100; background:rgba(4,8,15,.82);
  display:flex; align-items:center; justify-content:center; padding:28px;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s;
}
.article-modal.active{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.article-panel{
  position:relative; width:100%; max-width:760px; max-height:90vh;
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:translateY(40px) scale(.97); opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.article-modal.active .article-panel{ transform:none; opacity:1; }
.article-scroll{ max-height:90vh; overflow-y:auto; overscroll-behavior:contain; }
.article-scroll::-webkit-scrollbar{ width:8px; }
.article-scroll::-webkit-scrollbar-track{ background:var(--paper-50); }
.article-scroll::-webkit-scrollbar-thumb{ background:var(--mint-400); border-radius:8px; }

.article-close{
  position:absolute; top:18px; right:18px; z-index:10;
  width:42px; height:42px; border-radius:50%;
  background:rgba(4,8,15,.55); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:all .35s cubic-bezier(.34,1.4,.64,1);
}
.article-close:hover{ background:rgba(4,8,15,.8); transform:rotate(90deg); }
.article-close svg{ width:20px; height:20px; }

.article-cover{ position:relative; aspect-ratio:16/8; overflow:hidden; background:var(--paper-100); }
.article-cover img{ width:100%; height:100%; object-fit:cover; }
.article-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(255,255,255,.95), transparent 45%);
}
.article-cover .blog-cat{ z-index:3; }

.article-body{ padding:8px 52px 52px; }
.article-meta{ display:flex; gap:12px; font-size:13px; color:var(--ink-400); margin-bottom:12px; }
.article-body h2{ font-size:clamp(1.6rem,3vw,2.15rem); line-height:1.18; margin-bottom:22px; }
.article-body h3{
  font-size:19px; margin:34px 0 12px; color:var(--ink-900);
  padding-left:16px; border-left:3px solid var(--mint-400);
}
.article-body p{ font-size:16.5px; line-height:1.78; color:var(--ink-600); margin-bottom:18px; }

.article-author{
  display:flex; align-items:center; gap:13px; padding:18px 0 26px;
  margin-bottom:10px; border-bottom:1px solid var(--paper-100);
}
.article-author-name{ font-weight:700; font-size:15px; color:var(--ink-900); }
.article-author-cred{ font-size:12.5px; color:var(--ink-400); }

.article-list{ margin:0 0 20px; }
.article-list li{
  display:flex; gap:12px; align-items:flex-start; padding:9px 0;
  font-size:16px; color:var(--ink-600); line-height:1.6;
}
.article-list svg{ width:18px; height:18px; color:var(--mint-500); flex-shrink:0; margin-top:5px; }

.article-quote{
  margin:28px 0; padding:24px 28px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(0,229,160,.10), rgba(124,92,255,.08));
  border:1px solid rgba(0,229,160,.25);
  font-family:'Sora',sans-serif; font-size:17px; line-height:1.55; font-weight:600;
  color:var(--ink-900); letter-spacing:-.01em;
}

.article-disclaimer{
  margin-top:34px; padding:16px 20px; border-radius:14px;
  background:var(--paper-50); border:1px dashed var(--ink-200);
  font-size:13px; color:var(--ink-400); line-height:1.6;
}
.article-cta{
  margin-top:24px; padding:28px; border-radius:var(--radius-md); text-align:center;
  background:var(--grad-night); position:relative; overflow:hidden;
}
.article-cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 15% 0%, rgba(0,229,160,.22), transparent 60%),
             radial-gradient(70% 120% at 90% 100%, rgba(124,92,255,.26), transparent 60%);
}
.article-cta > *{ position:relative; z-index:2; }
.article-cta p{ color:#fff; font-family:'Sora',sans-serif; font-weight:600; font-size:17px; margin-bottom:20px; }

@media (max-width:700px){
  .article-modal{ padding:0; }
  .article-panel{ max-width:100%; max-height:100vh; border-radius:0; }
  .article-scroll{ max-height:100vh; }
  .article-body{ padding:6px 24px 40px; }
  .article-body p,.article-list li{ font-size:16px; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1040px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }
  .section{ padding:80px 0; }
  .section-tight{ padding:60px 0; }
  .cta-band{ padding:54px 26px; margin:0 14px; border-radius:var(--radius-lg); }
  .container{ padding:0 18px; }
  .achieve-grid{ grid-template-columns:1fr 1fr; }
  .testimonial-card{ min-width:290px; max-width:290px; }
  .btn{ padding:15px 26px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================
   CERTIFICATES — About page gallery + full-size viewer
   ========================================================== */
.cert-grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.cert-card{
  background:var(--paper-0); border:1px solid var(--ink-200); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .3s;
  margin:0; display:flex; flex-direction:column;
}
.cert-card.has-img{ cursor:zoom-in; }
.cert-card.has-img:hover,
.cert-card.has-img:focus-visible{
  transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--mint-400);
  outline:none;
}
.cert-card.has-img:focus-visible{ box-shadow:0 0 0 3px rgba(0,229,160,.35), var(--shadow-md); }

.cert-thumb{
  position:relative; aspect-ratio:4/3; background:var(--paper-50);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cert-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.cert-card.has-img:hover .cert-thumb img{ transform:scale(1.06); }

.cert-zoom{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(4,8,15,.42); opacity:0; transition:opacity .3s;
}
.cert-zoom svg{ width:26px; height:26px; color:#fff; }
.cert-card.has-img:hover .cert-zoom,
.cert-card.has-img:focus-visible .cert-zoom{ opacity:1; }

/* Card for a certificate whose scan hasn't been uploaded yet */
.cert-placeholder{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:var(--radius-full);
  background:var(--paper-100); border:1px dashed var(--ink-200);
}
.cert-placeholder svg{ width:28px; height:28px; color:var(--mint-500); }

.cert-card figcaption{ padding:18px 20px 20px; }
.cert-title{
  font-family:'Sora',sans-serif; font-weight:700; font-size:15.5px;
  color:var(--ink-900); letter-spacing:-.02em; line-height:1.3;
}
.cert-issuer{ font-size:13px; color:var(--ink-600); margin-top:5px; line-height:1.45; }
.cert-year{
  display:inline-block; margin-top:10px; padding:4px 11px; border-radius:var(--radius-full);
  background:var(--paper-100); color:var(--ink-600); font-size:11.5px; font-weight:600;
}

/* --- Full-size viewer --- */
.cert-lightbox{
  position:fixed; inset:0; z-index:4000; display:none;
  align-items:center; justify-content:center; padding:5vh 5vw;
  background:rgba(4,8,15,.92); backdrop-filter:blur(10px);
}
.cert-lightbox.active{ display:flex; animation:certFade .28s ease both; }
@keyframes certFade{ from{ opacity:0 } to{ opacity:1 } }

.cert-lb-inner{
  margin:0; max-width:min(1000px, 92vw); max-height:90vh;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.cert-lb-inner img{
  max-width:100%; max-height:76vh; object-fit:contain;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); background:#fff;
}
.cert-lb-inner figcaption{
  color:rgba(255,255,255,.82); font-size:14.5px; text-align:center; line-height:1.5;
}
.cert-lb-inner figcaption strong{ color:#fff; font-family:'Sora',sans-serif; }

.cert-lb-close{
  position:absolute; top:22px; right:24px; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full); cursor:pointer;
  background:rgba(255,255,255,.10); border:1px solid var(--glass-line);
  backdrop-filter:blur(12px); transition:background .25s, transform .25s;
}
.cert-lb-close:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg); }
.cert-lb-close svg{ width:22px; height:22px; color:#fff; }

@media (max-width:640px){
  .cert-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
  .cert-card figcaption{ padding:14px 14px 16px; }
  .cert-title{ font-size:14px; }
  .cert-issuer{ font-size:12px; }
  .cert-lb-close{ top:14px; right:14px; width:40px; height:40px; }
}

/* ==========================================================
   DOCTOR INTRO — short "meet the doctor" block on the Home page
   ========================================================== */
.doc-intro{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;
}

.doc-intro-media{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--shadow-lg); background:var(--paper-100);
}
.doc-intro-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,8,15,.78) 0%, transparent 48%);
}
.doc-intro-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* No portrait uploaded yet — keep a tidy branded panel instead of a broken image */
.doc-intro-media.no-img{ background:var(--grad-night); }
.doc-intro-media.no-img img{ display:none; }

.doc-intro-badge{ position:absolute; bottom:24px; left:24px; right:24px; z-index:3; }
.doc-intro-badge .name{
  font-family:'Sora',sans-serif; font-weight:700; font-size:19px; color:#fff;
}
.doc-intro-badge .cred{ font-size:13px; color:var(--mint-300); font-weight:500; margin-top:2px; }

.doc-intro-body h2{ margin-bottom:4px; }
.doc-intro-cred{
  color:var(--mint-600); font-weight:600; font-size:14.5px; margin-bottom:18px;
}

.doc-intro-points{
  list-style:none; padding:0; margin:22px 0 30px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px;
}
.doc-intro-points li{ display:flex; align-items:flex-start; gap:10px; }
.doc-intro-points svg{ width:19px; height:19px; color:var(--mint-500); flex-shrink:0; margin-top:1px; }
.doc-intro-points span{ font-size:14px; color:var(--ink-600); line-height:1.45; }

.doc-intro-btn{ margin-top:4px; }

@media (max-width:900px){
  .doc-intro{ grid-template-columns:1fr; gap:32px; }
  .doc-intro-media{ max-width:340px; margin:0 auto; aspect-ratio:1/1; }
  .doc-intro-points{ grid-template-columns:1fr; gap:10px; margin:18px 0 26px; }
}