/* =====================================================================
   The Architect Array — landing page
   Faithful recreation of the Claude Design prototype (Agent-0 Landing Page, v2).
   Accent is tweakable via the --accent custom property below.
   ===================================================================== */

:root{
  --accent:#3b6fe0;
  --teal:#14b89a;
  --bg:#0a0a0a;
  --text:#f4f4f5;
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',system-ui,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.preloading{overflow:hidden;}
::selection{background:rgba(59,111,224,.35)}
a{color:inherit}
img,svg{display:block}

/* root wrapper — positioning context so ambient glows are clipped by overflow-x */
.page{position:relative; background:var(--bg); min-height:100vh; overflow-x:hidden;}

/* ---------- animations ---------- */
@keyframes aa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes aa-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.04)}}
@keyframes aa-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes aa-pop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:#0a0a0a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:24px; transition:opacity .5s ease;
}
.preloader.is-hiding{opacity:0;}
.preloader.is-done{display:none;}
.preloader-logo{animation:aa-pulse 1.5s ease-in-out infinite;}
.preloader-op{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:clamp(13px,3.4vw,15px); color:#6a6a72; letter-spacing:-.01em; text-align:center;}
.pre-op{font-weight:600;}
.preloader-array{display:flex; align-items:center; gap:8px; font-family:ui-monospace,monospace; font-size:clamp(13px,3.6vw,16px); flex-wrap:wrap; justify-content:center; max-width:90vw;}
.pre-bracket{color:var(--accent); font-size:1.5em; font-weight:700; line-height:1;}
.chip{padding:5px 11px; border-radius:8px; font-weight:600; line-height:1; animation:aa-pop .3s ease both;}
.chip-normal{background:color-mix(in oklab, var(--accent), transparent 84%); color:var(--accent);}
.chip-add{background:var(--accent); color:#fff; box-shadow:0 4px 14px color-mix(in oklab, var(--accent), transparent 60%);}
.chip-remove{background:rgba(239,68,68,.16); color:#ef4444; text-decoration:line-through;}

/* ---------- ambient glow ---------- */
.ambient-glow{
  position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:1100px; height:700px;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--accent), transparent 78%), transparent 70%);
  pointer-events:none; filter:blur(8px); z-index:0;
}

/* ---------- hero 3D field (three.js, index.html only) ----------
   Sits behind the hero at z-index 0 (hero content is z-index 1, nav 50).
   Invisible until the first WebGL frame renders (.is-on), then eases in;
   the mask fades the field out before the products section. */
