:root {
  --amber: #F97316;
  --amber-dark: #EA580C;
  --amber-pale: rgba(249, 115, 22, .12);
  --amber-ring: rgba(249, 115, 22, .25);
  --black: #0A0A0A;
  --charcoal: #1A1A1A;
  --graphite: #2D2D2D;
  --border: rgba(255, 255, 255, .08);
  --border2: rgba(255, 255, 255, .13);
  --muted: rgba(255, 255, 255, .45);
  --dim: rgba(255, 255, 255, .22);
  --green: #4ade80;
  --red: #f87171;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--black);
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.v-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 10, 10, .85);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.v-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -1px;
  text-decoration: none;
  color: #fff;
}

.v-logo span {
  color: var(--amber);
}

.v-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}

.v-nav-link:hover {
  color: #fff;
}

.v-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.v-bg-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, .13) 0%, transparent 68%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: heroGlow 6s ease-in-out infinite;
}

.v-bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}

@keyframes heroGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .7; }
  50% { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
}

.v-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 60px;
}

/* ── ICON RING */
.v-icon-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--amber-pale);
  border: 1.5px solid rgba(249, 115, 22, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  animation: ringPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes ringPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.v-icon-svg {
  width: 38px;
  height: 38px;
  stroke: var(--amber);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v-envelope-path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawPath .9s .45s ease forwards; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }

.v-card {
  width: 100%;
  max-width: 520px;
  background: var(--charcoal);
  border: 1px solid var(--border2);
  border-radius: 28px;
  padding: 42px 40px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
}

@keyframes cardUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

.v-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(249, 115, 22, .3);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-pale);
  margin-bottom: 22px;
}

.v-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.25} }

.v-heading { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 14px; color: #fff; }
.v-heading .accent { color: var(--amber); }

.v-sub { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; max-width: 4000px; margin-left: auto; margin-right: auto; }
.v-sub strong { color: rgba(255,255,255,.85); font-weight:600; }

/* CHECKLIST */
.v-checklist { list-style:none; margin:0 0 28px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.v-checklist li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.v-check-icon { width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--amber-pale); border:1px solid rgba(249,115,22,.25); margin-top:1px; }
.v-check-icon svg { width:10px; height:10px; stroke:var(--amber); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* EMAIL SHORTCUTS */
.v-email-shortcuts { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:20px 0 0; }
.v-shortcut { display:inline-flex; align-items:center; gap:5px; background:var(--graphite); border:1px solid var(--border); border-radius:8px; padding:7px 13px; font-size:12px; font-weight:500; color:var(--muted); text-decoration:none; transition:border-color .15s, color .15s; }
.v-shortcut:hover { border-color:var(--border2); color:#fff; }
.v-shortcut svg { flex-shrink:0; }

/* DIVIDER */
.v-divider { display:flex; align-items:center; gap:12px; margin:24px 0 20px; }
.v-divider-line { flex:1; height:1px; background:rgba(255,255,255,.07); }
.v-divider-text { font-size:11px; color:var(--dim); font-weight:500; white-space:nowrap; }

.v-form-label { display:block; text-align:left; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.v-input-group { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.v-email-input { flex:1; min-width:0; background:var(--graphite); border:1px solid var(--border2); border-radius:12px; padding:12px 14px; font-family:'DM Sans',sans-serif; font-size:14px; color:#fff; outline:none; transition:border-color .2s, box-shadow .2s; }
.v-email-input::placeholder { color:var(--dim); }

.v-email-input:focus { border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-ring); }

.v-resend-btn { display:inline-flex; align-items:center; gap:8px; background:var(--graphite); border:1px solid var(--border2); border-radius:10px; padding:11px 18px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:rgba(255,255,255,.7); cursor:pointer; white-space:nowrap; transition:border-color .18s, color .18s, background .18s; }
.v-resend-btn:hover { border-color:var(--amber); color:var(--amber); background:var(--amber-pale); }
.v-resend-btn:disabled { opacity:.6; cursor:not-allowed; }

.v-cooldown { font-size:12px; color:var(--dim); margin-top:8px; min-height:18px; text-align:left; }

/* CONTINUE BUTTON */
.v-continue-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--amber); color:#0A0A0A; border:none; border-radius:12px; padding:15px; font-family:'Syne',sans-serif; font-size:15px; font-weight:800; letter-spacing:-.3px; cursor:pointer; text-decoration:none; transition:background .18s, transform .12s; margin-top:4px; }
.v-continue-btn:hover { background:var(--amber-dark); color:#fff; }
.v-continue-btn:active { transform:scale(.98); }

.v-footer-note { margin-top:24px; font-size:13px; color:var(--dim); line-height:1.6; }
.v-footer-note a { color:var(--amber); text-decoration:none; }
.v-footer-note a:hover { text-decoration:underline; }

@media (max-width:560px) {
  .v-card { padding:30px 22px 28px; border-radius:22px; }
  .v-heading { font-size:26px; }
  .v-input-group { flex-direction:column; }
  .v-resend-btn { width:100%; justify-content:center; }
  .v-nav { padding:14px 20px; }
}

/* Utility used by templates where a slightly brighter white is needed inline */
.muted-white { color: rgba(255,255,255,.85); }