@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --ink: #09060f;
    --ink-soft: #120c1c;
    --paper: #f8f5ff;
    --muted: #aba5b5;
    --line: rgba(255, 255, 255, 0.11);
    --pink: #ff4fc8;
    --orange: #ff7847;
    --lime: #c9ff5d;
    --violet: #8456ff;
    --blue: #5ae0ff;
    --display: "Space Grotesk", "Arial Black", sans-serif;
    --body: "DM Sans", Arial, sans-serif;
    --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    line-height: 1.5;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
svg { display: block; }
.section-shell { width: var(--shell); margin-inline: auto; }

.page-noise {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: .14;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
.cursor-glow {
    position: fixed;
    width: 480px;
    height: 480px;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(132, 86, 255, .14), transparent 67%);
    translate: -50% -50%;
}
main, .site-footer { position: relative; z-index: 1; }
.scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 100;
    background: rgba(255, 255, 255, .04);
}
.scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--orange), var(--pink), var(--violet), var(--blue));
    transform: scaleX(0);
    transform-origin: left;
}

.navbar {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 80;
    width: min(1120px, calc(100% - 32px));
    height: 64px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 8px 10px 8px 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background: rgba(14, 8, 23, .68);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
    backdrop-filter: blur(20px);
    translate: -50% 0;
    transition: background .3s, top .3s, box-shadow .3s;
}
.navbar.scrolled {
    top: 10px;
    background: rgba(14, 8, 23, .9);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}
