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

:root{
  --bg: #0B0B10;
  --surface: #16161D;
  --surface-raised: #1E1E27;
  --text-primary: #F5F4F7;
  --text-secondary: #9C9CAA;
  --border: #26262F;
  --border-soft: #2A2A34;
  --brand: #7C5CFF;

  --money: #34D399;
  --voice: #FB923C;
  --conversations: #F472B6;
  --pitch: #FBBF24;
  --apply: #2DD4BF;
  --firstjob: #60A5FA;

  --display: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

/* ---------- Background texture ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,16,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand-lockup{ display:flex; align-items:center; gap:10px; }
.brand-lockup img{ width:30px; height:30px; border-radius:8px; }
.brand-lockup span{
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-0.02em;
}
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-secondary);
  padding:8px 14px; border-radius:999px; border:1px solid transparent;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-links a:hover{ color:var(--text-primary); border-color:var(--border-soft); }
.nav-links a.active{
  color:var(--brand); border-color:var(--brand);
  background:rgba(124,92,255,0.08);
}
.nav-links a.age-19{ }
.nav-links a.active.age-19{ color:var(--pitch); border-color:var(--pitch); background:rgba(251,191,36,0.08); }
.nav-links a.active.age-16{ color:var(--firstjob); border-color:var(--firstjob); background:rgba(96,165,250,0.08); }

/* ---------- Stamp motif ---------- */
.stamp{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  padding:7px 13px; border-radius:14px;
  border:1.5px dashed var(--border-soft);
  color:var(--text-secondary);
}
.stamp.on-brand{ border-color:var(--brand); color:var(--brand); }
.stamp.rot-l{ transform:rotate(-2deg); }
.stamp.rot-r{ transform:rotate(2deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:14px; border:1px solid transparent;
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--brand); color:#0B0B10; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; border-color:var(--border-soft); color:var(--text-primary); }
.btn-ghost:hover{ border-color:var(--text-secondary); }
.btn-track{ color:#1A1006; font-weight:700; }

/* ---------- Sections ---------- */
section{ position:relative; z-index:1; padding:88px 0; }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:14px; display:block;
}
h1,h2,h3{ font-family:var(--display); letter-spacing:-0.02em; }
h1{ font-size:clamp(36px, 5.4vw, 60px); font-weight:800; line-height:1.04; }
h2{ font-size:clamp(26px, 3.4vw, 38px); font-weight:800; line-height:1.12; }
h3{ font-size:19px; font-weight:800; }
p{ color:var(--text-secondary); }
.lede{ font-size:18px; line-height:1.6; max-width:52ch; }

/* ---------- Hero ---------- */
.hero{ padding-top:64px; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero-copy .cta-row{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero-copy .cta-row .btn-primary.age-19{ background:var(--pitch); }
.hero-copy .cta-row .btn-primary.age-16{ background:var(--firstjob); }
.hero-tags{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }

/* ---------- Phone mockup ---------- */
.phone-stage{ position:relative; display:flex; justify-content:center; }
.phone-float{ animation:float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.phone{
  width:290px; height:600px; border-radius:44px; background:var(--bg);
  border:9px solid #1A1A1F; overflow:hidden; position:relative;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
}
.phone::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:22px; background:#1A1A1F; border-radius:0 0 16px 16px; z-index:5;
}
.phone-status{
  display:flex; justify-content:space-between; padding:12px 22px 2px;
  font-family:var(--mono); font-size:10px; color:var(--text-secondary);
}
.phone-screen{ padding:8px 18px 18px; height:100%; display:flex; flex-direction:column; }
.phone-screen.fading{ animation:screenFade .6s ease; }
@keyframes screenFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.ps-row{ display:flex; justify-content:space-between; align-items:center; margin:10px 0 18px; }
.ps-hello{ font-family:var(--mono); font-size:9px; letter-spacing:0.1em; color:var(--text-secondary); text-transform:uppercase; }
.ps-name{ font-family:var(--display); font-weight:800; font-size:16px; }
.ps-streak{ display:flex; align-items:center; gap:5px; padding:6px 10px; border:1.5px dashed var(--brand); border-radius:10px; transform:rotate(-4deg); }
.ps-streak span{ font-size:12px; font-weight:700; color:var(--brand); font-family:var(--mono); }

.ps-card{ border-radius:20px; padding:16px; margin-bottom:16px; }
.ps-card .tag{ font-family:var(--mono); font-size:9px; letter-spacing:0.1em; color:#1A1006; text-transform:uppercase; margin-bottom:8px; display:block; }
.ps-card .prompt{ font-family:var(--display); font-weight:800; font-size:14.5px; color:#1A1006; line-height:1.3; margin-bottom:10px; }
.ps-card .play{ font-size:11px; font-weight:700; color:#1A1006; display:flex; align-items:center; gap:4px; }

.ps-label{ font-family:var(--mono); font-size:9px; letter-spacing:0.1em; color:var(--text-secondary); text-transform:uppercase; margin-bottom:9px; }
.ps-bar-row{ margin-bottom:9px; }
.ps-bar-top{ display:flex; justify-content:space-between; font-size:10.5px; margin-bottom:4px; }
.ps-bar-top span:first-child{ color:var(--text-primary); font-weight:500; }
.ps-bar-top span:last-child{ font-family:var(--mono); }
.ps-track{ height:5px; border-radius:4px; background:var(--surface-raised); }
.ps-fill{ height:5px; border-radius:4px; }

.ps-stamps{ display:flex; gap:12px; margin-top:auto; padding-top:8px; }
.ps-stamp-item{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; width:42px; }
.ps-stamp-circle{ width:38px; height:38px; border-radius:50%; border:1.5px dashed var(--border-soft); display:flex; align-items:center; justify-content:center; transform:rotate(-3deg); }
.ps-stamp-item p{ font-family:var(--mono); font-size:6.5px; text-align:center; color:var(--text-secondary); line-height:1.1; }

.phone-caption{
  text-align:center; margin-top:22px; font-family:var(--mono); font-size:11px; color:var(--text-secondary);
  letter-spacing:0.06em;
}

/* ---------- Core loop ---------- */
.loop-strip{ position:relative; }
.loop-line{
  position:absolute; top:20px; left:6%; right:6%; height:1px;
  background-repeat:repeat-x; background-image:linear-gradient(90deg, var(--border-soft) 50%, transparent 50%);
  background-size:10px 1px;
}
.loop-items{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative; }
.loop-item{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.loop-num{
  width:40px; height:40px; border-radius:50%; border:1.5px dashed var(--brand); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px;
  background:var(--bg); position:relative; z-index:2;
}
.loop-item h3{ font-size:14.5px; }
.loop-item p{ font-size:13px; }

/* ---------- Tracks grid ---------- */
.tracks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.track-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px;
  border-left-width:3px; transition:transform .15s ease, border-color .15s ease;
}
.track-card:hover{ transform:translateY(-3px); }
.track-card .t-tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; display:inline-block; padding:4px 9px; border-radius:8px; }
.track-card h3{ margin-bottom:8px; font-size:16.5px; }
.track-card p{ font-size:13.5px; }
.track-card .t-badge{ margin-top:14px; font-family:var(--mono); font-size:10.5px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }

/* ---------- Charter band ---------- */
.charter-band{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.charter-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
.charter-item{ padding:22px; border:1.5px dashed var(--border-soft); border-radius:16px; }
.charter-item h3{ font-size:15px; margin-bottom:8px; }
.charter-item p{ font-size:13.5px; }

/* ---------- Origin / founder strip ---------- */
.origin{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
.origin-quote{ font-family:var(--display); font-weight:700; font-size:22px; line-height:1.35; color:var(--text-primary); }
.origin-quote em{ font-style:normal; color:var(--brand); }

/* ---------- Demo / interactive scenario ---------- */
.demo-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:38px; margin-top:32px;
}
.demo-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.scenario-prompt{
  font-family:var(--display); font-weight:800; font-size:clamp(19px,2.4vw,25px); line-height:1.35; margin-bottom:26px;
}
.choices{ display:flex; flex-direction:column; gap:12px; }
.choice-btn{
  text-align:left; background:var(--surface-raised); border:1px solid var(--border); border-radius:16px;
  padding:16px 18px; display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--text-primary);
  transition:border-color .15s ease, transform .1s ease, background .15s ease;
}
.choice-btn:hover{ border-color:var(--text-secondary); }
.choice-btn:active{ transform:scale(0.99); }
.choice-btn .letter{ font-family:var(--mono); font-size:12px; flex-shrink:0; margin-top:1px; }
.choice-btn.picked{ background:rgba(124,92,255,0.09); border-color:var(--brand); }
.choice-btn:disabled{ cursor:default; }
.choice-btn:disabled:not(.picked){ opacity:0.45; }

.outcome{
  margin-top:8px; border-radius:20px; padding:30px; text-align:center; display:none;
}
.outcome.show{ display:block; animation:screenFade .5s ease; }
.outcome .v-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px; }
.outcome .v-verdict{ font-family:var(--display); font-weight:800; font-size:34px; margin-bottom:12px; }
.outcome .v-why{ max-width:52ch; margin:0 auto; font-size:14.5px; color:var(--text-secondary); line-height:1.6; }
.outcome .v-social{ font-family:var(--mono); font-size:11px; color:var(--text-secondary); margin-top:20px; }
.demo-actions{ display:flex; justify-content:center; margin-top:22px; }

/* ---------- Age hero ---------- */
.age-hero{ display:grid; grid-template-columns:1fr 0.85fr; gap:48px; align-items:center; }
.age-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1.5px dashed; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; margin-bottom:18px; }

/* ---------- Footer ---------- */
footer{ padding:56px 0 40px; border-top:1px solid var(--border); }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:28px; }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ width:26px; height:26px; border-radius:7px; }
.footer-brand span{ font-family:var(--display); font-weight:800; font-size:15px; }
.footer-charter{ font-family:var(--mono); font-size:11px; color:var(--text-secondary); letter-spacing:0.04em; max-width:420px; line-height:1.7; }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); }
.footer-links a:hover{ color:var(--text-primary); }
.footer-bottom{ margin-top:34px; padding-top:22px; border-top:1px solid var(--border); font-size:12px; color:var(--text-secondary); }

