/* =========================================================================
   HEPTHEX EVENTS — Design tokens & public site styles
   Palette: white / near-white gradient ground, ink-black text,
   indigo→violet accent (brand energy), cyan secondary accent.
   Display face: Blanka (brand + numerals). Body face: Plus Jakarta Sans.
   Signature motif: faint hexagon lattice, echoing "HEX" + the logo's
   triangular facets.
   ========================================================================= */

@font-face {
  font-family: 'Blanka';
  src: url('../fonts/Blanka-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink:        #14161c;
  --ink-soft:   #5c6070;
  --ink-faint:  #9296a3;

  --bg-0:       #ffffff;
  --bg-1:       #f6f7fb;
  --bg-2:       #eef0f8;

  --accent:     #4338ca;
  --accent-2:   #7c3aed;
  --accent-cyan:#06b6d4;

  --male:       #4338ca;
  --female:     #db2777;

  --success:    #15803d;
  --success-bg: #ecfdf3;
  --danger:     #dc2626;
  --danger-bg:  #fef2f2;

  --border:     #e6e8f0;
  --border-soft:#eef0f6;

  --shadow-sm:  0 1px 2px rgba(20,22,28,.04), 0 1px 1px rgba(20,22,28,.03);
  --shadow-md:  0 8px 24px rgba(20,22,28,.08), 0 2px 6px rgba(20,22,28,.04);
  --shadow-lg:  0 24px 64px rgba(20,22,28,.14), 0 8px 20px rgba(20,22,28,.06);

  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  --font-body:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Blanka', var(--font-body);

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(6,182,212,.07), transparent 55%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Signature hex-lattice backdrop ---------- */
.hex-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    linear-gradient(30deg, rgba(67,56,202,.045) 12%, transparent 12.5%, transparent 87%, rgba(67,56,202,.045) 87.5%, rgba(67,56,202,.045)),
    linear-gradient(150deg, rgba(67,56,202,.045) 12%, transparent 12.5%, transparent 87%, rgba(67,56,202,.045) 87.5%, rgba(67,56,202,.045)),
    linear-gradient(30deg, rgba(67,56,202,.045) 12%, transparent 12.5%, transparent 87%, rgba(67,56,202,.045) 87.5%, rgba(67,56,202,.045)),
    linear-gradient(150deg, rgba(67,56,202,.045) 12%, transparent 12.5%, transparent 87%, rgba(67,56,202,.045) 87.5%, rgba(67,56,202,.045));
  background-size:64px 112px;
  background-position:0 0, 0 0, 32px 56px, 32px 56px;
  mask-image: radial-gradient(1200px 700px at 50% 0%, #000 30%, transparent 78%);
}

.wrap{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

/* ---------- Top bar: live counter ---------- */
.topbar{
  display:flex; justify-content:flex-end; align-items:center;
  padding:20px clamp(16px,4vw,40px) 0;
}
.counter-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 16px 8px 12px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  box-shadow:var(--shadow-sm);
}
.counter-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 0 rgba(21,128,61,.5);
  animation:pulse 2s infinite;
}
.counter-pill strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(21,128,61,.45); }
  70%{ box-shadow:0 0 0 8px rgba(21,128,61,0); }
  100%{ box-shadow:0 0 0 0 rgba(21,128,61,0); }
}

/* ---------- Main stage ---------- */
.stage{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:24px clamp(16px,5vw,40px) 40px;
}

.card{
  width:100%; max-width:480px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(28px,5vw,44px);
  animation:rise .7s var(--ease) both;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(18px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.brand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin-bottom:8px; }
.brand-logo{
  width:76px; height:76px; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-md);
  animation:float 5s ease-in-out infinite;
}
.brand-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.event-name{
  font-family:var(--font-event, var(--font-display));
  font-weight:700;
  letter-spacing:.01em;
  font-size:clamp(24px,5vw,32px);
  line-height:1.15;
  color:var(--ink);
  text-transform:uppercase;
}
.event-sub{ color:var(--ink-soft); font-size:14px; margin-top:-8px; }

/* ---------- Form ---------- */
.form{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.field .req{ color:var(--accent-2); }

.input, select.input{
  appearance:none;
  width:100%;
  padding:13px 14px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--border);
  background:#fff;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .1s var(--ease);
}
.input::placeholder{ color:var(--ink-faint); }
.input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(67,56,202,.12);
}
.input.error{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(220,38,38,.08); }
.field-error{ font-size:12.5px; color:var(--danger); min-height:1px; }

