/* ==========================================================================
   Emmie by Terranoha — design system
   Aligned to terranoha.com/emmie: charcoal #1E1E26 · purple→magenta gradient
   (#5332F0 → #A000FF) · blue CTA #0467E1 · orbit blue/indigo/purple accent.
   ========================================================================== */

:root{
  --bg:#1E1E26;          /* charcoal base (terranoha.com/emmie) */
  --bg-2:#24242E;        /* alternate band */
  --surface:#2A2A36;     /* cards / panels */
  --surface-hi:#33333F;  /* hover */
  --ink:#FFFFFF;         /* headings */
  --ink-2:#FFFFFF;
  --text:#B7BCC7;        /* body */
  --muted:#8A8A95;       /* captions / mono labels */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --accent:#9B7DFF;      /* light purple — readable on charcoal (icons/links/text) */
  --accent-2:#8258C8;    /* orbit purple */
  --accent-ink:#FFFFFF;  /* text on gradient buttons */
  --accent-soft:rgba(131,88,200,.16);
  --grad:linear-gradient(107deg,#0467E1 0%,#A000FF 100%); /* signature gradient: CTA blue -> magenta */
  --blue:#0467E1;        /* CTA blue */
  --orbit:linear-gradient(110deg,#2C84C8 0%,#6766C8 50%,#8258C8 100%);

  --ok:#34D399;
  --bad:#F87171;

  --maxw:1180px;
  --serif:"Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* display — Terranoha uses Manrope */
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow:0 30px 70px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); margin:0; font-weight:700; line-height:1.1; letter-spacing:-.02em;}
p{margin:0;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
img,svg{display:block; max-width:100%;}
::selection{background:var(--accent); color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}
hr{border:0; border-top:1px solid var(--line); margin:0;}

.container{max-width:var(--maxw); margin-inline:auto; padding-inline:26px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.gradtext{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}

/* mono kicker */
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px;}
.kicker::before{content:""; width:26px; height:1px; background:var(--accent);}
.accent{color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:13px 26px; border:1px solid transparent; border-radius:999px;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
  min-height:48px; white-space:nowrap; text-decoration:none;
}
.btn:hover{text-decoration:none;}
.btn svg{transition:transform .2s;}
.btn:hover svg{transform:translateX(3px);}
.btn-accent{background:var(--grad); color:#fff;}
.btn-accent:hover{filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 14px 34px rgba(83,50,240,.4);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(30,30,38,.85); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:18px;}
.brand{display:inline-flex; align-items:center;}
.brand img{height:44px; width:auto; filter:brightness(0) invert(1);}
.nav-menu{display:flex; gap:2px;}
.nav-menu a{font-family:var(--mono); color:var(--text); font-size:12.5px; letter-spacing:.04em; padding:10px 14px; border-radius:999px; transition:color .2s, background .2s;}
.nav-menu a:hover{color:var(--ink); background:rgba(255,255,255,.05); text-decoration:none;}
.nav-menu a[aria-current="page"]{color:var(--accent); background:var(--accent-soft);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-toggle{display:none; width:46px; height:46px; border:1px solid var(--line-2); background:transparent; border-radius:12px; cursor:pointer; align-items:center; justify-content:center; color:var(--ink);}
@media (max-width:960px){
  .nav-menu{position:absolute; top:76px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line); padding:8px 24px 16px; box-shadow:var(--shadow); transform:translateY(-10px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
  .nav-menu.open{opacity:1; transform:none; pointer-events:auto;}
  .nav-menu a{padding:14px 6px; font-size:13.5px; border-bottom:1px solid var(--line);}
  .nav-toggle{display:inline-flex;}
  .nav-actions .btn-accent{display:none;}
}

/* ---------- Sections ---------- */
section{padding:104px 0; position:relative;}
.band-2{background:var(--bg-2);}
.rule-top{border-top:1px solid var(--line);}

.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px 64px; align-items:end; margin-bottom:60px;}
.sec-head .lead-col h2{font-size:clamp(30px,4.6vw,52px); font-weight:700; margin-top:18px; letter-spacing:-.02em;}
.sec-head .desc{color:var(--text); font-size:18px; max-width:48ch;}
@media (max-width:840px){.sec-head{grid-template-columns:1fr; gap:16px; margin-bottom:44px;}}

/* ---------- Hero ---------- */
.hero{padding:96px 0 90px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:center;}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr; gap:52px;}}
.hero h1{font-size:clamp(42px,6.6vw,76px); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:26px 0 0;}
.hero h1 em{font-style:italic; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.hero .lead{font-size:clamp(17px,2.1vw,21px); color:var(--text); max-width:52ch; margin-top:26px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.hero-note{margin-top:22px; font-family:var(--sans); font-size:14.5px; color:var(--muted); letter-spacing:0;}

/* stat band */
.statband{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:0;}
.statband > div{padding:30px 26px; border-right:1px solid var(--line);}
.statband > div:last-child{border-right:0;}
.statband .v{font-family:var(--mono); font-weight:700; font-size:clamp(26px,3.4vw,36px); letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.statband .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px;}
@media (max-width:760px){.statband{grid-template-columns:1fr 1fr;} .statband > div:nth-child(2){border-right:0;} .statband > div:nth-child(1),.statband > div:nth-child(2){border-bottom:1px solid var(--line);}}

/* ---------- Record panel (hero visual — sober framed terminal) ---------- */
.record{border:1px solid var(--line-2); background:linear-gradient(180deg,var(--surface),var(--bg-2)); box-shadow:var(--shadow);}
.record-top{display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line);}
.record-top .label{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.record-top .live{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); display:inline-flex; align-items:center; gap:8px;}
.record-top .live i{width:7px; height:7px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.record-body{padding:22px 22px 24px; font-family:var(--mono); font-size:13px; line-height:1.95; color:var(--text);}
.record-body .ln{display:grid; grid-template-columns:auto auto 1fr; gap:14px; padding:3px 0;}
.record-body .t{color:var(--muted);}
.record-body .op{color:var(--accent); text-transform:uppercase; letter-spacing:.06em; font-size:12px;}
.record-body .v b{color:var(--ink); font-weight:700;}
.record-body .ok{color:var(--ok);}
.record-seal{margin:6px 22px 22px; padding-top:16px; border-top:1px dashed var(--line-2); display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--muted);}
.record-seal .hash{color:var(--accent);}
.record-seal svg{color:var(--ok);}

/* ---------- Grids / cards ---------- */
.grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:920px){.grid.cols-3{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr;}}
.cell{background:var(--bg); padding:34px 32px; transition:background .2s;}
.cell:hover{background:var(--bg-2);}
.band-2 .cell{background:var(--bg-2);}
.band-2 .cell:hover{background:var(--surface);}
.cell .idx{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.08em;}
.cell h3{font-family:var(--serif); font-size:23px; font-weight:700; margin:16px 0 10px;}
.cell p{color:var(--text); font-size:15px;}
.cell .mtag{display:inline-block; margin-top:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 12px;}
.cell .ic{width:44px; height:44px; display:grid; place-items:center; color:#fff; background:var(--grad); border-radius:12px; margin-bottom:20px;}

/* ---------- Steps (numbered, ruled) ---------- */
.steps{border-top:1px solid var(--line);}
.steprow{display:grid; grid-template-columns:90px 1fr; gap:30px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.steprow .no{font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.1em;}
.steprow h3{font-family:var(--serif); font-size:24px; font-weight:700;}
.steprow p{color:var(--text); font-size:16px; margin-top:8px; max-width:62ch;}
@media (max-width:620px){.steprow{grid-template-columns:1fr; gap:8px;}}

/* ---------- Big pull statement ---------- */
.statement{font-family:var(--serif); font-weight:700; font-size:clamp(28px,5vw,56px); line-height:1.12; letter-spacing:-.02em; color:var(--ink); max-width:18ch;}
.statement .q{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.statement-sub{color:var(--text); font-size:19px; line-height:1.62; max-width:54ch; margin-top:26px;}

/* ---------- Compare table (governed vs not) ---------- */
.compare{width:100%; border-collapse:collapse; border:1px solid var(--line); font-size:15px;}
.compare th,.compare td{padding:18px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
.compare thead th{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.compare thead th.em{color:var(--accent);}
.compare td{color:var(--text);}
.compare td.feat{color:var(--ink); font-weight:700; font-family:var(--serif); font-size:17px;}
.compare .x{color:var(--bad);} .compare .c{color:var(--accent);}
.compare tbody tr:hover{background:var(--bg-2);}
.compare col.em-col{background:var(--accent-soft);}

/* ---------- Tick list ---------- */
.tick{list-style:none; padding:0; margin:0; display:grid; gap:14px;}
.tick li{display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink);}
.tick li svg{color:var(--accent); flex:none; margin-top:4px;}

/* ---------- Split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:880px){.split{grid-template-columns:1fr; gap:40px;}}
.tracebox{border:1px solid var(--line-2); border-radius:16px; background:var(--bg-2); padding:24px; font-family:var(--mono); font-size:13px; line-height:1.9; color:var(--text); overflow-x:auto;}
.tracebox .c{color:var(--muted);} .tracebox .k{color:var(--accent);} .tracebox .g{color:var(--ok);} .tracebox .b{color:var(--bad);}
.tracebox b{color:var(--ink); font-weight:700;}

/* ---------- Pills ---------- */
.pills{display:flex; flex-wrap:wrap; gap:12px;}
.pill{display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border:1px solid var(--line-2); border-radius:999px; font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink); transition:border-color .2s, background .2s, color .2s;}
.pill:hover{border-color:var(--accent); background:var(--accent-soft); text-decoration:none;}
.pill svg{color:var(--accent);}

/* ---------- Page hero (interior) ---------- */
.page-hero{padding:72px 0 18px; position:relative; overflow:hidden;}
.breadcrumbs{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em;}
.breadcrumbs a{color:var(--muted);} .breadcrumbs a:hover{color:var(--ink);}
.page-hero h1{font-size:clamp(36px,5.6vw,64px); font-weight:800; letter-spacing:-.03em; margin:20px 0 20px; max-width:20ch;}
.page-hero .lead{color:var(--text); font-size:clamp(18px,2vw,21px); max-width:62ch;}

/* ---------- CTA ---------- */
.cta-inner{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; border:1px solid rgba(131,88,200,.4); border-radius:26px; padding:56px 48px; background:linear-gradient(120deg, rgba(83,50,240,.20) 0%, rgba(160,0,255,.12) 55%, rgba(4,103,225,.12) 100%), var(--bg-2); position:relative; overflow:hidden;}
.cta-inner::after{content:""; position:absolute; width:420px; height:420px; right:-120px; top:-160px; background:radial-gradient(circle, rgba(160,0,255,.28), transparent 70%); pointer-events:none;}
.cta-inner > *{position:relative; z-index:1;}
@media (max-width:820px){.cta-inner{grid-template-columns:1fr; gap:26px; padding:40px 28px;}}
.cta-inner h2{font-size:clamp(28px,4.2vw,44px); font-weight:700; letter-spacing:-.02em;}
.cta-inner p{color:var(--text); font-size:17px; margin-top:14px; max-width:46ch;}
.cta-inner .actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end;}
@media (max-width:820px){.cta-inner .actions{justify-content:flex-start;}}

/* Use-case / secondary CTA box (shares the home CTA look) */
.cta-box{border:1px solid rgba(131,88,200,.4); border-radius:26px; padding:52px 48px; background:linear-gradient(120deg, rgba(83,50,240,.20) 0%, rgba(160,0,255,.12) 55%, rgba(4,103,225,.12) 100%), var(--bg-2); position:relative; overflow:hidden;}
.cta-box::after{content:""; position:absolute; width:420px; height:420px; right:-120px; top:-160px; background:radial-gradient(circle, rgba(160,0,255,.28), transparent 70%); pointer-events:none;}
.cta-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; position:relative; z-index:1;}
.cta-grid h2{font-size:clamp(26px,3.6vw,40px); font-weight:700; letter-spacing:-.02em;}
.cta-grid p{color:var(--text); font-size:17px; margin-top:14px; max-width:48ch;}
.cta-grid .actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
@media (max-width:820px){.cta-box{padding:38px 26px;} .cta-grid{grid-template-columns:1fr; gap:24px;} .cta-grid .actions{justify-content:flex-start;}}

/* ---------- Prose (insights / articles) ---------- */
.prose{max-width:720px; margin-inline:auto; font-size:18px; line-height:1.78; color:var(--text);}
.prose h2{font-family:var(--serif); font-size:30px; font-weight:700; color:var(--ink); margin:48px 0 16px; letter-spacing:-.01em;}
.prose h3{font-family:var(--serif); font-size:23px; font-weight:700; color:var(--ink); margin:34px 0 12px;}
.prose p{margin:0 0 20px;}
.prose ul,.prose ol{margin:0 0 22px; padding-left:22px;}
.prose li{margin:0 0 10px;}
.prose strong{color:var(--ink); font-weight:600;}
.prose blockquote{border-left:2px solid var(--accent); margin:28px 0; padding:6px 0 6px 24px; font-family:var(--serif); font-size:22px; color:var(--ink); font-style:italic;}
.prose a{text-decoration:underline; text-underline-offset:3px;}
.prose .lede{font-size:21px; color:var(--ink); font-family:var(--serif); line-height:1.5; margin-bottom:30px;}
.article-meta{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; display:flex; gap:16px; flex-wrap:wrap;}
.article-head{max-width:760px; margin:0 auto 12px;}
.article-head h1{font-size:clamp(32px,4.6vw,52px); font-weight:700; letter-spacing:-.02em; line-height:1.08;}

/* article list */
.postlist{border-top:1px solid var(--line);}
.post{display:grid; grid-template-columns:160px 1fr auto; gap:30px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.post .date{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em;}
.post h3{font-family:var(--serif); font-size:24px; font-weight:700; color:var(--ink);}
.post p{color:var(--text); font-size:15px; margin-top:8px; max-width:64ch;}
.post .go{color:var(--accent); font-family:var(--mono); font-size:12px; letter-spacing:.06em;}
.post:hover h3{color:var(--accent);}
@media (max-width:720px){.post{grid-template-columns:1fr; gap:8px;} .post .go{display:none;}}

/* glossary */
.glossary{border-top:1px solid var(--line);}
.term{display:grid; grid-template-columns:240px 1fr; gap:36px; padding:28px 0; border-bottom:1px solid var(--line);}
.term dt{font-family:var(--serif); font-size:22px; font-weight:700; color:var(--ink);}
.term dt .ab{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.06em; display:block; margin-top:6px;}
.term dd{margin:0; color:var(--text); font-size:16px; line-height:1.7;}
@media (max-width:720px){.term{grid-template-columns:1fr; gap:8px;}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; padding:26px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--serif); font-size:22px; color:var(--ink); font-weight:700;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{flex:none; color:var(--accent); transition:transform .25s;}
.faq details[open] summary .chev{transform:rotate(45deg);}
.faq .ans{color:var(--text); font-size:16.5px; line-height:1.75; padding:0 0 26px; max-width:74ch;}
.faq .ans a{text-decoration:underline; text-underline-offset:3px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.field{display:block; margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.field .req{color:var(--accent);}
.field input,.field textarea,.field select{width:100%; padding:13px 16px; border:1px solid var(--line-2); border-radius:14px; font:inherit; color:var(--ink); background:var(--bg-2); min-height:48px; transition:border-color .2s, box-shadow .2s;}
.field textarea{min-height:140px; resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.field .help{font-size:13px; color:var(--muted); margin-top:7px;}
.contact-card{border:1px solid var(--line); border-radius:20px; padding:6px 30px; background:var(--bg-2);}
.contact-card .row{display:flex; gap:14px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line);}
.contact-card .row:last-child{border-bottom:0;}
.contact-card .row svg{color:var(--accent); flex:none; margin-top:2px;}
.contact-card .row b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:5px;}
.contact-card .row a,.contact-card .row span{color:var(--ink); font-size:15.5px;}

/* ---------- Footer ---------- */
.site-footer{position:relative; overflow:hidden; border-top:1px solid var(--line-2); padding:0 0 34px; background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);}
.site-footer::before{content:""; position:absolute; top:-1px; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, #0467E1 22%, #A000FF 78%, transparent); box-shadow:0 0 26px rgba(83,50,240,.55);}
.site-footer::after{content:""; position:absolute; inset:0; background:radial-gradient(660px 420px at 5% 120%, rgba(4,103,225,.22), transparent 62%), radial-gradient(700px 440px at 97% 6%, rgba(160,0,255,.15), transparent 60%); pointer-events:none;}
.site-footer .container{position:relative; z-index:1;}
.foot-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; padding:58px 0 46px; margin-bottom:46px; border-bottom:1px solid var(--line);}
.foot-cta h3{font-size:clamp(25px,3.2vw,38px); font-weight:700; letter-spacing:-.02em; line-height:1.12; max-width:22ch; color:var(--ink);}
.foot-cta p{color:var(--text); font-size:16px; margin-top:11px;}
.foot-cta .btn{flex:none; font-size:16px; padding:16px 32px;}
@media (max-width:640px){.foot-cta{padding:40px 0 34px; margin-bottom:38px;} .foot-cta .btn{width:100%; justify-content:center;}}
.foot-grid{display:grid; grid-template-columns:1.9fr 1fr 1fr 1.25fr; gap:44px;}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr; gap:34px;}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr;}}
.site-footer .brand img{height:42px; filter:brightness(0) invert(1);}
.foot-grid h4{font-family:var(--sans); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin:6px 0 20px; font-weight:700;}
.foot-grid h4::after{content:""; display:block; width:30px; height:2px; margin-top:10px; border-radius:2px; background:var(--grad);}
.foot-grid a,.foot-grid p{color:var(--text); font-size:14.5px; margin-bottom:12px; line-height:1.5;}
.foot-grid a:not(.brand){display:block; width:fit-content; font-family:var(--sans); color:var(--text); text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat; transition:color .2s ease, background-size .28s ease;}
.foot-grid a:not(.brand):hover{color:var(--ink); background-size:100% 1.5px;}
.foot-intro{max-width:36ch; margin-top:20px; line-height:1.7; color:var(--text);}
.foot-since{display:block; height:40px; width:auto; margin-top:24px; opacity:.85;}
.socials{display:flex; gap:10px; margin-top:22px;}
.foot-grid .socials a{width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--text); background-image:none; margin:0; transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;}
.foot-grid .socials a:hover{color:#fff; border-color:transparent; background:var(--grad); transform:translateY(-2px); box-shadow:0 8px 22px rgba(83,50,240,.35);}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:56px; padding-top:26px; border-top:1px solid var(--line); color:var(--muted); font-family:var(--sans); font-size:13px;}

/* ---------- Microsoft Teams mockup (hero) ---------- */
.teams{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); color:#242424;}
.teams-bar{display:flex; align-items:center; gap:11px; padding:12px 16px; background:#F5F5F7; border-bottom:1px solid #E6E5EA;}
.teams-bar .tlogo{width:26px; height:26px; flex:none;}
.teams-bar .title{font-family:var(--sans); font-weight:600; font-size:14px; color:#242424; line-height:1.2;}
.teams-bar .sub{font-family:var(--sans); font-size:11.5px; color:#7a7a85;}
.teams-bar .callbtns{margin-left:auto; display:flex; gap:14px; color:#9a99a5;}
.teams-tabs{display:flex; gap:7px; padding:10px 14px; background:#FAFAFB; border-bottom:1px solid #E6E5EA; overflow-x:auto; scrollbar-width:none;}
.teams-tabs::-webkit-scrollbar{display:none;}
.teams-tab{flex:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:12px; color:#5B6472; background:#EDECF0; border:1px solid transparent; padding:6px 13px; border-radius:999px; white-space:nowrap; transition:background .18s, color .18s, border-color .18s;}
.teams-tab:hover{background:#E4E2EA; color:#242424;}
.teams-tab.active{background:#EFEAFB; color:#5B35C9; border-color:#D6C9F5;}
.teams-body{padding:18px 16px; display:flex; flex-direction:column; gap:15px; background:#fff; height:404px; overflow:hidden; justify-content:flex-end;}
.tmsg{display:flex; gap:11px; align-items:flex-start;}
.tmsg .av{width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--sans); font-weight:600; font-size:12px; color:#fff;}
.tmsg .av.trader{background:#5B6472;}
.tmsg .av.emmie{background:transparent;}
.tmsg .av img, .ttyping .av img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;}
.ttyping .av{background:transparent;}
.tmsg .content{min-width:0;}
.tmsg .meta{font-family:var(--sans); font-size:12px; margin-bottom:4px;}
.tmsg .meta .who{font-weight:600; color:#242424;}
.tmsg .meta .time{color:#9a99a5; margin-left:8px; font-weight:400;}
.tmsg .bubble{background:#F3F2F5; border-radius:2px 9px 9px 9px; padding:10px 13px; font-family:var(--sans); font-size:14px; color:#242424; line-height:1.5;}
.tmsg .bubble + .bubble{margin-top:6px;}
.tmsg.emmie .bubble{background:#EFEAFB;}
.tmsg .chip{display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-family:var(--sans); font-weight:600; font-size:12px; color:#5B35C9; background:#EEE8FC; border:1px solid #D6C9F5; padding:5px 11px; border-radius:999px;}
.tmsg .chip.pending{color:#8a6d1f; background:#FBF3DE; border-color:#F0E2B8;}
.teams-compose{display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid #E6E5EA; background:#fff;}
.teams-compose .ph{flex:1; font-family:var(--sans); font-size:13px; color:#9a99a5;}
.teams-compose .ico{color:#9a99a5;}
.teams-compose .send{width:30px; height:30px; border-radius:6px; background:var(--grad); display:grid; place-items:center; color:#fff; flex:none;}

/* ---------- Teams chat animation ---------- */
.tmsg.pop{animation:tpop .45s cubic-bezier(.2,.7,.3,1) both;}
@keyframes tpop{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
.ttyping{display:flex; gap:11px; align-items:flex-start; animation:tpop .3s ease both;}
.ttyping .av{width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:12px; background:var(--accent); color:#241b3a;}
.tdots{background:#F3F2F5; border-radius:3px 14px 14px 14px; padding:13px 15px; display:inline-flex; gap:5px; align-items:center;}
.tdots span{width:7px; height:7px; border-radius:50%; background:#b7b5c1; animation:tdot 1.25s infinite;}
.tdots span:nth-child(2){animation-delay:.18s;} .tdots span:nth-child(3){animation-delay:.36s;}
@keyframes tdot{0%,60%,100%{opacity:.35; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}

/* ---------- Emmie face band (full-width dark hero image) ---------- */
.face-band{position:relative; overflow:hidden; background:#0A0B12; padding-block:64px;}
.face-band .fb-img{position:absolute; top:0; right:0; bottom:0; width:50%; background:url("img/emmie-hero-dark.jpg") center center / cover no-repeat; z-index:0;}
.face-band .fb-img::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, #0A0B12 0%, rgba(10,11,18,.55) 44%, rgba(10,11,18,0) 82%);}
.face-band > .container{position:relative; z-index:1;}
.face-band .fb-text{max-width:78ch;}
.face-band .statement{font-size:clamp(30px,4.4vw,50px); max-width:30ch;}
.face-band .statement-sub{font-size:18.5px; line-height:1.66; margin-top:22px; max-width:62ch;}
@media (max-width:860px){
  .face-band{padding-block:56px;}
  .face-band .fb-img{width:100%; opacity:.3;}
  .face-band .fb-img::after{background:linear-gradient(180deg, rgba(10,11,18,.6) 0%, rgba(10,11,18,.55) 40%, rgba(10,11,18,.92) 100%);}
  .face-band .fb-text{max-width:none;}
}

/* ---------- Page-hero with Emmie face (interior pages) ---------- */
.ph-grid{display:grid; grid-template-columns:1fr; align-items:start; min-height:520px;}
.ph-grid > div:not(.ph-face){max-width:64ch; padding-bottom:64px;}
@media (max-width:860px){.ph-grid{grid-template-columns:1fr; min-height:0;} .ph-grid > div{padding-bottom:8px;} .ph-face{display:none;}}
.ph-face{position:absolute; right:0; bottom:0; z-index:0; line-height:0; pointer-events:none;}
.ph-face::before{content:""; position:absolute; right:6%; bottom:14%; width:86%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(131,88,200,.32), transparent 70%); filter:blur(48px); z-index:-1;}
.ph-face img{display:block; width:auto; height:clamp(360px,42vw,560px); max-width:46vw; filter:drop-shadow(0 22px 50px rgba(83,50,240,.4));}
.page-hero:has(.ph-face) > .ph-grid > div:not(.ph-face){position:relative; z-index:1;}

/* ---------- Media cards (real use-case imagery) ---------- */
.mediagrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.mediagrid.g2{grid-template-columns:repeat(2,1fr);}
.mcard .thumb.tall{height:210px;}
@media (max-width:960px){.mediagrid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.mediagrid{grid-template-columns:1fr;}}
.mcard{border:1px solid var(--line); border-radius:20px; background:var(--bg-2); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s, box-shadow .2s;}
.mcard:hover{border-color:var(--accent-2); transform:translateY(-4px); box-shadow:0 22px 50px rgba(83,50,240,.22);}
.mcard .thumb{height:150px; background-size:cover; background-position:center; position:relative;}
.mcard .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,30,38,0) 35%, rgba(30,30,38,.9));}
.mcard .thumb.grad{background-image:var(--orbit);}
.mcard .pad{padding:22px 24px 26px;}
.mcard .idx{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.08em;}
.mcard h3{font-family:var(--serif); font-size:21px; font-weight:700; margin:12px 0 9px; color:var(--ink);}
.mcard p{color:var(--text); font-size:14.5px;}
.mcard .mtag{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 12px;}

/* ---------- Brand marks (orbit watermark, since badge) ---------- */
.orbit-mark{position:absolute; pointer-events:none; opacity:.13; z-index:0;}
.since{height:22px; width:auto; opacity:.85; margin-top:20px;}
.has-mark{position:relative; overflow:hidden;}
.has-mark > .container{position:relative; z-index:1;}

/* ---------- Figure (traceability etc.) ---------- */
.figure{border:1px solid var(--line); background:var(--bg-2); padding:16px;}
.figure img{width:100%; display:block; border-radius:12px;}
.figure figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:14px; padding:0 2px 2px;}

/* ---------- Plain exchange (replaces code/trace boxes) ---------- */
.exchange{border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:var(--bg-2);}
.exchange .row{display:grid; grid-template-columns:96px 1fr; gap:18px; padding:16px 20px; border-bottom:1px solid var(--line); align-items:baseline;}
.exchange .row:last-child{border-bottom:0;}
.exchange .row .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.exchange .row .v{color:var(--ink); font-size:15.5px; line-height:1.5;}
.exchange .row .v .ok{color:var(--accent); font-weight:600;}

/* ---------- Case studies ---------- */
.cs-h{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.cs-list{list-style:none; padding:0; margin:0; display:grid; gap:11px;}
.cs-list li{position:relative; padding-left:20px; color:var(--text); font-size:15px; line-height:1.5;}
.cs-list li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:2px; background:var(--accent);}
.cs-list.muted li::before{background:var(--muted);}
.cs-outcome{font-family:var(--serif); font-weight:700; font-size:clamp(23px,3.2vw,36px); line-height:1.2; letter-spacing:-.02em; color:var(--ink); max-width:24ch;}

/* ---------- Scenarios ---------- */
.scenario-frame{width:100%; height:500px; border:1px solid var(--line-2); border-radius:20px; background:var(--bg-2); display:block;}
@media (max-width:640px){.scenario-frame{height:580px;}}
.video-frame{position:relative; aspect-ratio:16/9; width:100%; border:1px solid var(--line-2); border-radius:20px; overflow:hidden; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.45);}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.video-play{position:relative; width:100%; padding:0; border:0; cursor:pointer; text-decoration:none; background-color:#000; background-size:cover; background-position:center; display:grid; place-items:center; transition:filter .25s ease;}
.video-play:hover{filter:brightness(1.06);}
.video-play-btn{width:78px; height:78px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:0 14px 38px rgba(83,50,240,.5); transition:transform .2s ease;}
.video-play-btn svg{margin-left:4px;}
.video-play:hover .video-play-btn{transform:scale(1.09);}
.video-play:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
.scenario-note{margin-top:16px; color:var(--muted); font-size:14.5px;}
a.cell{display:flex; flex-direction:column; text-decoration:none; color:inherit;}
a.cell:hover{text-decoration:none;}
.scen-sector{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.scen-go{margin-top:auto; padding-top:16px; color:var(--accent); font-weight:600; font-size:14px;}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

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