:root{
  --ink:#e6e6e6;
  --bg:#000;
  --panel:#101216;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --font:"Century Gothic", Arial, sans-serif;

  /* Defaults (override per theme) */
  --accent:#6c8cff;
  --accent2:#7a4dff;
}

/* THEME OVERRIDES */
.theme-portfolio{
  --accent:#6c8cff;   /* blue */
  --accent2:#7a4dff;  /* violet */
}
.theme-options{
  --accent:#0aa880;   /* teal */
  --accent2:#06615a;  /* deep green */
}

/* BASE */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.6;
  padding:20px;
}
main{max-width:1100px;margin:0 auto}

/* HERO */
.hero{ text-align:center; margin:12px 0 28px; }
.hero h1{
  font-size:clamp(28px,3.2vw,46px);
  letter-spacing:.3px;
  margin-bottom:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}
.hero p{ color:#cfd3dc; font-size:clamp(15px,1.6vw,18px); opacity:.95; }

/* VIDEO HIGHLIGHT */
.video-highlight{
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 20%, transparent),
                                      color-mix(in srgb, var(--accent2) 20%, transparent));
  border:1px solid color-mix(in srgb, var(--accent2) 30%, transparent);
  padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);
  margin:26px 0 34px; text-align:center;
}
.video-highlight h2{
  font-size:clamp(18px,2vw,26px); margin-bottom:14px; color:#fff;
  font-weight:700; letter-spacing:.2px; text-transform:uppercase;
}
.video-wrapper{ max-width:900px;margin:0 auto;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.4); }
.video-wrapper video{ width:100%; height:auto; display:block; }

/* PANELS */
.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px;
  margin:18px 0;
  box-shadow:var(--shadow);
}
.panel h3{ font-size:22px; margin-bottom:10px; font-weight:800; color:#fff; }

/* GRID */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

/* BULLETS */
.bullet ul{ list-style:none; }
.bullet li{
  position:relative; padding-left:18px; margin:8px 0; color:#dfe3ec;
}
.bullet li::before{
  content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent2) 25%, transparent);
}

/* STATS */
.stat{
  background:linear-gradient(150deg, #172032, #141827);
  border:1px solid color-mix(in srgb, var(--accent2) 30%, transparent);
  border-radius:14px; padding:16px; text-align:center;
}
.stat .big{ font-size:28px; font-weight:900; color:#fff; }
.stat .sub{ color:#cfd3dc; font-size:14px; }

/* CTA */
.cta{
  text-align:center; margin:30px 0 10px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.btn{
  display:inline-block; padding:12px 22px; border-radius:999px;
  text-decoration:none; font-weight:800; letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:inset 0 -2px rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.35);
  color:#fff !important;
}
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.btn-dark{ background:#0e1220; border:1px solid rgba(255,255,255,.12); }
.btn:hover{ transform:translateY(-2px); }

.fine{ color:#aab2c4; font-size:13.5px; text-align:center; margin-top:8px; }
.fine a{ color:var(--accent); text-decoration:underline; }

/* Hyper theme */
.theme-hyper{
  --accent:#0cb3b0;   /* aqua */
  --accent2:#14738f;  /* deep teal */
}