/* ================================================================
   HypeGen — Premium AI SaaS Landing
   Gradient hero · Phone mockup · Grain · Orbs · Full effects
   ================================================================ */
:root{--bg:#fff;--fg:#0f172a;--muted:#64748b;--primary:#4f46e5;--primary-h:#4338ca;--accent:#a855f7;--glow:rgba(79,70,229,.22);--soft:rgba(79,70,229,.06);--border:#e2e8f0;--panel:#f8f8fb;--tint:#f5f3ff;--card:#fff;--sh-xs:0 1px 2px rgb(0 0 0/.04);--sh-sm:0 2px 8px rgb(0 0 0/.05);--sh:0 4px 16px rgb(0 0 0/.06);--sh-lg:0 12px 40px rgb(0 0 0/.07);--sh-xl:0 25px 60px -12px rgb(0 0 0/.1);--r:12px;--r-lg:20px;--r-xl:24px;--r-2xl:32px;--fh:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;--fb:'DM Sans','Inter',system-ui,sans-serif;--grad:linear-gradient(135deg,#4f46e5,#a855f7)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body{font-family:var(--fb);font-size:17px;color:var(--fg);background:var(--bg);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}ul{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* Noise */
.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px}

/* Shared */
.tag{display:inline-block;font-family:var(--fh);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--primary);margin-bottom:18px}
.title-lg{font-family:var(--fh);font-size:clamp(32px,4.5vw,52px);font-weight:800;line-height:1.08;letter-spacing:-.04em;color:var(--fg);margin-bottom:24px}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.s-cta{text-align:center;margin-top:48px}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;background:var(--grad);color:#fff;font-family:var(--fh);font-size:16px;font-weight:700;border-radius:999px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 24px rgba(99,102,241,.35);transition:all .3s cubic-bezier(.4,0,.2,1)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(99,102,241,.5)}
.btn-glow{position:relative}.btn-glow::after{content:'';position:absolute;inset:-3px;border-radius:999px;background:var(--grad);z-index:-1;opacity:0;filter:blur(16px);transition:opacity .4s}.btn-glow:hover::after{opacity:.5}
.btn-outline{display:inline-flex;align-items:center;gap:10px;padding:18px 32px;font-family:var(--fh);font-size:16px;font-weight:600;color:var(--fg);border:1.5px solid var(--border);border-radius:999px;transition:all .2s;backdrop-filter:blur(4px)}.btn-outline:hover{border-color:var(--fg);background:rgba(255,255,255,.6)}
.btn-white{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;background:#fff;color:var(--primary);font-family:var(--fh);font-size:17px;font-weight:700;border-radius:999px;box-shadow:0 4px 24px rgba(0,0,0,.15);transition:all .3s}.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(0,0,0,.22)}

/* Hero-specific buttons (white on gradient) */
.btn-hero-primary{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;background:#fff;color:var(--primary);font-family:var(--fh);font-size:16px;font-weight:700;border-radius:999px;box-shadow:0 4px 24px rgba(0,0,0,.2);transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-hero-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.3)}
.btn-hero-ghost{display:inline-flex;align-items:center;gap:10px;padding:18px 32px;font-family:var(--fh);font-size:16px;font-weight:600;color:rgba(255,255,255,.9);border:1.5px solid rgba(255,255,255,.25);border-radius:999px;transition:all .2s;backdrop-filter:blur(4px)}.btn-hero-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* Logo */
.logo{font-family:var(--fh);font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--fg);display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo::before{content:"⚡";display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--grad);color:#fff;font-size:19px;border-radius:10px;box-shadow:0 4px 14px rgba(99,102,241,.3)}
.logo--white{color:#fff}
.logo--white::before{background:rgba(255,255,255,.15);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.logo--sm{font-size:20px}.logo--sm::before{width:30px;height:30px;font-size:16px;border-radius:8px}

/* ═══════ HEADER ═══════ */
.hdr{position:fixed;top:0;left:0;right:0;height:76px;z-index:1000;background:transparent;transition:background .4s,border-color .4s,box-shadow .4s;border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:var(--border);box-shadow:0 1px 12px rgb(0 0 0/.04)}
.hdr.scrolled .logo--white{color:var(--fg)}.hdr.scrolled .logo--white::before{background:var(--grad);box-shadow:0 4px 14px rgba(99,102,241,.3)}
.hdr.scrolled .hdr__nav a{color:var(--muted)}.hdr.scrolled .hdr__nav a:hover{color:var(--fg)}
.hdr.scrolled .hdr__login{color:var(--fg)}
.hdr__in{max-width:1200px;margin:0 auto;height:100%;padding:0 32px;display:flex;align-items:center;gap:28px}
.hdr__nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.hdr__nav a{padding:10px 16px;font-size:15px;font-weight:500;color:rgba(255,255,255,.7);border-radius:10px;transition:color .15s,background .15s}.hdr__nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.hdr__right{display:flex;align-items:center;gap:12px}
.hdr__login{padding:10px 18px;font-size:15px;font-weight:600;color:rgba(255,255,255,.85);border-radius:10px;transition:all .15s}.hdr__login:hover{background:rgba(255,255,255,.08)}
.hdr__cta{display:inline-flex;align-items:center;gap:7px;padding:10px 22px 10px 24px;font-size:15px;font-weight:700;color:var(--primary);background:#fff;border-radius:999px;transition:all .2s;box-shadow:0 2px 12px rgba(0,0,0,.15)}.hdr__cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.2)}.hdr__cta svg{opacity:.6}
.hdr.scrolled .hdr__cta{color:#fff;background:var(--fg);box-shadow:var(--sh-xs)}.hdr.scrolled .hdr__cta:hover{box-shadow:var(--sh-sm)}
.hdr__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.hdr__burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.hdr.scrolled .hdr__burger span{background:var(--fg)}
.hdr__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hdr__burger.active span:nth-child(2){opacity:0}.hdr__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hdr__mobile{display:none;flex-direction:column;gap:16px;padding:20px 32px 28px;background:var(--bg);border-top:1px solid var(--border)}.hdr__mobile.active{display:flex}
.hdr__mobile nav{display:flex;flex-direction:column;gap:2px}.hdr__mobile nav a{padding:14px 16px;font-size:16px;font-weight:500;color:var(--fg);border-radius:12px}.hdr__mobile nav a:hover{background:var(--panel)}
.hdr__mobile-btns{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--border)}
.mob-btn--out{padding:14px;text-align:center;font-size:16px;font-weight:600;color:var(--fg);border:1px solid var(--border);border-radius:999px}
.mob-btn--fill{padding:16px;text-align:center;font-size:16px;font-weight:700;color:#fff;background:var(--grad);border-radius:999px;box-shadow:0 4px 14px var(--glow)}

/* ════════════════════════════════════════════════════════
   HERO — GRADIENT BG, SPLIT LAYOUT, PHONE MOCKUP
   ════════════════════════════════════════════════════════ */
.hero{
    position:relative;
    min-height:100vh;min-height:100dvh;
    background:linear-gradient(145deg,#3730a3 0%,#4f46e5 35%,#7c3aed 70%,#a855f7 100%);
    overflow:hidden;
    display:flex;flex-direction:column;
}

/* Decorative circles on gradient */
.hero__deco{position:absolute;border-radius:50%;pointer-events:none}
.hero__deco--1{width:500px;height:500px;top:-15%;left:-8%;background:rgba(255,255,255,.04);animation:orbFloat 22s ease-in-out infinite}
.hero__deco--2{width:350px;height:350px;top:20%;right:-5%;background:rgba(255,255,255,.03);animation:orbFloat 18s ease-in-out infinite 3s}
.hero__deco--3{width:200px;height:200px;bottom:15%;left:20%;background:rgba(255,255,255,.025);animation:orbFloat 15s ease-in-out infinite 6s}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(20px,-25px)}50%{transform:translate(-15px,18px)}75%{transform:translate(22px,8px)}}

/* Split row */
.hero__row{
    position:relative;z-index:2;
    flex:1;display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;align-items:center;
    padding-top:76px;
}

/* Left: copy */
.hero__copy{padding:80px 0 60px}
.hero__h1{font-family:var(--fh);font-size:clamp(38px,5.5vw,68px);font-weight:800;line-height:1.1;letter-spacing:-.045em;margin-bottom:40px;color:#fff}
.hero__line1{display:block}.hero__line2{display:block;color:rgba(255,255,255,.85)}

/* Rotating pill */
.hero__rotate-wrap{margin-bottom:24px}
.hero__rotate-text{display:inline-block;font-family:var(--fh);font-size:clamp(14px,1.4vw,17px);font-weight:700;color:#fff;padding:10px 28px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:999px;backdrop-filter:blur(8px);transition:opacity .35s,transform .35s;letter-spacing:-.01em}

/* Desc */
.hero__desc{font-size:clamp(15px,1.3vw,18px);line-height:1.8;color:rgba(255,255,255,.7);max-width:520px;margin-bottom:44px;text-wrap:balance}

/* CTAs */
.hero__ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Right: phone */
.hero__phone-wrap{display:flex;justify-content:center;align-items:center;padding:40px 0}

/* ── PHONE FRAME ─────────────────────────────────── */
.phone{
    width:320px;height:640px;
    background:linear-gradient(145deg,#1a1a2e 0%,#0f0f13 100%);
    border-radius:48px;padding:10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(255,255,255,.06),
        0 30px 80px -20px rgba(0,0,0,.5),
        0 0 100px rgba(79,70,229,.12);
    transform:rotate(3deg);
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
    position:relative;
}
.phone:hover{transform:rotate(1.5deg) translateY(-6px)}

.phone__notch{
    position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:110px;height:30px;
    background:linear-gradient(180deg,#0f0f13,#1a1a2e);
    border-radius:0 0 18px 18px;z-index:10;
}
.phone__notch::before{
    content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:50px;height:5px;background:#2a2a3a;border-radius:3px;
}
.phone__notch::after{
    content:'';position:absolute;top:8px;right:24px;
    width:8px;height:8px;background:#2a2a3a;border-radius:50%;
}

.phone__screen{
    width:100%;height:100%;
    background:#fff;
    border-radius:40px;
    overflow:hidden;overflow-y:auto;
    scrollbar-width:none;
}
.phone__screen::-webkit-scrollbar{display:none}

/* ── Phone App UI — ultra-clean premium SaaS ─────────── */
.papp {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
}

/* Status bar */
.pa-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px 0;
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.pa-time { letter-spacing: .01em; }
.pa-top-icons { display: flex; align-items: center; gap: 6px; }

/* App header */
.pa-header {
    display: flex;
    align-items: center;
    padding: 18px 24px 20px;
}
.pa-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fh);
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.025em;
}
.pa-logo-ico {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad);
    color: #fff;
    font-size: 13px;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(79,70,229,.2);
}

/* Body content */
.pa-body {
    flex: 1;
    padding: 0 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Input card */
.pa-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid #f0f2f5;
}
.pa-label {
    display: block;
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    margin-bottom: 10px;
}
.pa-input {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    min-height: 22px;
    line-height: 1.4;
}
.pa-cursor {
    width: 2px;
    height: 17px;
    background: var(--primary);
    border-radius: 1px;
    margin-left: 1px;
    animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Viral reference */
.pa-ref {
    background: #fafaff;
    border: 1.5px solid rgba(79,70,229,.15);
    border-radius: 16px;
    padding: 14px 18px;
}
.pa-ref-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fh);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary);
    margin-bottom: 10px;
}
.pa-ref-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px rgba(79,70,229,.3);
}
.pa-ref-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #eef0f4;
}
.pa-ref-title {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
    margin-bottom: 8px;
}
.pa-ref-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
}
.pa-ref-meta span:last-child {
    color: var(--primary);
}

/* Generate button */
.pa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--primary);
    color: #fff;
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 700;
    border-radius: 14px;
    letter-spacing: -.01em;
    box-shadow: 0 2px 12px rgba(79,70,229,.25);
}

