/* =========================================================================
   adZoic — design system
   Light (default) + Dark themes, all driven by tokens.
   Aesthetic: "real-time intelligence" — purple + white / violet-black,
   electric purple, data-grid texture, technical mono accents.
   ========================================================================= */

:root{
  /* ---- Brand violet ramp (same in both themes) ---- */
  --v-900:#1A1340; --v-700:#3A2A8C; --v-600:#5B2BD6;
  --v-500:#6D4AFF; --v-400:#8B6CFF; --v-300:#A78BFA; --lilac:#C9B8FF;

  --grad-btn: linear-gradient(135deg,#7C5CFF 0%,#5B2BD6 100%);

  --maxw: 1200px;
  --radius: 18px;
  --radius-sm: 12px;

  --font-display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- LIGHT THEME (default) — purple on white ---- */
:root,
:root[data-theme="light"]{
  --bg:#F7F5FF;
  --bg-2:#EEEAFF;
  --surface:#FFFFFF;
  --surface-2:#F5F2FF;
  --text:#17123A;
  --text-strong:#0E0A28;
  --muted:#574F7E;
  --muted-2:#8B83AE;
  --tint:124,92,255;                 /* violet, for subtle fills / borders */
  --border:rgba(124,92,255,.20);
  --border-2:rgba(124,92,255,.11);
  --ghost-bg:rgba(124,92,255,.07);
  --nav-bg:rgba(247,245,255,.72);
  --shadow-color:rgba(58,30,120,.10);
  --shadow-strong:rgba(58,30,120,.16);
  --grain-opacity:.035;
  --aurora-opacity:.42;
  --signal:#0CA88F;                  /* teal that reads on white */
  --signal-soft:rgba(12,168,143,.12);
  --signal-line:rgba(12,168,143,.3);
  --grad-hero: linear-gradient(115deg,#7C5CFF 0%,#5B2BD6 55%,#3A1E9E 100%);
  --grad-mark-from:#8B6CFF; --grad-mark-mid:#6D4AFF; --grad-mark-to:#5B2BD6;
  color-scheme: light;
}

/* ---- DARK THEME ---- */
:root[data-theme="dark"]{
  --bg:#0B0918;
  --bg-2:#0E0B22;
  --surface:#130E2C;
  --surface-2:#171036;
  --text:#F4F2FF;
  --text-strong:#FFFFFF;
  --muted:#A39CCB;
  --muted-2:#756E9C;
  --tint:167,139,250;
  --border:rgba(167,139,250,.14);
  --border-2:rgba(167,139,250,.08);
  --ghost-bg:rgba(167,139,250,.06);
  --nav-bg:rgba(11,9,24,.62);
  --shadow-color:rgba(0,0,0,.55);
  --shadow-strong:rgba(0,0,0,.75);
  --grain-opacity:.06;
  --aurora-opacity:.55;
  --signal:#00E0C6;
  --signal-soft:rgba(0,224,198,.12);
  --signal-line:rgba(0,224,198,.3);
  --grad-hero: linear-gradient(115deg,#C9B8FF 0%,#8B6CFF 42%,#5B2BD6 100%);
  --grad-mark-from:#C9B8FF; --grad-mark-mid:#8B6CFF; --grad-mark-to:#5B2BD6;
  color-scheme: dark;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  transition:background .4s var(--ease), color .4s var(--ease);
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
strong{ color:var(--text-strong); font-weight:600; }

::selection{ background:var(--v-500); color:#fff; }

.mono{ font-family:var(--font-mono); }

/* ---------- Atmosphere ---------- */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain-opacity);
  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.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Light theme: clean, near-white lavender — no glow */
:root[data-theme="light"] .aurora{ display:none; }
/* Dark theme: one smooth, intentional glow up top that fades into deep violet-black */
:root[data-theme="dark"] .aurora{
  background:
    radial-gradient(58% 50% at 50% -14%, rgba(124,92,255,.28), transparent 62%),
    radial-gradient(46% 48% at 86% -8%, rgba(83,43,214,.24), transparent 60%),
    radial-gradient(40% 44% at 8% 0%, rgba(150,110,255,.12), transparent 60%);
}
.blob{ display:none; }  /* retired the drifting blobs for a calmer, cleaner backdrop */
.blob.b1{ width:560px; height:560px; left:-140px; top:-160px; background:radial-gradient(circle,#6D4AFF,transparent 65%); animation:drift1 22s var(--ease) infinite alternate; }
.blob.b2{ width:520px; height:520px; right:-120px; top:-60px; background:radial-gradient(circle,#5B2BD6,transparent 65%); animation:drift2 26s var(--ease) infinite alternate; }
.blob.b3{ width:480px; height:480px; left:40%; top:14%; background:radial-gradient(circle,#A78BFA,transparent 70%); opacity:.6; animation:drift3 30s var(--ease) infinite alternate; }
@keyframes drift1{ to{ transform:translate(80px,60px) scale(1.1); } }
@keyframes drift2{ to{ transform:translate(-60px,90px) scale(1.05); } }
@keyframes drift3{ to{ transform:translate(-90px,-40px) scale(1.12); } }

.nav,main,.footer{ position:relative; z-index:1; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:.72em 1.3em; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap;
}
.btn--lg{ padding:.92em 1.7em; font-size:1.02rem; }
.btn--primary{ background:var(--grad-btn); color:#fff;
  box-shadow:0 10px 30px -8px rgba(91,43,214,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(124,92,255,.7); }
.btn--ghost{ background:var(--ghost-bg); color:var(--text); border-color:var(--border); }
.btn--ghost:hover{ background:rgba(var(--tint),.13); transform:translateY(-2px); }
.btn--ghost .play{ font-size:.7em; color:var(--v-500); }

.link-ghost{ color:var(--muted); font-weight:500; font-size:.95rem; transition:color .2s; }
.link-ghost:hover{ color:var(--text); }

.textlink{ color:var(--v-500); font-weight:600; border-bottom:1px solid transparent; transition:border-color .2s; }
.textlink:hover{ border-color:currentColor; }

/* ---------- Theme toggle ---------- */
.theme-toggle{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--ghost-bg); border:1px solid var(--border); color:var(--text);
  transition:background .25s, transform .25s, color .25s;
}
.theme-toggle:hover{ background:rgba(var(--tint),.14); transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
/* show the icon for the theme you'll switch TO */
.theme-toggle .icon-moon{ display:block; }   /* light mode → offer dark */
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:60;
  width:48px; height:48px; border-radius:50%; cursor:pointer; border:1px solid var(--border);
  background:var(--grad-btn); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 28px -8px rgba(91,43,214,.55);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(124,92,255,.7); }
.to-top svg{ width:20px; height:20px; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  max-width:var(--maxw); margin:0 auto; padding:1.1rem 1.5rem; width:100%;
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--nav-bg); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-2); opacity:0; transition:opacity .3s;
}
.nav.is-stuck::before{ opacity:1; }
.nav.is-stuck{ position:fixed; left:0; right:0; max-width:100%;
  padding-inline:max(1.5rem,calc((100% - var(--maxw))/2 + 1.5rem)); }

.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); }
.brand__mark{ width:34px; height:34px; display:grid; place-items:center; }
.brand__mark svg{ width:34px; height:34px; filter:drop-shadow(0 4px 12px rgba(124,92,255,.4)); }
.brand__word{ font-size:1.32rem; letter-spacing:.12em; font-weight:600; color:var(--text-strong); }
.brand__word b{ font-weight:800; }

.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{ color:var(--muted); font-size:.92rem; font-weight:500; position:relative; transition:color .2s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--grad-btn); transition:width .25s var(--ease); border-radius:2px; }
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--text); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ width:100%; }

.nav__cta{ display:flex; align-items:center; gap:.9rem; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,7vw,5rem) 1.5rem 3rem;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4rem);
  align-items:center; position:relative;
}
.hero__grid{
  position:absolute; inset:-10% -20% 0 -20%; z-index:-1; opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 40% 35%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 40% 35%,#000 0%,transparent 75%);
}

.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .65rem; border-radius:999px;
  background:rgba(var(--tint),.09); border:1px solid var(--border);
  font-size:.82rem; color:var(--v-600); font-weight:600; margin-bottom:1.6rem;
  transition:background .25s, transform .25s; animation:rise .8s var(--ease) both;
}
:root[data-theme="dark"] .pill{ color:var(--lilac); }
.pill:hover{ background:rgba(var(--tint),.15); transform:translateY(-1px); }
.pill__dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px var(--signal-soft); }
.pill__arrow{ color:var(--v-500); transition:transform .25s; }
.pill:hover .pill__arrow{ transform:translateX(3px); }

