:root{
  --ink:#090b0c;
  --ink-2:#0f1315;
  --ink-3:#161d1f;
  --ink-4:#1e2729;
  --line:rgba(226,240,236,0.10);
  --line-strong:rgba(226,240,236,0.20);
  --paper:#e2f0ec;
  --paper-dim:#94aaa5;
  --paper-faint:#5c6f6b;
  --signal:#4fe0c4;
  --signal-2:#2fae95;
  --signal-bright:#8bf3de;
  --amber:#f0a94e;
  --amber-2:#b97a2c;
  --danger:#ef6f6f;
  --ok:#7fd99a;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{background:var(--ink);}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
::selection{background:var(--signal-2);color:var(--ink);}

.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,56px);}

h1,h2,h3{
  font-family:'IBM Plex Mono','JetBrains Mono',monospace;
  font-weight:600;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
}

.eyebrow{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--signal-bright);
}

.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}

/* ---------------- SITE NAV ---------------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(9,11,12,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
.nav-logo{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;font-size:0.86rem;letter-spacing:0.08em;
  color:var(--paper);text-decoration:none;
  white-space:nowrap;
}
.nav-logo em{font-style:normal;color:var(--signal-bright);}
.nav-links{
  display:flex;align-items:center;gap:clamp(14px,3vw,28px);
  list-style:none;margin:0;padding:0;
}
.nav-link{
  display:flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.76rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--paper-dim);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover{color:var(--paper);}
.nav-link.active{color:var(--signal-bright);border-bottom-color:var(--signal-2);}
.nav-link.locked{
  color:var(--paper-faint);cursor:not-allowed;
  pointer-events:none;
}
.nav-link.locked svg{width:11px;height:11px;flex:none;}
@media (max-width:640px){
  .nav-logo{font-size:0.76rem;}
  .nav-links{gap:clamp(10px,4vw,18px);}
  .nav-link{font-size:0.68rem;}
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:clamp(48px,8vw,84px) 0 clamp(56px,9vw,96px);
}
.hero-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(1000px 560px at 78% 12%, rgba(79,224,196,0.14), transparent 60%),
    radial-gradient(700px 420px at 4% 100%, rgba(240,169,78,0.07), transparent 60%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:clamp(28px,5vw,56px);
  align-items:center;
}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} }

.hero-copy .eyebrow{margin-bottom:18px;}
.wordmark{
  font-size:clamp(2.6rem,6.4vw,4.4rem);
  line-height:0.98;
  color:var(--paper);
}
.wordmark em{font-style:normal;color:var(--signal-bright);}
.hero-tagline{
  max-width:52ch;
  margin-top:22px;
  font-size:1.08rem;
  color:var(--paper-dim);
}
.hero-tagline .accent{color:var(--signal-bright);font-weight:600;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.hero-note{margin-top:16px;font-size:0.8rem;color:var(--paper-faint);}

.hero-phones{
  position:relative;
  height:clamp(260px,32vw,380px);
}
.phone-card{
  position:absolute;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 26px 54px rgba(0,0,0,0.55), 0 0 0 1px rgba(226,240,236,0.12);
}
.phone-card img{display:block;width:100%;height:100%;object-fit:cover;}
.pc-1{width:40%;aspect-ratio:1/1;left:2%;top:4%;transform:rotate(-8deg);z-index:1;}
.pc-2{width:48%;aspect-ratio:1/1;left:28%;top:26%;transform:rotate(4deg);z-index:3;
  box-shadow:0 30px 62px rgba(0,0,0,0.6), 0 0 0 1px rgba(240,169,78,0.35), 0 0 50px rgba(240,169,78,0.16);}
.pc-3{width:36%;aspect-ratio:1/1;left:60%;top:0%;transform:rotate(10deg);z-index:2;}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:600;
  font-size:0.86rem;
  letter-spacing:0.01em;
  text-decoration:none;
  border-radius:8px;
  padding:13px 22px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--signal);color:#052821;border-color:var(--signal);}
.btn-primary:hover:not(:disabled){background:var(--signal-bright);}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-strong);}
.btn-ghost:hover:not(:disabled){border-color:var(--signal-2);color:var(--signal-bright);}
.btn-block{width:100%;}

/* ---------------- SECTIONS ---------------- */
section{padding:clamp(52px,8vw,92px) 0;}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(30px,5vw,48px);}
.section-title{font-size:clamp(1.6rem,3.2vw,2.2rem);}
.section-sub{color:var(--paper-dim);max-width:60ch;font-size:0.96rem;}

.divider{width:100%;height:1px;background:var(--line);}

