@font-face { font-family:'Cera Stencil PRO'; font-weight:400; font-display:swap; src:url('https://67xhqihquykw9ji7.public.blob.vercel-storage.com/theme-files/cera-400.woff2') format('woff2'); }
@font-face { font-family:'Cera Stencil PRO'; font-weight:500; font-display:swap; src:url('https://67xhqihquykw9ji7.public.blob.vercel-storage.com/theme-files/cera-500.woff2') format('woff2'); }
@font-face { font-family:'Cera Stencil PRO'; font-weight:700; font-display:swap; src:url('https://67xhqihquykw9ji7.public.blob.vercel-storage.com/theme-files/cera-700.woff2') format('woff2'); }

#sf-root {
  --void-2:#07090c; --void-3:#0e1218; --void-4:#151b23;
  --line-1:#20262f; --line-2:#2e3742; --line-3:#434f5d;
  --ice-0:#fff; --ice-1:#dce6f2; --ice-2:#9fadbd; --ice-3:#6a7787; --ice-4:#475160;
  --saber-200:#d7eaff; --saber-300:#a8daff; --saber-400:#7cc0ff; --saber-500:#61adff; --saber-600:#3d8fe6; --saber-700:#235f9e;
  --radius-md:12px; --radius-lg:16px;
  --font-display:'Cera Stencil PRO','Eurostile','Bahnschrift',system-ui,sans-serif;
  --font-mono:'SF Mono','SFMono-Regular',ui-monospace,'Menlo','Consolas',monospace;
  --grad-cta:linear-gradient(135deg,#d7eaff 0%,#8cc5ff 38%,#61adff 100%);
  --grad-cta-hover:linear-gradient(135deg,#fff 0%,#a8daff 40%,#7cc0ff 100%);
  display:block; color:#fff; font-family:var(--font-mono);
  background:radial-gradient(1100px 520px at 50% -140px,rgba(97,173,255,.10),transparent 70%),#000;
  margin:0 calc(50% - 50vw); padding:0 max(16px, calc(50vw - 660px)) 90px;
}
#sf-root * { box-sizing:border-box; }
@keyframes sfWave { 0%,100%{transform:scaleY(.32)} 50%{transform:scaleY(1)} }

/* Hero */
#sf-root .sfx-hero { position:relative; overflow:hidden; padding:52px 0 40px; text-align:center; }
#sf-root .sfx-hero .bg, #sf-root .sfx-eyebrow, #sf-root .sfx-meta { display:none; }
#sf-root .sfx-h1 {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(46px,9vw,84px); line-height:.95; letter-spacing:.02em; margin:0 0 18px;
  background:linear-gradient(180deg,#eaf4ff 0%,#8fc7ff 48%,#4a94dd 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 34px rgba(97,173,255,.35));
}
#sf-root .sfx-sub { max-width:640px; margin:0 auto; font-family:var(--font-mono); font-size:13.5px; letter-spacing:.04em; line-height:1.7; color:var(--ice-3); }

/* Trust bar */
#sf-root .sfx-trust { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:22px 0 30px; }
#sf-root .sfx-trust span { font-size:11.5px; letter-spacing:.06em; color:var(--ice-3); border:1px solid var(--line-1); border-radius:999px; padding:8px 14px; background:var(--void-2); }

/* Grid + card */
#sf-root .sfx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
#sf-root .sfx-card { position:relative; display:flex; flex-direction:column; background:var(--void-3); border:1px solid var(--line-1); border-radius:var(--radius-lg); padding:14px; gap:12px; transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s,box-shadow .28s; }
#sf-root .sfx-card:hover { transform:translateY(-3px); border-color:var(--saber-600); box-shadow:0 0 0 1px rgba(97,173,255,.25),0 0 34px rgba(97,173,255,.14); }

/* Waveform stage */
#sf-root .sfx-stage { position:relative; height:88px; border-radius:12px; overflow:hidden; background:radial-gradient(120% 90% at 50% 120%,rgba(97,173,255,.10),transparent 60%),#04060a; border:1px solid var(--line-1); display:flex; align-items:center; justify-content:center; padding:14px 12px; }
#sf-root .sfx-wave { display:flex; align-items:flex-end; justify-content:center; gap:2px; height:62px; width:100%; }
#sf-root .sfx-wave span { flex:1 1 0; max-width:6px; border-radius:2px; transform-origin:bottom; background:linear-gradient(180deg,#2e3742,#1a2028); animation-name:sfWave; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-play-state:paused; }
#sf-root .sfx-card.is-playing .sfx-wave span { background:linear-gradient(180deg,#d7eaff,#61adff); box-shadow:0 0 7px rgba(97,173,255,.55); animation-play-state:running; }
#sf-root .sfx-playbtn { position:absolute; width:52px; height:52px; border-radius:999px; border:1px solid var(--saber-600); background:rgba(4,6,10,.7); backdrop-filter:blur(3px); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(97,173,255,.35); font-size:17px; }
#sf-root .sfx-playbtn:hover { border-color:var(--saber-400); }

/* Meta */
#sf-root .sfx-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
#sf-root .sfx-info { min-width:0; }
#sf-root .sfx-board { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--saber-300); }
#sf-root .sfx-title { font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.15; letter-spacing:-.01em; margin:3px 0 0; color:#fff; text-decoration:none; display:block; }
#sf-root .sfx-title:hover { color:var(--saber-200); }
#sf-root .sfx-hint { font-family:var(--font-mono); font-weight:400; font-size:12px; letter-spacing:.02em; color:var(--saber-300); }
#sf-root .sfx-price { flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; }

/* Buttons */
#sf-root .sfx-actions { display:flex; gap:10px; margin-top:4px; }
#sf-root .sfx-btn { height:44px; border-radius:12px; font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer; border:1px solid; display:flex; align-items:center; justify-content:center; gap:6px; transition:background .2s,color .2s,box-shadow .2s,border-color .2s; }
#sf-root .sfx-btn--secondary { flex:0 0 auto; min-width:120px; background:transparent; border-color:var(--line-2); color:#fff; }
#sf-root .sfx-btn--secondary:hover { border-color:var(--saber-500); box-shadow:0 0 14px rgba(97,173,255,.25); }
#sf-root .sfx-btn--primary { flex:1 1 auto; background:var(--grad-cta); border-color:transparent; color:#04070d; box-shadow:0 0 14px rgba(97,173,255,.3); }
#sf-root .sfx-btn--primary:hover { background:var(--grad-cta-hover); }
#sf-root .sfx-btn--primary.is-added { background:var(--saber-500); }

/* Bundle banner */
#sf-root .sfx-bundle { position:relative; overflow:hidden; margin-top:34px; border:1px solid var(--saber-700); border-radius:var(--radius-lg); background:linear-gradient(120deg,rgba(97,173,255,.12),rgba(4,6,10,.4) 60%),#07090c; padding:34px 36px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
#sf-root .sfx-bundle .bg { position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:360px; opacity:.10; pointer-events:none; filter:brightness(1.6); }
#sf-root .sfx-bundle-copy { position:relative; display:flex; flex-direction:column; gap:8px; max-width:560px; }
#sf-root .sfx-bundle-ey { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--saber-300); }
#sf-root .sfx-bundle h2 { font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.02em; margin:0; }
#sf-root .sfx-bundle p { margin:0; font-size:13.5px; line-height:1.6; color:var(--ice-2); }
#sf-root .sfx-bundle-buy { position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
#sf-root .sfx-bundle-prices { display:flex; align-items:baseline; gap:10px; }
#sf-root .sfx-strike { font-size:15px; color:var(--ice-4); text-decoration:line-through; }
#sf-root .sfx-bundle-price { font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--saber-400); text-shadow:0 0 24px rgba(97,173,255,.4); }
#sf-root .sfx-bundle-btn { padding:0 30px; height:52px; }

/* Perks */
#sf-root .sfx-perks { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
#sf-root .sfx-perk { display:flex; flex-direction:column; gap:8px; border:1px solid var(--line-1); border-radius:var(--radius-lg); padding:22px; background:var(--void-2); }
#sf-root .sfx-perk .tag { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--saber-300); }
#sf-root .sfx-perk h4 { font-family:var(--font-display); font-weight:700; font-size:18px; margin:0; }
#sf-root .sfx-perk p { margin:0; font-size:12.5px; line-height:1.55; color:var(--ice-3); }

#sf-root .sfx-loading { text-align:center; opacity:.6; padding:40px; }
#sf-root .sfx-cart { position:sticky; bottom:16px; display:block; width:max-content; margin:22px auto 0; background:var(--grad-cta); color:#04070d; text-decoration:none; padding:12px 24px; border-radius:999px; font-family:var(--font-display); font-weight:700; box-shadow:0 8px 30px -8px rgba(97,173,255,.6); }

@media (max-width:900px){ #sf-root .sfx-grid, #sf-root .sfx-perks { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #sf-root .sfx-grid, #sf-root .sfx-perks { grid-template-columns:1fr; } #sf-root .sfx-bundle { padding:24px; } #sf-root .sfx-bundle-buy { align-items:flex-start; } }