@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800;850&family=Fraunces:ital,opsz,wght@0,9..144,450;0,9..144,560;1,9..144,500&display=swap');

/* ============ TOKENS ============ */
:root{
  --navy:#082947;--navy-soft:#0f3a5e;--teal:#008b9d;--teal-soft:#e5f4f6;
  --ink:#17364d;--muted:#617583;--line:#dce6eb;--pale:#f2f8fa;--white:#fff;
  --amber:#e2a53d;--amber-deep:#c07f1e;--amber-soft:#fbeed4;
  --coral:#ee7256;
  --shadow-sm:0 2px 10px rgba(8,41,71,.07);
  --shadow-md:0 16px 40px -10px rgba(8,41,71,.18);
  --shadow-lg:0 30px 80px -20px rgba(8,41,71,.28);
  --serif:'Fraunces',Georgia,serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:#fff;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.65}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none}
a,button{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
img{max-width:100%}
::selection{background:var(--amber-soft);color:var(--navy)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--pale)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--teal),var(--navy));border-radius:10px;border:2px solid var(--pale)}
.wrap{max-width:1320px;margin:auto;padding-inline:48px}
.skip{position:absolute;left:-999px}
.skip:focus{left:20px;top:10px;background:white;padding:10px;z-index:100}

/* subtle dot-grid texture, reused on a few surfaces */
.grain{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffffff 1px,transparent 1.4px);background-size:22px 22px;opacity:.5}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(37,211,102,.55);z-index:80;transition:transform .25s var(--ease),box-shadow .25s}
.wa-float svg{width:32px;height:32px}
.wa-float:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 36px -6px rgba(37,211,102,.65)}
.wa-float:before{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:wapulse 2.6s ease-out infinite}
@media(max-width:720px){.wa-float{right:16px;bottom:16px;width:52px;height:52px}.wa-float svg{width:29px;height:29px}}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ============ READING PROGRESS ============ */
.readbar{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--teal),var(--amber));z-index:60;transition:width .1s linear}

/* ============ TOPLINE + HEADER ============ */
.topline{background:var(--navy);color:#d1e1e9;font-size:12px;letter-spacing:1.5px;padding:8px 0;position:relative;overflow:hidden}
.topline:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(226,165,61,.35),transparent);width:40%;animation:sheen 7s linear infinite}
.topline .wrap{display:flex;justify-content:space-between;position:relative}
@keyframes sheen{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}

