/*
Theme Name: Onyx Growth Lab
Description: Agency theme with a dark hero, wave section dividers, service cards, stats, brand marquee and testimonial slider. Set text, colors, contact details and social links under Appearance > Customize.
Author: Muhammad Haris
Version: 10.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: onyxgrowthlab
*/
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700.woff2') format('woff2')}
:root{--pattern-inner:url('assets/img/hero-pattern.svg');--blue:#5a50ff;--ink:#262626;--ink2:#1e1e1e;--paper:#f2fcf8;--teal:#00e2a8;--purple:#a06de0;--text:#2b2b2b}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:Arial,Helvetica,sans-serif;line-height:1.15;margin:0 0 .5em;font-weight:700}
h2{font-size:clamp(1.5rem,2.4vw,1.95rem);text-transform:uppercase;letter-spacing:.01em}
h2 span{color:var(--purple)}
p{margin:0 0 1em}
.container{width:100%;max-width:1400px;margin-inline:auto;padding-inline:clamp(18px,3.2vw,40px)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--teal);color:#000;padding:10px 16px;z-index:200;border-radius:6px}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.ic{width:1em;height:1em;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;text-decoration:none;font:600 15px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.03em;padding:14px 26px;border-radius:3px;border:0;cursor:pointer;box-shadow:0 4px 12px rgba(90,80,255,.35);transition:transform .2s,filter .2s}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px);color:#fff}
.btn .ic{width:14px;height:14px}
.btn-sm{padding:11px 22px}
.btn-nav{padding:13px 24px;box-shadow:0 3px 0 rgba(0,0,0,.35)}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--ink);border-bottom:1px solid #fff}
.admin-bar .site-header{top:32px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding-inline:clamp(18px,3vw,36px)}
.brand{display:flex;align-items:center}
.brand::after{content:"";width:1px;height:28px;background:#fff;margin-left:18px}
.brand-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.brand .custom-logo{max-height:38px;width:auto}
.logo-mark{width:38px;height:32px}
.brand-text{font:700 19px/1 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(90deg,#3d8bff,#00e2a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.primary-nav{display:flex;align-items:center;gap:30px}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:32px;align-items:center}
.primary-nav li{position:relative}
.primary-nav a:not(.btn){color:#fff;text-decoration:none;font:400 14.5px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.primary-nav a:not(.btn):hover,.primary-nav .current-menu-item>a{color:var(--teal)}
.primary-nav .sub-menu{display:none;position:absolute;top:100%;left:-16px;min-width:220px;background:var(--ink);border:1px solid #444;padding:8px;flex-direction:column;gap:0}
.primary-nav li:hover>.sub-menu,.primary-nav li:focus-within>.sub-menu{display:flex}
.primary-nav .sub-menu a{display:block;padding:9px 12px}
.nav-toggle{display:none;background:none;border:0;padding:12px;cursor:pointer}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:26px;height:3px;background:#fff;border-radius:2px;position:relative;content:""}
.nav-toggle .bars::before{position:absolute;top:-8px}
.nav-toggle .bars::after{position:absolute;top:8px}

/* Eyebrow, sections, waves */
.eyebrow{display:inline-block;border-left:4px solid var(--blue);padding-left:10px;font:600 12.5px/1.2 Poppins,sans-serif;text-transform:uppercase;color:#fff;margin-bottom:14px}
.eyebrow.dark{color:var(--text)}
.section{padding:clamp(48px,6vw,80px) 0}
.section.light{background:var(--paper);color:var(--text)}
.section.dark{background:var(--ink);color:#fff}
.section.has-wave{padding-bottom:0}
.section.has-wave>.container{padding-bottom:clamp(40px,5vw,64px)}
.wave{display:block;width:100%;height:clamp(22px,3.2vw,44px);margin-bottom:-1px}
.center{text-align:center}
.center .lead{max-width:860px;margin:0 auto 34px;color:#fff}
.bar{display:block;width:48px;height:4px;background:var(--blue);margin:0 auto 22px;border-radius:2px}
.center-btn{margin-top:32px;text-align:center}

/* Hero */
.hero{background:linear-gradient(180deg,var(--ink) 0%,rgba(38,38,38,.6) 45%,rgba(38,38,38,0) 100%),var(--pattern) center/cover no-repeat,var(--ink);color:#fff;min-height:min(78vh,560px);display:flex;align-items:center;padding:70px 0}
.hero h1{font-size:clamp(1.9rem,3.3vw,2.75rem);text-transform:uppercase;max-width:640px;margin-bottom:.45em}
.hero p{max-width:700px;font-size:14.5px;margin-bottom:26px}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-grid p{max-width:470px;font-size:14.5px}
.moon{align-self:end;justify-self:end;width:100%;max-width:560px;margin-bottom:-4px}
.moon svg,.moon img{width:100%;height:auto}

/* CTA */
.cta-grid{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,5vw,80px);align-items:center}
.cta-icon{width:140px;height:140px}
.cta-grid h2{font-size:clamp(1.4rem,2.2vw,1.7rem)}
.cta-grid p{max-width:460px;margin:0}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.svc{position:relative;background:#fff;border-radius:4px;padding:26px 22px 24px;box-shadow:0 14px 28px rgba(0,0,0,.16);display:flex;flex-direction:column;overflow:hidden}
.svc h3{color:var(--blue);font-size:18px;letter-spacing:.05em;margin-bottom:.9em}
.svc p{font-size:13.5px}
.ticks{list-style:none;margin:0 0 22px;padding:0;flex:1}
.ticks li{position:relative;padding-left:26px;margin-bottom:7px;font-size:13.5px}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;border-radius:50%;background:var(--blue)}
.ticks li::after{content:"";position:absolute;left:4.5px;top:.55em;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.svc .btn{align-self:flex-start}
.ill{position:absolute;right:16px;bottom:14px;width:86px;height:86px;opacity:.9}

/* Why + stats */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:left;margin-top:8px}
.why>div{background:#2c2c2c;padding:20px 18px;box-shadow:0 10px 24px rgba(0,0,0,.35);border-radius:3px}
.why h3{display:flex;align-items:center;gap:10px;font:500 17px/1.25 Poppins,sans-serif;color:#fff;text-transform:none}
.why h3 .ic{color:var(--teal);width:24px;height:24px}
.why p{font-size:13.5px;color:#cfcfcf;margin:0}
.stats-box{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink2);padding:36px 12px;border-radius:2px}
.stat{padding:8px 18px;border-left:1px solid #3a3a3a}
.stat:first-child{border-left:0}
.stat b{display:block;font:500 clamp(2.6rem,5vw,4rem)/1.05 Arial,Helvetica,sans-serif;color:#fff}
.stat b em{font-style:normal;color:var(--teal)}
.stat strong{display:block;font-weight:600;margin-top:8px}
.stat span{color:#b5b5b5;font-size:13.5px}

/* Cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.filters button{font:inherit;padding:8px 18px;border-radius:3px;border:1px solid #cfe5dc;background:#fff;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.case,.post-card{background:#fff;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 26px rgba(0,0,0,.12)}
.case[hidden]{display:none}
.case-thumb,.post-thumb{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#2c2c2c,var(--blue));position:relative}
.case-thumb img,.post-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-thumb{display:flex;align-items:flex-end;padding:16px}
.case-result{position:relative;font:700 1.4rem/1.1 Arial,sans-serif;color:#fff;background:var(--ink);padding:8px 14px;border-radius:3px}
.case-body,.post-body{padding:18px 20px 22px}
.case-body p{margin:0;font-size:13.5px}
.case-body h3 a,.post-body h3 a{color:var(--text);text-decoration:none}
.case-body h3 a:hover,.post-body h3 a:hover{color:var(--blue)}
.post-body h3{font-size:1.02rem;margin:.3em 0 .4em}
.post-cat{font-size:.8rem;font-weight:600;color:var(--blue);text-decoration:none}
.post-date{font-size:.82rem;color:#666}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{background:#fff;border-radius:3px;padding:10px 20px;box-shadow:0 6px 16px rgba(0,0,0,.1)}
.notice{background:#fff8e1;border:1px dashed #d9a700;border-radius:6px;padding:14px 18px;color:#5a4500;margin-top:24px;font-size:13.5px}

/* Brands marquee */
.brands h2{margin-top:6px}
.marquee{overflow:hidden;margin:18px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;width:max-content;animation:slide 16s linear infinite}
.marquee.rev .track{animation-direction:reverse;animation-duration:20s}
.marquee:hover .track{animation-play-state:paused}
.logo{width:210px;height:90px;display:flex;align-items:center;justify-content:center;padding:0 26px;flex:none}
.logo img{max-height:64px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.logo-text{font:600 17px Poppins,sans-serif;color:#d6d6d6;opacity:.75;white-space:nowrap}
@keyframes slide{to{transform:translateX(-33.3333%)}}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center}
.slider{position:relative;min-height:230px;padding-bottom:44px}
.slide{display:none;margin:0;font-style:italic}
.slide.is-active{display:block;animation:fade .5s}
.slide .q p{font-size:15px}
.slide strong{display:block;font:700 16px Arial,sans-serif;font-style:normal}
.slide span{font-style:normal}
.dots{position:absolute;right:0;bottom:0;display:flex;gap:10px}
.dots button{width:8px;height:8px;border-radius:8px;border:0;background:#999;padding:0;cursor:pointer;transition:width .25s,background .25s}
.dots button.is-active{width:20px;background:#9c8cff}
@keyframes fade{from{opacity:0}}

/* Inner pages */
.page-hero{background:linear-gradient(180deg,var(--ink),rgba(38,38,38,.7)),var(--pattern-inner) center/cover,var(--ink);color:#fff;padding:clamp(40px,5vw,70px) 0 0}
.page-hero .container{padding-bottom:clamp(30px,4vw,50px)}
.page-hero h1{font-size:clamp(1.8rem,3.4vw,2.6rem);text-transform:uppercase;margin:0}
.page-hero .meta{margin-top:10px;color:#ccc}
.entry-content{max-width:780px;margin-inline:auto}
.entry-content.wide{max-width:none}
.entry-content h2{margin-top:1.6em;text-transform:none}
.entry-content img{border-radius:4px}
.entry-content blockquote{border-left:4px solid var(--blue);margin:1.5em 0;padding:.2em 1.2em}
.entry-thumb{max-width:980px;margin:0 auto 36px;border-radius:4px;overflow:hidden}
.pagination{margin-top:40px;text-align:center}
.pagination .page-numbers{display:inline-block;padding:8px 16px;margin:0 3px;border-radius:3px;background:#fff;text-decoration:none;color:var(--text)}
.pagination .current{background:var(--blue);color:#fff}
.form{display:grid;gap:16px;max-width:680px}
.form label{font-weight:600;display:grid;gap:6px}
.form input,.form select,.form textarea{font:inherit;padding:13px 16px;border:1px solid #cfe5dc;border-radius:3px;background:#fff;width:100%}
.form .hp{position:absolute;left:-9999px}
.alert{padding:14px 18px;border-radius:4px;margin-bottom:20px;font-weight:500}
.alert.ok{background:#e6f8ec;color:#14602c}
.alert.err{background:#fdeaea;color:#8a1c1c}

/* Footer */
.site-footer{background:var(--ink);color:#fff}
.footer-wave{display:block;width:100%;height:58px;margin-bottom:-1px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr 1.2fr;gap:40px;padding-top:34px}
.footer-logo{max-height:46px;width:auto}
.footer-about{margin-top:16px;font-size:14px;max-width:320px}
.site-footer h4{font:600 18px Poppins,sans-serif;text-transform:uppercase;color:#fff;margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px;font-size:14.5px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--teal)}
.contact-list li{display:flex;gap:10px;align-items:center}
.contact-list .ic{color:var(--teal);width:16px;height:16px}
.socials{display:flex;gap:16px;margin-top:20px}
.socials a{color:var(--teal);display:inline-flex}
.socials .ic{width:22px;height:22px}
.footer-bottom{border-top:1px solid #777;margin-top:34px;padding-top:18px;padding-bottom:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#ddd}
.footer-links{display:flex;gap:22px;font-weight:600}

/* Floating buttons */
.wa-float{position:fixed;right:14px;bottom:14px;width:46px;height:46px;border-radius:12px;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;z-index:90;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.wa-float .ic{width:28px;height:28px}
.to-top{position:fixed;right:14px;bottom:74px;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:90;box-shadow:0 4px 14px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:opacity .25s}
.to-top.show{opacity:1;visibility:visible}
.to-top .ic{width:22px;height:22px}
body:not(:has(.wa-float)) .to-top{bottom:14px}

/* Responsive */
@media (max-width:1100px){.why,.stats-box{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}.grid-4{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:980px){
 .svc-grid,.grid-3{grid-template-columns:repeat(2,1fr)}
 .about-grid,.testi-grid,.cta-grid{grid-template-columns:1fr}
 .cta-icon{width:100px;height:100px}
 .nav-toggle{display:block}
 .brand::after{display:none}
 .primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);border-bottom:1px solid #444;padding:16px 20px 24px;flex-direction:column;align-items:stretch;gap:16px}
 .primary-nav.is-open{display:flex}
 .primary-nav ul{flex-direction:column;align-items:flex-start;gap:14px}
 .primary-nav .sub-menu{display:flex;position:static;border:0;padding:6px 0 0 14px}
 .btn-nav{justify-content:center}
 .admin-bar .site-header{top:46px}
}
@media (max-width:640px){
 .svc-grid,.grid-3,.grid-4,.why,.footer-grid{grid-template-columns:1fr}
 .stats-box{grid-template-columns:1fr 1fr;row-gap:20px}
 .brand-text{font-size:15px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.track{animation:none}.slide.is-active{animation:none}}

/* Live hero */
.hero{position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;animation:orb 14s ease-in-out infinite alternate}
.hero::before{background:var(--blue);right:8%;top:-120px}
.hero::after{background:var(--teal);right:32%;bottom:-260px;opacity:.2;animation-duration:18s;animation-delay:-6s}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto}
.hero-in{position:relative;z-index:1;pointer-events:none}
.hero-in a{pointer-events:auto}
.hero .eyebrow,.hero h1,.hero p,.hero .btn{animation:rise .8s cubic-bezier(.2,.8,.2,1) backwards}
.hero h1{animation-delay:.12s}.hero p{animation-delay:.24s}.hero .btn{animation-delay:.36s}
.hero h1{background:linear-gradient(90deg,#fff 40%,#b9b3ff,#fff 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .8s .12s backwards,shine 7s linear 1s infinite}
.hero .btn{animation:rise .8s .36s backwards,pulse 2.6s ease-in-out 1.4s infinite}
@keyframes orb{to{transform:translate(-120px,80px) scale(1.25)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes shine{to{background-position:-250% 0}}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(90,80,255,.0),0 4px 26px rgba(90,80,255,.75)}}
/* Live footer */
.footer-wave{background:linear-gradient(90deg,#5a50ff,#a06de0,#00e2a8,#a06de0,#5a50ff);background-size:300% 100%;animation:grad 9s linear infinite}
.site-footer h4{background:linear-gradient(90deg,#fff,var(--teal),#fff);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.site-footer li a{display:inline-block;transition:transform .2s,color .2s}
.site-footer li a:hover{transform:translateX(5px)}
.socials a{transition:transform .2s,color .2s,filter .2s}
.socials a:hover{transform:translateY(-4px) scale(1.15);color:#fff;filter:drop-shadow(0 0 8px var(--teal))}
.contact-list .ic{animation:glow 2.4s ease-in-out infinite}
@keyframes grad{to{background-position:-300% 0}}
@keyframes glow{50%{filter:drop-shadow(0 0 6px var(--teal))}}
@media (prefers-reduced-motion:reduce){.hero::before,.hero::after,.footer-wave,.site-footer h4,.hero h1,.hero .btn,.contact-list .ic{animation:none}}

.hero>.container.hero-in{width:100%}
.hero-canvas{z-index:0}
.footer-wave{height:60px}

.moon{max-width:440px}
.moon{overflow:hidden;position:relative;z-index:0}.moon svg{display:block;overflow:hidden}
.about-grid{overflow:hidden}

/* ===== Inner page templates ===== */
.page-hero .eyebrow{margin-bottom:12px}
.page-hero p.meta{margin:10px 0 0;color:#ccc}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:start}
.split p{max-width:620px}
.panel-card{background:#fff;border-radius:4px;padding:28px 26px;box-shadow:0 14px 28px rgba(0,0,0,.12);position:relative}
.panel-card h3{color:var(--blue);letter-spacing:.04em}
.panel-ill{display:flex;justify-content:flex-end;margin-top:8px}
.panel-ill .ill{position:static;width:110px;height:110px}
.intro{max-width:760px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;text-align:left}
.step{background:#fff;border-radius:4px;padding:24px 20px;box-shadow:0 12px 26px rgba(0,0,0,.12)}
.step b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font:700 16px Arial,sans-serif;margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:.4em}
.step p{font-size:13.5px;margin:0}
.steps.on-dark .step{background:#2c2c2c;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.steps.on-dark .step h3{color:#fff}
.steps.on-dark .step p{color:#cfcfcf}
.stats-box .stat b{font-size:clamp(2.2rem,4vw,3.4rem)}
.faq details{background:#fff;border-radius:4px;margin-bottom:12px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 20px 18px;margin:0}
.chip{text-decoration:none;color:var(--text)}
a.chip:hover{background:var(--blue);color:#fff}
.btn-ghost{background:transparent;border:1px solid #fff;box-shadow:none}
/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.info-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.info-list li{display:flex;gap:14px;align-items:flex-start}
.info-list .ic{width:42px;height:42px;padding:11px;background:var(--blue);color:#fff;border-radius:50%}
.info-list b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.info-list a{color:var(--text)}
.socials.dark-soc a{color:var(--blue)}
.form-note{font-size:12.5px;color:#666;margin:0}
.panel-card .form{max-width:none}
/* Blog */
.blog-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:34px}
.blog-bar .form{margin:0}
.cat-pills{display:flex;gap:10px;flex-wrap:wrap}
.cat-pills a{padding:8px 18px;border-radius:3px;background:#fff;border:1px solid #cfe5dc;color:var(--text);text-decoration:none;font-size:14px}
.cat-pills a:hover,.cat-pills a.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.featured{display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 14px 28px rgba(0,0,0,.14);margin-bottom:34px}
.featured .post-thumb{aspect-ratio:auto;min-height:280px}
.featured-body{padding:clamp(22px,3vw,40px);align-self:center}
.featured-body h2{text-transform:none;font-size:clamp(1.4rem,2.2vw,1.9rem);margin:.3em 0 .5em}
.featured-body h2 a{color:var(--text);text-decoration:none}
.featured-body h2 a:hover{color:var(--blue)}
.blog-bar+.featured+.grid-3,.featured+.grid-3{margin-top:0}
/* Cookie policy */
.policy{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.toc{position:sticky;top:90px;background:#fff;border-radius:4px;padding:20px;box-shadow:0 8px 20px rgba(0,0,0,.08);font-size:14px}
.toc ol{margin:10px 0 0;padding-left:18px}
.toc li{margin-bottom:6px}
.policy .entry-content{margin:0;max-width:820px}
.policy .entry-content h2{scroll-margin-top:90px;font-size:1.35rem}
.table-wrap{overflow-x:auto;margin:18px 0}
.cookie-table{width:100%;border-collapse:collapse;background:#fff;font-size:13.5px}
.cookie-table th,.cookie-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #e3efe9;vertical-align:top}
.cookie-table th{background:var(--ink);color:#fff}
.cookie-table code{font-size:12.5px;word-break:break-all}
/* Cookie banner */
.cookie-banner{position:fixed;left:14px;right:74px;bottom:14px;z-index:120;background:var(--ink);color:#fff;border:1px solid #444;border-radius:6px;padding:16px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:920px}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;font-size:13.5px;flex:1 1 320px}
.cookie-banner a{color:var(--teal)}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){
 .split,.contact-grid,.featured,.policy{grid-template-columns:1fr}
 .steps{grid-template-columns:repeat(2,1fr)}
 .toc{position:static}
}
@media (max-width:640px){
 .steps{grid-template-columns:1fr}
 .cookie-banner{right:14px;bottom:70px}
 .cookie-table thead{display:none}
 .cookie-table td{display:block;border:0;padding:4px 14px}
 .cookie-table tr{display:block;border-bottom:1px solid #e3efe9;padding:8px 0}
 .cookie-table td::before{content:attr(data-label) ": ";font-weight:600}
}

/* ===== Header v2 ===== */
.topbar{background:linear-gradient(90deg,#1a1a2e,#2a2470 55%,#1a1a2e);color:#fff;font:400 12.5px Arial,Helvetica,sans-serif}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px;padding-inline:clamp(18px,3vw,36px)}
.topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--teal)}
.topbar .ic{width:14px;height:14px;color:var(--teal)}
.topbar-promo{font-weight:600;letter-spacing:.02em}
.topbar-promo .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:blink 1.8s ease-in-out infinite}
.topbar-info{display:flex;align-items:center;gap:22px}
.topbar-soc{display:inline-flex;gap:12px}
.topbar-soc .ic{width:15px;height:15px}
@keyframes blink{50%{opacity:.25;transform:scale(.7)}}
.site-header{transition:box-shadow .25s,background .25s;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(38,38,38,.96);backdrop-filter:saturate(1.4) blur(10px)}
.site-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.35)}
.header-inner{min-height:68px;transition:min-height .25s}
.site-header.scrolled .header-inner{min-height:56px}
.primary-nav a:not(.btn){position:relative;padding:8px 0;font-weight:500}
.primary-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .25s}
.primary-nav a:not(.btn):hover::after,.primary-nav .current-menu-item>a::after{transform:scaleX(1)}
.primary-nav .current-menu-item>a{color:var(--teal)}
.btn-nav{background:linear-gradient(90deg,var(--blue),#7a3cff);box-shadow:0 6px 18px rgba(90,80,255,.45);border-radius:50px;padding:12px 24px}
@media (max-width:980px){
 .topbar-info>a{display:none}
 .topbar-inner{justify-content:center}
 .topbar-soc{display:none}
 .site-header{backdrop-filter:none}
 .primary-nav a:not(.btn){font-size:15px;padding:10px 0;display:block;width:100%;border-bottom:1px solid #3a3a3a}
 .primary-nav li{width:100%}
 .primary-nav a:not(.btn)::after{display:none}
}

/* ===== Blog v2 ===== */
.blog-hero .form{margin-top:22px;max-width:520px}
.blog-hero .form input{border:0}
.thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35)}
.thumb-ph .ic{width:56px;height:56px}
.thumb-cat{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;font:600 11.5px Poppins,sans-serif;padding:5px 11px;border-radius:50px}
.post-card{transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(0,0,0,.18)}
.post-thumb img{transition:transform .5s}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-excerpt{font-size:13.5px;color:#555;margin:.3em 0 .8em}
.read-more{font-weight:600;font-size:13.5px;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.read-more .ic{width:12px;height:12px}
.cat-pills{margin-bottom:30px}
.cat-pills small{opacity:.6;margin-left:4px}
.featured{margin-bottom:34px}
.badge{display:inline-block;background:var(--teal);color:#062;font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:50px;margin-right:8px}
.byline{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:13.5px;color:#555}
.byline img{border-radius:50%;width:36px;height:36px}
.byline.light{color:#ccc;margin:14px 0 0}
.empty-state{text-align:center;padding:40px 0}
.read-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:150;background:transparent}
.read-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal))}
.entry-content.share{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid #d5e8df}
.share a{color:var(--blue);display:inline-flex}
.share .ic{width:22px;height:22px}
.share button{font:inherit;border:1px solid #cfe5dc;background:#fff;padding:6px 14px;border-radius:3px;cursor:pointer}
.post-cta{background:linear-gradient(120deg,var(--ink),#2a2470);color:#fff;border-radius:6px}
.post-cta.inline{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 22px;margin:28px 0;border-left:4px solid var(--teal)}
.post-cta.inline strong{display:block}
.post-cta.inline span{font-size:13.5px;color:#d5d5e6}
.post-cta.final{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:32px;margin-top:40px;box-shadow:0 16px 34px rgba(90,80,255,.3)}
.post-cta.final h3{font-size:1.4rem;margin-bottom:.3em}
.post-cta.final p{margin:0;color:#d5d5e6;max-width:520px}
.author-box{display:flex;gap:16px;align-items:center;background:#fff;padding:20px;border-radius:4px;margin-top:24px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.author-box img{border-radius:50%;flex:none}
.author-box p{margin:2px 0 0;font-size:13.5px}

/* ===== Success stories ===== */
.case-thumb .ph-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(1.3rem,2vw,1.7rem) Arial,sans-serif;color:rgba(255,255,255,.9);text-align:center;padding:16px;letter-spacing:.03em;text-transform:uppercase}
.case-thumb.g1{background:linear-gradient(135deg,#2a2470,#5a50ff)}
.case-thumb.g2{background:linear-gradient(135deg,#0d5c4a,#00e2a8)}
.case-thumb.g3{background:linear-gradient(135deg,#5a2a8a,#a06de0)}
.case-thumb.g4{background:linear-gradient(135deg,#1e1e1e,#5a50ff)}
.case-tag{display:inline-block;font:600 11.5px Poppins,sans-serif;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.case{transition:transform .25s,box-shadow .25s}
.case:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(0,0,0,.18)}
.case-body .read-more{margin-top:12px}
.case-facts{display:grid;gap:14px}
.case-facts div{border-bottom:1px solid #e3efe9;padding-bottom:12px}
.case-facts b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#666}
.case-headline{font:700 clamp(1.3rem,2.2vw,1.8rem) Arial,sans-serif;color:var(--blue);margin-bottom:.4em}
@media (max-width:980px){.post-cta.final{padding:24px}}

/* ===== Listen player ===== */
.listen{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid #d5e8df;border-radius:8px;padding:14px 18px;margin-bottom:30px;box-shadow:0 8px 20px rgba(0,0,0,.07)}
.listen[hidden]{display:none}
.listen-play{width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--blue),#7a3cff);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 16px rgba(90,80,255,.4)}
.listen-play svg{width:24px;height:24px}
.listen-play .i-pause{display:none}
.listen[data-state="playing"] .i-play{display:none}
.listen[data-state="playing"] .i-pause{display:block}
.listen-info{flex:1 1 200px;min-width:0}
.listen-info b{display:block;font:700 15px Arial,sans-serif}
.listen-info span{font-size:12.5px;color:#666}
.listen-bar{height:4px;background:#e3efe9;border-radius:4px;margin-top:8px;overflow:hidden}
.listen-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .3s}
.listen-speed{font-size:12.5px;display:flex;align-items:center;gap:6px;color:#555}
.listen-speed select{font:inherit;padding:5px 8px;border:1px solid #cfe5dc;border-radius:3px;background:#fff}
.listen-stop{font:inherit;font-size:13px;border:1px solid #cfe5dc;background:#fff;padding:7px 14px;border-radius:3px;cursor:pointer}
.listen[data-state="idle"] .listen-stop{display:none}
.post-cta.inline{clear:both}

/* Listen: voice picker and reading highlight */
.listen-voice{font-size:12.5px;display:flex;align-items:center;gap:6px;color:#555}
.listen-voice[hidden]{display:none}
.listen-voice select{font:inherit;padding:5px 8px;border:1px solid #cfe5dc;border-radius:3px;background:#fff;max-width:190px}
.is-reading{background:rgba(90,80,255,.09);box-shadow:-10px 0 0 rgba(90,80,255,.09),10px 0 0 rgba(90,80,255,.09);border-radius:3px;transition:background .3s}
/* Blog cards without a featured image */
.post-thumb{position:relative}
.post-card:nth-child(4n+1) .thumb-ph,.featured .thumb-ph{background:linear-gradient(135deg,#2a2470,#5a50ff)}
.post-card:nth-child(4n+2) .thumb-ph{background:linear-gradient(135deg,#0d5c4a,#00e2a8)}
.post-card:nth-child(4n+3) .thumb-ph{background:linear-gradient(135deg,#3b1d6e,#a06de0)}
.post-card:nth-child(4n) .thumb-ph{background:linear-gradient(135deg,#262626,#5a50ff)}

/* Blog reader: language and captions */
.listen-lang{font-size:12.5px;display:flex;align-items:center;gap:6px;color:#555}
.listen-lang select{font:inherit;padding:5px 8px;border:1px solid #cfe5dc;border-radius:3px;background:#fff;max-width:170px}
.listen-cap{flex:1 1 100%;margin:4px 0 0;padding:10px 14px;background:#f2f0ff;border-left:3px solid var(--blue);border-radius:3px;font-size:15px;line-height:1.5;color:#2b2b2b}
.listen-cap[hidden]{display:none}
/* Homepage welcome (inline in the hero, no popup) */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}

/* Post illustrations */
.post-thumb img,.entry-thumb img,.featured .post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.entry-thumb img{height:auto;aspect-ratio:16/9}
.entry-content figure.ar-art{margin:2em 0;border-radius:10px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.14)}
.entry-content figure.ar-art img{width:100%;height:auto;aspect-ratio:16/9;display:block;border-radius:0}

/* Mobile: no sideways scroll, listen player fits the screen */
body{max-width:100%;overflow-x:clip}
img,svg,video,iframe{max-width:100%}
@media (max-width:640px){
.listen{padding:12px;gap:12px}
.listen-info{flex:1 1 calc(100% - 70px)}
.listen-lang,.listen-voice,.listen-speed{flex:1 1 100%;justify-content:space-between}
.listen-lang select,.listen-voice select,.listen-speed select{max-width:none;flex:1;min-height:40px}
.listen-stop{min-height:40px}
.listen-cap{font-size:16px}
}

/* ===== About page: founder ===== */
.page-hero h1 span{color:var(--purple)}
.about-hero .container{padding-bottom:0}
.about-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:end}
.about-hero-grid>div:first-child{padding-bottom:clamp(30px,4vw,56px)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.founder{position:relative;margin:0;width:100%;max-width:460px;justify-self:center;aspect-ratio:1/1}
.founder-bg{position:absolute;inset:4% 6% 0;border-radius:50% 50% 6px 6px/44% 44% 6px 6px;background:radial-gradient(circle at 30% 18%,#8a7dff,var(--blue) 46%,#3327c9);overflow:hidden;box-shadow:0 26px 60px rgba(90,80,255,.4)}
.founder-bg::before{content:"";position:absolute;inset:0;background:var(--pattern-inner) center/cover;opacity:.35;mix-blend-mode:screen}
.founder::before{content:"";position:absolute;inset:0 2% 4%;border:3px solid var(--teal);border-radius:50%;opacity:.55}
.founder img{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:2}
.founder-tag{position:absolute;left:-3%;bottom:9%;z-index:3;background:#fff;color:var(--text);padding:10px 16px;border-radius:4px;border-left:4px solid var(--teal);box-shadow:0 14px 28px rgba(0,0,0,.3)}
.founder-tag b{display:block;font:700 15px Arial,sans-serif}
.founder-tag span{font-size:12.5px;color:#666}
.chip-float{position:absolute;z-index:3;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.22);padding:8px 14px;border-radius:50px;font:600 12.5px Poppins,sans-serif;box-shadow:0 10px 22px rgba(0,0,0,.35);animation:floaty 5s ease-in-out infinite}
.chip-float.f1{top:12%;right:-3%}
.chip-float.f2{top:46%;left:-5%;animation-delay:-2.5s}
@keyframes floaty{50%{transform:translateY(-8px)}}
.story .lead{font-size:1.12rem}
.story p{max-width:none}
.sign{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid #d5e8df}
.sign b{display:block;font:700 17px Arial,sans-serif}
.sign span{font-size:13.5px;color:#666}
.sign-links{display:flex;align-items:center;gap:14px}
.sign-links a{color:var(--blue);display:inline-flex}
.sign-links .ic{width:22px;height:22px}
.sign-site{font-weight:600;font-size:14px;text-decoration:none}
.split.story aside.panel-card{position:sticky;top:110px}
.panel-card .btn{margin-top:14px}
.cover{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.cover>div{background:#fff;padding:24px 22px;border-radius:4px;border-top:3px solid var(--blue);box-shadow:0 12px 26px rgba(0,0,0,.1)}
.cover h3{color:var(--blue);font-size:17px}
.cover p{font-size:14px;margin:0;color:#555}
.chip.alt{background:transparent;box-shadow:none;border:1px solid #bfd6cc}
@media (max-width:980px){
 .about-hero-grid{grid-template-columns:1fr}
 .about-hero-grid>div:first-child{padding-bottom:0}
 .founder{max-width:380px;margin-top:10px}
 .chip-float.f1{right:0}.chip-float.f2{left:0}.founder-tag{left:0}
 .cover{grid-template-columns:repeat(2,1fr)}
 .split.story aside.panel-card{position:static}
}
@media (max-width:640px){.cover{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.chip-float{animation:none}}

/* ===== AI assistant ===== */
.btn-ai{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:50px;padding:11px 18px;font:600 14px Poppins,sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.btn-ai:hover{border-color:var(--teal);color:var(--teal)}
.ai-spark{width:16px;height:16px;fill:var(--teal);flex:none}
.ai-drawer{position:fixed;right:14px;bottom:14px;z-index:130;width:min(390px,calc(100vw - 28px));height:min(590px,calc(100dvh - 28px));background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);transition:opacity .2s,transform .2s,visibility .2s}
.ai-drawer.open{opacity:1;visibility:visible;transform:none}
.ai-head{background:linear-gradient(90deg,var(--blue),#7a3cff);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.ai-head .av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.ai-head .ai-spark{fill:#fff;width:20px;height:20px}
.ai-head b{display:block;font:700 15px Arial,sans-serif}
.ai-head small{opacity:.85;font-size:12px}
.ai-close{margin-left:auto;background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.ai-drawer .ai-root{display:flex;flex-direction:column;flex:1;min-height:0}
.ai-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.ai-log:empty{display:none}
.ai-msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-msg.bot{background:#fff;color:var(--text);border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ai-msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.ai-msg a{color:inherit;text-decoration:underline}
.ai-typing{display:flex;gap:5px;width:58px}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:#9a9a9a;animation:aidot 1s infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes aidot{50%{transform:translateY(-5px);opacity:.5}}
.ai-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;background:var(--paper)}
.ai-chips[hidden]{display:none}
.ai-chips button{border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:50px;padding:7px 13px;font:500 12.5px Poppins,sans-serif;cursor:pointer}
.ai-chips button:hover{background:var(--blue);color:#fff}
.ai-form{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid #e3ece8}
.ai-form input{flex:1;min-width:0;border:1px solid #d5e0db;border-radius:50px;padding:11px 16px;font:14px Poppins,sans-serif}
.ai-form button{border:0;background:var(--blue);color:#fff;border-radius:50%;width:42px;height:42px;cursor:pointer;display:grid;place-items:center;flex:none}
.ai-foot{padding:0 12px 12px;background:#fff;font-size:11.5px;color:#777;text-align:center}
.ai-box{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:6px;padding:clamp(22px,3vw,36px);margin:0 auto 34px;max-width:1000px;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.ai-box::before{content:"";position:absolute;inset:0;background:var(--pattern-inner) center/cover;opacity:.5;pointer-events:none}
.ai-box>*{position:relative}
.ai-box h3{color:#fff;font-size:1.35rem;margin-bottom:.3em}
.ai-box p{color:#ccc;max-width:640px}
.ai-box .ai-log{max-height:340px;background:transparent;padding:8px 0 12px}
.ai-box .ai-msg.bot{background:#343434;color:#fff;box-shadow:none}
.ai-box .ai-chips,.ai-box .ai-form{background:transparent;padding-inline:0;border:0}
.ai-box .ai-chips button{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ai-box .ai-chips button:hover{background:var(--teal);border-color:var(--teal);color:#000}
.ai-box .ai-form input{background:#fff}
.entry-content .ai-box{max-width:none}
@media (max-width:640px){.ai-drawer{right:0;bottom:0;width:100%;height:84dvh;border-radius:14px 14px 0 0}}
@media (prefers-reduced-motion:reduce){.ai-drawer{transition:none}.ai-typing i{animation:none}}

/* ===== Header fix: no wrapping, compact desktop nav, earlier mobile menu ===== */
.brand{flex:none}
.brand-link,.brand-text{white-space:nowrap}
.header-inner{gap:clamp(12px,1.6vw,24px)}
.primary-nav{gap:clamp(12px,1.4vw,20px);flex-wrap:nowrap}
.primary-nav ul{gap:clamp(14px,1.7vw,26px);flex-wrap:nowrap}
.primary-nav a,.btn-nav,.btn-ai{white-space:nowrap}
.primary-nav a:not(.btn){font-size:clamp(12.5px,1.05vw,14px);letter-spacing:.04em}
.btn-nav{padding:12px 20px;font-size:14px}
.btn-ai{padding:10px 16px;font-size:13.5px}
@media (max-width:1200px){
 .nav-toggle{display:block}
 .brand::after{display:none}
 .primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);border-bottom:1px solid #444;padding:12px 20px 22px;flex-direction:column;align-items:stretch;gap:14px;max-height:calc(100vh - 110px);overflow-y:auto}
 .primary-nav.is-open{display:flex}
 .primary-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
 .primary-nav li{width:100%}
 .primary-nav a:not(.btn){display:block;width:100%;padding:12px 0;font-size:15px;border-bottom:1px solid #3a3a3a}
 .primary-nav a:not(.btn)::after{display:none}
 .primary-nav .sub-menu{display:flex;position:static;border:0;padding:0 0 0 14px;min-width:0;background:transparent}
 .btn-nav,.btn-ai{justify-content:center;width:100%}
}

/* ===== About hero (no photo) ===== */
.about-hero-grid.no-photo{grid-template-columns:1fr;max-width:860px}
.about-hero-grid.no-photo>div:first-child{padding-bottom:clamp(34px,5vw,64px)}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-pills span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 12.5px Poppins,sans-serif;padding:8px 16px;border-radius:50px}

/* ===== Home: testimonials ===== */
.testi-head{text-align:center;max-width:720px;margin:0 auto 38px}
.testi-head p{margin:.6em auto 0;color:#555}
.tcar{position:relative}
.tcar-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:12px 4px 30px;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:4px}
.tcar-track::-webkit-scrollbar{display:none}
.tcard{flex:0 0 calc((100% - 44px) / 3);scroll-snap-align:start;margin:0;position:relative;display:flex;flex-direction:column;background:#fff;border-radius:10px;border-top:4px solid var(--blue);padding:26px 26px 22px;box-shadow:0 14px 34px rgba(38,38,80,.1);transition:transform .25s,box-shadow .25s}
.tcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(90,80,255,.18)}
.tcard::after{content:"\201C";position:absolute;right:20px;top:34px;font:700 76px/1 Georgia,serif;color:rgba(90,80,255,.12);pointer-events:none}
.tcard-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:14px;padding-right:44px}
.tstars{color:#f5b301;font-size:18px;letter-spacing:2px;line-height:1}
.ttag{background:#eeecff;color:var(--blue);font:600 11.5px Poppins,sans-serif;padding:5px 12px;border-radius:50px}
.tq{margin:0 0 22px;flex:1;font-size:15px;line-height:1.75;color:#333;border:0;padding:0}
.twho{display:flex;align-items:center;gap:14px;border-top:1px solid #ececf4;padding-top:18px}
.tav{flex:none;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 15px Poppins,sans-serif;letter-spacing:.02em;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.av0{background:linear-gradient(135deg,#5a50ff,#8a7dff)}
.av1{background:linear-gradient(135deg,#00b98a,#00e2a8)}
.av2{background:linear-gradient(135deg,#7a3cff,#a06de0)}
.av3{background:linear-gradient(135deg,#ff7a59,#ffb15c)}
.av4{background:linear-gradient(135deg,#1aa3d9,#20d0f0)}
.av5{background:linear-gradient(135deg,#e5468f,#ff7fb0)}
.twho b{display:block;font:700 15px/1.3 Arial,Helvetica,sans-serif;color:var(--ink)}
.twho small{display:block;font-size:13px;line-height:1.4;color:#666;margin-top:2px}
.tcountry{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font:600 12px Poppins,sans-serif;font-style:normal;color:var(--blue)}
.tcountry .ic{width:13px;height:13px}
.tcar-nav{display:flex;justify-content:center;gap:12px}
.tcar-btn{width:46px;height:46px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(90,80,255,.4);transition:transform .2s,opacity .2s}
.tcar-btn:hover{transform:scale(1.08)}
.tcar-btn:disabled{opacity:.35;cursor:default;transform:none}
.tcar-btn .ic{width:18px;height:18px}
.tcar-btn.prev .ic{transform:rotate(180deg)}
@media (max-width:980px){.tcard{flex-basis:calc((100% - 22px) / 2)}}
@media (max-width:640px){.tcard{flex-basis:88%}.testi-head{margin-bottom:26px}}
@media (prefers-reduced-motion:reduce){.tcar-track{scroll-behavior:auto}.tcard{transition:none}}

/* ===== v2.3.3 · Our Work (rounded, modern cards) ===== */
.filters{gap:10px;margin-top:26px}
.filters button{font:500 14px Poppins,Arial,sans-serif;padding:10px 22px;border-radius:999px;border:1.5px solid #dcd9ff;background:#fff;color:#3b3b57;cursor:pointer;box-shadow:0 4px 12px rgba(90,80,255,.06);transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s}
.filters button:hover{transform:translateY(-2px);border-color:var(--blue);color:var(--blue);box-shadow:0 8px 18px rgba(90,80,255,.16)}
.filters button[aria-pressed="true"]{background:linear-gradient(135deg,var(--blue),#8a7dff);border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(90,80,255,.35)}
.filters button:focus-visible{outline:3px solid rgba(90,80,255,.35);outline-offset:2px}
.grid-3 .case{border-radius:24px;background:#fff;border:1px solid rgba(90,80,255,.08);box-shadow:0 18px 40px -18px rgba(38,38,80,.28);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.grid-3 .case:hover{transform:translateY(-8px);box-shadow:0 30px 55px -20px rgba(90,80,255,.4)}
.case .case-thumb{margin:10px 10px 0;border-radius:16px;overflow:hidden;aspect-ratio:16/10.5;align-items:flex-end;padding:14px}
.case .case-thumb img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case:hover .case-thumb img{transform:scale(1.07)}
.case .case-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,50,0) 45%,rgba(20,18,50,.55));pointer-events:none}
.case .case-result{z-index:1;display:inline-flex;align-items:center;gap:8px;max-width:100%;font:600 13px/1.25 Poppins,Arial,sans-serif;color:#1d1b3a;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.case .case-result i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,226,168,.25)}
.case .case-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.case .case-tag{align-self:flex-start;background:#eeecff;color:var(--blue);padding:5px 12px;border-radius:999px;font:600 11px Poppins,sans-serif;letter-spacing:.07em;margin-bottom:12px}
.case[data-cat*="commerce"] .case-tag{background:#e3faf3;color:#0a8f6c}
.case[data-cat*="job"] .case-tag{background:#f3eaff;color:#7a3cff}
.case .case-body h3{font-size:1.08rem;line-height:1.35;margin:0 0 8px;text-transform:none}
.case .case-body p{color:#5a5a70;line-height:1.6;flex:1}
.case .case-body .read-more{margin-top:16px;color:var(--blue);gap:10px}
.case .case-body .read-more .ic{box-sizing:content-box;width:12px;height:12px;padding:7px;border-radius:50%;background:#eeecff;transition:transform .25s,background .25s,color .25s}
.case:hover .read-more .ic{transform:translateX(4px);background:var(--blue);color:#fff}

/* ===== v2.3.3 · Testimonials (rounded, soft, appealing) ===== */
.testi{position:relative;overflow:hidden;background:linear-gradient(180deg,#f2fcf8 0%,#eeeeff 100%)}
.testi::before,.testi::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.testi::before{width:340px;height:340px;left:-110px;top:40px;background:#c9c4ff}
.testi::after{width:320px;height:320px;right:-100px;bottom:20px;background:#b8f5e2}
.testi .container{position:relative;z-index:1}
.tcar-track{gap:26px;padding:34px 8px 40px}
.tcard{--acc:#5a50ff;--acc2:#8a7dff;--tint:#f1efff;flex-basis:calc((100% - 52px) / 3);border:1px solid rgba(255,255,255,.9);border-top:1px solid rgba(255,255,255,.9);border-radius:32px;padding:44px 28px 24px;background:linear-gradient(160deg,#fff 0%,var(--tint) 130%);box-shadow:0 22px 50px -22px rgba(38,38,90,.35),0 2px 0 rgba(255,255,255,.8) inset}
.tcard:nth-child(6n+2){--acc:#00b98a;--acc2:#00e2a8;--tint:#e6faf3}
.tcard:nth-child(6n+3){--acc:#7a3cff;--acc2:#a06de0;--tint:#f4ecff}
.tcard:nth-child(6n+4){--acc:#ff7a59;--acc2:#ffb15c;--tint:#fff1ea}
.tcard:nth-child(6n+5){--acc:#1aa3d9;--acc2:#20d0f0;--tint:#e8f7fd}
.tcard:nth-child(6n+6){--acc:#e5468f;--acc2:#ff7fb0;--tint:#ffedf5}
.tcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px -22px var(--acc),0 2px 0 rgba(255,255,255,.8) inset}
.tcard::after{content:none}
.tq-badge{position:absolute;left:28px;top:-24px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font:700 42px/1 Georgia,serif;padding-top:16px;box-shadow:0 12px 24px -6px var(--acc),0 0 0 6px rgba(255,255,255,.9)}
.tcard-top{padding-right:0;margin-bottom:16px}
.ttag{background:#fff;color:var(--acc);border:1px solid var(--acc);border-color:color-mix(in srgb,var(--acc) 30%,#fff);padding:5px 14px;border-radius:999px}
.tq{font-size:15.5px;line-height:1.8;color:#3a3a4f}
.twho{border-top:1px dashed rgba(90,80,140,.22);padding-top:18px}
.tav{width:54px;height:54px;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 0 0 3px #fff,0 0 0 5px var(--acc2),0 10px 18px -6px var(--acc)}
.twho b{font:600 15.5px/1.3 Poppins,Arial,sans-serif}
.tcountry{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-style:normal;font-size:12px;font-weight:500;color:var(--acc);background:#fff;padding:3px 10px 3px 8px;border-radius:999px}
.tcountry .ic{width:12px;height:12px}
.tcar-nav{gap:14px;margin-top:4px}
.tcar-btn{width:50px;height:50px;background:#fff;color:var(--blue);box-shadow:0 10px 24px -8px rgba(90,80,255,.45);border:1px solid rgba(90,80,255,.15);transition:transform .2s,background .2s,color .2s}
.tcar-btn:hover:not(:disabled){background:var(--blue);color:#fff;transform:scale(1.08)}
@media (max-width:980px){.tcard{flex-basis:calc((100% - 26px) / 2)}}
@media (max-width:640px){.tcard{flex-basis:86%;border-radius:28px}.tcar-track{padding-left:4px}}

/* Live astronaut (hero) */
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(16px,4vw,48px)}
.hero-astro{position:relative;justify-self:center;width:min(100%,460px);pointer-events:none}
.astro-wrap{animation:aenter 1.2s ease-out backwards;position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.astro-glow{position:absolute;inset:10% 0 0;background:radial-gradient(closest-side,rgba(90,80,255,.55),rgba(0,226,168,.12) 60%,transparent);}
.astro-img{position:relative;display:block;width:100%;height:auto;animation:afloat 6s ease-in-out infinite;will-change:transform}
.astro-wrap::after{content:"";position:absolute;left:12%;right:8%;bottom:-4%;height:9%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);z-index:-1}
@keyframes afloat{50%{transform:translateY(-12px) rotate(.6deg)}}
.rank{position:absolute;left:2%;top:0;text-align:left;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .7s,transform .7s;filter:drop-shadow(0 0 12px rgba(0,226,168,.7))}
.rank b{display:block;font:700 clamp(2.6rem,6vw,4rem)/1 Poppins,sans-serif;color:var(--teal)}
.rank span{font:600 11px Poppins,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#fff}
.hero-astro:not(.typing) .rank{opacity:1;transform:none}
.codefly{position:absolute;left:14%;top:44%;width:30%;height:10%}
.codefly i{position:absolute;bottom:0;font:700 14px Poppins,monospace;font-style:normal;color:var(--teal);opacity:0}
.codefly i:nth-child(1){left:0}.codefly i:nth-child(2){left:28%;color:var(--purple)}.codefly i:nth-child(3){left:52%}.codefly i:nth-child(4){left:74%;color:#fff}
.typing .codefly i{animation:acode 2.6s ease-out infinite}
.typing .codefly i:nth-child(2){animation-delay:.65s}.typing .codefly i:nth-child(3){animation-delay:1.3s}.typing .codefly i:nth-child(4){animation-delay:1.95s}
@keyframes acode{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}
.astro-bob{will-change:transform}
.typing .astro-bob{animation:atype 1.2s ease-in-out infinite}
@keyframes atype{50%{transform:translateY(-3px)}}
@media (max-width:820px){.hero-in{grid-template-columns:1fr}.hero-astro{width:min(88%,340px);margin-top:10px}.hero{padding:50px 0 34px}}
@media (prefers-reduced-motion:reduce){.astro-img,.astro-glow,.codefly i{animation:none!important}.astro-wrap,.rank{transition:none}}
.hero{padding-bottom:clamp(60px,8vw,96px)}.hero-astro{display:flex;justify-content:center;overflow:visible}.astro-wrap{width:auto;max-width:100%}.astro-img{width:auto;max-width:100%;max-height:min(58vh,430px);margin:0 auto}.hero-off *,.hero-off::before,.hero-off::after{animation-play-state:paused!important}
@media (max-width:820px){.hero::before,.hero::after{filter:blur(50px);width:300px;height:300px}}
@keyframes aenter{from{opacity:0}}

/* Astronaut fix v8: no clipping, smoother hero */
.hero-astro{padding:26px 0 30px;overflow:visible}
.astro-wrap{will-change:auto}
.astro-img{width:auto;max-width:100%;max-height:min(60vh,460px);height:auto;will-change:transform;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.astro-bob{will-change:auto}
.astro-glow{inset:6% -6% 0;background:radial-gradient(closest-side,rgba(90,80,255,.45),rgba(0,226,168,.1) 62%,transparent)}
.codefly{left:12%;top:34%;width:32%}
.rank{filter:none;text-shadow:0 0 14px rgba(0,226,168,.7)}
/* laggy bits: blurred animated orbs and endless text-shine repaint */
.hero::before,.hero::after{filter:none;animation:none;width:620px;height:620px;opacity:.28;background:radial-gradient(closest-side,var(--blue),transparent)}
.hero::after{background:radial-gradient(closest-side,var(--teal),transparent);opacity:.16}
.hero h1{animation:rise .8s .12s backwards}
@media (max-width:820px){.hero-astro{padding:14px 0 18px}.astro-img{max-height:340px}.hero::before,.hero::after{width:340px;height:340px}}

/* ===== Space Work section, mission cards & case pages (v9) ===== */
.mission-board{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;padding:clamp(26px,4vw,52px);color:#fff;background:radial-gradient(120% 90% at 85% 0,rgba(90,80,255,.4),transparent 55%),radial-gradient(90% 70% at 0 100%,rgba(0,226,168,.16),transparent 60%),linear-gradient(180deg,#161433,#0d0c24);box-shadow:0 40px 80px -30px rgba(38,30,120,.65)}
.mission-board::before,.mission-board::after,.space-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat;opacity:.9}
.mission-board::before,.space-hero::before{background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 34% 68%,#fff,transparent),radial-gradient(1.6px 1.6px at 58% 14%,#cfe,transparent),radial-gradient(1px 1px at 76% 52%,#fff,transparent),radial-gradient(1.4px 1.4px at 90% 84%,#fff,transparent),radial-gradient(1px 1px at 22% 90%,#fff,transparent);background-size:340px 300px;animation:twinkle 4s ease-in-out infinite alternate}
.mission-board::after{background-image:radial-gradient(1px 1px at 8% 40%,#fff,transparent),radial-gradient(1.2px 1.2px at 46% 34%,#bff,transparent),radial-gradient(1px 1px at 68% 80%,#fff,transparent),radial-gradient(1.4px 1.4px at 94% 30%,#fff,transparent);background-size:260px 240px;animation:twinkle 6s ease-in-out -2s infinite alternate}
@keyframes twinkle{to{opacity:.35}}
.shoot{position:absolute;z-index:-1;top:12%;left:-20%;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);opacity:0;transform:rotate(24deg);animation:shoot 7s linear infinite;pointer-events:none}
.shoot.s2{top:48%;animation-delay:3.6s;animation-duration:9s;width:90px}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(24deg)}4%{opacity:1}22%{opacity:0;transform:translate(120vw,55vw) rotate(24deg)}100%{opacity:0}}
.mission-head{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:center}
.mission-head h2{color:#fff;margin:.2em 0 .3em;font-size:clamp(2rem,4.4vw,3rem)}
.mission-head p{color:#cfcdf5;max-width:520px;margin:0}
.mission-board .eyebrow{color:var(--teal)}
.work-astro{width:min(100%,300px);justify-self:end;padding:8px 0 4px}
.work-astro .astro-img{max-height:250px}
.work-astro .astro-wrap{animation:none}
.mission-board .filters button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#e8e6ff;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mission-board .filters button[aria-pressed="true"]{background:linear-gradient(135deg,var(--blue),#8a7dff);color:#fff;border-color:transparent}
.mission-board .center-btn{margin-bottom:0}
/* cards */
.fx-grid .case{--rx:0deg;--ry:0deg;--mx:50%;--my:0%;position:relative;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:flat;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.fx-grid .case:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px)}
.fx-grid .case::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(90,80,255,.22),transparent 65%);box-shadow:inset 0 0 0 1.5px rgba(0,226,168,.55)}
.fx-grid .case:hover::before{opacity:1}
.mission-board .case:hover{box-shadow:0 0 0 1px rgba(0,226,168,.5),0 30px 60px -18px rgba(0,226,168,.35)}
.case-thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s}
.case:hover .case-thumb::before{transform:translateX(120%)}
.case-thumb.g1,.case-thumb.g2,.case-thumb.g3,.case-thumb.g4{background-image:radial-gradient(1.3px 1.3px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.4px 1.4px at 82% 68%,#fff,transparent),radial-gradient(1px 1px at 38% 78%,#fff,transparent);background-size:auto}
.case-thumb.g1{background-color:#2a2470}.case-thumb.g2{background-color:#0d5c4a}.case-thumb.g3{background-color:#5a2a8a}.case-thumb.g4{background-color:#1e1e1e}
.mission-tag{position:absolute;left:14px;top:14px;z-index:3;font:600 10.5px Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);background:rgba(13,12,36,.72);border:1px solid rgba(0,226,168,.45);padding:5px 11px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card-astro{position:absolute;right:8px;bottom:-104px;z-index:2;width:92px;height:86px;background:url(assets/img/astronaut-v8.webp) center/contain no-repeat;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));transition:transform .55s cubic-bezier(.2,.9,.3,1.2);pointer-events:none}
.case:hover .card-astro{transform:translateY(-124px) rotate(-6deg);animation:afloat 3.4s ease-in-out .5s infinite}
.card-code{position:absolute;right:20px;bottom:14px;z-index:3;width:70px;height:20px;pointer-events:none}
.card-code i{position:absolute;bottom:0;font:700 13px Poppins,monospace;font-style:normal;color:var(--teal);opacity:0}
.card-code i:nth-child(1){left:0}.card-code i:nth-child(2){left:38%;color:#fff}.card-code i:nth-child(3){left:72%;color:var(--purple)}
.case:hover .card-code i{animation:acode 2s ease-out infinite}
.case:hover .card-code i:nth-child(2){animation-delay:.6s}.case:hover .card-code i:nth-child(3){animation-delay:1.2s}
.case .case-result{margin-right:96px}
.js-fx .fx-grid .case{opacity:0;translate:0 26px;transition:opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.js-fx .fx-grid .case.in{opacity:1;translate:0 0}
.js-fx .fx-grid .case:nth-child(3n+2){transition-delay:.1s,.1s,0s,0s}.js-fx .fx-grid .case:nth-child(3n){transition-delay:.2s,.2s,0s,0s}
/* archive + single hero */
.space-hero{position:relative;overflow:hidden;isolation:isolate}
.ph-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;align-items:center}
.space-hero .work-astro{width:min(100%,260px)}
.space-hero .work-astro .astro-img{max-height:220px}
.mission-result{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;padding:9px 18px;border-radius:999px;font:600 14px Poppins,sans-serif;color:#fff;background:rgba(0,226,168,.12);border:1px solid rgba(0,226,168,.5);box-shadow:0 0 22px rgba(0,226,168,.25);animation:pulse 2.6s ease-in-out infinite}
.mission-result i{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,226,168,.25)}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 28px}
.kpi{padding:18px 20px;border-radius:18px;color:#fff;background:linear-gradient(160deg,#1d1a4a,#2a2470);box-shadow:0 18px 34px -18px rgba(38,30,120,.7);border:1px solid rgba(160,109,224,.35)}
.kpi b{display:block;font:700 1.35rem/1.15 Poppins,sans-serif;color:var(--teal)}
.kpi span{display:block;margin-top:6px;font-size:13px;color:#cfcdf5}
.case-story{counter-reset:mstep}
.case-story h2{counter-increment:mstep;position:relative;padding-left:58px;margin:1.6em 0 .6em;font-size:1.35rem}
.case-story h2:first-child{margin-top:0}
.case-story h2::before{content:counter(mstep,decimal-leading-zero);position:absolute;left:0;top:-4px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px Poppins,sans-serif;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 0 0 5px rgba(90,80,255,.14),0 8px 18px rgba(90,80,255,.4)}
.case-story ul{list-style:none;padding-left:58px}
.case-story li{position:relative;margin:.5em 0}
.case-story li::before{content:"\2191";position:absolute;left:-24px;top:0;color:var(--teal);font-weight:700}
.case-story p{padding-left:58px}
.mission-card{border-top:4px solid var(--teal)}
.case-facts a{color:var(--blue);word-break:break-all}
@media (max-width:820px){.mission-head,.ph-grid{grid-template-columns:1fr}.work-astro,.space-hero .work-astro{justify-self:center;width:min(70%,230px)}.mission-board{border-radius:22px}.case-story h2,.case-story ul,.case-story p{padding-left:0}.case-story h2{padding-left:52px}.case-story h2::before{top:-6px}.case-story li::before{left:-18px}.case-story ul{padding-left:20px}.fx-grid .case{transform:none!important}.card-astro{display:none}.case .case-result{margin-right:0}}
@media (prefers-reduced-motion:reduce){.mission-board::before,.mission-board::after,.space-hero::before,.shoot,.mission-result,.case:hover .card-astro,.case:hover .card-code i{animation:none!important}.js-fx .fx-grid .case{opacity:1;translate:none;transition:none}.fx-grid .case,.fx-grid .case:hover{transform:none}}
.work-astro .rank{z-index:2;left:-6%}.work-astro .rank b{font-size:clamp(2rem,5vw,2.8rem)}.work-astro .rank span{font-size:9px;letter-spacing:.16em}

/* ===== v10: case-study page fix + animations ===== */
/* Fix: heading went gray on the dark hero; layout could shrink/overflow */
html,body{width:100%;max-width:100%}
.page-hero h1,.space-hero h1{color:#fff!important;-webkit-text-fill-color:#fff;opacity:1!important;font-family:Poppins,Arial,sans-serif;word-break:break-word}
.space-hero .container,.ph-grid>*{min-width:0}
.site-header,.topbar,main{width:100%;max-width:100%}
.header-inner{flex-wrap:nowrap;min-width:0}
.primary-nav{min-width:0}
@media (min-width:1201px) and (max-width:1420px){.primary-nav{gap:14px}.primary-nav ul{gap:16px}.primary-nav a:not(.btn){font-size:13px}.btn-nav,.btn-ai{padding-inline:14px;white-space:nowrap}}
/* Fix: cards under "More success stories" must never stay invisible */
.single-case_study .fx-grid .case{opacity:1!important;translate:none!important}
.single-case_study .split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.single-case_study .entry-content img{max-width:100%;height:auto}
@media (max-width:980px){.single-case_study .split{grid-template-columns:1fr}.single-case_study .mission-card{position:static}}
/* Animations */
@keyframes c-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes c-shine{to{background-position:-200% 0}}
@keyframes c-orbit{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes c-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.single-case_study .space-hero .eyebrow{animation:c-rise .6s .05s both}
.single-case_study .space-hero h1{animation:c-rise .8s .15s both}
.single-case_study .space-hero .mission-result{animation:c-rise .8s .35s both,pulse 2.6s 1.2s ease-in-out infinite}
.single-case_study .space-hero h1::after{content:"";display:block;height:2px;margin-top:16px;max-width:340px;background:linear-gradient(90deg,var(--teal),var(--blue),transparent);transform-origin:left;animation:c-line 1s .5s both}
.single-case_study .space-hero .work-astro .astro-bob{animation:c-orbit 5s ease-in-out infinite}
.kpi{opacity:0;transform:translateY(24px) scale(.96);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.kpi.in{opacity:1;transform:none}
.kpi:nth-child(2){transition-delay:.1s}.kpi:nth-child(3){transition-delay:.2s}.kpi:nth-child(4){transition-delay:.3s}
.kpi.in:hover{transform:translateY(-6px);box-shadow:0 24px 40px -16px rgba(0,226,168,.45)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.case-story h2::before{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.case-story h2:hover::before{transform:rotate(360deg) scale(1.1)}
.mission-card{transition:box-shadow .3s,transform .3s}
.mission-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(0,226,168,.5)}
.read-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9999;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--teal),var(--blue),var(--purple));pointer-events:none}
@media (prefers-reduced-motion:reduce){.single-case_study .space-hero *,.kpi,.rv{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}
/* v10.1: case page CTA + AI */
.case-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;animation:c-rise .8s .5s both}
.btn-ghost{display:inline-flex;align-items:center;padding:13px 24px;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;text-decoration:none;font:600 14.5px Arial,sans-serif;transition:background .25s,border-color .25s,color .25s}
.btn-ghost:hover{background:var(--teal);border-color:var(--teal);color:#000}
.case-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:34px 0;padding:26px 30px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#1d1a4a,#2a2470 60%,#0d5c4a);box-shadow:0 24px 44px -22px rgba(38,30,120,.8);position:relative;overflow:hidden}
.case-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:translateX(-120%);animation:c-sweep 5s 1s ease-in-out infinite;pointer-events:none}
@keyframes c-sweep{to{transform:translateX(120%)}}
.case-cta h3{color:#fff;margin:0 0 4px;font-size:1.3rem}.case-cta p{margin:0;color:#cfcdf5}
.case-cta .btn{position:relative;z-index:1;background:var(--teal);color:#062}
.case-ai{scroll-margin-top:100px}.case-ai .ai-box{margin:0 0 20px}
@media (max-width:640px){.case-cta{padding:22px}.case-cta .btn,.case-cta-row .btn,.btn-ghost{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.case-cta::after,.case-cta-row{animation:none!important}}
/* v11.1: force full width, even if an error box tries to shrink the page */
html,body,body#error-page,body.single-case_study{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:var(--paper)!important;border-radius:0!important}
.single-case_study main,.single-case_study .site-header,.single-case_study .topbar,.single-case_study .space-hero,.single-case_study .section,.single-case_study .site-footer{width:100%;max-width:none}
.single-case_study .container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,3vw,36px)}
.single-case_study .primary-nav a:not(.btn){color:#fff}