.logo { display: inline-flex; align-items: center; gap: 9px; width: fit-content; font: 700 1.2rem/1 var(--display); letter-spacing: -.04em; }
.logo-mark { display: block; width: 28px; height: 28px; flex: none; object-fit: cover; border-radius: 9px; }
.nav-links { display: flex; align-items: center; gap: 32px; color: #d3cedb; font-size: .86rem; font-weight: 600; }
.nav-links a { position: relative; transition: color .25s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--pink); transition: right .25s; }
.nav-links a:hover, .nav-links a.active { color: white; }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta { justify-self: end; }
.menu-toggle { display: none; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 54px;
    padding: 10px 20px;
    border: 0;
    border-radius: 15px;
    font-weight: 700;
    transition: transform .25s, box-shadow .25s, background .25s;
}
.button:hover { transform: translateY(-3px); }
.button-small { min-height: 46px; padding-inline: 19px; border-radius: 14px; background: var(--paper); color: var(--ink); font-size: .84rem; }
.button-small:hover { box-shadow: 0 10px 28px rgba(255, 255, 255, .16); }
.button-primary { background: var(--lime); color: var(--ink); box-shadow: 0 14px 36px rgba(201, 255, 93, .16); }
.button-primary:hover { box-shadow: 0 18px 46px rgba(201, 255, 93, .28); }
.button svg { width: 23px; height: 23px; fill: currentColor; }
.button span { display: flex; flex-direction: column; align-items: flex-start; font: 700 1rem/1.05 var(--display); }
.button small { margin-bottom: 3px; font: 500 .58rem/1 var(--body); letter-spacing: .02em; }
.button-dark { background: var(--ink); color: white; box-shadow: 0 14px 36px rgba(9, 6, 15, .2); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #d3cedb; font-size: .88rem; font-weight: 600; }
.text-link span { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: transform .25s, background .25s; }
.text-link:hover span { transform: translateY(3px); background: rgba(255, 255, 255, .08); }

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: .94fr 1.06fr;
    align-items: center;
    gap: 35px;
    padding-top: 120px;
    padding-bottom: 55px;
}
.hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    width: 760px;
    height: 760px;
    top: -340px;
    left: -350px;
    border-radius: 50%;
    background: rgba(132, 86, 255, .17);
    filter: blur(90px);
}
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }
.orb-one { width: 17px; height: 17px; top: 22%; left: -3%; background: var(--lime); box-shadow: 0 0 32px var(--lime); }
.orb-two { width: 10px; height: 10px; bottom: 22%; left: 46%; background: var(--pink); box-shadow: 0 0 25px var(--pink); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #c6c0ce; font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(201, 255, 93, .45); animation: pulse 2s infinite; }
.hero h1, .section-intro h2, .workflow h2, .results h2, .download h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.075em;
    line-height: .94;
}
.hero h1 { max-width: 630px; font-size: clamp(4rem, 7vw, 6.85rem); }
.hero-title-pop {
    display: block;
    width: fit-content;
    margin-top: 8px;
    color: var(--ink);
    background: linear-gradient(100deg, var(--pink), #ff74a4 45%, var(--orange));
    padding: 2px 16px 10px;
    border-radius: 13px;
    rotate: -2deg;
    box-shadow: 0 12px 40px rgba(255, 79, 200, .22);
    font-size: .68em;
    letter-spacing: -.065em;
}
.hero-lede { max-width: 525px; margin: 28px 0 30px; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.13rem); }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.hero-proof { display: flex; align-items: center; gap: 15px; margin-top: 35px; color: #918b9c; font-size: .7rem; }
.hero-proof p { margin: 3px 0 0; }
.hero-proof strong { color: #d8d3df; }
.stars, .quote-stars { color: var(--lime); font-size: .7rem; letter-spacing: .13em; }
.avatar-stack { display: flex; }
.avatar-stack span { width: 30px; height: 30px; display: grid; place-items: center; margin-left: -7px; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); font-size: .52rem; font-weight: 700; }
.avatar-stack span:first-child { margin-left: 0; background: var(--pink); }
.avatar-stack span:nth-child(2) { background: var(--blue); }
.avatar-stack span:nth-child(3) { background: var(--orange); }
.avatar-stack span:nth-child(4) { background: var(--lime); }

.hero-studio { position: relative; min-height: 650px; display: grid; place-items: center; perspective: 1200px; }
.studio-glow { position: absolute; width: 490px; height: 490px; border-radius: 50%; background: conic-gradient(from 180deg, var(--pink), var(--violet), var(--blue), var(--pink)); opacity: .52; filter: blur(60px); }
.phone-shell {
    position: relative;
    z-index: 3;
    width: 283px;
    height: 585px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 47px;
    background: linear-gradient(145deg, #37313f, #08070b 35%, #28222e 80%);
    box-shadow: -25px 35px 80px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .85), inset 0 0 0 3px rgba(255, 255, 255, .1);
    transform: rotateY(-8deg) rotateZ(4deg);
    transform-style: preserve-3d;
    transition: transform .2s ease-out;
}
.phone-top { position: absolute; z-index: 10; top: 16px; left: 50%; width: 85px; height: 24px; border-radius: 20px; background: #050407; translate: -50% 0; }
.phone-top span { position: absolute; width: 6px; height: 6px; right: 12px; top: 9px; border-radius: 50%; background: #182035; }
.phone-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 39px; background: #321b37; }
.reel-scene { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(165deg, #ffbd6d 0%, #e36978 40%, #702270 72%, #231238 100%); }
.reel-scene::before, .reel-scene::after { content: ""; position: absolute; inset: auto -15% -7%; height: 46%; background: #180d27; clip-path: polygon(0 55%, 17% 32%, 27% 43%, 48% 12%, 69% 46%, 84% 25%, 100% 56%, 100% 100%, 0 100%); }
.reel-scene::after { inset: auto -10% 13%; height: 25%; background: rgba(63, 24, 74, .78); }
.scene-sun { position: absolute; top: 24%; left: 50%; width: 136px; height: 136px; border-radius: 50%; background: #ffdb84; box-shadow: 0 0 60px #ffad77; translate: -50% -50%; }
.scene-copy { position: absolute; z-index: 2; top: 13%; left: 18px; color: white; font-family: var(--display); transform: rotate(-4deg); }
.scene-copy > span { display: block; margin-bottom: 5px; font-size: .45rem; letter-spacing: .2em; }
.scene-copy strong { font-size: 2.15rem; line-height: .8; letter-spacing: -.09em; text-shadow: 0 5px 20px rgba(39, 12, 49, .3); }
.scene-copy em { color: var(--lime); font-style: normal; }
.scene-person { position: absolute; z-index: 3; left: 46%; bottom: 7%; width: 110px; height: 230px; transform: rotate(-7deg); }
.person-head { position: absolute; width: 48px; height: 57px; left: 33px; top: 0; border-radius: 50% 47% 42% 44%; background: #180d25; box-shadow: -9px -4px 0 #291231; }
.person-body { position: absolute; inset: 48px 0 0; border-radius: 55px 55px 12px 12px; background: linear-gradient(120deg, #291135, #0d0814); clip-path: polygon(25% 0, 73% 0, 100% 100%, 0 100%); }
.person-body::after { content: ""; position: absolute; width: 25px; height: 150px; top: 15px; left: -7px; border-radius: 20px; background: #1a0b25; transform: rotate(15deg); }
.reel-actions { position: absolute; z-index: 5; right: 11px; bottom: 68px; display: grid; gap: 15px; text-align: center; }
.reel-actions span { display: grid; font-size: 1.3rem; text-shadow: 0 2px 7px rgba(0, 0, 0, .6); }
.reel-actions small { font-size: .42rem; }
.reel-meta { position: absolute; z-index: 5; left: 12px; bottom: 18px; font-size: .48rem; text-shadow: 0 2px 5px rgba(0, 0, 0, .65); }
.reel-meta > div { display: flex; align-items: center; gap: 5px; }
.reel-meta p { margin: 5px 0 3px; }
.mini-avatar { width: 18px; height: 18px; border: 1px solid white; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--orange)); }
.music-line { opacity: .85; }
.phone-side { position: absolute; left: -4px; top: 120px; width: 3px; height: 65px; border-radius: 3px 0 0 3px; background: #6e6374; }
.floating-chip, .floating-timeline { position: absolute; z-index: 5; border: 1px solid rgba(255, 255, 255, .15); background: rgba(25, 16, 34, .78); box-shadow: 0 20px 55px rgba(0, 0, 0, .3); backdrop-filter: blur(16px); animation: float 5s ease-in-out infinite; }
.floating-chip { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 17px; font-size: .65rem; font-weight: 700; }
.floating-chip small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .48rem; font-weight: 500; }
.chip-icon, .export-ring { display: grid; width: 37px; height: 37px; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--ink); background: var(--lime); font: 700 .72rem/1 var(--display); }
.chip-captions { top: 19%; left: 2%; animation-delay: -1s; }
.chip-captions i { width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.chip-export { right: -1%; bottom: 27%; animation-delay: -2.5s; }
.export-ring { color: white; background: conic-gradient(var(--blue) 90%, rgba(255, 255, 255, .12) 0); box-shadow: inset 0 0 0 5px #25182d; border-radius: 50%; font-size: .62rem; }
.floating-timeline { left: 3%; bottom: 8%; width: 215px; padding: 12px; border-radius: 17px; animation-delay: -4s; }
.timeline-head { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: .5rem; }
.timeline-head strong { color: white; }
.timeline-clips { position: relative; display: flex; gap: 3px; height: 27px; overflow: hidden; border-radius: 4px; }
.timeline-clips i { flex: 1; background: linear-gradient(145deg, var(--orange), #5a205f); }
.timeline-clips i:nth-child(even) { background: linear-gradient(145deg, var(--blue), var(--violet)); }
.playhead { position: absolute; top: -2px; bottom: -2px; left: 42%; width: 1px; background: white; box-shadow: 0 0 5px white; }
.waveform { height: 16px; display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.waveform span { width: 2px; height: 35%; background: var(--pink); border-radius: 3px; }
.waveform span:nth-child(2n) { height: 75%; }
.waveform span:nth-child(3n) { height: 100%; }
.scroll-cue { position: absolute; left: 0; bottom: 26px; display: flex; align-items: center; gap: 13px; color: #787182; font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 38px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--lime); animation: cue 2s infinite; }

.platform-strip { overflow: hidden; border-block: 1px solid var(--line); background: #0e0916; rotate: -1deg; scale: 1.02; }
.marquee { overflow: hidden; padding: 19px 0; }
.marquee-track { width: max-content; display: flex; align-items: center; animation: marquee 26s linear infinite; }
.marquee-track span { padding-inline: 28px; font: 600 clamp(1rem, 2vw, 1.3rem)/1 var(--display); letter-spacing: -.03em; }
.marquee-track i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink); }

.features { padding-block: 150px; }
.section-intro { max-width: 720px; margin-bottom: 60px; }
.section-intro h2, .workflow h2, .results h2 { font-size: clamp(3rem, 6vw, 5.8rem); }
.section-intro h2 span, .workflow h2 span, .results h2 span { color: var(--pink); }
.section-intro > p, .workflow-copy > p { max-width: 520px; margin: 24px 0 0; color: var(--muted); font-size: 1rem; }
.bento-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.bento-card { position: relative; min-height: 410px; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: var(--ink-soft); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .3s; }
.bento-card:hover { border-color: rgba(255, 255, 255, .25); }
.card-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.card-number { color: #6e6777; font: 600 .6rem/1 var(--display); }
.card-tag { padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; color: #c9c3d0; font-size: .53rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bento-card h3 { position: relative; z-index: 3; max-width: 420px; margin: 70px 0 12px; font: 600 clamp(1.8rem, 3vw, 3rem)/.95 var(--display); letter-spacing: -.06em; }
.bento-card p { position: relative; z-index: 3; max-width: 400px; margin: 0; color: var(--muted); font-size: .84rem; }
.bento-template { min-height: 530px; background: radial-gradient(circle at 85% 95%, rgba(255, 79, 200, .19), transparent 42%), var(--ink-soft); }
.template-stack { position: absolute; right: 2%; bottom: -22%; width: 55%; height: 75%; transform: translateZ(20px); }
.template-card { position: absolute; width: 165px; aspect-ratio: .62; display: grid; place-items: center; border: 5px solid #21172b; border-radius: 22px; box-shadow: 0 25px 50px rgba(0, 0, 0, .35); color: white; font: 600 1.1rem/.9 var(--display); text-align: center; letter-spacing: -.07em; }
.template-card strong { color: var(--lime); font-size: 1.5rem; }
.card-a { z-index: 3; right: 26%; top: 0; background: linear-gradient(160deg, #ffbc6a, #a93176 57%, #2d153d); transform: rotate(-5deg); }
.card-b { z-index: 2; right: -1%; top: 35px; background: linear-gradient(160deg, #5ae0ff, #5741aa 55%, #29123c); transform: rotate(10deg); }
.card-c { z-index: 1; left: 0; top: 65px; background: linear-gradient(160deg, #c9ff5d, #497f52 55%, #191b2e); transform: rotate(-17deg); }
.bento-caption { background: radial-gradient(circle at 0 100%, rgba(132, 86, 255, .25), transparent 50%), #171021; }
.caption-demo { position: absolute; inset: auto 25px 28px; display: flex; flex-wrap: wrap; gap: 6px; font: 700 clamp(2.4rem, 5vw, 4.1rem)/.88 var(--display); letter-spacing: -.08em; text-transform: uppercase; }
.caption-demo span { opacity: .22; }
.caption-demo .active { padding-inline: 4px; color: var(--ink); background: var(--lime); opacity: 1; rotate: -2deg; }
.bento-audio { background: radial-gradient(circle at 100% 100%, rgba(90, 224, 255, .18), transparent 48%), #11151e; }
.audio-player { position: absolute; inset: auto 24px 24px; min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .06); }
.audio-player button { width: 45px; height: 45px; border: 0; border-radius: 50%; background: var(--blue); color: var(--ink); font-size: .7rem; }
.audio-player div:nth-child(2) { display: grid; gap: 3px; }
.audio-player strong { font-size: .72rem; }
.audio-player span { color: var(--muted); font-size: .55rem; }
.equalizer { height: 35px; display: flex !important; align-items: center; gap: 3px !important; margin-left: auto; }
.equalizer i { width: 3px; height: 30%; border-radius: 4px; background: var(--blue); animation: equalize .8s ease-in-out infinite alternate; }
.equalizer i:nth-child(2n) { height: 80%; animation-delay: -.2s; }
.equalizer i:nth-child(3n) { height: 55%; animation-delay: -.4s; }
.bento-export { min-height: 530px; background: radial-gradient(circle at 50% 100%, rgba(201, 255, 93, .18), transparent 50%), #121614; }
.export-demo { position: absolute; left: 50%; bottom: 28px; width: 250px; height: 250px; display: grid; place-items: center; translate: -50% 0; }
.export-demo i { position: absolute; inset: 0; border: 1px solid rgba(201, 255, 93, .16); border-radius: 50%; animation: orbit 9s linear infinite; }
.export-demo i:nth-child(2) { inset: 25px; animation-direction: reverse; animation-duration: 7s; }
.export-demo i:nth-child(3) { inset: 50px; animation-duration: 5s; }
.export-demo i::after { content: ""; position: absolute; width: 8px; height: 8px; left: 50%; top: -4px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.export-core { z-index: 2; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--lime); color: var(--ink); font: 700 2.4rem/1 var(--display); box-shadow: 0 0 60px rgba(201, 255, 93, .2); }
.export-core small { font-size: .45rem; letter-spacing: .13em; }

.workflow { position: relative; padding-block: 140px; background: #f3eff8; color: var(--ink); }
.workflow::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(9, 6, 15, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(9, 6, 15, .06) 1px, transparent 1px); background-size: 60px 60px; }
.workflow-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.workflow-copy { padding-top: 30px; }
.workflow .eyebrow { color: #766e80; }
.workflow h2 span { color: var(--violet); }
.workflow-copy > p { color: #716a79; }
.workflow-steps { display: grid; gap: 42px; margin-top: 70px; }
.workflow-step { min-height: 155px; display: grid; grid-template-columns: 45px 1fr; gap: 16px; align-content: center; padding: 20px; border: 1px solid transparent; border-radius: 18px; opacity: .42; cursor: pointer; transition: opacity .35s, background .35s, border-color .35s, transform .35s; }
.workflow-step.active { border-color: rgba(9, 6, 15, .1); background: white; box-shadow: 0 15px 40px rgba(41, 29, 53, .08); opacity: 1; transform: translateX(10px); }
.workflow-step > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #e7e0ef; font: 700 .6rem/1 var(--display); }
.workflow-step.active > span { background: var(--violet); color: white; }
.workflow-step h3 { margin: 0 0 3px; font: 600 1rem/1.2 var(--display); letter-spacing: -.035em; }
.workflow-step p { margin: 0; color: #766e80; font-size: .72rem; }
.workflow-visual { position: sticky; top: 100px; min-height: 690px; display: grid; place-items: center; }
.workflow-orbit { position: absolute; border: 1px solid rgba(132, 86, 255, .18); border-radius: 50%; }
.orbit-a { width: 560px; height: 560px; animation: orbit 30s linear infinite; }
.orbit-b { width: 450px; height: 450px; border-style: dashed; animation: orbit 20s linear infinite reverse; }
.workflow-orbit::before, .workflow-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.workflow-orbit::before { width: 15px; height: 15px; top: 10%; left: 15%; background: var(--pink); box-shadow: 0 0 20px var(--pink); }
.workflow-orbit::after { width: 10px; height: 10px; bottom: 6%; right: 22%; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.workflow-phone { position: relative; z-index: 2; width: 300px; height: 615px; overflow: hidden; padding: 12px; border: 3px solid #1e1724; border-radius: 49px; background: #0d0912; box-shadow: 0 35px 70px rgba(32, 20, 45, .24); }
.mini-screen { position: absolute; inset: 12px; display: flex; flex-direction: column; padding: 40px 14px 14px; overflow: hidden; border-radius: 36px; background: #15101c; color: white; opacity: 0; transform: translateY(25px) scale(.96); transition: opacity .45s, transform .45s; pointer-events: none; }
.mini-screen.active { opacity: 1; transform: none; }
.screen-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.screen-header span { font: 600 .95rem/1 var(--display); }
.screen-header b { color: var(--pink); font-size: .54rem; }
.template-browser { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.template-browser i { display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #40213e, #21122b); color: white; font: 600 .8rem/.9 var(--display); text-align: center; }
.template-browser i:nth-child(2) { background: linear-gradient(145deg, #d75b78, #39214b); }
.template-browser i:nth-child(3) { background: linear-gradient(145deg, #78d3dd, #38235e); }
.template-browser i:nth-child(4) { background: linear-gradient(145deg, #b5d65c, #2e493c); }
.template-browser .selected { outline: 3px solid var(--lime); outline-offset: -3px; }
.screen-button { display: block; margin-top: 12px; padding: 12px; border-radius: 13px; background: var(--lime); color: var(--ink); font-size: .65rem; font-weight: 700; text-align: center; }
.clip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; flex: 1; }
.clip-grid i { min-height: 90px; border-radius: 12px; background: linear-gradient(145deg, #d45b76, #4f215f); }
.clip-grid i:nth-child(2n) { background: linear-gradient(145deg, #57c4d5, #39235e); }
.clip-grid i:nth-child(3n) { background: linear-gradient(145deg, #e8a75a, #842d59); }
.edit-timeline { position: relative; display: flex; gap: 3px; height: 38px; margin-top: 10px; padding: 4px; border-radius: 7px; background: #292031; }
.edit-timeline span { flex: 1; border-radius: 3px; background: var(--pink); }
.edit-timeline span:nth-child(2) { background: var(--blue); }
.edit-timeline span:nth-child(3) { background: var(--orange); }
.edit-timeline b { position: absolute; left: 57%; top: -3px; bottom: -3px; width: 1px; background: white; }
.export-preview { position: relative; flex: 1; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(155deg, #ffbd6d, #b13b7c 58%, #39204d); font: 600 2rem/.85 var(--display); text-align: center; letter-spacing: -.08em; }
.export-preview strong { color: var(--lime); }
.export-preview i { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: white; color: #4f2865; font-style: normal; }
.share-row { display: flex; justify-content: center; gap: 12px; margin: 17px 0 4px; }
.share-row i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; background: #292031; color: white; font-size: .6rem; font-style: normal; font-weight: 700; text-transform: uppercase; }

.results { padding-block: 150px; }
.results-top { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: end; margin-bottom: 55px; }
.results-top > p { margin: 0 0 7px; color: var(--muted); font-size: .9rem; }
.results h2 span { color: var(--lime); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 80px; }
.stat-card { padding: 30px; border-top: 1px solid var(--line); }
.stat-card strong { font: 600 clamp(3rem, 6vw, 5rem)/1 var(--display); letter-spacing: -.08em; }
.stat-card p { margin: 7px 0 0; color: var(--muted); font-size: .68rem; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.quote-card { display: flex; flex-direction: column; min-height: 300px; margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: 25px; background: #100b18; }
.quote-card p { margin: 35px 0 25px; font: 500 clamp(1.25rem, 2vw, 1.7rem)/1.14 var(--display); letter-spacing: -.05em; }
.quote-card footer { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.quote-card footer div { display: grid; }
.quote-card footer strong { font-size: .7rem; }
.quote-card footer small { color: var(--muted); font-size: .55rem; }
.quote-avatar { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; color: var(--ink); font-size: .55rem; font-weight: 700; }
.avatar-one { background: var(--blue); }
.avatar-two { background: var(--lime); }
.avatar-three { background: var(--orange); }
.quote-featured { color: var(--ink); background: var(--pink); transform: translateY(-20px) rotate(-1deg); }
.quote-featured .quote-stars { color: var(--ink); }
.quote-featured footer small { color: rgba(9, 6, 15, .65); }
.quote-featured .quote-avatar { background: var(--ink); color: white; }

.download {
    position: relative;
    min-height: 570px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 100px;
    border-radius: 40px;
    color: var(--ink);
    background: linear-gradient(135deg, var(--orange), var(--pink) 48%, var(--violet));
    text-align: center;
}
.download::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 31px; }
.download-bg { position: absolute; inset: -25%; }
.download-bg span { position: absolute; border: 2px solid rgba(255, 255, 255, .17); border-radius: 50%; animation: orbit 28s linear infinite; }
.download-bg span:first-child { width: 520px; height: 520px; top: 0; left: 0; }
.download-bg span:nth-child(2) { width: 680px; height: 680px; right: -10%; bottom: -20%; animation-direction: reverse; }
.download-bg span:nth-child(3) { width: 180px; height: 180px; top: 22%; right: 25%; background: rgba(201, 255, 93, .25); border: 0; filter: blur(2px); }
.download-content { position: relative; z-index: 2; max-width: 680px; padding: 50px 20px; display: grid; justify-items: center; }
.download .eyebrow { color: rgba(9, 6, 15, .62); }
.download h2 { font-size: clamp(4rem, 8vw, 7rem); }
.download h2 span { display: inline-block; padding: 0 10px 8px; background: var(--lime); rotate: -2deg; }
.download p { max-width: 480px; margin: 24px 0 25px; color: rgba(9, 6, 15, .7); font-weight: 600; }

.site-footer { padding-top: 35px; border-top: 1px solid var(--line); background: #08050d; }
.footer-main { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 45px; padding-block: 55px; }
.footer-brand p { margin: 25px 0 0; color: #827b8c; font: 600 1.55rem/1.1 var(--display); letter-spacing: -.05em; }
.footer-links { display: grid; align-content: start; gap: 12px; font-size: .72rem; }
.footer-links strong { margin-bottom: 8px; color: white; font: 600 .72rem/1 var(--display); }
.footer-links a { width: fit-content; color: #827b8c; transition: color .2s; }
.footer-links a:hover { color: var(--pink); }
.footer-bottom { display: flex; justify-content: space-between; padding-block: 22px; border-top: 1px solid var(--line); color: #6e6777; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--delay, 0s), transform .85s var(--delay, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(201, 255, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 255, 93, 0); } }
@keyframes float { 50% { translate: 0 -12px; } }
@keyframes cue { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes equalize { to { height: 100%; } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
    .hero { grid-template-columns: .9fr 1.1fr; gap: 0; }
    .hero h1 { font-size: clamp(3.7rem, 7vw, 5.8rem); }
    .hero-studio { scale: .9; }
    .chip-captions { left: -3%; }
    .chip-export { right: -5%; }
    .workflow-inner { gap: 30px; }
    .orbit-a { width: 470px; height: 470px; }
    .orbit-b { width: 390px; height: 390px; }
}

@media (max-width: 820px) {
    :root { --shell: min(100% - 28px, 680px); }
    .navbar { grid-template-columns: 1fr auto; height: 60px; padding-left: 15px; }
    .nav-cta { display: none; }
    .menu-toggle { display: grid; gap: 5px; width: 43px; height: 43px; place-content: center; border: 0; border-radius: 13px; background: white; color: var(--ink); cursor: pointer; }
    .menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s; }
    .menu-toggle.active span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .menu-toggle.active span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .nav-links { position: fixed; top: 70px; left: 0; right: 0; display: grid; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: rgba(14, 8, 23, .97); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s, transform .25s; }
    .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
    .nav-links a { padding: 15px 12px; border-radius: 12px; }
    .nav-links a:hover { background: rgba(255, 255, 255, .05); }
    .nav-links a::after { display: none; }
    .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 145px; padding-bottom: 85px; text-align: center; }
    .hero-copy { display: grid; justify-items: center; }
    .hero h1 { font-size: clamp(4rem, 14vw, 6.5rem); }
    .hero-lede { max-width: 570px; }
    .hero-studio { width: 100%; min-height: 650px; margin-top: 20px; scale: .92; }
    .scroll-cue { display: none; }
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card, .bento-template, .bento-export { min-height: 480px; }
    .workflow-inner { grid-template-columns: 1fr; }
    .workflow-visual { position: relative; top: 0; min-height: 670px; }
    .results-top { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .quote-grid { grid-template-columns: 1fr; }
    .quote-featured { transform: none; }
    .quote-card { min-height: 260px; }
}

@media (max-width: 560px) {
    .hero h1 { width: 100%; font-size: clamp(3.4rem, 15vw, 4rem); }
    .hero-title-pop { width: calc(100% + 6px); padding-inline: 6px; border-radius: 8px; font-size: .49em; text-align: center; white-space: nowrap; }
    .hero-actions { flex-direction: column; gap: 15px; }
    .hero-proof { margin-top: 27px; }
    .hero-studio { min-height: 560px; margin-inline: -14px; scale: .78; }
    .chip-captions { left: -16%; }
    .chip-export { right: -18%; }
    .floating-timeline { left: -11%; }
    .features, .results { padding-block: 100px; }
    .section-intro h2, .workflow h2, .results h2 { font-size: clamp(3rem, 16vw, 4.3rem); }
    .bento-card { min-height: 430px; padding: 22px; border-radius: 22px; }
    .bento-card h3 { margin-top: 55px; }
    .template-stack { right: -7%; width: 75%; transform: scale(.87); transform-origin: bottom right; }
    .caption-demo { font-size: clamp(2.4rem, 14vw, 3.8rem); }
    .workflow { padding-block: 95px; }
    .workflow-step { padding: 15px; transform: none !important; }
    .workflow-visual { min-height: 610px; overflow: hidden; margin-inline: -14px; }
    .workflow-phone { scale: .88; }
    .orbit-a { width: 440px; height: 440px; }
    .orbit-b { width: 360px; height: 360px; }
    .stat-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 60px; }
    .stat-card { padding: 24px 5px; }
    .stat-card strong { font-size: 4.5rem; }
    .download { width: calc(100% - 20px); min-height: 520px; margin-bottom: 70px; border-radius: 28px; }
    .download h2 { font-size: clamp(3.7rem, 17vw, 5.5rem); }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { gap: 20px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
    [data-parallax] { transform: none !important; }
}