/* ================================================================
   HAZTEUNSITIO — main.css  v2
   Dark luxury tech · Syne + Plus Jakarta Sans
   ================================================================ */

:root {
  --ink:       #06060F;
  --ink-2:     #0D0D1E;
  --ink-3:     #13132A;
  --ink-4:     #1A1A35;
  --ink-5:     #22224A;
  --violet:    #7C3AED;
  --violet-d:  #5B21B6;
  --violet-l:  #9D6FFF;
  --violet-xl: #C4A8FF;
  --violet-bg: rgba(124,58,237,.1);
  --violet-glow: rgba(124,58,237,.35);
  --gold:      #F59E0B;
  --gold-l:    #FCD34D;
  --gold-bg:   rgba(245,158,11,.1);
  --cyan:      #06B6D4;
  --cyan-l:    #67E8F9;
  --cyan-bg:   rgba(6,182,212,.1);
  --text-1:    #EEEEFF;
  --text-2:    rgba(238,238,255,.65);
  --text-3:    rgba(238,238,255,.38);
  --text-4:    rgba(238,238,255,.18);
  --border-1:  rgba(255,255,255,.07);
  --border-2:  rgba(255,255,255,.13);
  --border-3:  rgba(255,255,255,.22);
  --border-v:  rgba(124,58,237,.45);
  --surface-1: rgba(255,255,255,.03);
  --surface-2: rgba(255,255,255,.055);
  --surface-3: rgba(255,255,255,.09);
  --font-d:    'Syne', system-ui, sans-serif;
  --font-b:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-m:    'JetBrains Mono', 'Fira Code', monospace;
  --r-xs: 5px; --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 26px; --r-2xl: 36px; --r-pill: 9999px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-d);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-1);
  letter-spacing: -.025em;
}
a { color: var(--violet-l); text-decoration: none; transition: color .18s; }
a:hover { color: var(--text-1); }
img { max-width:100%; height:auto; display:block; }
button { cursor:pointer; font-family:var(--font-b); border:none; }
input,textarea,select { font-family:var(--font-b); }
ul,ol { list-style:none; }

.container { max-width:1160px; margin:0 auto; padding:0 28px; }
.container--sm { max-width:760px; }
.container--lg { max-width:1360px; }