/* ---------- Utility ---------- */
.center-head{ text-align:center; max-width:640px; margin:0 auto 8px; }
.center-head p{ margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-grid, .age-hero, .origin{ grid-template-columns:1fr; }
  .phone-stage{ order:-1; margin-bottom:8px; }
  .loop-items{ grid-template-columns:repeat(2,1fr); }
  .loop-line{ display:none; }
  .tracks-grid{ grid-template-columns:repeat(2,1fr); }
  .charter-grid{ grid-template-columns:1fr; }
  .nav-links{ gap:2px; }
  .nav-links a{ padding:7px 9px; font-size:10.5px; }
}
@media (max-width: 560px){
  .tracks-grid, .loop-items{ grid-template-columns:1fr; }
  section{ padding:64px 0; }
  .phone{ width:250px; height:520px; }
}

/* ---------- Ringer mascot section ---------- */
@keyframes gc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes gc-glow { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes gc-blink { 0%,90%,100% { transform: scaleY(1); } 95% { transform: scaleY(0.15); } }
@keyframes gc-wave { 0%,100% { transform: rotate(-115deg); } 50% { transform: rotate(-155deg); } }
@keyframes gc-twinkle { 0%,100% { opacity: 0.4; transform: rotate(45deg) scale(0.8); } 50% { opacity: 1; transform: rotate(45deg) scale(1.1); } }
@keyframes gc-tick { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gc-shake { 0%,100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(-3px,1px) rotate(-2deg); } 50% { transform: translate(3px,-1px) rotate(2deg); } 75% { transform: translate(-2px,-1px) rotate(-1deg); } }
@keyframes gc-alarm-glow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

.ringer-section { background:#0B0B10; padding:88px 60px; font-family:'Inter',sans-serif; color:#EDEAE3; max-width:1240px; margin:0 auto; }
.ringer-intro { max-width:620px; margin-bottom:56px; }
.ringer-eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; color:#2DD4BF; letter-spacing:1px; }
.ringer-title { font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:42px; margin:14px 0 18px; }
.ringer-copy { font-size:16px; line-height:1.65; color:#8A8792; margin:0; }
.ringer-grid { display:flex; gap:20px; flex-wrap:wrap; }
.ringer-card { background:#15151D; border-radius:20px; padding:28px 24px; width:192px; }
.ringer-stage { background:#0B0B10; border-radius:14px; height:190px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ringer-label { font-family:'JetBrains Mono',monospace; font-size:11px; color:#EDEAE3; letter-spacing:0.5px; margin-bottom:4px; }
.ringer-desc { font-size:12px; color:#8A8792; line-height:1.5; }

.ringer-bot { position:relative; width:110px; height:150px; animation:gc-bob 2.6s ease-in-out infinite; transform:scale(0.79); }

.ringer-countdown.is-expired .ringer-bot { animation:gc-shake 0.15s linear infinite; }
.ringer-countdown .rc-accent { background:#7C5CFF; }
.ringer-countdown.is-expired .rc-accent { background:#F97316; }
.ringer-countdown .rc-accent-border { border-color:#7C5CFF; }
.ringer-countdown.is-expired .rc-accent-border { border-color:#F97316; }
.ringer-countdown .rc-accent-text { color:#7C5CFF; }
.ringer-countdown.is-expired .rc-accent-text { color:#F97316; }
.ringer-countdown .rc-eyes { color:#2DD4BF; animation:gc-blink 3.4s ease-in-out infinite; }
.ringer-countdown.is-expired .rc-eyes { color:#F97316; animation:gc-alarm-glow 0.5s ease-in-out infinite; }
.ringer-countdown .rc-label { color:#7C5CFF; }
.ringer-countdown.is-expired .rc-label { color:#F97316; }

@media (max-width: 900px){
  .ringer-section{ padding:64px 24px; }
}