:root {
  --ink: #0b0812;
  --ink-soft: #0e0a17;
  --paper: #f4eefb;
  --ember: #ff2ec4;
  --ember-bright: #ff64d3;
  --acid: #34e5ff;
  --steel: #9f7aea;
  --muted: #b9a8cf;
  --line: rgba(255, 46, 196, 0.24);
  --display: "Chakra Petch", "Noto Sans JP", sans-serif;
  --sans: "Chakra Petch", "Noto Sans JP", sans-serif;
  --mono: "Chakra Petch", monospace;
}

body { background: radial-gradient(90% 70% at 88% 8%, rgba(123, 47, 247, 0.2), transparent 62%), radial-gradient(75% 55% at 8% 46%, rgba(255, 46, 196, 0.08), transparent 64%), #0b0812; }
body::after { content: ""; position: fixed; z-index: 100; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px); mix-blend-mode: screen; opacity: 0.3; }
body::selection { color: var(--ink); background: var(--acid); }
.site-header { border-color: rgba(255, 46, 196, 0.18); background: rgba(11, 8, 18, 0.88); box-shadow: 0 1px 0 rgba(52, 229, 255, 0.04); }
.brand-mark { color: var(--ember); filter: drop-shadow(0 0 10px rgba(255, 46, 196, 0.28)); }
.brand-icon { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(52, 229, 255, 0.2)); }
.hero { background: linear-gradient(90deg, transparent 0 71%, rgba(52, 229, 255, 0.04) 71% 71.1%, transparent 71.1%), linear-gradient(0deg, transparent 0 76%, rgba(255, 46, 196, 0.04) 76% 76.1%, transparent 76.1%); }
.hero-grid { opacity: 0.82; background-image: linear-gradient(rgba(52, 229, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 229, 255, 0.07) 1px, transparent 1px); }
h1 em, h2 em, .promise-copy h2 em { color: transparent; -webkit-text-stroke-color: var(--ember); text-shadow: 0 0 28px rgba(255, 46, 196, 0.1); }
.kicker span, .button-primary, .phone-continue, .medication-actions span:first-child, .rank-step.current span, .week-dots i:nth-of-type(-n+4), .routine-current button { box-shadow: 0 0 24px rgba(255, 46, 196, 0.24); }
.phone { border-color: #272032; background: linear-gradient(145deg, #40324e, #09060d 28%, #251c2d 82%, #09060d); box-shadow: 0 46px 100px rgba(0, 0, 0, 0.62), 0 0 45px rgba(52, 229, 255, 0.09); }
.phone-screen, .quest-demo { background: #0d0a13; }
.mode-card, .quest-card, .chart-card, .app-stats > div { border-color: #30263a; background: #14101c; }
.mode-card.selected, .rank-card, .routine-current { background: linear-gradient(135deg, rgba(255, 46, 196, 0.13), rgba(123, 47, 247, 0.04)); }
.device-note { border-color: rgba(52, 229, 255, 0.4); background: rgba(11, 8, 18, 0.9); }
.marquee { background: var(--ember); }
.feature { background: rgba(14, 10, 23, 0.94); box-shadow: inset 0 0 50px rgba(123, 47, 247, 0.025); }
.feature-quest { background: linear-gradient(145deg, #120d1a, #0e0a17); }
.feature::after { background: linear-gradient(135deg, rgba(255, 46, 196, 0.1), transparent 50%); }
.principles span, .feature-number, .set-log b, .set-log > div:first-child { color: #806c93; }
.positioning { color: #16001a; background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(22, 0, 26, 0.06) 90px 92px), var(--ember); }
.positioning .eyebrow { color: #16001a; }
.positioning-mark { -webkit-text-stroke-color: rgba(22, 0, 26, 0.1); }
.promise-card { background: linear-gradient(145deg, rgba(20, 14, 30, 0.96), rgba(11, 8, 18, 0.96)); }
.promise-card-free { border-top-color: var(--acid); }
.promise-card-ads { border-top-color: var(--ember); }
.final-cta { background: radial-gradient(circle at 82% 45%, rgba(123, 47, 247, 0.24), transparent 36%), linear-gradient(135deg, #120b20, #0b0812 58%); }
.final-crest { color: var(--ember); filter: drop-shadow(0 0 70px rgba(255, 46, 196, 0.2)); }
:focus-visible { outline-color: var(--acid); }

@media (max-width: 1040px) { .site-nav { background: rgba(11, 8, 18, 0.98); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }