:root {
  --bg:#0b0c10; --panel:#11131a; --text:#e8ecf1; --muted:#a6b0c3;
  --accent:#7cc7ff; --accent-2:#a78bfa; --ring:rgba(124,199,255,.35);
  --maxw:76ch; --radius:18px;
  --shadow:0 8px 28px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2);
}

@media (prefers-color-scheme: light){
  :root {
    --bg:#f7f9fc; --panel:#fff; --text:#0f172a; --muted:#475569;
    --accent:#2563eb; --accent-2:#7c3aed; --ring:rgba(37,99,235,.25);
    --shadow:0 10px 30px rgba(2,6,23,.08), 0 2px 10px rgba(2,6,23,.06);
  }
}

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(124,199,255,.12), transparent 60%),
    radial-gradient(900px 500px at 90% -10%, rgba(167,139,250,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.7; letter-spacing:.2px;
}

/* Pill links */
.pill-link {
  display:inline-block;
  margin:.8rem 0 1.2rem;
  padding:.45rem .95rem;
  border-radius:999px;
  font-size:.92rem;
  font-weight:500;
  text-decoration:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 2px 10px var(--ring);
  transition:transform .15s ease;
}
.pill-link:hover { transform:translateY(-2px); }

/* Layout */
.wrap { max-width:min(1200px,96vw); margin-inline:auto; padding:clamp(16px,2vw,24px); }

header {
  padding:clamp(20px,4vw,40px) 0;
  display:grid; gap:clamp(16px,2vw,20px);
  place-items:center; text-align:center;
}

.brand {
  display:flex; align-items:center; gap:14px; justify-content:center;
  color:var(--muted); font-size:.95rem;
}
.brand a { color:inherit; text-decoration:none; }

.hero {
  display:grid; gap:clamp(12px,2vw,16px); place-items:center;
}
.hero h1 {
  font-weight:800;
  font-size:clamp(2rem,2.75rem + 1vw,3.75rem);
  line-height:1.1; margin:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p {
  max-width:70ch; margin:0; color:var(--muted);
  font-size:clamp(1rem,.95rem + .5vw,1.125rem);
}

/* Logo shell */
.logo-shell {
  width:clamp(120px,18vw,200px); aspect-ratio:1/1; border-radius:28px;
  background:linear-gradient(145deg, rgba(124,199,255,.18), rgba(167,139,250,.14));
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.06);
  display:grid; place-items:center; position:relative; isolation:isolate;
  perspective:800px; transform-style:preserve-3d;
}
.logo-shell::after {
  content:""; position:absolute; inset:0; border-radius:28px;
  background:radial-gradient(140px 80px at 30% 0%, rgba(255,255,255,.18), transparent 60%),
             radial-gradient(140px 80px at 70% 0%, rgba(255,255,255,.12), transparent 60%);
}
svg.logo { width:70%; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); }

/* Card */
.card {
  background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(18px,3vw,36px); margin:clamp(16px,3vw,28px) auto;
  max-width:var(--maxw);
  border:1px solid color-mix(in oklab, var(--panel) 90%, #fff 10%);
}
.lead { font-size:clamp(1.05rem,1rem + .35vw,1.2rem); color:var(--muted); margin:.5rem 0 1.25rem; }

.motto {
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem 1rem; border-left:4px solid var(--accent);
  background:color-mix(in oklab, var(--panel) 80%, #fff 10%);
  border-radius:10px; color:var(--muted); margin:1rem 0 1.6rem;
}
.motto strong { color:var(--text); }
/* place this AFTER the existing .motto block */
.motto {
  font-size: clamp(1.3rem, 1rem + 0.55vw, 1.5rem);
}

a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:.08em; }
a:hover { color:var(--accent-2); }

/* Modules menu */
.menu { max-width:1100px; margin:clamp(16px,3vw,28px) auto; }
.menu h2 { margin:0 0 .6rem; text-align:center; font-size:clamp(1.35rem,1.2rem + .8vw,2rem); }

.grid { display:grid; gap:clamp(14px,2.2vw,22px); grid-template-columns:1fr; }
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr;} }
@media (min-width:980px){ .grid{grid-template-columns:1fr 1fr 1fr;} }

.tile {
  background:var(--panel); border-radius:16px; padding:18px;
  border:1px solid color-mix(in oklab, var(--panel) 80%, #fff 18%);
  box-shadow:var(--shadow); display:grid; gap:.5rem;
}
.tile h3 { margin:.2rem 0 .25rem; font-size:1.05rem; }
.tile p { margin:0; color:var(--muted); font-size:.95rem; }
.tile .go { justify-self:end; margin-top:.4rem; }

.btn {
  display:inline-block; padding:.5rem .8rem; border-radius:999px; font-size:.92rem;
  border:1px solid color-mix(in oklab, var(--accent) 60%, var(--accent-2) 40%);
  color:var(--text);
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 70%, #000 0%),
    color-mix(in oklab, var(--accent-2) 70%, #000 0%)
  );
  box-shadow:0 2px 10px var(--ring); text-decoration:none;
}

footer {
  color:var(--muted); text-align:center;
  padding:40px 0 60px; font-size:.95rem;
}

/* Bounceback button */
.bounceback {
  display:inline-block; margin:1rem 0 0; padding:.45rem .85rem;
  border-radius:999px; font-size:.9rem; font-weight:600; text-decoration:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff; box-shadow:0 2px 10px var(--ring); float:right;
  transition:transform .15s ease;
}
.bounceback:hover { transform: translateY(-2px); }

/* ==== Animations ==== */
@keyframes masque-lift-in {
  0%   { transform: translateY(14px) scale(.96); opacity:0; }
  60%  { transform: translateY(-4px) scale(1.02); opacity:1; }
  100% { transform: translateY(0) scale(1); opacity:1; }
}
@keyframes masque-glow {
  0%   { filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
  50%  { filter:drop-shadow(0 14px 30px rgba(0,0,0,.45)); }
  100% { filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
}
@keyframes gradient-shift {
  0%   { stop-color:var(--accent); }
  50%  { stop-color:var(--accent-2); }
  100% { stop-color:var(--accent); }
}

/* Apply to the logo on load */
.logo-shell .logo {
  will-change: transform, filter;
  animation: masque-lift-in .9s cubic-bezier(.2,.8,.2,1) both,
             masque-glow 4.5s ease-in-out 1s infinite;
  transform-style:preserve-3d;
}
.logo-shell .logo defs stop:first-of-type {
  animation: gradient-shift 6s ease-in-out infinite;
}

/* Scroll reveal */
.reveal {
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
.reveal.on { opacity:1; transform:none; }

.reveal-stagger > * {
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal-stagger.on > * { opacity:1; transform:none; }
.reveal-stagger.on > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.on > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.on > *:nth-child(3){ transition-delay:.17s; }
.reveal-stagger.on > *:nth-child(4){ transition-delay:.22s; }
.reveal-stagger.on > *:nth-child(5){ transition-delay:.27s; }
.reveal-stagger.on > *:nth-child(6){ transition-delay:.32s; }
.reveal-stagger.on > *:nth-child(7){ transition-delay:.37s; }

/* Hover polish */
.pill-link, .bounceback { will-change:transform, box-shadow; }
.pill-link:hover, .bounceback:hover { box-shadow:0 6px 18px var(--ring); }
/* If JS is missing, show content instead of hiding it */
.no-js .reveal,
.no-js .reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
}