.hero__title{
  font-family:var(--font-display); font-size:clamp(2.6rem,6vw,4.5rem);
  line-height:1.03; letter-spacing:-.02em; font-weight:700; color:var(--text-strong); margin-bottom:1.4rem;
}
.hero__title .line{ display:block; }
.hero__title em{ font-style:normal; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__title .line:nth-child(1){ animation:rise .8s .05s var(--ease) both; }
.hero__title .line:nth-child(2){ animation:rise .8s .14s var(--ease) both; }
.hero__title .line:nth-child(3){ animation:rise .8s .23s var(--ease) both; }

.hero__sub{ font-size:clamp(1.04rem,1.4vw,1.2rem); color:var(--muted); max-width:35em; margin-bottom:2rem; animation:rise .8s .3s var(--ease) both; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.6rem; animation:rise .8s .38s var(--ease) both; }

.hero__metrics{ display:flex; gap:clamp(1.2rem,3vw,2.6rem); flex-wrap:wrap; padding-top:1.6rem; border-top:1px solid var(--border-2); animation:rise .8s .46s var(--ease) both; }
.hero__metrics dt{ font-size:.78rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.hero__metrics dd{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; letter-spacing:-.01em; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; }

@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* ----- Live auction card ----- */
.auction-card{
  background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; position:relative; overflow:hidden;
  box-shadow:0 40px 80px -34px var(--shadow-strong), 0 0 0 1px rgba(var(--tint),.04);
  animation:rise 1s .3s var(--ease) both;
}
.auction-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 60% at 80% 0%,rgba(124,92,255,.18),transparent 60%); pointer-events:none; }
.auction-card__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.live{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--signal); font-family:var(--font-mono); }
.live__dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); animation:ping 1.6s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 var(--signal-soft);} 70%{ box-shadow:0 0 0 9px rgba(12,168,143,0);} 100%{ box-shadow:0 0 0 0 rgba(12,168,143,0);} }
.auction-card__id{ font-size:.74rem; color:var(--muted-2); }
.auction-card__imp{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem .9rem; border-radius:var(--radius-sm); background:rgba(var(--tint),.05); border:1px solid var(--border-2); margin-bottom:1.1rem; }
.imp-meta{ display:flex; flex-direction:column; gap:.35rem; }
.tag{ font-size:.72rem; color:var(--muted); }
.imp-floor{ font-size:.82rem; color:var(--v-600); white-space:nowrap; }
:root[data-theme="dark"] .imp-floor{ color:var(--lilac); }

.bidders{ list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem; }
.bidders li{ display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:.7rem; font-size:.82rem; }
.bidders .b-name{ color:var(--muted); white-space:nowrap; }
.bidders li:first-child .b-name{ color:var(--text-strong); font-weight:600; }
.b-bar{ height:8px; border-radius:6px; background:rgba(var(--tint),.12); position:relative; overflow:hidden; }
.b-bar::after{ content:""; position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--v-600),var(--v-400)); border-radius:6px; transition:inset .9s var(--ease); }
.bidders li:first-child .b-bar::after{ background:linear-gradient(90deg,var(--v-500),var(--signal)); }
.bidders.run .b-bar::after{ inset:0 var(--rest,100%) 0 0; }
.b-val{ color:var(--muted); font-size:.8rem; }
.bidders li:first-child .b-val{ color:var(--text-strong); }

.auction-card__foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1rem; border-top:1px solid var(--border-2); }
.latency{ display:flex; flex-direction:column; }
.latency__label{ font-size:.66rem; color:var(--muted-2); letter-spacing:.1em; }
.latency__val{ font-size:1.4rem; font-weight:700; color:var(--text-strong); }
.latency__val small{ font-size:.7rem; color:var(--muted); margin-left:2px; }
.won{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; text-align:right; }
.won.show{ opacity:1; transform:none; }
.won b{ color:var(--signal); }
.won__check{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--signal-soft); color:var(--signal); font-size:.7rem; flex:none; }

/* =========================================================================
   TRUST MARQUEE
   ========================================================================= */
.trust{ max-width:var(--maxw); margin:1rem auto 0; padding:2.5rem 1.5rem; text-align:center; }
.trust__label{ font-size:.8rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; margin-bottom:1.4rem; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:inline-flex; gap:3rem; white-space:nowrap; animation:scroll 32s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--muted-2); opacity:.85; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* =========================================================================
   STATS BAND
   ========================================================================= */
.stats{ max-width:var(--maxw); margin:2rem auto; padding:2.4rem 1.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }
.stat{ text-align:center; padding:.5rem; }
.stat__num{ font-family:var(--font-display); font-size:clamp(2.1rem,4vw,3.1rem); font-weight:700; letter-spacing:-.02em; display:block; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.stat__label{ font-size:.86rem; color:var(--muted); margin-top:.6rem; display:block; }

/* =========================================================================
   SECTION SCAFFOLD
   ========================================================================= */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,9vw,7rem) 1.5rem; }
.section--tight{ padding-block:clamp(3rem,6vw,4.5rem); }
.section__head{ max-width:44rem; margin:0 auto clamp(2.5rem,5vw,3.5rem); text-align:center; }
.section__head--left{ margin-inline:0; text-align:left; }
.eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--v-600); margin-bottom:1rem; padding:.3rem .7rem; border:1px solid var(--border); border-radius:999px; background:rgba(var(--tint),.05); }
:root[data-theme="dark"] .eyebrow{ color:var(--v-300); }
.section__title{ font-family:var(--font-display); font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.08; letter-spacing:-.02em; font-weight:700; color:var(--text-strong); }
.section__lede{ color:var(--muted); font-size:clamp(1rem,1.3vw,1.13rem); margin-top:1.1rem; }

