/* GrimDex site : Tactile Matte tokens, cinematic structure, zero dependencies */
:root{
  --bg-app:#1C1C1C; --bg-surface:#252525; --bg-raised:#2E2E2E; --bg-deep:#141414;
  --text-primary:rgba(255,255,255,.9); --text-secondary:rgba(255,255,255,.6);
  --accent:#5A9CD6; --accent-soft:rgba(90,156,214,.16);
  --radius:6px; --radius-card:16px;
  --ease-magnetic:cubic-bezier(.25,.46,.45,.94);
}
@media (prefers-color-scheme: light){
  :root{ --bg-app:#ECEEF1; --bg-surface:#F6F7F9; --bg-raised:#FFFFFF; --bg-deep:#DDE1E6;
    --text-primary:rgba(20,24,29,.92); --text-secondary:rgba(20,24,29,.6);
    --accent:#3D7AB2; --accent-soft:rgba(61,122,178,.14); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; background:var(--bg-app); color:var(--text-primary);
  font:16px/1.6 "Segoe UI Variable","Segoe UI",Inter,Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; }
/* film-grain noise, one inline SVG, 5% */
body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap{ max-width:880px; margin:0 auto; padding:0 24px; }
.mono{ font-family:Consolas,"Cascadia Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.06em; }

/* ---------- floating island nav ---------- */
.island{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:100;
  display:flex; align-items:center; gap:20px; padding:8px 8px 8px 20px;
  border-radius:999px; background:transparent;
  transition:background .35s var(--ease-magnetic), box-shadow .35s, backdrop-filter .35s; }
.island.scrolled{ background:color-mix(in srgb, var(--bg-surface) 72%, transparent);
  backdrop-filter:blur(16px); box-shadow:0 8px 32px rgba(0,0,0,.35); }
.island-links{ display:flex; gap:16px; }
.island-links a{ color:var(--text-secondary); text-decoration:none; font-size:.88rem;
  transition:color .2s, transform .2s var(--ease-magnetic); }
.island-links a:hover{ color:var(--text-primary); transform:translateY(-1px); }
.logo{ font-weight:600; font-size:1.02rem; color:var(--text-primary);
  text-decoration:none; }
.logo span{ color:var(--accent); }

/* ---------- buttons ---------- */
.btn{ position:relative; overflow:hidden; display:inline-block; padding:12px 24px;
  border-radius:var(--radius); background:var(--accent); color:#101418;
  font-weight:600; font-size:.92rem; text-decoration:none;
  transition:transform .25s var(--ease-magnetic), box-shadow .25s; }
.btn::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.18);
  transform:translateX(-101%); transition:transform .3s var(--ease-magnetic); }
.btn:hover{ transform:scale(1.03); box-shadow:0 6px 24px rgba(90,156,214,.3); }
.btn:hover::before{ transform:translateX(0); }
.btn-small{ padding:8px 16px; font-size:.82rem; }
.ghost{ color:var(--text-secondary); text-decoration:none; padding:12px 8px;
  transition:color .2s, transform .2s var(--ease-magnetic); }
.ghost:hover{ color:var(--text-primary); transform:translateY(-1px); }
a:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- hero: the opening shot ---------- */
.hero{ min-height:100dvh; display:flex; align-items:flex-end; position:relative;
  background:
    radial-gradient(1200px 600px at 75% 10%, var(--accent-soft), transparent 60%),
    linear-gradient(to top, var(--bg-deep), var(--bg-app) 70%); }
.hero-inner{ max-width:880px; margin:0 auto; padding:0 24px 12dvh; width:100%; }
.badge{ display:inline-block; background:var(--accent-soft); color:var(--accent);
  border-radius:var(--radius); padding:4px 12px; font-size:.72rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:24px; }
h1{ margin:0 0 24px; line-height:1.02; }
.h-sans{ display:block; font-weight:600; font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:-.01em; color:var(--text-secondary); }
.h-serif{ display:block; font-family:Georgia,"Times New Roman",serif; font-style:italic;
  font-weight:400; font-size:clamp(3.2rem,9.5vw,6.4rem); letter-spacing:-.02em;
  color:var(--text-primary); }
.h-serif::first-letter{ color:var(--accent); }
.hero-sub{ max-width:56ch; color:var(--text-secondary); margin:0 0 32px; }
.hero-cta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* ---------- sections ---------- */
section{ padding:88px 0 0; }
h2{ font-size:1.3rem; font-weight:600; margin:0 0 16px; letter-spacing:.01em; }
h3{ font-size:1rem; font-weight:600; margin:20px 0 8px; }
p{ max-width:62ch; margin:0 0 16px; }
.muted{ color:var(--text-secondary); }

/* ---------- feature cards: functional artifacts ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px; margin-top:24px; }
.card{ background:var(--bg-surface); border-radius:var(--radius-card); padding:24px; }
.feature p{ font-size:.9rem; color:var(--text-secondary); margin:0; }

.feed-label{ display:flex; gap:8px; align-items:center; color:var(--text-secondary);
  margin-bottom:8px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.type-feed{ background:var(--bg-deep); border-radius:var(--radius); padding:12px;
  font-family:Consolas,ui-monospace,monospace; font-size:.78rem; min-height:64px;
  color:var(--text-primary); word-break:break-all; }
.cursor{ color:var(--accent); animation:pulse 1s infinite; }

.menu-stage{ background:var(--bg-deep); border-radius:var(--radius); padding:12px;
  min-height:88px; position:relative; overflow:hidden; }
.mock-row{ font-size:.8rem; padding:6px 10px; border-radius:var(--radius);
  background:var(--bg-raised); display:inline-block;
  animation:rowselect 6s infinite var(--ease-magnetic); }
@keyframes rowselect{ 0%,12%{background:var(--bg-raised)} 18%,90%{background:var(--accent-soft)} 100%{background:var(--bg-raised)} }
.mock-menu{ position:absolute; left:48px; top:38px; background:var(--bg-raised);
  border-radius:var(--radius); padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transform:scale(.95); transform-origin:top left;
  animation:menupop 6s infinite var(--ease-magnetic); }
@keyframes menupop{ 0%,18%{opacity:0; transform:scale(.95)} 24%,86%{opacity:1; transform:scale(1)} 92%,100%{opacity:0} }
.mock-item{ font-size:.72rem; padding:3px 24px 3px 10px; border-radius:4px; }
.mock-item:nth-child(3){ animation:itemhover 6s infinite; }
@keyframes itemhover{ 0%,40%{background:transparent} 48%,80%{background:var(--accent-soft); color:var(--accent)} 88%,100%{background:transparent} }

.diag{ background:var(--bg-deep); border-radius:var(--radius); padding:12px 16px;
  display:flex; flex-direction:column; gap:8px; min-height:88px; justify-content:center; }
.diag-row{ display:flex; align-items:baseline; gap:8px; }
.diag-num{ font-size:1.3rem; color:var(--accent); min-width:2ch; text-align:right;
  font-variant-numeric:tabular-nums; }
.diag-unit{ font-size:.78rem; color:var(--text-secondary); }

/* ---------- manifesto band ---------- */
.manifesto{ margin-top:88px; padding:96px 0; background:var(--bg-deep); }
.mani-small{ color:var(--text-secondary); font-size:1rem; max-width:44ch; margin:0 0 16px; }
.mani-big{ font-family:Georgia,serif; font-size:clamp(1.9rem,5.5vw,3.4rem);
  line-height:1.15; margin:0; max-width:22ch; }
.mani-big em{ font-style:italic; color:var(--accent); }

/* ---------- pricing ---------- */
.price-row{ display:flex; gap:16px; flex-wrap:wrap; margin:24px 0 16px; }
.price-card{ flex:1 1 240px; transition:transform .25s var(--ease-magnetic); }
.price-card:hover{ transform:translateY(-2px); }
.price-card > strong{ color:var(--text-secondary); font-weight:500; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; }
.price-card.pop{ background:var(--bg-raised); box-shadow:0 0 0 1px var(--accent-soft),
  0 12px 40px rgba(0,0,0,.3); }
.price{ font-size:2rem; font-weight:600; margin:8px 0 4px;
  font-variant-numeric:tabular-nums; }
.price small{ font-size:.85rem; color:var(--text-secondary); font-weight:400; }
.price-card .muted{ font-size:.88rem; margin:8px 0 0; }
a{ color:var(--accent); text-decoration:none; }
main a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- footer ---------- */
footer{ margin-top:96px; background:var(--bg-deep); border-radius:32px 32px 0 0;
  padding:48px 0 32px; }
.foot-grid{ display:flex; gap:32px; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; margin-bottom:24px; }
.foot-links{ display:flex; flex-direction:column; gap:8px; }
.foot-links a{ color:var(--text-secondary); font-size:.88rem; }
.foot-links a:hover{ color:var(--text-primary); }
.status{ display:flex; gap:8px; align-items:center; color:var(--text-secondary); }
.fine{ font-size:.78rem; margin:0; }
footer .muted{ font-size:.88rem; }

/* ---------- reveal choreography ---------- */
.reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-magnetic), transform .7s var(--ease-magnetic); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s }
.d3{ transition-delay:.24s } .d4{ transition-delay:.32s }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .dot,.cursor,.mock-row,.mock-menu,.mock-item{ animation:none !important; }
  .mock-menu{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- legal pages (header.site variant) ---------- */
header.site nav{ display:flex; gap:24px; align-items:baseline; padding:48px 0 64px; }
header.site nav a{ color:var(--text-secondary); text-decoration:none; font-size:.88rem; }
header.site nav a:hover{ color:var(--text-primary); }
header.site ~ h1, .wrap h1{ font-size:1.8rem; }
.wrap > footer{ background:transparent; border-radius:0; margin-top:64px; padding:24px 0; }
ul{ padding-left:20px; } li{ margin:6px 0; }