:root{
  --primary:#0057FF;
  --secondary:#0F172A;
  --accent:#4F46E5;

  --success:#10B981;
  --bg:#F8FAFC;
  --surface:#FFFFFF;

  --dark:#020617;
  --text:#0F172A;
  --muted:#64748B;
  --border:#E2E8F0;

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;

  --shadow:0 20px 60px rgba(0,0,0,.08);
  --shadow-sm:0 10px 30px rgba(0,0,0,.08);

  --glass: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.20);

  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* spacing scale */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;
  --sp-8:120px;

  --container: 1200px;

  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#020617;
  --surface: rgba(255,255,255,.06);
  --text:#E5E7EB;
  --muted:rgba(226,232,240,.72);
  --border: rgba(148,163,184,.25);
  --glass: rgba(15,23,42,.38);
  --glass-border: rgba(255,255,255,.16);
  --shadow:0 30px 80px rgba(0,0,0,.40);
  color-scheme: dark;
}

html,body{background:var(--bg); color:var(--text); font-family:var(--font-sans);}

h1,h2,h3,h4,h5{letter-spacing:-0.02em;}

/* Typography */
.hero-title{
  font-weight:800;
  line-height:1.05;
}

/* Focus */
:focus-visible{outline:2px solid rgba(0,87,255,.75); outline-offset:3px;}

/* Theme toggle */
.premium-theme-toggle{
  display:flex; align-items:center; gap:10px;
  height:40px; padding:0 14px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor:pointer;
  color:var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
}
.premium-theme-toggle:hover{transform:translateY(-1px); box-shadow: 0 20px 55px rgba(0,0,0,.14);} 
.premium-theme-toggle .dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2));
  box-shadow: 0 0 0 4px rgba(79,70,229,.15);
}

/* Glass navbar accents (non-destructive) */
.main-header.header-style-one,
.sticky-header,
.header-lower,
.main-header .header-upper{
  /* keep existing layout; add only subtle glass */
}

.main-header.header-style-one{
  background: transparent;
}

/* Scroll progress */
.premium-scroll-progress{
  position:fixed; left:0; top:0; height:3px; width:100%;
  z-index:9999;
  pointer-events:none;
  background: transparent;
}
.premium-scroll-progress > .bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 20px rgba(0,87,255,.35);
  transition: width .1s linear;
}

/* Cursor glow */
.premium-cursor-glow{
  position:fixed; inset:0; pointer-events:none; z-index:9998;
}
.premium-cursor-glow::before{
  content:"";
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background: radial-gradient(circle at center, rgba(79,70,229,.24), rgba(0,87,255,.10) 35%, rgba(0,87,255,0) 60%);
  transform: translate3d(-50%,-50%,0);
  left: -1000px; top:-1000px;
  filter: blur(8px);
  opacity: .9;
}

/* Premium button overlay (works with existing .theme-btn) */
.theme-btn{
  position:relative;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.theme-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.theme-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 55px rgba(0,87,255,.18);
}
.theme-btn:hover::after{opacity:1;}

/* Glass card primitives */
.premium-glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Improve default page spacing without breaking structure */
.container{max-width: var(--container);}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important;}
}