/* Output section */
.pa-out {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f0f2f5;
}
.pa-out-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px 10px;
    font-family: var(--fh);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
}
.pa-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,.4);
}

/* Result segments */
.pa-segs {
    display: flex;
    flex-direction: column;
}
.pa-seg {
    display: flex;
    background: #fff;
    border-top: 1px solid #f4f6f8;
}
.pa-seg:first-child { border-top: none; }
.pa-seg-accent {
    width: 3px;
    flex-shrink: 0;
    background: var(--ac);
}
.pa-seg-inner {
    padding: 12px 16px;
    flex: 1;
    min-width: 0;
}
.pa-seg-label {
    display: block;
    font-family: var(--fh);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.pa-seg p {
    font-size: 11px;
    line-height: 1.5;
    color: #334155;
}
.pa-seg--fade {
    opacity: .25;
    mask-image: linear-gradient(to bottom, black 10%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent);
}

/* Scroll indicator */
.hero__scroll{position:relative;z-index:2;display:flex;justify-content:center;padding-bottom:32px}
.hero__scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:.7}}


/* ════════════════════════════════════════════════════════
   COMO VIRALIZAR — 3 step cards
   ════════════════════════════════════════════════════════ */
.s-howviral { padding: 100px 0 120px; text-align: center; }