/* ---------------- FLOW (connect -> steps -> spin -> claim, one column) ---------------- */
.flow{max-width:640px;margin:0 auto;}

.connect-gate{
  text-align:center;background:var(--ink-2);border:1px solid var(--line);border-radius:16px;
  padding:clamp(28px,5vw,40px) clamp(22px,5vw,36px);
}
.connect-gate .eyebrow{justify-content:center;}
.connect-gate-title{font-size:1.5rem;margin-top:10px;}
.connect-gate-body{color:var(--paper-dim);font-size:0.92rem;max-width:42ch;margin:12px auto 22px;}

.connected-bar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 16px;background:var(--ink-2);border:1px solid rgba(79,224,196,0.3);border-radius:10px;
  font-size:0.86rem;color:var(--paper-dim);margin-bottom:clamp(24px,4vw,32px);
}
.x-connected-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px rgba(79,224,196,0.7);flex-shrink:0;}
.connected-bar b{color:var(--paper);font-weight:600;}
.x-disconnect-btn{
  margin-left:auto;background:transparent;border:none;color:var(--paper-faint);
  font-family:'IBM Plex Sans',sans-serif;font-size:0.78rem;text-decoration:underline;cursor:pointer;padding:0;
}
.x-disconnect-btn:hover{color:var(--danger);}

/* ---------------- STEP CARDS (follow / like / repost / comment) ---------------- */
.step-cards{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink-2);
}
.step-card{
  display:block;width:100%;text-align:left;background:transparent;border:none;
  border-bottom:1px solid var(--line);padding:clamp(22px,4vw,28px);cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;transition:background 0.15s ease;
}
.step-card:last-child{border-bottom:none;}
.step-card:hover:not(.done){background:rgba(79,224,196,0.05);}
.step-eyebrow{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:0.72rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--signal-bright);margin-bottom:10px;
}
.step-card-title{font-size:1.15rem;color:var(--paper);margin-bottom:6px;}
.step-card-title span{color:var(--signal-bright);}
.step-card-body{color:var(--paper-dim);font-size:0.86rem;margin-bottom:18px;}
.step-card-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 20px;border-radius:999px;
  background:var(--signal);color:#052821;font-weight:600;font-size:0.86rem;letter-spacing:0.02em;
  transition:background 0.15s ease;
}
.step-card:hover:not(.done) .step-card-btn{background:var(--signal-bright);}
.step-card.pending .step-card-btn{background:transparent;color:var(--amber);border:1.5px dashed var(--amber);}
.step-card.pending .step-card-btn::after{content:"waiting…";}
.step-card.done{cursor:default;}
.step-card.done .step-card-title,
.step-card.done .step-card-body{opacity:0.55;}
.step-card.done .step-card-btn{background:transparent;color:var(--signal-bright);border:1.5px solid rgba(79,224,196,0.4);}
.step-card.done .step-card-btn::before{content:"✓ ";}
.action-hint{font-size:0.76rem;color:var(--paper-faint);margin:14px 0 28px;text-align:center;}

.field-error{font-size:0.78rem;color:var(--danger);margin-top:10px;min-height:1em;}

.form-msg{font-size:0.85rem;padding:12px 14px;border-radius:8px;margin:0 0 20px;display:none;}
.form-msg.show{display:block;}
.form-msg.error{background:rgba(239,111,111,0.12);color:var(--danger);border:1px solid rgba(239,111,111,0.3);}
.form-msg.info{background:rgba(240,169,78,0.1);color:var(--amber);border:1px solid rgba(240,169,78,0.3);}
.form-msg.ok{background:rgba(127,217,154,0.12);color:var(--ok);border:1px solid rgba(127,217,154,0.3);}

