/* AkunaMedia — shared design system */
:root {
  --bg:       #09090e;
  --bg2:      #101018;
  --bg3:      #17171f;
  --accent:   #7c5cfc;
  --accent2:  #b085f5;
  --gold:     #e8b86d;
  --text:     #e8e8f0;
  --muted:    #8888a8;
  --border:   #252535;
  --radius:   12px;
  --warn:     #e85c5c;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; overflow-x:hidden;
}

/* ── NAV ───────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(9,9,14,.88); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 5%; display:flex; align-items:center;
  justify-content:space-between; height:64px;
}
.logo {
  font-size:1.1rem; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--accent2),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-decoration:none;
}
.logo span { -webkit-text-fill-color:var(--muted); font-weight:300; font-size:.85em; }
nav ul { list-style:none; display:flex; gap:1.75rem; }
nav ul a { color:var(--muted); text-decoration:none; font-size:.875rem; transition:color .2s; }
nav ul a:hover, nav ul a.active { color:var(--text); }
.nav-cta {
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:.45rem 1.1rem; border-radius:8px;
  font-size:.85rem; font-weight:600; text-decoration:none;
  transition:border-color .2s,background .2s;
}
.nav-cta:hover { border-color:var(--accent2); background:rgba(124,92,252,.08); }

/* ── PAGE HERO ──────────────────────────────────────────── */
.page-hero {
  padding:9rem 5% 5rem; text-align:center;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(124,92,252,.15) 0%,transparent 70%),
    var(--bg);
}
.page-hero .eyebrow {
  font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.75rem;
}
.page-hero h1 {
  font-size:clamp(2rem,5vw,3.75rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.08; margin-bottom:1.25rem;
  max-width:800px; margin-left:auto; margin-right:auto;
}
.page-hero h1 .grad {
  background:linear-gradient(120deg,var(--accent2) 0%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.page-hero p {
  color:var(--muted); font-size:clamp(.95rem,1.8vw,1.15rem);
  max-width:640px; margin:0 auto 2rem;
}

/* ── SECTION COMMONS ────────────────────────────────────── */
section { padding:5rem 5%; }
.section-label {
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent2); margin-bottom:.75rem;
}
h2 {
  font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:800;
  letter-spacing:-.03em; margin-bottom:1rem;
}
.section-intro { color:var(--muted); max-width:620px; font-size:1rem; }
p { color:var(--muted); line-height:1.7; }

/* ── CARDS ──────────────────────────────────────────────── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.75rem;
  transition:border-color .2s,transform .2s;
}
.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card h3 { font-size:1rem; font-weight:700; margin-bottom:.5rem; color:var(--text); }
.card p { font-size:.875rem; }
.card .card-label { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  background:linear-gradient(135deg,var(--accent),#5c3fcf); color:#fff;
  padding:.875rem 2rem; border-radius:10px; font-weight:600;
  font-size:1rem; text-decoration:none; display:inline-block;
  box-shadow:0 4px 24px rgba(124,92,252,.3);
  transition:transform .15s,box-shadow .15s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 30px rgba(124,92,252,.5); }
.btn-secondary {
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:.875rem 2rem; border-radius:10px; font-weight:500;
  font-size:1rem; text-decoration:none;
  transition:border-color .2s,background .2s;
}
.btn-secondary:hover { border-color:var(--accent2); background:rgba(124,92,252,.06); }

/* ── CONTACT FORM ───────────────────────────────────────── */
.form-block {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem; max-width:600px;
}
.form-group { margin-bottom:1.25rem; }
.form-group label {
  display:block; font-size:.7rem; font-weight:700;
  letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-bottom:.4rem;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:.9rem;
  font-family:inherit; padding:.7rem 1rem; outline:none;
  transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent2); }
.form-group select option { background:var(--bg3); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-submit {
  width:100%; background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:.875rem; font-size:.95rem;
  font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .2s,transform .1s;
}
.form-submit:hover { background:#6a4de8; transform:translateY(-1px); }
.form-note { color:var(--muted); font-size:.75rem; margin-top:.75rem; }

/* ── TODO BLOCKS ────────────────────────────────────────── */
.todo {
  border:2px dashed var(--gold); border-radius:var(--radius);
  padding:1.5rem 2rem; background:rgba(232,184,109,.05);
  color:var(--gold); font-size:.875rem; line-height:1.6; margin:1.5rem 0;
}
.todo strong { display:block; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.4rem; opacity:.8; }
.todo-critical {
  border-color:var(--warn); background:rgba(232,92,92,.05); color:var(--warn);
}
.draft-notice {
  background:rgba(232,184,109,.08); border-left:3px solid var(--gold);
  padding:1rem 1.5rem; border-radius:0 var(--radius) var(--radius) 0;
  font-size:.875rem; color:var(--gold); margin-bottom:2rem;
}
.draft-notice strong { display:block; margin-bottom:.25rem; }

/* ── PROOF STRIP ────────────────────────────────────────── */
.proof-strip {
  background:var(--bg2); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:2.5rem 5%; display:flex; gap:3rem; flex-wrap:wrap;
  align-items:center; justify-content:center; text-align:center;
}
.proof-stat .num {
  font-size:2rem; font-weight:900; letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--accent2),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.proof-stat p { font-size:.8rem; color:var(--muted); margin-top:.2rem; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:3rem 5%; display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-start;
}
.footer-brand .logo { font-size:.95rem; }
.footer-brand p { color:var(--muted); font-size:.8rem; margin-top:.5rem; max-width:240px; }
.footer-links h4 { font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; }
.footer-links ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:.85rem; transition:color .2s; }
.footer-links a:hover { color:var(--text); }
.footer-bottom {
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border);
  color:var(--muted); font-size:.75rem; width:100%;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:768px) {
  .form-row { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  nav ul { display:none; }
}