/* =========================================
   RESET
   ========================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* =========================================
   TOKENS
   ========================================= */
:root {
    --black:    #000000;
    --surface:  #0a0a0a;
    --surface2: #111111;
    --border:   rgba(255,255,255,0.07);
    --border2:  rgba(255,255,255,0.14);
    --text:     #ffffff;
    --muted:    #888888;
    --muted2:   #555555;
    --grad:     linear-gradient(90deg,#3b82f6,#6366f1,#8b5cf6);
    --grad-45:  linear-gradient(45deg,#3b82f6,#6366f1,#8b5cf6);
    --glow-o:   rgba(99,102,241,0.35);
    --glow-p:   rgba(139,92,246,0.25);
    --r:        18px;
    --r2:       12px;
}

/* =========================================
   BASE
   ========================================= */
body {
    background: var(--black);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

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

/* Container */
.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* Gradient text */
.gr {
    background: var(--grad-45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Eyebrow label */
.eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6366f1;
    background: rgba(99,102,241,.09);
    border: 1px solid rgba(99,102,241,.22);
    padding: .28rem .85rem;
    border-radius: 99px;
    margin-bottom: 1.2rem;
}

/* Section header */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}
.section-header h2 {
    font-size: clamp(2rem,3.8vw,3rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: .9rem;
}
.section-sub {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 540px;
    margin: 0 auto;
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =========================================
   BUTTONS
   ========================================= */
.btn-grad {
    background: var(--grad-45);
    background-size: 300% 300%;
    animation: gflow 4s ease infinite;
    color: #fff;
    border: none;
    padding: .65rem 1.4rem;
    border-radius: var(--r2);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    box-shadow: 0 0 28px var(--glow-o);
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 0 42px var(--glow-o); }

.btn-ghost-sm {
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    border: 1px solid var(--border2);
    padding: .55rem 1.1rem;
    border-radius: var(--r2);
    transition: color .2s, border-color .2s;
    white-space: nowrap;
    display: inline-block;
}
.btn-ghost-sm:hover { color: #fff; border-color: rgba(255,255,255,.3); }

@keyframes gflow {
    0%,100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

/* =========================================
   HEADER
   ========================================= */
#header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    transition: background .3s;
}
.header-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.logo { height: 28px; filter: brightness(0) invert(1); display: block; }
.header-nav { display: flex; gap: 2rem; }
.header-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: color .2s;
}
.header-nav a:hover { color: #fff; }
.header-right { display: flex; align-items: center; gap: .75rem; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px; height: 38px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border2);
    border-radius: 8px;
    cursor: pointer; flex-shrink: 0;
}
.hamburger span { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; }

/* Mobile nav */
.mobile-nav {
    display: none;
    position: fixed; top:0; right:0;
    width: min(300px,82vw); height:100vh;
    background: #080808;
    border-left: 1px solid var(--border2);
    z-index: 300;
    padding: 5rem 1.75rem 2rem;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.open { display: flex; transform: translateX(0); }
.mob-close {
    position: absolute; top:1rem; right:1.25rem;
    background: none; border: none;
    color: #fff; font-size: 1.8rem; cursor: pointer; opacity: .6; line-height:1;
}
.mob-close:hover { opacity: 1; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mob-link {
    display: block; color: var(--muted);
    text-decoration: none; font-size: 1rem; font-weight: 500;
    padding: 1rem 0; border-bottom: 1px solid var(--border);
    transition: color .2s;
}
.mob-link:hover { color: #fff; }
.mob-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(5px);
    z-index: 299;
}
.mob-backdrop.open { display: block; }

/* =========================================
   HERO
   ========================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9rem 2rem 5rem;
    overflow: hidden;
}
.hero-glow-a {
    position: absolute; top: -20%; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 600px;
    background: radial-gradient(ellipse, rgba(99,102,241,.2) 0%, transparent 70%);
    pointer-events: none;
}
.hero-glow-b {
    position: absolute; top: 30%; left: 60%;
    width: 600px; height: 500px;
    background: radial-gradient(ellipse, rgba(139,92,246,.14) 0%, transparent 60%);
    pointer-events: none;
}
.hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 80%);
}
.hero-inner {
    position: relative; z-index: 2;
    max-width: 880px;
    animation: fadeUp .9s cubic-bezier(.16,1,.3,1) forwards;
    opacity: 0; transform: translateY(28px);
}
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 99px;
    padding: .32rem 1rem;
    font-size: .78rem; font-weight: 500;
    color: rgba(255,255,255,.6);
    margin-bottom: 2rem;
}
.badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--grad-45);
    flex-shrink: 0;
    animation: bpulse 2s ease infinite;
}
@keyframes bpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.hero-h1 {
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 1.6rem;
}
.hero-sub {
    color: var(--muted);
    font-size: clamp(.95rem, 1.8vw, 1.1rem);
    line-height: 1.75;
    max-width: 580px;
    margin: 0 auto 2.5rem;
}
.hero-actions {
    display: flex; gap: 1rem;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: 3.5rem;
}
.btn-hero {
    padding: .9rem 2rem;
    font-size: .98rem; font-weight: 700;
    border-radius: var(--r);
}
.btn-outline-hero {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--muted); text-decoration: none;
    font-size: .95rem; font-weight: 500;
    border: 1px solid var(--border2);
    padding: .9rem 1.8rem;
    border-radius: var(--r);
    transition: color .2s, border-color .2s;
}
.btn-outline-hero:hover { color: #fff; border-color: rgba(255,255,255,.3); }

.hero-proof {
    display: flex; align-items: center;
    justify-content: center; gap: 2.5rem; flex-wrap: wrap;
}
.proof-item { text-align: center; }
.proof-num {
    display: block;
    font-size: 1.9rem; font-weight: 900;
    background: var(--grad-45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.proof-plus { font-size: 1.4rem; }
.proof-label { font-size: .72rem; color: var(--muted2); text-transform: uppercase; letter-spacing: .07em; margin-top: .3rem; display: block; }
.proof-sep { width:1px; height:34px; background: var(--border2); }

/* =========================================
   MARQUEE
   ========================================= */
.marquee-section {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1.4rem 0;
    overflow: hidden;
    background: rgba(255,255,255,.015);
}
.marquee-label {
    text-align: center;
    font-size: .72rem;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: .9rem;
}
.marquee-wrap { overflow: hidden; }
.marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2rem;
    animation: marquee 28s linear infinite;
    width: max-content;
    will-change: transform;
}
.marquee-track span {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255,255,255,.4);
    letter-spacing: .02em;
}
.marquee-track .dot {
    flex-shrink: 0;
    color: rgba(255,255,255,.15);
    font-size: .6rem;
}
.marquee-section:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* =========================================
   CAROUSEL
   ========================================= */
.carousel-section { padding: 5rem 0; }
.carousel-eyebrow {
    font-size: .72rem; color: var(--muted2);
    text-transform: uppercase; letter-spacing: .12em;
    text-align: center; margin-bottom: 2.5rem;
}
.portfolio-carousel {
    width: 100%; height: 520px;
    position: relative; perspective: 1200px;
    display: flex; justify-content: center; align-items: center;
}
.carousel-track {
    display: flex; align-items: center; justify-content: center;
    position: absolute; transform-style: preserve-3d;
}
.carousel-item {
    width: 195px; height: 345px;
    position: absolute;
    transition: all .55s cubic-bezier(.25,1,.5,1);
    opacity: .5; transform: scale(.77);
}
.glass-card {
    width:100%; height:100%;
    border-radius: 18px; overflow: hidden;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.07);
    position: relative;
}
.reel-img {
    width:100%; height:100%; object-fit:contain;
    display:block; position:absolute; top:0;left:0;
    z-index:1; border-radius:18px;
}
.carousel-item.active { opacity:1; transform:scale(1.2) translateZ(50px); z-index:10; }
.carousel-item.active .glass-card {
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 28px 70px rgba(0,0,0,.7), 0 0 50px var(--glow-p);
}

/* =========================================
   PRODUCT / DASHBOARD
   ========================================= */
.product-section { padding: 7rem 0; }
.product-frame { position: relative; }
.product-glow {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-55%);
    width: 70%; height: 60%;
    background: radial-gradient(ellipse, var(--glow-p) 0%, transparent 70%);
    pointer-events: none; z-index:0;
}
.product-border {
    position: relative; z-index:1;
    border-radius: 20px;
    border: 1px solid var(--border2);
    overflow: hidden;
    box-shadow: 0 50px 120px rgba(0,0,0,.8), 0 0 80px var(--glow-p);
    background: var(--surface);
}
.product-img { width:100%; display:block; border-radius: 20px; }
.product-chips {
    display: flex; justify-content: center; gap: 1rem;
    flex-wrap: wrap; margin-top: 2rem; position: relative; z-index:2;
}
.chip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border2);
    border-radius: 99px;
    padding: .38rem 1rem;
    font-size: .8rem; color: var(--muted);
}
.chip-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.chip-dot.green  { background:#22c55e; box-shadow:0 0 7px #22c55e; }
.chip-dot.orange { background:#6366f1; box-shadow:0 0 7px #6366f1; }
.chip-dot.pink   { background:#ec4899; box-shadow:0 0 7px #ec4899; }

/* =========================================
   FEATURES BENTO
   ========================================= */
.features-section { padding: 7rem 0; background: var(--surface); }

.bento {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto;
    gap: 1.25rem;
}
.bento-card {
    background: var(--black);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 2.25rem;
    position: relative;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
}
.bento-card:hover { border-color: var(--border2); transform: translateY(-3px); }
.bento-wide { grid-column: span 2; }

/* Gradient border on first card */
.bento-grad-border {
    background: linear-gradient(var(--black),var(--black)) padding-box,
                var(--grad) border-box;
    border: 1px solid transparent;
}
.bento-grad-border:hover { transform: translateY(-3px); }

.bento-eyebrow {
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: #6366f1; margin-bottom: .75rem;
}
.bento-card h3 {
    font-size: 1.25rem; font-weight: 800;
    letter-spacing: -.03em; line-height: 1.2;
    color: #fff; margin-bottom: .6rem;
}
.bento-card > p {
    color: var(--muted); font-size: .88rem;
    line-height: 1.65; margin-bottom: 1.5rem;
}
.bento-list {
    list-style: none; display:flex; flex-direction:column; gap:.5rem;
}
.bento-list li {
    font-size: .85rem; color: var(--muted);
    padding-left: 1.2rem; position: relative;
}
.bento-list li::before {
    content:'→'; position:absolute;
    left:0; color:#6366f1; font-size:.78rem;
}

/* Video visual */
.bento-visual-video {
    margin-top:1.75rem; display:flex; align-items:center; gap:1rem;
}
.fake-timeline { flex:1; display:flex; flex-direction:column; gap:6px; }
.tl-bar {
    height:6px; border-radius:3px;
    background: rgba(255,255,255,.08);
}
.tl-b1{width:90%;background:linear-gradient(90deg,rgba(59,130,246,.6),rgba(139,92,246,.6))}
.tl-b2{width:65%}
.tl-b3{width:80%;background:rgba(255,255,255,.12)}
.tl-b4{width:50%}
.fake-screen {
    width:60px;height:60px;border-radius:12px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
    color:#6366f1;flex-shrink:0;
}

/* Score visual */
.score-visual {
    display:flex; align-items:center; gap:1.5rem; margin-top:1.5rem;
}
.score-ring { position:relative; width:80px; height:80px; flex-shrink:0; }
.score-ring svg { width:100%; height:100%; }
.score-num {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:1.3rem; font-weight:900; color:#fff;
}
.score-label { font-size:.8rem; color:var(--muted); line-height:1.5; }

/* Platform chips */
.platform-grid {
    display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem;
}
.p-chip {
    background:rgba(255,255,255,.05);
    border:1px solid var(--border2);
    border-radius:99px; padding:.3rem .8rem;
    font-size:.78rem; color:var(--muted);
}
.p-chip-more { color:#6366f1; border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.07); }

/* Pipeline flow */
.pipeline-flow {
    display:flex; align-items:center; gap:.6rem;
    flex-wrap:wrap; margin-top:1.75rem;
}
.pipe-step {
    display:flex; align-items:center; gap:.5rem;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:10px; padding:.5rem .9rem;
    font-size:.82rem; color:var(--muted);
}
.pipe-step-highlight {
    background:rgba(99,102,241,.1);
    border-color:rgba(99,102,241,.3);
    color:#6366f1; font-weight:600;
}
.pipe-icon { color:var(--muted2); flex-shrink:0; }
.pipe-step-highlight .pipe-icon { color:#6366f1; }
.pipe-arrow { color:var(--muted2); font-size:.85rem; flex-shrink:0; }

/* =========================================
   PROCESS
   ========================================= */
.process-section { padding: 7rem 0; }
.steps {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:0; position:relative; max-width:960px;
    margin:0 auto; text-align:left;
}
.step { position:relative; padding:0 1.5rem; }
.step:first-child { padding-left:0; }
.step:last-child  { padding-right:0; }
.step-line {
    position:absolute; top:24px; right:-1px;
    width:2px; height:32px;
    background:linear-gradient(var(--border2),transparent);
}
.step-num {
    font-size:.72rem; font-weight:800;
    letter-spacing:.1em; color:var(--muted2);
    margin-bottom:1.2rem; display:block;
}
.step-body h3 {
    font-size:1rem; font-weight:700;
    color:#fff; margin-bottom:.5rem;
    letter-spacing:-.02em;
}
.step-body p { font-size:.875rem; color:var(--muted); line-height:1.65; }

/* =========================================
   TESTIMONIALS
   ========================================= */
.testi-section { padding:7rem 0; background:var(--surface); }
.testi-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1.25rem; margin-top:0;
}
.testi-card {
    background:var(--black);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:2.25rem;
    transition:border-color .2s;
}
.testi-card:hover { border-color:var(--border2); }
.testi-featured {
    background:linear-gradient(var(--black),var(--black)) padding-box,
               var(--grad) border-box;
    border:1px solid transparent;
}
.testi-stars { color:#f59e0b; font-size:.85rem; letter-spacing:.1em; margin-bottom:1.2rem; }
.testi-card blockquote {
    font-size:.97rem; color:var(--muted);
    line-height:1.75; font-style:italic;
    margin-bottom:1.75rem; quotes: none;
}
.testi-author { display:flex; align-items:center; gap:.85rem; }
.testi-av {
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0;
}
.testi-name { font-size:.88rem; font-weight:600; color:#fff; }
.testi-role { font-size:.75rem; color:var(--muted2); margin-top:.1rem; }

/* =========================================
   PRICING
   ========================================= */
.pricing-section { padding:7rem 0; }
.pricing-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1.25rem; align-items:start; margin-bottom:1.5rem;
}
.price-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:2.25rem; position:relative;
    transition:border-color .2s;
}
.price-card:hover { border-color:var(--border2); }
.price-popular {
    background:linear-gradient(var(--surface),var(--surface)) padding-box,
               var(--grad) border-box;
    border:1px solid transparent;
    transform:scale(1.03);
}
.price-badge {
    display:inline-block;
    background:var(--grad-45);
    color:#fff; font-size:.7rem; font-weight:700;
    letter-spacing:.05em; padding:.2rem .8rem;
    border-radius:99px; margin-bottom:1.2rem;
}
.price-plan {
    font-size:.78rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); margin-bottom:.6rem;
}
.price-amount {
    font-size:3rem; font-weight:900;
    letter-spacing:-.04em; color:#fff;
    line-height:1; margin-bottom:.75rem;
}
.price-mo { font-size:1rem; font-weight:400; color:var(--muted2); }
.price-desc { color:var(--muted); font-size:.875rem; line-height:1.55; margin-bottom:1.75rem; }
.price-list {
    list-style:none; display:flex; flex-direction:column;
    gap:.7rem; margin-bottom:2rem;
}
.price-list li {
    display:flex; align-items:center; gap:.65rem;
    font-size:.875rem; color:var(--muted);
}
.price-list li.yes::before { content:'✓'; color:#22c55e; font-size:.85rem; flex-shrink:0; font-weight:700; }
.price-list li.no  { opacity:.35; }
.price-list li.no::before  { content:'✕'; color:var(--muted2); font-size:.85rem; flex-shrink:0; }
.price-btn {
    width:100%; padding:.85rem; border-radius:var(--r2);
    font-size:.9rem; font-weight:600; cursor:pointer;
    transition:all .2s;
}
.price-btn-grad {
    background:var(--grad-45); background-size:300% 300%;
    animation:gflow 4s ease infinite;
    color:#fff; border:none;
    box-shadow:0 0 24px var(--glow-o);
}
.price-btn-grad:hover { box-shadow:0 0 40px var(--glow-o); transform:translateY(-1px); }
.price-btn-outline {
    background:transparent;
    border:1px solid var(--border2); color:#fff;
}
.price-btn-outline:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.3); }
.pricing-footnote {
    text-align:center; font-size:.82rem; color:var(--muted2);
}

/* =========================================
   FAQ
   ========================================= */
.faq-section { padding:7rem 0; background:var(--surface); }
.faq-list { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:.5rem; }
.faq-item {
    border:1px solid var(--border);
    border-radius:var(--r2);
    overflow:hidden;
    transition:border-color .2s;
}
.faq-item:hover { border-color:var(--border2); }
.faq-q {
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:1.25rem 1.5rem;
    background:none; border:none; cursor:pointer;
    text-align:left; color:#fff;
    font-size:.95rem; font-weight:600;
    gap:1rem;
}
.faq-icon {
    font-size:1.2rem; font-weight:300; color:var(--muted);
    flex-shrink:0; transition:transform .3s;
    display:inline-block; line-height:1;
}
.faq-item.open .faq-icon { transform:rotate(45deg); color:#6366f1; }
.faq-a {
    max-height:0; overflow:hidden;
    transition:max-height .4s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-a { max-height:200px; }
.faq-a p {
    padding:0 1.5rem 1.25rem;
    color:var(--muted); font-size:.875rem; line-height:1.7;
}

/* =========================================
   FINAL CTA
   ========================================= */
.cta-section {
    padding:8rem 0;
    position:relative; overflow:hidden; text-align:center;
}
.cta-glow-a {
    position:absolute; top:-20%; left:50%;
    transform:translateX(-50%);
    width:800px; height:600px;
    background:radial-gradient(ellipse,rgba(99,102,241,.18) 0%,transparent 65%);
    pointer-events:none;
}
.cta-glow-b {
    position:absolute; bottom:-10%; right:-10%;
    width:500px; height:500px;
    background:radial-gradient(ellipse,rgba(139,92,246,.12) 0%,transparent 65%);
    pointer-events:none;
}
.cta-inner {
    position:relative; z-index:1;
    max-width:680px; margin:0 auto;
}
.cta-inner h2 {
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:900; letter-spacing:-.04em;
    line-height:1.1; color:#fff;
    margin-bottom:1rem;
}
.cta-inner > p {
    color:var(--muted); font-size:1rem;
    line-height:1.7; margin-bottom:2.5rem;
}
.btn-cta {
    padding:1rem 2.25rem;
    font-size:1rem; font-weight:700;
    border-radius:var(--r);
}
.cta-fine { margin-top:1.2rem; font-size:.78rem; color:var(--muted2); }

/* =========================================
   FOOTER
   ========================================= */
footer {
    background:var(--black);
    border-top:1px solid var(--border);
    padding:4.5rem 0 2rem;
}
.footer-top {
    display:grid; grid-template-columns:1.5fr 2fr;
    gap:4rem; margin-bottom:3rem;
}
.footer-brand p { color:var(--muted); font-size:.875rem; line-height:1.65; }
.footer-socials { display:flex; gap:.65rem; margin-top:1.2rem; }
.footer-socials a {
    width:34px; height:34px;
    border:1px solid var(--border);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); text-decoration:none;
    transition:color .2s,border-color .2s;
}
.footer-socials a:hover { color:#fff; border-color:var(--border2); }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer-col h4 {
    font-size:.75rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.1em;
    color:#fff; margin-bottom:1.2rem;
}
.footer-col { display:flex; flex-direction:column; }
.footer-col a {
    color:var(--muted); text-decoration:none;
    font-size:.875rem; margin-bottom:.65rem;
    transition:color .2s;
}
.footer-col a:hover { color:#6366f1; }
.footer-bottom {
    border-top:1px solid var(--border);
    padding-top:2rem;
    display:flex; justify-content:space-between; align-items:center;
    color:var(--muted2); font-size:.82rem; flex-wrap:wrap; gap:.75rem;
}

/* =========================================
   MODAL
   ========================================= */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    z-index:1000;
    display:none; justify-content:center; align-items:center;
    opacity:0; transition:opacity .3s;
}
.modal-overlay.active { display:flex; opacity:1; }
.modal-box {
    background:#0d0d0d;
    border:1px solid #222;
    width:90%; max-width:600px;
    border-radius:20px; padding:1rem;
    position:relative;
    box-shadow:0 28px 70px rgba(0,0,0,.7);
    transform:scale(.92);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.modal-overlay.active .modal-box { transform:scale(1); }
.modal-x {
    position:absolute; top:-44px; right:0;
    background:none; border:none; color:#fff;
    font-size:2rem; cursor:pointer;
    opacity:.6; line-height:1;
}
.modal-x:hover { opacity:1; }

/* =========================================
   UTILITIES
   ========================================= */
.hide-mobile { }

/* =========================================
   RESPONSIVE — TABLET (≤ 1024px)
   ========================================= */
@media (max-width:1024px) {
    .steps {
        grid-template-columns:repeat(2,1fr);
        gap:2.5rem 2rem;
    }
    .step-line { display:none; }
    .bento { grid-template-columns:repeat(2,1fr); }
    .bento-wide { grid-column:span 2; }
    .pricing-grid { grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; }
    .price-popular { transform:none; }
    .testi-grid { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
    .footer-top { grid-template-columns:1fr; gap:2.5rem; }
}

/* =========================================
   RESPONSIVE — MOBILE (≤ 768px)
   ========================================= */
@media (max-width:768px) {
    .hide-mobile { display:none!important; }
    .hamburger   { display:flex; }
    .header-nav  { display:none; }

    .container { padding:0 1.25rem; }

    .hero             { padding:7.5rem 1.25rem 4rem; }
    .hero-h1          { font-size:clamp(2rem,8vw,2.8rem); }
    .hero-sub         { font-size:.92rem; }
    .hero-actions     { flex-direction:column; align-items:stretch; }
    .hero-actions > * { width:100%; justify-content:center; text-align:center; }
    .btn-hero         { padding:.85rem 1.5rem; }
    .hero-proof       { gap:1.2rem; }
    .proof-num        { font-size:1.5rem; }
    .proof-label      { font-size:.62rem; }
    .proof-sep        { height:26px; }

    .marquee-section  { padding:1.2rem 0; }

    .carousel-section { padding:3.5rem 0; }
    .portfolio-carousel { height:320px; }
    .carousel-item    { width:130px; height:230px; }

    .product-section,
    .features-section,
    .process-section,
    .testi-section,
    .pricing-section,
    .faq-section,
    .cta-section { padding:5rem 0; }

    .section-header        { margin-bottom:2.5rem; }
    .section-header h2     { font-size:1.85rem; }
    .section-sub           { font-size:.9rem; }

    .product-chips { flex-direction:column; align-items:center; gap:.5rem; }

    .bento { grid-template-columns:1fr; }
    .bento-wide { grid-column:span 1; }
    .bento-card { padding:1.75rem; }
    .pipeline-flow { gap:.4rem; }
    .pipe-step { font-size:.75rem; padding:.4rem .7rem; }

    .steps { grid-template-columns:1fr; gap:2rem; max-width:100%; }
    .step { padding:0; }
    .step-line { display:none; }

    .testi-grid { grid-template-columns:1fr; max-width:100%; }
    .testi-card { padding:1.75rem; }

    .pricing-grid { max-width:100%; }
    .price-card   { padding:1.75rem; }
    .price-amount { font-size:2.5rem; }

    .faq-list { max-width:100%; }

    .cta-section  { padding:5rem 0; }
    .cta-inner h2 { font-size:2rem; }
    .cta-inner > p{ font-size:.92rem; }
    .btn-cta      { width:100%; justify-content:center; }

    footer { padding:3rem 0 1.5rem; }
    .footer-top   { gap:2rem; }
    .footer-links { grid-template-columns:repeat(2,1fr); }
    .footer-bottom{ flex-direction:column; text-align:center; }
    .footer-bottom .btn-ghost-sm { width:100%; text-align:center; }

    .modal-box { width:95%; }
    .modal-x   { top:-40px; font-size:1.8rem; }
}

/* =========================================
   RESPONSIVE — SMALL (≤ 480px)
   ========================================= */
@media (max-width:480px) {
    .hero-h1        { font-size:1.85rem; }
    .hero-proof     { gap:.75rem; }
    .proof-sep      { display:none; }
    .footer-links   { grid-template-columns:1fr; }
    .pricing-grid   { max-width:100%; }
}