:root{
  --bg: #0b0f17;
  --panel: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --max: 1050px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(100,140,255,.25), transparent 55%),
              radial-gradient(900px 500px at 90% 0%, rgba(255,130,220,.18), transparent 55%),
              var(--bg);
  color: var(--text);
  line-height: 1.55;
  transition: background 0.6s ease, color 0.4s ease;
}

a{ color: inherit; }
.wrap{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }

.skip{
  position:absolute; left:-999px; top:12px;
  background:#fff; color:#000; padding:8px 12px; border-radius:10px;
}
.skip:focus{ left:12px; z-index:999; }

.hero{
  position: relative;
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.kicker{ margin:0 0 10px; color: var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; }
.hero h1{ margin:0 0 10px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.sub{ margin:0 0 18px; color: var(--muted); max-width: 70ch; }

.quick{ display:flex; gap:10px; flex-wrap:wrap; }

.section{ padding: 28px 0; }
.section-head{ margin-bottom: 14px; }
.section-head h2{ margin:0 0 6px; font-size: 1.25rem; }
.section-head p{ margin:0; color: var(--muted); }

.brand{
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 520px){
  .brand{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .logo{ height: 52px; }
}

.logo{
  height: 56px;
  width: auto;
  object-fit: contain;
  transition: filter .3s ease;
}

.bg-attribution{
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  z-index: 9999;
}

.bg-attribution a{
  color: rgba(255,255,255,.75);
  text-decoration: none;
}

.bg-attribution a:hover{
  text-decoration: underline;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card{
  grid-column: span 6;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card h3{ margin:0 0 6px; font-size: 1.05rem; }
.card p{ margin:0 0 12px; color: var(--muted); }

.card{
  transition: transform .18s ease, border-color .25s ease, box-shadow .25s ease;
}

.card:hover{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 34px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-2px);
}

/* make the button glow when you hover the card too */
.card:hover .btn.full{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 28px rgba(0,0,0,.35),
    0 0 26px var(--accent);
}

.btn{
  display:inline-flex; justify-content:center; align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-decoration:none;
  background: rgba(255,255,255,.06);
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn.primary{
  background: rgba(110,160,255,.25);
  border-color: rgba(110,160,255,.35);
}
.btn.full{ width:100%; }

/* Theme-accent glow on hover/click */
.btn{
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease, filter .25s ease;
}

.btn:active{
  transform: translateY(0) scale(.99);
  filter: brightness(1.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 8px 22px rgba(0,0,0,.40),
    0 0 34px var(--accent);
}

.btn, .card{
  transition:
    transform .15s ease,
    box-shadow .3s ease,
    border-color .25s ease,
    background .25s ease;
}

.card, .btn{
  transition: transform .16s ease, box-shadow .28s ease, border-color .22s ease, filter .22s ease;
}

.card:hover{
  transform: translateY(-4px);
}

/* Base smooth transition for titles */
.card h3{
  transition: color .25s ease, text-shadow .35s ease;
}

@keyframes pulseGlow {
  0%   { filter: brightness(1.00); }
  50%  { filter: brightness(1.22); }
  100% { filter: brightness(1.00); }
}

.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.18);
  animation: pulseGlow .6s ease 1;
}

.btn:active{
  transform: translateY(-1px) scale(.99);
  filter: brightness(1.28);
}

.card{
  position: relative;
  overflow: hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius) + 2px);
  background: radial-gradient(600px 240px at 20% 20%, rgba(255,255,255,0), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.card:hover::before{
  opacity: 1;
  background:
    radial-gradient(600px 260px at 25% 15%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 300px at 80% 90%, rgba(255,255,255,.05), transparent 65%);
}

.footer{
  padding: 22px 0 36px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

@media (max-width: 760px){
  .card{ grid-column: span 12; }
}

/* Minimal theme icon button */
.theme-icon{
  position: absolute;
  top: 16px;
  right: 16px;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 9999;

  font-size: 12px;
  color: rgba(255,255,255,.88);

  transition: transform .12s ease, background .2s ease, box-shadow .25s ease;
}

.theme-icon:hover{
  background: rgba(255,255,255,.08);
}

.theme-icon:active{
  transform: translateY(1px) scale(.99);
}

.theme-icon .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 16px rgba(255,255,255,.35);
}

.theme-icon .label{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
  opacity: .78;
}

.theme-icon .value{
  font-weight: 600;
  opacity: .95;
}

/* Click “spark” */
@keyframes themePop{
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-1px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}
.theme-icon.pop{
  animation: themePop .22s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ========== THEME: CYBER LAB ========== */
/*body.theme-cyber { outline: 6px solid cyan; } */

body.theme-cyber{
  --bg: #070a10;
  --panel: rgba(255,255,255,.06);
  --border: rgba(120, 220, 255, .22);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --accent: rgba(90,210,255,1);

  background:
    radial-gradient(900px 500px at 18% 10%, rgba(70, 200, 255, .18), transparent 55%),
    radial-gradient(800px 500px at 88% 0%, rgba(120, 255, 210, .12), transparent 60%),
    linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.88)),
    url('/main-index-assets/cyber-lab-bg-med.jpg') center / cover no-repeat fixed,
    var(--bg);
}

/* subtle grid overlay */
body.theme-cyber::before{
  content:"";
  position: fixed; inset: 0;
  background:
    linear-gradient(rgba(120,220,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,220,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: .35;
}

body.theme-cyber .card{
  border-color: rgba(120,220,255,.22);
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
}

body.theme-cyber .btn.primary{
  background: rgba(90, 210, 255, .22);
  border-color: rgba(90, 210, 255, .40);
}

body.theme-cyber .card:hover{
  border-color: var(--accent);
  box-shadow:
    0 26px 90px rgba(0,0,0,.70),
    0 0 0 1px rgba(90,210,255,.55),
    0 0 38px rgba(90,210,255,.55),
    0 0 85px rgba(90,210,255,.22);
}

body.theme-cyber .card:hover::before{
  opacity: 1;
  background: radial-gradient(700px 260px at 20% 15%, rgba(90,210,255,.22), transparent 60%);
}

body.theme-cyber .btn:hover{
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(90,210,255,.65),
    0 0 20px rgba(90,210,255,.70),
    0 0 60px rgba(90,210,255,.35);
}

@keyframes scanMove{
  from { transform: translateY(-20px); }
  to   { transform: translateY(20px); }
}
@keyframes sweep{
  from { transform: translateY(-120%); opacity: 0; }
  10%  { opacity: .18; }
  50%  { opacity: .10; }
  to   { transform: translateY(120%); opacity: 0; }
}

body.theme-cyber::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(120,220,255,.12) 0px,
      rgba(120,220,255,.12) 2px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 8px
    );

  opacity: .35;
  mix-blend-mode: screen;
  animation: scanMove 3s linear infinite alternate;
}

body.theme-cyber .hero::before{
  content:"";
  position:absolute; left:0; right:0;
  top:-120%;
  height: 120%;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(120,220,255,.18),
    transparent
  );
  opacity: 0;
  animation: sweep 7.5s linear infinite;
}

body.theme-cyber .logo{
  filter: drop-shadow(0 0 12px rgba(90,210,255,.6));
}

/* Theme-colored glow on the whole pill + dot */
body.theme-cyber .theme-icon{
  box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 22px rgba(90,210,255,.20);
}
body.theme-cyber .theme-icon .dot{
  background: rgba(90,210,255,.95);
  box-shadow: 0 0 18px rgba(90,210,255,.55);
}

/* ========== THEME: ANIME-TECH ========== */
/*body.theme-anime { outline: 6px solid hotpink;  } */

body.theme-anime{
  --bg: #0b1230;                         /* lighter than before */
  --panel: rgba(255,255,255,.11);        /* brighter glass */
  --border: rgba(255,255,255,.16);       /* cleaner border (not pink) */
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.74);
  --shadow: 0 18px 45px rgba(0,0,0,.50);

  --accent: rgba(168,190,255,1);         /* sky-lavender accent (NOT magenta) */

  background:
    radial-gradient(980px 620px at 12% 8%, rgba(185, 200, 255, .30), transparent 62%),
    radial-gradient(980px 620px at 92% 10%, rgba(255, 170, 230, .18), transparent 60%),
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.86)),
    url('/main-index-assets/anime-tech-bg-med.jpg') center / cover no-repeat fixed,
    var(--bg);
}