/* ---------------- CLAIM CARD (only shown after a win) ---------------- */
.claim-card{
  text-align:center;background:var(--ink-2);border:1px solid rgba(240,169,78,0.35);border-radius:16px;
  padding:clamp(28px,5vw,36px);margin-top:clamp(28px,4vw,40px);
}
.success-mark{
  width:50px;height:50px;border-radius:50%;background:var(--signal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.success-mark svg{width:22px;height:22px;color:#052821;}
.claim-card h3{font-size:1.3rem;margin-bottom:8px;color:var(--paper);}
.claim-card p{color:var(--paper-dim);font-size:0.9rem;max-width:40ch;margin:0 auto;}
.claim-form{display:flex;gap:10px;margin-top:22px;}
@media (max-width:520px){ .claim-form{flex-direction:column;} }
.claim-form input{
  flex:1;background:var(--ink);border:1.5px solid var(--line-strong);color:var(--paper);
  padding:13px 14px;font-size:0.9rem;border-radius:8px;
}
.claim-form input:focus{outline:none;border-color:var(--signal-2);}
.receipt{
  margin-top:18px;font-family:'IBM Plex Mono',monospace;font-size:0.8rem;color:var(--paper-dim);
  background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  text-align:left;word-break:break-all;
}

/* ---------------- SPIN WIDGET ---------------- */
.spin-stage{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(8px,2vw,16px);}

.wheel-wrap{
  position:relative;
  width:min(340px,86vw);
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #101a18 0%, #070b0a 72%);
  border:3px solid var(--signal-2);
  box-shadow:0 0 60px rgba(79,224,196,0.18), inset 0 0 0 1px rgba(226,240,236,0.06);
  display:flex;align-items:center;justify-content:center;
}
.wheel-wrap canvas{
  width:92%;height:92%;
  transition:transform 4.2s cubic-bezier(0.12,0.72,0.13,1);
}
.wheel-pointer{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:22px solid var(--signal-bright);
  filter:drop-shadow(0 0 8px rgba(139,243,222,0.7));
  z-index:2;
}
.spin-btn{
  width:min(220px,72vw);height:52px;border-radius:999px;
  background:var(--signal);color:#052821;border:1.5px solid var(--signal);
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:0.92rem;letter-spacing:0.08em;
  cursor:pointer;transition:background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.spin-btn:hover:not(:disabled){background:var(--signal-bright);}
.spin-btn:active:not(:disabled){transform:scale(0.96);}
.spin-btn:disabled{background:var(--ink-4);color:var(--paper-faint);border-color:var(--line-strong);cursor:not-allowed;}

.spin-balance{font-size:0.86rem;color:var(--paper-dim);text-align:center;}
.spin-balance b{color:var(--signal-bright);}

.spin-log{width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px;}
.spin-log-item{
  font-family:'IBM Plex Mono',monospace;font-size:0.8rem;
  padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--ink-2);color:var(--paper-dim);
}
.spin-log-item.win{border-color:rgba(240,169,78,0.4);color:var(--amber);background:rgba(240,169,78,0.08);}
.spin-log-item.bonus{border-color:rgba(79,224,196,0.4);color:var(--signal-bright);background:rgba(79,224,196,0.08);}

.redeem-row{display:flex;gap:10px;margin-top:6px;}
.redeem-row input{
  flex:1;background:var(--ink);border:1.5px solid var(--line-strong);color:var(--paper);
  padding:12px 13px;font-size:0.9rem;border-radius:8px;font-family:'IBM Plex Mono',monospace;
}
.redeem-row input:focus{outline:none;border-color:var(--signal-2);}
.redeem-hint{font-size:0.76rem;color:var(--paper-faint);margin:8px 0 28px;}

/* ---------------- STATUS PANEL ---------------- */
.status-card{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,4vw,30px);}
.status-card-top{max-width:640px;margin:0 auto clamp(28px,4vw,40px);}
.status-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.status-count{font-family:'IBM Plex Mono',monospace;font-size:1.05rem;color:var(--signal-bright);font-variant-numeric:tabular-nums;}
.progress{height:9px;background:var(--ink);border:1px solid var(--line-strong);border-radius:999px;position:relative;overflow:hidden;margin-bottom:8px;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--signal-2),var(--signal-bright));width:0%;transition:width 0.4s ease;}
.status-note{font-size:0.8rem;color:var(--paper-faint);}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--line);padding:36px 0 56px;}
.foot-line{font-size:0.82rem;color:var(--paper-faint);max-width:70ch;}

/* ---------------- ABOUT PAGE ---------------- */
.about-head{padding:clamp(48px,8vw,84px) 0 clamp(40px,6vw,64px);}
.about-roadmap{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:clamp(30px,5vw,48px);
}
@media (max-width:820px){ .about-roadmap{grid-template-columns:1fr;} }
.about-phase{display:flex;flex-direction:column;gap:10px;}
.about-phase-title{font-size:1.3rem;}
.about-phase-body{color:var(--paper-dim);font-size:0.88rem;flex:1;}
.about-phase-status{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  font-family:'IBM Plex Mono',monospace;font-size:0.7rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
}
.about-phase-status svg{width:11px;height:11px;flex:none;}
.about-phase-status.live{background:rgba(79,224,196,0.12);color:var(--signal-bright);border:1px solid rgba(79,224,196,0.3);}
.about-phase-status.locked{background:var(--ink-3);color:var(--paper-faint);border:1px solid var(--line-strong);}
.about-block{padding:clamp(4px,1vw,8px) 0 4px;}
.about-block .eyebrow{margin-bottom:12px;}

@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }