/* ===== BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --bg: #09090b;
    --surface: #18181b;
    --surface-2: #27272a;
    --border: #3f3f46;
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-glow: rgba(59,130,246,0.15);
    --green: #22c55e;
    --red: #ef4444;
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.2s ease;
}

html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
    font-family:'Inter',-apple-system,sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
.small-container { max-width:700px; margin:0 auto; padding:0 20px; }

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; font-size:0.9rem; font-weight:600;
    border-radius:var(--radius-sm); border:1.5px solid transparent;
    cursor:pointer; transition:all var(--transition);
    font-family:inherit; text-decoration:none;
}
.btn-sm { padding:8px 16px; font-size:0.85rem; }
.btn-lg { padding:14px 28px; font-size:1rem; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 20px var(--accent-glow); }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-ghost { background:transparent; color:var(--text-muted); border:none; }
.btn-ghost:hover { color:var(--text); }
.btn-block { width:100%; justify-content:center; }

/* ===== NAV ===== */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:16px 0;
    background:rgba(9,9,11,0.8);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(63,63,70,0.5);
}
.nav-flex { display:flex; align-items:center; justify-content:space-between; }
.logo { font-size:1.2rem; font-weight:800; letter-spacing:-0.03em; }
.logo-dot { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:24px; }
.nav-link { font-size:0.85rem; color:var(--text-muted); transition:color var(--transition); }
.nav-link:hover { color:var(--text); }

.mobile-toggle {
    display:none; background:none; border:none; cursor:pointer;
    flex-direction:column; gap:5px; padding:4px; z-index:101;
}
.mobile-toggle span {
    display:block; width:24px; height:2px; background:var(--text);
    border-radius:2px; transition:all 0.3s ease;
}

/* ===== HERO ===== */
.hero {
    padding:160px 0 120px;
    text-align:center;
    position:relative;
    overflow:hidden;
    min-height:90vh;
    display:flex;
    align-items:center;
}

/* Animated grid background */
.hero-grid-bg {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:
        linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
    animation: gridPan 30s linear infinite;
}
@keyframes gridPan {
    from { background-position: 0 0, 0 0; }
    to { background-position: 60px 60px, 60px 60px; }
}

/* Noise overlay */
.hero-noise {
    position:absolute; inset:0; pointer-events:none; z-index:1;
    opacity:0.035; mix-blend-mode:overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Mouse-follow glow */
.hero-cursor-glow {
    position:absolute; width:500px; height:500px; border-radius:50%;
    background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, rgba(34,197,94,0.08) 40%, transparent 70%);
    pointer-events:none; z-index:0;
    top:0; left:0;
    filter: blur(20px);
    opacity:0.4;
    transition: opacity 0.4s ease;
    will-change: transform;
}

/* Floating site previews */
.hero-floats { position:absolute; inset:0; pointer-events:none; z-index:0; }
.float-mock {
    position:absolute;
    width:180px;
    background:#0a0a0a; border:1px solid var(--border);
    border-radius:10px; overflow:hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(59,130,246,0.1);
    opacity:0.55;
}
.float-mock .fm-bar {
    display:flex; gap:4px; padding:6px 8px; background:#18181b;
    border-bottom:1px solid var(--border);
}
.float-mock .fm-bar span {
    width:6px; height:6px; border-radius:50%; background:#444;
}
.float-mock .fm-bar span:nth-child(1) { background:#ff5f57; }
.float-mock .fm-bar span:nth-child(2) { background:#febc2e; }
.float-mock .fm-bar span:nth-child(3) { background:#28c840; }
.float-mock .fm-body { padding:14px 12px; min-height:90px; }
.float-mock .fm-title { font-size:0.7rem; font-weight:800; margin-bottom:10px; letter-spacing:-0.01em; }
.float-mock .fm-line { height:4px; background:rgba(255,255,255,0.15); border-radius:2px; margin-bottom:5px; }
.float-mock .fm-line.short { width:55%; }
.float-mock .fm-line.light { background:rgba(0,0,0,0.2); }

.float-mock-1 { top:18%; left:6%; animation: floatA 9s ease-in-out infinite; transform: rotate(-8deg); }
.float-mock-2 { top:12%; right:8%; animation: floatB 11s ease-in-out infinite; transform: rotate(6deg); }
.float-mock-3 { bottom:22%; left:9%; animation: floatC 10s ease-in-out infinite; transform: rotate(5deg); }
.float-mock-4 { bottom:16%; right:7%; animation: floatD 12s ease-in-out infinite; transform: rotate(-6deg); }

@keyframes floatA { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(10px,-20px) rotate(-5deg); } }
@keyframes floatB { 0%,100% { transform: translate(0,0) rotate(6deg); } 50% { transform: translate(-15px,-18px) rotate(9deg); } }
@keyframes floatC { 0%,100% { transform: translate(0,0) rotate(5deg); } 50% { transform: translate(12px,-22px) rotate(2deg); } }
@keyframes floatD { 0%,100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(-10px,-20px) rotate(-9deg); } }
.hero::before {
    content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
    width:800px;height:600px;border-radius:50%;
    background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
    pointer-events:none;
}
.hero::after {
    content:'';position:absolute;bottom:-100px;right:-100px;
    width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle,rgba(34,197,94,0.08) 0%,transparent 70%);
    pointer-events:none;
}
.hero > .container { position:relative; z-index:1; }

