/* ============================================================
   TwoQuarks — unified stylesheet (single source of truth)
   Aesthetic: precision instrument / frontier AI-safety lab
   Brand DNA preserved: near-black canvas + signal-blue accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* surface */
  --bg:#05060a;
  --bg-2:#080a11;
  --fg:#f4f6fb;
  --muted:rgba(244,246,251,.60);
  --soft:rgba(244,246,251,.40);
  /* lines & glass */
  --stroke:rgba(255,255,255,.09);
  --stroke-strong:rgba(140,180,255,.30);
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.06);
  --glass:rgba(7,9,16,.62);
  /* signal palette */
  --accent:#9cbcf2;          /* brand blue — slightly desaturated */
  --accent-dim:rgba(140,180,255,.09);
  --warn:#ffb454;            /* divergence / pre-critical, used sparingly */
  --ok:#7ee0a8;
  /* type */
  --display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* atmospheric background field */
#quantumField{position:fixed;inset:0;width:100vw;height:100vh;z-index:-10;background:var(--bg)}
body::before{ /* top glow + faint grid */
  content:"";position:fixed;inset:0;z-index:-9;pointer-events:none;
  background:
    radial-gradient(760px 440px at 50% -10%,rgba(140,180,255,.055),transparent 72%),
    linear-gradient(rgba(255,255,255,.010) 1px,transparent 1px) 0 0/100% 72px,
    linear-gradient(90deg,rgba(255,255,255,.010) 1px,transparent 1px) 0 0/72px 100%;
  mask-image:linear-gradient(180deg,#000,transparent 78%);
}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:13px 24px;background:var(--glass);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--stroke);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:16px}
.brand{
  font-family:var(--display);font-weight:700;font-size:1.16rem;
  letter-spacing:-.02em;text-decoration:none;color:var(--fg);
  display:flex;align-items:center;gap:9px
}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 7px var(--accent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.nav-links{display:flex;gap:8px;margin-left:14px}
.nav-links a{
  text-decoration:none;color:var(--fg);padding:8px 13px;
  border:1px solid var(--stroke);border-radius:999px;
  font-size:.78rem;opacity:.74;transition:.18s ease;white-space:nowrap
}
.nav-links a:hover,.nav-links a.active{opacity:1;background:var(--card)}
.nav-links a.primary{border-color:var(--stroke-strong);color:var(--accent);background:var(--accent-dim)}
.spacer-nav{flex:1}
.menu-btn{display:none;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.6);border-radius:10px;cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  display:block;width:18px;height:2px;background:#fff;position:relative;content:""}
.menu-btn span::before,.menu-btn span::after{position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu{position:absolute;top:60px;right:22px;min-width:248px;padding:10px;border-radius:14px;
  background:rgba(5,6,10,.92);backdrop-filter:blur(14px);border:1px solid var(--stroke);
  box-shadow:0 18px 50px rgba(0,0,0,.6);display:none}
.menu.open{display:block}
.menu a{display:block;padding:10px;border-radius:10px;text-decoration:none;color:var(--fg);opacity:.82;font-size:.9rem}
.menu a:hover{background:var(--card-2);opacity:1}
.menu .sep{height:1px;background:var(--stroke);margin:8px 2px}
@media(max-width:980px){.nav-links{display:none}.menu-btn{display:flex}.menu{left:16px;right:16px;min-width:unset}}

/* ---------- shared type helpers ---------- */
.kicker,.section-kicker,.note-meta,.label,.micro,.tiny,.num{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-weight:500}
.kicker{
  display:inline-block;font-size:.7rem;color:var(--accent);
  border:1px solid var(--stroke-strong);border-radius:999px;
  padding:7px 14px;background:var(--accent-dim)}
.section-kicker{font-size:.68rem;color:var(--accent);opacity:.9;margin-bottom:14px}
.micro{font-size:.7rem;color:var(--soft)}

/* ---------- hero ---------- */
.hero{min-height:86vh;display:grid;place-items:center;text-align:center;padding:92px 7vw 64px}
.hero-inner{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.75rem,3.9vw,3rem);letter-spacing:-.025em;line-height:1.18;max-width:21ch;
  background:linear-gradient(180deg,#fff,rgba(244,246,251,.72));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{max-width:720px;color:var(--muted);font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.95}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* staggered load-in */
.reveal-up{opacity:0;transform:translateY(14px);animation:riseIn .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes riseIn{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}
.d4{animation-delay:.44s}.d5{animation-delay:.57s}

/* signature: live ΔL3 signal */
.signal{width:min(680px,86vw);margin-top:10px;border:1px solid var(--stroke);
  border-radius:14px;background:var(--card);backdrop-filter:blur(8px);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.signal-head{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.signal-head .live{display:flex;align-items:center;gap:7px;color:var(--accent)}
.signal-head .live::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1.8s infinite}
.signal svg{width:100%;height:74px;display:block}
.signal-foot{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--soft);text-align:left}
.signal-foot b{color:var(--warn);font-weight:500}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--fg);
  padding:11px 19px;border-radius:999px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.025);transition:.16s ease;font-size:.92rem;font-weight:500}
.btn:hover{background:var(--card-2);transform:translateY(-1px)}
.btn.primary{border-color:var(--stroke-strong);color:var(--accent);background:var(--accent-dim)}
.btn.primary:hover{background:rgba(140,180,255,.22)}
.btn.mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em}

