/* ===== Theme & Base ===== */
:root{
  --bg:#0b0b0c;
  --card:#111214;
  --text:#f3f5f7;
  --sub:#b7bec7;
  --brand:#e6fb55;
  --muted:#8a93a0;
  --border:rgba(255,255,255,.12);
  --danger:#ff5c5c;
  --ok:#39d98a;

  /* compact rhythm */
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:radial-gradient(1000px 680px at 70% -20%, #1a1d22 0%, var(--bg) 60%);
  min-height:100dvh;
}

/* Links, container */
a{color:var(--text); text-decoration:none}
a:hover{opacity:.92}
.container{max-width:980px; margin:0 auto; padding: var(--space-3);}

/* ===== Header & Footer ===== */
.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2); padding: var(--space-2) 0; border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px}
.brand-badge{
  display:inline-grid; place-items:center; width:24px; height:24px;
  border-radius:7px; background:var(--brand); color:#0b0b0c; font-weight:800;
}
.footer{
  border-top:1px solid var(--border); margin-top:var(--space-4); padding: var(--space-2) 0;
  color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-1);
}

/* ===== Hero ===== */
.hero{margin: var(--space-2) 0 var(--space-3)}
.hero h1{
  font-size:20px; margin: var(--space-1) 0 2px; line-height:1.25; letter-spacing:.1px;
}
.hero p{color:var(--sub); margin:0; font-size:14px}
.badge{
  display:inline-block; font-size:11px; color:#0b0b0c; background:var(--brand);
  padding:2px 7px; border-radius:999px; font-weight:800; letter-spacing:.02em
}

/* ===== Grid (stack on mobile, side-by-side on ≥ 780px) ===== */
.grid{display:grid; gap: var(--space-3)}
@media (min-width: 780px){
  .grid{grid-template-columns: 1.1fr .9fr}
}

/* ===== Card ===== */
.card{
  background:linear-gradient(180deg, #14161a, #101114);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.card h3{margin:0 0 var(--space-2); font-size:16px}

/* ===== Lists (compact) ===== */
ul{margin:0; padding-left:18px}
li{margin:6px 0; color:var(--sub); font-size:14px}

/* ===== Form ===== */
label{display:block; font-weight:600; margin: var(--space-2) 0 var(--space-1); font-size:14px}
input[type="email"], input[type="tel"]{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#0e0f12; color:var(--text); outline:none; font-size:15px;
}
input::placeholder{color:#768091; font-size:14px}
.checkbox{display:flex; align-items:flex-start; gap:10px; margin-top:8px}
.small{font-size:12.5px; color:var(--muted); line-height:1.45}
button{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  padding:12px 14px; margin-top:12px; border:0; border-radius:10px; cursor:pointer;
  font-weight:800; font-size:15px; letter-spacing:.2px;
  background:var(--brand); color:#0b0b0c; transition:transform .04s ease, filter .2s;
}
button:hover{filter:brightness(1.05)}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.65; cursor:not-allowed}

/* Messages */
.error{color:var(--danger); margin-top:8px; min-height:18px; font-size:13px}
.success{color:var(--ok); margin-top:8px; min-height:18px; font-size:13px}

/* ===== Ticket ===== */
.ticket{
  background:linear-gradient(180deg, #14161a, #101114);
  border:1px solid var(--border); border-radius:14px;
  padding:22px; max-width:460px; margin:28px auto 0; text-align:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.hr{height:1px; background:var(--border); margin:14px 0}

/* ===== Stripe Payment Element size tweaks ===== */
#payment-element{
  padding:8px; border:1px solid var(--border); border-radius:10px; background:#0e0f12;
}