.reveal{ opacity:1; }
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* =========================================================================
   ANATOMY / TIMELINE
   ========================================================================= */
.timeline{ position:relative; margin-top:1rem; }
.timeline__rail{ position:absolute; left:0; right:0; top:54px; height:2px; background:var(--border); border-radius:2px; }
.timeline__progress{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--v-400),var(--signal)); border-radius:2px; transition:width 1.6s var(--ease); }
.js .reveal.in .timeline__progress{ width:100%; }

.timeline__steps{ list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.tstep{ position:relative; padding-top:78px; }
.tstep__ms{ position:absolute; top:0; left:0; font-size:.78rem; color:var(--muted-2); }
.tstep__node{ position:absolute; top:46px; left:0; width:18px; height:18px; border-radius:50%; background:var(--bg); border:2px solid var(--v-500); z-index:2; transition:transform .4s var(--ease) calc(var(--i)*.12s + .3s), background .4s calc(var(--i)*.12s + .3s), box-shadow .4s; transform:scale(.6); }
.js .reveal.in .tstep__node{ transform:scale(1); background:var(--v-500); box-shadow:0 0 0 5px rgba(109,74,255,.18); }
.tstep--us .tstep__node{ border-color:var(--signal); }
.js .reveal.in .tstep--us .tstep__node{ background:var(--signal); box-shadow:0 0 0 5px var(--signal-soft); }
.tstep h3{ font-family:var(--font-display); font-size:1rem; font-weight:600; margin-bottom:.4rem; letter-spacing:-.01em; color:var(--text-strong); }
.tstep h3 em{ font-style:normal; color:var(--muted-2); font-weight:500; font-size:.82em; display:block; }
.tstep--us h3{ color:var(--v-600); }
:root[data-theme="dark"] .tstep--us h3{ color:var(--lilac); }
.tstep p{ font-size:.86rem; color:var(--muted); }

.anatomy__foot{ margin-top:3rem; text-align:center; font-size:.84rem; color:var(--muted-2); }
.anatomy__foot .mono{ color:var(--v-600); }
:root[data-theme="dark"] .anatomy__foot .mono{ color:var(--v-300); }

/* =========================================================================
   CARDS GRID
   ========================================================================= */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.card{ background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border-2); border-radius:var(--radius); padding:1.7rem; position:relative; overflow:hidden; transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,rgba(var(--tint),.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; }
.card:hover{ transform:translateY(-5px); border-color:var(--border); box-shadow:0 30px 60px -32px var(--shadow-strong); }
.card:hover::after{ opacity:1; }
.card--accent{ background:linear-gradient(165deg,rgba(var(--tint),.16),var(--surface)); border-color:rgba(var(--tint),.3); }
.card__ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:var(--v-600); background:rgba(var(--tint),.1); border:1px solid var(--border); margin-bottom:1.1rem; }
:root[data-theme="dark"] .card__ico{ color:var(--v-300); }
.card__ico svg{ width:22px; height:22px; }
.card--accent .card__ico{ background:var(--signal-soft); border-color:var(--signal-line); color:var(--signal); }
.card h3{ font-family:var(--font-display); font-size:1.18rem; font-weight:600; margin-bottom:.5rem; letter-spacing:-.01em; color:var(--text-strong); }
.card p{ font-size:.94rem; color:var(--muted); }

/* =========================================================================
   AI ENGINE / SPLIT
   ========================================================================= */
