/* ============================================================
Intellania base styles
Generated from the brand guidelines (design.md).
This is the foundation: tokens, type, core components,
focus ring and reduced motion. Merge with your existing
styles.css, or replace your :root and base layer with this.
============================================================ */
/* Fonts. For best performance also add this to instead of the @import:
*/
/* Fonts load via the in index.html (faster than @import). */
:root{
/* surfaces */
--bg:#070F0E; /* tinted black */
--bg-soft:#0F0F0F;
--card:#16171A;
--card-2:#202126; /* inner tiles, chips */
--bg-cream:#EAEBEE; /* light sections */
--bg-light:#FFFFFF;
--line:rgba(255,255,255,.07);
--line-strong:rgba(255,255,255,.14);
/* text */
--text:#FFFFFF;
--muted:rgba(255,255,255,.60);
--muted-2:rgba(255,255,255,.52); /* secondary labels; AA-safe on dark surfaces */
--ink:#000000;
/* accent. green is fills, icon strokes and live dots only, never text */
--green:#74EC5E;
--teal:#2EC8C9; /* gradient start only */
--gradient:linear-gradient(120deg,#2EC8C9 0%,#74EC5E 100%); /* the signature */
--green-ink:#0B7A55; /* legible green for links on white (email, light bg) */
/* radii and layout */
--radius:16px;
--radius-sm:10px;
--radius-pill:100px;
--maxw:1180px;
/* type */
--font:"Cy Grotesk Key","Outfit",system-ui,-apple-system,sans-serif; /* Outfit is the free default */
--font-body:"Open Sans",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
margin:0; background:var(--bg); color:var(--text);
font-family:var(--font-body); font-size:16px; line-height:1.65;
-webkit-font-smoothing:antialiased;
}
/* headings. signature rule: section headings end in a full stop (content, not enforced here) */
h1,h2,h3,h4{ font-family:var(--font); font-weight:700; letter-spacing:-.02em; line-height:1.08; margin:0 0 .5em; }
h1{ font-size:clamp(40px,5.4vw,68px); letter-spacing:-.03em; line-height:1; }
h2{ font-size:clamp(30px,3.6vw,46px); }
h3{ font-size:clamp(22px,2.6vw,30px); }
p{ margin:0 0 1rem; max-width:66ch; } /* body measure */
a{ color:#fff; text-decoration:underline; text-decoration-color:rgba(116,236,94,.5); text-underline-offset:3px; }
/* layout */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:100px 0; }
@media (max-width:940px){ .section{ padding:70px 0; } }
/* gradient text. large display and numbers only, never body copy, never small text */
.grad-text{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* eyebrow and label */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font);
font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.eyebrow .chip{ color:var(--ink); background:var(--gradient); border-radius:7px; padding:3px 10px; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
.label{ font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
/* buttons. every CTA uses the gradient */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-weight:700;
font-size:15px; padding:14px 26px; border-radius:var(--radius-pill); border:1px solid transparent;
cursor:pointer; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.btn-cta{ background:var(--gradient); color:var(--ink); }
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(46,200,201,.28); }
.btn .arrow{ transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(3px); }
/* quiet secondary action (not a primary CTA) */
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
/* cards. signature hover: lift plus a gradient bar wiping the top */
.card{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line);
border-radius:var(--radius); padding:28px; transition:transform .25s, border-color .25s, box-shadow .25s; }
.card::after{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.card:hover{ transform:translateY(-6px); border-color:rgba(116,236,94,.3); box-shadow:0 24px 50px rgba(0,0,0,.45); }
.card:hover::after{ transform:scaleX(1); }
/* KPI tile */
.kpi{ background:var(--card-2); border-radius:var(--radius-sm); padding:14px; }
.kpi .k-label{ font-family:var(--font); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); }
.kpi .k-value{ font-family:var(--font); font-size:22px; font-weight:700; }
.kpi .k-delta{ font-size:11px; color:#fff; }
/* light sections */
.section--light{ background:var(--bg-cream); color:var(--ink); }
.section--light p{ color:rgba(10,10,10,.62); }
.section--light a{ color:var(--green-ink); }
.section--light .card{ background:#fff; border-color:rgba(10,10,10,.07); box-shadow:0 12px 30px rgba(10,10,10,.06); }
.section--light .card:hover{ box-shadow:0 22px 45px rgba(10,10,10,.10); }
/* line icons. green stroke on dark, single weight */
.icon{ width:24px; height:24px; stroke:var(--green); stroke-width:1.9; fill:none;
stroke-linecap:round; stroke-linejoin:round; }
/* accessibility: visible keyboard focus ring */
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:4px; }
/* motion */
@keyframes pulse{
0%{ box-shadow:0 0 0 0 rgba(116,236,94,.5); }
70%{ box-shadow:0 0 0 8px rgba(116,236,94,0); }
100%{ box-shadow:0 0 0 0 rgba(116,236,94,0); }
}
/* respect reduced motion: pause everything */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important;
}
.reveal{ opacity:1 !important; transform:none !important; }
}
/* ============================================================
Page layout, sections and components (built on the tokens)
============================================================ */
/* scroll reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; } .d4{ transition-delay:.32s; }
/* section heads and grids */
.section-head{ max-width:640px; margin:0 0 40px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .label{ display:block; margin-bottom:14px; }
.section-head h2{ margin:0 0 12px; }
.section-head p{ color:var(--muted); font-size:17px; }
.section--light .section-head p{ color:rgba(10,10,10,.62); }
.lead{ font-size:18px; color:var(--muted); }
.grid{ display:grid; gap:16px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:940px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }
/* nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; border-bottom:1px solid transparent; transition:background .3s, border-color .3s, backdrop-filter .3s; }
.nav.scrolled{ background:rgba(7,15,14,.5); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border-bottom-color:rgba(255,255,255,.06); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brandmark{ display:inline-flex; align-items:center; gap:9px; background:transparent; padding:8px 0; text-decoration:none; }
.brandmark .wm{ font-family:var(--font); font-weight:700; font-size:19px; color:#fff; letter-spacing:-.04em; }
.brand-img{ height:25px; width:auto; display:block; }
.footer .brand-img{ height:27px; }
.spark{ width:16px; height:16px; flex:none; }
.nav-links{ display:flex; gap:20px; }
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:14px; text-decoration:none; }
.nav-links a:hover{ color:#fff; }
/* mobile nav: hamburger + slide-down menu panel */
.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-8px; background:transparent; border:0; color:#fff; cursor:pointer; }
.nav-bars{ position:relative; display:block; width:22px; height:16px; }
.nav-bars i{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .3s var(--ease-out), opacity .2s var(--ease-out); }
.nav-bars i:nth-child(1){ top:0; } .nav-bars i:nth-child(2){ top:7px; } .nav-bars i:nth-child(3){ top:14px; }
.nav.open .nav-bars i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-bars i:nth-child(2){ opacity:0; }
.nav.open .nav-bars i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-menu{ display:none; }
@media(max-width:940px){
.nav-links{ display:none; }
.nav-cta{ display:none; }
.nav-toggle{ display:inline-flex; }
.nav.open{ background:rgba(7,15,14,.94); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); }
.nav-menu{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; padding:10px 28px 20px; gap:2px;
background:rgba(7,15,14,.94); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border-bottom:1px solid rgba(255,255,255,.08);
opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s; }
.nav.open .nav-menu{ opacity:1; visibility:visible; transform:none; }
.nav-menu a:not(.btn){ display:flex; align-items:center; min-height:52px; color:var(--muted); font-size:16px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06); }
.nav-menu a:not(.btn):hover{ color:#fff; }
.nav-menu .btn-cta{ margin-top:14px; justify-content:center; }
}
@media(prefers-reduced-motion:reduce){ .nav-bars i, .nav-menu{ transition:none; } }
/* hero */
.hero{ position:relative; overflow:hidden; padding:150px 0 96px; }
.hero-motif{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.5;
-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%); mask-image:linear-gradient(to bottom,#000 55%,transparent 96%); }
.hero-glow{ position:absolute; top:-12%; left:50%; transform:translateX(-50%); width:860px; height:440px; pointer-events:none; z-index:0;
background:radial-gradient(ellipse at center, rgba(46,200,201,.16), rgba(116,236,94,.07) 45%, transparent 70%); filter:blur(50px); }
.hero-in{ position:relative; z-index:2; max-width:860px; }
.kicker{ display:inline-block; font-family:var(--font); font-weight:700; font-size:clamp(15px,1.7vw,19px); letter-spacing:-.01em; margin:0 0 14px; }
.hero h1{ margin:0 0 22px; font-size:clamp(40px,5.6vw,76px); }
.hero .lead{ margin:0 0 30px; max-width:60ch; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
/* hero proof row: lead with the results, kept compact and tasteful */
.hero-stats{ display:flex; flex-wrap:wrap; gap:16px 42px; margin-top:42px; }
.hstat{ display:flex; flex-direction:column; }
.hstat .hn{ font-family:var(--font); font-weight:700; font-size:27px; line-height:1; font-variant-numeric:tabular-nums; }
.hstat .hl{ margin-top:5px; font-size:12px; color:var(--muted); }
@media(max-width:560px){ .hero-stats{ gap:18px 30px; } .hstat .hn{ font-size:23px; } }
/* ---- credibility band: trust chips + proven numbers + demo CTA ---- */
.stats-band{ position:relative; overflow:hidden; background:radial-gradient(125% 130% at 50% -10%, #102420 0%, #0A1513 38%, var(--bg) 70%); border-top:1px solid rgba(255,255,255,.07); }
.stats-band::after{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(760px,80%); height:1px; background:var(--gradient); opacity:.7; z-index:2; }
.stats-band .band-glow{ position:absolute; top:-16%; left:50%; transform:translateX(-50%); width:1120px; height:640px; pointer-events:none; z-index:0;
background:radial-gradient(ellipse at center, rgba(46,200,201,.26), rgba(116,236,94,.12) 44%, transparent 70%); filter:blur(72px); }
.stats-band::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
background-image:radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.5px); background-size:24px 24px;
-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 40%, #000, transparent 78%); mask-image:radial-gradient(ellipse 70% 65% at 50% 40%, #000, transparent 78%); }
.stats-band .wrap{ position:relative; z-index:1; }
/* ---- credibility band: trusted-by marquee + figures ---- */
.credibility{ position:relative; overflow:hidden; padding:74px 0 64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.credibility::before{ content:""; position:absolute; left:50%; bottom:-34%; transform:translateX(-50%); width:920px; height:400px; pointer-events:none; z-index:0;
background:radial-gradient(ellipse at center, rgba(46,200,201,.10), rgba(116,236,94,.05) 45%, transparent 70%); filter:blur(64px); }
.cred-contour{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55;
-webkit-mask-image:radial-gradient(ellipse 85% 78% at 50% 50%, #000, transparent 82%); mask-image:radial-gradient(ellipse 85% 78% at 50% 50%, #000, transparent 82%); }
.cred-contour path{ stroke:rgba(46,200,201,.10); stroke-width:1; }
.cred-contour path:nth-child(even){ stroke:rgba(116,236,94,.08); }
.credibility > .wrap, .credibility > .logo-marquee{ position:relative; z-index:1; }
.cred-head{ text-align:center; margin:0 auto 38px; }
.cred-head h2{ margin:0; font-size:clamp(24px,3vw,33px); }
.cred-head p{ margin:9px auto 0; font-size:14px; color:var(--muted-2); }
.logo-marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.lm-row2{ margin-top:22px; }
.lm-track{ display:flex; width:max-content; }
.lm-track.run{ animation:marquee 42s linear infinite; }
.lm-track.run.reverse{ animation-direction:reverse; animation-duration:52s; }
.logo-marquee:hover .lm-track.run{ animation-play-state:paused; }
.lm-set{ display:flex; align-items:center; gap:46px; padding-right:46px; }
.lm-item{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font); font-weight:600; font-size:15px; letter-spacing:-.01em; color:rgba(255,255,255,.58); white-space:nowrap; transition:color .25s var(--ease-out); }
.lm-item:hover{ color:rgba(255,255,255,.82); }
.lm-item svg{ width:18px; height:18px; fill:none; stroke:rgba(255,255,255,.42); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.cred-stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:46px; }
.cstat{ position:relative; text-align:center; padding:4px 18px; }
.cstat:not(:last-child)::after{ content:""; position:absolute; right:0; top:14%; height:72%; width:1px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.16), transparent); }
.cstat .cn{ position:relative; display:inline-block; font-family:var(--font); font-weight:700; font-size:clamp(30px,3.4vw,40px); line-height:1; font-variant-numeric:tabular-nums; padding-bottom:12px; }
.cstat .cn::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:26px; height:2px; border-radius:2px; background:var(--gradient); }
.cstat .cl{ display:block; margin-top:10px; font-size:12px; color:var(--muted); }
@media(prefers-reduced-motion: reduce){ .logo-marquee{ -webkit-mask-image:none; mask-image:none; } .lm-track{ width:auto; } .lm-set{ flex-wrap:wrap; justify-content:center; row-gap:18px; } }
@media(max-width:780px){ .cred-stats{ grid-template-columns:repeat(2,1fr); row-gap:30px; } .cstat:nth-child(2)::after{ display:none; } }
@media(max-width:460px){ .cred-stats{ grid-template-columns:1fr; } .cstat::after{ display:none; } }
.trust-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tchip{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:var(--radius-pill); background:var(--card); border:1px solid var(--line); font-family:var(--font); font-size:13px; color:rgba(255,255,255,.82); }
.tchip svg{ width:15px; height:15px; stroke:var(--green); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tchip.promo{ background:rgba(116,236,94,.09); border-color:rgba(116,236,94,.32); color:#fff; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats .stat{ padding:6px 22px; text-align:center; border-right:1px solid var(--line); }
.stats .stat:last-child{ border-right:none; }
.stats .s-n{ font-family:var(--font); font-weight:700; font-size:clamp(40px,4.8vw,56px); line-height:1; font-variant-numeric:tabular-nums; filter:drop-shadow(0 0 22px rgba(116,236,94,.18)); }
.stats .s-l{ margin-top:10px; font-size:13px; color:var(--muted); }
.band-cta{ display:flex; flex-direction:column; align-items:center; gap:13px; margin-top:50px; }
.band-note{ font-size:13px; color:var(--muted); }
@media(max-width:940px){ .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; } .stats .stat:nth-child(2){ border-right:none; } }
@media(max-width:560px){ .stats{ grid-template-columns:1fr; row-gap:30px; } .stats .stat{ border-right:none; } }
/* icon tile + card content */
.tile{ width:48px; height:48px; border-radius:var(--radius-sm); background:rgba(116,236,94,.1); border:1px solid rgba(116,236,94,.2);
display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.section--light .tile{ background:rgba(11,122,85,.1); border-color:rgba(11,122,85,.2); }
.section--light .icon{ stroke:var(--green-ink); }
.card h3{ font-size:18px; margin:0 0 8px; }
.card p{ margin:0; font-size:14px; color:var(--muted); }
.section--light .card p{ color:rgba(10,10,10,.62); }
/* ICP qualifier row */
/* ICP qualifier as a dark panel on the cream (breaks the cream-on-cream blend) */
.icp-panel{ position:relative; overflow:hidden; margin-top:52px; border-radius:22px; padding:46px 44px;
background:radial-gradient(125% 130% at 50% 0%, #122421 0%, #0C1614 55%, #080F0E 100%);
border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 70px rgba(8,20,16,.22); }
.icp-panel::after{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(560px,68%); height:1px; background:var(--gradient); opacity:.7; }
.icp-head{ text-align:center; margin-bottom:30px; }
.icp-panel .icp-head h3{ color:#fff; font-size:clamp(22px,2.6vw,28px); margin:0 0 8px; }
.icp-panel .icp-head p{ color:rgba(255,255,255,.6); margin:0; font-size:15px; }
.icp-checks{ list-style:none; margin:0 auto 30px; padding:0; max-width:820px; display:grid; grid-template-columns:1fr 1fr; gap:20px 36px; }
.icp-checks li{ display:flex; gap:13px; align-items:flex-start; }
.icp-checks .ck{ flex:none; width:27px; height:27px; border-radius:8px; margin-top:1px; background:rgba(116,236,94,.12); border:1px solid rgba(116,236,94,.3); display:flex; align-items:center; justify-content:center; }
.icp-checks .ck svg{ width:15px; height:15px; stroke:var(--green); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.icp-checks b{ display:block; font-family:var(--font); font-size:16px; color:#fff; margin-bottom:3px; }
.icp-checks p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.58); line-height:1.45; }
.icp-panel .icp-cta{ text-align:center; margin:0; font-family:var(--font); font-weight:700; font-size:16px; color:rgba(255,255,255,.75); }
.icp-panel .icp-cta a{ color:#fff; text-decoration:none; border-bottom:2px solid transparent; border-image:var(--gradient) 1; padding-bottom:2px; transition:opacity .2s var(--ease-out); }
.icp-panel .icp-cta a:hover{ opacity:.82; }
.icp-panel .icp-cta .arrow{ -webkit-text-fill-color:initial; }
@media(max-width:600px){ .icp-checks{ grid-template-columns:1fr; gap:16px; } }
/* ---- Problem section: explainer video + animated pain points ---- */
.prob-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:46px; align-items:start; }
.prob-media{ position:relative; }
.prob-media::before{ content:""; position:absolute; inset:-12% -8%; z-index:0; pointer-events:none;
background:radial-gradient(ellipse at center, rgba(46,200,201,.16), rgba(116,236,94,.08) 45%, transparent 72%); filter:blur(46px); }
.prob-video{ position:relative; z-index:1; aspect-ratio:16/9; border-radius:18px; overflow:hidden; cursor:pointer;
background:radial-gradient(125% 130% at 50% 0%, #102420 0%, #0A1513 45%, #070F0E 100%);
border:1px solid var(--line-strong); box-shadow:0 30px 70px rgba(8,20,16,.30); }
.prob-contour{ position:absolute; inset:0; width:100%; height:100%; opacity:.6;
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 45%, #000, transparent 88%); mask-image:radial-gradient(ellipse 80% 80% at 50% 45%, #000, transparent 88%); }
.prob-contour path{ stroke:rgba(46,200,201,.13); stroke-width:1; }
.prob-contour path:nth-child(even){ stroke:rgba(116,236,94,.10); }
.prob-vignette{ position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.42)); }
.vplay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; border:none; cursor:pointer; z-index:3;
background:var(--gradient); color:var(--ink); display:flex; align-items:center; justify-content:center;
box-shadow:0 12px 34px rgba(46,200,201,.36); transition:transform .2s var(--ease-out); }
.vplay svg{ width:26px; height:26px; margin-left:3px; }
.vplay:hover{ transform:translate(-50%,-50%) scale(1.06); }
.vplay:active{ transform:translate(-50%,-50%) scale(.97); }
.vplay-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(116,236,94,.55); animation:vpulse 2.6s var(--ease-out) infinite; }
.prob-video.playing{ cursor:default; }
.prob-video.playing > :not(video){ opacity:0; pointer-events:none; }
.prob-video.no-video{ cursor:default; }
.prob-video.no-video .vplay, .prob-video.no-video .prob-dur{ display:none; }
@keyframes vpulse{ 0%{ transform:scale(1); opacity:.7; } 70%{ transform:scale(1.75); opacity:0; } 100%{ transform:scale(1.75); opacity:0; } }
.prob-vmeta{ position:absolute; left:18px; right:18px; bottom:15px; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.prob-vcap b{ display:block; font-family:var(--font); font-size:14px; color:#fff; letter-spacing:-.01em; }
.prob-vcap span{ font-size:12px; color:rgba(255,255,255,.62); }
.prob-dur{ flex:none; font-family:var(--font); font-size:11px; font-weight:700; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:5px 10px; border-radius:100px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* support figures under the video */
.prob-proof{ margin-top:26px; }
.proof-lead{ margin:0 0 6px; font-family:var(--font); font-weight:600; font-size:14px; color:var(--ink); }
.pf{ display:flex; align-items:baseline; gap:16px; padding:15px 0; border-top:1px solid rgba(10,10,10,.1); }
.pf:first-of-type{ border-top:none; }
.pf-n{ flex:none; min-width:78px; font-family:var(--font); font-weight:700; font-size:clamp(28px,3.2vw,36px); line-height:1; color:var(--green-ink); font-variant-numeric:tabular-nums; }
.pf-b p{ margin:0; font-size:14px; color:rgba(10,10,10,.7); line-height:1.4; }
.pf-b cite{ display:block; margin-top:5px; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(10,10,10,.6); }
/* pain points as a 2x2 animated bento */
.prob-points .label{ display:inline-block; margin-bottom:14px; }
.prob-points h2{ margin:0 0 14px; }
.prob-lead{ margin:0 0 26px; max-width:48ch; }
.prob-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pcard{ position:relative; overflow:hidden; background:#fff; border:1px solid rgba(10,10,10,.08); border-radius:14px; padding:20px 20px 22px;
box-shadow:0 8px 22px rgba(10,10,10,.05); transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out); }
.pcard::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.pcard:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(10,10,10,.11); border-color:rgba(11,122,85,.22); }
.pcard:hover::after{ transform:scaleX(1); }
.pr-ic{ flex:none; width:40px; height:40px; border-radius:11px; margin-bottom:14px; background:rgba(11,122,85,.1); border:1px solid rgba(11,122,85,.22); display:flex; align-items:center; justify-content:center; transition:background .28s var(--ease-out), border-color .28s var(--ease-out), transform .28s var(--ease-out); }
.pr-ic svg{ width:20px; height:20px; stroke:var(--green-ink); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:stroke .28s var(--ease-out); }
.pcard:hover .pr-ic{ background:var(--gradient); border-color:transparent; transform:scale(1.06) rotate(-3deg); }
.pcard:hover .pr-ic svg{ stroke:var(--ink); }
.pcard b{ display:block; font-family:var(--font); font-size:15.5px; color:var(--ink); margin-bottom:4px; }
.pcard p{ margin:0; font-size:13.5px; color:rgba(10,10,10,.64); line-height:1.5; }
@media(max-width:940px){ .prob-grid{ grid-template-columns:1fr; gap:30px; } }
@media(max-width:520px){ .prob-cards{ grid-template-columns:1fr; } .prob-stats{ gap:12px; } }
@media(prefers-reduced-motion:reduce){ .vplay-ring{ animation:none; } }
/* The Intellania Loop */
.loop{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.loop-stage{ position:relative; aspect-ratio:1; max-width:460px; margin-inline:auto; }
.loop-list{ display:flex; flex-direction:column; gap:10px; }
.loop-step{ display:flex; gap:16px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius); border:1px solid transparent; transition:background .25s, border-color .25s; cursor:default; }
.loop-step:hover, .loop-step.active{ background:var(--card); border-color:rgba(116,236,94,.28); }
.loop-step .n{ display:flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); font-family:var(--font); font-weight:700; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out); }
.loop-step.active .n{ background:var(--gradient); color:var(--ink); border-color:transparent; }
.loop-step h3{ font-size:17px; margin:0 0 4px; }
.loop-step p{ margin:0; font-size:13px; color:var(--muted); }
@media(max-width:940px){ .loop{ grid-template-columns:1fr; gap:30px; } }
/* industry tabs */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tab{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--font); font-weight:700; font-size:14px; padding:10px 18px; border-radius:var(--radius-pill); cursor:pointer;
background:var(--card); color:var(--muted); border:1px solid var(--line); transition:all .2s; }
.tab:hover{ color:#fff; }
.tab.active{ background:var(--gradient); color:var(--ink); border-color:transparent; }
/* Industries (dark): the pain + deep knowledge on the left, "how we help" card on the right */
.ind-panel{ transition:opacity .2s var(--ease-out), filter .2s var(--ease-out), transform .2s var(--ease-out); }
.ind-panel.swapping{ opacity:0; filter:blur(3px); transform:translateY(4px); }
.ind-split{ display:grid; grid-template-columns:1fr .92fr; gap:48px; align-items:start; }
.ind-narr{ min-width:0; padding-top:4px; }
.ind-q{ font-family:var(--font); font-weight:700; font-size:clamp(24px,2.7vw,34px); line-height:1.14; letter-spacing:-.015em; color:#fff; margin:0 0 18px; max-width:20ch; }
.ind-know{ color:var(--muted); font-size:16.5px; line-height:1.72; margin:0; max-width:52ch; }
.ind-know b{ color:#fff; font-weight:600; }
/* how-we-help card lifts off the dark section */
.ind-help{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 24px; }
.ind-help::before{ content:''; position:absolute; left:0; top:0; right:0; height:2px; background:var(--gradient); }
.ind-help-label{ display:block; font-family:var(--font); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); margin-bottom:17px; }
.ind-signals{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }
.ind-signals li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:rgba(255,255,255,.9); }
.ind-signals .icon{ width:18px; height:18px; flex:none; margin-top:2px; stroke:var(--green); }
.ind-help-foot{ margin:20px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; color:var(--muted-2); }
@media(max-width:760px){ .ind-split{ grid-template-columns:1fr; gap:24px; } }
/* ---- "Is this you?" compact CTA at the foot of the Problem section ---- */
.prob-cta{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; margin-top:38px; padding-top:30px; border-top:1px solid rgba(10,10,10,.1); }
.prob-cta p{ margin:0; font-family:var(--font); font-size:17px; font-weight:500; color:rgba(10,10,10,.7); }
.prob-cta p b{ color:var(--ink); font-weight:700; }
/* case studies: filterable compact proof cards on cream */
.cs-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px auto 30px; max-width:940px; }
.cs-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; align-items:stretch; }
.cs-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; background:#fff; border:1px solid rgba(10,10,10,.08); border-radius:var(--radius); box-shadow:0 10px 26px rgba(10,10,10,.05); padding:22px 22px 0; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.cs-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(10,10,10,.12); border-color:rgba(11,122,85,.2); }
.cs-top{ display:flex; align-items:flex-start; gap:12px; }
.cs-logo{ width:42px; height:42px; border-radius:var(--radius-sm); background:var(--gradient); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--font); font-weight:700; font-size:15px; flex:none; overflow:hidden; }
/* drop in a real logo: 
*/
.cs-logo.has-img{ background:#fff; border:1px solid rgba(10,10,10,.08); padding:5px; }
.cs-logo img{ width:100%; height:100%; object-fit:contain; }
.cs-idt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.cs-co{ font-family:var(--font); font-weight:700; font-size:16px; color:var(--ink); line-height:1.2; }
.cs-ind{ font-size:12px; color:rgba(10,10,10,.58); margin-top:3px; }
.cs-blocks{ margin:15px 0 18px; display:flex; flex-direction:column; gap:12px; }
.cs-block .l{ display:block; font-family:var(--font); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(10,10,10,.5); margin-bottom:4px; }
.cs-block p{ margin:0; font-size:13px; line-height:1.5; color:rgba(10,10,10,.66); }
/* dark result band: a compact slice of the product, bleeds to card edges */
.cs-result{ position:relative; overflow:hidden; background:#0D1413; margin:auto -22px 0; padding:16px 22px 17px; }
.cs-result::before{ content:''; position:absolute; inset:0; background:radial-gradient(130% 90% at 100% 0%, rgba(116,236,94,.12), transparent 60%); pointer-events:none; }
.cs-result > *{ position:relative; }
.cs-spark{ width:100%; margin-bottom:12px; }
.cs-spark svg{ display:block; width:100%; height:auto; }
.cs-headline{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.cs-n{ font-family:var(--font); font-weight:700; font-size:29px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cs-nl{ font-size:12.5px; color:rgba(255,255,255,.6); }
.cs-ba{ display:flex; align-items:center; gap:7px; margin-top:11px; padding-top:11px; border-top:1px solid rgba(255,255,255,.09); font-family:var(--font); font-size:13px; }
.cs-ba .dt{ color:rgba(255,255,255,.55); margin-right:auto; }
.cs-ba .was{ color:rgba(255,255,255,.5); }
.cs-ba .now{ color:#fff; font-weight:700; }
.cs-arw{ flex:none; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cs-kpi{ display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-bottom:9px; font-family:var(--font); font-size:9px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.cs-kpi i{ width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(116,236,94,.7); flex:none; }
.cs-note{ text-align:center; margin:26px auto 0; max-width:72ch; font-size:12.5px; color:rgba(10,10,10,.52); }
.cs-card.cs-hide{ display:none; }
@media(max-width:560px){ .cs-grid{ grid-template-columns:1fr; } }
/* pricing / no value no invoice */
.promise{ display:flex; gap:18px; align-items:center; background:linear-gradient(120deg,rgba(46,200,201,.12),rgba(116,236,94,.07));
border:1px solid rgba(116,236,94,.25); border-radius:var(--radius); padding:24px 28px; margin-bottom:26px; }
.promise .tile{ margin:0; flex:none; }
.promise b{ font-family:var(--font); font-size:17px; }
.promise p{ margin:4px 0 0; font-size:14px; color:var(--muted); }
.price-note{ text-align:center; margin:16px auto 0; max-width:62ch; font-size:13px; color:var(--muted-2); }
/* pricing (dark, advanced): gain-share model + numbered flow */
#pricing{ position:relative; overflow:hidden; }
.pricing-glow{ position:absolute; inset:0; background:radial-gradient(55% 45% at 50% -5%, rgba(46,200,201,.10), transparent 60%); pointer-events:none; }
.gainshare{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px 38px; margin-bottom:44px; }
.gainshare::before{ content:''; position:absolute; left:0; top:0; right:0; height:2px; background:var(--gradient); }
.gs-label{ font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.gs-h{ display:block; font-family:var(--font); font-weight:700; font-size:clamp(20px,2vw,25px); line-height:1.24; letter-spacing:-.01em; margin:12px 0; }
.gs-p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:46ch; }
.gs-cap{ display:block; font-size:13px; color:var(--muted-2); margin-bottom:12px; }
.gs-bar{ display:flex; height:60px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.gs-keep{ flex:0 0 76%; display:flex; align-items:center; padding:0 18px; background:rgba(255,255,255,.06); font-family:var(--font); font-weight:700; font-size:14px; color:#fff; }
.gs-share{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 8px; background:var(--gradient); color:var(--ink); font-family:var(--font); font-weight:700; font-size:12.5px; }
.gs-legend{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:14px; }
.gs-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted-2); }
.gs-legend i{ width:9px; height:9px; border-radius:3px; flex:none; }
.gs-legend .d-keep{ background:rgba(255,255,255,.28); }
.gs-legend .d-share{ background:var(--gradient); }
.psteps{ list-style:none; margin:0 0 34px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:pstep; }
.pstep{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; transition:transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.pstep::after{ content:''; position:absolute; left:0; top:0; right:0; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); }
.pstep:hover{ transform:translateY(-5px); border-color:rgba(116,236,94,.3); box-shadow:0 22px 46px rgba(0,0,0,.45); }
.pstep:hover::after{ transform:scaleX(1); }
.pstep-top{ display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.pn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border-radius:var(--radius-sm); background:var(--gradient); color:var(--ink); font-family:var(--font); font-weight:700; font-size:16px; }
.pstep-k{ font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.pstep h3{ font-family:var(--font); font-size:17px; font-weight:700; margin:0 0 8px; }
.pstep p{ margin:0; font-size:14px; line-height:1.55; color:var(--muted); }
.price-foot{ text-align:center; }
.price-foot .btn-cta{ margin-bottom:4px; }
@media(max-width:820px){ .gainshare{ grid-template-columns:1fr; gap:26px; padding:28px 24px; } .psteps{ grid-template-columns:1fr; gap:14px; } }
/* compliance */
.comp{ display:flex; align-items:center; gap:14px; }
.comp .tile{ margin:0; flex:none; }
.comp b{ display:block; font-size:14px; }
.comp span{ font-size:12px; }
.section--light .comp span{ color:rgba(10,10,10,.55); }
/* security: animated shield emblem + guarantees (light) */
.sec-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:42px; }
.sec-listlabel{ display:block; text-align:center; margin:0 0 20px; }
.sec-emblem{ position:relative; width:204px; height:204px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.sec-emblem::before{ content:''; position:absolute; top:50%; left:50%; width:160px; height:160px; margin:-80px 0 0 -80px; border-radius:50%; background:radial-gradient(circle, rgba(46,200,201,.22), transparent 70%); z-index:0; }
.sec-emblem::after{ content:''; position:absolute; top:50%; left:50%; width:168px; height:168px; margin:-84px 0 0 -84px; border-radius:50%; border:1px solid rgba(11,122,85,.16); z-index:0; }
.sec-ring{ position:absolute; top:50%; left:50%; width:122px; height:122px; margin:-61px 0 0 -61px; border-radius:50%; border:1.5px solid rgba(11,122,85,.4); opacity:0; z-index:1; }
.sec-shield{ position:relative; z-index:2; width:106px; height:106px; filter:drop-shadow(0 16px 32px rgba(11,122,85,.25)); }
.sec-shield .sh-body{ fill:url(#secGrad); }
.sec-check{ fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:62; stroke-dashoffset:62; }
.sec-emblem.in .sec-check{ stroke-dashoffset:0; transition:stroke-dashoffset .9s .35s var(--ease-out); }
.sec-cap{ margin:0; font-family:var(--font); font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--ink); }
.sec-mk{ font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(10,10,10,.45); }
.sec-hero .sec-mk{ margin-top:2px; }
.sec-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.sec-badge{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--radius-pill); background:#fff; border:1px solid rgba(10,10,10,.1); box-shadow:0 4px 14px rgba(10,10,10,.05); font-family:var(--font); font-size:12.5px; font-weight:700; color:var(--ink); }
.sec-badge i{ width:6px; height:6px; border-radius:50%; background:var(--green-ink); flex:none; box-shadow:0 0 6px rgba(11,122,85,.5); }
.sec-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sec-item{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid rgba(10,10,10,.08); border-radius:14px; padding:18px 18px 19px; box-shadow:0 8px 22px rgba(10,10,10,.05); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.sec-item:nth-child(2){ transition-delay:.06s; } .sec-item:nth-child(3){ transition-delay:.12s; }
.sec-item:nth-child(4){ transition-delay:.18s; } .sec-item:nth-child(5){ transition-delay:.24s; } .sec-item:nth-child(6){ transition-delay:.3s; }
.sec-item:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(10,10,10,.1); border-color:rgba(11,122,85,.25); }
.sec-ic{ width:42px; height:42px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(11,122,85,.1); border:1px solid rgba(11,122,85,.18); transition:background .3s var(--ease-out), border-color .3s var(--ease-out); }
.sec-ic svg{ width:20px; height:20px; fill:none; stroke:var(--green-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s var(--ease-out); }
.sec-item:hover .sec-ic{ background:var(--gradient); border-color:transparent; }
.sec-item:hover .sec-ic svg{ stroke:var(--ink); }
.sec-item b{ display:block; font-family:var(--font); font-size:14.5px; color:var(--ink); margin-bottom:3px; }
.sec-item span{ font-size:12.5px; line-height:1.45; color:rgba(10,10,10,.6); }
@media (prefers-reduced-motion: no-preference){
.sec-emblem.in .sec-ring{ animation:secpulse 2.8s var(--ease-out) 3; }
.sec-emblem.in .sec-ring:nth-child(2){ animation-delay:.95s; }
.sec-emblem.in .sec-ring:nth-child(3){ animation-delay:1.9s; }
}
@keyframes secpulse{ 0%{ transform:scale(.68); opacity:.55; } 70%{ opacity:0; } 100%{ transform:scale(1.55); opacity:0; } }
@media(max-width:900px){ .sec-list{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .sec-list{ grid-template-columns:1fr; } }
/* about (dark): story + credential cards, no names */
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-copy .label{ margin-bottom:16px; }
.about-copy h2{ margin:0 0 18px; }
.about-copy p{ margin:0; color:var(--muted); font-size:16px; line-height:1.65; max-width:48ch; }
.about-sign{ margin-top:18px !important; font-family:var(--font); font-weight:600; color:#fff !important; font-size:15.5px !important; }
.about-creds{ display:flex; flex-direction:column; gap:14px; }
.acred{ position:relative; overflow:hidden; display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px 23px; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.acred::after{ content:''; position:absolute; left:0; top:0; right:0; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.acred:hover{ transform:translateY(-4px); border-color:rgba(116,236,94,.3); box-shadow:0 22px 46px rgba(0,0,0,.45); }
.acred:hover::after{ transform:scaleX(1); }
.acred-ic{ width:44px; height:44px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(116,236,94,.1); border:1px solid rgba(116,236,94,.2); transition:background .3s var(--ease-out), border-color .3s var(--ease-out); }
.acred-ic svg{ width:21px; height:21px; fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s var(--ease-out); }
.acred:hover .acred-ic{ background:var(--gradient); border-color:transparent; }
.acred:hover .acred-ic svg{ stroke:var(--ink); }
.acred b{ display:block; font-family:var(--font); font-size:16px; color:#fff; margin-bottom:5px; }
.acred p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); }
@media(max-width:860px){ .about-split{ grid-template-columns:1fr; gap:30px; } .about-copy p{ max-width:none; } }
/* faq */
.faq{ max-width:760px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; color:inherit; font-family:var(--font); font-weight:700; font-size:17px; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q .pm{ flex:none; width:22px; height:22px; transition:transform .3s; }
.faq-q .pm svg{ width:22px; height:22px; stroke:var(--green); fill:none; stroke-width:2; }
.faq-item.open .pm{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; }
.faq-a p{ padding:0 0 22px; color:var(--muted); font-size:15px; }
.section--light .faq-q .pm svg{ stroke:var(--green-ink); }
.section--light .faq-a p{ color:rgba(10,10,10,.62); }
/* final CTA */
.cta{ position:relative; overflow:hidden; text-align:center; padding:110px 0; }
.cta-glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(ellipse at 50% 0%, rgba(46,200,201,.14), rgba(116,236,94,.06) 45%, transparent 65%); }
.cta .wrap{ position:relative; z-index:1; }
.cta h2{ font-size:clamp(34px,4.6vw,58px); margin:0 0 16px; }
.cta p{ color:var(--muted); font-size:18px; margin:0 auto 30px; max-width:60ch; }
.cta .hero-cta{ justify-content:center; }
/* footer */
.footer{ border-top:1px solid var(--line); padding:56px 0 34px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px; }
.footer-tag{ color:var(--muted); font-size:14px; max-width:42ch; margin-top:14px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); transition:color .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.footer-social a:hover{ color:#fff; background:rgba(116,236,94,.12); border-color:rgba(116,236,94,.3); transform:translateY(-2px); }
.footer-social svg{ width:18px; height:18px; }
.footer-bot a{ color:var(--muted-2); text-decoration:underline; text-underline-offset:2px; }
.footer-bot a:hover{ color:#fff; }
/* cookie consent banner (gates GA + Apollo) */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; margin:0 auto; max-width:660px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 18px; box-shadow:0 20px 50px rgba(0,0,0,.5); opacity:0; transform:translateY(14px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.cookie-banner.show{ opacity:1; transform:none; }
.cookie-text{ margin:0; flex:1; min-width:220px; font-size:13px; line-height:1.5; color:var(--muted); }
.cookie-text a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.cookie-actions{ display:flex; gap:10px; flex:none; }
.cookie-btn{ font-family:var(--font); font-weight:700; font-size:13px; padding:9px 18px; min-height:40px; border-radius:var(--radius-pill); cursor:pointer; transition:transform .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.cookie-accept{ background:var(--gradient); color:var(--ink); border:none; }
.cookie-accept:hover{ transform:translateY(-2px); }
.cookie-decline{ background:transparent; color:var(--muted); border:1px solid var(--line); }
.cookie-decline:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
@media(max-width:560px){ .cookie-banner{ flex-direction:column; align-items:stretch; text-align:center; } .cookie-actions{ justify-content:center; } }
/* legal pages (privacy.html) */
.legal{ max-width:760px; margin:0 auto; }
.legal h1{ font-size:clamp(30px,4vw,44px); margin:0 0 6px; }
.legal-updated{ color:var(--muted-2); font-size:13px; margin:0 0 34px; }
.legal h2{ font-family:var(--font); font-size:20px; font-weight:700; margin:30px 0 10px; color:#fff; }
.legal p, .legal li{ color:var(--muted); font-size:15px; line-height:1.7; }
.legal ul{ padding-left:20px; margin:10px 0; }
.legal li{ margin-bottom:6px; }
.legal a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.footer h4{ font-family:var(--font); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; }
.footer-col a{ display:block; color:var(--muted); font-size:14px; text-decoration:none; padding:6px 0; }
.footer-col a:hover{ color:#fff; }
.footer-bot{ display:flex; justify-content:space-between; gap:16px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted-2); font-size:13px; }
@media(max-width:940px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-top,.footer-bot{ grid-template-columns:1fr; flex-direction:column; text-align:center; gap:18px; } }
/* ============================================================
v2: readability fixes, audit fixes, dashboard, richer motion
============================================================ */
/* Emil-style easing + press feedback */
:root{ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
.btn{ transition:transform .16s var(--ease-out), box-shadow .2s var(--ease-out); }
.btn:active{ transform:scale(.97); }
/* primary CTA shimmer (rare-view marketing accent, brand-sanctioned) */
.btn-cta{ position:relative; overflow:hidden; }
.btn-cta::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%); }
@media (prefers-reduced-motion: no-preference){ .btn-cta::after{ animation:shimmer 4.5s var(--ease-out) infinite; } }
@keyframes shimmer{ 0%,18%{ transform:translateX(-120%); } 38%,100%{ transform:translateX(120%); } }
/* ---- COLOUR READABILITY FIXES on light sections ---- */
.section--light .label{ color:rgba(10,10,10,.5); }
.section--light .eyebrow{ color:rgba(10,10,10,.55); }
.section--light .eyebrow .dot{ background:var(--green-ink); }
.section--light .promise{ background:linear-gradient(120deg,rgba(46,200,201,.16),rgba(116,236,94,.10)); border-color:rgba(11,122,85,.25); }
.section--light .promise b{ color:var(--ink); }
.section--light .promise p{ color:rgba(10,10,10,.62); }
.section--light .promise .tile{ background:rgba(11,122,85,.1); border-color:rgba(11,122,85,.2); }
.section--light .promise .icon{ stroke:var(--green-ink); }
/* Industries panel: light surface on the light section (was dark with black text) */
.section--light .tab{ background:#fff; border-color:rgba(10,10,10,.12); color:rgba(10,10,10,.6); }
.section--light .tab:hover{ color:var(--ink); }
.section--light .tab.active{ background:var(--gradient); color:var(--ink); border-color:transparent; }
/* ---- AUDIT FIXES ---- */
.footer h3{ font-family:var(--font); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; }
/* FAQ via grid-rows (no max-height thrash) */
.faq-a{ display:grid; grid-template-rows:0fr; max-height:none; transition:grid-template-rows .3s var(--ease-out); }
.faq-a > div{ overflow:hidden; min-height:0; }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
/* ---- PRODUCT DASHBOARD (below hero) ---- */
.showcase{ position:relative; overflow:hidden; padding-top:0; }
.showcase-cap{ text-align:center; max-width:560px; margin:0 auto 20px; color:var(--muted); font-size:15px; }
/* Cream showcase: the section turns light, but the dark product window stays dark (scoped so nothing leaks inside .browser). */
.showcase.cream{ background:var(--bg-cream); padding-top:74px; }
.showcase.cream .showcase-cap{ color:rgba(10,10,10,.6); max-width:640px; }
.showcase.cream .showcase-cap b{ color:var(--green-ink); font-weight:700; }
.showcase.cream .section-head h2{ color:#0c0c0d; }
.showcase.cream .eyebrow{ color:rgba(10,10,10,.6); }
.showcase.cream .eyebrow .dot{ background:var(--green-ink); }
/* bottom caption: a clear, designed statement on cream */
/* product section closing statement (modern, on cream, clears the dashboard shadow) */
.show-close{ text-align:center; max-width:560px; margin:48px auto 0; display:flex; flex-direction:column; align-items:center; }
.show-prompt{ font-family:var(--font); font-weight:600; font-size:clamp(18px,2vw,22px); letter-spacing:-.01em; color:#0E1116; margin:0 0 20px; }
.show-note{ margin-top:14px; font-size:13px; color:rgba(14,17,22,.72); }
.showcase.cream .isw{ background:#fff; color:rgba(10,10,10,.6); border-color:rgba(10,10,10,.12); }
.showcase.cream .isw:hover{ color:#0a0a0a; }
.showcase.cream .isw.active{ background:var(--gradient); color:var(--ink); border-color:transparent; }
.showcase.cream .showcase-glow{ background:radial-gradient(ellipse at center, rgba(46,200,201,.14), rgba(116,236,94,.06) 45%, transparent 70%); opacity:.6; }
.showcase-glow{ position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:900px; height:420px; pointer-events:none;
background:radial-gradient(ellipse at center, rgba(46,200,201,.16), rgba(116,236,94,.07) 45%, transparent 70%); filter:blur(55px); }
.browser{ position:relative; z-index:1; max-width:1080px; margin:0 auto; background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; box-shadow:0 36px 80px rgba(8,20,16,.4); }
.browser-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:#0d0e10; }
.dots{ display:flex; gap:6px; }
.dot-r{ width:11px; height:11px; border-radius:50%; }
.url{ flex:1; max-width:330px; margin:0 auto; text-align:center; font-size:12px; color:var(--muted-2); background:rgba(255,255,255,.04); border-radius:7px; padding:5px 12px; }
.url b{ color:var(--muted); font-weight:500; }
.live{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); font-family:var(--font); }
.live i{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
.dash{ padding:16px; }
/* ---- app-style top bar (simulates a multi page product) ---- */
.dash-top{ display:flex; align-items:center; gap:14px; margin-bottom:13px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.dbrand{ display:flex; align-items:center; gap:9px; flex:none; }
.dbrand .sq{ width:28px; height:28px; border-radius:8px; background:var(--gradient); color:var(--ink); display:flex; align-items:center; justify-content:center; flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 2px 6px rgba(0,0,0,.35); }
.dbrand .sq svg{ display:block; }
.dbrand .dbi{ display:flex; flex-direction:column; line-height:1.2; }
.dbrand b{ font-family:var(--font); font-size:13px; }
.dbrand span{ font-size:10px; color:var(--muted-2); }
.dnav{ display:flex; gap:2px; margin-left:8px; flex:1; }
.dtab{ font-family:var(--font); font-size:12px; padding:6px 11px; border-radius:8px; color:var(--muted); white-space:nowrap; }
.dtab.on{ background:rgba(255,255,255,.08); color:#fff; font-weight:600; }
.dtools{ display:flex; align-items:center; gap:8px; flex:none; }
.dt-ic{ width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:var(--muted-2); }
.dt-ic svg{ width:15px; height:15px; }
.dav{ width:26px; height:26px; border-radius:50%; background:var(--gradient); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.dsrc{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--card-2); border-radius:var(--radius-sm); padding:8px 11px; margin-bottom:10px; }
.dsrc .l{ font-size:9px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font); margin-right:2px; }
.chip{ display:inline-flex; align-items:center; gap:5px; font-size:10px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); border:1px solid var(--line); padding:4px 8px; border-radius:100px; }
.chip i{ width:5px; height:5px; border-radius:50%; background:var(--green); }
/* ---- KPI strip (compact, with sparkline) ---- */
.dkpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:9px; }
.dkpi{ background:var(--card-2); border-radius:var(--radius-sm); padding:11px 12px; }
.dkpi .kl{ font-family:var(--font); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:4px; }
.dkpi .kv{ font-family:var(--font); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.05; }
.dkpi .kd{ font-size:10.5px; color:var(--muted); margin-top:2px; }
.kspark{ width:100%; height:14px; display:block; margin-top:7px; opacity:.9; }
/* ---- bento grid: engine fills #dMods, each module is a .dcell with inline col/row spans ---- */
.dmods{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:112px; grid-auto-flow:row dense; gap:10px; }
.dcell{ background:var(--card-2); border-radius:var(--radius-sm); padding:12px; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.dcell .ch{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:9px; flex:none; }
.dcell .ct{ font-family:var(--font); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); }
.dcell .tag{ font-size:10px; color:var(--muted-2); font-family:var(--font); font-weight:700; }
.ch-lg .ah{ font-size:11px; color:var(--muted-2); white-space:nowrap; }
.ch-lg .ah b{ font-family:var(--font); font-size:17px; font-weight:700; }
.ch-lg .ah i{ font-style:normal; font-size:10.5px; color:var(--muted); margin-left:2px; }
.dchart{ width:100%; flex:1; min-height:0; display:block; }
.dlegend{ display:flex; gap:14px; margin-top:8px; font-size:10.5px; color:var(--muted-2); flex:none; }
.dlegend span{ display:inline-flex; align-items:center; gap:6px; }
.dlegend i{ width:10px; height:2px; display:inline-block; }
/* donut (vertical for narrow tile) */
.donut-wrap.vert{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; flex:1; min-height:0; }
.donut-svg{ width:74px; height:74px; flex:none; }
.donut-legend.g2{ display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; width:100%; font-size:10px; color:var(--muted); }
.donut-legend.g2 div{ display:flex; align-items:center; gap:6px; }
.donut-legend em{ width:8px; height:8px; border-radius:3px; font-style:normal; flex:none; }
/* simple bars */
.bars{ display:flex; align-items:flex-end; gap:6px; flex:1; min-height:0; }
.bar{ flex:1; background:var(--gradient); border-radius:3px 3px 0 0; transform-origin:bottom; }
@media (prefers-reduced-motion: no-preference){ .bar{ animation:grow .9s var(--ease-out) both; } }
@keyframes grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
/* stacked bars */
.stack{ display:flex; align-items:flex-end; gap:10px; flex:1; min-height:0; }
.scol{ flex:1; height:100%; display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0; overflow:hidden; transform-origin:bottom; }
.sseg{ width:100%; }
@media (prefers-reduced-motion: no-preference){ .scol{ animation:grow .9s var(--ease-out) both; } }
.stack-leg{ flex-wrap:wrap; }
/* radar */
.radar-svg{ width:100%; flex:1; min-height:0; display:block; }
/* compact figure tiles: gauge, ring, stat */
.dcell.fig{ align-items:center; justify-content:center; text-align:center; padding:10px; }
.fig-l{ font-family:var(--font); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); }
.fig-s{ font-size:10px; color:var(--muted-2); margin-top:1px; }
.gauge{ display:flex; flex-direction:column; align-items:center; }
.gauge-svg{ width:88px; height:auto; margin-top:1px; }
.gauge-v{ font-family:var(--font); font-weight:700; font-size:19px; line-height:1; margin-top:-11px; }
.ring{ position:relative; width:70px; height:70px; }
.ring-svg{ width:70px; height:70px; display:block; }
.ring-c{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font); font-weight:700; font-size:19px; }
.ring-c small{ font-size:10px; margin-left:1px; opacity:.8; }
.ring-t{ margin-top:7px; }
.stat .stat-v{ font-family:var(--font); font-weight:700; font-size:23px; line-height:1.05; margin-top:3px; }
.stat .kd{ font-size:10.5px; color:var(--muted); margin-top:2px; }
.stat .kspark{ width:78%; margin-top:8px; }
/* AI insights */
.ai-list{ display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; justify-content:center; }
.ai-row{ display:flex; gap:9px; align-items:flex-start; }
.ai-row .ai-ic{ width:22px; height:22px; border-radius:6px; background:rgba(116,236,94,.12); display:flex; align-items:center; justify-content:center; flex:none; }
.ai-row .ai-ic svg{ width:12px; height:12px; stroke:var(--green); fill:none; stroke-width:2.2; }
.ai-row p{ margin:0; font-size:11.5px; color:rgba(255,255,255,.78); line-height:1.4; }
/* goals to target */
.dtargets{ display:flex; flex-direction:column; gap:11px; flex:1; min-height:0; justify-content:center; }
.dtarget .dt-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:rgba(255,255,255,.7); margin-bottom:5px; }
.dtarget .dt-top b{ font-family:var(--font); font-size:12.5px; color:#fff; font-variant-numeric:tabular-nums; }
.dt-track{ height:6px; border-radius:100px; background:rgba(255,255,255,.08); overflow:hidden; }
.dt-fill{ height:100%; width:100%; border-radius:100px; transform:scaleX(0); transform-origin:left; transition:transform 1s cubic-bezier(.23,1,.32,1); }
.show-caption{ position:relative; z-index:1; text-align:center; max-width:60ch; margin:26px auto 0; font-size:14px; color:var(--muted); }
.show-caption b{ color:var(--text); }
@media(max-width:940px){
.dkpis{ grid-template-columns:repeat(2,1fr); }
.dmods{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(118px,auto); }
.dmods .dcell{ grid-column:span 1 !important; grid-row:span 1 !important; }
.dmods .area-cell{ grid-column:span 2 !important; grid-row:span 1 !important; min-height:230px; }
.dnav .dtab:nth-child(n+4){ display:none; }
}
@media(max-width:620px){
.dmods{ grid-template-columns:1fr; }
.dmods .dcell, .dmods .area-cell{ grid-column:1 / -1 !important; }
.dnav{ display:none; }
}
/* ---- The Intellania Loop: sequential highlight ---- */
.lnode .ln-c{ fill:#16171A; stroke:rgba(116,236,94,.4); stroke-width:1.5; transition:fill .4s var(--ease-out), stroke .4s var(--ease-out); }
.nicon{ stroke:var(--green); transition:stroke .4s var(--ease-out); }
.lnode{ transform-box:fill-box; transform-origin:center; transition:transform .45s var(--ease-out); }
.lnode.on{ transform:scale(1.15); }
.lnode.on .ln-c{ fill:url(#loopGrad); stroke:rgba(116,236,94,.6); filter:drop-shadow(0 0 9px rgba(116,236,94,.5)); }
.lnode.on .nicon{ stroke:#08110F; }
#loopPointer{ transform-box:view-box; transform-origin:200px 200px; transition:transform .6s cubic-bezier(.65,0,.35,1); }
@media(prefers-reduced-motion:reduce){ #loopPointer, .lnode{ transition:none; } }
/* ---- Integrations: compact cream logo wall, one row per family ---- */
.integrations{ padding:50px 0; border-bottom:1px solid rgba(10,10,10,.08); }
.integrations .section-head{ margin-bottom:24px; }
.intg-groups{ max-width:940px; margin:0 auto; }
.intg-group{ display:grid; grid-template-columns:168px 1fr; align-items:center; gap:22px; padding:11px 0; border-top:1px solid rgba(10,10,10,.07); }
.intg-group:first-child{ border-top:none; }
.intg-label{ text-align:left; font-family:var(--font); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(10,10,10,.5); margin:0; }
.intg-logos{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:9px; }
.intg{ display:flex; align-items:center; justify-content:center; width:64px; height:42px; border-radius:9px; background:#fff; border:1px solid rgba(10,10,10,.08); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.intg:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(10,10,10,.09); }
.intg img{ width:22px; height:22px; opacity:.62; transition:opacity .2s var(--ease-out); }
.intg:hover img{ opacity:1; }
.intg-note{ text-align:center; margin:24px auto 0; max-width:62ch; font-size:13.5px; color:rgba(10,10,10,.6); }
.intg-note b{ color:var(--ink); font-weight:700; }
@media(max-width:680px){ .intg-group{ grid-template-columns:1fr; gap:9px; padding:13px 0; } .intg-label{ text-align:center; } .intg-logos{ justify-content:center; } }
@media(max-width:560px){ .intg{ width:60px; height:40px; } }
.loop-step{ transition:background .3s var(--ease-out), border-color .3s var(--ease-out); }
/* ---- v3: real wordmark logo (sparkle is the tittle of the i) ---- */
.brandmark .wm{ position:relative; }
.wi{ position:relative; display:inline-block; }
.wi .tittle{ position:absolute; left:48%; top:-.30em; width:.52em; height:.52em; transform:translateX(-50%); fill:var(--green); }
/* ---- v3: industry-switching dashboard ---- */
.ind-switch{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.isw{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--font); font-weight:700; font-size:13px; padding:9px 18px; border-radius:var(--radius-pill); cursor:pointer; background:var(--card); color:var(--muted); border:1px solid var(--line); transition:color .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out); }
.isw:hover{ color:#fff; }
.isw:active{ transform:scale(.97); }
.isw.active{ background:var(--gradient); color:var(--ink); border-color:transparent; }
.ask{ display:flex; align-items:center; gap:10px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:12px; }
.ask-ic{ display:flex; flex:none; }
.ask-ic svg{ width:15px; height:15px; fill:var(--green); }
.ask-q{ flex:1; font-size:13px; color:rgba(255,255,255,.82); display:inline-flex; align-items:center; min-height:18px; font-variant-numeric:tabular-nums; }
.caret{ display:inline-block; width:2px; height:14px; background:var(--green); margin-left:2px; vertical-align:middle; }
@media (prefers-reduced-motion: no-preference){ .caret{ animation:blink 1.05s steps(1) infinite; } }
@keyframes blink{ 50%{ opacity:0; } }
.ask-tag{ flex:none; font-family:var(--font); font-size:10px; font-weight:700; letter-spacing:.08em; color:transparent; background:var(--gradient); -webkit-background-clip:text; background-clip:text; }
.dash{ transition:opacity .25s var(--ease-out), filter .25s var(--ease-out); }
.dash.swapping{ opacity:.32; filter:blur(7px); }