/* ============================================================
   MicroMagnet Carousel — shared slide system (theme-driven).
   Canvas 1080x1920. Brand tokens come from each project's theme
   (applied to :root by slides.html). Defaults below are fallbacks.
   ============================================================ */

@font-face { font-family:"Anton"; src:url("assets/fonts/Anton-Regular.ttf") format("truetype"); font-weight:400; font-display:block; }
@font-face { font-family:"Inter"; src:url("assets/fonts/Inter-Variable.ttf") format("truetype"); font-weight:100 900; font-display:block; }
@font-face { font-family:"Archivo"; src:url("assets/fonts/Archivo-Variable.ttf") format("truetype"); font-weight:100 900; font-display:block; }

:root {
  --ink:#0A0E14; --ink-2:#111827; --paper:#F8FAFC; --muted:#B7C0CE;
  --accent:#FFC233; --accent-2:#FF8A3D;
  --keyword-bg:#FFC845; --keyword-ink:#0A0E14;
  --line:rgba(255,255,255,.14);
  --pad:76px; --safe-bottom:200px;
  --display:"Anton",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:#05070b; }
body { font-family:var(--body); -webkit-font-smoothing:antialiased; }

.stage {
  position:relative; width:1080px; height:1920px; overflow:hidden;
  background:var(--ink); color:var(--paper); isolation:isolate;
}

.bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); z-index:0; }
.bg.placeholder {
  background:
    radial-gradient(120% 80% at 78% 6%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 46%),
    radial-gradient(90% 70% at 12% 4%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 50%),
    linear-gradient(168deg, #1b2735 0%, #0c121c 52%, #05080d 100%);
}

.scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,7,11,.55) 0%, rgba(5,7,11,.10) 16%, rgba(5,7,11,0) 34%,
    rgba(5,7,11,.34) 56%, rgba(5,7,11,.86) 82%, rgba(5,7,11,.96) 100%);
}
.vignette { position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 340px 60px rgba(0,0,0,.55); }
.grain {
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.topbar { position:absolute; top:var(--pad); left:var(--pad); right:var(--pad); z-index:4; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:18px; }
.brand .mark { width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(150deg, var(--accent), var(--accent-2)); box-shadow:0 8px 22px color-mix(in srgb, var(--accent-2) 45%, transparent); }
.brand .mark svg { width:32px; height:32px; display:block; }
.brand .name { font-family:var(--body); font-weight:800; font-size:29px; letter-spacing:1.5px; text-transform:uppercase; line-height:1; }
.brand .name small { display:block; font-weight:600; font-size:16px; letter-spacing:2.6px; color:var(--muted); margin-top:7px; }
.index { font-family:var(--body); font-weight:700; font-size:21px; letter-spacing:2px; color:var(--muted);
  padding:10px 16px; border:1px solid var(--line); border-radius:999px; backdrop-filter:blur(6px); background:rgba(255,255,255,.04); }
.index b { color:var(--paper); }

.dots { position:absolute; top:calc(var(--pad) + 74px); left:var(--pad); z-index:4; display:flex; gap:9px; }
.dots i { width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.28); }
.dots i.on { width:30px; background:var(--accent); }

.content { position:absolute; left:var(--pad); right:var(--pad); bottom:var(--safe-bottom); z-index:4; }
.kicker { display:inline-flex; align-items:center; gap:14px; font-family:var(--body); font-weight:700; font-size:21px;
  letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:26px; }
.kicker::before { content:""; width:42px; height:3px; border-radius:3px; background:var(--accent); }
.headline { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:104px; line-height:.9;
  letter-spacing:-.5px; text-shadow:0 4px 40px rgba(0,0,0,.45); }
.headline .hl { color:var(--accent); }
.stage[data-size="md"] .headline { font-size:90px; }
.stage[data-size="sm"] .headline { font-size:76px; }
.sub { font-family:var(--body); font-weight:400; color:#E2E8F1; font-size:39px; line-height:1.3; letter-spacing:.1px; margin-top:30px; max-width:900px; }

.checks { margin-top:38px; display:flex; flex-direction:column; gap:20px; }
.checks li { list-style:none; display:flex; align-items:flex-start; gap:20px; font-family:var(--body); font-weight:500; font-size:32px; line-height:1.22; color:#EAF0F7; }
.checks li .tick { flex:none; width:44px; height:44px; margin-top:2px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 18%, transparent); border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.checks li .tick svg { width:24px; height:24px; }

.cta-chip { margin-top:40px; display:inline-flex; align-items:center; gap:22px; padding:22px 30px 22px 34px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); backdrop-filter:blur(8px); }
.cta-chip .label { font-family:var(--body); font-weight:700; font-size:30px; color:var(--paper); }
.cta-chip .keyword { font-family:var(--display); font-size:46px; letter-spacing:1px; text-transform:uppercase; color:var(--keyword-ink);
  background:var(--keyword-bg); padding:6px 22px 9px; border-radius:12px; box-shadow:0 10px 26px color-mix(in srgb, var(--keyword-bg) 45%, transparent); }
.cta-chip .arrow { width:40px; height:40px; color:var(--accent); }
.foot { margin-top:28px; font-family:var(--body); font-weight:500; font-size:24px; color:var(--muted); letter-spacing:.3px; }

.guides { position:absolute; inset:0; z-index:9; pointer-events:none; display:none; }
body.show-guides .guides { display:block; }
.guides .zone { position:absolute; border:2px dashed rgba(255,80,80,.7); }
.guides .top { top:0; left:0; right:0; height:220px; }
.guides .bottom { bottom:0; left:0; right:0; height:520px; }
.guides .rail { top:700px; right:0; width:180px; bottom:360px; border-color:rgba(80,160,255,.7); }
.guides span { position:absolute; bottom:6px; left:10px; color:rgba(255,255,255,.8); font:600 14px var(--body); letter-spacing:1px; }