.intelligence{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.checklist{ list-style:none; margin:1.8rem 0 2rem; display:flex; flex-direction:column; gap:.85rem; }
.checklist li{ position:relative; padding-left:2rem; color:var(--text); font-size:1rem; }
.checklist li em{ color:var(--v-600); font-style:normal; font-weight:600; }
:root[data-theme="dark"] .checklist li em{ color:var(--lilac); }
.checklist li::before{ content:"✓"; position:absolute; left:0; top:.05em; width:1.35rem; height:1.35rem; border-radius:50%; display:grid; place-items:center; font-size:.7rem; color:var(--signal); background:var(--signal-soft); border:1px solid var(--signal-line); }

.bidscape{ background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:0 40px 80px -38px var(--shadow-strong); }
.bidscape__cap{ font-size:.72rem; color:var(--muted-2); letter-spacing:.1em; margin-bottom:1rem; }
.bidscape__chart{ position:relative; height:240px; border-radius:12px; overflow:hidden; background:linear-gradient(var(--border-2) 1px,transparent 1px) 0 0/100% 48px,linear-gradient(90deg,var(--border-2) 1px,transparent 1px) 0 0/60px 100%; }
.bidscape__chart svg{ width:100%; height:100%; }
.bidscape__area{ opacity:0; transition:opacity 1s .3s; }
.bidscape__line{ stroke-dasharray:600; stroke-dashoffset:600; }
.js .reveal.in .bidscape__line{ animation:draw 1.8s var(--ease) .3s forwards; }
.js .reveal.in .bidscape__area{ opacity:1; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.bidscape__opt{ opacity:0; transition:opacity .4s 1.6s; }
.bidscape__pt{ opacity:0; transform-box:fill-box; transform-origin:center; }
.js .reveal.in .bidscape__opt{ opacity:.85; }
.js .reveal.in .bidscape__pt{ animation:pop .5s var(--ease) 1.7s forwards; }
@keyframes pop{ from{ opacity:0; transform:scale(0);} to{ opacity:1; transform:scale(1);} }
.bidscape__opt-label{ position:absolute; top:14px; left:58%; transform:translateX(-50%); font-size:.72rem; color:var(--signal); background:var(--signal-soft); border:1px solid var(--signal-line); padding:.2rem .55rem; border-radius:6px; white-space:nowrap; opacity:0; transition:opacity .4s 1.8s; }
.js .reveal.in .bidscape__opt-label{ opacity:1; }
.bidscape__axis{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted-2); margin-top:.7rem; }

/* =========================================================================
   CHANNELS
   ========================================================================= */
.chan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.chan{ background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border-2); border-radius:var(--radius); padding:1.5rem; transition:transform .3s var(--ease), border-color .3s; }
.chan:hover{ transform:translateY(-4px); border-color:var(--border); }
.chan__tag{ display:inline-block; font-size:.7rem; letter-spacing:.12em; color:var(--v-600); padding:.25rem .55rem; border:1px solid var(--border); border-radius:6px; margin-bottom:1rem; background:rgba(var(--tint),.05); }
:root[data-theme="dark"] .chan__tag{ color:var(--v-300); }
.chan h3{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; margin-bottom:.4rem; color:var(--text-strong); }
.chan p{ font-size:.92rem; color:var(--muted); }

/* =========================================================================
   DASHBOARD / CONSOLE
   ========================================================================= */
.dashboard{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.console{ background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 50px 90px -38px var(--shadow-strong); }
.console__bar{ display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-bottom:1px solid var(--border-2); background:rgba(var(--tint),.04); }
.console__bar .dot{ width:11px; height:11px; border-radius:50%; background:rgba(var(--tint),.3); }
.console__bar .dot:first-child{ background:#ff6b8a88; }
.console__title{ margin-left:.6rem; font-size:.76rem; color:var(--muted-2); }
.console__body{ padding:1.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.kpi{ background:rgba(var(--tint),.05); border:1px solid var(--border-2); border-radius:12px; padding:1rem; }
.kpi__l{ font-size:.66rem; letter-spacing:.1em; color:var(--muted-2); display:block; }
.kpi__v{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; display:block; margin:.3rem 0; letter-spacing:-.01em; color:var(--text-strong); }
.kpi__d{ font-size:.74rem; color:var(--muted-2); }
.kpi__d.up{ color:var(--signal); }
.console__chart{ grid-column:1/-1; background:rgba(var(--tint),.04); border:1px solid var(--border-2); border-radius:12px; padding:1.1rem; }
.bars{ display:flex; align-items:flex-end; gap:.5rem; height:120px; }
.bars span{ flex:1; height:var(--h); min-height:6px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--v-400),var(--v-600)); transform-origin:bottom; transform:scaleY(0); transition:transform .7s var(--ease); }
.js .reveal.in .bars span{ transform:scaleY(1); }
.bars span:last-child{ background:linear-gradient(180deg,var(--signal),var(--v-500)); }
.console__chart-cap{ display:flex; justify-content:space-between; margin-top:.8rem; font-size:.72rem; color:var(--muted-2); }
.console__chart-cap .up{ color:var(--signal); }

/* =========================================================================
   CTA
   ========================================================================= */
.cta{ max-width:880px; margin:2rem auto; padding:clamp(3rem,7vw,5rem) 1.5rem; text-align:center; position:relative; }
.cta__glow{ position:absolute; inset:0; z-index:-1; border-radius:32px; background:radial-gradient(60% 80% at 50% 30%,rgba(124,92,255,.22),transparent 70%); }
.cta__title{ font-family:var(--font-display); font-size:clamp(2rem,5vw,3.3rem); line-height:1.06; letter-spacing:-.02em; font-weight:700; color:var(--text-strong); }
.cta__sub{ color:var(--muted); font-size:1.1rem; margin:1.1rem auto 2rem; max-width:36em; }
.cta__form{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; max-width:520px; margin:0 auto; }
.cta__form input{ flex:1; min-width:240px; padding:.92em 1.2em; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:1rem; transition:border-color .25s, background .25s; }
.cta__form input::placeholder{ color:var(--muted-2); }
.cta__form input:focus{ outline:none; border-color:var(--v-400); }
.cta__note{ margin-top:1.2rem; font-size:.86rem; color:var(--muted-2); }
.cta__note.ok{ color:var(--signal); }
.cta__note.err{ color:#e0436c; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ border-top:1px solid var(--border-2); margin-top:3rem; background:var(--bg-2); }
.footer__top{ max-width:var(--maxw); margin:0 auto; padding:3.5rem 1.5rem 2.5rem; display:grid; grid-template-columns:1.3fr 2fr; gap:3rem; }
.footer__tag{ color:var(--muted); font-size:.94rem; max-width:30em; margin-top:1.1rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.footer__cols h4{ font-family:var(--font-display); font-size:.92rem; font-weight:600; margin-bottom:1rem; color:var(--text-strong); }
.footer__cols a{ display:block; color:var(--muted); font-size:.9rem; margin-bottom:.6rem; transition:color .2s; }
.footer__cols a:hover{ color:var(--v-600); }
.footer__bottom{ max-width:var(--maxw); margin:0 auto; padding:1.5rem; border-top:1px solid var(--border-2); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted-2); }
.footer__legal a:hover{ color:var(--v-600); }

/* =========================================================================
   SUBPAGE COMPONENTS
   ========================================================================= */
.page-hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,7vw,5rem) 1.5rem clamp(1.5rem,4vw,2.5rem); position:relative; }
.page-hero__grid{ position:absolute; inset:-10% -20% 0 -20%; z-index:-1; opacity:.5; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000 0%,transparent 75%); }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size:.82rem; color:var(--muted-2); margin-bottom:1.4rem; font-family:var(--font-mono); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--v-600); }
.breadcrumb span{ opacity:.5; }
.page-hero h1{ font-family:var(--font-display); font-size:clamp(2.3rem,5.5vw,4rem); line-height:1.04; letter-spacing:-.02em; font-weight:700; color:var(--text-strong); max-width:16ch; }
.page-hero h1 em{ font-style:normal; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero__lede{ color:var(--muted); font-size:clamp(1.05rem,1.5vw,1.25rem); max-width:42rem; margin-top:1.3rem; }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

/* prose (long-form content) */
.prose{ max-width:46rem; margin:0 auto; }
.prose > p{ color:var(--muted); font-size:1.08rem; margin-bottom:1.4rem; }
.prose h2{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; letter-spacing:-.01em; color:var(--text-strong); margin:2.8rem 0 1rem; }
.prose h3{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--text-strong); margin:1.8rem 0 .7rem; }
.prose ul{ margin:0 0 1.4rem; padding-left:0; list-style:none; }
.prose ul li{ position:relative; padding-left:1.7rem; margin-bottom:.7rem; color:var(--muted); }
.prose ul li::before{ content:""; position:absolute; left:.2rem; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--v-500); }
.prose strong{ color:var(--text-strong); }
.prose .lead{ font-size:1.2rem; color:var(--text); }

