:root{
  --glow: 0 0 24px rgba(124,107,255,.45);
}

body{
  background:
    radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 540px at 8% -4%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}

.site-header{
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.hero{
  position: relative;
  background:
    radial-gradient(720px 380px at 70% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    radial-gradient(560px 320px at 12% 12%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 60%);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(420px 220px at 50% 120%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  pointer-events:none;
}

.hero-title{
  letter-spacing: -0.02em;
  font-weight: 700;
  background: linear-gradient(105deg, var(--text), var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1,h2,h3{ letter-spacing:-0.01em; font-weight:700; }
h2 .badge, .section > .badge{ vertical-align:middle; }

.badge{
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
  border-radius:999px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.card,.feature{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 70%, var(--panel)), var(--panel));
  border:1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card{ position:relative; overflow:hidden; }
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity:0; transition: opacity .25s ease;
}
.card:hover,.feature:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 18px 40px rgba(0,0,0,.45), var(--glow);
}
.card:hover::before{ opacity:1; }

.feature .icon{
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 14px;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn{ border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn-primary{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2)));
  color: var(--on-accent);
  border:1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--glow), 0 10px 26px rgba(0,0,0,.4); filter:brightness(1.06); }
.btn-ghost{
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  border:1px solid var(--line); color:var(--text);
}
.btn-ghost:hover{ border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--glow); }

.fact{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 65%, var(--panel)), var(--panel));
  border:1px solid var(--line); border-radius: var(--radius);
}
.fact b{ color: var(--accent); }

.tab{
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-radius:999px; transition: all .2s ease;
}
.tab:hover{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tab.active{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
  color: var(--on-accent); border-color: transparent; box-shadow: var(--glow);
}

.tile{
  border:1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover{ transform: translateY(-3px) scale(1.01); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 16px 36px rgba(0,0,0,.45), var(--glow); }
.tile .gp{ color: var(--accent-2); }
.tile .nm{ color: var(--text); font-weight:600; }
.tile.noimg{
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
}

.faq-item{
  border:1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--glow); }
.faq-q{ color: var(--text); font-weight:600; }
.faq-a{ color: var(--prose); }

.article{ color: var(--prose); }
.article h2{
  color: var(--text);
  padding-left:.6rem;
  border-left:3px solid var(--accent);
}
.article a{ color: var(--accent-2); text-decoration: underline; text-underline-offset:3px; }
.article a:hover{ color: var(--accent); }

.table{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.table th{ background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--text); }
.table tr:nth-child(even) td{ background: color-mix(in srgb, var(--panel-2) 40%, transparent); }

.site-footer{ border-top:1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, var(--bg)); }