.header{height:98px;background:#ffffffee;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);transition:box-shadow .3s,height .3s}
.header.scrolled{box-shadow:0 10px 30px -14px rgba(8,41,71,.18)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{width:165px;height:67px;object-fit:contain}
.navlinks{display:flex;gap:31px;align-items:center;font-size:14px;font-weight:600}
.navlinks a{position:relative;padding:4px 0}
.navlinks a:after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--amber);transition:right .3s var(--ease)}
.navlinks a:hover,.textlink:hover{color:var(--teal)}
.navlinks a:hover:after{right:0}
.menu{display:none;border:1px solid var(--line);border-radius:6px;background:white;padding:8px 13px}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:15px 23px;border-radius:8px;font-size:14px;font-weight:600;background:var(--teal);color:white;border:1px solid var(--teal);transition:transform .25s var(--ease),background .25s,box-shadow .25s;position:relative;overflow:hidden;isolation:isolate}
.btn:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 42%,transparent 60%);transform:translateX(-140%);transition:transform .6s var(--ease);z-index:-1}
.btn:hover{background:#006e7d;transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn:hover:before{transform:translateX(140%)}
.btn.secondary{background:transparent;color:var(--navy);border-color:#bed0db}
.btn.secondary:hover{border-color:var(--teal);box-shadow:none}
.arrow{font-size:21px;line-height:1;transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translate(3px,-3px)}

/* ============ HERO ============ */
.hero{background:var(--pale);position:relative;overflow:hidden}
.hero:before,.hero:after{content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0}
.hero:before{width:520px;height:520px;background:radial-gradient(circle,#bfe7ec 0%,transparent 72%);top:-220px;right:-120px;animation:blobfloat 16s ease-in-out infinite}
.hero:after{width:420px;height:420px;background:radial-gradient(circle,var(--amber-soft) 0%,transparent 72%);bottom:-200px;left:-140px;animation:blobfloat 19s ease-in-out infinite reverse}
@keyframes blobfloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-25px) scale(1.08)}}
.hero-watermark{position:absolute;top:-.12em;right:-.03em;font-family:var(--serif);font-weight:450;font-size:clamp(140px,20vw,300px);color:var(--navy);opacity:.035;letter-spacing:-4px;pointer-events:none;z-index:0;line-height:1}
.hero-main{display:grid;grid-template-columns:1fr 1fr;min-height:640px;align-items:center;position:relative;z-index:1}
.eyebrow{color:var(--teal);text-transform:uppercase;letter-spacing:2.5px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:12px}
.eyebrow:before{content:'';width:26px;height:1px;background:currentColor}
.hero-copy{position:relative;z-index:3;padding:60px 0 55px}
.hero h1{font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:clamp(36px,3.6vw,52px);line-height:1.17;letter-spacing:-2.5px;margin:25px 0}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--teal),var(--amber) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{max-width:455px;color:var(--muted);font-size:17px;line-height:1.8;margin:0 0 29px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;margin-top:25px}
.hero-note svg{width:17px;height:17px}
.brain-stage{height:550px;position:relative;perspective:1000px;touch-action:pan-y;user-select:none}
.brain-img{width:115%;height:100%;max-width:none;object-fit:contain;position:absolute;left:-8%;transition:transform .3s ease-out;mix-blend-mode:multiply;will-change:transform;filter:drop-shadow(0 30px 45px rgba(8,41,71,.16))}
.orbit{position:absolute;inset:17% 2%;border:1px dashed #a9d3db;border-radius:50%;transform:rotate(-22deg);pointer-events:none;animation:spin 60s linear infinite}
.orbit.two{inset:7% 14%;transform:rotate(34deg);border-color:#f0d29c;animation:spin 80s linear infinite reverse}
@keyframes spin{to{transform:rotate(338deg)}}
.orbit.two{animation-name:spintwo}
@keyframes spintwo{to{transform:rotate(394deg)}}
.brain-label{position:absolute;top:22%;right:0;border:1px solid #dbe8ec;background:#ffffffe8;backdrop-filter:blur(6px);padding:10px 15px;border-radius:9px;font-size:12px;box-shadow:var(--shadow-sm);animation:floaty 5s ease-in-out infinite}
.brain-label:before{content:'';display:inline-block;width:7px;height:7px;background:var(--teal);border-radius:100%;margin-right:8px;box-shadow:0 0 0 4px #008b9d22;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px #008b9d22}50%{box-shadow:0 0 0 8px #008b9d0a}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.brain-caption{position:absolute;bottom:28px;left:30%;color:#7c929e;font-size:12px;letter-spacing:.4px}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);box-shadow:var(--shadow-sm);z-index:5;transition:background .25s,color .25s,box-shadow .25s,transform .25s,border-color .25s}
.hero-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-nav.prev{left:14px}
.hero-nav.next{right:14px}
.hero-nav:hover{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:var(--shadow-md)}
.hero-nav.prev:hover{transform:translateY(-50%) translateX(-3px)}
.hero-nav.next:hover{transform:translateY(-50%) translateX(3px)}
@media(max-width:1300px){.hero-nav{width:48px;height:48px}.hero-nav svg{width:19px;height:19px}.hero-nav.prev{left:6px}.hero-nav.next{right:6px}}
@media(max-width:720px){.hero-nav{display:none}}

.sliderbar{border-top:1px solid #d9e5e9;display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:16px;position:relative;z-index:1}
.slide-tabs{display:flex;gap:32px}
.slide-tab{border:none;background:none;padding:5px 0;color:#718593;font-size:13px;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.slide-tab.active{color:var(--navy);border-bottom-color:var(--amber)}
.slide-tab span{font-size:11px;color:var(--teal);margin-right:9px}
.slide-controls{display:flex;align-items:center;gap:18px;font-size:12px;color:var(--muted)}
.round{border:1px solid #ccdde4;border-radius:50%;width:35px;height:35px;background:none;color:var(--navy);font-size:18px;transition:background .25s,transform .25s,border-color .25s}
.round:hover{background:white;border-color:var(--teal);transform:scale(1.08)}

/* ============ PILLARS ============ */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:35px;border-bottom:1px solid var(--line)}
.pillar{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;transition:background .25s,transform .25s}
.pillar:hover{background:var(--pale);transform:translateY(-2px)}
.icon{width:42px;height:42px;border:1px solid #d9e7eb;color:var(--teal);display:grid;place-items:center;border-radius:50%;flex-shrink:0;transition:background .25s,color .25s,transform .25s}
.pillar:hover .icon{background:var(--teal);color:white;transform:rotate(-8deg) scale(1.06)}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.pillar strong{display:block;font-size:14px;font-weight:600}
.pillar small{display:block;color:var(--muted);font-size:13px;margin-top:3px}

/* ============ SECTIONS / HEADINGS ============ */
.section{padding-block:95px}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:38px}
h2{font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:38px;line-height:1.25;letter-spacing:-1.4px;margin:15px 0 0;position:relative}
.section-head p{max-width:360px;color:var(--muted);font-size:14px;margin:0}

/* ============ TMS GRID ============ */
.tms-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.tms-panel{background:radial-gradient(circle at 100% 0%,var(--navy-soft),var(--navy) 65%);color:white;padding:44px;border-radius:16px;min-height:345px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);transition:transform .35s var(--ease)}
.tms-panel:hover{transform:translateY(-4px)}
.tms-panel:before{content:'';position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(226,165,61,.28),transparent 70%);top:-90px;right:-90px}
.tms-panel .eyebrow{color:#76dae0}
.tms-panel h3{font-family:Manrope,sans-serif;font-size:29px;line-height:1.4;max-width:370px;font-weight:500;margin:24px 0 16px;position:relative}
.tms-panel p{color:#acc4d2;font-size:14px;max-width:390px;position:relative}
.tms-panel a{display:inline-flex;margin-top:28px;gap:14px;align-items:center;font-size:14px;color:#91e8ec;position:relative;transition:gap .25s}
.tms-panel a:hover{gap:20px}
.tms-detail>p{color:var(--muted);margin-top:0}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}
.fact{border-top:2px solid var(--line);padding-top:17px;transition:border-color .3s}
.fact:hover{border-top-color:var(--amber)}
.fact b{font-weight:600;font-size:14px;display:block}
.fact span{font-size:13px;color:var(--muted);display:block;margin-top:6px}

.soft{background:var(--pale)}

/* ============ WHY GRID ============ */
.why-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.why-card{grid-column:span 2;border-top:2px solid #b7dce2;padding:28px 24px;background:white;border-radius:4px 4px 12px 12px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.why-card:nth-last-child(-n+2){grid-column:span 3}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-top-color:var(--amber)}
.why-card>span{font-family:var(--serif);font-style:italic;color:var(--teal-soft);-webkit-text-stroke:1px var(--teal);font-size:38px;position:absolute;top:8px;right:14px;opacity:.5;line-height:1}
.why-card h3{font-size:20px;line-height:1.4;font-weight:500;position:relative;max-width:80%}
.why-card p{font-size:15px;color:var(--muted);position:relative}

/* ============ HEALTH GUIDE TOPICS ============ */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.topic{background:white;border:1px solid var(--line);padding:27px;border-radius:12px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.topic:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--teal),var(--amber));transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease)}
.topic:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:var(--shadow-md)}
.topic:hover:before{transform:scaleY(1)}
.topic-num{font-size:12px;color:var(--teal)}
.topic h3{font-size:19px;font-weight:500;margin:17px 0 10px;line-height:1.4}
.topic p{font-size:14px;color:var(--muted);margin:0 0 22px}
.topic .textlink{font-size:13px;color:var(--teal);display:flex;justify-content:space-between}
.center{text-align:center;margin-top:30px}
.textlink{font-size:14px;display:inline-flex;align-items:center;gap:25px}
.legalnote{font-size:13px;color:var(--muted);margin-top:25px}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:45px}
.step{border-top:2px solid var(--line);padding-top:25px;position:relative;transition:border-color .3s}
.step:hover{border-top-color:var(--teal)}
.step>span{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--amber-deep)}
.step h3{font-size:17px;font-weight:600;margin:20px 0 10px}
.step p{font-size:14px;color:var(--muted)}

/* ============ FAQ ============ */
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.faq-layout>div>p{color:var(--muted);font-size:14px;max-width:330px}
details{border-bottom:1px solid var(--line);padding:21px 0;transition:background .25s}
summary{cursor:pointer;list-style:none;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::-webkit-details-marker{display:none}
.faq-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--teal);flex-shrink:0;transition:transform .3s var(--ease),background .3s,color .3s}
.faq-ico:before{content:'+';font-size:16px}
details[open] .faq-ico{background:var(--teal);color:white;transform:rotate(135deg)}
.faq-body{overflow:hidden;height:0;transition:height .35s var(--ease)}
.faq-body>p{color:var(--muted);font-size:14px;padding-right:30px;margin:14px 0 0}