.callout{ border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(165deg,rgba(var(--tint),.08),var(--surface)); padding:1.4rem 1.5rem; margin:1.8rem 0; }
.callout__label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--v-600); display:block; margin-bottom:.5rem; }
.callout p{ color:var(--muted); margin:0; }

.glossary{ display:grid; gap:.2rem; margin:1.4rem 0; }
.glossary div{ display:grid; grid-template-columns:120px 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--border-2); }
.glossary dt{ font-family:var(--font-mono); font-weight:700; color:var(--v-600); font-size:.9rem; }
.glossary dd{ color:var(--muted); font-size:.95rem; }

/* alternating feature rows (platform page) */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin-bottom:clamp(3rem,6vw,5rem); }
.feature-row:nth-child(even) .feature-row__media{ order:-1; }
.feature-row h2{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:700; letter-spacing:-.01em; color:var(--text-strong); margin-bottom:.9rem; }
.feature-row > div > .eyebrow{ margin-bottom:1rem; }
.feature-row p{ color:var(--muted); font-size:1.05rem; margin-bottom:1.2rem; }
.feature-row__media{ background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; min-height:240px; display:grid; box-shadow:0 40px 80px -40px var(--shadow-strong); }

/* mini list with checks */
.minichecks{ list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.2rem; }
.minichecks li{ position:relative; padding-left:1.8rem; color:var(--text); }
.minichecks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--signal); font-weight:700; }

/* FAQ */
.faq{ max-width:46rem; margin:0 auto; display:flex; flex-direction:column; gap:.8rem; }
.faq details{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; transition:border-color .25s; }
.faq details[open]{ border-color:rgba(var(--tint),.4); }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--text-strong); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.3rem; color:var(--v-500); transition:transform .25s; flex:none; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 1.3rem 1.2rem; color:var(--muted); margin:0; }

/* stat strip (compact) */
.metricstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:var(--maxw); margin:0 auto; }
.metricstrip .stat{ border:1px solid var(--border-2); border-radius:var(--radius); padding:1.6rem 1rem; background:linear-gradient(165deg,var(--surface),var(--surface-2)); }

