:root{
  /* KyroMax palette (JP • calm spiritual / nocturne aurora) */
  --bg: #070A12;
  --surface: #0C1120;
  --surface-2: #0F1730;
  --text: #EAF0FF;
  --muted: rgba(234,240,255,.72);

  --primary: #7C5CFF;     /* aurora violet */
  --primary-2: #37E7C5;   /* jade mist */
  --accent: #FFB86B;      /* amber ember */
  --ink: #111A33;         /* deep ink for contrasts */
  --line: rgba(234,240,255,.12);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --soft-shadow: 0 10px 30px rgba(0,0,0,.35);

  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --grad-hero: radial-gradient(1200px 700px at 15% 15%, rgba(124,92,255,.35), transparent 55%),
               radial-gradient(900px 600px at 75% 25%, rgba(55,231,197,.22), transparent 60%),
               radial-gradient(700px 500px at 55% 85%, rgba(255,184,107,.18), transparent 60%),
               linear-gradient(180deg, rgba(12,17,32,.9), rgba(7,10,18,.98));

  --grad-card: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --grad-stroke: linear-gradient(90deg, rgba(124,92,255,.6), rgba(55,231,197,.55), rgba(255,184,107,.5));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body { height: 100%; overflow-x: hidden; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
a{ color: rgba(234,240,255,.92); }
a:hover{ color: #fff; }

::selection{ background: rgba(124,92,255,.35); }

.container{ max-width: 1160px; }