/* ============ CLOSING CTA ============ */
.closing{background:radial-gradient(circle at 15% 20%,var(--navy-soft),var(--navy) 70%);padding:48px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:35px;color:white;margin-block:0 75px;position:relative;overflow:hidden}
.closing:before{content:'';position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(226,165,61,.25),transparent 70%);right:-120px;top:-140px}
.closing h2{font-size:30px;margin:0 0 10px;position:relative}
.closing p{font-size:14px;color:#b5ccd9;margin:0;position:relative}
.closing .btn{position:relative}

/* ============ CONTACT ============ */
.contact-panel{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:45px;background:var(--pale);border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden}
.contact-panel:before{content:'';position:absolute;width:300px;height:300px;background:radial-gradient(circle,#cdeaee,transparent 70%);border-radius:50%;left:-120px;bottom:-140px;opacity:.8}
.contact-panel h3{font-size:16px;margin:0 0 8px;position:relative}
.contact-panel address{font-style:normal;margin-bottom:24px;position:relative;display:block}
.contact-panel p{color:var(--muted);position:relative}
.contact-phone{font-size:26px;color:var(--teal);display:block;margin-bottom:22px;position:relative;font-family:var(--serif)}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--line);padding:45px 0 25px;position:relative}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:30px}
.footer .logo{width:145px}
.footer-links{display:flex;gap:25px;font-size:13px}
.footer-links a{transition:color .25s}
.footer-links a:hover{color:var(--teal)}
.footer-contact{margin-top:24px;display:flex;justify-content:space-between;gap:25px;font-size:14px}
.footer-contact address{font-style:normal}
.footer-contact a:hover{color:var(--teal)}
.footnote{border-top:1px solid var(--line);margin-top:28px;padding-top:22px;color:#748590;font-size:12px;display:flex;justify-content:space-between;gap:50px}
.footnote p{margin:0;max-width:850px}
.faq-source{font-size:13px;color:var(--muted)}
.faq-source a{color:var(--teal);text-decoration:underline}

/* ============ ARTICLE PAGES ============ */
.page-hero{background:var(--pale);padding:55px 0 60px;position:relative;overflow:hidden}
.page-hero:before{content:'';position:absolute;width:420px;height:420px;background:radial-gradient(circle,#bfe7ec,transparent 72%);top:-220px;right:-120px;opacity:.7;border-radius:50%}
.crumb{font-size:12px;color:var(--muted);margin-bottom:28px;position:relative;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.crumb a:hover{color:var(--teal)}
.readtime{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:600}
.readtime:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber)}
.page-hero h1{font:500 46px/1.2 Manrope,sans-serif;letter-spacing:-1.7px;max-width:950px;margin:20px 0;position:relative}
.page-hero p{color:var(--muted);max-width:700px;position:relative}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:75px;padding-block:60px}
.article{max-width:790px}
.article h2{font-size:27px;letter-spacing:-.6px;margin:42px 0 20px;font-family:Manrope,sans-serif}
.article p,.article li{color:#526b7d;line-height:1.9}
.article ul{padding-left:25px}
.article aside{background:var(--pale);border-left:3px solid var(--teal);padding:18px 24px;font-size:14px;margin:25px 0;border-radius:0 10px 10px 0}
.article .btn{color:white}
.article .source{font-size:13px}
.article .source a{color:var(--teal);text-decoration:underline}

.toc{background:var(--pale);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:0 0 40px;font-size:14px}
.toc b{display:flex;align-items:center;gap:8px;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal);margin-bottom:12px}
.toc b:before{content:'';width:16px;height:1px;background:var(--teal)}
.toc ol{margin:0;padding:0 6px 0 0;list-style:none;counter-reset:toc;display:grid;gap:9px;max-height:280px;overflow-y:auto}
.toc ol::-webkit-scrollbar{width:6px}
.toc ol::-webkit-scrollbar-thumb{background:var(--teal);border-radius:6px}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:10px;color:var(--muted);transition:color .2s;line-height:1.4}
.toc a:before{content:counter(toc,decimal-leading-zero);color:var(--amber-deep);font-family:var(--serif);font-style:italic;flex-shrink:0}
.toc a:hover,.toc a.active{color:var(--navy);font-weight:600}

