@charset "UTF-8";
/* ============================================================
   Amir Zeynali — AI Systems Optimization · G2 Aurora v2
   ============================================================ */
:root{
  --blue:#14358A; --teal:#11A9AE; --plum:#8D2A8B;
  --blue-hi:#6D93F5; --teal-hi:#43DCE1; --plum-hi:#E06CDC;
  --bg:#0A0B0F; --panel:#0E0F14; --panel2:#12131A; --line:#262A34;
  --ink:#EAECEF; --dim:#9AA0AB; --white:#F7F8FA;
  --grad-h:linear-gradient(90deg,var(--blue-hi),var(--teal-hi) 50%,var(--plum-hi));
  --grad-v:linear-gradient(180deg,var(--blue-hi),var(--teal-hi) 50%,var(--plum-hi));
  --display:'Archivo',sans-serif;
  --display-x:'Archivo Expanded','Archivo',sans-serif;
  --sans:'Inter',sans-serif;
  --maxw:1200px; --pad:clamp(24px,6vw,64px);
  /* ---- spacing system ----
     --pad          horizontal page gutter (all .wrap/.nav/etc.)
     --section-y    vertical rhythm for a full standalone .section
     --subhero-pb   bottom padding for a compact "interior page" hero
                     (services/contact/cases/case-detail style, NOT the
                     big home hero) so it doesn't shove content away
     --aftersub-pt  top padding for the .section that immediately follows
                     a subhero — keeps the hero→content gap tight & even
     See SPACING.md at repo root for the full write-up. */
  --section-y:clamp(36px,5.5vw,64px);
  --subhero-pb:clamp(10px,2vw,20px);
  --aftersub-pt:clamp(14px,2.5vw,28px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;width:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;width:100%}
img,svg{max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal-hi);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:var(--section-y) 0}
.section-line{border-top:1px solid var(--line)}

/* interior-page hero + the section right after it — see --subhero-pb /
   --aftersub-pt above. Use on pages like services/contact/cases/case
   pages instead of one-off inline padding overrides. */
.hero.subhero{padding-bottom:var(--subhero-pb)}
.section.aftersub{padding-top:var(--aftersub-pt)}
.section.flush-top{padding-top:0}
.section.flush-bottom{padding-bottom:0}

/* scroll reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}

/* ---------- header (glass) ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(10,11,15,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(38,42,52,.8)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px var(--pad);gap:16px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.mark{width:42px;height:42px;flex-shrink:0;object-fit:contain}
.brand .name{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.1}
.brand .sub{font-size:.6rem;color:var(--dim);letter-spacing:.08em;display:block;margin-top:2px;text-transform:uppercase}
.nav-links{display:flex;gap:26px;font-size:.92rem}
.nav-links a{color:var(--ink);text-decoration:none;opacity:.85}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1;color:var(--teal-hi)}
.nav-cta{font-weight:600;font-size:.85rem;color:#0A0B0F;background:var(--grad-h);padding:11px 20px;text-decoration:none;white-space:nowrap;border-radius:4px}
.nav-cta:hover{filter:brightness(1.1)}
.nav-yt{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;background:var(--grad-h);border-radius:4px;text-decoration:none;transition:filter .2s ease,transform .2s ease,box-shadow .2s ease}
.nav-yt:hover{filter:brightness(1.1)}
.nav-yt svg{width:20px;height:20px}
@media(max-width:860px){
  .nav-links{display:none}
}
@media(max-width:400px){
  .brand .sub{display:none}
}

/* ---------- bottom nav (mobile, glass) ---------- */
.bottomnav{display:none}
@media(max-width:860px){
  body{padding-bottom:78px}
  .bottomnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(14,15,20,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid rgba(38,42,52,.9);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--dim);font-size:.66rem;letter-spacing:.02em;padding:4px 0;border-radius:8px}
  .bottomnav a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .bottomnav a.active{color:var(--teal-hi)}
  .bottomnav a.cta{color:var(--white)}
  .bottomnav a.cta .ic{width:34px;height:34px;border-radius:50%;background:var(--grad-h);display:flex;align-items:center;justify-content:center;margin-top:-14px;box-shadow:0 4px 14px rgba(67,220,225,.35)}
  .bottomnav a.cta .ic svg{stroke:#0A0B0F}
}
/* NOTE: css/cases-and-nav.css overrides/extends the four rules above with
   the real unified .active badge system (all 4 tabs, same treatment).
   Load cases-and-nav.css AFTER this file on every page that has a
   bottom nav — it is not cases-page-specific, the filename is misleading.
   NOTE 2: cases-and-nav.css's own comment says the Inquiry/Talk tab
   "keeps the badge permanently" but its selector is `.cta:not(.active)`,
   which strips the badge unless .active is also present. See the
   companion cases-and-nav.css patch for the one-line fix. */