.title-xl {
    font-family: var(--fh);
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: var(--fg);
    margin-bottom: 56px;
}

.howviral-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.hv-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 40px 32px 44px;
    transition: all .4s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--sh-xs);
    overflow: hidden;
}
.hv-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
    opacity: 0;
    transition: opacity .3s;
}
.hv-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: rgba(79,70,229,.12);
}
.hv-card:hover::before { opacity: 1; }

.hv-num {
    font-family: var(--fh);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.04em;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    line-height: 1;
}

.hv-card h3 {
    font-family: var(--fh);
    font-size: 22px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.02em;
    margin-bottom: 14px;
    line-height: 1.25;
}

.hv-card p {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.7;
}


/* ════════════════════════════════════════════════════════
/* ════════════════════════════════════════════════════════
   MOCKUP
   ════════════════════════════════════════════════════════ */
.s-mockup{position:relative;padding:80px 0 120px;text-align:center;overflow:hidden}
.s-mockup__orb{position:absolute;width:800px;height:800px;top:-200px;right:-200px;background:radial-gradient(circle,rgba(168,85,247,.04) 0%,transparent 60%);border-radius:50%;pointer-events:none}
.s-mockup .title-lg{margin-bottom:56px}
.mockup-wrap{position:relative;max-width:1000px;margin:0 auto}
.mockup-glow{position:absolute;inset:-60px;background:radial-gradient(ellipse at center,rgba(99,102,241,.1) 0%,transparent 65%);border-radius:40px;pointer-events:none;animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}
.mockup{position:relative;z-index:2;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xl)}
.mk-bar{display:flex;align-items:center;gap:14px;padding:16px 28px;background:var(--panel);border-bottom:1px solid var(--border)}
.mk-dots{display:flex;gap:7px}.mk-dots i{width:11px;height:11px;border-radius:50%;display:block}.mk-dots i:nth-child(1){background:#fca5a5}.mk-dots i:nth-child(2){background:#fde68a}.mk-dots i:nth-child(3){background:#86efac}
.mk-bar>span{font-size:13px;font-weight:600;color:var(--muted)}
.mk-body{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.mk-left{padding:28px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:20px}
.mk-right{padding:28px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
.mk-group{display:flex;flex-direction:column;gap:10px}
.mk-label{font-family:var(--fh);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.mk-input{display:flex;align-items:center;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;font-size:15px;color:var(--fg);min-height:48px}
.mk-caret{width:2px;height:20px;background:var(--primary);margin-left:2px;animation:blink 1s step-end infinite}
.mk-virals{display:flex;flex-direction:column;gap:8px}
.mk-v{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:13px;cursor:default;transition:all .15s}
.mk-v--on{border-color:var(--primary);background:var(--soft)}
.mk-vn{font-weight:700;color:#ea580c;white-space:nowrap;font-size:12px}
.mk-v span:last-child{color:var(--fg);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-gen{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;background:var(--grad);color:#fff;font-size:14px;font-weight:700;border:none;border-radius:999px;box-shadow:0 4px 14px var(--glow);cursor:default;align-self:flex-start;font-family:var(--fb);margin-top:auto}
.mk-oh{display:flex;align-items:center;gap:8px;font-family:var(--fh);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:6px}
.mk-live{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 8px rgba(34,197,94,.5)}50%{box-shadow:0 0 16px rgba(34,197,94,.8)}}
.mk-blocks{display:flex;flex-direction:column;gap:8px}
.mk-b{padding:14px 16px;background:var(--card);border-radius:var(--r);border-left:3px solid var(--primary);transition:all .2s}.mk-b:hover{background:var(--soft);transform:translateX(4px)}
.mk-t{display:inline-block;font-family:var(--fh);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.mk-t--g{color:#ef4444}.mk-t--r{color:#f59e0b}.mk-t--c{color:var(--primary)}.mk-t--cta{color:#22c55e}
.mk-b p{font-size:14px;line-height:1.55;color:var(--fg)}
.mk-b--fade{opacity:.3;mask-image:linear-gradient(to bottom,black,transparent);-webkit-mask-image:linear-gradient(to bottom,black,transparent)}

/* ══════ PAIN ══════ */
.s-pain{padding:120px 0}
.pain-row{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.pain-left{display:flex;justify-content:center;align-items:center}
.pain-img{width:100%;max-width:400px;height:auto;border-radius:20px;filter:drop-shadow(0 20px 60px rgba(0,0,0,.1))}
.pain-intro{font-size:clamp(28px,3.5vw,38px);line-height:1.3;color:var(--fg);font-family:var(--fh);font-weight:800;letter-spacing:-.035em;margin-bottom:40px}
.pi{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid var(--border);transition:all .3s}.pi:hover{padding-left:8px;border-bottom-color:rgba(79,70,229,.2)}.pi:first-child{padding-top:0}
.pi-n{font-family:var(--fh);font-size:15px;font-weight:800;color:var(--primary);opacity:.45;padding-top:3px;flex-shrink:0;transition:opacity .3s}.pi:hover .pi-n{opacity:1}
.pi h3{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--fg);margin-bottom:8px}.pi p{font-size:17px;color:var(--muted);line-height:1.65}

/* ══════ SOLUTION ══════ */
/* ════════════════════════════════════════════════════════
   VS — DUAL MOCKUP COMPARISON
   ════════════════════════════════════════════════════════ */
.s-vs {
    padding: 120px 0;
    background: var(--panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
}
.s-vs .title-xl { margin-bottom: 16px; }
.vs-sub {
    font-size: 20px;
    color: var(--muted);
    margin-bottom: 64px;
    line-height: 1.6;
}

.vs-dual {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1060px;
    margin: 0 auto;
}

.vs-badge {
    align-self: center;
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 800;
    color: var(--muted);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 10px 18px;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* ── Mock frame shared ──────────────────────────── */
.vs-mock {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--sh);
    text-align: left;
    background: var(--card);
}

/* GPT mock — plain, muted on dark */
.vs-mock--gpt {
    background: #f9fafb;
    border-color: #e5e7eb;
}
.vs-mock--gpt .vs-mock__bar {
    padding: 14px 20px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vs-mock--gpt .vs-mock__title {
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

/* HypeGen mock — premium, stands out on dark */
.vs-mock--hg {
    background: #fff;
    border-color: rgba(79,70,229,.2);
    box-shadow: 0 8px 40px rgba(79,70,229,.08);
}
.vs-mock__bar--hg {
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(79,70,229,.04), rgba(168,85,247,.04));
    border-bottom: 1px solid rgba(79,70,229,.08);
    display: flex;
    align-items: center;
    gap: 12px;
}
.vs-mock__bar--hg .vs-mock__title {
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vs-hg-ico {
    font-size: 12px;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad);
    color: #fff;
    border-radius: 5px;
}

.vs-mock__dots { display: flex; gap: 5px; }
.vs-mock__dots i {
    width: 9px; height: 9px;
    border-radius: 50%; display: block;
}
.vs-mock--gpt .vs-mock__dots i:nth-child(1) { background: #d1d5db; }
.vs-mock--gpt .vs-mock__dots i:nth-child(2) { background: #d1d5db; }
.vs-mock--gpt .vs-mock__dots i:nth-child(3) { background: #d1d5db; }
.vs-mock--hg .vs-mock__dots i:nth-child(1) { background: #fca5a5; }
.vs-mock--hg .vs-mock__dots i:nth-child(2) { background: #fde68a; }
.vs-mock--hg .vs-mock__dots i:nth-child(3) { background: #86efac; }

/* ── Mock body ──────────────────────────────────── */
.vs-mock__body { padding: 20px; }

.vs-mock__input { margin-bottom: 16px; }
.vs-mock__input--hg { margin-bottom: 16px; }

.vs-mock__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 8px;
}
.vs-mock--gpt .vs-mock__label { color: #94a3b8; }
.vs-mock--hg .vs-mock__label { color: #94a3b8; }

.vs-mock__field {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
    min-height: 42px;
    line-height: 1.4;
}
.vs-mock--gpt .vs-mock__field {
    background: #fff;
    border: 1px solid #e5e7eb;
}
.vs-mock--hg .vs-mock__field {
    background: #f8fafc;
    border: 1px solid #eef0f4;
}

.vs-caret {
    width: 2px; height: 16px;
    background: #9ca3af;
    margin-left: 1px;
    animation: blink 1s step-end infinite;
    flex-shrink: 0;
}
.vs-caret--hg { background: var(--primary); }

/* ── GPT output — plain text ───────────────────── */
.vs-mock__output { min-height: 180px; }
.vs-mock__olabel {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin-bottom: 10px;
}
.vs-mock__text {
    font-size: 13px;
    line-height: 1.65;
    color: #6b7280;
    min-height: 120px;
}

/* ── HypeGen output — structured segments ──────── */
.vs-mock__output--hg { min-height: 180px; }
.vs-hg-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fh);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--primary);
    margin-bottom: 10px;
}
.vs-hg-live {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,.4);
}
.vs-hg-segs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eef0f4;
    min-height: 120px;
}
.vs-hg-seg {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #f4f6f8;
}
.vs-hg-seg:last-child { border-bottom: none; }
.vs-hg-seg__bar {
    width: 3px;
    flex-shrink: 0;
    background: var(--ac);
}
.vs-hg-seg__inner {
    padding: 10px 14px;
    flex: 1;
}
.vs-hg-seg__label {
    display: block;
    font-family: var(--fh);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.vs-hg-seg p {
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
}

/* ══════ SPECIALISTS ══════ */
.s-spec{position:relative;padding:120px 0;text-align:center;overflow:hidden;background:#0f1117}
.s-spec__orb{position:absolute;width:500px;height:500px;top:-100px;left:-150px;background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 60%);border-radius:50%;pointer-events:none}
.spec-head{max-width:720px;margin:0 auto 64px}
.s-spec .tag{color:rgba(168,133,247,.8)}
.s-spec .title-lg{color:#fff}
.s-spec .grad-text{background:linear-gradient(135deg,#818cf8,#c084fc);-webkit-background-clip:text;background-clip:text}.spec-sub{font-size:20px;color:rgba(255,255,255,.5);line-height:1.75;max-width:640px;margin:0 auto}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:8px;text-align:left}
.sc{padding:32px 28px 32px 32px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);box-shadow:var(--sh-xs);position:relative;overflow:hidden;transition:all .3s cubic-bezier(.2,.8,.2,1)}.sc:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,.3);border-color:rgba(255,255,255,.1)}
.sc-bar{position:absolute;top:0;left:0;width:4px;height:100%;background:var(--c);border-radius:0 4px 4px 0;transition:width .3s}.sc:hover .sc-bar{width:6px}
.sc h3{font-family:var(--fh);font-size:20px;font-weight:700;color:#fff;margin-bottom:10px}.sc p{font-size:17px;color:rgba(255,255,255,.45);line-height:1.65}

/* ══════ DARK CREATORS ══════ */

/* ══════ BENEFITS ══════ */
.s-ben{padding:120px 0}.s-ben .title-lg{margin-bottom:56px}
.ben-list{max-width:740px;margin:0 auto}
.bn{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid var(--border);transition:all .3s}.bn:first-child{border-top:1px solid var(--border)}.bn:hover{padding-left:8px}
.bn-a{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--primary);opacity:.3;padding-top:2px;transition:opacity .3s}.bn:hover .bn-a{opacity:.7}
.bn h3{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--fg);margin-bottom:6px}.bn p{font-size:17px;color:var(--muted);line-height:1.6}

/* ══════ COMPARE ══════ */

/* ══════ PLANS ══════ */
.s-plans{position:relative;padding:120px 0;text-align:center;overflow:hidden}
.s-plans__orb{position:absolute;width:600px;height:600px;bottom:-200px;right:-200px;background:radial-gradient(circle,rgba(168,85,247,.04) 0%,transparent 60%);border-radius:50%;pointer-events:none}
.plans-sub{font-size:20px;color:var(--muted);max-width:580px;margin:0 auto 64px;line-height:1.75}
.plans-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:24px;max-width:1020px;margin:0 auto;align-items:stretch}
.plan{text-align:left;padding:40px 32px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);display:flex;flex-direction:column;box-shadow:var(--sh-xs);position:relative;transition:all .3s}.plan:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.plan--feat{border-color:rgba(79,70,229,.2);box-shadow:0 8px 44px rgba(79,70,229,.12);background:linear-gradient(180deg,rgba(79,70,229,.04),var(--card) 50%);transform:scale(1.03);z-index:2}.plan--feat:hover{transform:scale(1.03) translateY(-5px);box-shadow:0 14px 52px rgba(79,70,229,.18)}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:7px 20px;background:var(--grad);color:#fff;font-family:var(--fh);font-size:13px;font-weight:700;border-radius:999px;box-shadow:0 4px 16px var(--glow);white-space:nowrap}
.plan-top{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--border)}.plan-top h3{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--fg);margin-bottom:16px}
.plan-price{display:flex;align-items:baseline;gap:3px;margin-bottom:10px}.pp-c{font-size:24px;font-weight:700;color:var(--fg)}.pp-v{font-family:var(--fh);font-size:60px;font-weight:800;letter-spacing:-.04em;color:var(--fg);line-height:1}.pp-p{font-size:18px;font-weight:500;color:var(--muted)}
.plan-qty{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--primary)}
.plan ul{display:flex;flex-direction:column;gap:16px;margin-bottom:36px;flex:1}
.plan li{font-size:16px;color:var(--fg);display:flex;align-items:center;gap:10px}.plan li::before{content:'✓';color:var(--primary);font-weight:700;font-size:15px}
.plan-btn{display:block;width:100%;padding:18px;text-align:center;font-family:var(--fh);font-size:17px;font-weight:700;border-radius:999px;transition:all .2s;color:var(--fg);background:transparent;border:1.5px solid var(--border)}.plan-btn:hover{background:var(--panel);border-color:var(--fg)}
.plan-btn--feat{color:#fff;background:var(--grad);border-color:transparent;box-shadow:0 4px 18px rgba(99,102,241,.35)}.plan-btn--feat:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(99,102,241,.45);background:var(--grad);border-color:transparent}

/* ══════ FAQ ══════ */
.s-faq{padding:120px 0;background:var(--panel);border-top:1px solid var(--border);text-align:center}.s-faq .title-lg{margin-bottom:56px}
.faq-list{max-width:740px;margin:0 auto;text-align:left}
.fq{border-bottom:1px solid var(--border)}
.fq summary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;cursor:pointer;font-family:var(--fh);font-size:19px;font-weight:600;color:var(--fg);list-style:none;transition:color .15s}.fq summary::-webkit-details-marker{display:none}.fq summary:hover{color:var(--primary)}.fq summary svg{flex-shrink:0;color:var(--muted);transition:transform .3s}.fq[open] summary svg{transform:rotate(45deg);color:var(--primary)}
.fq p{padding-bottom:26px;font-size:17px;color:var(--muted);line-height:1.75}

/* ══════ FINAL CTA ══════ */
/* ── Full-width gradient CTA ──────────────────────── */
.s-final-full{position:relative;padding:120px 0;background:linear-gradient(145deg,#3730a3 0%,#4f46e5 35%,#7c3aed 70%,#a855f7 100%);text-align:center;overflow:hidden}
.s-final-full__orbs{position:absolute;inset:0;background:radial-gradient(circle at 15% 30%,rgba(255,255,255,.1),transparent 50%),radial-gradient(circle at 85% 70%,rgba(255,255,255,.06),transparent 50%);pointer-events:none}
.s-final-full__inner{position:relative;z-index:2;max-width:700px;margin:0 auto}
.s-final-full h2{font-family:var(--fh);font-size:clamp(32px,4.5vw,50px);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.1;margin-bottom:24px}
.s-final-full p{font-size:19px;color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:20px}
.final-rotate{display:inline-block;color:rgba(255,255,255,.95);border-bottom:3px solid rgba(255,255,255,.3);transition:opacity .35s,transform .35s}
.final-highlight{font-family:var(--fh);font-size:clamp(20px,2.5vw,24px);font-weight:700;color:#fff !important;line-height:1.4;letter-spacing:-.02em;margin-bottom:44px !important}
.s-final-full .btn-white{position:relative;z-index:2}

/* ══════ FOOTER ══════ */
.foot{padding:72px 0 36px;background:#0f1117;border-top:none}
.foot-top{display:flex;justify-content:space-between;gap:56px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}.foot-brand p{font-size:15px;color:rgba(255,255,255,.55);line-height:1.65;max-width:300px;margin-top:14px}
.foot-cols{display:flex;gap:72px}.foot-col{display:flex;flex-direction:column;gap:12px}.foot-col h4{font-family:var(--fh);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.65);margin-bottom:6px}.foot-col a{font-size:15px;color:rgba(255,255,255,.5);transition:color .15s}.foot-col a:hover{color:#a78bfa}
.foot .logo{color:#fff}.foot .logo::before{background:var(--grad)}
.foot-bottom{padding-top:28px;text-align:center}.foot-bottom p{font-size:14px;color:rgba(255,255,255,.4)}

/* ══════ ANIMATIONS ══════ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease-out,transform .7s ease-out}.reveal.visible{opacity:1;transform:translateY(0)}
.anim-up{opacity:0;transform:translateY(30px);animation:enterUp .8s ease-out forwards;animation-delay:calc(var(--d) * .15s)}
@keyframes enterUp{to{opacity:1;transform:translateY(0)}}

/* ══════ RESPONSIVE ══════ */

/* ── TABLET (1024px) ────────────────────────────────── */
@media(max-width:1024px){
    .wrap{padding:0 24px}

    /* Hero stacks */
    .hero__row{grid-template-columns:1fr;text-align:center;gap:0}
    .hero__copy{padding:80px 0 20px}
    .hero__desc{margin-left:auto;margin-right:auto}
    .hero__ctas{justify-content:center}
    .hero__phone-wrap{padding:20px 0 40px}
    .phone{width:280px;height:560px;transform:rotate(0);padding:8px}
    .phone__notch{width:95px;height:26px;top:8px}
    .phone__screen{border-radius:34px}

    /* How viral */
    .howviral-grid{grid-template-columns:repeat(3,1fr)}

    /* VS dual stacks */
    .vs-dual{grid-template-columns:1fr;gap:16px;max-width:520px}
    .vs-badge{order:-1}

    /* Pain stacks — image below text */
    .pain-row{grid-template-columns:1fr;gap:40px}
    .pain-left{order:2}
    .pain-img{max-width:300px}

    /* Specialists */
    .spec-grid{grid-template-columns:repeat(2,1fr)}

    /* Plans */
    .plans-grid{grid-template-columns:1fr 1fr}
    .plans-grid .plan:last-child{grid-column:1/-1;max-width:420px;margin:0 auto}
}

/* ── MOBILE (768px) ─────────────────────────────────── */

/* ── MOBILE (768px) — premium, bold, spacious ────────── */
@media(max-width:768px){
    .wrap{padding:0 24px}

    /* Header */
    .hdr{height:60px}
    .hdr__in{padding:0 20px}
    .hdr__nav,.hdr__right{display:none}
    .hdr__burger{display:flex}
    .hdr__mobile{padding:20px 24px 28px}
    .logo{font-size:20px}
    .logo::before{width:30px;height:30px;font-size:16px;border-radius:8px}

    /* Hero — BIG, bold, centered */
    .hero{min-height:auto}
    .hero__row{padding-top:60px;gap:0}
    .hero__copy{padding:56px 0 24px;max-width:100%}
    .hero__h1{font-size:36px;margin-bottom:28px;letter-spacing:-.04em;line-height:1.1}
    .hero__rotate-wrap{margin-bottom:20px}
    .hero__rotate-text{font-size:15px;padding:11px 26px}
    .hero__desc{font-size:17px;line-height:1.7;margin-bottom:36px;max-width:100%;opacity:1}
    .hero__ctas{flex-direction:column;width:100%;gap:12px}
    .btn-hero-primary{width:100%;justify-content:center;padding:18px 28px;font-size:16px;font-weight:700;border-radius:14px}
    .btn-hero-ghost{width:100%;justify-content:center;padding:16px 28px;font-size:16px;border-radius:14px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.08)}

    /* Phone — BIG and prominent */
    .hero__phone-wrap{padding:24px 0 40px}
    .phone{width:280px;height:560px;border-radius:44px;padding:8px;transform:rotate(0)}
    .phone__notch{width:90px;height:24px;top:8px}
    .phone__notch::before{width:48px;height:4px;top:10px}
    .phone__notch::after{width:7px;height:7px;right:20px;top:8px}
    .phone__screen{border-radius:36px}

    /* Phone app content */
    .pa-top{padding:12px 18px 0;font-size:12px}
    .pa-header{padding:14px 18px 16px}
    .pa-logo{font-size:15px;gap:7px}
    .pa-logo-ico{width:24px;height:24px;font-size:12px;border-radius:6px}
    .pa-body{padding:0 16px 20px;gap:12px}
    .pa-card{padding:14px 16px;border-radius:12px}
    .pa-label{font-size:9px;margin-bottom:8px}
    .pa-input{font-size:13px;min-height:20px}
    .pa-cursor{height:15px}
    .pa-ref{padding:12px 16px;border-radius:12px}
    .pa-ref-tag{font-size:9px;margin-bottom:8px}
    .pa-ref-card{padding:10px 14px;border-radius:10px}
    .pa-ref-title{font-size:12px;margin-bottom:6px}
    .pa-ref-meta{font-size:10px}
    .pa-btn{padding:12px;font-size:12px;border-radius:12px}
    .pa-out{border-radius:12px}
    .pa-out-tag{padding:12px 16px 8px;font-size:9px}
    .pa-seg-inner{padding:10px 14px}
    .pa-seg-label{font-size:9px}
    .pa-seg p{font-size:11px}

    /* Hide scroll indicator and orbs */
    .hero__scroll{display:none}
    .hero__deco{display:none}

    /* Section spacing */
    .s-howviral,.s-pain,.s-vs,.s-spec,.s-ben,.s-plans,.s-faq,.s-final-full{padding:72px 0}

    /* Typography — BIGGER */
    .title-lg{font-size:30px;margin-bottom:20px;letter-spacing:-.035em}
    .title-xl{font-size:32px;margin-bottom:36px;letter-spacing:-.035em}
    .tag{font-size:11px;margin-bottom:14px}

    /* How viral cards */
    .howviral-grid{grid-template-columns:1fr;gap:16px}
    .hv-card{padding:32px 24px 34px}
    .hv-num{font-size:40px;margin-bottom:16px}
    .hv-card h3{font-size:20px;margin-bottom:12px}
    .hv-card p{font-size:16px}

    /* VS dual mockups */
    .vs-sub{font-size:17px;margin-bottom:44px}
    .vs-dual{max-width:100%;gap:16px}
    .vs-badge{padding:10px 16px;font-size:13px}
    .vs-mock{border-radius:16px}
    .vs-mock__body{padding:16px}
    .vs-mock__field{padding:12px 14px;font-size:14px;min-height:40px;border-radius:10px}
    .vs-mock__label{font-size:11px;margin-bottom:8px}
    .vs-mock__olabel{font-size:11px}
    .vs-mock__text{font-size:14px;min-height:100px;line-height:1.65}
    .vs-mock__output{min-height:140px}
    .vs-mock__output--hg{min-height:140px}
    .vs-hg-head{font-size:10px;margin-bottom:10px}
    .vs-hg-segs{border-radius:12px}
    .vs-hg-seg__inner{padding:10px 14px}
    .vs-hg-seg__label{font-size:10px}
    .vs-hg-seg p{font-size:13px}
    .vs-caret{height:15px}

    /* Pain section — image first on mobile */
    .pain-intro{font-size:28px;margin-bottom:32px;line-height:1.2}
    .pain-img{max-width:280px;border-radius:20px}
    .pain-row{gap:40px}
    .pain-left{order:-1}
    .pi{gap:18px;padding:22px 0}
    .pi-n{font-size:14px}
    .pi h3{font-size:18px;margin-bottom:6px}
    .pi p{font-size:16px;line-height:1.65}
    .pi:hover{padding-left:0}

    /* Specialists */
    .spec-grid{grid-template-columns:1fr;gap:14px}
    .spec-head{margin-bottom:44px}
    .spec-sub{font-size:18px}
    .sc{padding:28px 24px 28px 28px}
    .sc h3{font-size:18px}
    .sc p{font-size:16px}
    .s-cta{margin-top:40px}
    .s-cta .btn-primary{width:100%;justify-content:center;padding:18px 28px;font-size:16px;border-radius:14px}

    /* Benefits */
    .s-ben .title-lg{margin-bottom:40px}
    .ben-list{max-width:100%}
    .bn{gap:18px;padding:22px 0}
    .bn:hover{padding-left:0}
    .bn-a{font-size:20px}
    .bn h3{font-size:18px}
    .bn p{font-size:16px}

    /* Plans — full width, prominent */
    .plans-sub{font-size:18px;margin-bottom:44px}
    .plans-grid{grid-template-columns:1fr;max-width:100%;gap:20px}
    .plans-grid .plan:last-child{max-width:100%;grid-column:auto}
    .plan{padding:36px 28px}
    .plan--feat{order:-1;transform:none}
    .plan--feat:hover{transform:translateY(-4px)}
    .plan-top{margin-bottom:28px;padding-bottom:28px}
    .plan-top h3{font-size:20px;margin-bottom:14px}
    .pp-v{font-size:52px}
    .pp-c{font-size:22px}
    .pp-p{font-size:17px}
    .plan-qty{font-size:15px}
    .plan ul{gap:14px;margin-bottom:32px}
    .plan li{font-size:16px}
    .plan-btn{padding:18px;font-size:16px;border-radius:14px}
    .plan-badge{font-size:12px;padding:6px 18px}

    /* FAQ */
    .s-faq .title-lg{margin-bottom:40px}
    .faq-list{max-width:100%}
    .fq summary{font-size:17px;padding:22px 0;gap:16px}
    .fq summary span{flex:1}
    .fq p{font-size:16px;padding-bottom:22px;line-height:1.75}

    /* Final CTA — clean, spacious, not cluttered */
    .s-final-full{padding:80px 0}
    .s-final-full__inner{max-width:100%}
    .s-final-full h2{font-size:28px;margin-bottom:32px;line-height:1.15;letter-spacing:-.035em}
    .final-rotate{border-bottom-width:2px}
    .s-final-full p{font-size:15px;margin-bottom:24px;line-height:1.7;color:rgba(255,255,255,.65)}
    .final-highlight{font-size:17px !important;margin-bottom:40px !important;line-height:1.5 !important;color:rgba(255,255,255,.9) !important}
    .s-final-full .btn-white{width:100%;justify-content:center;padding:18px 28px;font-size:16px;border-radius:14px}

    /* Footer */
    .foot{padding:56px 0 32px}
    .foot-top{flex-direction:column;gap:36px;padding-bottom:36px}
    .foot-cols{gap:32px}
    .foot-brand p{font-size:15px}
    .foot-col h4{font-size:12px}
    .foot-col a{font-size:15px}
    .foot-bottom{padding-top:24px}
    .foot-bottom p{font-size:13px}
}

/* ── SMALL MOBILE (480px) ───────────────────────────── */
@media(max-width:480px){
    .wrap{padding:0 20px}
    .hdr{height:56px}
    .hdr__in{padding:0 16px}
    .logo{font-size:18px;gap:8px}
    .logo::before{width:26px;height:26px;font-size:14px;border-radius:7px}

    .hero__row{padding-top:56px}
    .hero__copy{padding:44px 0 20px}
    .hero__h1{font-size:30px;margin-bottom:24px;line-height:1.1}
    .hero__rotate-text{font-size:13px;padding:9px 20px}
    .hero__desc{font-size:15px;margin-bottom:32px}
    .btn-hero-primary,.btn-hero-ghost{padding:16px 24px;font-size:15px}

    .phone{width:260px;height:520px;border-radius:40px;padding:7px}
    .phone__notch{width:82px;height:22px;top:7px}
    .phone__notch::before{width:42px;height:4px;top:9px}
    .phone__notch::after{width:6px;height:6px;right:18px;top:8px}
    .phone__screen{border-radius:34px}
    .pa-top{padding:10px 14px 0;font-size:11px}
    .pa-header{padding:12px 14px 14px}
    .pa-logo{font-size:14px}
    .pa-logo-ico{width:22px;height:22px;font-size:11px;border-radius:5px}
    .pa-body{padding:0 14px 16px;gap:10px}
    .pa-card{padding:12px 14px;border-radius:10px}
    .pa-input{font-size:12px}
    .pa-ref{padding:10px 14px;border-radius:10px}
    .pa-ref-card{padding:8px 12px;border-radius:8px}
    .pa-ref-title{font-size:11px}
    .pa-btn{padding:10px;font-size:11px;border-radius:10px}
    .pa-out{border-radius:10px}
    .pa-seg-inner{padding:8px 12px}
    .pa-seg p{font-size:10px}

    .title-lg{font-size:26px}
    .title-xl{font-size:28px;margin-bottom:32px}
    .hv-card{padding:28px 22px 30px}
    .hv-num{font-size:36px;margin-bottom:14px}
    .hv-card h3{font-size:18px}
    .hv-card p{font-size:15px}

    .vs-sub{font-size:15px;margin-bottom:36px}
    .vs-mock{border-radius:14px}
    .vs-mock__body{padding:14px}
    .vs-mock__field{padding:10px 12px;font-size:12px;min-height:36px;border-radius:8px}
    .vs-mock__text{font-size:12px;min-height:80px}
    .vs-hg-seg__inner{padding:8px 12px}

    .pain-intro{font-size:24px;line-height:1.2}
    .pain-img{max-width:240px;border-radius:18px}
    .pi h3{font-size:17px}
    .pi p{font-size:14px}
    .sc{padding:24px 20px 24px 24px}
    .sc h3{font-size:17px}
    .sc p{font-size:14px}
    .bn h3{font-size:17px}
    .bn p{font-size:14px}

    .plan{padding:32px 24px}
    .pp-v{font-size:48px}
    .plan-top h3{font-size:18px}
    .plan li{font-size:15px}
    .plan-btn{padding:16px;font-size:15px}
    .plan-badge{font-size:11px;padding:5px 16px;top:-12px}

    .fq summary{font-size:16px;padding:20px 0}
    .fq p{font-size:15px}

    .s-final-full{padding:64px 0}
    .s-final-full h2{font-size:24px;line-height:1.15}
    .s-final-full p{font-size:14px}
    .final-highlight{font-size:16px !important;margin-bottom:36px !important}

    .foot{padding:44px 0 24px}
    .foot-top{gap:28px;padding-bottom:28px}
    .foot-cols{flex-direction:column;gap:24px}
    .foot-brand p{font-size:14px}
    .foot-col a{font-size:14px}
    .foot-col h4{font-size:11px}
}