.hero-3d{
  position:absolute; top:0; left:0; right:0; height:min(110vh, 980px);
  z-index:0; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.8s ease;
  -webkit-mask-image:linear-gradient(to bottom, #000 58%, transparent 95%);
  mask-image:linear-gradient(to bottom, #000 58%, transparent 95%);
}
.hero-3d.is-on{opacity:1;}
.hero-3d canvas{display:block; width:100%; height:100%;}

/* ---------- shared layout ---------- */
.section{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(56px,9vw,80px) clamp(20px,5vw,40px);}
.section-narrow{position:relative; z-index:1; max-width:var(--maxw); margin:40px auto; padding:0 clamp(20px,5vw,40px);}
.section-head{margin-bottom:54px; max-width:640px;}
.section-head-center{text-align:center; max-width:none; margin-left:auto; margin-right:auto;}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
.section-title{font-size:clamp(28px,4.6vw,42px); line-height:1.08; font-weight:800; letter-spacing:-.03em; margin-top:16px; text-wrap:balance;}
.accent{color:var(--accent);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:700; border-radius:12px; border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  cursor:pointer;
}
.btn-sm{font-size:14px; padding:10px 18px; border-radius:10px;}
.btn-md{font-size:14.5px; padding:12px 20px; border-radius:11px;}
.btn-lg{font-size:15.5px; padding:15px 26px;}

.btn-accent{background:var(--accent); color:#fff; box-shadow:0 6px 20px color-mix(in oklab, var(--accent), transparent 65%);}
.btn-accent.btn-lg{box-shadow:0 10px 34px color-mix(in oklab, var(--accent), transparent 62%);}
.btn-accent:hover{background:color-mix(in oklab, var(--accent), white 12%);}

.btn-ghost{background:rgba(255,255,255,.04); color:var(--text); font-weight:600; border-color:rgba(255,255,255,.14);}
.btn-ghost:hover{background:rgba(255,255,255,.08);}

.btn-dark{background:#0a0a0a; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.3);}
.btn-translucent{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.3);}
.btn-translucent:hover{background:rgba(255,255,255,.26);}

.btn-lift:hover{transform:translateY(-2px);}

/* Disabled state — Agent-0 is in alpha testing, not yet downloadable. */
.btn.is-disabled,.btn:disabled{cursor:not-allowed; opacity:.5; box-shadow:none; pointer-events:none; transform:none;}

.link-arrow{display:inline-flex; align-items:center; gap:6px; color:var(--accent); text-decoration:none; font-weight:700; font-size:14.5px; margin-top:18px; transition:gap .18s ease;}
.link-arrow:hover{gap:10px;}
.link-quiet{display:inline-flex; align-items:center; gap:6px; color:#d4d4dc; text-decoration:none; font-size:14.5px; font-weight:600; padding:12px 14px; transition:color .18s ease;}
.link-quiet:hover{color:#fff;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:16px clamp(20px,5vw,40px);
  backdrop-filter:blur(14px); background:rgba(10,10,10,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text);}
.logo-mark{display:flex; flex:none;}
.brand-name{font-weight:800; font-size:16px; letter-spacing:-.02em;}
.nav-right{display:flex; align-items:center; gap:16px;}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-link{color:#b6b6bd; text-decoration:none; font-size:14.5px; font-weight:500; transition:color .18s ease;}
.nav-link:hover{color:var(--text);}

/* hamburger (hidden until <=860px) */
.burger{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  cursor:pointer; flex:none; padding:0;
}
.nav-menu{
  position:absolute; top:100%; left:0; right:0;
  background:rgba(12,12,14,.97); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px clamp(20px,5vw,40px) 18px; flex-direction:column;
}
.nav-menu[hidden]{display:none;}
.nav-menu:not([hidden]){display:flex;}
.nav-menu-link{color:#cfcfd6; text-decoration:none; font-size:16px; font-weight:600; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.05);}
.nav-menu-link:last-child{border-bottom:none;}

@media (max-width:860px){
  #aa-navlinks{display:none !important;}
  .burger{display:inline-flex !important;}
}
@media (min-width:861px){
  .nav-menu{display:none !important;}   /* never show dropdown on desktop */
}

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,8vw,90px) clamp(20px,5vw,40px) 70px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,5vw,48px); align-items:center;
}
.hero-title{font-size:clamp(38px,6.8vw,62px); line-height:1.04; font-weight:800; letter-spacing:-.035em; margin-bottom:24px; text-wrap:balance;}
.hero-sub{font-size:clamp(16px,2.2vw,18.5px); line-height:1.6; color:#aeaeb6; max-width:520px; margin-bottom:36px; text-wrap:pretty;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-trust{display:flex; align-items:center; gap:20px; margin-top:40px; color:#76767e; font-size:13.5px; font-weight:500; flex-wrap:wrap;}
.hero-trust-item{display:flex; align-items:center; gap:7px;}

/* phone mockup */
.hero-phone-wrap{display:flex; justify-content:center; position:relative;}
.phone-glow{position:absolute; width:330px; height:330px; border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--accent), transparent 72%), transparent 70%); filter:blur(20px);}
.phone{
  position:relative; width:286px; height:580px; max-width:100%; border-radius:42px;
  background:#161618; border:1px solid rgba(255,255,255,.1); padding:11px;
  box-shadow:0 40px 90px rgba(0,0,0,.6); animation:aa-float 6s ease-in-out infinite;
}
.phone-notch{position:absolute; top:24px; left:50%; transform:translateX(-50%); width:96px; height:24px; background:#0a0a0a; border-radius:0 0 14px 14px; z-index:3;}
.phone-screen{
  width:100%; height:100%; border-radius:32px; overflow:hidden; background:#0d0d0f; position:relative;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 11px, transparent 11px 22px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.phone-label{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; color:#6a6a72; letter-spacing:.02em;}
.phone-dims{font-family:ui-monospace,monospace; font-size:10px; color:#4a4a52;}

/* ---------- trust line ---------- */
.trust-line{max-width:var(--maxw); margin:0 auto; padding:8px clamp(20px,5vw,40px) 40px; text-align:center;}
.trust-line p{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:#5c5c64; font-weight:600;}

/* ---------- cards ---------- */
.card{background:#111113; border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:30px; transition:border-color .2s ease, background .2s ease;}
.card:hover{border-color:color-mix(in oklab, var(--accent), transparent 55%); background:#141417;}
.card-pad{padding:34px;}

.features-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;}
.feature-icon{
  width:46px; height:46px; border-radius:12px;
  background:color-mix(in oklab, var(--accent), transparent 86%);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
/* Otis brand icon (real app asset, assets/otis.png) — self-contained circular badge.
   Square-cropped asset + object-fit:contain = no distortion; transparent container, no blue tint/glow. */
.feature-icon.otis-icon{background:transparent; box-shadow:none;}
.feature-icon.otis-icon img{width:100%; height:100%; object-fit:contain; display:block;}
.chat-avatar.otis-avatar{background:transparent;}
.chat-avatar.otis-avatar img{width:100%; height:100%; object-fit:contain; display:block;}
.feature-title{font-size:19px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px;}
.feature-text{font-size:15px; line-height:1.62; color:#9a9aa2;}
.feature-text-bright{color:#c3ccdd;}

.card-otis{
  background:linear-gradient(155deg, color-mix(in oklab, var(--accent), transparent 80%), #111113 60%);
  border:1px solid color-mix(in oklab, var(--accent), transparent 60%);
  display:flex; flex-direction:column; justify-content:space-between;
}
.card-otis:hover{border-color:color-mix(in oklab, var(--accent), transparent 60%); background:linear-gradient(155deg, color-mix(in oklab, var(--accent), transparent 80%), #111113 60%);}

/* ---------- otis band ---------- */
.otis-band{
  background:linear-gradient(135deg, #0e1322, #111113);
  border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:clamp(28px,5vw,56px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,48px); align-items:center;
  position:relative; overflow:hidden;
}
.otis-band-glow{position:absolute; right:-120px; top:-120px; width:420px; height:420px; background:radial-gradient(circle, color-mix(in oklab, var(--accent), transparent 70%), transparent 70%); filter:blur(20px); pointer-events:none;}
.otis-copy{position:relative;}
.otis-title{font-size:clamp(30px,5vw,40px); line-height:1.08; font-weight:800; letter-spacing:-.03em; margin:16px 0 18px;}
.otis-sub{font-size:17px; line-height:1.62; color:#aeaeb6; max-width:460px; margin-bottom:28px; text-wrap:pretty;}
.otis-points{display:flex; flex-direction:column; gap:14px;}
.otis-point{display:flex; align-items:center; gap:12px; font-size:15px; color:#d4d4dc;}
.dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}

/* chat mockup */
.chat{
  position:relative; background:#0c0c0e; border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.chat-head{display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.06);}
.chat-avatar{width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:none;}
.chat-name{font-size:14px; font-weight:700;}
.chat-status{font-size:11.5px; color:#34d399;}
.bubble{max-width:80%; padding:11px 14px; font-size:13.5px; line-height:1.5;}
.bubble-in{align-self:flex-start; max-width:78%; background:#1b1b20; border-radius:14px 14px 14px 4px; color:#dcdce2;}
.bubble-in:last-of-type{max-width:80%;}
.bubble-out{align-self:flex-end; max-width:78%; background:var(--accent); border-radius:14px 14px 4px 14px; color:#fff;}
.chat-compose{display:flex; gap:8px; align-items:center; margin-top:2px;}
.chat-input{flex:1; height:38px; border-radius:10px; background:#15151a; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; padding:0 13px; font-size:12.5px; color:#5c5c64; font-family:ui-monospace,monospace;}
.chat-send{width:38px; height:38px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:none;}

/* ---------- how it works ---------- */
.how-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;}
.step-num{font-size:14px; font-weight:800; color:var(--accent); font-family:ui-monospace,monospace; margin-bottom:18px;}
.step-title{font-size:21px; font-weight:700; margin-bottom:10px;}

/* ---------- products ---------- */
.products-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px;}
.product{border-radius:24px; padding:clamp(26px,4vw,40px); position:relative; overflow:hidden;}
.product-live{background:linear-gradient(160deg,#12131a,#111113); border:1px solid color-mix(in oklab, var(--accent), transparent 65%);}
.product-dev{background:#0f0f11; border:1px solid rgba(255,255,255,.07);}
.product-glow{position:absolute; right:-80px; top:-80px; width:260px; height:260px; background:radial-gradient(circle, color-mix(in oklab, var(--accent), transparent 75%), transparent 70%); filter:blur(10px);}
.product-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; position:relative; gap:12px;}
.product-brand{display:flex; align-items:center; gap:11px;}
.product-name{font-size:22px; font-weight:800; letter-spacing:-.02em;}
.product-name-muted{color:#cfcfd6;}
.product-icon{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none;}
.product-icon-teal{border:1px solid rgba(20,184,154,.3); background:rgba(20,184,154,.1);}
.product-text{font-size:16px; line-height:1.6; color:#aeaeb6; margin-bottom:24px; position:relative;}
.product-text-muted{color:#8e8e96;}
.product-actions{display:flex; gap:12px; flex-wrap:wrap; position:relative; align-items:center;}
.product-preview{position:relative; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 11px, transparent 11px 22px); border:1px dashed rgba(255,255,255,.12); border-radius:14px; padding:22px; text-align:center;}
.product-preview span{font-family:ui-monospace,monospace; font-size:12px; color:#6a6a72;}

/* Status labels — plain text, deliberately not pill-shaped. */
.tag{font-size:11.5px; font-weight:700; letter-spacing:.08em; white-space:nowrap; flex:none; text-transform:uppercase;}
.tag-live{color:#34d399;}
.tag-dev{color:#c8a24a;}

/* ---------- final CTA ---------- */
.cta{
  background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), black 28%));
  border-radius:28px; padding:clamp(44px,7vw,72px) clamp(24px,5vw,56px); text-align:center; position:relative; overflow:hidden;
}
.cta-stripes{position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 18px, transparent 18px 36px); pointer-events:none;}
.cta-inner{position:relative;}
.cta-title{font-size:clamp(30px,5.5vw,46px); line-height:1.05; font-weight:800; letter-spacing:-.035em; margin-bottom:18px; color:#fff; text-wrap:balance;}
.cta-sub{font-size:18px; line-height:1.6; color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 36px; text-wrap:pretty;}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- footer ---------- */
.footer{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(56px,9vw,80px) clamp(20px,5vw,40px) 50px;}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(28px,4vw,40px); padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.07);}
.footer-brand{margin-bottom:16px;}
.footer-blurb{font-size:14px; line-height:1.6; color:#76767e; max-width:280px;}
.footer-col-title{font-size:13px; font-weight:700; color:#cfcfd6; margin-bottom:16px; letter-spacing:.02em;}
.footer-links{display:flex; flex-direction:column; gap:11px;}
.footer-link{font-size:14px; color:#86868e; text-decoration:none; transition:color .18s ease;}
.footer-link:hover{color:var(--text);}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; padding-top:28px; flex-wrap:wrap; gap:14px; font-size:13px; color:#5c5c64;}
.footer-team{color:#9a9aa2; font-weight:600;}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;}
.reveal.is-visible{animation:aa-rise .6s ease both;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;}
}

/* =====================================================================
   About page
   ===================================================================== */
@keyframes aa-rain{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* about hero (centered, single column) */
.about-hero{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:clamp(56px,9vw,100px) clamp(20px,5vw,40px) clamp(40px,6vw,60px); text-align:center;}
.about-hero-title{font-size:clamp(38px,7vw,68px); line-height:1.03; font-weight:800; letter-spacing:-.035em; margin-bottom:24px; text-wrap:balance;}
.about-hero-sub{font-size:clamp(16px,2.2vw,19px); line-height:1.62; color:#aeaeb6; max-width:600px; margin:0 auto; text-wrap:pretty;}

/* shared about wrappers (design uses a slightly narrower 1100px column) */
.about-band{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:clamp(24px,4vw,40px) clamp(20px,5vw,40px);}
.about-wrap{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:clamp(48px,8vw,80px) clamp(20px,5vw,40px);}
.about-cta{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 clamp(20px,5vw,40px) clamp(40px,6vw,60px);}

/* matrix joke band */
.matrix{position:relative; background:linear-gradient(135deg,#0c1410,#0e0f12); border:1px solid rgba(52,211,153,.16); border-radius:28px; padding:clamp(32px,5vw,60px); overflow:hidden;}
.matrix-rain{position:absolute; inset:0; opacity:.10; pointer-events:none; font-family:ui-monospace,monospace; font-size:13px; color:#34d399; line-height:1.25; overflow:hidden;}
.matrix-rain span{position:absolute; top:0; animation:aa-rain linear infinite;}
.matrix-rain span:nth-child(1){left:6%;  animation-duration:5.5s;}
.matrix-rain span:nth-child(2){left:20%; animation-duration:7s;   animation-delay:-2s;}
.matrix-rain span:nth-child(3){left:38%; animation-duration:6s;   animation-delay:-4s;}
.matrix-rain span:nth-child(4){left:58%; animation-duration:8s;   animation-delay:-1s;}
.matrix-rain span:nth-child(5){left:74%; animation-duration:6.5s; animation-delay:-3s;}
.matrix-rain span:nth-child(6){left:90%; animation-duration:7.5s; animation-delay:-5s;}
.matrix-inner{position:relative; max-width:660px;}
.matrix-eyebrow{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#34d399;}
.matrix-title{font-size:clamp(26px,4.4vw,38px); line-height:1.12; font-weight:800; letter-spacing:-.03em; margin:16px 0 18px; text-wrap:balance;}
.matrix-text{font-size:clamp(15px,2vw,17.5px); line-height:1.66; color:#c0c9c4; margin-bottom:16px; text-wrap:pretty;}
.matrix-text:last-child{margin-bottom:0;}
.matrix-text em{color:#e6efe9;}
.matrix-text strong{color:#f4f4f5;}
.matrix-code{color:#34d399; font-family:ui-monospace,monospace;}
.matrix-aside{color:#7d8a83;}

/* founders */
.founders-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;}
.founder{padding:clamp(26px,4vw,38px); display:flex; flex-direction:column; gap:20px;}
.founder-head{display:flex; align-items:center; gap:18px;}
.founder-avatar{width:74px; height:74px; border-radius:20px; flex:none; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; letter-spacing:-.02em;}
.founder-avatar-ceo{background:linear-gradient(150deg, color-mix(in oklab, var(--accent), transparent 25%), color-mix(in oklab, var(--accent), black 35%)); color:#fff; box-shadow:0 10px 26px color-mix(in oklab, var(--accent), transparent 62%);}
.founder-avatar-coo{background:linear-gradient(150deg,#2a2a31,#16161a); border:1px solid rgba(255,255,255,.08); color:#f4f4f5;}
.founder-name{font-size:clamp(19px,2.6vw,22px); font-weight:800; letter-spacing:-.02em;}
.founder-role{font-size:14px; font-weight:600; margin-top:3px;}
.founder-role-ceo{color:var(--accent);}
.founder-role-coo{color:#b6b6bd;}
.founder-bio{font-size:15px; line-height:1.62; color:#9a9aa2;}

/* who we are */
.who-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; align-items:stretch;}
.who-intro{grid-column:1/-1; background:linear-gradient(160deg,#12131a,#111113); border:1px solid rgba(255,255,255,.07); border-radius:24px; padding:clamp(30px,5vw,48px);}
.who-intro-title{font-size:clamp(26px,4.4vw,38px); line-height:1.12; font-weight:800; letter-spacing:-.03em; margin:16px 0 18px; max-width:680px; text-wrap:balance;}
.who-intro-text{font-size:clamp(15px,2vw,17.5px); line-height:1.66; color:#aeaeb6; max-width:680px; text-wrap:pretty;}
.feature-icon-red{background:rgba(239,68,68,.12);}

/* =====================================================================
   Contact page
   ===================================================================== */
[hidden]{display:none !important;}

/* hero (centered, narrower than the About hero) */
.contact-hero{max-width:760px;}

/* layout grid: form + details */
.contact-grid{
  position:relative; z-index:1; max-width:1100px; margin:0 auto;
  padding:clamp(24px,4vw,40px) clamp(20px,5vw,40px) clamp(48px,8vw,80px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; align-items:start;
}

/* cards */
.contact-card{background:#111113; border:1px solid rgba(255,255,255,.07); border-radius:24px; padding:clamp(26px,4vw,40px);}
.contact-card-title{font-size:clamp(22px,3vw,26px); font-weight:800; letter-spacing:-.02em; margin-bottom:6px;}
.contact-card-sub{font-size:14.5px; color:#9a9aa2; margin-bottom:28px;}

/* form */
.contact-form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field-label{font-size:13px; font-weight:600; color:#b6b6bd;}
.field-input,.field-textarea{
  background:#0c0c0e; border:1px solid rgba(255,255,255,.1); border-radius:11px;
  padding:13px 15px; color:#f4f4f5; font-size:15px; outline:none; font-family:inherit;
  transition:border-color .15s ease;
}
.field-textarea{resize:vertical; line-height:1.5; min-height:120px;}
.field-input:focus,.field-textarea:focus{border-color:var(--accent);}
.field-input::placeholder,.field-textarea::placeholder{color:#5c5c64;}

/* topic chips */
.topics{display:flex; gap:8px; flex-wrap:wrap;}
.topic-chip{
  font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:999px; cursor:pointer;
  background:#0c0c0e; color:#b6b6bd; border:1px solid rgba(255,255,255,.1);
  font-family:inherit; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.topic-chip:hover{border-color:rgba(255,255,255,.22);}
.topic-chip.is-selected{background:var(--accent); color:#fff; border-color:var(--accent);}

.contact-submit{width:100%; justify-content:center; padding:15px; font-size:15.5px; margin-top:4px;}
.contact-submit[disabled]{opacity:.6; cursor:default;}
.contact-fineprint{font-size:12px; color:#5c5c64; text-align:center; margin-top:2px;}

/* inline submit error */
.contact-error{
  font-size:13.5px; color:#fca5a5; line-height:1.5; margin:0;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.28);
  border-radius:10px; padding:11px 14px;
}

/* honeypot — visually removed but still in the DOM for bots to trip on */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* success state */
.contact-success{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:34px 10px;}
.contact-success-icon{width:60px; height:60px; border-radius:50%; background:color-mix(in oklab, var(--accent), transparent 84%); display:flex; align-items:center; justify-content:center;}
.contact-success-title{font-size:20px; font-weight:700;}
.contact-success-text{font-size:15px; color:#9a9aa2; max-width:300px; line-height:1.6;}
.contact-success-text span{color:#cfcfd6;}
.contact-reset{
  margin-top:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#f4f4f5; font-size:14px; font-weight:600; padding:11px 20px; border-radius:11px;
  cursor:pointer; font-family:inherit; transition:background .15s ease;
}
.contact-reset:hover{background:rgba(255,255,255,.1);}

/* details column */
.contact-aside{display:flex; flex-direction:column; gap:18px;}
.contact-block{background:#111113; border:1px solid rgba(255,255,255,.07); border-radius:24px; padding:clamp(26px,4vw,36px); display:flex; flex-direction:column; gap:22px;}
.contact-block-grad{background:linear-gradient(160deg,#12131a,#111113); gap:18px;}
.contact-method{display:flex; align-items:center; gap:15px; text-decoration:none; color:inherit;}
.contact-method-icon{width:44px; height:44px; flex:none; border-radius:12px; background:color-mix(in oklab, var(--accent), transparent 86%); display:flex; align-items:center; justify-content:center;}
.contact-method-label{font-size:13px; color:#86868e;}
.contact-method-value{font-size:15.5px; font-weight:600;}
.contact-method:hover .contact-method-value{color:var(--accent);}

.contact-loc{display:flex; align-items:center; gap:13px;}
.contact-divider{height:1px; background:rgba(255,255,255,.07);}
.contact-hours-label{font-size:13px; color:#86868e; margin-bottom:4px;}
.contact-hours{font-size:15px; font-weight:600; color:#d4d4dc;}
.contact-hours-note{font-size:13.5px; color:#76767e; margin-top:6px;}

.contact-social{background:#111113; border:1px solid rgba(255,255,255,.07); border-radius:24px; padding:clamp(22px,4vw,28px); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.contact-social-label{font-size:14.5px; font-weight:600; color:#cfcfd6;}
.social-links{display:flex; gap:10px;}
.social-link{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#cfcfd6; text-decoration:none; transition:background .15s ease, color .15s ease;}
.social-link:hover{background:rgba(255,255,255,.1); color:#fff;}

/* =====================================================================
   About teaser (homepage)
   ===================================================================== */
.about-teaser{
  background:linear-gradient(160deg,#12131a,#111113);
  border:1px solid rgba(255,255,255,.07); border-radius:28px;
  padding:clamp(30px,5vw,52px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,4vw,44px); align-items:center;
}
.about-teaser-title{font-size:clamp(26px,4.4vw,38px); line-height:1.1; font-weight:800; letter-spacing:-.03em; margin:16px 0 18px; text-wrap:balance;}
.about-teaser-text{font-size:clamp(15px,2vw,16.5px); line-height:1.66; color:#aeaeb6; text-wrap:pretty; margin-bottom:14px;}
.about-teaser-text:last-of-type{margin-bottom:0;}
.about-facts{display:flex; flex-direction:column; gap:14px;}
.about-fact{display:flex; gap:13px; align-items:flex-start; background:#0f0f11; border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:16px 18px;}
.about-fact-icon{width:38px; height:38px; flex:none; border-radius:11px; background:color-mix(in oklab, var(--accent), transparent 86%); display:flex; align-items:center; justify-content:center;}
.about-fact-title{display:block; font-size:14.5px; font-weight:700; margin-bottom:3px;}
.about-fact-text{display:block; font-size:13.5px; line-height:1.55; color:#9a9aa2;}

/* =====================================================================
   Customer feedback
   ===================================================================== */
.feedback-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;}
.quote-card{display:flex; flex-direction:column; gap:16px;}
.stars{display:flex; gap:3px; color:#f5b942;}
.quote-text{font-size:15px; line-height:1.65; color:#c9c9d1; text-wrap:pretty; flex:1;}
.quote-who{display:flex; align-items:center; gap:12px;}
.quote-avatar{
  width:40px; height:40px; border-radius:12px; flex:none;
  background:color-mix(in oklab, var(--accent), transparent 78%);
  color:#dbe4f7; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.quote-name{font-size:14px; font-weight:700;}
.quote-role{font-size:12.5px; color:#86868e; margin-top:2px;}
.feedback-note{margin-top:18px; font-size:13px; color:#76767e;}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:840px;}
.faq-item{
  background:#111113; border:1px solid rgba(255,255,255,.07); border-radius:16px;
  transition:border-color .2s ease;
}
.faq-item[open]{border-color:color-mix(in oklab, var(--accent), transparent 55%);}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px; cursor:pointer; list-style:none;
  font-size:15.5px; font-weight:700; letter-spacing:-.01em;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q svg{flex:none; transition:transform .25s ease; color:#86868e;}
.faq-item[open] .faq-q svg{transform:rotate(180deg); color:var(--accent);}
.faq-a{padding:0 22px 20px;}
.faq-a p{font-size:14.5px; line-height:1.65; color:#9a9aa2; margin-bottom:10px; text-wrap:pretty;}
.faq-a p:last-child{margin-bottom:0;}
.faq-a a{color:var(--accent); font-weight:600; text-decoration:none;}
.faq-a a:hover{text-decoration:underline;}

/* =====================================================================
   Legal pages (terms.html / privacy.html / refund.html)
   ===================================================================== */
.legal-hero{max-width:800px;}
.legal-updated{margin-top:20px; font-size:13px; color:#5c5c64; font-weight:600;}
.legal-wrap{position:relative; z-index:1; max-width:880px; margin:0 auto; padding:clamp(10px,2vw,20px) clamp(20px,5vw,40px) clamp(48px,8vw,80px);}
.legal-card{background:#111113; border:1px solid rgba(255,255,255,.07); border-radius:24px; padding:clamp(26px,5vw,52px);}
.legal-card h2{font-size:19px; font-weight:800; letter-spacing:-.01em; margin:30px 0 12px;}
.legal-card h2:first-child{margin-top:0;}
.legal-card p{font-size:15px; line-height:1.7; color:#aeaeb6; margin-bottom:13px; text-wrap:pretty;}
.legal-card ul{margin:0 0 15px 20px; padding:0;}
.legal-card li{font-size:15px; line-height:1.65; color:#aeaeb6; margin-bottom:9px;}
.legal-card a{color:var(--accent); font-weight:600; text-decoration:none;}
.legal-card a:hover{text-decoration:underline;}
.legal-back{display:inline-flex; margin-top:26px;}

/* =====================================================================
   In-phone onboarding (mirrors the Agent-0 first-run wizard, light mode)
   ===================================================================== */
.phone-screen.onb{
  background:#DCE7F0; background-image:none; padding:0;
  display:block; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.onb-track{
  display:flex; height:100%; width:100%;
  transition:transform .35s cubic-bezier(.25,.7,.3,1);
  will-change:transform;
}
.onb-track.is-dragging{transition:none;}
.onb-slide{flex:0 0 100%; height:100%; display:flex; flex-direction:column; overflow:hidden;}

/* visual area (top 55%) */
.onb-visual{
  flex:0 0 55%; position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#DCE7F0,#F1F6F9);
  padding:34px 16px 30px;
}
.onb-skip{
  position:absolute; top:32px; right:14px; z-index:2;
  background:none; border:none; cursor:pointer; padding:6px 8px;
  font-family:inherit; font-size:11.5px; font-weight:700; color:#5E6B7E;
}
.onb-visual-inner{flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:0;}

/* content card (bottom, overlaps visual like the app) */
.onb-card{
  flex:1; margin-top:-20px; position:relative; z-index:1;
  background:#fff; border-radius:24px 24px 0 0;
  padding:18px 18px 16px; display:flex; flex-direction:column;
  box-shadow:0 -8px 16px rgba(0,0,0,.06);
}
.onb-headline{font-size:17px; line-height:1.16; font-weight:800; letter-spacing:-.02em; color:#212A3E;}
.onb-sub{font-size:11px; line-height:1.5; color:#5E6B7E; margin-top:7px; font-weight:500;}
.onb-dots{display:flex; gap:5px; margin-top:12px;}
.onb-dot{width:5px; height:5px; border-radius:99px; background:#C9D2DC; border:none; padding:0; cursor:pointer; transition:width .25s ease, background .25s ease;}
.onb-dot.is-active{width:16px; background:#212A3E;}
.onb-card-spacer{flex:1;}
.onb-cta{
  display:flex; align-items:center; justify-content:center; height:38px;
  border-radius:8px; background:#212A3E; color:#fff; border:none; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 6px 12px rgba(33,42,62,.28);
}
.onb-ghost{
  display:block; text-align:center; padding-top:9px;
  font-size:10.5px; font-weight:700; color:#212A3E; text-decoration:none;
}

/* mock UI primitives inside the visual */
.onb-mcard{background:#fff; border:1px solid #E6ECF2; border-radius:12px; box-shadow:0 4px 10px rgba(33,42,62,.06);}
.onb-searchbar{display:flex; align-items:center; gap:7px; padding:8px 10px;}
.onb-search-text{flex:1; font-size:9.5px; color:#8A94A6; font-weight:500; white-space:nowrap; overflow:hidden;}
.onb-sq{width:20px; height:20px; border-radius:6px; background:#212A3E; display:flex; align-items:center; justify-content:center; flex:none;}
.onb-chips{display:flex; gap:5px;}
.onb-chip{font-size:8.5px; font-weight:700; color:#394867; background:#EEF3F8; padding:4px 8px; border-radius:99px;}
.onb-chip.is-active{background:#212A3E; color:#fff;}
.onb-photo{position:relative; height:74px; background:#E2E9F0; border-radius:12px 12px 0 0;}
.onb-price{position:absolute; left:8px; bottom:7px; background:#F1F6F9; border-radius:6px; padding:3px 7px; font-size:9px; font-weight:700; color:#212A3E;}
.onb-off{position:absolute; left:8px; top:7px; background:#16a34a; border-radius:6px; padding:3px 6px; font-size:7.5px; font-weight:800; color:#fff;}
.onb-heart{position:absolute; right:8px; top:7px; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;}
.onb-prop-body{padding:8px 10px 10px;}
.onb-prop-title{font-size:10.5px; font-weight:700; color:#212A3E;}
.onb-prop-loc{font-size:8.5px; color:#8A94A6; margin-top:2px; font-weight:500;}
.onb-prop-meta{display:flex; justify-content:space-between; margin-top:6px; font-size:8px; color:#5E6B7E; font-weight:600;}

.onb-cal{padding:9px 10px;}
.onb-cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:7px;}
.onb-cal-title{font-size:9.5px; font-weight:800; color:#212A3E;}
.onb-cal-link{font-size:8px; font-weight:700; color:#394867;}
.onb-days{display:flex; justify-content:space-between;}
.onb-day{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:7.5px; color:#8A94A6; font-weight:700;}
.onb-day b{font-size:9px; color:#212A3E;}
.onb-day .is-picked{width:20px; height:20px; border-radius:50%; background:#212A3E; color:#fff; display:flex; align-items:center; justify-content:center; font-size:9px;}
.onb-slots{display:flex; gap:5px; margin-top:8px;}
.onb-slot{flex:1; text-align:center; font-size:8.5px; font-weight:700; color:#394867; background:#EEF3F8; padding:5px 0; border-radius:6px;}
.onb-slot.is-active{background:#212A3E; color:#fff;}

.onb-chatrow{display:flex; gap:5px; align-items:flex-end;}
.onb-chatrow.is-out{justify-content:flex-end;}
.onb-ava{width:18px; height:18px; border-radius:50%; background:#E2E9F0; flex:none;}
.onb-bubble{max-width:76%; padding:6px 9px; border-radius:10px; font-size:9px; line-height:1.4; font-weight:500;}
.onb-bubble.is-in{background:#EEF3F8; color:#212A3E; border-bottom-left-radius:3px;}
.onb-bubble.is-out{background:#212A3E; color:#fff; border-bottom-right-radius:3px; font-weight:600;}
.onb-typing{display:flex; gap:3px; padding:8px 10px;}
.onb-typing i{width:4px; height:4px; border-radius:50%; background:#8A94A6;}

.onb-shield{
  width:54px; height:54px; border-radius:50%; background:#212A3E; align-self:center;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 18px rgba(33,42,62,.32); margin-bottom:4px;
}
.onb-agent{display:flex; align-items:center; gap:8px; padding:9px 10px;}
.onb-agent-ava{width:28px; height:28px; border-radius:8px; background:linear-gradient(150deg,#212A3E,#394867); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none;}
.onb-agent-name{display:flex; align-items:center; gap:4px; font-size:10px; font-weight:800; color:#212A3E;}
.onb-agent-sub{font-size:8px; color:#8A94A6; font-weight:600; margin-top:2px;}
.onb-secure{display:flex; align-items:center; gap:7px; background:#E7F6EF; border:1px solid #C5EBD9; border-radius:10px; padding:8px 10px;}
.onb-secure-title{font-size:9px; font-weight:800; color:#212A3E;}
.onb-secure-sub{font-size:7.5px; color:#5E6B7E; font-weight:600; margin-top:1px;}

@media (prefers-reduced-motion:reduce){
  .onb-track{transition:none;}
}

/* ============ VISION ============ */
.vision-lead{font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.62; color:#9a9aa2; margin:18px auto 0; max-width:660px;}
.vision-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;}
.vision-card{position:relative; display:flex; flex-direction:column;}
.vision-card .feature-icon{margin-top:6px;}
.vision-stage{align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;}
.vision-stage-next{color:#c8a24a;}
.vision-northstar{text-align:center; max-width:720px; margin:40px auto 0; font-size:clamp(16px,1.9vw,19px); line-height:1.6; font-weight:600; letter-spacing:-.01em; color:#d7d7db; text-wrap:balance;}

/* =====================================================================
   Pitch deck (pitchdeck/index.html) — branded investor deck.
   Reuses tokens + card/feature/btn classes; a vertical stack of "slides".
   ===================================================================== */
body.pd{-webkit-print-color-adjust:exact; print-color-adjust:exact;}

/* slim top bar */
.pd-top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:14px clamp(20px,5vw,40px);
  backdrop-filter:blur(14px); background:rgba(10,10,10,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pd-back{display:inline-flex; align-items:center; gap:7px; color:#b6b6bd; text-decoration:none; font-size:14px; font-weight:600; transition:color .18s ease;}
.pd-back:hover{color:var(--text);}
.pd-top-label{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:.06em; color:#5c5c64; text-transform:uppercase;}

/* deck + slides */
.pd-deck{position:relative; z-index:1;}
.pd-slide{
  position:relative; max-width:var(--maxw); margin:0 auto;
  min-height:88vh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(56px,9vw,90px) clamp(20px,5vw,40px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pd-slide:last-of-type{border-bottom:none;}
.pd-num{position:absolute; top:clamp(20px,4vw,34px); right:clamp(20px,5vw,40px); font-family:ui-monospace,monospace; font-size:12.5px; font-weight:700; color:#4a4a52; letter-spacing:.04em;}
.pd-title{font-size:clamp(28px,5vw,48px); line-height:1.06; font-weight:800; letter-spacing:-.03em; margin-top:16px; text-wrap:balance;}
.pd-lead{font-size:clamp(16px,2vw,19px); line-height:1.6; color:#aeaeb6; max-width:720px; margin-top:20px; text-wrap:pretty;}
.pd-note{font-size:13px; line-height:1.55; color:#6a6a72; margin-top:24px; max-width:640px;}
.pd-note strong{color:#9a9aa2; font-weight:700;}

/* grids + generic content */
.pd-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:38px;}
.pd-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.pd-grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.pd-card-eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:block;}
.pd-card-eyebrow.is-next{color:#c8a24a;}

/* cover */
.pd-cover{align-items:center; text-align:center; min-height:calc(100vh - 56px);}
.pd-cover .pd-num{display:none;}
.pd-cover-mark{margin-bottom:30px;}
.pd-cover-title{font-size:clamp(44px,9vw,88px); line-height:.98; font-weight:800; letter-spacing:-.04em;}
.pd-cover-sub{font-size:clamp(17px,2.6vw,23px); line-height:1.45; color:#c9c9d1; max-width:640px; margin:22px auto 0; text-wrap:balance;}
.pd-cover-meta{margin-top:34px; font-size:14px; color:#76767e; line-height:1.7;}
.pd-cover-meta a{color:var(--accent); text-decoration:none; font-weight:600;}

/* fill-in placeholders (things only the founder can supply) */
.pd-fill{
  display:inline-block; font-family:ui-monospace,monospace; font-weight:700;
  font-size:.85em; color:var(--accent);
  background:color-mix(in oklab, var(--accent), transparent 88%);
  border:1px dashed color-mix(in oklab, var(--accent), transparent 48%);
  border-radius:8px; padding:2px 9px; letter-spacing:.01em;
}

/* stat blocks (market / traction) */
.pd-stat{background:#111113; border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:26px 24px;}
.pd-stat-num{font-size:clamp(26px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; color:#fff; display:block;}
.pd-stat-fill{
  display:inline-block; font-family:ui-monospace,monospace; font-weight:700;
  font-size:clamp(15px,2vw,18px); color:var(--accent);
  background:color-mix(in oklab, var(--accent), transparent 88%);
  border:1px dashed color-mix(in oklab, var(--accent), transparent 48%);
  border-radius:10px; padding:8px 12px;
}
.pd-stat-label{display:block; font-size:14px; line-height:1.5; color:#9a9aa2; margin-top:12px;}

/* steps (how it works) */
.pd-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:38px;}

/* timeline (roadmap) */
.pd-timeline{display:flex; flex-direction:column; gap:2px; margin-top:38px;}
.pd-tl{display:flex; gap:18px; padding:18px 0; border-top:1px solid rgba(255,255,255,.07);}
.pd-tl:first-child{border-top:none;}
.pd-tl-when{flex:0 0 132px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding-top:2px;}
.pd-tl-when.is-next{color:#c8a24a;}
.pd-tl-when.is-later{color:#86868e;}
.pd-tl-body{flex:1;}
.pd-tl-title{font-size:16.5px; font-weight:700; letter-spacing:-.01em;}
.pd-tl-text{font-size:14.5px; line-height:1.55; color:#9a9aa2; margin-top:5px;}

/* team */
.pd-founder{display:flex; align-items:center; gap:16px;}
.pd-founder-avatar{width:60px; height:60px; border-radius:16px; flex:none; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:800; letter-spacing:-.02em;}
.pd-founder-name{font-size:17.5px; font-weight:800; letter-spacing:-.01em;}
.pd-founder-role{font-size:13.5px; font-weight:600; color:var(--accent); margin-top:3px;}

/* closing CTA slide */
.pd-close{text-align:center; align-items:center;}
.pd-close .pd-title{max-width:820px;}
.pd-close-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}

/* scroll reveal (self-contained; no dependency on main.js) */
.pd-reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.pd-reveal.is-in{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  .pd-reveal{opacity:1; transform:none; transition:none;}
}
@media print{
  .pd-top{display:none;}
  .pd-slide{min-height:auto; page-break-after:always; break-after:page; border-bottom:none;}
  .pd-reveal{opacity:1; transform:none;}
}