/* ── Gradient text ── */
.g-text {
  background: linear-gradient(135deg, var(--violet-xl) 0%, var(--violet-l) 45%, var(--cyan-l) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.g-text-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-l) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-d); font-weight:600; font-size:14px; letter-spacing:.015em;
  border-radius:var(--r-sm); cursor:pointer; white-space:nowrap;
  transition:all .22s var(--ease); text-decoration:none; position:relative;
  border:1px solid transparent;
}
.btn-primary {
  background:var(--violet); color:#fff; padding:12px 24px;
  border-color:rgba(157,111,255,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 4px 24px rgba(124,58,237,.35);
}
.btn-primary:hover {
  background:var(--violet-l); color:#fff; transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 8px 36px rgba(124,58,237,.55);
}
.btn-primary:active { transform:translateY(0); }
.btn-outline {
  background:var(--surface-1); color:var(--text-1);
  padding:11px 22px; border-color:var(--border-2);
  backdrop-filter:blur(12px);
}
.btn-outline:hover {
  background:var(--surface-2); color:var(--text-1);
  border-color:var(--border-v); transform:translateY(-1px);
  box-shadow:0 0 0 1px var(--border-v), 0 0 24px var(--violet-bg);
}
.btn-ghost {
  background:transparent; color:var(--text-3);
  padding:11px 18px; border-color:transparent;
}
.btn-ghost:hover { color:var(--text-1); background:var(--surface-1); border-color:var(--border-1); }
.btn-gold {
  background:linear-gradient(135deg,var(--gold),#F97316); color:#1a0800;
  padding:12px 24px; font-weight:700;
  box-shadow:0 4px 24px rgba(245,158,11,.3);
}
.btn-gold:hover { color:#1a0800; transform:translateY(-2px); box-shadow:0 8px 36px rgba(245,158,11,.45); }
.btn-sm  { padding:7px 16px; font-size:13px; border-radius:var(--r-xs); }
.btn-lg  { padding:14px 32px; font-size:15px; border-radius:var(--r-md); }
.btn-xl  { padding:17px 44px; font-size:16px; border-radius:var(--r-lg); letter-spacing:.02em; }
.btn-block { display:flex; width:100%; }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-m); font-size:10.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  padding:4px 12px; border-radius:var(--r-pill); border:1px solid;
}
.badge-violet { background:var(--violet-bg); color:var(--violet-xl); border-color:rgba(124,58,237,.3); }
.badge-gold   { background:var(--gold-bg);   color:var(--gold-l);   border-color:rgba(245,158,11,.3); }
.badge-cyan   { background:var(--cyan-bg);   color:var(--cyan-l);   border-color:rgba(6,182,212,.3);  }
.badge-green  { background:rgba(34,197,94,.08); color:#86EFAC; border-color:rgba(34,197,94,.25); }
.badge-dot::before { content:''; display:block; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.8; }

/* ── Section layout ── */
.section { padding:108px 0; }
.section-sm { padding:72px 0; }
.section-header { text-align:center; max-width:640px; margin:0 auto 72px; }
.section-eyebrow {
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:var(--font-m); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.section-eyebrow::before,.section-eyebrow::after {
  content:''; display:block; width:28px; height:1px;
  background:linear-gradient(90deg,transparent,var(--violet-l));
}
.section-eyebrow::after { background:linear-gradient(90deg,var(--violet-l),transparent); }
.section-title { font-size:clamp(1.75rem,4vw,2.75rem); margin-bottom:18px; }
.section-sub { font-size:1.05rem; color:var(--text-3); line-height:1.8; }

/* ── Card ── */
.card {
  background:var(--surface-1); border:1px solid var(--border-1);
  border-radius:var(--r-xl); padding:28px;
  transition:all .25s var(--ease);
}
.card:hover {
  background:var(--surface-2); border-color:var(--border-2);
  transform:translateY(-4px); box-shadow:0 12px 48px rgba(0,0,0,.5);
}
.card-glow:hover { border-color:var(--border-v); box-shadow:0 0 0 1px var(--border-v),0 0 32px var(--violet-bg),0 12px 48px rgba(0,0,0,.5); }

/* ── Form ── */
.form-group { margin-bottom:22px; }
.form-label {
  display:block; font-family:var(--font-d); font-size:12.5px;
  font-weight:600; letter-spacing:.04em; color:var(--text-3); margin-bottom:8px;
  text-transform:uppercase;
}
.form-control {
  width:100%; padding:12px 16px;
  background:var(--surface-1); border:1px solid var(--border-1);
  border-radius:var(--r-sm); font-family:var(--font-b); font-size:15px;
  color:var(--text-1); outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-control:hover { border-color:var(--border-2); background:var(--surface-2); }
.form-control:focus {
  border-color:var(--violet); background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
}
.form-control::placeholder { color:var(--text-4); }
textarea.form-control { resize:vertical; min-height:100px; }

/* ── Alerts ── */
.alert {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 18px; border-radius:var(--r-sm); font-size:14px; margin-bottom:20px; border:1px solid;
}
.alert-error   { background:rgba(239,68,68,.08);  color:#FCA5A5; border-color:rgba(239,68,68,.25); }
.alert-success { background:rgba(34,197,94,.08);  color:#86EFAC; border-color:rgba(34,197,94,.25); }
.alert-info    { background:var(--violet-bg); color:var(--violet-xl); border-color:rgba(124,58,237,.3); }

/* ── Spinner ── */
.spinner {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.2);
  border-top-color:#fff; border-radius:50%;
  animation:spin .65s linear infinite; display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Divider ── */
.divider {
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--border-2) 30%,var(--border-2) 70%,transparent);
}

@media (max-width:768px) {
  .container { padding:0 20px; }
  .section { padding:72px 0; }
  .hide-mobile { display:none !important; }
}
@media (min-width:769px) { .hide-desktop { display:none !important; } }