:root {
  --blue: #0867f2;
  --blue-dark: #0048bd;
  --blue-soft: #eaf3ff;
  --ink: #0a0d14;
  --ink-2: #1b2230;
  --muted: #5f6979;
  --line: #dfe5ee;
  --silver: #eef1f5;
  --paper: #ffffff;
  --paper-2: #f8fafc;
  --max: 1220px;
  --radius: 28px;
  --shadow: 0 24px 70px rgba(10, 22, 45, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.brand { flex: 0 0 auto; }
.brand img { width: clamp(190px, 20vw, 250px); }
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-links a {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav-links a:hover { color: var(--blue); }

.btn {
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(8, 103, 242, .20);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--blue-dark); box-shadow: 0 16px 36px rgba(8, 103, 242, .26); }
.btn-small { min-height: 44px; padding-inline: 18px; font-size: .88rem; }
.btn-white { background: white; color: var(--ink); box-shadow: none; }
.btn-white:hover { background: #f3f6fb; color: var(--blue); box-shadow: none; }

.hero {
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .85fr);
  gap: clamp(44px, 7vw, 90px);
  align-items: center;
  padding: 74px 0 86px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -240px;
  top: -210px;
  background: radial-gradient(circle, rgba(8,103,242,.12), rgba(8,103,242,0) 68%);
  pointer-events: none;
}
.eyebrow, .kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .17em;
  margin: 0 0 18px;
}
.eyebrow span { width: 30px; height: 3px; background: var(--blue); border-radius: 3px; }
.hero h1 {
  margin: 0;
  font-size: clamp(4rem, 7.4vw, 7.3rem);
  line-height: .88;
  letter-spacing: -.065em;
  text-transform: uppercase;
  max-width: 760px;
}
.hero h1 strong { color: var(--blue); font-weight: 950; }
.hero-lede {
  max-width: 660px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.65;
}
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.text-link { font-weight: 850; color: var(--ink); }
.text-link span { color: var(--blue); margin-left: 5px; }
.hero-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 28px;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.5;
}
.hero-note strong { color: var(--ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); margin-top: 7px; flex: 0 0 auto; box-shadow: 0 0 0 7px var(--blue-soft); }

