/* ========= Base (clean) ========= */
:root{
  --radius: 18px;
  --radius-sm: 14px;
  --maxw: 1120px;
  --shadow: 0 18px 55px rgba(0,0,0,.18);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.12);

  /* light (default) */
  --bg: #f6f7fb;
  --surface: rgba(255,255,255,.78);
  --surface2: rgba(255,255,255,.92);
  --stroke: rgba(16,24,40,.10);
  --text: rgba(16,24,40,.92);
  --muted: rgba(16,24,40,.62);
  --muted2: rgba(16,24,40,.50);
  --brand: #ffd400;
  --brand2:#7c3aed;
  --link: rgba(16,24,40,.90);

  --nav-bg: rgba(255,255,255,.72);
  --nav-stroke: rgba(16,24,40,.10);
}

html[data-theme="dark"]{
  --bg: #070915;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);
  --muted2: rgba(255,255,255,.50);
  --brand: #ffd400;
  --brand2:#22d3ee;
  --link: rgba(255,255,255,.92);

  --nav-bg: rgba(7,9,21,.65);
  --nav-stroke: rgba(255,255,255,.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

a{ color: var(--link); text-decoration:none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
img{ max-width:100%; height:auto; display:block; }
svg{ max-width:100%; height:auto; }

.container{
  width: min(var(--maxw), calc(100% - 44px));
  margin-inline:auto;
}

/* Subtle background overlay behind particles */
.bg-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(1000px 650px at 90% 25%, rgba(34,211,238,.14), transparent 55%);
  opacity: .55;
}

html[data-theme="dark"] .bg-overlay{ opacity:.75; }

/* particles container (if present) */
#particles-js{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
}

/* Utility */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: var(--surface2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font-weight:800;
  text-decoration:none;
  user-select:none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); text-decoration:none; }
.btn:active{ transform: translateY(0) scale(.99); }
.btn.primary{
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.88));
  border-color: transparent;
  color: rgba(255,255,255,.95);
}
.btn.dark{
  background: rgba(0,0,0,.88);
  border-color: rgba(0,0,0,.18);
  color: #fff;
}
html[data-theme="dark"] .btn.dark{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}