/* ---------- type ---------- */
.eyebrow{font-family:var(--display);font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.005em;text-transform:none;margin-bottom:16px;background:var(--grad-h);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;font-weight:700}
h1{font-family:var(--display-x);font-weight:700;font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.12;letter-spacing:-.01em;color:var(--white)}
h2{font-family:var(--display-x);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.2;color:var(--white)}
h3{font-family:var(--display);font-weight:700;font-size:1.18rem;color:var(--white)}
.gx{background:var(--grad-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl{color:var(--teal-hi);font-weight:700}
.lede{font-size:1.05rem;color:var(--dim);max-width:56ch}
p{color:var(--dim)}
@media(min-width:961px){
  p,.lede{text-align:justify;text-justify:inter-word}
}
.section .wrap>.lede,.founder-copy>.lede{max-width:none}

/* ---------- buttons ---------- */
.btn{font-weight:600;font-size:.93rem;padding:13px 26px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-radius:4px;border:none;cursor:pointer;font-family:var(--sans)}
.btn-primary{background:var(--grad-h);color:#0A0B0F}
.btn-primary:hover{filter:brightness(1.1)}
.btn-outline{border:1px solid rgba(67,220,225,.35);color:var(--teal-hi);background:rgba(67,220,225,.06)}
.btn-outline:hover{border-color:var(--teal-hi);background:rgba(67,220,225,.14)}
.btn-ghost{color:var(--teal-hi);background:transparent;padding:13px 4px}
.actions{display:flex;gap:14px;flex-wrap:wrap}

/* gradient tag pills */
.pill{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#0A0B0F;padding:5px 12px;border-radius:99px;background:var(--grad-h)}
.pill.p-blue{background:linear-gradient(90deg,var(--blue-hi),var(--teal-hi))}
.pill.p-teal{background:linear-gradient(90deg,var(--teal-hi),#7be3d9)}
.pill.p-plum{background:linear-gradient(90deg,var(--plum-hi),#f19bee)}

/* ---------- hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:60px var(--pad) 40px;text-align:center;position:relative}
.hero::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(720px,90%);height:100%;background:radial-gradient(ellipse at 50% 0%,rgba(20,53,138,.35),rgba(17,169,174,.12) 45%,transparent 70%);pointer-events:none}
.hero>*{position:relative}
.hero h1{max-width:20ch;margin:0 auto 18px}
.hero .lede{margin:0 auto 28px}
.hero .actions{justify-content:center}

/* ---------- split arenas ---------- */
.split{max-width:var(--maxw);margin:24px auto 0;display:grid;grid-template-columns:1fr 1fr;position:relative}
.split::before{content:'';position:absolute;left:50%;top:-24px;bottom:0;width:2px;background:var(--grad-v);box-shadow:0 0 22px rgba(67,220,225,.45);transform:translateX(-1px);z-index:2}
.half{padding:clamp(26px,4vw,46px);position:relative;overflow:hidden;isolation:isolate}
.half::before{
  content:'';
  position:absolute; inset:-20%;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:34px 34px;
  animation:gridDrift 18s linear infinite;
}
.half.factory{background:linear-gradient(160deg,rgba(109,147,245,.09),transparent 55%)}
.half.factory::before{background-image:
    linear-gradient(rgba(109,147,245,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,147,245,.10) 1px,transparent 1px);}
.half.digital{background:linear-gradient(200deg,rgba(224,108,220,.09),transparent 55%)}
.half.digital::before{background-image:
    linear-gradient(rgba(224,108,220,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(224,108,220,.10) 1px,transparent 1px);}

@keyframes gridDrift{
  0%{transform:translate(0,0)}
  100%{transform:translate(34px,34px)}
}
@media (prefers-reduced-motion: reduce){
  .half::before{animation:none}
}
.tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-weight:600}
.factory .tag,.c-blue{color:var(--blue-hi)}
.digital .tag,.c-plum{color:var(--plum-hi)}
.c-teal{color:var(--teal-hi)}
.half h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:12px}
.half>p{font-size:.94rem;margin-bottom:18px}
.half ul{list-style:none}
.half li{padding:10px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink)}
.factory li::before{content:'▸ ';color:var(--blue-hi)}
.digital li::before{content:'▸ ';color:var(--plum-hi)}
.layerbar{max-width:var(--maxw);margin:0 auto;padding:1.5px;background:var(--grad-h)}
.layerbar-in{background:var(--panel);padding:18px var(--pad);display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.layerbar .lt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-hi);font-weight:600}
.layerbar b{font-family:var(--display);color:var(--white);font-size:1rem}
.layerbar span{color:var(--dim);font-size:.88rem}
@media(max-width:720px){
  .split{grid-template-columns:1fr}
  .split::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;background:var(--grad-h);transform:none}
  .hero h1{max-width:none}
  .actions{justify-content:center}
  .founder-links{justify-content:center}
}

/* ---------- METHOD — gradient rail ---------- */
.method-sec{background:
  radial-gradient(600px 300px at 15% 0%,rgba(20,53,138,.18),transparent),
  radial-gradient(600px 300px at 85% 100%,rgba(141,42,139,.14),transparent),
  var(--panel);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rail{max-width:760px;margin:44px auto 0;position:relative;padding-left:34px}
.rail::before{content:'';position:absolute;left:10px;top:8px;bottom:8px;width:2px;background:var(--grad-v);border-radius:2px}
.rail-item{position:relative;padding:0 0 26px 18px}
.rail-item:last-child{padding-bottom:0}
.rail-item::before{content:'';position:absolute;left:-30px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--teal-hi);box-shadow:0 0 10px rgba(67,220,225,.5)}
.rail-item h3{font-size:1.02rem;display:flex;align-items:baseline;gap:10px}
.rail-item h3 .n{font-family:var(--display);font-size:.78rem;color:var(--teal-hi)}
.rail-item p{font-size:.9rem;margin-top:4px}
@media(max-width:600px){.rail{padding-left:28px}.rail-item{padding-left:12px}.rail-item::before{left:-24px}}

/* ---------- service cards (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.svc{border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.svc:hover{transform:translateY(-4px);border-color:rgba(67,220,225,.5)}
.svc.v-blue{background:linear-gradient(170deg,rgba(109,147,245,.13),var(--panel) 60%)}
.svc.v-teal{background:linear-gradient(170deg,rgba(67,220,225,.12),var(--panel) 60%)}
.svc.v-plum{background:linear-gradient(170deg,rgba(224,108,220,.12),var(--panel) 60%)}
.svc .art{height:96px;margin-bottom:18px;display:flex;align-items:center}
.svc .art svg{height:100%;width:auto;overflow:visible}
.svc:hover .art svg .anim{animation:artpulse 1.6s ease-in-out infinite}
@keyframes artpulse{0%,100%{opacity:.5}50%{opacity:1}}
.svc .sn{font-size:.7rem;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-bottom:8px}
.svc h3{margin-bottom:4px}
.svc .dur{font-size:.76rem;color:var(--teal-hi);margin-bottom:12px}
.svc p{font-size:.9rem;flex:1}
.svc .btn{margin-top:18px;align-self:flex-start}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}}

/* ---------- service detail (services page) ---------- */
.svc-detail{border:1px solid var(--line);border-radius:8px;margin-top:34px;overflow:hidden}
.svc-detail.v-blue{background:linear-gradient(160deg,rgba(109,147,245,.10),var(--panel) 55%)}
.svc-detail.v-teal{background:linear-gradient(160deg,rgba(67,220,225,.10),var(--panel) 55%)}
.svc-detail.v-plum{background:linear-gradient(160deg,rgba(224,108,220,.10),var(--panel) 55%)}
.sd-head{padding:clamp(22px,4vw,38px);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
.sd-head .art{width:120px;justify-self:end}
.sd-head .art svg{width:100%;overflow:visible}
.sd-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--teal-hi);margin-top:12px}
.sd-body{display:grid;grid-template-columns:1fr 1fr}
.sd-col{padding:clamp(20px,3.5vw,30px)}
.sd-col:first-child{border-right:1px solid var(--line)}
.sd-col h4{font-family:var(--display);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.sd-col ul{list-style:none}
.sd-col li{padding:7px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink)}
.sd-col li::before{content:'▸ ';color:var(--teal-hi)}
.sd-foot{padding:16px clamp(20px,3.5vw,30px);border-top:1px solid var(--line);background:rgba(10,11,15,.4);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sd-foot .out{font-style:italic;color:var(--ink);font-size:.9rem;max-width:52ch}
@media(max-width:760px){.sd-body{grid-template-columns:1fr}.sd-col:first-child{border-right:none;border-bottom:1px solid var(--line)}.sd-head{grid-template-columns:1fr}.sd-head .art{justify-self:start;width:96px}}

/* partner band — deliberately NOT a numbered service */
.partner-band{margin-top:44px;border-radius:8px;padding:1.5px;background:linear-gradient(90deg,var(--plum-hi),var(--plum))}
.partner-in{background:var(--panel);border-radius:7px;padding:clamp(24px,4vw,38px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.partner-in p{max-width:60ch;font-size:.94rem;margin-top:10px}
@media(max-width:760px){.partner-in{grid-template-columns:1fr}}

/* ---------- youtube ---------- */
.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.yt-card{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden;text-decoration:none;display:block;transition:transform .25s,border-color .25s}
.yt-card:hover{transform:translateY(-4px);border-color:var(--teal-hi)}
.yt-thumb{aspect-ratio:16/9;background:var(--panel2);position:relative;display:flex;align-items:center;justify-content:center}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-thumb .play{position:absolute;width:50px;height:50px;border-radius:50%;background:rgba(10,11,15,.75);border:1.5px solid var(--teal-hi);display:flex;align-items:center;justify-content:center}
.yt-thumb .play::after{content:'';border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--teal-hi);margin-left:4px}
.yt-card .yt-meta{padding:14px 16px}
.yt-card h3{font-size:.95rem;margin-top:8px;line-height:1.4}
@media(max-width:860px){.yt-grid{grid-template-columns:1fr}}

/* ---------- cases ---------- */
.case{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin-top:28px;padding:clamp(22px,4vw,36px)}
.case h3{font-size:1.25rem;margin:12px 0 16px}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:16px 0}
.case-cell{background:var(--panel2);padding:14px}
.case-cell .ck{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.case-cell .cv{font-size:.88rem;color:var(--ink)}
.case .limits{font-size:.84rem;border-left:2px solid var(--plum-hi);padding-left:14px;margin-top:14px}
@media(max-width:760px){.case-grid{grid-template-columns:1fr}}

/* ---------- big cta ---------- */
.bigcta{text-align:center;padding:clamp(52px,8vw,96px) var(--pad);position:relative}
.bigcta::before{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,90%);height:70%;background:radial-gradient(ellipse at 50% 100%,rgba(141,42,139,.25),transparent 70%);pointer-events:none}
.bigcta>*{position:relative}
.bigcta h2{max-width:22ch;margin:0 auto 16px}
.bigcta p{max-width:52ch;margin:0 auto 26px}
.bigcta .actions{justify-content:center}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:32px var(--pad);background:var(--panel)}
.foot{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .fl{font-size:.84rem;color:var(--white)}
.foot nav{display:flex;gap:20px;font-size:.84rem}
.foot nav a{color:var(--white);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.foot nav a svg{width:16px;height:16px;stroke:var(--white);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.foot nav a:hover{color:var(--teal-hi)}
.foot nav a:hover svg{stroke:var(--teal-hi)}

/* ---------- contact / inquiry page ---------- */
.contact-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(60px,8vw,100px);display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(28px,4vw,48px);align-items:start}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr}}

/* left: form card */
.cf-card{border:1px solid var(--line);border-radius:8px;background:linear-gradient(170deg,rgba(67,220,225,.08),var(--panel) 55%);padding:clamp(24px,4vw,40px);position:relative;overflow:hidden}
.cf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-h)}

.field{margin-bottom:20px}
.field label{display:block;font-family:var(--display);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.field label .req{color:var(--plum-hi);margin-left:2px}
.field input[type="text"],
.field input[type="email"],
.field textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:13px 14px;transition:border-color .2s ease,box-shadow .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#5C616C}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-hi);box-shadow:0 0 0 3px rgba(67,220,225,.15);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

/* lightweight optional category chips (single-click, no descriptions) */
.arena-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.arena-chip input{position:absolute;opacity:0;pointer-events:none}
.arena-chip span{display:inline-block;cursor:pointer;font-size:.82rem;color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:8px 16px;background:var(--panel2);transition:border-color .2s ease,background .2s ease,color .2s ease}
.arena-chip input:checked + span{border-color:var(--teal-hi);background:rgba(67,220,225,.1);color:var(--white)}
.arena-chip input:focus-visible + span{outline:2px solid var(--teal-hi);outline-offset:2px}

.cf-submit{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.cf-note{font-size:.78rem;color:var(--dim)}

/* right: sidebar */
.cf-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.cf-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:24px}
.cf-panel h3{font-size:1rem;margin-bottom:14px}
.cf-check{list-style:none}
.cf-check li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:.87rem;color:var(--ink)}
.cf-check li:first-child{border-top:none}
.cf-check svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;stroke:var(--teal-hi);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.cf-panel.tone-plum{background:linear-gradient(170deg,rgba(224,108,220,.10),var(--panel) 60%)}
.cf-meta{list-style:none}
.cf-meta li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink)}
.cf-meta li:first-child{border-top:none}
.cf-meta svg{width:18px;height:18px;flex-shrink:0;stroke:var(--plum-hi);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cf-meta .lbl{color:var(--dim);font-size:.76rem;display:block;letter-spacing:.03em}

/* ---------- method page (stack, table, cta band) ---------- */
.max-prose{max-width:68ch;color:var(--dim)}
.section-off{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.stack-row{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(16px,3vw,32px);align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.stack-row:first-of-type{border-top:none}
.stack-num{font-family:var(--display-x);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);background:var(--grad-h);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stack-label{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-hi);font-weight:600;display:block;margin-bottom:6px}
.stack-q{font-family:var(--display);font-weight:600;color:var(--white);font-size:.98rem;line-height:1.45}
.stack-out{color:var(--dim);font-size:.92rem;line-height:1.5}
@media(max-width:760px){
  .stack-row{grid-template-columns:auto 1fr;gap:14px 18px}
  .stack-row>div:last-child{grid-column:2}
}

.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.tbl{width:100%;border-collapse:collapse;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.9rem}
.tbl th{font-family:var(--display);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:var(--panel2)}
.tbl td{color:var(--ink)}
.tbl td:first-child{font-weight:600;color:var(--white)}
.tbl tr:last-child td{border-bottom:none}

.cta-band{background:radial-gradient(600px 300px at 80% 0%,rgba(141,42,139,.22),transparent),var(--panel);border-top:1px solid var(--line);padding:clamp(40px,6vw,64px) var(--pad)}
.cta-band h2{font-size:clamp(1.4rem,3vw,2rem)}
.cta-band p{margin-top:8px}
.btn-light{background:var(--white);color:#0A0B0F}
.btn-light:hover{filter:brightness(.92)}

.todo{outline:1px dashed var(--plum-hi);outline-offset:3px}

/* ---------- about page ---------- */
.about-intro{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,52px);align-items:start}
@media(max-width:720px){.about-intro{grid-template-columns:1fr;justify-items:center;text-align:left}}

.about-figure{position:relative;width:clamp(168px,22vw,232px);height:clamp(168px,22vw,232px);flex-shrink:0}
.about-figure::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--blue-hi),var(--teal-hi),var(--plum-hi),var(--blue-hi));
  filter:blur(16px);opacity:.55;animation:auraSpin 9s linear infinite;z-index:0;
}
@keyframes auraSpin{to{transform:rotate(360deg)}}
.about-figure-ring{position:absolute;inset:0;border-radius:50%;background:var(--grad-h);padding:5px;z-index:1;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}
.about-figure-inner{position:relative;width:100%;height:100%;border-radius:50%;background:var(--panel2);overflow:hidden}
.about-figure-inner img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.about-figure-img{transform:scale(1.1)}
.about-figure-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--line)}
.about-figure-fallback svg{width:46%;height:46%;stroke:var(--dim);fill:none;stroke-width:1.3}
.about-name{font-family:var(--display-x);font-weight:700;color:var(--white);font-size:1.1rem;margin-bottom:4px}
.about-role{font-size:.82rem;color:var(--teal-hi);letter-spacing:.03em}
.about-bio p{margin-bottom:20px;font-size:.98rem;max-width:66ch}
.about-bio p:last-child{margin-bottom:0}

/* -- about page: path sections -- */
.path-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--teal-hi);margin-right:8px;vertical-align:-5px}
.path-icon svg{width:100%;height:100%}
.pub-list{margin:20px 0 24px;padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.pub-list h4{font-family:var(--display);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-hi);font-weight:700;margin-bottom:10px}
.pub-list ul{list-style:none;margin-bottom:10px}
.pub-list li{font-size:.88rem;color:var(--ink);padding:4px 0}
.pub-list a{color:var(--teal-hi)}
.scholar-links{font-size:.85rem;color:var(--dim)}
.scholar-links a{color:var(--teal-hi)}
@media (prefers-reduced-motion: reduce){
  .about-figure::before{animation:none}
}