/* “neon edge” cards */
body.theme-anime .card{
  position: relative;
  border-color: rgba(255,130,220,.20);
}
body.theme-anime .card::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,130,220,.35), rgba(120,180,255,.25), transparent 60%);
  filter: blur(10px);
  opacity: .35;
  z-index: -1;
}

body.theme-anime .btn.primary{
  background: linear-gradient(135deg, rgba(255,110,210,.26), rgba(120,180,255,.22));
  border-color: rgba(255,255,255,.20);
}

body.theme-anime .card{
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 0 20px rgba(255,110,210,.15),
    0 0 40px rgba(120,180,255,.15);
}

body.theme-anime .btn{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

body.theme-anime .card:hover{
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 24px 85px rgba(0,0,0,.62),
    0 0 45px rgba(255,110,210,.35),
    0 0 95px rgba(120,180,255,.22);
}

body.theme-anime .card:hover::before{
  opacity: 1;
  background:
    radial-gradient(700px 260px at 18% 20%, rgba(255,110,210,.20), transparent 60%),
    radial-gradient(700px 260px at 82% 80%, rgba(120,180,255,.16), transparent 65%);
}

body.theme-anime .btn:hover{
  border-color: rgba(255,255,255,.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 35px rgba(255,110,210,.38),
    0 0 80px rgba(120,180,255,.24);
}

body.theme-anime .hero{
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}

body.theme-anime .logo{
  filter: drop-shadow(0 0 14px rgba(168,190,255,.65));
}

/* Theme-colored glow on the whole pill + dot */
body.theme-anime .theme-icon{
  box-shadow: 0 0 26px rgba(168,190,255,.22);
}
body.theme-anime .theme-icon .dot{
  background: rgba(168,190,255,.95);
  box-shadow: 0 0 18px rgba(168,190,255,.55);
}

/* Optional: keep your button primary gradient but make it more "anime glass" */
body.theme-anime .btn.primary{
  background: linear-gradient(135deg, rgba(168,190,255,.28), rgba(255,170,230,.18));
  border-color: rgba(255,255,255,.22);
}

/* ========== THEME: TOKYO NEON ========== */
/*body.theme-tokyo { outline: 6px solid magenta;  } */

body.theme-tokyo{
  --bg: #03030a;                         /* darker base */
  --panel: rgba(8,8,14,.72);             /* darker cards */
  --border: rgba(255, 70, 160, .14);     /* subtler border */
  --text: rgba(255,255,255,.93);
  --muted: rgba(255,255,255,.68);
  --shadow: 0 24px 70px rgba(0,0,0,.70);

  --accent: rgba(255, 35, 120, 1);       /* deeper crimson neon */

  background:
    radial-gradient(980px 680px at 18% 10%, rgba(255, 35, 120, .16), transparent 62%),
    radial-gradient(980px 680px at 86% 18%, rgba(80, 210, 255, .09), transparent 65%),
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.95)),
    url('/main-index-assets/tokyo-neon-bg-med.jpg') center / cover no-repeat fixed,
    var(--bg);
}