.article-sidebar{align-self:start;position:sticky;top:125px;background:var(--pale);padding:25px;border-radius:12px;font-size:14px}
.article-sidebar b{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal)}
.article-sidebar a{display:block;margin:12px 0 0;color:var(--muted);padding-left:14px;position:relative;transition:color .2s,padding-left .2s}
.article-sidebar a:before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s}
.article-sidebar a:hover{color:var(--navy);padding-left:18px}
.article-sidebar a:hover:before{background:var(--amber)}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal-copy{animation:copyin .45s ease}
@keyframes copyin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ RESPONSIVE ============ */
@media(min-width:1600px){.hero-main{min-height:690px}.brain-stage{height:600px}}

@media(max-width:1050px){.why-card{grid-column:span 3}.why-card:last-child{grid-column:span 6}}

@media(max-width:1000px){
  .wrap{padding-inline:30px}
  .navlinks{gap:17px}.navlinks a{font-size:12px}
  .header .btn{padding:12px 15px;font-size:12px}
  .hero h1{font-size:clamp(32px,4vw,44px)}
  .brain-stage{height:470px}.hero-main{min-height:590px}
  .section{padding-block:70px}
  .tms-grid{gap:30px}.faq-layout{gap:40px}
  .topic-grid{grid-template-columns:repeat(2,1fr)}
  .article-layout{gap:35px}
  .pillars{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  .wrap{padding-inline:22px}
  .topline{font-size:10px}.topline .wrap span:last-child{display:none}.topline:before{display:none}
  .header{height:80px}.logo{width:132px;height:55px}
  .header .btn{display:none}.menu{display:block}
  .navlinks{display:none;position:absolute;top:80px;left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:22px;flex-direction:column;align-items:stretch;gap:20px;box-shadow:var(--shadow-md)}
  .navlinks.open{display:flex}.navlinks a{font-size:16px}.navlinks a:after{display:none}
  .hero-main{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:44px 0 0}
  .hero h1{font-size:35px;letter-spacing:-1.4px;margin:20px 0}
  .hero-copy>p{font-size:15px;line-height:1.7;margin-bottom:23px}
  .eyebrow{font-size:10px;letter-spacing:2px}
  .btn{font-size:13px;padding:13px 17px;gap:16px}
  .hero-note{margin-top:20px}
  .brain-stage{height:335px;margin:0 -5px}
  .brain-img{width:100%;left:0}
  .brain-label{top:18%;right:0;font-size:10px}
  .brain-caption{bottom:5px;left:25%;font-size:10px}
  .sliderbar{padding:16px 0}.slide-tabs{gap:17px}.slide-tab{font-size:11px}.slide-tab span{display:none}
  .slide-controls{gap:8px}.slide-controls>span{display:none}
  .round{width:29px;height:29px}
  .pillars{grid-template-columns:1fr;gap:12px;padding-block:20px}.pillar small{font-size:12px}
  .section{padding-block:55px}
  .section-head{display:block;margin-bottom:28px}.section-head p{margin-top:20px}
  h2{font-size:28px;letter-spacing:-1px}
  .tms-grid,.faq-layout{grid-template-columns:1fr;gap:28px}
  .tms-panel{padding:30px;min-height:0}.tms-panel h3{font-size:26px}
  .why-grid{grid-template-columns:1fr}
  .why-card,.why-card:nth-last-child(-n+2),.why-card:last-child{grid-column:auto}
  .topic-grid{grid-template-columns:1fr}.topic{padding:24px}.topic h3{margin-top:10px}.topic p{margin-bottom:15px}
  .steps{grid-template-columns:1fr 1fr;gap:23px}.step h3{font-size:15px}.step p{font-size:13px}
  .closing{padding:30px;display:block;margin-bottom:45px}.closing h2{font-size:27px}.closing .btn{margin-top:25px}
  .contact-panel{grid-template-columns:1fr;gap:28px;padding:26px}
  .footer-top{align-items:start;flex-direction:column;gap:20px}
  .footer-links{gap:19px;flex-wrap:wrap}
  .footer-contact{flex-direction:column;gap:12px}
  .footnote{display:block}.footnote>span{display:block;margin-top:18px}
  .page-hero{padding:35px 0}.page-hero h1{font-size:32px}
  .article-layout{grid-template-columns:1fr;padding-block:35px}
  .article-sidebar{position:static}
  .article h2{font-size:23px}.article p,.article li{font-size:15px}
  .source{word-break:break-word}
  .hero-watermark{display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .brain-img{transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
}