.mobile-row{ display:flex; gap:8px; }
.mobile-row .prefix{
  flex:0 0 64px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--ink-soft); font-weight:600; font-size:14px; background:#fbfbfd;
}

.gender-group{ display:flex; gap:10px; }
.gender-opt{ flex:1; position:relative; }
.gender-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.gender-opt .box{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 10px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:#fff;
  font-weight:600; font-size:14.5px; color:var(--ink-soft);
  transition:all .18s var(--ease);
  cursor:pointer; user-select:none;
}
.gender-opt input:checked + .box{
  border-color:var(--accent);
  background:linear-gradient(135deg, rgba(67,56,202,.08), rgba(124,58,237,.08));
  color:var(--accent);
  box-shadow:0 0 0 4px rgba(67,56,202,.1);
}
.gender-opt input:focus-visible + .box{ outline:2px solid var(--accent); outline-offset:2px; }

.btn{
  appearance:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:15.5px;
  padding:15px 20px; border-radius:var(--radius-sm);
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 24px -8px rgba(67,56,202,.55);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(67,56,202,.6); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn.btn-block{ width:100%; margin-top:6px; }
.btn .spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.btn.loading .spinner{ display:inline-block; }
.btn.loading .btn-label{ opacity:.85; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-note{ font-size:12.5px; color:var(--ink-faint); text-align:center; margin-top:4px; }

/* ---------- Footer ---------- */
.site-footer{
  text-align:center; padding:18px 16px 26px;
  color:var(--ink-faint); font-size:13px;
  position:relative; z-index:1;
}
.site-footer .powered{ display:inline-flex; align-items:center; gap:6px; }
.site-footer .hepthex{
  font-family:var(--font-display);
  font-size:15px; letter-spacing:.03em;
  background:linear-gradient(135deg, var(--accent), var(--accent-cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-decoration:none;
  transition:opacity .15s var(--ease);
}
.site-footer .hepthex:hover{ opacity:.75; }

/* ---------- Full-screen overlays (thank-you / pass) ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1000px 600px at 20% 0%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(6,182,212,.14), transparent 55%),
    linear-gradient(160deg, #0f1016 0%, #17181f 60%, #1c1e28 100%);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.overlay.show{ opacity:1; visibility:visible; }

.pass-card{
  width:100%; max-width:420px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(20px);
  padding:clamp(28px,6vw,48px);
  text-align:center;
  color:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:scale(.94); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.overlay.show .pass-card{ transform:scale(1); opacity:1; }

.check-badge{
  width:64px; height:64px; margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--success), #22c55e);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(34,197,94,.6);
  animation:pop .5s var(--ease) .1s both;
}
@keyframes pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
.check-badge svg{ width:30px; height:30px; }

.thankyou-title{ font-family:var(--font-display); font-size:clamp(22px,5vw,28px); text-transform:uppercase; margin:0 0 8px; }
.thankyou-msg{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.5; margin:0; }

.pass-logo{ width:64px; height:64px; border-radius:16px; overflow:hidden; margin:0 auto 18px; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.pass-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pass-event{ font-family:var(--font-event, var(--font-display)); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:6px; }
.pass-name{ font-size:20px; font-weight:700; margin-bottom:18px; }
.pass-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:6px; }
.pass-number{
  font-family:var(--font-display);
  font-size:clamp(34px,10vw,52px);
  letter-spacing:.03em;
  background:linear-gradient(135deg, #fff, #c7d2fe);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 22px;
}
.pass-meta{ display:flex; justify-content:center; gap:22px; font-size:13px; color:rgba(255,255,255,.55); margin-bottom:26px; }
.pass-meta b{ color:#fff; font-weight:700; }
.pass-hint{ font-size:12.5px; color:rgba(255,255,255,.4); margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:6px; }
.pass-hint .pulse-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-cyan); animation:pulse2 1.6s infinite; }
@keyframes pulse2{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.insta-follow{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-bottom:14px; padding:13px 18px;
  border-radius:var(--radius-sm); text-decoration:none;
  color:#fff; font-weight:700; font-size:14px;
  background:linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4);
  box-shadow:0 10px 24px -8px rgba(221,42,123,.55);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.insta-follow:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(221,42,123,.6); }
.insta-follow svg{ width:18px; height:18px; flex:0 0 18px; }

.btn-ghost{
  appearance:none; cursor:pointer; width:100%;
  padding:13px 18px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-weight:600; font-size:14px;
  transition:background .2s var(--ease);
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); }

@media (max-width:420px){
  .pass-meta{ gap:14px; }
}

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