:root {
            --blue-deep:   #0057FF;
            --blue-mid:    #2E8BFF;
            --blue-light:  #7DC4FF;
            --blue-pale:   #E8F4FF;
            --ice:         #F0F8FF;
            --white:       #FFFFFF;
            --ink:         #0A1628;
            --ink-soft:    #2D4070;
            --ink-muted:   #6B89B8;
            --glass:       rgba(255,255,255,0.72);
            --glass-border:rgba(255,255,255,0.9);
            --shadow-blue: rgba(0,87,255,0.15);
            --shadow-deep: rgba(10,22,40,0.12);
        }

        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; }

        body {
            font-family:'DM Sans', sans-serif;
            background: var(--white);
            color: var(--ink);
            overflow-x: hidden;
            line-height: 1.6;
        }

        #liquid-canvas {
            position: fixed;
            top:0; left:0;
            width:100%; height:100%;
            z-index: -3;
            pointer-events: none;
        }

        body::before {
            content:'';
            position:fixed;
            inset:0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
            z-index:-1;
            pointer-events:none;
            opacity:0.4;
        }

        .orbs {
            position:fixed;
            inset:0;
            z-index:-2;
            pointer-events:none;
            overflow:hidden;
        }
        .orb {
            position:absolute;
            border-radius:50%;
            filter:blur(80px);
            animation: orb-drift linear infinite;
            opacity: 0;
        }
        @keyframes orb-drift {
            0%   { transform:translate(0,0) scale(1); opacity:0; }
            10%  { opacity:1; }
            50%  { transform:translate(var(--tx),var(--ty)) scale(var(--sc)); }
            90%  { opacity:0.8; }
            100% { transform:translate(0,0) scale(1); opacity:0; }
        }

        nav {
            position:fixed; top:0; width:100%;
            padding:1.2rem 6%;
            display:flex; justify-content:space-between; align-items:center;
            z-index:1000;
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid rgba(0,87,255,0.1);
            transition: transform 0.4s ease, box-shadow 0.3s ease;
        }
        nav.scrolled { box-shadow: 0 4px 40px rgba(0,87,255,0.08); }
        nav.nav-hidden { transform: translateY(-100%); }

        .logo {
            font-family:'Syne', sans-serif;
            font-size:1.7rem; font-weight:800;
            color: var(--blue-deep);
            letter-spacing:-0.5px;
            position:relative;
        }
        .logo span {
            background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
        }
        .logo::after {
            content:'';
            position:absolute; bottom:-3px; left:0;
            width:100%; height:2px;
            background: linear-gradient(90deg, var(--blue-deep), var(--blue-light), transparent);
            border-radius:2px;
        }

        nav ul { display:flex; gap:2.5rem; list-style:none; }
        nav a {
            color: var(--ink-soft);
            text-decoration:none;
            font-size:0.95rem; font-weight:500;
            font-family:'Space Grotesk', sans-serif;
            transition: color 0.2s;
            position:relative;
        }
        nav a::after {
            content:'';
            position:absolute; bottom:-4px; left:0;
            width:0; height:2px;
            background: var(--blue-deep);
            border-radius:2px;
            transition: width 0.3s ease;
        }
        nav a:hover { color: var(--blue-deep); }
        nav a:hover::after { width:100%; }

        .nav-cta {
            background: var(--blue-deep);
            color: white !important;
            padding: 0.6rem 1.5rem;
            border-radius: 100px;
            font-weight:600 !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 20px rgba(0,87,255,0.3);
        }
        .nav-cta:hover {
            background: var(--blue-mid) !important;
            box-shadow: 0 8px 30px rgba(0,87,255,0.4) !important;
            transform: translateY(-1px);
        }
        .nav-cta::after { display:none !important; }

        .hero {
            min-height: 100vh;
            display:flex; align-items:center; justify-content:center;
            padding: 0 6%;
            position:relative;
            overflow:hidden;
        }

        .hero-grid {
            position:absolute;
            inset:0;
            background-image:
                linear-gradient(rgba(0,87,255,0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,87,255,0.06) 1px, transparent 1px);
            background-size: 50px 50px;
            mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
            animation: grid-pulse 8s ease-in-out infinite;
        }
        @keyframes grid-pulse {
            0%,100% { opacity:0.5; background-size: 50px 50px; }
            50%      { opacity:1;   background-size: 52px 52px; }
        }

        .hero::before {
            content:'';
            position:absolute;
            top:-20%; left:60%;
            width:800px; height:800px;
            background: radial-gradient(ellipse, rgba(0,87,255,0.12) 0%, transparent 70%);
            border-radius:50%;
            animation: breathe 6s ease-in-out infinite;
        }
        .hero::after {
            content:'';
            position:absolute;
            bottom:-10%; left:-10%;
            width:600px; height:600px;
            background: radial-gradient(ellipse, rgba(125,196,255,0.15) 0%, transparent 70%);
            border-radius:50%;
            animation: breathe 8s ease-in-out infinite reverse;
        }
        @keyframes breathe {
            0%,100% { transform: scale(1) translate(0,0); }
            50%      { transform: scale(1.15) translate(30px,-20px); }
        }

        .hero-content {
            max-width:860px;
            text-align:center;
            z-index:10;
            position:relative;
        }

        .hero-content > * {
            opacity:0;
            animation: slide-up 0.8s ease forwards;
        }
        .hero-badge        { animation-delay: 0.1s !important; }
        .hero-content h1   { animation-delay: 0.25s !important; }
        .hero-content .subtitle   { animation-delay: 0.4s !important; }
        .hero-content .sub-subtitle { animation-delay: 0.5s !important; }
        .hero-savings      { animation-delay: 0.6s !important; }
        .hero-ctas         { animation-delay: 0.75s !important; }

        @keyframes slide-up {
            from { opacity:0; transform: translateY(30px); }
            to   { opacity:1; transform: translateY(0); }
        }

        .hero-badge {
            display:inline-flex; align-items:center; gap:8px;
            padding:8px 20px;
            background: rgba(0,87,255,0.08);
            border: 1px solid rgba(0,87,255,0.2);
            border-radius:100px;
            font-size:0.85rem; font-weight:600;
            color: var(--blue-deep);
            margin-top:90px;
            margin-bottom:28px;
            font-family:'Space Grotesk', sans-serif;
            letter-spacing:0.3px;
        }
        .hero-badge .dot {
            width:6px; height:6px; background:var(--blue-deep);
            border-radius:50%;
            animation: blink 2s ease infinite;
        }
        @keyframes blink {
            0%,100% { opacity:1; transform:scale(1); }
            50%      { opacity:0.3; transform:scale(0.7); }
        }

        .hero h1 {
            font-family:'Syne', sans-serif;
            font-size: clamp(3rem, 7vw, 5.5rem);
            font-weight:800;
            line-height:1.05;
            letter-spacing:-2px;
            margin-bottom:1.2rem;
            color: var(--ink);
        }
        .hero h1 .gradient-text {
            background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
            background-size:200% 200%;
            animation: gradient-flow 4s ease infinite;
        }
        @keyframes gradient-flow {
            0%,100% { background-position:0% 50%; }
            50%      { background-position:100% 50%; }
        }

        .hero .subtitle {
            font-size:1.35rem;
            color: var(--ink-soft);
            margin-bottom:1rem;
            font-weight:400;
            line-height:1.65;
        }
        .hero .sub-subtitle {
            font-size:1rem;
            color: var(--ink-muted);
            margin-bottom:2rem;
        }

        .hero-savings {
            display:inline-flex; align-items:center; gap:10px;
            background: linear-gradient(135deg, rgba(0,87,255,0.06), rgba(125,196,255,0.1));
            border: 1px solid rgba(0,87,255,0.15);
            border-radius:16px;
            padding:14px 24px;
            margin-bottom:2.5rem;
            font-size:0.95rem;
            color: var(--ink-soft);
        }
        .hero-savings strong { color:var(--blue-deep); font-size:1.1rem; }

        .hero-ctas {
            display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
            margin-bottom:60px;
        }

        .cta-button {
            display:inline-flex; align-items:center; gap:8px;
            padding:1rem 2.4rem;
            font-size:1rem; font-weight:600;
            font-family:'Space Grotesk', sans-serif;
            color: white;
            background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
            border:none; border-radius:100px;
            cursor:pointer; text-decoration:none;
            position:relative; overflow:hidden;
            transition: all 0.3s ease;
            box-shadow: 0 8px 30px rgba(0,87,255,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .cta-button::before {
            content:'';
            position:absolute; inset:0;
            background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep));
            opacity:0;
            transition: opacity 0.3s;
        }
        .cta-button:hover::before { opacity:1; }
        .cta-button:hover { transform:translateY(-3px); box-shadow:0 16px 50px rgba(0,87,255,0.45); }
        .cta-button span { position:relative; z-index:1; }
        .cta-arrow { transition: transform 0.3s; position:relative; z-index:1; }
        .cta-button:hover .cta-arrow { transform:translateX(4px); }

        .cta-outline {
            display:inline-flex; align-items:center;
            padding:1rem 2.4rem;
            font-size:1rem; font-weight:600;
            font-family:'Space Grotesk', sans-serif;
            color: var(--blue-deep);
            background: white;
            border: 2px solid rgba(0,87,255,0.25);
            border-radius:100px;
            cursor:pointer; text-decoration:none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0,87,255,0.08);
        }
        .cta-outline:hover {
            border-color: var(--blue-deep);
            background: rgba(0,87,255,0.04);
            transform:translateY(-3px);
            box-shadow: 0 8px 30px rgba(0,87,255,0.15);
        }

        .scroll-hint {
            position:absolute;
            bottom:40px; left:50%;
            transform:translateX(-50%);
            display:flex; flex-direction:column; align-items:center; gap:8px;
            opacity:0;
            animation: fade-in-scroll 1s 1.5s ease forwards, bob 2.5s 2.5s ease-in-out infinite;
        }
        @keyframes fade-in-scroll { to { opacity:0.5; } }
        @keyframes bob {
            0%,100% { transform:translateX(-50%) translateY(0); }
            50%      { transform:translateX(-50%) translateY(8px); }
        }
        .scroll-hint-bar {
            width:1px; height:60px;
            background: linear-gradient(to bottom, transparent, var(--blue-mid), transparent);
            animation: scroll-bar 2s ease-in-out infinite;
        }
        @keyframes scroll-bar {
            0% { background-position:0 -60px; }
            100% { background-position:0 60px; }
        }
        .scroll-hint-label {
            font-size:0.7rem;
            letter-spacing:2px;
            text-transform:uppercase;
            color:var(--ink-muted);
            font-family:'Space Grotesk',sans-serif;
        }

        /* ===== FREE TRIAL SECTION ===== */
        .free-trial-section {
            padding: 5rem 6%;
            background: white;
            position: relative;
            overflow: hidden;
        }
        .free-trial-inner {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            padding: 4rem 3rem;
            background: linear-gradient(135deg, rgba(0,87,255,0.05), rgba(125,196,255,0.08));
            border: 1px solid rgba(0,87,255,0.18);
            border-radius: 32px;
            position: relative;
            overflow: hidden;
        }
        .free-trial-inner::before {
            content: '';
            position: absolute;
            top: -80px; right: -80px;
            width: 250px; height: 250px;
            background: radial-gradient(circle, rgba(0,87,255,0.08) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }
        .free-trial-inner::after {
            content: '';
            position: absolute;
            bottom: -60px; left: -60px;
            width: 200px; height: 200px;
            background: radial-gradient(circle, rgba(125,196,255,0.1) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }
        .free-trial-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 5px 16px;
            background: rgba(0,87,255,0.08);
            border: 1px solid rgba(0,87,255,0.18);
            border-radius: 100px;
            font-size: 0.78rem; font-weight: 700;
            color: var(--blue-deep);
            letter-spacing: 1px;
            text-transform: uppercase;
            font-family: 'Space Grotesk', sans-serif;
            margin-bottom: 20px;
        }
        .free-trial-chip .dot {
            width: 6px; height: 6px;
            background: var(--blue-deep);
            border-radius: 50%;
            animation: blink 2s ease infinite;
        }
        .free-trial-inner h2 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            font-weight: 800;
            color: var(--ink);
            letter-spacing: -1px;
            margin-bottom: 12px;
            line-height: 1.15;
        }
        .free-trial-inner h2 span { color: var(--blue-deep); }
        .free-trial-inner p {
            color: var(--ink-muted);
            font-size: 1.05rem;
            line-height: 1.75;
            max-width: 560px;
            margin: 0 auto 2.2rem;
        }
        .free-trial-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
        }
        .free-trial-actions .signin-link {
            font-size: 0.92rem;
            color: var(--ink-muted);
        }
        .free-trial-actions .signin-link a {
            color: var(--blue-deep);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s;
        }
        .free-trial-actions .signin-link a:hover { color: var(--blue-mid); }
        .free-trial-features {
            display: flex;
            justify-content: center;
            gap: 28px;
            flex-wrap: wrap;
            padding-top: 1.8rem;
            border-top: 1px solid rgba(0,87,255,0.08);
            position: relative;
            z-index: 1;
        }
        .trial-feat {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.88rem;
            color: var(--ink-soft);
            font-family: 'Space Grotesk', sans-serif;
        }
        .trial-feat::before {
            content: '✓';
            color: var(--blue-deep);
            font-weight: 700;
            font-size: 0.85rem;
        }

        .stats {
            padding:5rem 6%;
            background: linear-gradient(180deg, white 0%, var(--blue-pale) 100%);
            position:relative;
        }
        .stats-grid {
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:2rem;
            max-width:1100px; margin:0 auto;
        }
        .stat-item {
            text-align:center;
            padding:2.5rem 1rem;
            background: white;
            border-radius:24px;
            border:1px solid rgba(0,87,255,0.1);
            box-shadow: 0 8px 40px var(--shadow-blue);
            position:relative;
            overflow:hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .stat-item::before {
            content:'';
            position:absolute;
            top:-30px; left:50%;
            transform:translateX(-50%);
            width:100px; height:100px;
            background: radial-gradient(circle, rgba(0,87,255,0.08) 0%, transparent 70%);
        }
        .stat-item:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,87,255,0.15); }
        .stat-number {
            font-family:'Syne',sans-serif;
            font-size:3rem; font-weight:800;
            color: var(--blue-deep);
            display:block; margin-bottom:0.3rem;
            letter-spacing:-1px;
        }
        .stat-label {
            font-size:0.85rem;
            color:var(--ink-muted);
            text-transform:uppercase;
            letter-spacing:1.5px;
            font-family:'Space Grotesk',sans-serif;
        }

        .section-chip {
            display:inline-flex; align-items:center; gap:6px;
            padding:5px 16px;
            background:rgba(0,87,255,0.08);
            border:1px solid rgba(0,87,255,0.15);
            border-radius:100px;
            font-size:0.78rem; font-weight:600;
            color:var(--blue-deep);
            letter-spacing:1px;
            text-transform:uppercase;
            font-family:'Space Grotesk',sans-serif;
            margin-bottom:16px;
        }
        .section-title {
            font-family:'Syne',sans-serif;
            font-size:clamp(2rem, 4vw, 3rem);
            font-weight:800;
            color:var(--ink);
            letter-spacing:-1px;
            line-height:1.1;
            margin-bottom:0.8rem;
        }
        .section-title .accent { color:var(--blue-deep); }
        .section-subtitle {
            font-size:1.05rem;
            color:var(--ink-muted);
            max-width:560px;
            line-height:1.7;
        }
        .section-header {
            text-align:center;
            margin-bottom:4rem;
        }
        .section-header .section-subtitle { margin:0 auto; }

        .audience-section {
            padding:7rem 6%;
            background: var(--blue-pale);
            position:relative;
            overflow:hidden;
        }
        .audience-section::before {
            content:'';
            position:absolute;
            top:-100px; right:-100px;
            width:500px; height:500px;
            background: radial-gradient(circle, rgba(0,87,255,0.08) 0%, transparent 70%);
            border-radius:50%;
            pointer-events:none;
        }
        .audience-grid {
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:2rem;
            max-width:1200px; margin:0 auto;
        }
        .audience-card {
            background: white;
            border-radius:28px;
            padding:3rem;
            border:2px solid transparent;
            transition: all 0.4s ease;
            position:relative;
            overflow:hidden;
            box-shadow: 0 10px 50px rgba(0,87,255,0.08);
        }
        .audience-card::after {
            content:'';
            position:absolute;
            inset:0; border-radius:28px;
            border:2px solid transparent;
            transition: border-color 0.3s;
        }
        .audience-card:hover { transform:translateY(-8px); box-shadow:0 30px 80px rgba(0,87,255,0.15); }
        .audience-card:hover::after { border-color:var(--blue-mid); }

        .audience-card .deco-num {
            position:absolute;
            top:-20px; right:20px;
            font-family:'Syne',sans-serif;
            font-size:120px;
            font-weight:800;
            color:rgba(0,87,255,0.04);
            line-height:1;
            pointer-events:none;
            user-select:none;
        }

        .audience-tag {
            display:inline-block;
            padding:5px 14px;
            border-radius:100px;
            font-size:0.75rem; font-weight:700;
            letter-spacing:1.5px; text-transform:uppercase;
            margin-bottom:20px;
            font-family:'Space Grotesk',sans-serif;
        }
        .personal-tag { background:rgba(0,87,255,0.08); color:var(--blue-deep); }
        .business-tag { background:rgba(0,87,255,0.08); color:var(--blue-deep); }

        .audience-emoji { font-size:3rem; margin-bottom:14px; display:block; }
        .audience-card h3 {
            font-family:'Syne',sans-serif;
            font-size:1.7rem; font-weight:800;
            color:var(--ink);
            letter-spacing:-0.5px;
            margin-bottom:12px;
        }
        .audience-card .sub {
            color:var(--ink-muted);
            font-size:0.95rem; line-height:1.75;
            margin-bottom:24px;
        }
        .audience-features { list-style:none; margin-bottom:2.5rem; display:flex; flex-direction:column; gap:10px; }
        .audience-features li {
            display:flex; align-items:flex-start; gap:12px;
            color:var(--ink-soft);
            font-size:0.93rem;
        }
        .check-circle {
            width:20px; height:20px;
            background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
            border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            flex-shrink:0; margin-top:2px;
            font-size:0.65rem;
            color:white;
        }

        .features {
            padding:7rem 6%;
            background:white;
        }
        .features-grid {
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
            gap:1.5rem;
            max-width:1300px; margin:0 auto;
        }
        .feature-card {
            background:var(--ice);
            border:1px solid rgba(0,87,255,0.08);
            border-radius:24px;
            padding:2.5rem;
            transition: all 0.35s ease;
            position:relative;
            overflow:hidden;
            cursor:default;
        }
        .feature-card::before {
            content:'';
            position:absolute;
            bottom:0; right:0;
            width:120px; height:120px;
            background: radial-gradient(circle at bottom right, rgba(0,87,255,0.07) 0%, transparent 70%);
            border-radius:0 0 24px 0;
            transition: width 0.4s, height 0.4s;
        }
        .feature-card:hover { background:white; transform:translateY(-6px); border-color:rgba(0,87,255,0.2); box-shadow:0 20px 60px rgba(0,87,255,0.1); }
        .feature-card:hover::before { width:180px; height:180px; }

        .feature-icon-wrap {
            width:56px; height:56px;
            background: linear-gradient(135deg, rgba(0,87,255,0.1), rgba(125,196,255,0.15));
            border-radius:16px;
            display:flex; align-items:center; justify-content:center;
            font-size:1.8rem;
            margin-bottom:1.5rem;
            transition: transform 0.3s, background 0.3s;
        }
        .feature-card:hover .feature-icon-wrap {
            transform:scale(1.1) rotate(-5deg);
            background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
        }
        .feature-card h3 {
            font-family:'Syne',sans-serif;
            font-size:1.15rem; font-weight:700;
            color:var(--ink);
            margin-bottom:0.8rem;
            letter-spacing:-0.3px;
        }
        .feature-card p {
            color:var(--ink-muted);
            font-size:0.9rem; line-height:1.75;
        }

        .trust-strip {
            padding:4rem 6%;
            background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
            position:relative;
            overflow:hidden;
        }
        .trust-strip::before {
            content:'';
            position:absolute; inset:0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .trust-grid {
            display:grid; grid-template-columns:repeat(4,1fr);
            gap:2rem; max-width:1100px; margin:0 auto;
            position:relative;
        }
        .trust-item { text-align:center; color:white; }
        .trust-icon { font-size:2.5rem; margin-bottom:12px; display:block; }
        .trust-item h5 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; margin-bottom:6px; }
        .trust-item p { font-size:0.85rem; opacity:0.8; line-height:1.6; }

        .screenshot-showcase {
            padding:7rem 6%;
            background:var(--blue-pale);
            position:relative;
            overflow:hidden;
        }
        .slideshow-wrapper {
            max-width:1300px;
            margin:0 auto;
            position:relative;
        }
        .slideshow-wrapper::before {
            content:'';
            position:absolute;
            top:-60px; right:-60px;
            width:200px; height:200px;
            border:40px solid rgba(0,87,255,0.06);
            border-radius:50%;
            pointer-events:none;
        }
        .slideshow-container {
            height:660px;
            border-radius:28px;
            overflow:hidden;
            background:white;
            border:1px solid rgba(0,87,255,0.12);
            box-shadow: 0 40px 120px rgba(0,87,255,0.15), 0 8px 40px rgba(0,87,255,0.08);
            cursor:pointer;
            position:relative;
        }
        .slideshow-container::before {
            content:'';
            position:absolute;
            top:0; left:0; right:0;
            height:44px;
            background: rgba(248,252,255,0.95);
            backdrop-filter:blur(10px);
            border-bottom:1px solid rgba(0,87,255,0.08);
            z-index:20;
            display:flex;
        }
        .slideshow-dots-bar {
            position:absolute;
            top:12px; left:18px;
            display:flex; gap:7px;
            z-index:21;
        }
        .tl { width:13px; height:13px; border-radius:50%; }
        .tl-red { background:#FF5F57; }
        .tl-yellow { background:#FFBC2E; }
        .tl-green { background:#28C840; }

        .screenshot-slider { position:relative; width:100%; height:100%; }
        .screenshot-item {
            position:absolute; top:0; left:0; width:100%; height:100%;
            display:flex; align-items:center; justify-content:center;
            opacity:0; pointer-events:none;
            padding:50px 0 10px;
        }
        .screenshot-item.active { opacity:1; pointer-events:auto; animation:zoom-reveal 1.2s cubic-bezier(0.2,0.8,0.3,1) forwards; }
        .screenshot-item.fade-out { animation:zoom-out 0.6s ease forwards; }
        @keyframes zoom-reveal { from{transform:scale(0.97);opacity:0;} to{transform:scale(1);opacity:1;} }
        @keyframes zoom-out   { from{transform:scale(1);opacity:1;} to{transform:scale(1.02);opacity:0;} }
        .screenshot-item img {
            max-width:92%; max-height:92%;
            object-fit:contain;
            border-radius:8px;
        }
        .slide-controls {
            display:flex; justify-content:center; gap:8px;
            margin-top:28px;
        }
        .slide-dot {
            width:8px; height:8px; border-radius:100px;
            background:rgba(0,87,255,0.2);
            cursor:pointer;
            transition: all 0.3s;
        }
        .slide-dot.active { width:28px; background: var(--blue-deep); }
        .slide-dot:hover { background:rgba(0,87,255,0.5); }

        .fullscreen-gallery {
            position:fixed; inset:0;
            background:rgba(10,22,40,0.97);
            z-index:10000;
            display:none; align-items:center; justify-content:center;
            opacity:0; transition:opacity 0.3s;
        }
        .fullscreen-gallery.active { display:flex; opacity:1; }
        .fullscreen-image-container {
            position:relative; width:100%; height:100%;
            display:flex; align-items:center; justify-content:center;
            padding:60px 100px;
        }
        .fullscreen-image-container img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
        .gallery-nav {
            position:absolute; top:50%; transform:translateY(-50%);
            width:56px; height:56px;
            background:rgba(255,255,255,0.08);
            border:1px solid rgba(255,255,255,0.15);
            border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            cursor:pointer; transition:all 0.3s;
            font-size:1.5rem; color:white;
            backdrop-filter:blur(10px);
        }
        .gallery-nav:hover { background:rgba(0,87,255,0.4); border-color:var(--blue-mid); }
        .gallery-nav.prev { left:24px; }
        .gallery-nav.next { right:24px; }
        .gallery-close {
            position:absolute; top:24px; right:24px;
            width:48px; height:48px;
            background:rgba(255,255,255,0.08);
            border:1px solid rgba(255,255,255,0.15);
            border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            cursor:pointer; transition:all 0.3s;
            font-size:1.2rem; color:white;
        }
        .gallery-close:hover { background:rgba(255,80,80,0.3); border-color:rgba(255,80,80,0.5); transform:rotate(90deg); }
        .gallery-counter {
            position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
            background:rgba(255,255,255,0.08);
            border:1px solid rgba(255,255,255,0.12);
            border-radius:100px;
            padding:8px 20px;
            font-family:'Space Grotesk',sans-serif;
            font-size:0.9rem; color:rgba(255,255,255,0.7);
        }

        .pricing {
            padding:7rem 6%;
            background:white;
        }
        .pricing-cards {
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:1.5rem;
            max-width:1100px; margin:0 auto;
        }
        .price-card {
            background:var(--ice);
            border:2px solid transparent;
            border-radius:28px;
            padding:2.8rem 2.2rem;
            text-align:center;
            transition:all 0.35s ease;
            position:relative;
        }
        .price-card:hover { transform:translateY(-8px); box-shadow:0 30px 80px rgba(0,87,255,0.12); border-color:rgba(0,87,255,0.2); }
        .price-card.featured {
            background:linear-gradient(160deg, var(--blue-deep), var(--blue-mid));
            border-color:transparent;
            box-shadow:0 20px 80px rgba(0,87,255,0.4);
            color:white;
        }
        .price-card.featured:hover { transform:translateY(-12px) scale(1.01); }
        .price-card.featured::before {
            content:'MOST POPULAR';
            position:absolute; top:-14px; left:50%; transform:translateX(-50%);
            background:var(--blue-deep);
            color:white;
            padding:4px 18px;
            border-radius:100px;
            font-size:0.72rem; font-weight:700;
            letter-spacing:1.5px;
            font-family:'Space Grotesk',sans-serif;
            border:2px solid rgba(255,255,255,0.3);
            white-space:nowrap;
        }
        .price-card h3 { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:800; color:var(--ink); margin-bottom:4px; }
        .price-card.featured h3 { color:white; }
        .price-desc { font-size:0.88rem; color:var(--ink-muted); margin-bottom:1.5rem; }
        .price-card.featured .price-desc { color:rgba(255,255,255,0.7); }
        .price-amount { margin:1.5rem 0; }
        .price-amount .currency { font-size:1.5rem; font-weight:700; color:var(--blue-deep); vertical-align:top; margin-top:6px; display:inline-block; }
        .price-amount .amount { font-family:'Syne',sans-serif; font-size:4rem; font-weight:800; color:var(--ink); line-height:1; display:inline-block; letter-spacing:-2px; }
        .price-amount .period { font-size:0.9rem; color:var(--ink-muted); }
        .price-card.featured .price-amount .currency,
        .price-card.featured .price-amount .amount { color:white; }
        .price-card.featured .price-amount .period { color:rgba(255,255,255,0.6); }
        .price-features { list-style:none; margin:2rem 0; text-align:left; }
        .price-features li {
            padding:0.7rem 0;
            border-bottom:1px solid rgba(0,87,255,0.07);
            color:var(--ink-soft);
            display:flex; align-items:center; gap:10px;
            font-size:0.9rem;
        }
        .price-card.featured .price-features li { border-bottom-color:rgba(255,255,255,0.1); color:rgba(255,255,255,0.9); }
        .price-features li::before { content:'✓'; color:var(--blue-deep); font-weight:700; flex-shrink:0; }
        .price-card.featured .price-features li::before { color:rgba(255,255,255,0.9); }
        .price-features li.highlight { font-weight:600; }
        .price-guarantee { font-size:0.8rem; color:var(--ink-muted); margin-top:1rem; }
        .price-card.featured .price-guarantee { color:rgba(255,255,255,0.5); }
        .price-card.featured .cta-button { background:white; color:var(--blue-deep) !important; box-shadow:0 8px 30px rgba(0,0,0,0.2); }

        .comparison {
            padding:3rem 6% 7rem;
            background:var(--blue-pale);
        }
        .comparison-table {
            max-width:860px; margin:3rem auto 0;
            background:white;
            border-radius:24px;
            overflow:hidden;
            box-shadow:0 10px 60px rgba(0,87,255,0.08);
        }
        .comp-row {
            display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
            padding:1rem 2rem; align-items:center;
            border-bottom:1px solid rgba(0,87,255,0.06);
        }
        .comp-row:last-child { border-bottom:none; }
        .comp-row.header {
            background:var(--blue-deep);
            color:white;
            font-family:'Space Grotesk',sans-serif;
            font-size:0.8rem; letter-spacing:1px;
            text-transform:uppercase; padding:1.2rem 2rem;
        }
        .comp-row.header .comp-col-center { text-align:center; }
        .comp-row.header .comp-col-faded { text-align:center; opacity:0.5; }
        .comp-row:not(.header):hover { background:rgba(0,87,255,0.02); }
        .comp-feature { color:var(--ink-soft); font-size:0.92rem; }
        .comp-check { text-align:center; font-size:1rem; }
        .comp-check.yes { color:var(--blue-deep); font-weight:600; }
        .comp-check.no { color:rgba(0,0,0,0.15); }

        .contact-section {
            padding:7rem 6%;
            background:white;
        }
        .contact-inner {
            max-width:1100px; margin:0 auto;
            display:grid; grid-template-columns:1fr 1.1fr; gap:4rem;
            background:white;
            border:1px solid rgba(0,87,255,0.1);
            border-radius:32px;
            padding:4rem;
            box-shadow:0 20px 80px rgba(0,87,255,0.08);
            position:relative;
            overflow:hidden;
        }
        .contact-inner::before {
            content:'';
            position:absolute;
            top:-80px; left:-80px;
            width:300px; height:300px;
            background:radial-gradient(circle, rgba(0,87,255,0.06) 0%, transparent 70%);
            border-radius:50%;
            pointer-events:none;
        }
        .contact-info h3 { font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800; color:var(--ink); letter-spacing:-1px; margin-bottom:1rem; }
        .contact-info h3 span { color:var(--blue-deep); }
        .contact-info p { color:var(--ink-muted); margin-bottom:2rem; line-height:1.75; }
        .contact-info ul { list-style:none; }
        .contact-info ul li { padding:0.7rem 0; color:var(--ink-soft); font-size:0.93rem; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(0,87,255,0.06); }
        .contact-info ul li:last-child { border-bottom:none; }
        .contact-info ul li::before { content:'→'; color:var(--blue-deep); font-weight:700; flex-shrink:0; }
        .contact-info .contact-note { margin-top:20px; font-size:0.9rem; color:var(--ink-muted); }
        .contact-form .honeypot { display:none; }
        .contact-form { display:flex; flex-direction:column; gap:1rem; }
        .contact-form input,
        .contact-form textarea,
        .contact-form select {
            padding:0.9rem 1.2rem;
            border-radius:14px;
            border:1.5px solid rgba(0,87,255,0.15);
            background:var(--ice);
            color:var(--ink);
            font-family:'DM Sans',sans-serif;
            font-size:0.95rem;
            transition:all 0.25s;
            outline:none;
        }
        .contact-form select option { background:white; color:var(--ink); }
        .contact-form input:focus,
        .contact-form textarea:focus,
        .contact-form select:focus { border-color:var(--blue-deep); background:white; box-shadow:0 0 0 4px rgba(0,87,255,0.08); }
        .contact-form input::placeholder,
        .contact-form textarea::placeholder { color:var(--ink-muted); }
        #formStatus { text-align:center; font-size:0.9rem; margin-top:0.5rem; min-height:20px; }
        .form-note { font-size:0.82rem; color:var(--ink-muted); text-align:center; }

/* ===== FOOTER ===== */

footer {
  margin-top: 100px;
  padding: 60px 0 40px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.footer-links a {
  text-decoration: none;
  color: inherit;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 1;
  color: #e8f542;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  align-items: center;
}

.footer-links a:not(:last-child)::after {
  content: '|';
  margin: 0 0.6em;
  opacity: 0.3;
  color: inherit;
}

        .reveal { opacity:0; transform:translateY(40px); transition:all 0.7s cubic-bezier(0.2,0.8,0.3,1); }
        .reveal.visible { opacity:1; transform:translateY(0); }

        @media (max-width:1024px) {
            .audience-grid { grid-template-columns:1fr; }
            .pricing-cards { grid-template-columns:1fr; }
            .stats-grid { grid-template-columns:1fr 1fr; }
            .trust-grid { grid-template-columns:1fr 1fr; }
        }
        @media (max-width:768px) {
            nav { padding:1rem 4%; }
            nav ul { gap:1rem; font-size:0.88rem; }
            .logo { font-size:1.4rem; }
            .hero h1 { letter-spacing:-1px; }
            .hero-ctas { flex-direction:column; align-items:center; }
            .contact-inner { grid-template-columns:1fr; gap:2rem; padding:2rem; }
            .comp-row { font-size:0.8rem; }
            .slideshow-container { height:380px; }
            .fullscreen-image-container { padding:80px 20px 100px; }
            .stats-grid { grid-template-columns:1fr 1fr; }
            .trust-grid { grid-template-columns:1fr 1fr; }
            .free-trial-inner { padding: 2.5rem 1.5rem; }
            .free-trial-features { gap: 16px; }
        }