body.theme-tokyo .hero{
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
}

body.theme-tokyo .card{
  background: rgba(10,10,16,.62);
  backdrop-filter: blur(14px);
}

body.theme-tokyo .btn.primary{
  background: rgba(255, 35, 120, .16);
  border-color: rgba(255, 35, 120, .32);
}

@keyframes neonFlicker{
  0%, 100% { opacity: 1; filter: brightness(1); }
  45% { opacity: .75; filter: brightness(1.4); }
  48% { opacity: .55; filter: brightness(1.8); }
  52% { opacity: .85; filter: brightness(1.2); }
  60% { opacity: .65; filter: brightness(1.6); }
}

body.theme-tokyo .btn.primary{
  animation: neonFlicker 3.2s infinite;
  box-shadow:
    0 0 10px rgba(255,35,120,.55),
    0 0 34px rgba(255,35,120,.40),
    0 0 70px rgba(255,35,120,.22);
}

body.theme-tokyo .card:hover{
  border-color: var(--accent);
  box-shadow:
    0 30px 110px rgba(0,0,0,.78),
    0 0 34px rgba(255,35,120,.78),
    0 0 110px rgba(255,35,120,.38);
}

/* Tokyo only */
body.theme-tokyo .card:hover h3{
  color: #fff;
  text-shadow:
    0 0 8px rgba(255,35,120,.98),
    0 0 24px rgba(255,35,120,.90),
    0 0 55px rgba(255,35,120,.68),
    0 0 130px rgba(255,35,120,.55);
  animation: neonTitlePulse 1.4s ease-in-out infinite;
}

@keyframes neonTitlePulse{
  0%   { text-shadow:
          0 0 6px rgba(255,70,160,.95),
          0 0 18px rgba(255,70,160,.85),
          0 0 40px rgba(255,70,160,.65),
          0 0 80px rgba(255,70,160,.45); }
  50%  { text-shadow:
          0 0 10px rgba(255,70,160,1),
          0 0 30px rgba(255,70,160,.95),
          0 0 60px rgba(255,70,160,.75),
          0 0 120px rgba(255,70,160,.55); }
  100% { text-shadow:
          0 0 6px rgba(255,70,160,.95),
          0 0 18px rgba(255,70,160,.85),
          0 0 40px rgba(255,70,160,.65),
          0 0 80px rgba(255,70,160,.45); }
}

body.theme-tokyo .card:hover::before{
  opacity: 1;
  background: radial-gradient(820px 320px at 22% 18%, rgba(255,35,120,.28), transparent 62%);
}

body.theme-tokyo .btn:hover{
  border-color: var(--accent);
  box-shadow:
    0 0 22px rgba(255,35,120,.98),
    0 0 70px rgba(255,35,120,.62),
    0 0 150px rgba(255,35,120,.30);
}

body.theme-tokyo .hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 260px at 20% 20%, rgba(255,70,160,.18), transparent 60%),
    radial-gradient(600px 260px at 80% 10%, rgba(80,210,255,.12), transparent 60%);
  mix-blend-mode: screen;
  opacity: .7;
  animation: neonFlicker 8s infinite;
}

body.theme-tokyo .logo{
  filter: drop-shadow(0 0 18px rgba(255,35,120,.75));
}

/* Theme-colored glow on the whole pill + dot */
body.theme-tokyo .theme-icon{
  box-shadow: 0 0 26px rgba(255,35,120,.22);
}
body.theme-tokyo .theme-icon .dot{
  background: rgba(255,35,120,.95);
  box-shadow: 0 0 18px rgba(255,35,120,.60);
}