/* ---------- sections ---------- */
.section{padding:104px 6vw;text-align:center;scroll-margin-top:84px}
.section.tight{padding-top:46px}
.section h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.2vw,1.95rem);letter-spacing:-.02em;line-height:1.25;margin-bottom:14px}
.subtitle{color:var(--muted);max-width:740px;margin:0 auto 38px;font-size:.98rem;line-height:1.95}

/* ---------- cards / generic ---------- */
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;
  backdrop-filter:blur(8px);transition:.18s ease}
.card:hover{background:var(--card-2);border-color:var(--stroke-strong)}

/* portal grid */
.portal-grid{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(5,1fr);gap:14px}
.portal-card{min-height:182px;padding:24px;text-align:left;text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;color:var(--fg)}
.portal-card::after{content:"";position:absolute;right:20px;bottom:18px;width:30px;height:1px;background:var(--accent);opacity:.4;transition:.2s}
.portal-card:hover::after{width:44px;opacity:.9}
.portal-card:hover{transform:translateY(-4px)}
.portal-card .label{font-size:.62rem;color:var(--accent);margin-bottom:12px}
.portal-card h3{font-family:var(--display);font-size:1.08rem;font-weight:600;margin-bottom:8px}
.portal-card p{font-size:.85rem;line-height:1.7;color:var(--muted)}
.portal-card .go{font-family:var(--mono);font-size:1.1rem;color:var(--accent);align-self:flex-end}
@media(max-width:1000px){.portal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.portal-grid{grid-template-columns:1fr}}

/* metric strip */
.metrics{max-width:var(--maxw);margin:34px auto 0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--stroke);border:1px solid var(--stroke);border-radius:16px;overflow:hidden}
.metric{background:var(--bg-2);padding:24px 18px;text-align:left}
.metric .v{font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.02em;color:var(--fg)}
.metric .v.accent{color:var(--accent)}
.metric .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:6px}
@media(max-width:820px){.metrics{grid-template-columns:repeat(2,1fr)}}
/* credibility strip (5 cards) */
.cred-grid{max-width:var(--maxw);margin:34px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:left}
.cred{padding:24px 22px}
.cred .label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:13px}
.cred h3{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:-.01em;margin-bottom:11px;line-height:1.3}
.cred p{font-size:.83rem;color:var(--muted);line-height:1.8}
@media(max-width:1000px){.cred-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cred-grid{grid-template-columns:1fr}}