/* team / values grid */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.value{ border:1px solid var(--border-2); border-radius:var(--radius); padding:1.6rem; background:linear-gradient(165deg,var(--surface),var(--surface-2)); }
.value h3{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--text-strong); margin-bottom:.5rem; }
.value p{ color:var(--muted); font-size:.95rem; }
.value__num{ font-family:var(--font-mono); font-size:.8rem; color:var(--v-600); display:block; margin-bottom:.8rem; }

/* contact layout */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); max-width:var(--maxw); margin:0 auto; align-items:start; }
.form-card{ background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem); box-shadow:0 40px 80px -40px var(--shadow-strong); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--text); margin-bottom:.45rem; }
.field input,.field select,.field textarea{ width:100%; padding:.8em 1em; border-radius:12px; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:1rem; transition:border-color .2s; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--v-400); }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-aside h3{ font-family:var(--font-display); font-size:1.2rem; color:var(--text-strong); margin-bottom:.6rem; margin-top:1.6rem; }
.contact-aside h3:first-child{ margin-top:0; }
.contact-aside p{ color:var(--muted); margin-bottom:.6rem; }
.contact-aside a{ color:var(--v-600); font-weight:600; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .auction-card{ max-width:520px; }
  .intelligence,.dashboard,.feature-row,.contact-grid{ grid-template-columns:1fr; }
  .feature-row:nth-child(even) .feature-row__media{ order:0; }
  .cards,.chan-grid,.values{ grid-template-columns:repeat(2,1fr); }
  .console__body{ grid-template-columns:repeat(2,1fr); }
  .timeline__steps{ grid-template-columns:repeat(3,1fr); row-gap:2rem; }
  .timeline__rail{ display:none; }
  .tstep{ padding-top:0; }
  .tstep__ms{ position:static; display:block; margin-bottom:.4rem; }
  .tstep__node{ display:none; }
  .footer__top{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:680px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav.open .nav__links{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--border); padding:1.2rem 1.5rem; gap:1.1rem; box-shadow:0 30px 50px -30px var(--shadow-strong); }
  .stats,.metricstrip{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
  .cards,.chan-grid,.console__body,.values,.field--row{ grid-template-columns:1fr; }
  .timeline__steps{ grid-template-columns:1fr 1fr; }
  .hero__metrics dd{ font-size:1.5rem; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); }
  .glossary div{ grid-template-columns:90px 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .blob{ animation:none; }
}

/* =========================================================================
   COOKIE CONSENT BANNER
   ========================================================================= */
.cookie-banner{
  position:fixed; left:clamp(1rem,3vw,1.5rem); bottom:clamp(1rem,3vw,1.5rem); z-index:70;
  width:min(440px,calc(100vw - 2rem));
  background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 30px 60px -24px var(--shadow-strong); padding:1.1rem 1.2rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1rem; align-items:center;
  transform:translateY(20px); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.cookie-banner.show{ opacity:1; transform:none; }
.cookie-banner p{ flex:1 1 100%; font-size:.86rem; color:var(--muted); margin:0; }
.cookie-banner a{ color:var(--v-500); font-weight:600; }
.cookie-banner__actions{ display:flex; gap:.5rem; margin-left:auto; }
.cookie-banner .btn{ padding:.5em 1.1em; font-size:.85rem; }

/* =========================================================================
   PRICING
   ========================================================================= */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch; max-width:var(--maxw); margin:0 auto; }
.price{ display:flex; flex-direction:column; background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border-2); border-radius:var(--radius); padding:1.8rem; transition:transform .3s var(--ease), border-color .3s; }
.price:hover{ transform:translateY(-4px); border-color:var(--border); }
.price--featured{ border-color:rgba(var(--tint),.4); box-shadow:0 34px 70px -36px var(--shadow-strong); position:relative; }
.price__badge{ position:absolute; top:-11px; left:1.8rem; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--grad-btn); padding:.28rem .6rem; border-radius:999px; }
.price__name{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--text-strong); }
.price__who{ color:var(--muted); font-size:.92rem; margin:.35rem 0 1.1rem; min-height:2.6em; }
.price__cost{ font-family:var(--font-display); font-size:1.45rem; font-weight:700; color:var(--text-strong); }
.price__cost small{ display:block; font-family:var(--font-body); font-size:.82rem; font-weight:500; color:var(--muted-2); margin-top:.25rem; }
.price__list{ list-style:none; margin:1.2rem 0 1.6rem; display:flex; flex-direction:column; gap:.6rem; }
.price__list li{ position:relative; padding-left:1.6rem; font-size:.92rem; color:var(--muted); }
.price__list li::before{ content:"✓"; position:absolute; left:0; color:var(--signal); font-weight:700; }
.price .btn{ margin-top:auto; justify-content:center; }