.hero-label {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; font-size:0.75rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--green);
    background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2);
    border-radius:999px; margin-bottom:24px;
}
.status-dot {
    width:6px; height:6px; border-radius:50%; background:var(--green);
    box-shadow:0 0 10px var(--green); animation:pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { opacity:1; }
    50% { opacity:0.5; }
}
.hero h1 {
    font-size:clamp(2.4rem,7vw,5rem); font-weight:900;
    line-height:1.02; letter-spacing:-0.045em; margin-bottom:24px;
}
.highlight {
    background:linear-gradient(135deg,var(--accent),#22c55e);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.hero-sub {
    font-size:clamp(1rem,2vw,1.2rem); color:var(--text-muted);
    max-width:620px; margin:0 auto 40px; line-height:1.7;
}
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }
.hero-proof {
    display:inline-flex; gap:32px; align-items:center;
    padding:20px 32px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); flex-wrap:wrap; justify-content:center;
}
.proof-item { text-align:center; }
.proof-item strong {
    display:block; font-size:1.5rem; font-weight:800;
    background:linear-gradient(135deg,var(--accent),#22c55e);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    line-height:1.1; margin-bottom:4px;
}
.proof-item span { font-size:0.75rem; color:var(--text-muted); }
.proof-divider { width:1px; height:36px; background:var(--border); }

/* ===== SECTION HEADER ===== */
.section-header { text-align:center; margin-bottom:56px; }
.section-tag {
    display:inline-block; padding:5px 14px; font-size:0.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.12em;
    color:var(--accent); background:var(--accent-glow);
    border:1px solid rgba(59,130,246,0.2); border-radius:999px;
    margin-bottom:14px;
}
.section-header h2 {
    font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800;
    letter-spacing:-0.02em; margin-bottom:12px; line-height:1.2;
}
.section-header p { color:var(--text-muted); font-size:1rem; max-width:600px; margin:0 auto; }

/* ===== BEFORE/AFTER ===== */
.before-after { padding:80px 0; }
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ba-card {
    position:relative; padding:20px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
}
.ba-card--before { border-color:rgba(239,68,68,0.3); }
.ba-card--after { border-color:rgba(34,197,94,0.3); }
.ba-label {
    position:absolute; top:12px; right:12px; z-index:2;
    padding:4px 12px; font-size:0.7rem; font-weight:800;
    border-radius:999px; letter-spacing:0.08em;
}
.ba-label--before { background:rgba(239,68,68,0.15); color:var(--red); border:1px solid rgba(239,68,68,0.3); }
.ba-label--after { background:rgba(34,197,94,0.15); color:var(--green); border:1px solid rgba(34,197,94,0.3); }
.ba-browser {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; background:#2a2a2a;
    border-radius:6px 6px 0 0; margin-bottom:0;
}
.ba-browser .browser-url { font-size:0.7rem; }
.ba-preview { height:260px; overflow:hidden; border-radius:0 0 6px 6px; }

/* BEFORE preview (bad 2010 site) */
.ba-preview--before {
    background:#eeeeee; color:#000;
    font-family:'Times New Roman',serif;
    padding:12px;
}
.old-nav {
    background:#1a4b8c; color:#ffd700;
    padding:6px 8px; font-size:0.72rem;
    border:1px solid #000; margin-bottom:8px;
}
.old-nav span { text-decoration:underline; cursor:pointer; }
.old-hero {
    background:#fff8dc; padding:12px; text-align:center;
    border:1px solid #999; margin-bottom:8px;
}
.old-hero h3 {
    font-family:'Times New Roman',serif;
    font-size:0.9rem; color:#cc0000; margin-bottom:6px;
    text-shadow:1px 1px 0 #fff, 2px 2px 0 #000;
}
.old-tagline { font-size:0.7rem; color:#333; font-style:italic; }
.old-hitcounter {
    display:inline-block; margin-top:6px;
    padding:2px 6px; background:#000; color:#0f0;
    font-family:monospace; font-size:0.6rem;
}
.old-body { font-size:0.7rem; color:#333; }
.old-body p { margin-bottom:6px; }
.old-animations {
    background:#ff00ff; color:#ffff00; padding:4px;
    text-align:center; font-size:0.7rem; font-weight:bold;
    animation:blink 1s infinite;
}
@keyframes blink { 50% { opacity:0.3; } }

/* AFTER preview (modern site) */
.ba-preview--after {
    background:linear-gradient(135deg,#0a0a0a,#1a1a2e);
    color:#fff; padding:16px;
    font-family:'Inter',sans-serif;
}
.new-nav {
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.1);
    margin-bottom:14px; font-size:0.72rem;
}
.new-nav strong { font-weight:800; }
.new-nav-links { color:rgba(255,255,255,0.6); font-size:0.65rem; }
.new-cta {
    padding:4px 10px; background:var(--accent);
    border-radius:4px; font-size:0.65rem; font-weight:600;
}
.new-hero { text-align:center; padding:6px 0; }
.new-badge {
    display:inline-block; padding:3px 10px;
    background:rgba(34,197,94,0.15); color:#22c55e;
    border:1px solid rgba(34,197,94,0.3);
    border-radius:999px; font-size:0.6rem; font-weight:600;
    margin-bottom:8px;
}
.new-hero h3 {
    font-family:'Inter',sans-serif;
    font-size:1rem; font-weight:800; line-height:1.2;
    letter-spacing:-0.02em; margin-bottom:6px;
}
.new-grad {
    background:linear-gradient(135deg,#3b82f6,#22c55e);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.new-sub { color:rgba(255,255,255,0.6); font-size:0.7rem; margin-bottom:10px; }
.new-btns { display:flex; gap:6px; justify-content:center; }
.new-btn-p, .new-btn-s {
    padding:5px 12px; border-radius:4px;
    font-size:0.65rem; font-weight:600;
}
.new-btn-p { background:var(--accent); color:#fff; }
.new-btn-s { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.2); }

.ba-issues {
    list-style:none; margin-top:16px;
    display:flex; flex-direction:column; gap:4px;
}
.ba-issues li {
    font-size:0.82rem; color:var(--text-muted);
    padding:3px 0;
}
.ba-issues--good li { color:var(--green); }

/* ===== PROBLEM ===== */
.problem { padding:80px 0; }
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.problem-card {
    padding:28px; border-radius:var(--radius);
    border:1px solid var(--border); background:var(--surface);
    transition:all var(--transition);
}
.problem-card:hover { border-color:var(--red); transform:translateY(-3px); }
.problem-icon { font-size:2rem; margin-bottom:14px; }
.problem-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.problem-card p { font-size:0.9rem; color:var(--text-muted); line-height:1.6; }
.problem-card em { color:var(--red); font-style:normal; font-weight:600; }
.problem-solution {
    text-align:center; padding:24px; border-radius:var(--radius);
    background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(34,197,94,0.1));
    border:1px solid var(--accent);
}
.problem-solution p { font-size:1.05rem; color:var(--text); }
.problem-solution strong { color:var(--green); }

/* ===== WORK ===== */
.work { padding:80px 0; background:linear-gradient(180deg,transparent,rgba(24,24,27,0.5),transparent); }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px; }
.work-card {
    border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; transition:all var(--transition);
    background:var(--surface); display:block;
}
.work-card:hover {
    border-color:var(--accent); transform:translateY(-6px) scale(1.01);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(59,130,246,0.12);
}
.work-browser {
    display:flex; align-items:center; gap:8px;
    padding:10px 14px; background:var(--surface-2);
    border-bottom:1px solid var(--border);
}
.browser-dots { display:flex; gap:5px; }
.browser-dots span { width:8px; height:8px; border-radius:50%; background:#444; }
.browser-dots span:nth-child(1) { background:#ff5f57; }
.browser-dots span:nth-child(2) { background:#febc2e; }
.browser-dots span:nth-child(3) { background:#28c840; }
.browser-url { font-size:0.72rem; color:var(--text-muted); margin-left:8px; flex:1; }
.browser-external { font-size:0.85rem; color:var(--text-muted); opacity:0; transition:opacity var(--transition); }
.work-card:hover .browser-external { opacity:1; }

/* Preview styles — each matches the real site */
.work-preview { height:220px; overflow:hidden; position:relative; }
.preview-inner {
    height:100%; padding:24px; display:flex; flex-direction:column;
    justify-content:center; align-items:center; text-align:center;
}
.preview-nav {
    font-size:0.75rem; font-weight:700; color:rgba(255,255,255,0.7);
    margin-bottom:14px; letter-spacing:0.02em;
}
.preview-heading {
    font-size:1.15rem; font-weight:800; line-height:1.15;
    color:#fff; margin-bottom:8px; letter-spacing:-0.02em;
}
.preview-sub { font-size:0.7rem; color:rgba(255,255,255,0.6); margin-bottom:14px; }
.preview-btn {
    padding:7px 16px; background:#fff; color:#000;
    border-radius:6px; font-size:0.72rem; font-weight:600;
}

.preview-advokat { background:linear-gradient(135deg,#0a1929 0%,#152238 100%); position:relative; }
.preview-advokat::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(201,169,97,0.15),transparent 60%); }
.preview-advokat .preview-inner { position:relative; z-index:1; }
.preview-advokat .preview-heading { font-family:'Playfair Display',serif !important; }

.preview-fotograf { background:#000; position:relative; }
.preview-fotograf::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.03) 100%); }
.preview-fotograf .preview-inner { position:relative; z-index:1; }

.preview-bornehave { background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); position:relative; overflow:hidden; }
.preview-bornehave::before { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:#fbbf24; opacity:0.3; }
.preview-bornehave::after { content:''; position:absolute; bottom:-10px; left:-10px; width:60px; height:60px; border-radius:50%; background:#60a5fa; opacity:0.3; }
.preview-bornehave .preview-inner { position:relative; z-index:1; }

.preview-oeko { background:linear-gradient(135deg,#f5f0e6 0%,#e8dfc8 100%); position:relative; }
.preview-oeko::before { content:''; position:absolute; bottom:0; left:0; right:0; height:30%; background:linear-gradient(0deg,rgba(135,168,120,0.2),transparent); }
.preview-oeko .preview-inner { position:relative; z-index:1; }

.preview-renthjem { background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%); position:relative; }
.preview-renthjem::before { content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px; border-radius:50%; background:#86efac; opacity:0.3; }
.preview-renthjem .preview-inner { position:relative; z-index:1; }

.preview-salon { background:linear-gradient(135deg,#0f0a08 0%,#1f1611 100%); }
.preview-restaurant { background:linear-gradient(135deg,#1a0a00 0%,#2d1a0a 100%); }
.preview-cafe { background:linear-gradient(135deg,#f5f0e8 0%,#ebe0d0 100%); }
.preview-cafe .preview-nav { color:#2c2418; }
.preview-dentist { background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%); }
.preview-dentist .preview-nav { color:#0f172a; }
.preview-fitness { background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%); position:relative; }
.preview-fitness::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 70% 30%,rgba(34,197,94,0.15),transparent 60%);
}
.preview-fitness .preview-inner { position:relative; z-index:1; }
.preview-handyman { background:linear-gradient(135deg,#0a0a0a 0%,#1c1917 100%); position:relative; }
.preview-handyman::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 30%,rgba(245,158,11,0.15),transparent 60%);
}
.preview-handyman .preview-inner { position:relative; z-index:1; }

.work-info { padding:20px; }
.work-info h3 { font-size:1rem; font-weight:700; margin-bottom:6px; }
.work-info p { font-size:0.85rem; color:var(--text-muted); margin-bottom:12px; line-height:1.5; }
.work-tags { display:flex; gap:6px; flex-wrap:wrap; }
.work-tags span {
    font-size:0.7rem; padding:3px 10px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:999px; color:var(--text-muted);
}
.work-note {
    text-align:center; color:var(--text-muted); font-size:0.95rem;
    padding:20px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius);
}

/* ===== PROCESS ===== */
.process { padding:80px 0; }
.process-steps {
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.process-step {
    padding:28px 24px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius);
    position:relative;
}
.step-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:var(--accent-glow); color:var(--accent);
    font-weight:800; font-size:0.9rem; margin-bottom:12px;
    border:1.5px solid rgba(59,130,246,0.3);
}
.step-time {
    display:inline-block; padding:3px 10px; margin-bottom:10px;
    background:var(--surface-2); border-radius:999px;
    font-size:0.7rem; font-weight:600; color:var(--accent);
}
.process-step h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.process-step p { font-size:0.85rem; color:var(--text-muted); line-height:1.6; }

/* ===== INCLUDED ===== */
.included { padding:80px 0; background:linear-gradient(180deg,transparent,rgba(24,24,27,0.5),transparent); }
.included-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.included-item {
    padding:24px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); text-align:center;
    transition:all var(--transition);
}
.included-item:hover { border-color:var(--accent); transform:translateY(-2px); }
.included-item span { font-size:1.8rem; display:block; margin-bottom:10px; }
.included-item strong { display:block; font-size:0.9rem; margin-bottom:4px; }
.included-item p { font-size:0.8rem; color:var(--text-muted); }

/* ===== SALES VALUE ===== */
.sales-value { padding:80px 0; }
.sales-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    margin-bottom:40px;
}
.sales-card {
    padding:28px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); transition:all var(--transition);
}
.sales-card:hover {
    border-color:var(--green); transform:translateY(-3px);
    box-shadow:0 8px 30px rgba(34,197,94,0.1);
}
.sales-num { font-size:2rem; margin-bottom:12px; }
.sales-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.sales-card p { font-size:0.88rem; color:var(--text-muted); line-height:1.6; }
.sales-quote {
    margin-top:32px; padding:32px; text-align:center;
    background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(34,197,94,0.1));
    border:1px solid var(--accent); border-radius:var(--radius);
}
.sales-quote p {
    font-size:1.1rem; font-style:italic; color:var(--text);
    max-width:600px; margin:0 auto;
}
.sales-quote strong { color:var(--green); font-style:normal; }

.btn-link {
    display:block; text-align:center; margin-top:10px;
    font-size:0.78rem; color:var(--text-muted);
    text-decoration:underline; transition:color var(--transition);
}
.btn-link:hover { color:var(--accent); }

/* ===== PRICING ===== */
.pricing { padding:80px 0; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.price-card {
    padding:32px; background:var(--surface);
    border:1.5px solid var(--border); border-radius:var(--radius);
    position:relative; transition:all var(--transition);
}
.price-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.price-card.featured {
    border-color:var(--accent);
    box-shadow:0 0 40px var(--accent-glow);
}
.featured-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    padding:4px 16px; background:var(--accent); color:#fff;
    font-size:0.7rem; font-weight:700; border-radius:999px;
    text-transform:uppercase; letter-spacing:0.05em;
}
.price-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.price-desc { font-size:0.85rem; color:var(--text-muted); margin-bottom:16px; }
.price { font-size:2.5rem; font-weight:900; margin-bottom:24px; letter-spacing:-0.03em; }
.price span { font-size:1rem; font-weight:500; color:var(--text-muted); }
.price-card ul { list-style:none; margin-bottom:24px; }
.price-card li { padding:6px 0; font-size:0.85rem; color:var(--text-muted); }
.pricing-note { text-align:center; font-size:0.85rem; color:var(--text-muted); margin-top:32px; }

.guarantee {
    margin-top:32px; padding:28px;
    background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(59,130,246,0.05));
    border:1.5px solid rgba(34,197,94,0.3);
    border-radius:var(--radius);
    display:flex; align-items:center; gap:20px;
}
.guarantee-icon {
    font-size:3rem; flex-shrink:0;
}
.guarantee-content h3 {
    font-size:1.1rem; font-weight:800;
    color:var(--green); margin-bottom:6px;
}
.guarantee-content p {
    font-size:0.92rem; line-height:1.6;
    color:var(--text);
}
.guarantee-content strong {
    color:var(--green);
}
@media (max-width:640px) {
    .guarantee { flex-direction:column; text-align:center; padding:20px; }
    .guarantee-icon { font-size:2.5rem; }
}

/* ===== CASE STUDY ===== */
.case-study { padding:80px 0; }
.case-card {
    padding:48px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); position:relative; overflow:hidden;
}
.case-card::before {
    content:''; position:absolute; top:-100px; right:-100px;
    width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle,rgba(34,197,94,0.08),transparent 70%);
    pointer-events:none;
}
.case-label { margin-bottom:32px; }
.case-tag {
    display:inline-block; padding:5px 14px; font-size:0.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.12em; color:var(--green);
    background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2);
    border-radius:999px; margin-bottom:14px;
}
.case-label h2 {
    font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800;
    letter-spacing:-0.02em; line-height:1.2;
}
.case-content p {
    color:var(--text-muted); font-size:1rem; line-height:1.7;
    margin-bottom:24px; position:relative; z-index:1;
}
.case-list {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:10px; margin-bottom:32px; position:relative; z-index:1;
}
.case-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; background:var(--bg);
    border:1px solid var(--border); border-radius:var(--radius-sm);
}
.case-time {
    padding:3px 10px; background:rgba(34,197,94,0.15);
    color:var(--green); border-radius:999px;
    font-size:0.75rem; font-weight:700; flex-shrink:0;
}
.case-what { font-size:0.9rem; color:var(--text); }
.case-result {
    padding:20px; background:rgba(59,130,246,0.08);
    border:1px solid rgba(59,130,246,0.2);
    border-radius:var(--radius); margin-bottom:24px !important;
    color:var(--text) !important;
}
.case-result strong { color:var(--accent); display:block; margin-bottom:6px; }
.case-result em { color:var(--green); font-style:normal; font-weight:600; }

/* ===== ABOUT ===== */
.about { padding:80px 0; background:linear-gradient(180deg,transparent,rgba(24,24,27,0.5),transparent); }
.about-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:center; }
.about-text .section-tag { margin-bottom:14px; }
.about-text h2 { font-size:1.8rem; font-weight:800; margin-bottom:16px; }
.about-text p { font-size:0.95rem; color:var(--text-muted); margin-bottom:12px; line-height:1.7; }
.about-text strong { color:var(--text); }
.about-facts { display:flex; gap:24px; margin-top:24px; }
.fact strong { display:block; font-size:0.9rem; margin-bottom:2px; }
.fact span { font-size:0.8rem; color:var(--text-muted); }
.about-card {
    text-align:center; padding:40px 32px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius);
}
.about-avatar {
    width:88px; height:88px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),#22c55e);
    display:flex; align-items:center; justify-content:center;
    font-size:2.2rem; font-weight:900; color:#fff;
    margin:0 auto 16px;
}
.about-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:4px; }
.about-card > p { color:var(--text-muted); font-size:0.9rem; margin-bottom:16px; }
.about-detail { font-size:0.85rem; color:var(--text-muted); margin-bottom:6px; }

