.site-header{
  background:linear-gradient(180deg,var(--panel),var(--bg));
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 18px rgba(0,0,0,.4);
}

body{
  background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
    radial-gradient(700px 400px at 10% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent),
    var(--bg);
}

.hero{
  position:relative;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 40%, var(--accent-2)) 55%,var(--accent-2));
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:50% -20% -20% -20%;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in srgb,var(--accent-2) 70%, white) 38px 40px),
    repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb,var(--accent-2) 70%, white) 38px 40px);
  transform:perspective(300px) rotateX(62deg);
  transform-origin:top center;
  opacity:.45;
  pointer-events:none;
  mask-image:linear-gradient(180deg, transparent, black 40%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.16) 2px 4px);
  pointer-events:none;
  opacity:.5;
}
.hero .container{position:relative;z-index:1}

.hero-title{
  color:var(--text);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-shadow:0 0 8px var(--accent), 0 0 18px var(--accent-2);
}
.hero-sub{color:var(--text);font-weight:600}

h1,h2,h3{
  font-weight:700;
  letter-spacing:.02em;
}
.section h2{
  text-shadow:0 0 6px color-mix(in srgb,var(--accent) 50%, transparent);
}

.fact{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 18%, transparent);
}
.fact b{color:var(--accent)}

.btn{
  border-radius:var(--radius);
  border:1px solid var(--line);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%, transparent);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 22px var(--accent),0 0 30px var(--accent-2)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 40%, transparent)}

.card,.feature{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,.feature:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 10px 30px color-mix(in srgb,var(--accent-2) 30%, transparent);
}

.feature .icon{
  color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:var(--radius);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%, transparent);
}

.badge{
  background:color-mix(in srgb,var(--panel-2) 80%, transparent);
  border:1px solid var(--line);
  color:var(--accent);
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.tab{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-2);
  transition:all .15s ease;
}
.tab:hover{color:var(--text);border-color:var(--accent)}
.tab.active{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 50%, transparent);
}

.tile{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 40%, transparent);
}
.tile.noimg{
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb,var(--accent-2) 14%, transparent) 7px 8px),
    linear-gradient(135deg,var(--panel),var(--panel-2));
}
.tile .gp{color:var(--accent-2)}
.tile .nm{color:var(--text);font-weight:600}

.faq-item{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .15s ease;
}
.faq-item:hover{border-color:var(--accent)}
.faq-q{color:var(--text);font-weight:600}
.faq-a{color:var(--prose)}

.article{color:var(--prose)}
.article h2{color:var(--text)}
.article a{color:var(--accent)}
.article a:hover{color:var(--accent-2)}

.table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table th{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:var(--on-accent);
}
.table td{border-top:1px solid var(--line)}

.site-footer{
  background:linear-gradient(0deg,var(--panel),var(--bg));
  border-top:1px solid var(--line);
}

a{transition:color .15s ease}