:root{--bg:#07080d;--panel:#10131c;--neon:#00f0ff;--pink:#ff2bd6;--txt:#d7dbe8;--mut:#8a90a6;--header-h:64px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 0,#1a0f2e 0,var(--bg) 60%);color:var(--txt);font:16px/1.6 "Segoe UI",system-ui,sans-serif}
a{color:var(--neon)}.wrap{max-width:1200px;margin:auto;padding:0 20px}
header{position:sticky;top:0;z-index:100;padding:18px 0;border-bottom:1px solid #1e2333;background:rgba(7,8,13,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:padding .25s ease,background .25s ease,box-shadow .25s ease}
header.shrink{padding:8px 0;background:rgba(7,8,13,.94);box-shadow:0 0 18px #00f0ff22}
header .scroll-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--neon),var(--pink));transform-origin:left center;transform:scaleX(0);pointer-events:none;will-change:transform;box-shadow:0 0 8px var(--neon)}
.logo{font-family:monospace;font-size:1.4rem;color:var(--neon);text-shadow:0 0 10px var(--neon);transition:font-size .25s ease}.logo b{color:var(--pink)}
header.shrink .logo{font-size:1.15rem}
nav a{margin-left:16px;text-decoration:none;color:var(--mut);transition:color .2s ease,text-shadow .2s ease}nav a:hover,nav a.active{color:var(--neon);text-shadow:0 0 8px #00f0ff66}
header .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}
.hero{position:relative;padding:64px 0 48px;text-align:center;overflow:hidden;isolation:isolate;width:100%}
.hero-fx{position:absolute;left:50%;top:0;bottom:0;width:100vw;margin-left:-50vw;z-index:-1;pointer-events:none;overflow:hidden;will-change:transform}
.hero-fx .city-glow{position:absolute;left:50%;bottom:-20%;width:140%;height:70%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,#00f0ff22 0%,#ff2bd618 35%,transparent 70%);filter:blur(2px)}
.hero-fx .rain{position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(0,240,255,.07) 14px 15px),repeating-linear-gradient(95deg,transparent 0 38px,rgba(255,43,214,.04) 38px 39px);animation:rain-fall 1.1s linear infinite;mask-image:linear-gradient(180deg,transparent,#000 25% 75%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 25% 75%,transparent)}
@keyframes rain-fall{to{transform:translateY(15px)}}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;max-width:1280px}
.hero-copy{width:100%;max-width:640px}
.hero-visual{display:none}
.hero-tip{color:var(--mut);margin:8px 0 0;padding:12px 16px;border-radius:6px;background:linear-gradient(90deg,#00f0ff12,#ff2bd612);border:1px solid #1e2333;max-width:100%;font-size:.95rem}
.hero-tip a{color:var(--neon);text-decoration:none;font-weight:600}
.hero-tip a:hover{text-shadow:0 0 8px #00f0ff66}
.phone-mock{width:min(220px,56vw);aspect-ratio:9/16;border-radius:28px;padding:10px;background:linear-gradient(160deg,#1a2030,#0b0e16);border:1px solid #2a3150;box-shadow:0 0 0 1px #00f0ff22,0 20px 50px #000a,0 0 40px #ff2bd633;position:relative}
.phone-mock::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36%;height:5px;border-radius:4px;background:#2a3150}
.phone-mock video{width:100%;height:100%;object-fit:cover;border-radius:20px;background:#000;display:block}
h1{font-size:clamp(2rem,6vw,3.6rem);margin:.2em 0;line-height:1.1;position:relative}h1 span{color:var(--pink);text-shadow:0 0 18px var(--pink)}
.sub{color:var(--mut);max-width:640px;margin:auto}h2{font-family:monospace;color:var(--neon);border-left:3px solid var(--pink);padding-left:10px}
@media (min-width:1100px){
  .hero{text-align:left;padding:72px 0 56px}
  .hero-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}
  .hero-copy{flex:1 1 0;max-width:620px;text-align:left}
  .hero-copy .sub{margin:0}
  .hero-copy form{justify-content:flex-start}
  .hero-visual{display:block;flex:0 0 auto}
  .phone-mock{width:240px}
}

form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:24px 0}input{padding:12px;min-width:240px;background:#0b0e16;border:1px solid #2a3150;color:var(--txt);border-radius:4px}
button{padding:12px 20px;background:var(--pink);border:0;color:#fff;font-weight:700;border-radius:4px;cursor:pointer;box-shadow:0 0 14px var(--pink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.card{background:var(--panel);border:1px solid #1e2333;padding:20px;border-radius:6px;transition:box-shadow .45s ease,border-color .45s ease}
.card.hot{border-color:var(--neon);box-shadow:0 0 16px #00f0ff44}.price{font-size:2rem;color:#fff}.price small{font-size:1rem;color:var(--mut)}ul{padding-left:18px}
section{padding:36px 0;scroll-margin-top:calc(var(--header-h) + 12px)}
details{background:var(--panel);margin:8px 0;padding:14px;border-radius:6px;border:1px solid #1e2333}summary{cursor:pointer;font-weight:600}
footer{padding:30px 0;color:var(--mut);border-top:1px solid #1e2333;font-size:.9rem}

.signup .msg{margin:.5rem 0 0;min-height:1.2em;font-size:.9rem;color:#7ee787;flex-basis:100%}
.signup button:disabled{opacity:.7;cursor:default}

.samplebox{max-width:100%;margin:16px 0;text-align:center;background:linear-gradient(180deg,#12161f,#0b0e16);border:1px solid #1e2333;box-shadow:none}.btn{display:inline-block;padding:12px 20px;background:#9146ff;color:#fff;font-weight:700;border-radius:4px;text-decoration:none;box-shadow:0 0 14px #9146ff}
#s-form{margin:12px 0}
.samplebox .hint{flex-basis:100%;margin:0;color:var(--mut);font-size:.85rem}
.layouts{border:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;flex-basis:100%;padding:0;margin:4px 0}.layouts legend{color:var(--mut);font-size:.85rem;width:100%;text-align:center}.layouts label{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.8rem;color:var(--mut);cursor:pointer;padding:6px;border:1px solid #2a3150;border-radius:6px}.layouts input{display:none}.layouts label:has(input:checked){border-color:var(--pink);color:#fff;box-shadow:0 0 10px #ff2bd655}
.sw{font-weight:800;padding:2px 6px;border-radius:3px;font-size:.8rem}.st-noir{color:#fff;background:#000;text-shadow:0 0 2px #000}.st-noir::first-letter{color:#ffd23f}.st-neon{color:#00f0ff;text-shadow:0 0 6px #ff2bd6;background:#10131c}.st-clean{color:#111;background:#fff}.st-meme{color:#fff;-webkit-text-stroke:1px #000;background:#444;font-style:italic}

ul.clips{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,260px));gap:16px;justify-content:center}
.clip-card{background:#0b0e16;border:1px solid #1e2333;border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:260px;box-shadow:0 0 12px #ff2bd622}
.clip-card video{width:100%;aspect-ratio:9/16;background:#000;border-radius:4px;border:1px solid #2a3150;object-fit:cover}
.clip-title{margin:0;font-size:.9rem;color:var(--txt);line-height:1.3;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.clip-dur{margin:0;font-size:.8rem;color:var(--mut);font-family:monospace}
.clip-dl{display:inline-block;padding:8px 14px;background:transparent;border:1px solid var(--pink);color:var(--pink);font-weight:700;border-radius:4px;text-decoration:none;font-size:.85rem;box-shadow:0 0 8px #ff2bd644}
.clip-dl:hover{background:var(--pink);color:#fff}

/* Showcase strip */
.showcase{text-align:center}
.showcase-strip{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;justify-content:center;margin:20px auto 0;max-width:100%;width:fit-content}
.showcase-strip .clip-card{flex:0 0 min(200px,70vw);max-width:220px;scroll-snap-align:center}
.showcase-strip .clip-card video{pointer-events:none}

/* Scroll reveal (class added via JS only — content visible without JS) */
.reveal-pending{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform}
.reveal-pending.revealed{opacity:1;transform:none}
h2.sign-flicker{animation:sign-flicker .9s steps(2,end) 1}
@keyframes sign-flicker{
  0%,100%{opacity:1;text-shadow:0 0 10px var(--neon)}
  10%{opacity:.15;text-shadow:none}
  12%{opacity:1;text-shadow:0 0 18px var(--neon)}
  30%{opacity:.25;text-shadow:none}
  32%{opacity:1;text-shadow:0 0 14px var(--neon),0 0 28px var(--pink)}
  55%{opacity:.4}
  57%{opacity:1}
  70%{opacity:.2;text-shadow:none}
  72%{opacity:1;text-shadow:0 0 16px var(--neon)}
}

/* Pricing glow on enter */
#pricing .card.glow-in{border-color:#00f0ff88;box-shadow:0 0 22px #00f0ff55,0 0 40px #ff2bd622}
#pricing .card.hot.glow-in{box-shadow:0 0 28px #00f0ff88,0 0 48px #ff2bd633}

@supports (animation-timeline:scroll()){
  .hero-fx{animation:hero-parallax linear both;animation-timeline:scroll();animation-range:0 40vh}
  @keyframes hero-parallax{to{transform:translateY(40px)}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-pending,.reveal-pending.revealed{opacity:1;transform:none;transition:none}
  h2.sign-flicker{animation:none}
  .hero-fx .rain{animation:none}
  .hero-fx{animation:none!important;transform:none!important}
  header,.logo,.card,nav a{transition:none}
}

@media (max-width:700px){
  .showcase-strip{
    justify-content:flex-start;
    width:100%;max-width:100%;box-sizing:border-box;
    padding-left:max(12px,calc(50% - min(100px,36vw)));
    padding-right:max(12px,calc(50% - min(100px,36vw)));
    scroll-padding-inline:max(12px,calc(50% - min(100px,36vw)));
  }
  .showcase-strip .clip-card{flex:0 0 min(200px,72vw);scroll-snap-align:center}
}