@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

:root {
  --purple: #7b2cff;
  --purple-mid: #9f4dff;
  --pink: #ff4db8;
  --dark: #07071d;
  --black: #0d0d1f;
  --off-white: #f8f6ff;
  --cream: #f2eeff;
  --mid: #5a5a78;
  --border: rgba(123,44,255,.13);
  --border-soft: rgba(123,44,255,.08);
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--off-white);
  color: var(--black);
  overflow-x: hidden;
  line-height: 1.6;
}

.container {
  width: calc(100% - 100px);
  max-width: 1600px;
  margin: 0 auto;
}

/* ── LOGO ── */
.logo { display:inline-flex; flex-direction:column; align-items:flex-start; text-decoration:none; }
.logo-main { font-size:clamp(22px,2.5vw,32px); font-weight:900; letter-spacing:-2px; line-height:1; color:var(--black); }
.logo-main span { color:var(--purple); }
.logo-main small { font-size:12px; background:var(--black); color:#fff; padding:2px 6px; border-radius:4px; margin-left:3px; vertical-align:middle; letter-spacing:0; font-weight:700; }
.logo-tag { font-size:9px; font-weight:800; letter-spacing:5px; color:#1a1a2e; margin-top:4px; }
.logo-tag span { color:var(--pink); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-family:'Inter',sans-serif; font-weight:600; border-radius:999px; text-decoration:none; transition:all .2s; }
.btn-primary { background:linear-gradient(90deg,var(--purple),var(--pink)); color:#fff; padding:13px 26px; font-size:14px; box-shadow:0 8px 22px rgba(123,44,255,.28); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(123,44,255,.38); }
.btn-secondary { background:#fff; color:var(--purple); padding:12px 24px; font-size:14px; border:1.5px solid var(--border); }
.btn-secondary:hover { background:rgba(123,44,255,.06); }
.btn-dark { background:var(--black); color:#fff; padding:13px 26px; font-size:14px; }
.btn-dark:hover { background:#1a1a2e; }
.btn-sm { padding:9px 18px; font-size:13px; }
.btn-danger { background:var(--danger); color:#fff; padding:10px 20px; font-size:13px; }
.btn-success { background:var(--success); color:#fff; padding:10px 20px; font-size:13px; }

/* ── NAV ── */
nav.main-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:padding .3s, background .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
nav.main-nav.scrolled {
  background:rgba(248,246,255,.95);
  backdrop-filter:blur(20px);
  border-color:var(--border);
  padding:13px 0;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--purple); }
.nav-cta {
  background:linear-gradient(90deg,var(--purple),var(--pink)) !important;
  color:#fff !important; padding:11px 22px; border-radius:999px;
  font-weight:700 !important; box-shadow:0 8px 22px rgba(123,44,255,.25);
}
.nav-cta:hover { transform:translateY(-2px); }

/* ── FOOTER ── */
footer.main-footer { background:var(--dark); padding:80px 0 40px; }
footer.main-footer .logo-main { color:#fff; }
footer.main-footer .logo-main small { background:#fff; color:var(--dark); }
footer.main-footer .logo-tag { color:rgba(255,255,255,.3); }
.footer-top { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:56px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:40px; }
.f-bio { margin-top:18px; font-size:14px; font-weight:300; color:rgba(255,255,255,.38); line-height:1.8; }
.f-socials { display:flex; gap:10px; margin-top:24px; }
.soc { width:38px; height:38px; border:1px solid rgba(255,255,255,.1); border-radius:50%; display:grid; place-items:center; text-decoration:none; color:rgba(255,255,255,.45); font-size:13px; font-weight:700; transition:border-color .2s, color .2s; }
.soc:hover { border-color:var(--pink); color:var(--pink); }
.f-col h4 { font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:22px; }
.f-col ul { list-style:none; display:grid; gap:12px; }
.f-col a { font-size:14px; font-weight:300; color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s; }
.f-col a:hover { color:var(--pink); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.f-copy { font-size:13px; font-weight:300; color:rgba(255,255,255,.22); }
.f-email { display:flex; align-items:center; gap:12px; text-decoration:none; }
.f-mail-icon { width:40px; height:40px; border-radius:50%; background:var(--pink); display:grid; place-items:center; font-size:17px; }
.f-mail-lbl { font-size:11px; color:rgba(255,255,255,.3); font-weight:400; }
.f-mail-addr { font-size:14px; font-weight:700; color:var(--pink); }

/* ── SECTION HELPERS ── */
.section { padding:120px 0; }
.section.dark { background:var(--dark); }
.section.tinted { background:var(--cream); }
.section-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--purple); margin-bottom:16px; opacity:.85; }
.section-eyebrow::before { content:''; display:block; width:22px; height:2px; background:linear-gradient(90deg,var(--purple),var(--pink)); border-radius:99px; }
h2.s-title { font-size:clamp(34px,4.5vw,58px); font-weight:900; letter-spacing:-2px; line-height:1.05; margin-bottom:16px; }
h2.s-title span { color:var(--purple); }
h2.s-title.light { color:#fff; }
h2.s-title.light span { color:var(--pink); }
.s-sub { font-size:18px; font-weight:300; line-height:1.75; color:var(--mid); max-width:580px; margin-bottom:60px; }
.s-sub.light { color:rgba(255,255,255,.45); }

/* ── MARQUEE ── */
.marquee-wrap { overflow:hidden; padding:20px 0; background:var(--dark); border-top:1px solid rgba(123,44,255,.2); border-bottom:1px solid rgba(123,44,255,.2); }
.marquee-track { display:flex; animation:marquee 24s linear infinite; white-space:nowrap; }
.m-item { display:inline-flex; align-items:center; gap:18px; padding:0 32px; font-size:11px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.5); }
.m-dot { width:6px; height:6px; border-radius:50%; background:var(--pink); flex:0 0 6px; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── COOKIE ── */
.cookie-popup { position:fixed; right:24px; bottom:24px; width:380px; max-width:calc(100% - 28px); background:rgba(255,255,255,.97); border:1px solid rgba(123,44,255,.13); border-radius:28px; padding:24px; overflow:hidden; box-shadow:0 24px 60px rgba(35,20,80,.13); backdrop-filter:blur(18px); z-index:9999; animation:ckIn .55s cubic-bezier(.22,1,.36,1); }
@keyframes ckIn { from{opacity:0;transform:translateY(28px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.ck-glow { position:absolute; width:150px; height:150px; background:radial-gradient(circle,rgba(123,44,255,.18),transparent 70%); top:-75px; right:-75px; pointer-events:none; }
.ck-top { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ck-emoji { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--purple),var(--purple-mid)); color:#fff; font-size:26px; }
.ck-brand { font-size:20px; font-weight:900; letter-spacing:-1px; color:#111; }
.ck-sub { font-size:12px; color:var(--purple); font-weight:700; margin-top:2px; }
.ck-text { font-size:13px; line-height:1.65; color:#555; margin-bottom:20px; }
.ck-btns { display:flex; gap:10px; }
.ck-btn { flex:1; height:46px; border:none; border-radius:12px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:.2s; }
.ck-btn.pref { background:#f3efff; color:var(--purple); }
.ck-btn.pref:hover { background:#ece4ff; }
.ck-btn.acc { background:linear-gradient(90deg,var(--purple),var(--pink)); color:#fff; }
.ck-btn.acc:hover { transform:translateY(-1px); }

/* ── FORMS ── */
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--black); margin-bottom:7px; }
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px; font-weight:400;
  color:var(--black);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(123,44,255,.1);
}
.form-group textarea { resize:vertical; min-height:110px; }

/* ── ALERTS ── */
.alert { padding:14px 18px; border-radius:12px; font-size:14px; font-weight:500; margin-bottom:20px; }
.alert-success { background:rgba(34,197,94,.1); color:#15803d; border:1px solid rgba(34,197,94,.25); }
.alert-error { background:rgba(239,68,68,.1); color:#b91c1c; border:1px solid rgba(239,68,68,.25); }
.alert-warning { background:rgba(245,158,11,.1); color:#92400e; border:1px solid rgba(245,158,11,.25); }
.alert-info { background:rgba(123,44,255,.08); color:var(--purple); border:1px solid var(--border); }

/* ── BADGE ── */
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.3px; }
.badge-purple { background:rgba(123,44,255,.12); color:var(--purple); }
.badge-pink { background:rgba(255,77,184,.12); color:var(--pink); }
.badge-green { background:rgba(34,197,94,.12); color:#15803d; }
.badge-yellow { background:rgba(245,158,11,.12); color:#92400e; }
.badge-red { background:rgba(239,68,68,.12); color:#b91c1c; }
.badge-gray { background:rgba(90,90,120,.1); color:var(--mid); }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; border-radius:16px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--cream); padding:14px 18px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--mid); text-align:left; border-bottom:1px solid var(--border); }
tbody tr { border-bottom:1px solid rgba(123,44,255,.06); transition:background .15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(123,44,255,.03); }
tbody td { padding:14px 18px; font-size:14px; font-weight:400; color:var(--black); vertical-align:middle; }

/* ── CARD ── */
.card { background:#fff; border:1px solid var(--border-soft); border-radius:20px; padding:28px; box-shadow:0 4px 20px rgba(123,44,255,.06); }
.card-title { font-size:16px; font-weight:700; margin-bottom:6px; }
.card-sub { font-size:13px; color:var(--mid); font-weight:400; }

/* ── PORTAL SIDEBAR ── */
.portal-layout { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.sidebar { background:var(--dark); padding:28px 0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar-logo { padding:0 24px 28px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:24px; }
.sidebar-nav { list-style:none; padding:0 12px; flex:1; }
.sidebar-nav li { margin-bottom:4px; }
.sidebar-nav a { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; text-decoration:none; font-size:14px; font-weight:500; color:rgba(255,255,255,.55); transition:all .2s; }
.sidebar-nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar-nav a.active { background:linear-gradient(90deg,rgba(123,44,255,.3),rgba(255,77,184,.15)); color:#fff; }
.sidebar-nav .nav-icon { font-size:17px; flex:0 0 20px; }
.sidebar-section { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.2); padding:18px 26px 8px; }
.sidebar-footer { padding:16px 24px; border-top:1px solid rgba(255,255,255,.07); }
.sidebar-user { display:flex; align-items:center; gap:12px; }
.sidebar-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--pink)); display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; flex:0 0 38px; }
.sidebar-name { font-size:13px; font-weight:600; color:#fff; }
.sidebar-role { font-size:11px; color:rgba(255,255,255,.35); margin-top:1px; }
.portal-main { padding:40px 48px; background:var(--off-white); overflow-y:auto; }
.portal-header { margin-bottom:36px; }
.portal-title { font-size:28px; font-weight:900; letter-spacing:-1px; margin-bottom:6px; }
.portal-sub { font-size:15px; font-weight:300; color:var(--mid); }

/* ── STATS ROW ── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; }
.stat-card { background:#fff; border:1px solid var(--border-soft); border-radius:16px; padding:24px; }
.stat-card-num { font-size:32px; font-weight:900; letter-spacing:-1px; color:var(--purple); line-height:1; }
.stat-card-label { font-size:13px; color:var(--mid); font-weight:500; margin-top:6px; }
.stat-card-trend { font-size:12px; font-weight:600; margin-top:8px; }
.trend-up { color:var(--success); }
.trend-down { color:var(--danger); }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .stats-row { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .container { width:calc(100% - 48px); }
  .nav-links { display:none; }
  .section { padding:80px 0; }
  .portal-layout { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; }
  .portal-main { padding:24px 20px; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .stats-row { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px) {
  .container { width:calc(100% - 32px); }
  .stats-row { grid-template-columns:1fr; }
  .cookie-popup { left:12px; right:12px; bottom:12px; width:auto; border-radius:20px; }
}