.hero-product { min-height: 560px; position: relative; display: grid; place-items: center; }
.hero-product::before {
  content: "";
  position: absolute;
  inset: 8% 3% 4%;
  border-radius: 40px;
  background:
    linear-gradient(135deg, rgba(8,103,242,.11), rgba(8,103,242,.02)),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(8,103,242,.08) 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, rgba(8,103,242,.08) 30px);
  border: 1px solid rgba(8,103,242,.16);
}
.orbit { position: absolute; border: 1px solid rgba(8,103,242,.18); border-radius: 50%; }
.orbit-one { width: 430px; height: 430px; }
.orbit-two { width: 520px; height: 520px; }
.phone-shell {
  width: min(330px, 76vw);
  padding: 10px;
  border-radius: 40px;
  background: #080b11;
  box-shadow: 0 30px 80px rgba(7, 19, 40, .24);
  border: 1px solid #252a35;
  z-index: 2;
  transform: rotate(1.8deg);
}
.phone-topline { width: 82px; height: 7px; background: #252b36; border-radius: 20px; margin: 2px auto 9px; }
.phone-screen {
  min-height: 510px;
  border-radius: 31px;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, #0b111d 0%, #05080d 100%);
  color: white;
  overflow: hidden;
  position: relative;
}
.phone-screen::after { content:""; position:absolute; width:210px; height:210px; border-radius:50%; background:rgba(8,103,242,.18); filter: blur(18px); right:-110px; top:80px; }
.phone-brand { color: white; font-weight: 950; font-size: .75rem; letter-spacing: .07em; position: relative; z-index: 1; }
.life-badge { display:inline-flex; margin-top:14px; padding:7px 9px; border-radius:8px; background:#102c58; color:#9fc6ff; font-size:.59rem; font-weight:900; letter-spacing:.07em; position: relative; z-index: 1; }
.phone-date { color:#69a9ff; font-size:.62rem; font-weight:900; letter-spacing:.12em; margin:30px 0 7px; position: relative; z-index: 1; }
.phone-screen h2 { font-size: 1.65rem; line-height:1; margin:0; letter-spacing:-.04em; position: relative; z-index: 1; }
.phone-copy { color:#aab6c9; line-height:1.5; font-size:.73rem; max-width:245px; position: relative; z-index: 1; }
.phone-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; position: relative; z-index: 1; }
.phone-btn { min-height:42px; border-radius:10px; display:grid; place-items:center; font-size:.7rem; font-weight:950; }
.phone-btn.primary { background:var(--blue); color:white; }
.phone-btn.light { background:white; color:#0a0d14; }
.phone-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; position: relative; z-index: 1; }
.phone-stats div { padding:13px; border:1px solid #1e314e; border-radius:12px; background:#0a1423; }
.phone-stats span { display:block; color:#7caef8; font-size:.54rem; font-weight:900; letter-spacing:.1em; }
.phone-stats strong { display:block; font-size:1.35rem; margin-top:4px; }
.phone-stats small { color:#8795a9; }
.phone-record { margin-top:12px; padding:14px; border-radius:12px; background:#0e1118; border:1px solid #222936; position: relative; z-index: 1; }
.phone-record span { display:block; color:#6da8ff; font-size:.54rem; font-weight:900; letter-spacing:.11em; }
.phone-record strong { display:block; margin-top:5px; font-size:.82rem; }
.floating-card { position:absolute; z-index:3; background:white; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:15px 17px; min-width:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.floating-card span { display:block; color:var(--blue); font-size:1.6rem; line-height:1; font-weight:950; }
.floating-card strong { display:block; margin-top:5px; font-size:.68rem; letter-spacing:.06em; }
.prison-friend-card { width: 205px; min-width: 0; }
.prison-friend-card strong { margin-top: 0; font-size: .78rem; line-height: 1.25; letter-spacing: -.01em; text-transform: none; }
.card-one { left:0; top:96px; transform:rotate(-5deg); }
.card-two { right:0; bottom:88px; transform:rotate(5deg); }

.truth-strip {
  background: var(--ink);
  color: white;
  min-height: 84px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  text-align: center;
  font-weight: 950;
  font-size: clamp(.85rem, 1.5vw, 1.02rem);
  letter-spacing: .12em;
  border-top: 5px solid var(--blue);
}
.truth-strip div + div { border-left: 1px solid rgba(255,255,255,.15); }

.section { padding: 112px 0; }
.section-heading { margin-bottom: 46px; }
.section-heading.narrow { max-width: 790px; }
.section-heading h2, .method-copy h2, .games-header h2, .join-card h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.section-heading > p:last-child, .method-copy > p, .games-header > p, .join-card > div > p:last-child {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 720px;
}

.feature-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.feature-card { min-height:300px; padding:27px; border:1px solid var(--line); border-radius:22px; background:white; position:relative; transition:transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.feature-card.featured { background:var(--blue); color:white; border-color:var(--blue); }
.feature-number { font-size:.72rem; font-weight:950; color:var(--blue); letter-spacing:.12em; }
.featured .feature-number { color:#bcd9ff; }
.feature-card h3 { margin:58px 0 14px; font-size:1.35rem; letter-spacing:-.03em; }
.feature-card p { color:var(--muted); line-height:1.6; margin:0; }
.featured p { color:#e5f0ff; }
.feature-tag { position:absolute; left:27px; bottom:27px; font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:white; }

.method-section { background:var(--paper-2); padding:112px 0; border-block:1px solid var(--line); }
.method-grid { display:grid; grid-template-columns:1fr .86fr; gap:70px; align-items:center; }
.method-points { margin-top:40px; display:grid; gap:0; border-top:1px solid var(--line); }
.method-points div { display:grid; grid-template-columns:54px 1fr; align-items:center; min-height:66px; border-bottom:1px solid var(--line); }
.method-points span { color:var(--blue); font-size:.72rem; font-weight:950; }
.method-points p { margin:0; color:var(--muted); }
.method-points strong { color:var(--ink); }
.method-panel { padding:46px; border-radius:30px; background:var(--ink); color:white; min-height:480px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.method-panel::before { content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(8,103,242,.23); right:-130px; top:-100px; filter:blur(10px); }
.panel-eyebrow { color:#82b7ff; font-size:.75rem; letter-spacing:.16em; font-weight:950; position:relative; z-index:1; }
.method-panel h3 { margin:6px 0 18px; font-size:clamp(2rem,3vw,3.25rem); line-height:1; letter-spacing:-.045em; position:relative; z-index:1; }
.method-panel > p:not(.panel-eyebrow) { color:#c5cfdd; line-height:1.7; max-width:520px; position:relative; z-index:1; }
.balance-lines { display:grid; gap:9px; margin-top:24px; position:relative; z-index:1; }
.balance-lines span { height:4px; background:linear-gradient(90deg,var(--blue),rgba(255,255,255,.08)); border-radius:10px; }
.balance-lines span:nth-child(2){ width:82%; }.balance-lines span:nth-child(3){ width:67%; }.balance-lines span:nth-child(4){ width:48%; }.balance-lines span:nth-child(5){ width:29%; }

.games-section { background:var(--blue); color:white; padding:112px 0 80px; }
.kicker.light { color:#d7e8ff; }
.games-header { display:grid; grid-template-columns:1fr .72fr; gap:70px; align-items:end; }
.games-header > p { color:#dceaff; margin:0 0 8px; }
.games-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px; }
.games-grid article { min-height:220px; border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.08); padding:26px; border-radius:20px; display:flex; flex-direction:column; justify-content:flex-end; }
.games-grid span { margin-bottom:auto; color:#cfe4ff; font-size:.68rem; font-weight:950; letter-spacing:.13em; }
.games-grid h3 { margin:0; font-size:1.18rem; }
.games-grid p { margin:7px 0 0; color:#dce9ff; }
.games-bottom { margin-top:64px; padding-top:32px; border-top:1px solid rgba(255,255,255,.28); font-size:clamp(2.7rem,6vw,6.3rem); line-height:.85; letter-spacing:-.06em; font-weight:950; text-align:center; }

.quote-section { padding:115px 0 112px; text-align:center; max-width:980px; }
.quote-mark { color:var(--blue); font-size:6rem; line-height:.5; font-weight:950; }
blockquote { margin:30px auto 24px; font-size:clamp(2rem,4.3vw,4.2rem); line-height:1.08; letter-spacing:-.045em; font-weight:850; }
.quote-section > p { color:var(--blue); text-transform:uppercase; font-size:.75rem; font-weight:950; letter-spacing:.16em; }

.join-section { padding-bottom:84px; }
.join-card { border-radius:32px; padding:54px; background:var(--ink); color:white; display:grid; grid-template-columns:1fr .9fr; gap:60px; align-items:center; overflow:hidden; position:relative; }
.join-card::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(8,103,242,.25); right:-230px; bottom:-260px; }
.join-card > * { position:relative; z-index:1; }
.join-card > div > p:last-child { color:#bdc6d5; }
.join-form { display:grid; grid-template-columns:1fr auto; gap:10px; }
.join-form input { min-height:56px; border-radius:14px; border:1px solid #323a48; background:#111620; color:white; padding:0 16px; outline:none; }
.join-form input:focus { border-color:#6aa7ff; box-shadow:0 0 0 4px rgba(8,103,242,.14); }
.join-form input::placeholder { color:#8792a5; }
.privacy { color:#8995a7; font-size:.78rem; margin:12px 0 0; }
.form-message { min-height:20px; margin-top:10px; color:#8fc0ff; font-size:.82rem; font-weight:800; }

.site-footer { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid var(--line); color:var(--muted); }
.site-footer img { width:185px; }
.site-footer p { font-size:.74rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 1050px) {
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; padding-top:58px; }
  .hero-copy { max-width:850px; }
  .hero-product { min-height:580px; }
  .feature-grid, .games-grid { grid-template-columns:repeat(2,1fr); }
  .method-grid, .games-header, .join-card { grid-template-columns:1fr; }
  .games-header { gap:20px; }
  .method-panel { min-height:400px; }
}

@media (max-width: 720px) {
  .shell, .site-header { width:min(calc(100% - 28px), var(--max)); }
  .site-header { min-height:78px; }
  .brand img { width:190px; }
  .site-header .btn-small { display:none; }
  .hero { gap:20px; padding:52px 0 64px; }
  .hero h1 { font-size:clamp(3rem,15vw,5.2rem); }
  .hero-actions { align-items:stretch; flex-direction:column; gap:16px; }
  .text-link { text-align:center; }
  .hero-product { min-height:510px; }
  .orbit-one { width:330px; height:330px; }
  .orbit-two { width:390px; height:390px; }
  .phone-shell { width:288px; }
  .phone-screen { min-height:465px; padding:23px 18px 18px; }
  .card-one { left:2px; top:58px; }.card-two { right:0; bottom:52px; }
  .floating-card { min-width:125px; padding:12px; }
  .truth-strip { grid-template-columns:1fr; padding:18px 0; gap:0; }
  .truth-strip div { padding:12px; }
  .truth-strip div + div { border-left:0; border-top:1px solid rgba(255,255,255,.12); }
  .section, .method-section, .games-section { padding:78px 0; }
  .feature-grid, .games-grid { grid-template-columns:1fr; }
  .feature-card { min-height:240px; }
  .method-panel, .join-card { padding:30px; }
  .games-grid article { min-height:160px; }
  .games-bottom { margin-top:46px; }
  .quote-section { padding:80px 0; }
  .join-card { gap:32px; }
  .join-form { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; justify-content:center; text-align:center; padding:34px 0; }
}