/* =========================================================
OneStaff.ai — Marketing site
Dark, dub.co-inspired surface. Black + single yellow accent.
Built on the brand design tokens (Montserrat, yellow, slate ink).
========================================================= */
/* Fonts are loaded via in each page's (non-blocking) instead of a render-blocking @import. */
:root{
--yellow:#ffd700;
--yellow-mark:#f5c518;
--yellow-dark:#d4b000;
--yellow-soft:rgba(255,215,0,0.10);
--yellow-ring:rgba(255,215,0,0.22);
--bg:#0a0a0b; /* page canvas, near-black */
--bg-2:#101012; /* raised section */
--bg-3:#0d0d0f; /* alt band */
--ink-disc:#1a1a1a; /* brand disc black */
--text:#f4f4f5; /* primary text on dark */
--text-2:rgba(244,244,245,0.66); /* body */
--text-3:rgba(244,244,245,0.42); /* muted / labels */
--stroke:rgba(255,255,255,0.09);
--stroke-2:rgba(255,255,255,0.14);
--glass:rgba(255,255,255,0.035);
--glass-2:rgba(255,255,255,0.05);
--font-sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
--ease:cubic-bezier(0.16,1,0.3,1);
--maxw:1200px;
--radius:16px;
--radius-lg:22px;
--radius-pill:999px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-sans);
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
line-height:1.6;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--yellow);color:#1a1a1a}
/* Grain + grid backdrop, fixed behind everything ------------ */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none}
.backdrop .grid{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%);
}
.backdrop .glow{
position:absolute;left:50%;top:-280px;transform:translateX(-50%);
width:1100px;height:760px;
background:radial-gradient(ellipse at center,rgba(255,215,0,0.16),transparent 62%);
filter:blur(20px);
}
.backdrop .grain{
position:absolute;inset:0;opacity:0.5;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Layout helpers ------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
section{position:relative;z-index:1}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;
color:var(--text-3);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px var(--yellow-soft)}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{
font-size:clamp(30px,4.4vw,50px);line-height:1.06;font-weight:700;letter-spacing:-0.03em;
text-wrap:balance;
}
.section-head p{margin-top:18px;color:var(--text-2);font-size:18px;text-wrap:pretty}
.accent{color:var(--yellow)}
/* Buttons -------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--font-sans);font-weight:600;font-size:14.5px;
padding:13px 22px;border-radius:var(--radius-pill);border:1px solid transparent;
cursor:pointer;transition:background var(--ease) .2s,border-color var(--ease) .2s,color var(--ease) .2s,transform var(--ease) .2s;
white-space:nowrap;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--yellow);color:#1a1a1a;box-shadow:0 0 0 0 var(--yellow-ring)}
.btn-primary:hover{background:#ffe23d;transform:translateY(-1px)}
.btn-ghost{background:var(--glass-2);color:var(--text);border-color:var(--stroke-2)}
.btn-ghost:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.22)}
.btn-lg{padding:16px 28px;font-size:15.5px}
/* Nav ------------------------------------------------------ */
.nav{
position:fixed;top:0;left:0;right:0;z-index:50;
transition:background var(--ease) .25s,border-color var(--ease) .25s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(10,10,11,0.72);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border-bottom:1px solid var(--stroke);
}
.nav-inner{display:flex;align-items:center;gap:32px;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:-0.02em}
.brand img{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,0.10),0 0 22px rgba(255,215,0,0.16)}
.brand .ai{color:var(--text-3);font-weight:500}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:8px}
.nav-links a{font-size:14px;color:var(--text-2);font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta .signin{font-size:14px;color:var(--text-2);font-weight:500}
.nav-cta .signin:hover{color:var(--text)}
.nav-search-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
background:transparent;border:1px solid var(--stroke-2);color:var(--text-2);cursor:pointer;
transition:color .15s,border-color .15s,background .15s}
.nav-search-btn:hover{color:var(--text);border-color:var(--stroke-2);background:var(--glass-2)}
.nav-search-btn svg{width:17px;height:17px}
.nav-burger{display:none;background:none;border:none;color:var(--text);cursor:pointer}
/* Hero ----------------------------------------------------- */
.hero{padding:148px 0 90px;text-align:center}
.hero .eyebrow{
background:var(--glass);border:1px solid var(--stroke);
padding:7px 14px;border-radius:var(--radius-pill);
}
.hero h1{
margin:26px auto 0;max-width:14ch;
font-size:clamp(44px,7.4vw,86px);line-height:1.0;font-weight:700;letter-spacing:-0.04em;
text-wrap:balance;
}
.hero h1 .save{position:relative;white-space:nowrap}
.hero h1 .save .ul{
position:absolute;left:0;right:0;bottom:0.08em;height:0.10em;border-radius:2px;
background:var(--yellow);transform:scaleX(0);transform-origin:left;
}
.hero h1.in .save .ul{animation:ul-grow .9s var(--ease) 1s forwards}
@keyframes ul-grow{to{transform:scaleX(1)}}
.hero .sub{
margin:26px auto 0;max-width:60ch;font-size:clamp(16px,2vw,19px);color:var(--text-2);
text-wrap:pretty;
}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-trust{margin-top:30px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--text-3);font-size:13px}
.avatars{display:flex}
.avatars img{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);margin-left:-9px;object-fit:cover}
.avatars img:first-child{margin-left:0}
.hero-stars{color:var(--yellow);letter-spacing:1px}
/* Hero visual: orbit -------------------------------------- */
.orbit-wrap{margin:72px auto 0;position:relative;width:min(640px,92vw);aspect-ratio:1/1}
.orbit-ring{
position:absolute;inset:0;border:1px solid var(--stroke);border-radius:50%;
}
.orbit-ring.r2{inset:14%}
.orbit-ring.r3{inset:28%}
.orbit-ring.dashed{border-style:dashed;border-color:rgba(255,255,255,0.07)}
.orbit-core{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:30%;aspect-ratio:1/1;display:grid;place-items:center;
}
.orbit-core img{width:100%;height:100%;border-radius:50%;
box-shadow:0 0 0 8px rgba(255,215,0,0.06),0 0 60px rgba(255,215,0,0.18);}
.orbit-core .pulse{
position:absolute;inset:0;border-radius:50%;border:1px solid var(--yellow-ring);
animation:pulse-out 3s ease-out infinite;
}
@keyframes pulse-out{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
/* rotating chip layers */
.orbit-layer{position:absolute;inset:0;animation:spin 40s linear infinite}
.orbit-layer.rev{animation-direction:reverse;animation-duration:54s}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-chip{
position:absolute;left:50%;top:50%;
--r:0px;--a:0deg;
transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.orbit-chip .pill{
/* counter-rotate handled by layer; keep chip upright via JS-less trick above */
display:flex;align-items:center;gap:8px;
background:rgba(16,16,18,0.9);border:1px solid var(--stroke-2);
padding:8px 13px 8px 9px;border-radius:var(--radius-pill);
backdrop-filter:blur(8px);box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,0.45));
transform:translate(-50%,-50%);white-space:nowrap;font-size:12.5px;font-weight:600;
animation:counter-spin 40s linear infinite;
}
.orbit-layer.rev .orbit-chip .pill{animation-duration:54s;animation-direction:reverse}
@keyframes counter-spin{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.orbit-chip .ico{
width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
background:var(--yellow-soft);color:var(--yellow);flex:none;
}
.orbit-chip .ico svg{width:15px;height:15px}
/* Hero variant switching ----------------------------------- */
.hero-visual{display:none;margin:72px auto 0}
body[data-hero="orbit"] .hv-orbit{display:block}
body[data-hero="wave"] .hv-wave{display:block}
body[data-hero="clock"] .hv-clock{display:block}
/* Voice waveform variant */
.wave-wrap{position:relative;width:min(720px,94vw);margin-inline:auto}
.wave-card{
position:relative;border:1px solid var(--stroke);border-radius:var(--radius-lg);
background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.015));
padding:34px 30px 30px;overflow:hidden;
}
.wave-card .wglow{position:absolute;left:50%;top:-120px;transform:translateX(-50%);
width:520px;height:360px;background:radial-gradient(ellipse,var(--yellow-soft),transparent 64%);filter:blur(10px)}
.wave-head{display:flex;align-items:center;gap:12px;position:relative}
.wave-head img{width:38px;height:38px;border-radius:50%}
.wave-head .t{font-weight:600;font-size:15px}
.wave-head .s{font-size:12px;color:var(--text-3)}
.wave-head .live-tag{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;
letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.wave-head .live-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;
box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:blink 1.6s ease-out infinite}
.wave-bars{display:flex;align-items:center;gap:4px;height:120px;margin:26px 0 4px;position:relative}
.wave-bars span{flex:1;border-radius:var(--radius-pill);background:linear-gradient(180deg,var(--yellow),var(--yellow-dark));
height:18%;animation:wave 1.1s ease-in-out infinite;transform-origin:center}
@keyframes wave{0%,100%{height:14%;opacity:.55}50%{height:var(--h,70%);opacity:1}}
.wave-cap{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-3);font-family:var(--font-mono)}
.wave-pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}
.wave-pills .wp{display:inline-flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--stroke);
padding:7px 13px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:500;color:var(--text-2)}
.wave-pills .wp i{color:var(--yellow)}
.wave-pills .wp svg{width:14px;height:14px}
/* Clock variant */
.clock-wrap{position:relative;width:min(540px,92vw);aspect-ratio:1/1;margin-inline:auto}
.clock-face{position:absolute;inset:0;border-radius:50%;border:1px solid var(--stroke);
background:radial-gradient(circle at 50% 40%,rgba(255,215,0,0.05),transparent 60%)}
.clock-face.f2{inset:11%;border-style:dashed;border-color:rgba(255,255,255,0.08)}
.clock-ticks{position:absolute;inset:0;animation:none}
.clock-tick{position:absolute;left:50%;top:50%;transform-origin:0 0}
.clock-tick .tk{display:flex;align-items:center;gap:7px;transform:translate(-50%,-50%);
background:rgba(16,16,18,0.9);border:1px solid var(--stroke-2);padding:6px 11px;border-radius:var(--radius-pill);
font-size:11.5px;font-weight:600;white-space:nowrap}
.clock-tick .tk .ico{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--yellow-soft);color:var(--yellow)}
.clock-tick .tk .ico svg{width:12px;height:12px}
.clock-hand{position:absolute;left:50%;top:50%;width:2px;height:34%;background:linear-gradient(var(--yellow),transparent);
transform-origin:bottom center;transform:translate(-50%,-100%) rotate(0deg);animation:sweep 8s linear infinite;border-radius:2px}
@keyframes sweep{to{transform:translate(-50%,-100%) rotate(360deg)}}
.clock-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24%;aspect-ratio:1/1;display:grid;place-items:center}
.clock-core img{width:100%;border-radius:50%;box-shadow:0 0 0 8px rgba(255,215,0,0.06),0 0 50px rgba(255,215,0,0.18)}
/* Live time-saved ticker ----------------------------------- */
.ticker{
margin:34px auto 0;display:inline-flex;align-items:center;gap:14px;
background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius-pill);
padding:10px 18px;font-size:13px;color:var(--text-2);
}
.ticker .num{font-family:var(--font-mono);color:var(--yellow);font-weight:500;font-size:15px}
.ticker .live{display:inline-flex;align-items:center;gap:7px;color:var(--text-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ticker .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:blink 1.6s ease-out infinite}
@keyframes blink{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
/* Logo marquee --------------------------------------------- */
.marquee-sec{padding:54px 0 10px;text-align:center}
.marquee-sec .cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.marquee{margin-top:26px;overflow:hidden;
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:slide 32s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-track img{height:26px;width:auto;opacity:.62;filter:grayscale(1) brightness(0) invert(1);transition:opacity .2s}
.marquee-track img:hover{opacity:1}
/* Departments --------------------------------------------- */
.depts{padding:104px 0}
.dept-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.dept-card{
grid-column:span 4;
background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);
padding:26px;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
position:relative;overflow:hidden;
}
.dept-card:hover{border-color:var(--stroke-2);background:var(--glass-2);transform:translateY(-3px)}
.dept-card.wide{grid-column:span 6}
.dept-card .dico{
width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
background:var(--yellow-soft);color:var(--yellow);margin-bottom:18px;
border:1px solid var(--yellow-ring);
}
.dept-card .dico svg{width:21px;height:21px}
.dept-card h3{font-size:18px;font-weight:600;letter-spacing:-0.01em}
.dept-card p{margin-top:9px;color:var(--text-2);font-size:14.5px}
.dept-card .tasks{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.dept-card .task{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-3)}
.dept-card .task svg{width:15px;height:15px;color:var(--yellow);flex:none}
.dept-card .glow-corner{
position:absolute;right:-40px;top:-40px;width:160px;height:160px;
background:radial-gradient(circle,var(--yellow-soft),transparent 70%);opacity:0;transition:opacity .3s;
}
.dept-card:hover .glow-corner{opacity:1}
/* How it works -------------------------------------------- */
.how{padding:104px 0;background:var(--bg-2);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding:30px;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--glass)}
.step .n{
font-family:var(--font-mono);font-size:13px;color:var(--yellow);
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;border:1px solid var(--yellow-ring);background:var(--yellow-soft);
margin-bottom:18px;font-weight:500;
}
.step h3{font-size:19px;font-weight:600;letter-spacing:-0.01em}
.step p{margin-top:10px;color:var(--text-2);font-size:14.5px}
.step .line{position:absolute;top:47px;right:-22px;width:22px;height:1px;background:var(--stroke-2);z-index:2}
@media(max-width:860px){.step .line{display:none}}
/* Metrics -------------------------------------------------- */
.metrics{padding:96px 0}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border:1px solid var(--stroke);border-radius:var(--radius-lg);overflow:hidden;background:var(--glass)}
.metric{padding:40px 30px;text-align:center;border-right:1px solid var(--stroke)}
.metric:last-child{border-right:none}
.metric .v{font-size:clamp(34px,4.6vw,52px);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--text)}
.metric .v .u{color:var(--yellow)}
.metric .l{margin-top:12px;color:var(--text-2);font-size:14px;text-wrap:balance}
/* Testimonials -------------------------------------------- */
.testi{padding:104px 0;background:var(--bg-3);border-top:1px solid var(--stroke)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{
background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);padding:28px;
display:flex;flex-direction:column;
}
.quote.feat{grid-column:span 2;background:linear-gradient(160deg,rgba(255,215,0,0.07),var(--glass))}
.quote .mark{font-size:40px;line-height:0.6;color:var(--yellow);font-family:Georgia,serif;height:24px}
.quote p{font-size:clamp(16px,1.7vw,19px);color:var(--text);font-weight:500;margin-top:10px;letter-spacing:-0.01em;line-height:1.45;flex:1}
.quote .who{margin-top:24px;display:flex;align-items:center;gap:12px}
.quote .who img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.quote .who .n{font-size:14px;font-weight:600}
.quote .who .r{font-size:12.5px;color:var(--text-3)}
/* Pricing -------------------------------------------------- */
.pricing{padding:104px 0}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.tier{
background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:30px;
display:flex;flex-direction:column;gap:4px;
}
.tier.pop{border-color:var(--yellow-ring);background:linear-gradient(180deg,rgba(255,215,0,0.06),var(--glass));position:relative}
.tier .badge{position:absolute;top:-12px;left:30px;background:var(--yellow);color:#1a1a1a;
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill)}
.tier .tname{font-size:15px;font-weight:600;color:var(--text-2)}
.tier .price{font-size:42px;font-weight:700;letter-spacing:-0.03em;margin-top:10px}
.tier .price small{font-size:15px;color:var(--text-3);font-weight:500}
.tier .pdesc{color:var(--text-2);font-size:14px;margin-top:8px;min-height:42px}
.tier .btn{margin-top:20px;width:100%}
.tier ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.tier li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-2)}
.tier li svg{width:16px;height:16px;color:var(--yellow);flex:none;margin-top:2px}
/* FAQ ------------------------------------------------------ */
.faq{padding:104px 0}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius-lg);
padding:4px 24px;transition:border-color .2s ease,background .2s ease;
}
.faq-item[open]{border-color:var(--yellow-ring);background:var(--glass-2)}
.faq-item summary{
list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 0;font-size:16px;font-weight:600;color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:18px;height:18px;color:var(--yellow);flex:none;transition:transform .25s ease}
.faq-item[open] summary svg{transform:rotate(45deg)}
.faq-item p{color:var(--text-2);font-size:15px;line-height:1.6;padding:0 0 20px;margin:0;max-width:64ch}
.faq-cta{
max-width:760px;margin:40px auto 0;display:flex;align-items:center;justify-content:center;
gap:18px;flex-wrap:wrap;color:var(--text-2);font-size:15px;
}
/* Big CTA -------------------------------------------------- */
.cta{padding:40px 0 110px}
.cta-card{
position:relative;overflow:hidden;text-align:center;
border:1px solid var(--stroke-2);border-radius:28px;padding:78px 40px;
background:linear-gradient(180deg,#161616,#0d0d0e);
}
.cta-card .glow{position:absolute;left:50%;top:-160px;transform:translateX(-50%);
width:760px;height:520px;background:radial-gradient(ellipse,rgba(255,215,0,0.22),transparent 64%);filter:blur(20px)}
.cta-card .grid-c{position:absolute;inset:0;background-image:
linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
background-size:48px 48px;mask-image:radial-gradient(ellipse 60% 80% at 50% 0%,#000,transparent 70%)}
.cta-card h2{position:relative;font-size:clamp(32px,5vw,58px);font-weight:700;letter-spacing:-0.035em;line-height:1.02;text-wrap:balance}
.cta-card p{position:relative;margin:18px auto 0;max-width:48ch;color:var(--text-2);font-size:18px}
.cta-card .hero-cta{margin-top:32px}
/* Footer --------------------------------------------------- */
.footer{border-top:1px solid var(--stroke);padding:60px 0 40px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px;border-bottom:1px solid var(--stroke)}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{color:var(--text-3);font-size:13.5px;max-width:30ch}
.foot-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:16px}
.foot-col a{display:block;color:var(--text-2);font-size:14px;margin-bottom:11px;transition:color .15s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:26px;color:var(--text-3);font-size:13px;flex-wrap:wrap;gap:12px}
.foot-bottom .socials{display:flex;gap:16px}
.foot-bottom .socials a:hover{color:var(--yellow)}
/* Reveal animation ----------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.orbit-layer,.orbit-chip .pill,.marquee-track,.pulse,.hero h1 .save .ul{animation:none!important}
.hero h1 .save .ul{transform:scaleX(1)}
}
/* Responsive ----------------------------------------------- */
@media(max-width:1000px){
.dept-card,.dept-card.wide{grid-column:span 6}
.metric-grid{grid-template-columns:repeat(2,1fr)}
.metric:nth-child(2){border-right:none}
.metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--stroke)}
.testi-grid,.tiers{grid-template-columns:1fr}
.quote.feat{grid-column:span 1}
.steps{grid-template-columns:1fr;gap:14px}
.foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
.nav-links,.nav-cta .signin,.nav-cta .btn-primary{display:none}
.nav-burger{display:block}
.dept-card,.dept-card.wide{grid-column:span 12}
.metric-grid{grid-template-columns:1fr}
.metric{border-right:none;border-bottom:1px solid var(--stroke)}
.metric:last-child{border-bottom:none}
.foot-top{grid-template-columns:1fr}
.hero{padding-top:120px}
}
/* =========================================================
v2 additions — multi-page chrome + richer homepage
========================================================= */
/* Mobile nav menu ------------------------------------------ */
/* Fixed, self-scrolling panel pinned under the bar so every item — including
the footer actions — is always reachable on a phone. */
.nav-mobile{
display:none;flex-direction:column;
position:fixed;top:68px;left:0;right:0;
/* Explicit viewport-based height (not bottom:0): the nav's backdrop-filter
makes it the containing block for this fixed panel, so bottom:0 would
resolve against the 68px bar and collapse the menu. */
height:calc(100vh - 68px);
height:calc(100dvh - 68px);
overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
padding:6px 18px 26px;
background:rgba(10,10,11,0.99);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.nav-mobile.open{display:flex}
body.menu-open{overflow:hidden}
/* Keep the top bar solid + seamless with the panel while the menu is open. */
body.menu-open .nav{
background:rgba(10,10,11,0.99);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom-color:transparent;
}
/* Collapsible sections (accordion) ------------------------- */
.nm-acc{border-bottom:1px solid var(--stroke)}
.nm-acc-head{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
background:none;border:none;cursor:pointer;
font-family:var(--font-sans);font-size:16px;font-weight:600;letter-spacing:-0.01em;
color:var(--text);padding:16px 4px;transition:color .15s;
}
.nm-acc-head .nm-caret{width:18px;height:18px;color:var(--text-3);flex:none;transition:transform .28s var(--ease),color .15s}
.nm-acc.open .nm-acc-head,.nm-acc-head:hover{color:var(--yellow)}
.nm-acc.open .nm-acc-head .nm-caret{transform:rotate(180deg);color:var(--yellow)}
.nm-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.nm-acc.open .nm-acc-body{grid-template-rows:1fr}
.nm-acc-inner{overflow:hidden;min-height:0}
/* Nested sub-dropdowns: tap a category header to reveal its links in a single,
aligned column (built from each .nm-sub-label + .nm-sub pair by site.js). */
.nm-sub-group{border-top:1px solid var(--stroke)}
.nm-acc-inner > .nm-sub-group:first-child{border-top:none}
.nm-sub-head{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
background:none;border:none;cursor:pointer;text-align:left;
font-family:var(--font-sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--text-3);padding:14px 4px;transition:color .15s;
}
.nm-sub-head > span{flex:1;min-width:0}
.nm-sub-head .nm-sub-caret{width:15px;height:15px;flex:none;color:var(--text-3);transition:transform .26s var(--ease),color .15s}
.nm-sub-group.open .nm-sub-head,.nm-sub-head:hover{color:var(--text)}
.nm-sub-group.open .nm-sub-head .nm-sub-caret{transform:rotate(180deg);color:var(--yellow)}
.nm-sub-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease)}
.nm-sub-group.open .nm-sub-body{grid-template-rows:1fr}
.nm-sub-inner{overflow:hidden;min-height:0}
/* Single-column, indented items — overrides the old 2-col grid + inner scroll. */
.nav-mobile .nm-sub{grid-template-columns:1fr;gap:0;max-height:none;overflow:visible;
border-bottom:none;margin:0;padding:2px 0 12px}
.nav-mobile .nm-sub a{padding:11px 8px 11px 12px;font-size:14px;font-weight:500;color:var(--text-2);border-radius:9px}
.nav-mobile .nm-sub a:hover,.nav-mobile .nm-sub a:active{background:var(--glass-2);color:var(--text)}
/* Footer actions — pinned to the bottom of the panel ------- */
.nm-foot{display:flex;flex-direction:column;gap:10px;padding-top:18px;margin-top:auto}
.nm-foot .signin{text-align:center;padding:12px;font-size:15px;font-weight:500;color:var(--text-2)}
.nm-foot .btn{justify-content:center;color:#1a1a1a}
.nav-links a.active{color:var(--text)}
/* #5 — sliding underline for top-level nav links (slides in on hover, stays on active) */
.nav-links > a,.nav-links > .has-drop > a{position:relative}
.nav-links > a::after,.nav-links > .has-drop > a::after{
content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
background:var(--yellow);transform:scaleX(0);transform-origin:left;
transition:transform .25s var(--ease);pointer-events:none}
.nav-links > a:hover::after,.nav-links > .has-drop > a:hover::after,
.nav-links > a.active::after,.nav-links > .has-drop > a.active::after{transform:scaleX(1)}
/* Safety net: above the burger breakpoint the mobile panel must never stay
shown or keep the page scroll locked, even if a resize handler misses. */
@media(min-width:681px){
.nav-mobile.open{display:none}
body.menu-open{overflow-x:hidden;overflow-y:auto}
body.menu-open .nav{border-bottom-color:var(--stroke)}
}
/* Footer CTA + badges -------------------------------------- */
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
padding:36px 40px;margin-bottom:48px;border:1px solid var(--stroke-2);border-radius:var(--radius-lg);
background:linear-gradient(120deg,rgba(255,215,0,0.07),var(--glass))}
.foot-cta h3{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-0.02em}
.foot-cta p{color:var(--text-2);margin-top:6px;font-size:15px}
.foot-badges{display:flex;gap:14px;margin-top:18px}
.foot-badges span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-3);font-weight:500}
.foot-badges svg{width:14px;height:14px;color:var(--yellow)}
/* Enterprise wordmark strip -------------------------------- */
.enterprise{padding:30px 0 8px;text-align:center}
.enterprise .cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.wordmarks{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 44px}
.wordmarks .wm{font-size:21px;font-weight:700;letter-spacing:-0.02em;color:rgba(244,244,245,0.5);
display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.wordmarks .wm:hover{color:var(--text)}
.wordmarks .wm i{width:10px;height:10px;border-radius:2px;background:currentColor;display:inline-block;opacity:.7}
.wordmarks .wm.round i{border-radius:50%}
/* Section base spacing override for new sections ----------- */
.sec{padding:104px 0}
/* Product console mockup ----------------------------------- */
.console{padding:64px 0 104px}
.console-shell{position:relative;border:1px solid var(--stroke-2);border-radius:18px;overflow:hidden;
background:linear-gradient(180deg,#141416,#0d0d0f);box-shadow:0 40px 120px -40px rgba(0,0,0,0.8);}
.console-shell .cglow{position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:680px;height:420px;
background:radial-gradient(ellipse,var(--yellow-soft),transparent 64%);filter:blur(10px);pointer-events:none}
.console-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--stroke)}
.console-bar .dots{display:flex;gap:7px}
.console-bar .dots span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.16)}
.console-bar .addr{margin-left:14px;font-family:var(--font-mono);font-size:12px;color:var(--text-3);
background:var(--glass);border:1px solid var(--stroke);padding:5px 12px;border-radius:8px}
.console-bar .live-tag{margin-left:auto}
.live-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.live-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:blink 1.6s ease-out infinite}
.console-body{display:grid;grid-template-columns:200px 1fr;min-height:440px}
.console-side{border-right:1px solid var(--stroke);padding:18px 14px;display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,0.2)}
.console-side .si{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13px;color:var(--text-2);font-weight:500}
.console-side .si svg{width:15px;height:15px;color:var(--text-3)}
.console-side .si.on{background:var(--yellow-soft);color:var(--text)}
.console-side .si.on svg{color:var(--yellow)}
.console-main{padding:22px;display:flex;flex-direction:column;gap:16px}
.console-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cstat{border:1px solid var(--stroke);border-radius:12px;padding:15px;background:var(--glass)}
.cstat .k{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.cstat .val{font-size:24px;font-weight:700;letter-spacing:-0.02em;margin-top:6px}
.cstat .val .up{font-size:12px;color:#22c55e;font-weight:600;margin-left:6px}
.console-feed{border:1px solid var(--stroke);border-radius:12px;background:var(--glass);overflow:hidden}
.console-feed .fh{padding:12px 16px;border-bottom:1px solid var(--stroke);font-size:12px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:8px}
.console-feed .fh svg{width:14px;height:14px;color:var(--yellow)}
.feed-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--stroke);font-size:13px}
.feed-row:last-child{border:none}
.feed-row .fi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--yellow-soft);color:var(--yellow);flex:none}
.feed-row .fi svg{width:14px;height:14px}
.feed-row .ft{flex:1;color:var(--text-2)}
.feed-row .ft b{color:var(--text);font-weight:600}
.feed-row .fs{font-size:11px;color:#22c55e;font-weight:600;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.feed-row .ftime{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
/* Bento capabilities --------------------------------------- */
.bento{padding:104px 0}
.bento-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:16px}
.bento-cell{position:relative;overflow:hidden;border:1px solid var(--stroke);border-radius:var(--radius);
background:var(--glass);padding:26px;transition:border-color .25s,background .25s,transform .25s;display:flex;flex-direction:column}
.bento-cell:hover{border-color:var(--stroke-2);background:var(--glass-2);transform:translateY(-3px)}
.bento-cell .bico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--yellow-soft);
border:1px solid var(--yellow-ring);color:var(--yellow);margin-bottom:16px}
.bento-cell .bico svg{width:20px;height:20px}
.bento-cell h3{font-size:18px;font-weight:600;letter-spacing:-0.01em}
.bento-cell p{margin-top:8px;color:var(--text-2);font-size:14px}
.bento-cell.c-a{grid-column:span 3;grid-row:span 2}
.bento-cell.c-b{grid-column:span 3}
.bento-cell.c-c{grid-column:span 3}
.bento-cell.c-d{grid-column:span 2}
.bento-cell.c-e{grid-column:span 2}
.bento-cell.c-f{grid-column:span 2}
.bento-cell .big-num{margin-top:auto;font-size:clamp(40px,6vw,68px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.bento-cell .big-num .u{color:var(--yellow)}
.bento-cell .glow-corner{position:absolute;right:-40px;top:-40px;width:170px;height:170px;
background:radial-gradient(circle,var(--yellow-soft),transparent 70%);opacity:0;transition:opacity .3s}
.bento-cell:hover .glow-corner{opacity:1}
/* mini globe chips inside feature cell */
.lang-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.lang-chips span{font-size:11.5px;color:var(--text-2);background:var(--glass-2);border:1px solid var(--stroke);
padding:5px 10px;border-radius:var(--radius-pill)}
/* Industries teaser ---------------------------------------- */
.ind-teaser{padding:104px 0;background:var(--bg-2);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ind-card{position:relative;overflow:hidden;border:1px solid var(--stroke);border-radius:var(--radius);
background:var(--glass);padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;
transition:border-color .25s,background .25s,transform .25s;text-decoration:none}
.ind-card:hover{border-color:var(--yellow-ring);background:var(--glass-2);transform:translateY(-3px)}
.ind-card .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--yellow-soft);color:var(--yellow);border:1px solid var(--yellow-ring)}
.ind-card .ico svg{width:19px;height:19px}
.ind-card .nm{font-size:15.5px;font-weight:600;letter-spacing:-0.01em}
.ind-card .nm small{display:block;color:var(--text-3);font-size:12.5px;font-weight:400;margin-top:4px}
.ind-card .arr{position:absolute;top:20px;right:20px;color:var(--text-3);opacity:0;transform:translateX(-4px);transition:.2s}
.ind-card:hover .arr{opacity:1;transform:none;color:var(--yellow)}
/* Trust / security band ------------------------------------ */
.trust{padding:96px 0}
.trust-card{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);
padding:44px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.trust-card h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-0.03em;line-height:1.08}
.trust-card p{color:var(--text-2);margin-top:14px;font-size:16px}
.trust-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tb{display:flex;align-items:center;gap:12px;border:1px solid var(--stroke);border-radius:12px;padding:16px;background:var(--glass-2)}
.tb .ico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--yellow-soft);color:var(--yellow);flex:none}
.tb .ico svg{width:18px;height:18px}
.tb .t{font-size:13.5px;font-weight:600}
.tb .s{font-size:11.5px;color:var(--text-3)}
/* Big global stats band ------------------------------------ */
.bigstats{padding:30px 0 110px}
.bigstats-inner{text-align:center}
.bigstats h2{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-0.03em;text-wrap:balance;max-width:18ch;margin:0 auto}
.bigstats .row{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bigstats .bs .v{font-size:clamp(38px,5vw,62px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.bigstats .bs .v .u{color:var(--yellow)}
.bigstats .bs .l{margin-top:10px;color:var(--text-2);font-size:14px}
/* Sub-page hero -------------------------------------------- */
.page-hero{padding:150px 0 64px;text-align:center}
.page-hero .eyebrow{background:var(--glass);border:1px solid var(--stroke);padding:7px 14px;border-radius:var(--radius-pill);margin-bottom:20px}
.page-hero h1{font-size:clamp(38px,6vw,68px);font-weight:700;letter-spacing:-0.04em;line-height:1.04;text-wrap:balance;max-width:16ch;margin:0 auto}
.page-hero p{margin:22px auto 0;max-width:60ch;color:var(--text-2);font-size:18px;text-wrap:pretty}
.page-hero .hero-cta{margin-top:30px}
/* About — values + timeline + team ------------------------- */
.values{padding:80px 0}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value{border:1px solid var(--stroke);border-radius:var(--radius);background:var(--glass);padding:28px}
.value .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow);margin-bottom:16px}
.value .ico svg{width:21px;height:21px}
.value h3{font-size:18px;font-weight:600;letter-spacing:-0.01em}
.value p{margin-top:9px;color:var(--text-2);font-size:14.5px}
.timeline{padding:80px 0}
.tl{max-width:760px;margin:0 auto;position:relative}
.tl::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--stroke-2)}
.tl-row{position:relative;padding:0 0 36px 50px}
.tl-row:last-child{padding-bottom:0}
.tl-row .dotn{position:absolute;left:4px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--yellow);box-shadow:0 0 0 4px var(--yellow-soft)}
.tl-row .yr{font-family:var(--font-mono);font-size:13px;color:var(--yellow);font-weight:500}
.tl-row h3{font-size:18px;font-weight:600;margin-top:4px;letter-spacing:-0.01em}
.tl-row p{color:var(--text-2);font-size:14.5px;margin-top:6px}
/* Industries page detail ----------------------------------- */
.ind-detail{padding:80px 0}
.ind-rows{display:flex;flex-direction:column;gap:18px}
.ind-row{display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:center;
border:1px solid var(--stroke);border-radius:var(--radius);background:var(--glass);padding:26px 28px;transition:border-color .25s,background .25s}
.ind-row:hover{border-color:var(--stroke-2);background:var(--glass-2)}
.ind-row .ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow)}
.ind-row .ico svg{width:26px;height:26px}
.ind-row h3{font-size:20px;font-weight:600;letter-spacing:-0.01em}
.ind-row p{color:var(--text-2);font-size:14.5px;margin-top:6px;max-width:62ch}
.ind-row .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ind-row .tags span{font-size:11.5px;color:var(--text-2);background:var(--glass-2);border:1px solid var(--stroke);padding:4px 10px;border-radius:var(--radius-pill)}
.ind-row .stat{text-align:right;white-space:nowrap}
.ind-row .stat .v{font-size:28px;font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.ind-row .stat .v .u{color:var(--yellow)}
.ind-row .stat .l{font-size:12px;color:var(--text-3);margin-top:2px}
/* How-it-works detail flow --------------------------------- */
.flow{padding:80px 0}
.flow-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:40px 0;border-top:1px solid var(--stroke)}
.flow-row:first-child{border-top:none}
.flow-row.rev .flow-text{order:2}
.flow-text .n{font-family:var(--font-mono);font-size:13px;color:var(--yellow);font-weight:500;
display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
border:1px solid var(--yellow-ring);background:var(--yellow-soft);margin-bottom:16px}
.flow-text h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-0.02em}
.flow-text p{color:var(--text-2);margin-top:12px;font-size:16px}
.flow-text ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.flow-text li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text-2)}
.flow-text li svg{width:17px;height:17px;color:var(--yellow);flex:none;margin-top:2px}
.flow-visual{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.015));padding:26px;min-height:280px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.fv-chip{display:flex;align-items:center;gap:12px;border:1px solid var(--stroke);border-radius:12px;background:var(--glass);padding:14px 16px}
.fv-chip .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--yellow-soft);color:var(--yellow);flex:none}
.fv-chip .ico svg{width:17px;height:17px}
.fv-chip .t{font-size:13.5px;font-weight:600}
.fv-chip .s{font-size:12px;color:var(--text-3)}
.fv-chip .ok{margin-left:auto;color:#22c55e}
.fv-chip .ok svg{width:18px;height:18px}
/* Responsive additions ------------------------------------- */
@media(max-width:1000px){
.console-body{grid-template-columns:1fr}
.console-side{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--stroke)}
.bento-grid{grid-template-columns:repeat(2,1fr)}
.bento-cell.c-a,.bento-cell.c-b,.bento-cell.c-c,.bento-cell.c-d,.bento-cell.c-e,.bento-cell.c-f{grid-column:span 1;grid-row:auto}
.ind-grid{grid-template-columns:repeat(2,1fr)}
.trust-card{grid-template-columns:1fr;gap:28px}
.bigstats .row{grid-template-columns:repeat(2,1fr);gap:34px 24px}
.values-grid{grid-template-columns:1fr}
.flow-row{grid-template-columns:1fr;gap:26px}
.flow-row.rev .flow-text{order:0}
.console-stats{grid-template-columns:1fr}
}
@media(max-width:680px){
.foot-cta{padding:26px;flex-direction:column;align-items:flex-start}
.ind-grid{grid-template-columns:1fr}
.bento-grid{grid-template-columns:1fr}
.bigstats .row{grid-template-columns:1fr;gap:30px}
.ind-row{grid-template-columns:1fr;text-align:left;gap:14px}
.ind-row .stat{text-align:left}
.wordmarks{gap:14px 26px}
.wordmarks .wm{font-size:18px}
}
/* =========================================================
v3 additions — Industries dropdown + industry detail pages
========================================================= */
/* Nav dropdown mega-menu ----------------------------------- */
.has-drop{position:relative;display:inline-flex}
.has-drop > a{display:inline-flex;align-items:center;gap:5px}
.caret{width:14px!important;height:14px!important;transition:transform .2s}
.has-drop:hover .caret{transform:rotate(180deg)}
.has-drop::after{content:"";position:absolute;top:100%;left:-20px;right:-20px;height:18px} /* hover bridge */
.drop-panel{
position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
width:min(780px,92vw);background:rgba(14,14,16,0.97);backdrop-filter:blur(18px) saturate(160%);
border:1px solid var(--stroke-2);border-radius:18px;padding:14px;
display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);
box-shadow:0 36px 90px -34px rgba(0,0,0,0.85);z-index:60;
}
.has-drop:hover .drop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.drop-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
font-size:13px;font-weight:500;color:var(--text-2);line-height:1.2}
.drop-item:hover{background:var(--glass-2);color:var(--text)}
.drop-item .di{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
background:rgba(255,215,0,0.06);color:#f4e08c;flex:none;border:1px solid rgba(255,215,0,0.14)}
.drop-item:hover .di{color:#ffe79e;background:rgba(255,215,0,0.10)}
.drop-item .di svg{width:14px;height:14px}
.drop-foot{grid-column:1/-1;border-top:1px solid var(--stroke);margin-top:8px;padding-top:6px}
.drop-foot a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:11px;
font-size:13px;font-weight:600;color:var(--yellow)}
.drop-foot a:hover{background:var(--yellow-soft)}
.drop-foot svg{width:16px;height:16px}
/* Company mega-menu (two columns) -------------------------- */
.drop-panel.mega{width:min(520px,92vw);grid-template-columns:1fr 1fr;gap:10px 22px;padding:18px}
.mega-col{display:flex;flex-direction:column;gap:2px}
.mega-head{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
font-weight:700;padding:4px 12px 10px}
.mega .drop-item{font-size:13.5px}
/* Research mega-menu — adds an "Our AI Models" column with two-line items */
.drop-panel.mega.rsch{width:min(620px,94vw);grid-template-columns:1.05fr 1fr;gap:10px 26px}
.rsch .models-col{position:relative}
.rsch .models-col::before{content:"";position:absolute;left:-13px;top:6px;bottom:6px;width:1px;
background:linear-gradient(180deg,transparent,var(--stroke-2),transparent)}
.drop-item.rich{align-items:center}
.drop-item.rich .dt{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.drop-item.rich .dt small{font-size:11px;font-weight:500;color:var(--text-3)}
.drop-item.rich:hover .dt small{color:var(--text-2)}
/* OneMind — image icon tinted gold to read on the dark panel */
.drop-item.onemind .di{width:34px;height:34px;border-radius:10px}
.drop-item.onemind .di img{width:24px;height:24px;object-fit:contain;
filter:brightness(0) saturate(100%) invert(86%) sepia(38%) saturate(540%) hue-rotate(348deg) brightness(98%)}
.drop-item.onemind .dt{font-size:14px;font-weight:600}
.nm-sub a img.nm-onemind{width:18px;height:18px;object-fit:contain;
filter:brightness(0) saturate(100%) invert(86%) sepia(38%) saturate(540%) hue-rotate(348deg) brightness(98%)}
/* Industries mega-menu (categorised, ~half page) ----------- */
.drop-panel.cats{width:min(900px,94vw);display:block;padding:18px 18px 12px}
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 16px;align-items:start}
.cats .mega-head{padding:2px 12px 9px;letter-spacing:.1em}
.cats .drop-item{font-size:13px;padding:9px 12px}
.cats .drop-foot{margin-top:12px}
/* Products mega-menu (one column per department) ----------- */
/* Wide panel: pin to viewport centre so it never overflows off-screen left. */
.drop-panel.depts{width:min(1100px,96vw);display:block;padding:18px 18px 14px;
position:fixed;top:78px;left:50%;transform:translateX(-50%) translateY(8px)}
.has-drop:hover .drop-panel.depts{transform:translateX(-50%) translateY(0)}
.depts-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 14px;align-items:start}
.depts .mega-head.dept{display:flex;align-items:center;gap:8px;padding:2px 10px 9px;letter-spacing:.1em;
color:var(--text-2);border-bottom:1px solid var(--stroke);margin-bottom:4px}
.depts .mega-head.dept svg{width:13px;height:13px;color:var(--yellow)}
.depts .drop-item{font-size:13px;padding:8px 10px}
.depts .drop-item .di{width:24px;height:24px}
.depts .drop-item.soon,.nm-sub a.soon{color:var(--text-3);font-weight:500;cursor:default;pointer-events:none}
/* Product items with their own image icons — show full-bleed, no tint frame. */
.depts .drop-item.has-img .di.imgico{width:28px;height:28px;background:none;border:none;border-radius:7px}
.depts .drop-item.has-img .di.imgico img{width:28px;height:28px;object-fit:contain;display:block}
.nm-sub a img.nm-prod-ico{width:20px;height:20px;object-fit:contain;flex:none}
/* Search overlay (navbar search) --------------------------- */
.search-overlay{position:fixed;inset:0;z-index:45;visibility:hidden;pointer-events:none}
.search-overlay.open{visibility:visible;pointer-events:auto}
.search-dim{position:absolute;top:68px;left:0;right:0;bottom:0;
background:rgba(6,6,8,0.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
opacity:0;transition:opacity .25s var(--ease)}
.search-overlay.open .search-dim{opacity:1}
.search-panel{position:absolute;top:68px;left:0;right:0;
background:rgba(12,12,14,0.97);backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
border-bottom:1px solid var(--stroke-2);box-shadow:0 30px 80px -40px rgba(0,0,0,0.85);
padding:42px 0 46px;opacity:0;transform:translateY(-14px);
transition:opacity .28s var(--ease),transform .28s var(--ease)}
.search-overlay.open .search-panel{opacity:1;transform:translateY(0)}
.search-form{width:58%;max-width:760px;min-width:280px;margin:0 auto;
display:flex;align-items:flex-end;gap:14px}
.search-field{position:relative;flex:1}
.search-input{width:100%;background:transparent;border:none;outline:none;
border-bottom:1px solid var(--stroke-2);padding:8px 2px 12px;
font-family:var(--font-sans);font-size:30px;font-weight:300;letter-spacing:-0.01em;
color:var(--text);transition:border-color .2s}
.search-input:focus{border-bottom-color:var(--yellow)}
.search-ph{position:absolute;left:2px;bottom:12px;pointer-events:none;
font-size:30px;font-weight:300;letter-spacing:-0.01em;color:var(--text-3);
opacity:0;transition:opacity .35s var(--ease);white-space:nowrap;
max-width:100%;overflow:hidden;text-overflow:ellipsis}
.search-ph.show{opacity:1}
.search-send{flex:none;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
display:grid;place-items:center;margin-bottom:6px;
background:#767676;color:#fff;opacity:.5;transition:opacity .2s,background .2s,transform .15s}
.search-send:not(:disabled){opacity:1;background:var(--yellow);color:#1a1a1a}
.search-send:not(:disabled):hover{transform:translateY(-1px)}
.search-send:disabled{cursor:default}
.search-send svg{width:20px;height:20px}
@media(max-width:680px){
.search-form{width:88%}
.search-input,.search-ph{font-size:23px}
.search-panel{padding:30px 0 34px}
}
/* Mobile industries sub-list ------------------------------- */
.nm-sub-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
font-weight:600;padding:14px 4px 6px}
.nm-sub{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-height:230px;overflow-y:auto;
border-bottom:1px solid var(--stroke);padding-bottom:10px;margin-bottom:4px}
.nm-sub a{display:flex;align-items:center;gap:8px;padding:9px 6px;font-size:12.5px;color:var(--text-2);border:none}
.nm-sub a svg{width:14px;height:14px;color:#f4e08c;flex:none}
/* Industry detail page ------------------------------------- */
.ind-hero{padding:150px 0 18px;text-align:center}
.ind-hero .badge-ico{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;margin:0 auto 24px;
background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow);
box-shadow:0 0 60px rgba(255,215,0,0.18)}
.ind-hero .badge-ico svg{width:34px;height:34px}
.ind-hero .eyebrow{margin-bottom:0}
.ind-hero h1{font-size:clamp(36px,5.6vw,64px);font-weight:700;letter-spacing:-0.04em;line-height:1.04;
text-wrap:balance;max-width:18ch;margin:20px auto 0}
.ind-hero p{margin:20px auto 0;max-width:62ch;color:var(--text-2);font-size:18px;text-wrap:pretty}
.ind-hero .hero-cta{margin-top:30px}
/* Faster / Smarter / Better pillars (reuses .values-grid) -- */
.fsb .value h3{font-size:20px}
.fsb .value .ico{background:var(--yellow-soft)}
/* Automations grid ----------------------------------------- */
.auto{padding:80px 0}
.auto-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.auto-item{display:flex;align-items:flex-start;gap:13px;border:1px solid var(--stroke);border-radius:12px;
background:var(--glass);padding:18px 20px;transition:border-color .2s,background .2s}
.auto-item:hover{border-color:var(--stroke-2);background:var(--glass-2)}
.auto-item .ck{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
background:var(--yellow-soft);color:var(--yellow);flex:none;border:1px solid var(--yellow-ring)}
.auto-item .ck svg{width:15px;height:15px}
.auto-item p{font-size:14.5px;color:var(--text-2);margin-top:3px}
/* Before / After strip ------------------------------------- */
.ba-sec{padding:40px 0 80px}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);padding:34px}
.ba .col .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.ba .col.b .k{color:var(--text-3)}
.ba .col.a .k{color:var(--yellow)}
.ba .col p{font-size:18px;font-weight:500;line-height:1.4}
.ba .col.b p{color:var(--text-3)}
.ba .col.a p{color:var(--text)}
.ba .arrow{color:var(--yellow);display:grid;place-items:center}
.ba .arrow svg{width:30px;height:30px}
/* Big centered industry quote ------------------------------ */
.ind-quote{padding:70px 0}
.ind-quote blockquote{max-width:900px;margin:0 auto;text-align:center;border:none}
.ind-quote .mk{font-size:64px;color:var(--yellow);font-family:Georgia,serif;line-height:0.5;height:34px}
.ind-quote p{font-size:clamp(21px,3vw,32px);font-weight:600;letter-spacing:-0.02em;line-height:1.32;
margin-top:14px;text-wrap:balance;color:var(--text)}
.ind-quote .who{margin-top:24px;color:var(--text-2);font-size:14.5px}
.ind-quote .who b{color:var(--text);font-weight:600}
/* Other-industries footer nav ------------------------------ */
.more-ind{padding:30px 0 96px}
.more-ind .cap{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:24px}
.more-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.more-grid a{display:flex;align-items:center;gap:9px;border:1px solid var(--stroke);border-radius:11px;
background:var(--glass);padding:12px 13px;font-size:12.5px;font-weight:500;color:var(--text-2);transition:border-color .2s,background .2s,color .2s}
.more-grid a:hover{border-color:var(--yellow-ring);background:var(--glass-2);color:var(--text)}
.more-grid a .mi{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--yellow-soft);color:var(--yellow);flex:none}
.more-grid a .mi svg{width:13px;height:13px}
.more-grid a.cur{border-color:var(--yellow-ring);background:var(--yellow-soft);color:var(--text)}
@media(max-width:900px){
.drop-panel{grid-template-columns:repeat(2,1fr)}
.auto-grid{grid-template-columns:1fr}
.more-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
.ba{grid-template-columns:1fr;gap:18px;text-align:left}
.ba .arrow{transform:rotate(90deg);justify-self:start}
.more-grid{grid-template-columns:repeat(2,1fr)}
}
/* =========================================================
v4 additions — enriched industry page content
========================================================= */
/* Problem section ------------------------------------------ */
.problem{padding:88px 0}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pain{display:flex;align-items:center;gap:12px;border:1px solid var(--stroke);border-radius:12px;
background:var(--glass);padding:16px 18px;font-size:14px;color:var(--text-2);font-weight:500;
transition:border-color .2s,background .2s}
.pain:hover{border-color:var(--stroke-2);background:var(--glass-2)}
.pain .px{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;
background:rgba(244,63,94,0.12);color:#fb7185;border:1px solid rgba(244,63,94,0.22)}
.pain .px svg{width:14px;height:14px}
/* Scenario "in action" card -------------------------------- */
.scenario{padding:30px 0 70px}
.scn-card{position:relative;overflow:hidden;border:1px solid var(--stroke-2);border-radius:var(--radius-lg);
background:linear-gradient(140deg,rgba(255,215,0,0.08),var(--glass));padding:40px 44px}
.scn-glow{position:absolute;left:-80px;top:-100px;width:380px;height:300px;
background:radial-gradient(ellipse,var(--yellow-soft),transparent 66%);filter:blur(12px);pointer-events:none}
.scn-tag{position:relative;margin-bottom:16px}
.scn-text{position:relative;font-size:clamp(19px,2.6vw,27px);font-weight:500;line-height:1.42;
letter-spacing:-0.015em;color:var(--text);text-wrap:pretty;max-width:60ch}
/* Time / Money two-up -------------------------------------- */
.tm{padding:30px 0 96px}
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tm-card{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);padding:32px}
.tm-card .tm-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow);margin-bottom:18px}
.tm-card .tm-ico svg{width:23px;height:23px}
.tm-card h3{font-size:21px;font-weight:600;letter-spacing:-0.01em}
.tm-card p{margin-top:12px;color:var(--text-2);font-size:15.5px;line-height:1.55}
.tm-card ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:11px}
.tm-card li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text-2)}
.tm-card li svg{width:16px;height:16px;color:var(--yellow);flex:none;margin-top:3px}
@media(max-width:900px){
.pain-grid{grid-template-columns:1fr 1fr}
.tm-grid{grid-template-columns:1fr}
.scn-card{padding:30px 26px}
}
@media(max-width:680px){
.pain-grid{grid-template-columns:1fr}
}
/* =========================================================
v5 additions — visual widgets (rings, charts, diagram)
========================================================= */
/* Donut rings ---------------------------------------------- */
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ring-item{text-align:center}
.ring{position:relative;width:150px;height:150px;margin:0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .track{stroke:rgba(255,255,255,0.08)}
.ring .prog{stroke:var(--yellow);stroke-linecap:round;stroke-dashoffset:327;transition:stroke-dashoffset 1.4s var(--ease)}
.ring-c{position:absolute;inset:0;display:grid;place-items:center}
.ring-v{font-size:32px;font-weight:700;letter-spacing:-0.02em}
.ring-item .rl{margin-top:16px;color:var(--text-2);font-size:14.5px;text-wrap:balance}
.ring-item .rs{display:block;color:var(--text-3);font-size:12.5px;margin-top:3px}
/* Before / after bar chart --------------------------------- */
.chart-card{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);padding:32px 34px}
.chart-legend{display:flex;gap:20px;margin-bottom:24px;font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
.chart-legend span{display:inline-flex;align-items:center;gap:8px}
.chart-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.lg-before{background:linear-gradient(90deg,rgba(244,63,94,0.55),rgba(244,63,94,0.32))}
.lg-after{background:linear-gradient(90deg,var(--yellow),var(--yellow-dark))}
.barchart{display:flex;flex-direction:column;gap:22px}
.bc-row .bc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.bc-row .bc-head .bn{font-size:13.5px;color:var(--text);font-weight:600}
.bc-row .bc-head .bc-cut{font-size:12.5px;color:var(--yellow);font-weight:700;font-family:var(--font-mono)}
.bc-bar{height:13px;border-radius:7px;background:rgba(255,255,255,0.05);overflow:hidden;margin-bottom:7px}
.bc-bar:last-child{margin-bottom:0}
.bar-fill{height:100%;border-radius:7px;width:0;transition:width 1.3s var(--ease)}
.b-before{background:linear-gradient(90deg,rgba(244,63,94,0.55),rgba(244,63,94,0.3))}
.b-after{background:linear-gradient(90deg,var(--yellow),var(--yellow-dark))}
/* Two-up: chart + rings ------------------------------------ */
.viz-2{display:grid;grid-template-columns:1.15fr 0.85fr;gap:20px;align-items:stretch}
.viz-2 .chart-card,.viz-2 .ring-card{display:flex;flex-direction:column;justify-content:center}
.ring-card{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);padding:32px 28px}
.ring-card .rings{grid-template-columns:1fr 1fr;gap:18px}
.ring-card .ring{width:118px;height:118px}
.ring-card .ring-v{font-size:25px}
/* Hub & spoke architecture diagram ------------------------- */
.diagram-sec{padding:96px 0}
.diagram{position:relative;width:min(620px,92vw);aspect-ratio:1/1;margin:0 auto}
.diagram .lines{position:absolute;inset:0;width:100%;height:100%}
.diagram .lines line{stroke:rgba(255,215,0,0.22);stroke-width:0.5;stroke-dasharray:2 2}
.diagram .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23%;aspect-ratio:1/1;
display:grid;place-items:center;border-radius:50%;background:rgba(16,16,18,0.92);border:1px solid var(--yellow-ring);
box-shadow:0 0 0 8px rgba(255,215,0,0.05),0 0 50px rgba(255,215,0,0.18);z-index:2}
.diagram .hub img{width:64%;height:auto;aspect-ratio:1/1;object-fit:contain;align-self:center;justify-self:center;border-radius:50%}
.diagram .node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;z-index:2}
.diagram .node .nd-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
background:rgba(16,16,18,0.92);border:1px solid var(--stroke-2);color:var(--yellow);
box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.diagram .node .nd-ic svg{width:24px;height:24px}
.diagram .node .nd-l{font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
.diagram .hub{animation:hub-pulse 3.4s ease-in-out infinite}
}
@keyframes hub-pulse{0%,100%{box-shadow:0 0 0 8px rgba(255,215,0,0.05),0 0 50px rgba(255,215,0,0.15)}50%{box-shadow:0 0 0 12px rgba(255,215,0,0.08),0 0 70px rgba(255,215,0,0.28)}}
/* Mini stat tiles with sparkline --------------------------- */
.spark-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.spark{border:1px solid var(--stroke);border-radius:var(--radius);background:var(--glass);padding:22px}
.spark .sv{font-size:30px;font-weight:700;letter-spacing:-0.03em}
.spark .sv .u{color:var(--yellow)}
.spark .sl{color:var(--text-2);font-size:13.5px;margin-top:4px}
.spark svg{margin-top:14px;width:100%;height:42px;overflow:visible}
.spark svg path.area{fill:url(#sparkfill)}
.spark svg path.line{fill:none;stroke:var(--yellow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
.rings{grid-template-columns:1fr 1fr}
.viz-2{grid-template-columns:1fr}
.spark-row{grid-template-columns:1fr}
.ring-card .rings{grid-template-columns:1fr 1fr}
.diagram .node .nd-l{font-size:11px}
}
@media(max-width:680px){
.rings{grid-template-columns:1fr}
.chart-card{padding:24px}
.diagram .node .nd-ic{width:44px;height:44px}
.diagram .node .nd-ic svg{width:19px;height:19px}
}
/* =========================================================
Contact / Free-trial modal (data-open-contact triggers)
========================================================= */
.cm-overlay{
position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
padding:24px;background:rgba(5,5,6,0.72);backdrop-filter:blur(6px);
opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
.cm-overlay.open{opacity:1;visibility:visible}
.cm-dialog{
position:relative;width:100%;max-width:520px;max-height:calc(100vh - 48px);overflow:auto;
background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--radius-lg);
padding:34px 32px 28px;box-shadow:0 30px 80px rgba(0,0,0,0.55);
transform:translateY(14px) scale(0.97);opacity:0;
transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.cm-overlay.open .cm-dialog{transform:translateY(0) scale(1);opacity:1}
.cm-close{
position:absolute;top:16px;right:16px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
border-radius:var(--radius-pill);border:1px solid var(--stroke);background:var(--glass);color:var(--text-2);
cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.cm-close:hover{background:rgba(255,255,255,0.09);color:var(--text)}
.cm-close svg{width:18px;height:18px}
.cm-badge{
display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;
letter-spacing:.04em;text-transform:uppercase;color:var(--yellow);
background:var(--yellow-soft);border:1px solid var(--yellow-ring);
padding:6px 12px;border-radius:var(--radius-pill);margin-bottom:16px}
.cm-dialog h3{font-size:23px;font-weight:700;letter-spacing:-0.01em;margin:0 0 8px}
.cm-sub{color:var(--text-2);font-size:14.5px;line-height:1.5;margin:0 0 22px}
.cm-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cm-field{display:flex;flex-direction:column;gap:6px}
.cm-field.full{grid-column:1 / -1}
.cm-field label{font-size:12.5px;color:var(--text-3);font-weight:500}
.cm-field label .req{color:var(--yellow)}
.cm-field input,.cm-field textarea{
width:100%;font-family:var(--font-sans);font-size:14.5px;color:var(--text);
background:var(--glass);border:1px solid var(--stroke-2);border-radius:12px;
padding:11px 13px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.cm-field textarea{resize:vertical;min-height:84px}
.cm-field input::placeholder,.cm-field textarea::placeholder{color:rgba(244,244,245,0.30)}
.cm-field input:focus,.cm-field textarea:focus{outline:none;border-color:var(--yellow-ring);background:var(--glass-2)}
.cm-field.invalid input,.cm-field.invalid textarea{border-color:#ff6b6b}
.cm-form .btn{grid-column:1 / -1;width:100%;margin-top:4px}
.cm-form .btn[disabled]{opacity:.7;cursor:not-allowed}
.cm-spinner{width:16px;height:16px;border:2px solid rgba(26,26,26,0.35);border-top-color:#1a1a1a;
border-radius:50%;animation:cm-spin .7s linear infinite}
@keyframes cm-spin{to{transform:rotate(360deg)}}
.cm-error{grid-column:1 / -1;display:none;color:#ff8585;font-size:13px;line-height:1.45;
background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.25);border-radius:10px;padding:10px 12px}
.cm-error.show{display:block}
.cm-trust{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.cm-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3)}
.cm-trust svg{width:14px;height:14px;color:var(--yellow)}
.cm-success{display:none;text-align:center;padding:18px 4px 8px}
.cm-success.show{display:block}
.cm-success .cm-check{width:64px;height:64px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--yellow-soft);border:1px solid var(--yellow-ring)}
.cm-success .cm-check svg{width:30px;height:30px;color:var(--yellow)}
.cm-success h3{margin-bottom:8px}
.cm-success p{color:var(--text-2);font-size:14.5px;line-height:1.5;margin:0 auto 22px;max-width:360px}
@media (max-width:560px){
.cm-dialog{padding:28px 20px 22px}
.cm-form{grid-template-columns:1fr}
}
/* =========================================================
Enhanced motion layer (home page + global polish)
All effects degrade gracefully under prefers-reduced-motion.
========================================================= */
/* Scroll progress bar pinned to the very top */
.scroll-prog{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:1200;
background:linear-gradient(90deg,var(--yellow-dark),var(--yellow));
box-shadow:0 0 14px var(--yellow-ring);transition:width .08s linear}
/* Primary buttons: light sheen sweeps across on hover */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;left:-130%;width:55%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-18deg);pointer-events:none;z-index:-1}
.btn-primary:hover::after{animation:btn-shine .8s var(--ease)}
@keyframes btn-shine{from{left:-130%}to{left:160%}}
/* Accent words gently shimmer */
.accent{background:linear-gradient(100deg,var(--yellow) 35%,#fff3b0 50%,var(--yellow) 65%);
background-size:220% auto;-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:accent-shine 5.5s linear infinite}
@keyframes accent-shine{to{background-position:-220% center}}
/* Hero: soft glow that follows the cursor */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.cursor-glow{position:absolute;left:0;top:0;width:560px;height:560px;border-radius:50%;
transform:translate(calc(var(--gx,50%) - 50%),calc(var(--gy,38%) - 50%));
background:radial-gradient(circle,rgba(255,215,0,0.12),transparent 60%);
pointer-events:none;z-index:0;opacity:0;transition:opacity .45s var(--ease);
mix-blend-mode:screen;will-change:transform}
.hero:hover .cursor-glow{opacity:1}
/* Eyebrow status dot ripples */
.eyebrow .dot{animation:dot-pulse 2.6s ease-out infinite}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 var(--yellow-ring)}70%{box-shadow:0 0 0 8px rgba(255,215,0,0)}100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}}
/* Cards prepped for JS-driven 3D tilt */
.dept-card,.bento-cell,.ind-card,.chart-card{transform-style:preserve-3d}
@media(prefers-reduced-motion:reduce){
.scroll-prog,.cursor-glow{display:none!important}
.accent{animation:none;background:none;-webkit-text-fill-color:var(--yellow);color:var(--yellow)}
.eyebrow .dot{animation:none}
.btn-primary::after{display:none}
}
/* =========================================================
Interactive product console (clickable departments)
========================================================= */
.console-side .si{cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.console-side .si:hover{background:var(--glass-2);color:var(--text)}
.console-side .si:hover svg{color:var(--text-2)}
.console-side .si.on,.console-side .si.on:hover{background:var(--yellow-soft);color:var(--text)}
.console-side .si.on svg,.console-side .si.on:hover svg{color:var(--yellow)}
.console-side .si:focus-visible{outline:2px solid var(--yellow-ring);outline-offset:2px}
.console-main{transition:opacity .18s var(--ease)}
.console-feed .feed-row{animation:feed-in .45s var(--ease) both}
@keyframes feed-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
.console-main{transition:none}
.console-feed .feed-row{animation:none}
}
/* #4 — live simulation: streamed-row accent + stat tick flash */
.console-feed .feed-row.fresh::after{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--yellow);
animation:fresh-fade 2.4s var(--ease) forwards}
.console-feed .feed-row.fresh{position:relative}
@keyframes fresh-fade{0%{opacity:1}100%{opacity:0}}
.cstat .val.tick{animation:stat-tick .6s var(--ease)}
@keyframes stat-tick{0%{color:var(--yellow)}100%{color:var(--text)}}
@media(prefers-reduced-motion:reduce){
.console-feed .feed-row.fresh::after{animation:none;opacity:0}
.cstat .val.tick{animation:none}
}
/* =========================================================
AI staff configurator — interactive "build your staff"
========================================================= */
.builder{padding:64px 0 104px}
.builder-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:start}
/* Left: department picker */
.bld-pick{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);padding:20px}
.bld-pick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.bld-pick-head>span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600}
.bld-all{background:none;border:1px solid var(--stroke-2);color:var(--text-2);font-family:var(--font-sans);
font-weight:600;font-size:12px;padding:6px 13px;border-radius:var(--radius-pill);cursor:pointer;
transition:color .2s var(--ease),border-color .2s var(--ease)}
.bld-all:hover{color:var(--text);border-color:rgba(255,255,255,.22)}
.bld-depts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bld-dept{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--stroke);
border-radius:12px;background:var(--glass);cursor:pointer;text-align:left;font-family:var(--font-sans);
transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.bld-dept:hover{border-color:var(--stroke-2);background:var(--glass-2);transform:translateY(-2px)}
.bld-dept:focus-visible{outline:2px solid var(--yellow-ring);outline-offset:2px}
.bld-dept .di{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
background:rgba(255,255,255,.05);color:var(--text-3);flex:none;transition:.2s var(--ease)}
.bld-dept .di svg{width:16px;height:16px}
.bld-dept .dn{flex:1;font-size:14px;font-weight:600;color:var(--text-2);transition:color .2s var(--ease)}
.bld-dept .dx{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--stroke-2);display:grid;
place-items:center;color:transparent;flex:none;transition:.2s var(--ease)}
.bld-dept .dx svg{width:13px;height:13px}
.bld-dept.on{border-color:var(--yellow-ring);background:linear-gradient(180deg,rgba(255,215,0,.07),var(--glass))}
.bld-dept.on .di{background:var(--yellow-soft);color:var(--yellow)}
.bld-dept.on .dn{color:var(--text)}
.bld-dept.on .dx{background:var(--yellow);border-color:var(--yellow);color:#1a1a1a}
/* Right: live result panel */
.bld-result{position:relative;border:1px solid var(--stroke-2);border-radius:var(--radius-lg);
background:linear-gradient(180deg,var(--glass-2),var(--glass));padding:24px;overflow:hidden}
.bld-result .bglow{position:absolute;right:-60px;top:-70px;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle,var(--yellow-soft),transparent 70%);pointer-events:none}
.bld-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative}
.bstat{border:1px solid var(--stroke);border-radius:12px;padding:15px;background:rgba(0,0,0,.18)}
.bstat .bk{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.bstat .bv{font-size:clamp(26px,3.3vw,34px);font-weight:700;letter-spacing:-.03em;margin-top:8px;line-height:1}
.bstat .bv .u{color:var(--yellow);font-size:.62em;font-weight:600}
.bld-plan{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;
padding:16px 18px;border:1px solid var(--yellow-ring);border-radius:14px;
background:linear-gradient(180deg,rgba(255,215,0,.06),transparent)}
.bp-tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:600}
.bp-name{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.bp-price{font-size:30px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.bp-price small{font-size:14px;color:var(--text-3);font-weight:500}
.bld-feed{margin-top:14px;border:1px solid var(--stroke);border-radius:12px;background:var(--glass);
overflow:hidden;min-height:62px}
.bld-feed .bf-h{padding:11px 15px;border-bottom:1px solid var(--stroke);font-size:12px;font-weight:600;
color:var(--text-2);display:flex;align-items:center;gap:8px}
.bld-feed .bf-h svg{width:14px;height:14px;color:var(--yellow)}
.bf-row{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--stroke);
font-size:12.5px;animation:bf-in .45s var(--ease) both}
.bf-row:last-child{border:none}
.bf-row .bi{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
background:var(--yellow-soft);color:var(--yellow);flex:none}
.bf-row .bi svg{width:13px;height:13px}
.bf-row .bt{flex:1;color:var(--text-2)}
.bf-row .bt b{color:var(--text);font-weight:600}
.bf-row .btime{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);white-space:nowrap}
.bld-empty{padding:18px 15px;font-size:13px;color:var(--text-3);text-align:center}
.bld-cta{width:100%;margin-top:16px}
@keyframes bf-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:880px){.builder-grid{grid-template-columns:1fr}}
@media(max-width:520px){.bld-depts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bf-row{animation:none}}
/* =========================================================
Our Approach page
========================================================= */
/* Trusted-by — text logos in the marquee */
.appr-logos span{font-size:16px;font-weight:600;letter-spacing:-0.01em;color:var(--text-3);
white-space:nowrap;transition:color .2s}
.appr-logos span:hover{color:var(--text-2)}
/* Six core reasons — minimal big-number cards */
.appr-reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.appr-reason-grid .bento-cell{display:flex;flex-direction:column;min-height:175px;padding:24px 26px}
.appr-reason-grid .bico{margin-bottom:auto}
.appr-reason-grid .rn{font-size:clamp(38px,5vw,52px);font-weight:700;letter-spacing:-0.04em;
line-height:1;margin-top:18px}
.appr-reason-grid .rn .u{color:var(--yellow)}
.appr-reason-grid h3{font-size:15.5px;font-weight:600;letter-spacing:-0.01em;margin-top:8px;color:var(--text-2)}
/* ---- Interactive SOP stepper ---- */
.appr-sop{padding:104px 0}
.sop{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--stroke-2);
border-radius:var(--radius-lg);background:var(--glass);overflow:hidden}
.sop-rail{position:relative;padding:26px 20px;border-right:1px solid var(--stroke);
background:rgba(0,0,0,0.2)}
.sop-rail-line{position:absolute;left:39px;top:46px;bottom:46px;width:2px;background:var(--stroke-2);border-radius:2px}
.sop-rail-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--yellow);border-radius:2px;
box-shadow:0 0 12px rgba(255,215,0,0.5);transition:height .35s var(--ease)}
.sop-steps{position:relative;display:flex;flex-direction:column;gap:4px;z-index:1}
.sop-step{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:13px;
align-items:center;text-align:left;background:none;border:none;cursor:pointer;
padding:9px 10px;border-radius:12px;transition:background .2s}
.sop-step:hover{background:var(--glass-2)}
.sop-step .sop-node{grid-row:1 / span 2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:var(--bg-2);border:1px solid var(--stroke-2);color:var(--text-3);transition:all .25s var(--ease)}
.sop-step .sop-node svg{width:17px;height:17px}
.sop-step .sop-step-when{font-family:var(--font-mono);font-size:11px;color:var(--text-3);transition:color .2s}
.sop-step .sop-step-name{font-size:14px;font-weight:600;color:var(--text-2);transition:color .2s;line-height:1.2}
.sop-step.done .sop-node{border-color:var(--yellow-ring);color:var(--yellow);background:var(--yellow-soft)}
.sop-step.on .sop-node{border-color:var(--yellow);color:#1a1a1a;background:var(--yellow);
box-shadow:0 0 0 5px var(--yellow-soft),0 0 24px rgba(255,215,0,0.35)}
.sop-step.on .sop-step-name{color:var(--text)}
.sop-step.on .sop-step-when{color:var(--yellow)}
.sop-panel{position:relative;padding:40px 40px;display:flex;align-items:center;min-height:300px}
.sop-panel-in{opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sop-panel.swap .sop-panel-in{opacity:0;transform:translateY(8px)}
.sop-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--yellow);font-weight:600;margin-bottom:14px}
.sop-panel h3{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-0.03em;display:flex;
align-items:baseline;gap:14px;flex-wrap:wrap}
.sop-panel .sop-when{font-family:var(--font-mono);font-size:13px;color:var(--text-3);font-weight:500;letter-spacing:0}
.sop-panel p{margin-top:14px;color:var(--text-2);font-size:16px;max-width:52ch;line-height:1.6}
.sop-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.sop-points li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--text)}
.sop-points li svg{width:18px;height:18px;color:var(--yellow);flex:none;
background:var(--yellow-soft);border-radius:50%;padding:3px;box-sizing:content-box}
/* ---- Comparison switcher ---- */
.appr-compare-sec{padding:40px 0 96px}
.appr-compare{max-width:1000px;margin:0 auto}
.cmp-toggle{display:none;gap:8px;justify-content:center;margin-bottom:24px}
.cmp-toggle button{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-2);
background:var(--glass);border:1px solid var(--stroke-2);border-radius:var(--radius-pill);
padding:9px 16px;cursor:pointer;transition:all .2s}
.cmp-toggle button.on{background:var(--yellow);color:#1a1a1a;border-color:var(--yellow)}
.cmp-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;
border:1px solid var(--stroke);border-radius:var(--radius-lg);overflow:hidden;background:var(--glass)}
.cmp-cell{padding:16px 18px;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--stroke);
display:flex;align-items:center;gap:9px;transition:opacity .25s,background .25s}
.cmp-cell svg{width:15px;height:15px;flex:none}
.cmp-grid > .cmp-cell:nth-last-child(-n+4){border-bottom:none}
.cmp-dim{font-weight:600;color:var(--text);background:rgba(0,0,0,0.18)}
.cmp-dim svg{color:var(--text-3)}
.cmp-h{font-size:15px;font-weight:700;color:var(--text);flex-direction:column;align-items:flex-start;gap:4px;
padding-top:20px;padding-bottom:20px;background:rgba(0,0,0,0.18)}
.cmp-corner{background:rgba(0,0,0,0.18)}
.cmp-badge{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
background:var(--yellow);color:#1a1a1a;font-weight:700;padding:3px 8px;border-radius:6px}
/* OneStaff column emphasis */
.cmp-os{background:linear-gradient(180deg,rgba(255,215,0,0.07),rgba(255,215,0,0.02));
color:var(--text);font-weight:500;box-shadow:inset 1px 0 0 var(--yellow-ring),inset -1px 0 0 var(--yellow-ring)}
.cmp-os svg{color:var(--yellow)}
.cmp-h.cmp-os{background:linear-gradient(180deg,rgba(255,215,0,0.14),rgba(255,215,0,0.04))}
.appr-compare[data-compare="inhouse"] .col-generic{opacity:.32}
.appr-compare[data-compare="generic"] .col-inhouse{opacity:.32}
/* status icon chips inside cells */
.cmp-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none}
.cmp-ic svg{width:12px;height:12px}
.ic-yes{background:rgba(255,215,0,0.16);color:var(--yellow)}
.cmp-os .ic-yes svg{color:var(--yellow)}
.ic-no{background:rgba(244,63,94,0.14);color:#f87186}
.ic-no svg{color:#f87186}
.ic-mid{background:rgba(255,255,255,0.07);color:var(--text-3)}
.ic-mid svg{color:var(--text-3)}
/* ---- Growth chart ---- */
.appr-growth-tag{color:var(--yellow);font-weight:700;font-family:var(--font-mono)}
.appr-chart{position:relative}
.appr-chart svg{width:100%;height:auto;display:block}
.appr-chart .gaxis{stroke:var(--stroke-2);stroke-width:1}
.appr-chart .garea{fill:url(#gfill);opacity:0;transition:opacity .8s ease .3s}
.appr-chart .gline{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.6s var(--ease)}
.appr-chart .gdot{fill:var(--yellow);opacity:0;transition:opacity .3s ease 1.4s;
filter:drop-shadow(0 0 6px rgba(255,215,0,0.7))}
.appr-growth.drawn .garea{opacity:1}
.appr-growth.drawn .gline{stroke-dashoffset:0}
.appr-growth.drawn .gdot{opacity:1}
.appr-chart-x{display:flex;justify-content:space-between;margin-top:10px;padding:0 22px 0 28px;
font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
/* ---- How we operate: principle chips + security ---- */
.appr-operate{padding:80px 0}
.appr-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:860px;margin:0 auto 44px}
.appr-chip{display:inline-flex;align-items:center;gap:11px;padding:11px 18px 11px 11px;
border:1px solid var(--stroke);border-radius:var(--radius-pill);background:var(--glass);
font-size:14.5px;font-weight:600;color:var(--text);transition:border-color .2s,background .2s,transform .2s}
.appr-chip:hover{border-color:var(--yellow-ring);background:var(--glass-2);transform:translateY(-2px)}
.appr-chip .ci{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow)}
.appr-chip .ci svg{width:15px;height:15px}
.appr-sec-grid{display:grid;grid-template-columns:1fr 1fr 0.9fr;gap:16px;align-items:stretch}
.sec-col{border:1px solid var(--stroke);border-radius:var(--radius);background:rgba(0,0,0,0.18);padding:24px}
.sec-col-h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;margin-bottom:16px}
.sec-col-h svg{width:17px;height:17px}
.sec-col.always .sec-col-h{color:#34d399}
.sec-col.never .sec-col-h{color:#f87186}
.sec-col ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.sec-col li{font-size:14px;color:var(--text-2);line-height:1.45;padding-left:18px;position:relative}
.sec-col li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%}
.sec-col.always li::before{background:#34d399}
.sec-col.never li::before{background:#f87186}
.sec-badges{display:flex;flex-direction:column;gap:12px;justify-content:center}
.sec-badges .tb{display:flex;align-items:center;gap:13px;border:1px solid var(--stroke);border-radius:var(--radius);
background:var(--glass);padding:16px 18px}
.sec-badges .tb .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow)}
.sec-badges .tb .ico svg{width:19px;height:19px}
.sec-badges .tb .t{font-size:15px;font-weight:700;color:var(--text)}
.sec-badges .tb .s{font-size:12.5px;color:var(--text-3);margin-top:2px}
.sec-badges .tb.sla-band .ico{background:rgba(52,211,153,0.12);border-color:rgba(52,211,153,0.3);color:#34d399}
/* ---- ROI math ---- */
.appr-roi{padding:104px 0}
.roi-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch}
.roi-card{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);padding:30px}
.roi-card.os.pop{border-color:var(--yellow-ring);
background:linear-gradient(180deg,rgba(255,215,0,0.06),var(--glass))}
.roi-tag{font-size:13px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}
.roi-total{font-size:clamp(34px,4.4vw,46px);font-weight:700;letter-spacing:-0.04em;margin:10px 0 22px;line-height:1}
.roi-total span{font-size:16px;color:var(--text-3);font-weight:500;letter-spacing:0}
.roi-card.os .roi-total{color:var(--yellow)}
.roi-lines{display:flex;flex-direction:column;gap:16px}
.roi-line{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;font-size:13.5px;color:var(--text-2)}
.roi-line b{font-weight:700;color:var(--text);font-family:var(--font-mono);font-size:13px}
.roi-line .rl-bar{grid-column:1 / -1;height:6px;border-radius:4px;background:rgba(255,255,255,0.06);position:relative;overflow:hidden}
.roi-line .rl-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);
background:linear-gradient(90deg,rgba(244,63,94,0.6),rgba(244,63,94,0.35));border-radius:4px}
.roi-foot{margin-top:22px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3)}
.roi-foot svg{width:15px;height:15px;color:var(--text-3)}
.roi-feat{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:22px}
.roi-feat li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--text)}
.roi-feat li svg{width:17px;height:17px;color:var(--yellow);flex:none}
.roi-savings{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
padding:0 8px;min-width:170px}
.roi-arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow)}
.roi-arrow svg{width:20px;height:20px}
.roi-save-num{font-size:clamp(40px,5.5vw,60px);font-weight:700;letter-spacing:-0.04em;line-height:1;color:var(--yellow)}
.roi-save-num::before{content:"$";font-size:.55em;vertical-align:super;color:var(--text-2);margin-right:1px}
.roi-save-lbl{font-size:14px;color:var(--text);font-weight:600;margin-top:8px}
.roi-save-sub{font-size:12.5px;color:var(--text-3);margin-top:6px;font-family:var(--font-mono)}
.roi-note{text-align:center;color:var(--text-3);font-size:12.5px;margin-top:22px;font-style:italic}
/* ---- Testimonials ---- */
.appr-quotes{padding:40px 0 96px}
.quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{position:relative;border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);
padding:30px 28px;display:flex;flex-direction:column;transition:border-color .25s,background .25s}
.quote:hover{border-color:var(--stroke-2);background:var(--glass-2)}
.quote .q-mark{font-size:60px;line-height:.6;color:var(--yellow);font-family:Georgia,serif;height:30px;opacity:.85}
.quote blockquote{font-size:16px;line-height:1.55;color:var(--text);letter-spacing:-0.01em;margin:8px 0 24px;flex:1}
.quote figcaption{display:flex;align-items:center;gap:12px}
.quote .qa{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow);
font-size:14px;font-weight:700}
.quote .qn{font-size:14px;font-weight:600;color:var(--text)}
.quote .qr{font-size:12.5px;color:var(--text-3);margin-top:2px}
/* ---- Responsive ---- */
@media(max-width:900px){
.appr-reason-grid{grid-template-columns:repeat(2,1fr)}
.sop{grid-template-columns:1fr}
.sop-rail{border-right:none;border-bottom:1px solid var(--stroke)}
.sop-rail-line{display:none}
.sop-steps{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}
.sop-step{grid-template-columns:auto;grid-template-rows:auto auto auto;justify-items:center;
text-align:center;min-width:120px;flex:none}
.sop-step .sop-node{grid-row:auto}
.sop-panel{padding:30px 26px;min-height:auto}
.appr-sec-grid{grid-template-columns:1fr 1fr}
.sec-badges{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
.sec-badges .tb{flex:1;min-width:160px}
.quotes-grid{grid-template-columns:1fr}
.roi-grid{grid-template-columns:1fr;gap:16px}
.roi-savings{flex-direction:row;gap:16px;justify-content:center;padding:8px 0}
.roi-arrow{margin-bottom:0;transform:rotate(90deg)}
}
@media(max-width:680px){
.appr-reason-grid{grid-template-columns:1fr}
.cmp-toggle{display:flex}
.cmp-grid{grid-template-columns:1.2fr 1fr 1fr}
.appr-compare[data-compare="inhouse"] .col-generic,
.appr-compare[data-compare="generic"] .col-inhouse{display:none}
.cmp-cell{padding:13px 12px;font-size:13px}
.appr-sec-grid{grid-template-columns:1fr}
.sec-badges{flex-direction:column}
}
/* =========================================================
Our Approach — trust modules
========================================================= */
/* ---- Human-in-the-loop interactive diagram ---- */
.appr-hitl{padding:80px 0}
.hitl-card{border:1px solid var(--stroke-2);border-radius:var(--radius-lg);background:var(--glass);
padding:38px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center}
.hitl-left .hitl-kick{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--yellow);font-weight:600}
.hitl-left h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-0.025em;margin:12px 0 10px;line-height:1.1}
.hitl-left p{color:var(--text-2);font-size:15px;max-width:42ch}
.hitl-meter{margin-top:26px}
.hitl-meter-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.hitl-meter-head .hm-k{font-size:13px;color:var(--text-3);font-weight:600}
.hitl-meter-head .hm-v{font-size:30px;font-weight:700;letter-spacing:-0.03em}
.hitl-track{position:relative;height:14px;border-radius:8px;background:rgba(255,255,255,0.06);overflow:visible}
.hitl-fill{position:absolute;left:0;top:0;height:100%;border-radius:8px;
background:linear-gradient(90deg,var(--yellow-dark),var(--yellow));transition:width .08s linear,background .2s}
.hitl-thresh{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--text);left:85%;border-radius:2px}
.hitl-thresh::after{content:"Your threshold · 85%";position:absolute;top:-22px;left:50%;transform:translateX(-50%);
white-space:nowrap;font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}
.hitl-range{-webkit-appearance:none;appearance:none;position:absolute;left:-2px;right:-2px;top:50%;transform:translateY(-50%);
width:calc(100% + 4px);height:34px;background:transparent;margin:0;cursor:grab;z-index:2}
.hitl-range:active{cursor:grabbing}
.hitl-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
background:#fff;border:3px solid var(--yellow);box-shadow:0 2px 10px rgba(0,0,0,0.5);cursor:grab}
.hitl-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--yellow);
box-shadow:0 2px 10px rgba(0,0,0,0.5);cursor:grab}
.hitl-hint{margin-top:14px;font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:8px}
.hitl-hint svg{width:14px;height:14px;color:var(--yellow)}
.hitl-paths{display:flex;flex-direction:column;gap:14px}
.hitl-path{position:relative;border:1px solid var(--stroke);border-radius:var(--radius);background:rgba(0,0,0,0.18);
padding:20px 22px;display:flex;align-items:center;gap:16px;opacity:.4;transition:opacity .25s,border-color .25s,background .25s,transform .25s}
.hitl-path.active{opacity:1;transform:translateY(-2px)}
.hitl-path.auto.active{border-color:var(--yellow-ring);background:linear-gradient(180deg,rgba(255,215,0,0.07),rgba(0,0,0,0.18))}
.hitl-path.human.active{border-color:rgba(52,211,153,0.4);background:linear-gradient(180deg,rgba(52,211,153,0.08),rgba(0,0,0,0.18))}
.hitl-path .hp-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.hitl-path.auto .hp-ic{background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow)}
.hitl-path.human .hp-ic{background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.3);color:#34d399}
.hitl-path .hp-ic svg{width:22px;height:22px}
.hitl-path .hp-t{font-size:15.5px;font-weight:700;color:var(--text)}
.hitl-path .hp-s{font-size:13px;color:var(--text-2);margin-top:3px}
.hitl-path .hp-flag{position:absolute;top:14px;right:16px;font-family:var(--font-mono);font-size:10.5px;
text-transform:uppercase;letter-spacing:.08em;font-weight:700;opacity:0;transition:opacity .25s}
.hitl-path.active .hp-flag{opacity:1}
.hitl-path.auto .hp-flag{color:var(--yellow)}
.hitl-path.human .hp-flag{color:#34d399}
/* ---- Risk-reversal guarantee band ---- */
.appr-guarantee{padding:40px 0}
.guarantee-card{position:relative;overflow:hidden;border:1px solid var(--yellow-ring);border-radius:var(--radius-lg);
background:linear-gradient(180deg,rgba(255,215,0,0.09),var(--glass));padding:52px 40px;text-align:center}
.guarantee-card .gglow{position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:600px;height:360px;
background:radial-gradient(ellipse at center,rgba(255,215,0,0.22),transparent 65%);filter:blur(20px);pointer-events:none}
.guarantee-card .gi{position:relative;width:62px;height:62px;border-radius:16px;display:grid;place-items:center;margin:0 auto 22px;
background:var(--yellow);color:#1a1a1a;box-shadow:0 0 44px rgba(255,215,0,0.45)}
.guarantee-card .gi svg{width:30px;height:30px}
.guarantee-card h2{position:relative;font-size:clamp(28px,4.2vw,46px);font-weight:700;letter-spacing:-0.03em;line-height:1.04;text-wrap:balance}
.guarantee-card > p{position:relative;margin:16px auto 0;max-width:48ch;color:var(--text-2);font-size:16.5px}
.guarantee-chips{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.guarantee-chips span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text);
background:var(--glass-2);border:1px solid var(--stroke-2);border-radius:var(--radius-pill);padding:10px 17px}
.guarantee-chips svg{width:15px;height:15px;color:var(--yellow)}
.guarantee-note{position:relative;margin-top:22px;font-size:12px;color:var(--text-3);font-style:italic}
/* ---- Trust Center: compliance badge wall ---- */
.appr-trust-center{padding:40px 0 80px}
.tc-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tc-badge{border:1px solid var(--stroke);border-radius:var(--radius);background:var(--glass);padding:24px 16px;
text-align:center;transition:border-color .25s,background .25s,transform .25s}
.tc-badge:hover{border-color:var(--yellow-ring);background:var(--glass-2);transform:translateY(-3px)}
.tc-badge .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin:0 auto 14px;
background:var(--yellow-soft);border:1px solid var(--yellow-ring);color:var(--yellow)}
.tc-badge .ico svg{width:23px;height:23px}
.tc-badge .t{font-size:14.5px;font-weight:700;color:var(--text)}
.tc-badge .s{font-size:11.5px;color:var(--text-3);margin-top:3px}
.tc-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
/* ---- Featured case study ---- */
.appr-case{padding:40px 0}
.case-card{border:1px solid var(--stroke-2);border-radius:var(--radius-lg);overflow:hidden;background:var(--glass);
display:grid;grid-template-columns:1.15fr 0.85fr}
.case-body{padding:42px}
.case-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);font-weight:600}
.case-logo{font-size:21px;font-weight:700;letter-spacing:-0.02em;margin:16px 0 4px}
.case-logo small{display:block;font-size:12.5px;color:var(--text-3);font-weight:500;letter-spacing:0;margin-top:3px}
.case-quote{font-size:clamp(18px,2.2vw,24px);font-weight:600;letter-spacing:-0.02em;line-height:1.4;color:var(--text);
margin:22px 0;text-wrap:pretty}
.case-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--yellow)}
.case-link svg{width:16px;height:16px;transition:transform .2s}
.case-link:hover svg{transform:translateX(3px)}
.case-side{background:linear-gradient(180deg,rgba(255,215,0,0.07),rgba(0,0,0,0.22));border-left:1px solid var(--stroke);
padding:42px 38px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.case-metric .cm-v{font-size:clamp(32px,4vw,44px);font-weight:700;letter-spacing:-0.04em;line-height:1;color:var(--yellow)}
.case-metric .cm-l{font-size:13.5px;color:var(--text-2);margin-top:7px}
.case-note{text-align:center;color:var(--text-3);font-size:12px;margin-top:18px;font-style:italic}
/* ---- Third-party ratings strip ---- */
.appr-ratings{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.rating{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--stroke);border-radius:var(--radius-pill);
background:var(--glass);padding:11px 20px}
.rating .src{font-size:14px;font-weight:700;color:var(--text)}
.rating .stars{color:var(--yellow);letter-spacing:1px;font-size:14px}
.rating .rv{font-size:13px;color:var(--text-2);font-weight:600}
.rating .rc{font-size:12px;color:var(--text-3)}
/* ---- Trust module responsive ---- */
@media(max-width:900px){
.hitl-card{grid-template-columns:1fr;gap:30px}
.tc-wall{grid-template-columns:repeat(3,1fr)}
.case-card{grid-template-columns:1fr}
.case-side{border-left:none;border-top:1px solid var(--stroke);flex-direction:row;flex-wrap:wrap;justify-content:space-around;padding:30px}
.case-body{padding:32px}
}
@media(max-width:680px){
.tc-wall{grid-template-columns:repeat(2,1fr)}
.guarantee-card{padding:38px 24px}
.case-side{flex-direction:column;gap:20px;text-align:center}
}
/* ============================================================
Premium motion
#1 Staggered reveals + reveal variants
#2 Cursor-follow spotlight + subtle 3D tilt on cards
Additive; fully gated by prefers-reduced-motion + coarse pointer.
============================================================ */
/* #1 — add `filter` to the reveal transition + a per-element
stagger delay (the delay value is set on each element by JS). */
.reveal{
transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
transition-delay:var(--rd,0ms)}
/* Reveal style variants — opt in per element with data-reveal="…".
:not(.in) ensures every variant settles cleanly once revealed. */
.reveal[data-reveal="left"]:not(.in){transform:translateX(-28px)}
.reveal[data-reveal="right"]:not(.in){transform:translateX(28px)}
.reveal[data-reveal="scale"]:not(.in){transform:scale(.93)}
.reveal[data-reveal="blur"]:not(.in){transform:translateY(14px);filter:blur(16px)}
.reveal.in{filter:none}
/* #2 — interactive cards: cursor spotlight + tilt.
--mx/--my (spotlight) and --rx/--ry (tilt) are driven by JS;
--lift is driven by :hover. Defaults give the resting state. */
.dept-card,.bento-cell,.ind-card{
--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--lift:0px;
isolation:isolate;
transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
transition:border-color .25s var(--ease),background .25s var(--ease),
transform .18s var(--ease),box-shadow .3s var(--ease)}
.dept-card:hover,.bento-cell:hover,.ind-card:hover{
--lift:-4px;
transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
box-shadow:0 22px 54px -24px rgba(0,0,0,.62)}
/* Soft gold light that tracks the cursor across the card */
.dept-card::after,.bento-cell::after,.ind-card::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,215,0,.13),transparent 60%);
opacity:0;transition:opacity .35s var(--ease)}
.dept-card:hover::after,.bento-cell:hover::after,.ind-card:hover::after{opacity:1}
/* Touch / coarse pointers: no tilt, keep the original simple lift */
@media(hover:none),(pointer:coarse){
.dept-card,.bento-cell,.ind-card{transform:none}
.dept-card:hover,.bento-cell:hover,.ind-card:hover{transform:translateY(-3px)}
}
/* Reduced motion: disable tilt, variants and the spotlight */
@media(prefers-reduced-motion:reduce){
.reveal[data-reveal]:not(.in){transform:none!important;filter:none!important}
.dept-card,.bento-cell,.ind-card{transform:none!important}
.dept-card:hover,.bento-cell:hover,.ind-card:hover{transform:translateY(-3px)!important}
.dept-card::after,.bento-cell::after,.ind-card::after{display:none}
}
/* ============================================================
LEGAL / TRUST PAGES (privacy, terms, security)
============================================================ */
.legal-updated{margin-top:14px;font-family:var(--font-mono);font-size:13px;color:var(--text-3)}
.legal-body{padding:30px 0 96px}
.legal-prose{max-width:760px}
.legal-prose h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-0.02em;margin:42px 0 12px;scroll-margin-top:100px}
.legal-prose h2:first-child{margin-top:0}
.legal-prose h3{font-size:17px;font-weight:600;margin:24px 0 8px;color:var(--text)}
.legal-prose p{color:var(--text-2);font-size:15.5px;line-height:1.7;margin:0 0 14px}
.legal-prose ul{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.legal-prose li{color:var(--text-2);font-size:15.5px;line-height:1.6}
.legal-prose a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.legal-prose strong{color:var(--text);font-weight:600}
.legal-prose .lead{font-size:17px;color:var(--text)}
.legal-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0 0 28px;border-bottom:1px solid var(--stroke)}
.legal-toc a{font-size:13px;color:var(--text-2);background:var(--glass);border:1px solid var(--stroke);
border-radius:var(--radius-pill);padding:6px 13px;text-decoration:none;transition:.2s var(--ease)}
.legal-toc a:hover{color:var(--text);border-color:var(--stroke-2)}
.legal-prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.legal-prose th,.legal-prose td{text-align:left;padding:10px 12px;border:1px solid var(--stroke);color:var(--text-2);vertical-align:top}
.legal-prose th{color:var(--text);font-weight:600;background:var(--glass)}
/* ============================================================
BLOG
============================================================ */
.blog-narrow{max-width:760px}
/* Index */
.blog-index{padding:20px 0 96px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.blog-card{position:relative;display:flex;flex-direction:column;gap:10px;
border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--glass);
padding:24px;text-decoration:none;color:inherit;overflow:hidden;
transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.blog-card:hover{border-color:var(--stroke-2);transform:translateY(-4px);box-shadow:0 22px 50px -28px rgba(0,0,0,.7)}
.blog-card.feat{grid-column:1/-1;background:var(--bg-2)}
.blog-card.feat h3{font-size:clamp(22px,2.6vw,30px)}
.bc-cat,.bp-cat{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--yellow);background:var(--yellow-soft);border:1px solid var(--yellow-ring);
border-radius:var(--radius-pill);padding:4px 11px}
.blog-card h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0}
.blog-card p{color:var(--text-2);font-size:14.5px;line-height:1.6;margin:0;flex:1}
.bc-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.bc-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--yellow);margin-top:2px}
.bc-more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.blog-card:hover .bc-more svg{transform:translateX(3px)}
/* Article */
.blog-hero{padding:130px 0 8px;text-align:center}
.blog-narrow{margin-left:auto;margin-right:auto}
.blog-bread{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
font-size:12.5px;color:var(--text-3);margin-bottom:18px}
.blog-bread a{color:var(--text-3)}.blog-bread a:hover{color:var(--text-2)}
.blog-bread .cur{color:var(--text-2)}
.blog-hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.08;
text-wrap:balance;margin:14px auto 0;max-width:18ch}
.bp-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px;
color:var(--text-3);font-size:13.5px;font-family:var(--font-mono)}
.bp-meta .bp-author{display:inline-flex;align-items:center;gap:9px;color:var(--text-2);font-weight:500}
.bp-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
background:linear-gradient(135deg,var(--yellow),var(--yellow-dark));color:#1a1a1a;font-size:10.5px;font-weight:700;font-family:var(--font-sans)}
.bp-avatar.lg{width:44px;height:44px;font-size:14px}
.bp-dot{color:var(--text-3)}
.blog-body{padding:34px 0 80px}
.blog-prose{font-size:16.5px}
.blog-prose h2{margin-top:48px}
.blog-prose > p:first-of-type{font-size:18px;color:var(--text)}
.blog-author{display:flex;align-items:flex-start;gap:14px;margin-top:48px;padding-top:26px;border-top:1px solid var(--stroke)}
.blog-author .ba-name{font-weight:600;font-size:15px}
.blog-author .ba-bio{color:var(--text-3);font-size:14px;margin-top:3px;line-height:1.55}
.more-blog{padding:8px 0 96px;border-top:1px solid var(--stroke);background:var(--bg-2)}
.more-blog .cap{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--text-3);text-align:center;margin:40px 0 24px}
@media(max-width:600px){.blog-hero{padding:120px 0 4px}.blog-grid{grid-template-columns:1fr}}
/* ============================================================
Premium motion #3 — hero headline word-reveal,
orbit parallax + breathing department chips.
============================================================ */
/* Word-by-word rise. The itself stays visible; only words move,
so the reveal can't clip the animated underline / descenders. */
.hero h1.reveal{opacity:1;transform:none}
.hero h1 .word{
display:inline-block;opacity:0;transform:translateY(.5em);
transition:opacity .6s var(--ease),transform .6s var(--ease);
transition-delay:var(--wd,0ms)}
.hero h1.in .word{opacity:1;transform:none}
/* Department icons breathe a soft gold (staggered delay set by JS) */
.orbit-chip .ico{animation:chip-breathe 3.6s ease-in-out infinite var(--cd,0s)}
@keyframes chip-breathe{
0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}
50%{box-shadow:0 0 14px 2px rgba(255,215,0,.30)}
}
@media(prefers-reduced-motion:reduce){
.hero h1 .word{opacity:1!important;transform:none!important;transition:none}
.orbit-chip .ico{animation:none!important}
.orbit-wrap{transform:none!important}
}
/* ============================================================
Premium motion #6 — cross-document View Transitions.
Same-origin page navigations cross-fade + lift instead of a
hard cut. Browsers without support simply navigate normally.
============================================================ */
@view-transition{navigation:auto}
/* Keep the fixed nav anchored across navigations so it doesn't
flash — it morphs in place instead of fading with the page body. */
.nav{view-transition-name:site-nav}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
::view-transition-old(root){animation:vt-out .24s var(--ease) both}
::view-transition-new(root){animation:vt-in .36s var(--ease) both}
@media(prefers-reduced-motion:reduce){
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){animation:none!important}
}