/* ===== FAQ ===== */
.faq { padding:80px 0; }
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:20px 0; background:none; border:none; font-size:0.95rem;
    font-weight:600; color:var(--text); cursor:pointer; text-align:left;
    font-family:inherit; transition:color var(--transition);
}
.faq-q:hover { color:var(--accent); }
.faq-arrow { transition:transform var(--transition); color:var(--text-muted); font-size:0.9rem; }
.faq-item.active .faq-arrow { transform:rotate(180deg); color:var(--accent); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-item.active .faq-a { max-height:200px; padding-bottom:18px; }
.faq-a p { font-size:0.9rem; color:var(--text-muted); line-height:1.7; }

/* ===== CONTACT ===== */
.contact { padding:80px 0; background:linear-gradient(180deg,transparent,rgba(24,24,27,0.5),transparent); }
.contact-form {
    padding:32px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:11px 14px; font-size:0.9rem; font-family:inherit;
    background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text); outline:none; transition:border-color var(--transition);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); opacity:0.5; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
.form-group textarea { resize:vertical; min-height:100px; }
.form-error { display:none; font-size:0.75rem; color:var(--red); margin-top:4px; }
.form-group.error input, .form-group.error textarea, .form-group.error select { border-color:var(--red); }
.form-group.error .form-error { display:block; }
.form-note { text-align:center; font-size:0.8rem; color:var(--text-muted); margin-top:12px; }

