:root{ --radius: 14px; }

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

/* ---- HERO : sunset gradient + perspective grid floor ---- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--accent-2)) 55%, var(--accent-2));
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; left:-25%; right:-25%; bottom:0; height:55%;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in srgb, var(--accent-2) 75%, #fff) 38px 40px),
    repeating-linear-gradient(0deg,  transparent 0 30px, color-mix(in srgb, var(--accent-2) 75%, #fff) 30px 32px);
  transform:perspective(340px) rotateX(68deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 70%);
          mask-image:linear-gradient(180deg, transparent, #000 70%);
  opacity:.55; pointer-events:none;
}
/* CRT scanline overlay */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.5;
}
.hero > *{ position:relative; z-index:1; }

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

/* neon section headings */
.section h2, .article h2{
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--text);
  text-shadow:0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---- PANELS / CARDS ---- */
.card, .feature, .faq-item{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::after, .feature::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent);
}
.card:hover, .feature:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 14px 34px color-mix(in srgb, var(--accent-2) 38%, transparent);
}

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

/* ---- BADGES ---- */
.badge{
  background:color-mix(in srgb, var(--accent) 18%, var(--panel));
  border:1px solid var(--line);
  color:var(--text);
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

/* ---- BUTTONS ---- */
.btn{ border-radius:999px; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--on-accent);
  border:1px solid transparent;
  box-shadow:0 0 16px 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;
  border:1px solid var(--accent);
  color:var(--text);
}
.btn-ghost:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); box-shadow:0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---- FACTS ---- */
.fact{ border:1px solid var(--line); border-radius:var(--radius); background:color-mix(in srgb, var(--panel) 70%, transparent); }
.fact b{
  color:var(--on-accent);
  text-shadow:0 0 10px var(--accent-2);
}

/* ---- HEADER ---- */
.site-header{
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

/* ---- CATALOG TILES ---- */
.tab{
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--text-2);
  transition:all .2s ease;
}
.tab.active, .tab:hover{
  color:var(--on-accent);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent;
}
.tile{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel-2);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 12px 30px color-mix(in srgb, var(--accent-2) 40%, transparent);
}
.tile .gp{ color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; }
.tile .nm{ color:var(--text); }
.tile.noimg{
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, var(--accent-2) 22%, transparent) 22px 23px),
    linear-gradient(160deg, var(--panel-2), color-mix(in srgb, var(--accent) 22%, var(--panel)));
}
.tile.noimg .nm{ text-shadow:0 0 8px var(--accent); }

/* ---- TABLE & ARTICLE ---- */
.article{ color:var(--prose); }
.table{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.table th{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--on-accent); }
.table td, .table th{ border-bottom:1px solid var(--line); }

/* ---- FAQ ---- */
.faq-item{ background:var(--panel-2); }
.faq-item:hover{ border-color:var(--accent); }
.faq-q{ color:var(--text); }
.faq-q::after{ color:var(--accent); }
.faq-a{ color:var(--prose); }