/* ==========================================================================
   Syndric core design system
   Verbatim extract of the rules inlined in /index.html (tokens, section
   themes, header, buttons, hero atmosphere, living product stage, dark
   framed containers, tabs, cards, security rows, footer).
   /index.html still carries its own inline copy and is intentionally left
   untouched; new pages link this file instead of duplicating styles.
   ========================================================================== */
:root{
  --bg:#F6F6F2; --ink:#111112; --grey:#5F5F66; --soft:#98988F;
  --line:#E6E6E0; --card:#FFFFFF; --night:#0E0F12;
  --lime:#A6E635; --lime-soft:#E2F4C0; --lime-ink:#41560F;
  --maxw:1080px;
  --ease:cubic-bezier(.65,0,.35,1);
  --tunnel:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:#FAFAFA;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#FAFAFA;
  -webkit-font-smoothing:antialiased;line-height:1.45;font-size:16px;font-weight:500;letter-spacing:-.01em}

a{color:inherit;text-decoration:none}
img,svg{display:block}
:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px}
::selection{background:var(--lime-soft);color:#1F2B0C}

/* master site frame: now full-bleed. Sections paint their own theme across
   the whole viewport; the 1440px rails are drawn INSIDE each section via a
   centered ::after overlay, so gutters always match the section's theme. */
.site-layout-frame{width:100%;position:relative}

/* theme-aware full-bleed sections + inner rails */
.light-section{width:100%;background-color:#FAFAFA!important;color:#09090B!important}
.light-section::after{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(1440px,100%);pointer-events:none;z-index:0;
  border-left:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08)}
.light-section .grid-rail,.light-section .border-divider{border-color:rgba(0,0,0,.08)!important;background-color:rgba(0,0,0,.07)}
/* editorial typography: light sections drop the heavy display weight */
.light-section h2{font-weight:500;letter-spacing:-.03em;line-height:1.15}
.light-section h3{font-weight:500;letter-spacing:-.02em}
.light-section .sub{font-weight:400;font-size:16px;line-height:1.6;color:#52525B}
.light-section .badge{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#71717A}
.dark-section{width:100%;background-color:#0E0F12!important;color:#fff!important}
.dark-section::after{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(1440px,100%);pointer-events:none;z-index:0;
  border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
.dark-section .grid-rail,.dark-section .border-divider{border-color:rgba(255,255,255,.08)!important}

/* texture utilities: dot-matrix canvas, fading guide rails, ambient glow */
.dot-grid-bg{background-color:#0E0F12;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:20px 20px;background-position:center}
.dot-grid-light{background-color:#FAFAFA;
  background-image:radial-gradient(rgba(0,0,0,.07) 1px,transparent 1px);
  background-size:20px 20px;background-position:center}
.section-grid-lines{position:absolute;inset:0;pointer-events:none;z-index:1;
  display:flex;justify-content:space-between;max-width:1440px;margin:0 auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%)}
.grid-rail{width:1px;height:100%;background-color:rgba(255,255,255,.07)}
.light-section .grid-rail{background-color:rgba(0,0,0,.07)}
/* light feature section: paper canvas, crisp white cards with UI previews */
.light-feature-section{width:100%;background-color:#FAFAFA!important;padding:120px 0;
  border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
.lfwrap{max-width:1280px}
.light-section-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;
  color:#64748B;text-transform:uppercase;margin-bottom:16px}
.light-section-title{font-size:clamp(32px,4vw,48px);font-weight:500;letter-spacing:-.035em;
  color:#09090B;line-height:1.15;max-width:720px}
.light-section-subtitle{font-size:17px;font-weight:400;color:#52525B;margin-top:16px;max-width:640px}
.light-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  width:100%;max-width:1200px;margin:40px auto 0}
.light-feature-card{height:100%;display:flex;flex-direction:column;
  background-color:#FFFFFF!important;border:1px solid rgba(0,0,0,.08);border-radius:12px;
  padding:32px 24px;box-shadow:0 4px 20px -2px rgba(0,0,0,.05);transition:all .25s ease}
.light-feature-card .card-preview{flex:1}
@media (max-width:768px){
  .light-cards-grid{grid-template-columns:1fr}
}
.light-feature-card:hover{transform:translateY(-2px);border-color:rgba(0,0,0,.15)}
.light-feature-card h3{font-size:19px;font-weight:600;color:#09090B;letter-spacing:-.01em;margin-bottom:8px}
.light-feature-card>p{font-size:14.5px;color:#71717A;line-height:1.5}
.card-preview{background-color:#F4F4F5;border:1px solid rgba(0,0,0,.06);border-radius:8px;
  padding:20px;margin-bottom:24px;font-size:13px}
.prevrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;
  color:#09090B;border-bottom:1px solid rgba(0,0,0,.05)}
.prevrow:last-child{border-bottom:none}
.pv-ok{color:#3F6212;font-weight:600;font-size:12px}
.pv-warn{color:#B45309;font-weight:600;font-size:12px}
.pv-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.pv-badge.ok{background:#ECFCCB;color:#3F6212}
.pv-badge.warn{background:#FEF3C7;color:#B45309}
.condrow{display:flex;align-items:center;gap:10px;padding:6px 0;color:#09090B}
.cond-if,.cond-then{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:3px 8px;border-radius:6px}
.cond-if{background:#E4E4E7;color:#3F3F46}
.cond-then{background:#ECFCCB;color:#3F6212}
.qav{width:36px;height:36px;border-radius:50%;background:var(--lime-ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:1}
section{padding:152px 0 112px;border-top:1px solid var(--line);position:relative;overflow:hidden;z-index:2}
section.dark-section{border-top-color:rgba(255,255,255,.08)}
section:first-of-type{border-top:none}
section.tight{padding:100px 0 72px}

/* HERO ATMOSPHERE */
.hero{padding:96px 0 0;background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 35%,#F5F6EE 65%,#E9ECDC 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,rgba(65,86,15,.12) 0,rgba(65,86,15,.12) 1px,transparent 1px,transparent 24px);
  transform:rotateX(12deg) scale(1.08);transform-origin:top center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(0,0,0,.5) 65%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(0,0,0,.5) 65%,#000 100%)}
.heroglow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 45% at 50% 90%,rgba(186,222,110,.32),rgba(226,244,192,.14) 45%,transparent 75%)}

.badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--grey);
  background:#FFFFFF;border:1px solid #E6E7E2;border-radius:999px;padding:6px 13px;letter-spacing:.02em}
.badge::before{content:"✦";color:var(--lime-ink);font-size:11px}

/* announcement pill: a conic-gradient light ray circles the border forever */
.hero-pill{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--grey);border-radius:999px;padding:7px 16px;overflow:hidden;isolation:isolate;
  background:#E3E4DE;letter-spacing:.02em;transition:color .3s var(--ease)}
.hero-pill:hover{color:var(--ink);transition-duration:.05s}
.hero-pill::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:420px;height:420px;
  margin:-210px 0 0 -210px;
  background:conic-gradient(transparent 0deg,transparent 240deg,rgba(166,230,53,.15) 290deg,#A6E635 330deg,rgba(166,230,53,.15) 355deg,transparent 360deg);
  animation:pillspin 3s linear infinite}
@keyframes pillspin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.hero-pill::after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:999px;background:#FFFFFF}
.hero-pill .arr{color:var(--lime-ink);font-weight:700}
h1{font-size:clamp(38px,5.2vw,60px);font-weight:600;letter-spacing:-.055em;line-height:1.0;color:#1D1F23}
h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.024em;line-height:1.02;margin-top:18px}
h2.small{font-size:clamp(22px,2.4vw,28px);line-height:1.08}
h2 .dim, h1 .dim{color:var(--soft);font-weight:inherit}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.sub{margin-top:18px;font-size:17px;line-height:1.4;color:var(--grey);max-width:600px}
.shead{max-width:680px}

.btn{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;letter-spacing:-.16px;
  padding:12px 20px;border-radius:10px;cursor:pointer;border:none;font-family:inherit;
  transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease)}
.btn:hover{transition-duration:.05s;transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{opacity:.86}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost:hover{background:#F1F1EC}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  transition:background .35s ease,border-color .35s ease}
header.hdr-dark{background:rgba(13,14,17,.68);border-bottom-color:rgba(255,255,255,.08)}
header.hdr-dark .mark{color:#fff}
header.hdr-dark .navlinks a{color:#A7A9A3}
header.hdr-dark .navlinks a:hover{color:#fff}
header.hdr-dark .navphone{color:#9A9C96}
header.hdr-dark .navphone:hover{color:#fff}
header.hdr-dark .btn.primary{background:#fff;color:#0E0F12}
.nav{max-width:none;margin:0;display:flex;align-items:center;gap:44px;padding:14px 40px}
.mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;color:#0A0A0A}
.mark svg{display:block;height:38px;width:auto}
.mark .logo-icon{display:none}
.navlinks{display:flex;gap:22px;font-size:14.5px;color:var(--grey);font-weight:500;letter-spacing:-.14px}
.navlinks a{transition:color .3s var(--ease)}
.navlinks a:hover{color:var(--ink);transition-duration:.05s}
.navright{margin-left:auto;display:flex;align-items:center;gap:16px}
.navphone{font-size:13.5px;color:var(--grey)}
.navphone:hover{color:var(--ink)}
.nav .btn{padding:8px 14px;font-size:14px;letter-spacing:-.07px}

/* hero copy */
.herohead{text-align:center;display:flex;flex-direction:column;align-items:center;will-change:opacity,transform}
.herohead h1{margin-top:22px;max-width:900px;font-size:clamp(52px,6vw,84px);margin-bottom:20px;
  font-weight:500;letter-spacing:-.035em;line-height:1.15}
.herohead .sub{font-size:17px;font-weight:400;color:#8E9BAE;max-width:680px;margin:0 auto}
.herocta{display:flex;gap:12px;margin-top:56px;margin-bottom:58px;flex-wrap:wrap;justify-content:center}

/* ===== LIVING PRODUCT STAGE =====
   One persistent set of windows. A master timeline cycles four scenes
   (sync, detect, brief, ask); every window plays real work in each. */
.stagewrap{position:relative;width:100%;max-width:1300px;margin:0 auto;padding:12px 32px 150px;z-index:1;overflow:visible;
  transform-origin:50% 0;will-change:transform}
.oglow{position:absolute;width:420px;height:280px;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none;z-index:0;
  will-change:transform}
.oglow.g1{left:6%;top:18%;background:rgba(166,230,53,.5);animation:floatOrb 12s infinite ease-in-out}
.oglow.g2{right:4%;top:38%;background:rgba(226,244,192,.55);animation:floatOrb 15s infinite ease-in-out -5s}
@keyframes floatOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-25px,0) scale(1.15)}}

/* Attio composition: one dominant window, three satellites, one per zone.
   WhatsApp tucks BEHIND the window; terminal and watchdog float in front.
   Nothing extends below the dominant window's bottom edge. */
.fs{position:absolute;z-index:20;transition:transform .8s var(--tunnel),opacity .6s ease,filter .6s ease}
.fs-wa{top:-10px;left:-40px;width:240px;z-index:4}
.fs-term{left:-24px;bottom:165px;width:269px;z-index:20}
.fs-pos{top:120px;right:-36px;width:300px;z-index:20}

/* simultaneous stage: NOTHING dims or blurs. Every window stays sharp and
   keeps working; the featured windows lift with subtle spatial elevation. */
.stagewrap .fs,.stagewrap .mainwin{opacity:1;filter:none}
.stagewrap[data-scene] .fs{transform:scale(1) translateY(0)}
.stagewrap[data-scene="sync"] .fs-term,
.stagewrap[data-scene="sync"] .fs-pos,
.stagewrap[data-scene="detect"] .fs-donut,
.stagewrap[data-scene="detect"] .fs-bars,
.stagewrap[data-scene="brief"] .fs-wa,
.stagewrap[data-scene="ask"] .fs-wa,
.stagewrap[data-scene="ask"] .fs-term{transform:scale(1.02) translateY(-6px);z-index:30}
.stagewrap[data-scene="sync"] .fs-term .term,
.stagewrap[data-scene="ask"] .fs-term .term{border-color:rgba(166,230,53,.5)}
.stagewrap[data-scene="sync"] .fs-pos .sidepanel,
.stagewrap[data-scene="detect"] .fs-donut .sidepanel,
.stagewrap[data-scene="detect"] .fs-bars .sidepanel,
.stagewrap[data-scene="brief"] .fs-wa .sidepanel,
.stagewrap[data-scene="ask"] .fs-wa .sidepanel{border-color:rgba(166,230,53,.5);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.3)}
.stagewrap[data-scene="detect"] .mainwin,
.stagewrap[data-scene="brief"] .mainwin{border-color:rgba(166,230,53,.4)}
/* the WhatsApp card always stays tucked behind the dominant window */
.stagewrap[data-scene] .fs-wa{z-index:4}

/* default landing view shows only the dominant window; the satellite
   windows rise in once the user starts scrolling */
.stagewrap:not(.sats-in) .fs-wa,
.stagewrap:not(.sats-in) .fs-term,
.stagewrap:not(.sats-in) .fs-pos{opacity:0;transform:translateY(26px)!important;pointer-events:none}
.stagewrap.sats-in .fs-wa{transition-delay:0s}
.stagewrap.sats-in .fs-term{transition-delay:.08s}
.stagewrap.sats-in .fs-pos{transition-delay:.16s}

.tdots{display:flex;gap:6px}
.tdots span{width:10px;height:10px;border-radius:50%}
.tdots span:nth-child(1){background:#FF5F56}.tdots span:nth-child(2){background:#FFBD2E}.tdots span:nth-child(3){background:#27C93F}

.mainwin{position:relative;z-index:10;width:100%;max-width:1008px;margin:0 auto;background:#F5F6FA;border:1px solid #DCE1E9;border-radius:20px;overflow:hidden;cursor:grab;
  box-shadow:0 50px 100px -45px rgba(20,24,32,.4), 0 16px 40px -24px rgba(20,24,32,.22);
  transition:transform .8s var(--tunnel),border-color .6s ease}
.mwbar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #E3E7EE}
.mwbar .mtitle{font-size:12.5px;color:#7A7F72;font-weight:600}
.mwlive{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6B7280}
.mwlive i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(166,230,53,.8)}
.mwbody{display:flex;align-items:stretch}
.mwside{flex:none;width:186px;background:#FAFAFB;border-right:1px solid #E3E7EE;
  padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.mws-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--ink);padding:4px 8px 14px}
.mws-dot{width:10px;height:10px;border-radius:3px;background:var(--lime)}
.mws-item{font-size:13px;font-weight:500;color:#6B7280;padding:7px 10px;border-radius:8px;
  transition:background .3s var(--ease),color .3s var(--ease)}
.mws-item.on{background:#EEF1E7;color:var(--ink);font-weight:600}
.mws-foot{margin-top:auto;font-size:11px;color:#9AA0A6;padding:8px 10px 2px}
.mwcanvas{position:relative;flex:1;min-width:0;background:#fff;height:530px;
  background-image:radial-gradient(circle,#E2E5EC 1px,transparent 1px);background-size:22px 22px}

/* branch baselines table (view b) */
.btab{position:absolute;inset:20px 22px;display:flex;flex-direction:column;justify-content:center;
  font-size:12.5px;background:#fff;border:1px solid #E3E7EE;border-radius:12px;overflow:hidden}
.btr{display:grid;grid-template-columns:1fr .9fr .9fr 1.5fr 1fr;gap:8px;align-items:center;
  padding:10px 16px;border-bottom:1px solid #EEF0F4;color:#3F4149}
.btr:last-child{border-bottom:none}
.btr.bth{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8A8F98;background:#FAFAFB;font-weight:600}
.btr .up{color:#3F6212;font-weight:600}
.btr .dn{color:#B45309;font-weight:600}
.bpill{font-size:10.5px;font-weight:600;font-style:normal;padding:2px 9px;border-radius:999px;background:#F1F2F4;color:#5A5F68}
.bpill.best{background:#ECFCCB;color:#3F6212}
.bpill.watch{background:#FEF3C7;color:#B45309}
.bpill.flag{background:#FEE2E2;color:#B91C1C}
.think{color:#9AA0A6}
.think i{font-style:normal;animation:thinkdot 1.2s infinite}
.think i:nth-child(2){animation-delay:.2s}
.think i:nth-child(3){animation-delay:.4s}
@keyframes thinkdot{0%,100%{opacity:.2}50%{opacity:1}}

/* ask view (view d): question, thinking, verified answer */
.askpane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:36px 44px}
.ask-q{align-self:flex-end;background:#F1F2F4;border:1px solid #E3E7EE;border-radius:14px 14px 4px 14px;
  padding:10px 16px;font-size:14px;font-weight:500;color:var(--ink);opacity:0}
.vd.on .ask-q{animation:askin .4s .15s var(--ease) both}
.ask-think{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:#9AA0A6;opacity:0}
.ask-think span{width:5px;height:5px;border-radius:50%;background:#B9BDC4;animation:thinkdot 1s infinite}
.ask-think span:nth-child(2){animation-delay:.18s}
.ask-think span:nth-child(3){animation-delay:.36s;margin-right:4px}
.vd.on .ask-think{animation:askthink 2.3s .5s both}
.ask-a{align-self:flex-start;max-width:420px;background:#fff;border:1px solid #E3E7EE;border-left:3px solid var(--lime);
  border-radius:4px 14px 14px 14px;padding:14px 18px;font-size:13.5px;line-height:1.5;color:#3F4149;opacity:0;
  box-shadow:0 10px 30px -14px rgba(20,24,32,.18)}
.ask-a b{color:var(--ink)}
.vd.on .ask-a{animation:askin .5s 2.7s var(--ease) both}
.ask-src{margin-top:10px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:10.5px;color:#9AA0A6}
@keyframes askin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes askthink{0%{opacity:0}10%{opacity:1}82%{opacity:1}100%{opacity:0}}

/* canvas views: the main window navigates between three states */
.mview{position:absolute;inset:0;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mview.on{opacity:1;transform:none}
.mview svg.flows{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;background:#fff;border:1px solid #E2E6ED;border-radius:12px;padding:10px 14px;
  box-shadow:0 10px 24px -14px rgba(20,24,32,.28)}
.node b{display:block;font-size:13px;font-weight:600;color:#1D1F23;letter-spacing:-.01em}
.node small{display:block;font-size:11px;color:#98988F;margin-top:2px}
.node.brain{border-color:rgba(166,230,53,.7);box-shadow:0 0 0 3px rgba(166,230,53,.18), 0 12px 26px -14px rgba(20,24,32,.3)}
.node.brain b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--lime);margin-right:7px}
.node.brief{background:var(--lime-soft);border-color:rgba(166,230,53,.5)}
.node.brief b{color:#2A3813}
.node.brief small{color:#5E6E44}
.mview.va .flows path{stroke-dasharray:6 10;animation:dashflow 1.1s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-16}}
.mview.va .node.brain{animation:brainpulse 1.6s ease-in-out infinite}
@keyframes brainpulse{0%,100%{box-shadow:0 0 0 3px rgba(166,230,53,.18),0 12px 26px -14px rgba(20,24,32,.3)}
  50%{box-shadow:0 0 0 6px rgba(166,230,53,.28),0 12px 26px -14px rgba(20,24,32,.3)}}

.excpanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,86%);
  background:#fff;border:1px solid #E2E6ED;border-radius:14px;box-shadow:0 18px 44px -20px rgba(20,24,32,.3);overflow:hidden}
.exchead{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #EEF0F4;
  font-size:13px;font-weight:600;color:#1D1F23}
.exchead .q{color:#98988F;font-weight:500}
.excrow{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid #F4F5F8;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11.5px;color:#5F5F66}
.excrow .warn{color:#B96A00;font-weight:600}
.excnote{padding:10px 16px;font-size:11.5px;color:var(--lime-ink);background:rgba(166,230,53,.1)}

.briefdoc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,86%);
  background:#fff;border:1px solid rgba(166,230,53,.5);border-radius:14px;
  box-shadow:0 0 0 4px rgba(166,230,53,.12),0 18px 44px -20px rgba(20,24,32,.3);padding:16px 18px}
.bd-head{font-size:13.5px;font-weight:700;color:#1D1F23;margin-bottom:10px}
.bd-head .q{color:#98988F;font-weight:500}
.bd-line{font-size:12.5px;color:#5F5F66;line-height:1.6}
.bd-ok{margin-top:10px;font-size:11.5px;font-weight:600;color:var(--lime-ink)}

/* terminal: fixed-size flex column, content streams inside, never resizes */
.term{position:relative;width:100%;height:285px;display:flex;flex-direction:column;overflow:hidden;
  background:#151515;border:1px solid #343434;border-radius:14px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11.5px;line-height:1.9;color:#E8E8E4;
  transform:var(--drag,translate(0,0));
  box-shadow:0 0 15px rgba(166,230,53,.3), 0 20px 40px rgba(0,0,0,.4)}
.term .thead{flex:none;display:flex;align-items:center;justify-content:space-between;color:#75757C;font-size:10.5px;
  letter-spacing:.06em;padding:12px 16px 6px}
.t-body{flex:1;overflow-y:auto;scroll-behavior:smooth;padding:2px 16px 14px}
.t-body::-webkit-scrollbar{width:0}
.t-line{white-space:pre-wrap;word-break:break-word}
.t-line .pr2{color:#75757C}
.t-caret{display:inline-block;width:7px;height:12px;margin-left:2px;background:#9FB284;vertical-align:middle;
  animation:tblink 1s steps(1) infinite}
@keyframes tblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.t-line.think{color:#B9C4A8}
.t-line.think .td{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-right:8px;
  animation:tpulse 1.2s infinite ease-in-out;vertical-align:middle}
@keyframes tpulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.t-line.log{opacity:0;transition:opacity .35s var(--ease);color:#C9C9C4}
.t-line.log.show{opacity:1}
.t-line.log i{font-style:normal;color:var(--lime);margin-right:7px}
.t-line .q{color:#7C7C82}
.t-badge{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:6px;font-size:11px;
  background:rgba(166,230,53,.14);border:1px solid rgba(166,230,53,.4);color:var(--lime)}
.term.drag{transform:var(--drag,translate(0,0)) perspective(1000px) rotateY(6deg) rotateX(3deg) translateZ(40px)}

/* WhatsApp panel: fixed-height body, messages stream in */
.sidepanel{position:relative;width:100%;background:#fff;border:1px solid #DCE1E9;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(20,24,32,.35)}
.sp-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #EAEDF2;font-size:12px;font-weight:600;color:#1D1F23}
.sp-head .d{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:livePulse 2s infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(166,230,53,.5)}70%{box-shadow:0 0 0 6px rgba(166,230,53,0)}}
.wa-body{height:115px;overflow-y:auto;scroll-behavior:smooth;display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;background:#FAFAF7}
.wa-body::-webkit-scrollbar{width:0}
.wtime{align-self:center;font-size:10.5px;color:var(--soft)}
.wb{max-width:92%;padding:8px 11px;border-radius:12px;font-size:12px;line-height:1.5;white-space:pre-line;
  animation:rise .25s var(--ease)}
.wb .who{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lime-ink);margin-bottom:2px;white-space:normal}
.wb.ai{align-self:flex-start;background:var(--lime-soft);color:#2A3813;border-bottom-left-radius:4px}
.wb.own{align-self:flex-end;background:#EDEDEA;color:var(--ink);border-bottom-right-radius:4px}
.wb.own .who{color:#98988F}
.wb.dimmed{opacity:.55}
.wtyping{display:flex;gap:4px;padding:9px 11px;background:var(--lime-soft);border-radius:12px;border-bottom-left-radius:4px;
  align-self:flex-start;width:max-content}
.wtyping span{width:5px;height:5px;border-radius:50%;background:#7fa93e;animation:blink 1.1s infinite}
.wtyping span:nth-child(2){animation-delay:.18s}.wtyping span:nth-child(3){animation-delay:.36s}

/* live data cards + drag system */
.drag{cursor:grab;transform:var(--drag,translate(0,0));
  transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .6s ease,box-shadow .6s ease}
.drag.dragging{cursor:grabbing;transition:none!important}
.pos-body{height:126px;overflow:hidden}
.sidepos .row{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-bottom:1px solid #F0F2F5;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11px;color:#5F5F66;animation:rise .3s var(--ease)}
.sidepos .ok{color:#3E7A2E}
.sidepos .warn{color:#B96A00}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* ===== DARK BAND ===== */
.night{background:var(--night);color:#F2F2F0;border-top:none}
.night .badge{background:#191A16;border-color:#26271F;color:#B9B9B4}
.night .badge::before{color:var(--lime)}
.night .sub{color:#A2A2A0}
.night h2 .dim{color:#57575C}
.night ::selection{background:var(--lime-ink);color:#fff}
.night::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 24px)}
.context-container{width:min(1392px,94vw);margin:0 auto;padding:0;position:relative;z-index:1;background-color:#0E0F12;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:20px 20px;background-position:center;
  border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.context-container::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 64px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.tabs-sec{padding:112px 0 152px}
.braingrid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:0;min-height:680px}
.braincol{display:flex;flex-direction:column;justify-content:space-between;gap:64px;padding:72px 56px}
.braincol .shead{max-width:520px}
.tabs-sec .siglist{max-width:460px}
.pillbtn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:28px;padding:10px 18px;border-radius:999px;
  font-size:14px;font-weight:600;color:#EDEDEA;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.pillbtn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.pillbtn .arr{color:var(--lime)}
.sigitem{padding:16px 0 0;border-top:1px solid rgba(255,255,255,.1);cursor:pointer}
.sigitem h3{font-size:19px;color:#6E6E72;transition:color .3s var(--ease)}
.sigitem.on h3{color:#fff}
.sigitem .sh{display:none;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lime-ink);margin-top:6px}
.sigitem.on .sh{display:block;color:var(--lime)}
.sigitem p{font-size:14.5px;line-height:1.45;color:#A8A8A4;max-width:420px;margin-top:6px;display:none}
.sigitem.on p{display:block;animation:enterblur .3s var(--ease) both}
@keyframes enterblur{0%{opacity:0;filter:blur(8px);transform:translateY(6px)}100%{opacity:1;filter:blur(0);transform:none}}
.sigbar{display:block;height:2px;background:rgba(255,255,255,.1);margin:14px 0 0;border-radius:2px;overflow:hidden}
.sigbar i{display:block;height:100%;width:0;background:var(--lime)}

.stage{position:relative;overflow:hidden;border-left:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;padding:48px 32px}
/* findings */
/* findings: single-column numbered documentation list */
.findrows{display:block;max-width:900px;margin-top:40px}
.frow{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(10,10,10,.08);
  font-size:14.5px;line-height:1.5;color:var(--grey);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.frow.in{opacity:1;transform:none}
.frow b{color:var(--ink)}
.frow .fnum{flex:none;font-family:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-size:12px;font-weight:700;color:var(--lime-ink);margin-top:2px}
.findnote{margin-top:32px;font-size:15px;color:var(--grey);max-width:640px}
.findnote b{color:var(--ink)}

/* honesty */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.layer{border-top:2px solid var(--ink);padding-top:18px}
.layer .n{font-size:13px;font-weight:700;color:var(--lime-ink);margin-bottom:8px}
.layer h3{margin-bottom:6px}
.layer p{font-size:14.5px;color:var(--grey)}
.honestline{margin-top:36px;font-size:16px;color:var(--grey);max-width:640px}
.honestline b{color:var(--ink)}
/* limits + security */
/* limits + security: contained panels on textured paper */
#security::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,rgba(10,10,10,.04) 0,rgba(10,10,10,.04) 1px,transparent 1px,transparent 8px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 32%,transparent 68%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 32%,transparent 68%,#000 100%)}
#security .badge{font-family:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.06em}
.duo{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.duo>div{background:#FFFFFF;border:1px solid rgba(10,10,10,.08);border-radius:19px;
  box-shadow:0 18px 44px -28px rgba(10,10,10,.18);padding:36px 34px}
.duo .limits{margin-top:24px;max-width:none}
.limit{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(10,10,10,.07);
  font-size:14px;line-height:1.5;color:var(--grey);font-weight:500;letter-spacing:-.01em}
.limit:last-child{border-bottom:none;padding-bottom:0}
.limit b{color:var(--ink)}
.limit .lm{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  margin-top:1px;background:var(--lime-soft);color:var(--lime-ink);border-radius:7px;
  font-family:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;font-weight:700}
.duo .specs{margin-top:24px}
.specs{display:grid;grid-template-columns:1fr}
.spec{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;
  border-bottom:1px solid rgba(10,10,10,.07);font-size:14px;letter-spacing:-.01em}
.spec:last-child{border-bottom:none;padding-bottom:0}
.spec .k{color:var(--grey);font-weight:500}
.spec .v{font-weight:600;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.schip{flex:none;display:inline-flex;align-items:center;gap:6px;font-style:normal;
  background:var(--lime-soft);color:var(--lime-ink);border-radius:999px;padding:3px 10px;
  font-family:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.schip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime-ink)}
/* rows fade up on scroll-into-view (JS adds .in, 150ms stagger) */
.limit,.spec{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .3s ease}
.limit.in,.spec.in{opacity:1;transform:none}
/* cta */
/* footer: unified warm-charcoal architectural grid (Attio-style) */
.site-footer{background:#0D0E12;border-top:1px solid rgba(255,255,255,.08);
  min-height:100vh;display:flex;flex-direction:column}
.footinner{width:100%;max-width:1440px;margin:0 auto;flex:1;display:flex;flex-direction:column;
  border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
.prefoot{position:relative;overflow:hidden;margin-top:0;padding:100px 32px 80px;text-align:center;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.08);background-color:#0D0E12;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:20px 20px;background-position:center}
.prefoot::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:1000px;height:320px;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 100% 100% at 50% 100%,
    rgba(166,230,53,.14) 0%,rgba(166,230,53,.05) 40%,transparent 75%);
  filter:blur(60px)}
.prefoot>*{position:relative;z-index:2}
.prefoot .section-grid-lines{z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%)}
.pfh{font-size:clamp(36px,5vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.05;color:#fff;max-width:760px;margin:0 auto}
.pfs{font-size:16px;color:#8E9BAE;margin:16px auto 32px;max-width:480px}
.pfbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn.fwhite{background:#fff;color:#0E0F12}
.btn.fwhite:hover{opacity:.88}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:0;border-bottom:1px solid rgba(255,255,255,.08)}
.fgcell{border-right:1px solid rgba(255,255,255,.08);padding:48px 32px}
.fgcell:last-child{border-right:none}
.fgcell h5{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748B;margin-bottom:16px}
.fgcell a{display:block;font-size:13px;color:#94A3B8;margin-bottom:10px;transition:color .15s ease}
.fgcell a:hover{color:#fff}
.fmark,.fgcell a.fmark,.fgcell a.fmark:hover{color:#fff}
.brandcell p{font-size:14px;color:#8E9BAE;margin:12px 0 18px;max-width:240px}
.brandcell .fmark{display:inline-flex}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;
  font-size:12px;color:#525E6F;flex-wrap:wrap;gap:8px}
.ftags{display:inline-flex;align-items:center;gap:10px}
.ftags i{font-style:normal;opacity:.5}
.flegal{display:flex;flex-direction:column;gap:3px;line-height:1.5;color:#9AA091}

/* case study stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
#proof .stats{grid-template-columns:repeat(4,1fr)} /* four approved figures, one row */
.stat{border-radius:19px;padding:24px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 4px 20px -2px rgba(10,10,10,.06);
  transition:transform .3s var(--ease)}
.stat:hover{transform:translateY(-3px);transition-duration:.15s}
.stat .big{font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .lab{font-size:14px;font-weight:500;letter-spacing:-.14px;margin-top:10px;opacity:.9}
/* proof stats: tonal ramp, lime and black shades only */
.stat.t1{background:#0A0A0A;color:var(--bg)}
.stat.t1 .big{color:var(--lime)}
.stat.t2{background:#1A1F0E;color:var(--bg)}
.stat.t2 .big{color:var(--lime)}
.stat.t3{background:var(--lime);color:#0A0A0A}
.stat.t4{background:#C4EE7A;color:#1A1F0E}
.stat.t4 .big{color:#0A0A0A}
.stat.t5{background:var(--lime-soft);color:#1A1F0E}
.stat.t5 .big{color:var(--lime-ink)}
.stat.t6{background:var(--lime-ink);color:var(--lime-soft)}
.stat.t6 .big{color:var(--lime)}
.casenote{margin-top:34px;font-size:15.5px;color:var(--grey);max-width:660px}
.casenote b{color:var(--ink)}

@media (max-width:1100px){
  section{padding:112px 0 88px}
  section.tight{padding:84px 0 60px}
  .tabs-sec{padding:96px 0 120px}
  .braincol{padding:56px 40px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .fgcell{border-bottom:1px solid rgba(255,255,255,.08)}
  .brandcell{grid-column:1/-1;border-right:none}
  .fgcell:nth-child(2n+1){border-right:none}
}
@media (max-width:900px){
  .navlinks,.navphone{display:none}
  .hero{padding:72px 0 0}
  .duo,.braingrid{grid-template-columns:1fr}
  .duo{gap:40px}
  .braingrid{min-height:0}
  .braincol{gap:48px}
  .stage{border-left:none;border-top:1px solid rgba(255,255,255,.08)}
  .layers{grid-template-columns:1fr;gap:24px}
  .stats,#proof .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stagewrap{padding:12px 24px 72px}
  .fs-wa,.fs-pos,.oglow{display:none}
  .fs-term{position:static;width:100%;margin-top:14px;opacity:1!important;filter:none!important;transform:none!important}
  .mainwin{width:100%}
  .mwside{display:none}
  .mwcanvas{height:300px}
  .btr{grid-template-columns:1fr .9fr .9fr 1fr;font-size:11.5px}
  .btr span:nth-child(4){display:none}
  .btr.bth span:nth-child(4){display:none}
  .askpane{padding:20px}
  .stage{min-height:400px}
}
@media (max-width:700px){
  section{padding:88px 0 72px}
  section.tight{padding:64px 0 48px}
  .wrap{padding:0 24px}
  .nav{padding:14px 24px}
  .tabs-sec{padding:80px 0 100px}
  .stage{min-height:340px;padding:32px 20px}
  .footer-grid{grid-template-columns:1fr}
  .fgcell{border-right:none}
  .duo>div{padding:26px 22px}
  .prefoot{padding:64px 24px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion: reduce){
  .oglow,.think i,.ask-think span{animation:none}
  .limit,.spec,.frow{opacity:1;transform:none;transition:none}
  .vd .ask-q,.vd .ask-a{opacity:1;animation:none}
  .vd .ask-think{display:none}
  .stagewrap:not(.sats-in) .fs-wa,
  .stagewrap:not(.sats-in) .fs-term,
  .stagewrap:not(.sats-in) .fs-pos{opacity:1;transform:none!important;pointer-events:auto}
  .sigitem p{display:block}
  .sigitem .sh{display:block}
  .sigitem h3{color:#fff}
  .sigbar i{width:100%!important;opacity:.3}
  .t-caret,.t-line.think .td{animation:none}
  .t-line.log{opacity:1;transition:none}
  .mview{transition:none}
  .mview.va .flows path,.mview.va .node.brain{animation:none}
  .sp-head .d,.hero-pill::before{animation:none}
  .stagewrap[data-scene] .fs,.stagewrap[data-scene] .mainwin{opacity:1!important;filter:none!important;transform:none!important}
  .drag{transition:none}
}