/* =========================================================================
   ROLES (careers)
   ========================================================================= */
.roles{ display:flex; flex-direction:column; gap:.9rem; max-width:48rem; margin:0 auto; }
.role{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border-2); border-radius:var(--radius); padding:1.3rem 1.5rem; transition:border-color .3s, transform .3s; }
.role:hover{ border-color:var(--border); transform:translateY(-2px); }
.role__info{ flex:1; min-width:240px; }
.role__info h3{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--text-strong); margin-bottom:.25rem; }
.role__info p{ font-size:.9rem; color:var(--muted); margin:0; }
.role__meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.role__tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--v-600); border:1px solid var(--border); border-radius:6px; padding:.2rem .5rem; background:rgba(var(--tint),.05); }
:root[data-theme="dark"] .role__tag{ color:var(--v-300); }
.perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }

@media (max-width:980px){
  .pricing-grid{ grid-template-columns:1fr; max-width:460px; }
  .perks{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .perks{ grid-template-columns:1fr; }
  .cookie-banner__actions{ width:100%; }
  .cookie-banner__actions .btn{ flex:1; justify-content:center; }
}

/* =========================================================================
   BLOG
   ========================================================================= */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.3rem; max-width:var(--maxw); margin:0 auto; }
.post-card{ position:relative; display:flex; flex-direction:column; background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border-2); border-radius:var(--radius); overflow:hidden; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.post-card:hover{ transform:translateY(-5px); border-color:var(--border); box-shadow:0 30px 60px -34px var(--shadow-strong); }
.post-card__thumb{ aspect-ratio:16/9; position:relative; display:grid; place-items:center; background:linear-gradient(135deg,var(--v-400),var(--v-600)); overflow:hidden; }
.post-card__thumb::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:28px 28px; opacity:.5; }
.post-card__thumb span{ position:relative; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.45); padding:.3rem .7rem; border-radius:999px; }
.post-card__body{ padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.post-card h3{ font-family:var(--font-display); font-size:1.16rem; font-weight:600; color:var(--text-strong); margin-bottom:.5rem; letter-spacing:-.01em; }
.post-card p{ font-size:.92rem; color:var(--muted); margin-bottom:1.1rem; }
.post-card__meta{ margin-top:auto; font-family:var(--font-mono); font-size:.73rem; color:var(--muted-2); }
.post-card__link::after{ content:""; position:absolute; inset:0; z-index:1; }

.post-feature{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; max-width:var(--maxw); margin:0 auto 1.3rem; }
.post-feature__thumb{ background:linear-gradient(135deg,var(--v-500),var(--v-700)); min-height:260px; position:relative; display:grid; place-items:center; }
.post-feature__thumb::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:32px 32px; opacity:.5; }
.post-feature__thumb span{ position:relative; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.5); padding:.35rem .8rem; border-radius:999px; }
.post-feature__body{ padding:clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column; justify-content:center; }
.post-feature__body h2{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; color:var(--text-strong); letter-spacing:-.01em; margin:.6rem 0 .7rem; }
.post-feature__body p{ color:var(--muted); margin-bottom:1.2rem; }

.article-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; font-family:var(--font-mono); font-size:.78rem; color:var(--muted-2); margin-top:1.2rem; }
.article-cover{ max-width:var(--maxw); margin:2rem auto 0; aspect-ratio:1200/420; border-radius:var(--radius); background:linear-gradient(135deg,var(--v-500),var(--v-700)); position:relative; overflow:hidden; }
.article-cover::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:40px 40px; opacity:.5; }
.author{ display:flex; align-items:center; gap:.85rem; margin:2.5rem auto; padding:1.2rem 1.4rem; border:1px solid var(--border-2); border-radius:var(--radius); background:linear-gradient(165deg,var(--surface),var(--surface-2)); max-width:46rem; }
.author__avatar{ width:48px; height:48px; border-radius:50%; background:var(--grad-btn); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; flex:none; }
.author__name{ font-weight:600; color:var(--text-strong); }
.author__role{ font-size:.85rem; color:var(--muted); }

/* blog category filters */
.blog-filters{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; max-width:var(--maxw); margin:0 auto; }
.blog-filter{ font-family:var(--font-body); font-weight:600; font-size:.86rem; padding:.5em 1.15em; border-radius:999px; border:1px solid var(--border); background:var(--ghost-bg); color:var(--muted); cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s; }
.blog-filter:hover{ color:var(--text); border-color:rgba(var(--tint),.4); transform:translateY(-1px); }
.blog-filter.is-active{ background:var(--grad-btn); color:#fff; border-color:transparent; }
.post-card.is-hidden{ display:none; }

@media (max-width:980px){ .post-feature{ grid-template-columns:1fr; } .post-feature__thumb{ min-height:200px; } }