/* flip card (core thesis) */
.flip-wrap{max-width:960px;margin:0 auto;perspective:1300px}
.flip-card{position:relative;min-height:258px;cursor:pointer}
.flip-inner{position:absolute;inset:0;border-radius:16px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;display:grid;place-items:center;padding:34px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--stroke);border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 50% 0%,rgba(140,180,255,.10),var(--card) 55%)}
.flip-face.back{transform:rotateY(180deg)}
.flip-content{max-width:720px;text-align:center}
.flip-content .tiny{font-size:.62rem;color:var(--accent);margin-bottom:12px}
.flip-content h3{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.025em;margin-bottom:12px}
.flip-content p{color:var(--muted);line-height:1.8}
.reveal-tag{position:absolute;right:20px;bottom:16px;font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--soft);text-transform:uppercase}
.flip-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* notes carousel */
.notes-shell{max-width:940px;margin:0 auto;position:relative}
.notes-card{min-height:230px;padding:34px 36px;text-align:left;display:none;animation:fade .4s ease}
.notes-card.active{display:block}
@keyframes fade{from{opacity:.2;transform:translateX(8px)}to{opacity:1;transform:none}}
.notes-card h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.025em;margin-bottom:10px}
.notes-card p{color:var(--muted);max-width:780px;line-height:1.85}
.notes-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.ctrl{width:36px;height:36px;border:1px solid var(--stroke);border-radius:50%;background:var(--card);color:var(--fg);cursor:pointer;transition:.16s}
.ctrl:hover{background:var(--card-2)}
.count{font-family:var(--mono);font-size:.72rem;color:var(--soft);letter-spacing:.12em}

/* page hero (sub-pages) */
.page-hero{padding:150px 6vw 50px;text-align:center}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(1.65rem,3.4vw,2.6rem);letter-spacing:-.025em;line-height:1.18;margin-bottom:20px;
  background:linear-gradient(180deg,#fff,rgba(244,246,251,.7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-hero p{color:var(--muted);max-width:720px;margin:0 auto;font-size:1rem;line-height:1.95}
.content{max-width:1060px;margin:0 auto;padding:24px 6vw 90px}

/* long content cards */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.long-card{padding:32px 34px;text-align:left;margin-bottom:18px}
.long-card h2,.long-card h3{font-family:var(--display);letter-spacing:-.025em;margin-bottom:14px;font-weight:600;line-height:1.3}
.long-card p,.long-card li{color:var(--muted);line-height:1.95}
.long-card ul{padding-left:18px;margin-top:8px}
.long-card li{margin-bottom:13px}
.long-card .label{display:block;color:var(--accent);font-size:.64rem;margin-bottom:10px}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}

/* flavor table */
.flavors{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.flavor{padding:22px}
.flavor .q{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.flavor h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:6px}
.flavor p{font-size:.86rem;color:var(--muted);line-height:1.7}
@media(max-width:820px){.flavors{grid-template-columns:1fr}}

/* terminal / data readout */
.terminal{font-family:var(--mono);font-size:.82rem;line-height:1.95;color:var(--accent);
  background:rgba(140,180,255,.04);border:1px solid var(--stroke-strong);border-radius:14px;padding:20px;overflow:auto;text-align:left}
.terminal .c{color:var(--soft)}

/* footer */
.footer{padding:54px 6vw 60px;text-align:center;border-top:1px solid var(--stroke)}
.footer-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.footer-copy{color:var(--soft);font-size:.84rem;font-family:var(--mono);letter-spacing:.06em}

@media(max-width:620px){
  .hero{padding:110px 7vw 50px}
  .actions{flex-direction:column;width:100%}
  .actions .btn{width:100%;justify-content:center}
  .metrics{grid-template-columns:1fr}
}

/* scroll hint (homepage only) */
.scroll-hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  width:46px;height:46px;border-radius:50%;border:1px solid var(--stroke-strong);
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--accent);cursor:pointer;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .55s ease,transform .55s ease;z-index:900}
.scroll-hint svg{width:20px;height:20px}
.scroll-hint.show{opacity:.85;pointer-events:auto;animation:hintBob 1.9s ease-in-out infinite}
.scroll-hint.show:hover{opacity:1;background:var(--accent-dim)}
@keyframes hintBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scroll-hint.show{animation:none;transform:translateX(-50%) translateY(0)}}