/* ===== COOKIE BANNER ===== */
.cookie-banner {
    position:fixed; bottom:24px; left:24px; right:24px; z-index:997;
    max-width:600px; margin:0 auto;
    padding:20px 24px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transform:translateY(120%); opacity:0;
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}
.cookie-banner.show { transform:translateY(0); opacity:1; }
.cookie-banner.dismissed { transform:translateY(120%); opacity:0; pointer-events:none; }
.cookie-content { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cookie-text { flex:1; min-width:250px; }
.cookie-text strong { display:block; font-size:0.95rem; margin-bottom:4px; }
.cookie-text p { font-size:0.85rem; color:var(--text-muted); margin:0; line-height:1.4; }
.cookie-text a { color:var(--accent); text-decoration:underline; }
.cookie-buttons { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:600px) {
    .cookie-banner { bottom:16px; left:16px; right:16px; padding:16px; }
    .cookie-buttons { width:100%; }
    .cookie-buttons .btn { flex:1; }
}

/* ===== LEGAL PAGES ===== */
.legal-page { padding:120px 0 80px; }
.legal-back { display:inline-block; margin-bottom:24px; color:var(--text-muted); font-size:0.85rem; transition:color var(--transition); }
.legal-back:hover { color:var(--accent); }
.legal-page h1 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
.legal-updated { font-size:0.85rem; color:var(--text-muted); margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.legal-page section { margin-bottom:32px; }
.legal-page h2 { font-size:1.15rem; font-weight:700; margin-bottom:12px; color:var(--text); }
.legal-page p { font-size:0.95rem; color:var(--text-muted); line-height:1.7; margin-bottom:10px; }
.legal-page strong { color:var(--text); }
.legal-page ul { list-style:none; margin-bottom:10px; }
.legal-page li { font-size:0.95rem; color:var(--text-muted); line-height:1.7; padding-left:20px; position:relative; }
.legal-page li::before { content:'•'; color:var(--accent); position:absolute; left:0; font-weight:bold; }
.legal-footer-nav { display:flex; justify-content:space-between; padding-top:32px; margin-top:32px; border-top:1px solid var(--border); flex-wrap:wrap; gap:16px; }
.legal-footer-nav a { color:var(--accent); font-size:0.9rem; font-weight:500; }
.legal-footer-nav a:hover { text-decoration:underline; }

/* ===== THANKS PAGE ===== */
.thanks-page { padding:120px 0 80px; }
.thanks-card { padding:48px 32px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.thanks-icon { width:80px; height:80px; margin:0 auto 24px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--green)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:#fff; font-weight:900; box-shadow:0 10px 40px rgba(34,197,94,0.3); animation:thanks-pop 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes thanks-pop { 0% { transform:scale(0); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.thanks-card h1 { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:10px; }
.thanks-sub { font-size:1.05rem; color:var(--text-muted); margin-bottom:40px; }
.thanks-steps { text-align:left; margin-bottom:40px; }
.thanks-steps h2 { font-size:1.1rem; font-weight:700; margin-bottom:20px; text-align:center; }
.thanks-step { display:flex; align-items:flex-start; gap:16px; padding:16px; margin-bottom:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); }
.thanks-step-num { flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; border:1.5px solid rgba(59,130,246,0.3); }
.thanks-step strong { display:block; font-size:0.95rem; margin-bottom:4px; color:var(--text); }
.thanks-step p { font-size:0.85rem; color:var(--text-muted); margin:0; line-height:1.5; }
.thanks-cta { padding:24px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:32px; }
.thanks-cta p { font-size:0.9rem; color:var(--text-muted); margin-bottom:16px; }
.thanks-contact { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.thanks-back { color:var(--text-muted); font-size:0.9rem; transition:color var(--transition); }
.thanks-back:hover { color:var(--accent); }

/* ===== 404 PAGE ===== */
.error-page { min-height:calc(100vh - 80px); display:flex; align-items:center; justify-content:center; padding:80px 20px; }
.error-content { text-align:center; max-width:600px; }
.error-code { font-size:clamp(5rem,15vw,10rem); font-weight:900; line-height:0.9; letter-spacing:-0.05em; background:linear-gradient(135deg,var(--accent),var(--green)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:20px; }
.error-content h1 { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; margin-bottom:12px; }
.error-content > p { color:var(--text-muted); font-size:1rem; margin-bottom:32px; }
.error-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.error-hint { font-size:0.85rem !important; color:var(--text-muted); opacity:0.6; }

/* ===== FOOTER ===== */
.footer { padding:48px 0 24px; border-top:1px solid var(--border); }
.footer-flex { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.footer-flex .logo { display:block; margin-bottom:6px; }
.footer-flex > div p { color:var(--text-muted); font-size:0.85rem; }
.footer-links { display:flex; gap:20px; }
.footer-links a { font-size:0.85rem; color:var(--text-muted); transition:color var(--transition); }
.footer-links a:hover { color:var(--accent); }
.footer-copy { text-align:center; font-size:0.75rem; color:var(--text-muted); opacity:0.6; padding-top:16px; border-top:1px solid var(--border); }

/* ===== MAGNETIC BUTTONS ===== */
.btn-magnetic { position:relative; will-change: transform; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; }
.btn-primary.btn-magnetic:hover {
    box-shadow: 0 10px 40px rgba(59,130,246,0.4), 0 0 60px rgba(34,197,94,0.15);
}

/* ===== SCROLLING SHOWCASE BAR ===== */
.showcase-bar {
    padding: 18px 0;
    background: linear-gradient(180deg, transparent, rgba(24,24,27,0.6), transparent);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.showcase-label {
    text-align:center; font-size:0.72rem; text-transform:uppercase;
    letter-spacing:0.2em; color:var(--text-muted); margin-bottom:14px;
    font-weight:600;
}
.showcase-track {
    overflow:hidden; position:relative;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.showcase-row {
    display:flex; gap:48px; width:max-content;
    animation: scrollX 30s linear infinite;
}
.showcase-item {
    font-size:1.1rem; font-weight:700; color:var(--text-muted);
    white-space:nowrap; transition: color 0.2s ease;
}
.showcase-item:hover { color:var(--text); }
@keyframes scrollX {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===== SPEED COMPARISON ===== */
.speed { padding:80px 0; }
.speed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.speed-card {
    padding:28px 24px; background:var(--surface);
    border:1.5px solid var(--border); border-radius:var(--radius);
    position:relative; transition: all var(--transition);
}
.speed-card:hover { transform: translateY(-3px); }
.speed-card--featured {
    border-color:var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 20px 60px rgba(59,130,246,0.15);
    background: linear-gradient(180deg, rgba(59,130,246,0.05), var(--surface));
}
.speed-featured-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    padding:4px 14px; background:linear-gradient(135deg,var(--accent),var(--green)); color:#fff;
    font-size:0.7rem; font-weight:700; border-radius:999px;
    text-transform:uppercase; letter-spacing:0.05em;
}
.speed-head {
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:14px;
}
.speed-who { font-size:0.95rem; font-weight:700; }
.speed-time { font-size:0.85rem; color:var(--text-muted); font-weight:600; }
.speed-time--fast {
    color:var(--green);
    background: rgba(34,197,94,0.12);
    padding:3px 10px; border-radius:999px;
    border:1px solid rgba(34,197,94,0.3);
}
.speed-bar {
    height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden;
    margin-bottom:18px;
}
.speed-fill {
    height:100%; border-radius:999px;
    transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.speed-fill--slow { width:100%; background:linear-gradient(90deg,#ef4444,#f59e0b); }
.speed-fill--mid { width:65%; background:linear-gradient(90deg,#f59e0b,#eab308); }
.speed-fill--fast { width:22%; background:linear-gradient(90deg,var(--accent),var(--green)); box-shadow: 0 0 20px rgba(34,197,94,0.5); }
.speed-list { list-style:none; }
.speed-list li {
    font-size:0.85rem; color:var(--text-muted); padding:5px 0;
    border-bottom:1px dashed rgba(63,63,70,0.5);
}
.speed-list li:last-child { border-bottom:none; }
.speed-list li strong { color:var(--green); }
.speed-note {
    text-align:center; color:var(--text-muted); font-size:0.9rem;
    max-width:700px; margin:32px auto 0;
}

/* ===== ROI CALCULATOR ===== */
.roi { padding:80px 0; }
.roi-card {
    padding:40px; background:var(--surface);
    border:1.5px solid var(--border); border-radius:var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position:relative; overflow:hidden;
}
.roi-card::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(circle at 80% 10%, rgba(59,130,246,0.08), transparent 60%);
}
.roi-row { margin-bottom:24px; position:relative; }
.roi-row label {
    display:flex; justify-content:space-between; align-items:center;
    font-size:0.9rem; font-weight:600; color:var(--text); margin-bottom:10px;
    gap:12px; flex-wrap:wrap;
}
.roi-val {
    color:var(--accent); font-weight:800; font-size:1.1rem;
    padding:4px 12px; background:var(--accent-glow);
    border:1px solid rgba(59,130,246,0.3); border-radius:999px;
}
.roi-select {
    width:100%; padding:12px 14px; background:var(--bg);
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text); font-family:inherit; font-size:0.9rem;
    cursor:pointer; outline:none; transition: border-color var(--transition);
}
.roi-select:focus, .roi-select:hover { border-color:var(--accent); }
.roi-slider {
    width:100%; -webkit-appearance:none; appearance:none;
    height:6px; border-radius:999px; outline:none;
    background: linear-gradient(90deg, var(--accent), var(--green));
    cursor:pointer;
}
.roi-slider::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:22px; height:22px; border-radius:50%;
    background:#fff; cursor:pointer;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.3), 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.15s ease;
}
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.roi-slider::-moz-range-thumb {
    width:22px; height:22px; border-radius:50%;
    background:#fff; cursor:pointer; border:none;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.3);
}
.roi-slider-labels {
    display:flex; justify-content:space-between;
    margin-top:6px; font-size:0.75rem; color:var(--text-muted);
}
.roi-output {
    margin: 28px 0; padding:24px;
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(34,197,94,0.08));
    border:1px solid rgba(59,130,246,0.3);
    border-radius: var(--radius); text-align:center;
    position:relative; z-index:1;
}
.roi-out-row {
    display:flex; align-items:center; justify-content:center;
    gap:10px; font-size:0.95rem; color:var(--text-muted);
    margin-bottom:8px; flex-wrap:wrap;
}
.roi-out-row--big { font-size:1.1rem; margin-bottom:14px; }
.roi-out-row strong {
    font-size:1.8rem; font-weight:900;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing:-0.02em;
}
.roi-out-row--big strong { font-size:2.6rem; }
.roi-payback {
    margin-top:14px; padding-top:14px;
    border-top:1px dashed rgba(59,130,246,0.3);
    color:var(--text); font-size:0.95rem;
}
.roi-payback strong { color:var(--green); font-weight:800; }

/* ===== URGENCY BAR ===== */
.urgency-bar {
    background: linear-gradient(90deg, rgba(239,68,68,0.12), rgba(245,158,11,0.12), rgba(239,68,68,0.12));
    border-top:1px solid rgba(245,158,11,0.25);
    border-bottom:1px solid rgba(245,158,11,0.25);
    padding:14px 0;
    position:relative; overflow:hidden;
}
.urgency-bar::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.15), transparent);
    animation: urgencyShine 4s ease-in-out infinite;
}
@keyframes urgencyShine {
    0%,100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}
.urgency-inner {
    display:flex; align-items:center; justify-content:center;
    gap:12px; text-align:center; position:relative; z-index:1;
    flex-wrap:wrap;
}
.urgency-icon { font-size:1.2rem; }
.urgency-text { font-size:0.95rem; color:var(--text); }
.urgency-text strong { color:#f59e0b; font-weight:700; }
.urgency-spots { color:#ef4444 !important; }

/* ===== FINAL CTA ===== */
.final-cta {
    padding: 100px 0; position:relative; overflow:hidden;
}
.final-cta-bg {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(ellipse 60% 80% at 30% 50%, rgba(59,130,246,0.2), transparent 60%),
        radial-gradient(ellipse 60% 80% at 70% 50%, rgba(34,197,94,0.18), transparent 60%),
        linear-gradient(135deg, #0a0a14 0%, #0a1a14 100%);
}
.final-cta-bg::after {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 60% 60%, #000, transparent);
    -webkit-mask-image: radial-gradient(ellipse 60% 60%, #000, transparent);
}
.final-cta-inner {
    position:relative; z-index:1; text-align:center;
    max-width:720px; margin:0 auto;
}
.final-cta-inner .section-tag { margin-bottom:18px; }
.final-cta-inner h2 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight:900; line-height:1.05;
    letter-spacing:-0.04em; margin-bottom:20px;
}
.final-cta-inner > p {
    color:var(--text-muted); font-size:1.1rem;
    max-width:560px; margin:0 auto 36px; line-height:1.6;
}
.final-cta-inner .btn-lg {
    padding:18px 36px; font-size:1.05rem;
    box-shadow: 0 10px 40px rgba(59,130,246,0.4);
}
.final-cta-sub {
    margin-top:20px !important; font-size:0.85rem; color:var(--text-muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width:960px) {
    .work-grid, .problem-grid, .pricing-grid, .included-grid, .process-steps, .sales-grid, .speed-grid { grid-template-columns:repeat(2,1fr); }
    .about-grid { grid-template-columns:1fr; gap:32px; }
    .ba-grid { grid-template-columns:1fr; }
    .float-mock { width:130px; }
    .float-mock-1 { left:2%; }
    .float-mock-2 { right:2%; }
    .float-mock-3 { left:2%; }
    .float-mock-4 { right:2%; }
}

@media (max-width:768px) {
    .mobile-toggle { display:flex; }
    .nav-right { display:none; }
    .nav-right.open {
        display:flex; flex-direction:column; position:fixed; inset:0;
        background:var(--bg); justify-content:center; align-items:center;
        gap:24px; z-index:99;
    }
    .nav-right.open .nav-link { display:block; font-size:1.2rem; }
    .work-grid, .problem-grid, .pricing-grid, .included-grid, .process-steps, .sales-grid, .speed-grid, .case-list { grid-template-columns:1fr; }
    .case-card { padding:24px; }
    .form-row { grid-template-columns:1fr; }
    .hero { padding: 130px 0 80px; min-height:auto; }
    .hero-actions { flex-direction:column; align-items:center; }
    .hero-actions .btn { width:100%; justify-content:center; }
    .hero-proof { gap:16px; padding:16px; }
    .proof-divider { display:none; }
    .about-facts { flex-direction:column; gap:12px; }
    .footer-flex { flex-direction:column; text-align:center; }
    .footer-links { justify-content:center; }
    .price-card.featured { transform:none; }

    /* Hide floats on mobile to avoid clutter */
    .float-mock { display:none; }
    .hero-cursor-glow { display:none; }

    .roi-card { padding:24px; }
    .roi-out-row--big strong { font-size:2rem; }

    .urgency-text { font-size:0.85rem; }
    .final-cta { padding: 70px 0; }
    .final-cta-inner > p { font-size:1rem; }

    .showcase-item { font-size:0.95rem; }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ===== Floating WhatsApp Chat Button ===== */
.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 998;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: whatsapp-pulse 2s infinite;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}
.whatsapp-float::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; background: #25D366;
    opacity: 0.5; z-index: -1;
    animation: whatsapp-ripple 2s infinite;
}
@keyframes whatsapp-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes whatsapp-ripple {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}
.whatsapp-tooltip {
    position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
    padding: 8px 14px; background: #333; color: #fff;
    font-size: 0.8rem; font-weight: 500; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.whatsapp-tooltip::after {
    content: ''; position: absolute; top: 50%; right: -4px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px; height: 8px; background: #333;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }
@media (max-width: 768px) {
    .whatsapp-float { bottom: 16px; right: 16px; width: 50px; height: 50px; }
    .whatsapp-float svg { width: 24px; height: 24px; }
    .whatsapp-tooltip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float, .whatsapp-float::before { animation: none; }
}