/* ══════════════════════════════════════════════
        TOKENS — LIGHT BLUE THEME
        ══════════════════════════════════════════════ */
        :root {
        /* Sky palette */
        --sky-50:  #f0f7ff;
        --sky-100: #deeeff;
        --sky-200: #b8deff;
        --sky-300: #7ec2ff;
        --sky-400: #38a3f5;
        --sky-500: #0d87e0;
        --sky-600: #006cc2;
        --sky-700: #0057a0;

        /* Page colors */
        --bg:        #f0f7ff;
        --bg2:       #e3f0fd;
        --surface:   #ffffff;
        --surface2:  #f7fbff;

        /* Text */
        --txt:   #08192e;
        --txt2:  #2d4a6b;
        --txt3:  #6b8aaa;
        --txt4:  #a8c0d8;

        /* Brand */
        --blue:    #0d87e0;
        --blue-dk: #005fb8;
        --blue-lt: #38a3f5;
        --blue-bg: rgba(13,135,224,.08);
        --blue-gl: rgba(13,135,224,.22);

        /* Accent — warm coral */
        --coral:    #f05a5a;
        --coral-lt: #ff8080;
        --coral-bg: rgba(240,90,90,.08);

        /* Accent — mint */
        --mint:    #00b894;
        --mint-bg: rgba(0,184,148,.09);

        /* Accent — amber */
        --amber:   #f59e0b;
        --amber-bg:rgba(245,158,11,.09);

        /* Borders */
        --brd:  rgba(13,135,224,.14);
        --brd2: rgba(13,135,224,.24);

        /* Fonts */
        --ff-d: 'Fraunces', Georgia, serif;
        --ff-b: 'Plus Jakarta Sans', sans-serif;
        --ff-m: 'JetBrains Mono', monospace;

        /* Motion */
        --spring: cubic-bezier(.34,1.56,.64,1);
        --smooth: cubic-bezier(.4,0,.2,1);
        --out:    cubic-bezier(0,0,.2,1);

        /* Shadow */
        --sh-xs: 0 1px 4px rgba(8,25,46,.06);
        --sh-sm: 0 4px 16px rgba(8,25,46,.08);
        --sh-md: 0 8px 32px rgba(8,25,46,.10);
        --sh-lg: 0 24px 64px rgba(8,25,46,.12);
        --sh-blue: 0 8px 32px rgba(13,135,224,.25);
        }

        /* ══════════════════════════════════════════════
        RESET
        ══════════════════════════════════════════════ */
        *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth;font-size:16px}
        body{
        font-family:var(--ff-b);
        background:var(--bg);
        color:var(--txt);
        overflow-x:hidden;
        line-height:1.65;
        cursor:none;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button{cursor:pointer;font-family:var(--ff-b)}

        /* ══════════════════════════════════════════════
        CUSTOM CURSOR
        ══════════════════════════════════════════════ */
        .cur{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
        .cur-inner{
        width:10px;height:10px;background:var(--blue);border-radius:50%;
        transition:width .25s var(--spring),height .25s var(--spring),background .2s;
        }
        .cur-outer{
        position:fixed;top:0;left:0;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
        width:38px;height:38px;border:2px solid rgba(13,135,224,.4);border-radius:50%;
        transition:width .3s var(--spring),height .3s var(--spring),border-color .2s;
        }
        body:has(a:hover) .cur-outer,body:has(button:hover) .cur-outer{width:58px;height:58px;border-color:var(--blue)}
        body:has(a:hover) .cur-inner,body:has(button:hover) .cur-inner{width:6px;height:6px}

        /* ══════════════════════════════════════════════
        DECORATIVE BG CIRCLES
        ══════════════════════════════════════════════ */
        .deco-circle{
        position:fixed;border-radius:50%;pointer-events:none;z-index:0;
        background:radial-gradient(circle,var(--sky-200) 0%,transparent 70%);
        opacity:.5;filter:blur(40px);
        }
        .dc1{width:600px;height:600px;top:-200px;right:-150px}
        .dc2{width:500px;height:500px;bottom:-150px;left:-150px;background:radial-gradient(circle,rgba(0,184,148,.15) 0%,transparent 70%)}

        /* ══════════════════════════════════════════════
        HEADER
        ══════════════════════════════════════════════ */
        header{
        position:fixed;inset-block-start:0;inset-inline:0;z-index:300;
        padding:.85rem 0;
        background:rgba(240,247,255,.88);
        backdrop-filter:blur(20px) saturate(1.8);
        -webkit-backdrop-filter:blur(20px) saturate(1.8);
        border-bottom:1px solid var(--brd);
        transition:box-shadow .3s,background .3s;
        }
        header.up{box-shadow:0 4px 24px rgba(13,135,224,.1)}
        .nav-wrap{width:min(92%,1300px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}

        .logo{display:flex;align-items:center;gap:.55rem;text-decoration:none}
        .logo-icon{
        width:36px;height:36px;border-radius:10px;
        background:linear-gradient(135deg,var(--blue-dk),var(--blue-lt));
        display:grid;place-items:center;flex-shrink:0;
        box-shadow:0 3px 12px var(--blue-gl);
        }
        .logo-icon svg{width:18px;height:18px;color:#fff;stroke:#fff}
        .logo-text{font-family:var(--ff-d);font-size:1.3rem;font-weight:900;letter-spacing:-.03em;color:var(--txt)}
        .logo-text span{color:var(--blue)}

        nav.desk ul{display:flex;list-style:none;gap:.1rem;align-items:center}
        nav.desk a{
        display:block;padding:.4rem .8rem;border-radius:8px;
        font-size:.88rem;font-weight:600;color:var(--txt2);
        transition:background .2s,color .2s;letter-spacing:-.01em;
        }
        nav.desk a:hover{background:var(--blue-bg);color:var(--blue)}

        .nav-end{display:flex;align-items:center;gap:.65rem}
        .btn-login{
        padding:.46rem 1.1rem;border-radius:9px;font-size:.875rem;font-weight:700;
        border:1.5px solid var(--brd2);color:var(--txt2);background:transparent;
        transition:border-color .2s,color .2s,background .2s;letter-spacing:-.01em;
        }
        .btn-login:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
        .btn-nav-cta{
        padding:.52rem 1.35rem;border-radius:9px;font-size:.875rem;font-weight:700;
        border:none;background:linear-gradient(135deg,var(--blue-dk),var(--blue));
        color:#fff;box-shadow:0 3px 14px var(--blue-gl);
        transition:transform .2s var(--spring),box-shadow .2s;letter-spacing:-.01em;
        }
        .btn-nav-cta:hover{transform:translateY(-1px);box-shadow:var(--sh-blue)}
        .ham-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:.4rem}
        .ham-btn span{display:block;width:22px;height:1.5px;background:var(--txt);border-radius:2px;transition:all .3s}

        /* ══════════════════════════════════════════════
        HERO
        ══════════════════════════════════════════════ */
        .hero{
        min-height:100svh;padding:8rem 0 4rem;
        display:grid;place-items:center;
        position:relative;z-index:1;overflow:hidden;
        }

        /* Grid pattern */
        .hero-grid{
        position:absolute;inset:0;
        background-image:
            linear-gradient(var(--sky-200) 1px,transparent 1px),
            linear-gradient(90deg,var(--sky-200) 1px,transparent 1px);
        background-size:56px 56px;
        mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,black 20%,transparent 100%);
        opacity:.5;
        }

        .hero-inner{
        width:min(92%,1260px);margin-inline:auto;
        position:relative;z-index:2;
        display:grid;grid-template-columns:55% 45%;gap:4rem;align-items:center;
        }

        /* ── HERO COPY ── */
        .hero-kicker{
        display:inline-flex;align-items:center;gap:.55rem;
        background:#fff;border:1.5px solid var(--brd2);
        color:var(--blue);font-family:var(--ff-m);font-size:.72rem;font-weight:500;
        letter-spacing:.08em;text-transform:uppercase;
        padding:.32rem 1rem;border-radius:999px;margin-bottom:1.5rem;
        box-shadow:var(--sh-xs);
        animation:fadeUp .65s var(--out) both;
        }
        .kicker-dot{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 3px var(--mint-bg);animation:kpulse 2s ease infinite}
        @keyframes kpulse{0%,100%{box-shadow:0 0 0 3px rgba(0,184,148,.15)}50%{box-shadow:0 0 0 6px rgba(0,184,148,.06)}}

        .hero-h1{
        font-family:var(--ff-d);
        font-size:clamp(2.6rem,5vw,4.2rem);
        font-weight:900;
        line-height:1.06;
        letter-spacing:-.04em;
        color:var(--txt);
        margin-bottom:1.4rem;
        animation:fadeUp .65s .08s var(--out) both;
        }
        .hero-h1 .line-blue{
        color:var(--blue);
        font-style:italic;
        }
        .hero-h1 .underline-wrap{
        position:relative;display:inline-block;
        }
        .hero-h1 .underline-wrap::after{
        content:'';
        position:absolute;bottom:-.1em;left:0;right:0;
        height:6px;
        background:linear-gradient(90deg,var(--blue-lt),var(--mint));
        border-radius:999px;
        opacity:.5;
        }

        .hero-free-tag{
        display:inline-flex;align-items:center;gap:.45rem;
        background:rgba(0,184,148,.1);border:1px solid rgba(0,184,148,.25);
        color:var(--mint);font-family:var(--ff-b);font-size:.82rem;font-weight:700;
        padding:.3rem .85rem;border-radius:999px;margin-bottom:1.3rem;
        animation:fadeUp .65s .12s var(--out) both;
        }
        .hero-free-tag svg{width:13px;height:13px}

        .hero-desc{
        font-size:1.1rem;font-weight:400;line-height:1.75;
        color:var(--txt2);max-width:480px;margin-bottom:2rem;
        animation:fadeUp .65s .18s var(--out) both;
        }
        .hero-desc strong{color:var(--txt);font-weight:700}

        .hero-btns{
        display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
        animation:fadeUp .65s .24s var(--out) both;
        }
        .btn-hero-main{
        display:inline-flex;align-items:center;gap:.55rem;
        padding:.95rem 2.1rem;border-radius:12px;border:none;
        background:linear-gradient(135deg,var(--blue-dk),var(--blue),var(--blue-lt));
        background-size:200% 100%;background-position:0 0;
        color:#fff;font-weight:800;font-size:1rem;letter-spacing:-.02em;
        box-shadow:var(--sh-blue);
        transition:transform .25s var(--spring),box-shadow .25s,background-position .4s;
        }
        .btn-hero-main:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(13,135,224,.35);background-position:100% 0}
        .btn-hero-main svg{width:17px;height:17px;transition:transform .2s var(--spring)}
        .btn-hero-main:hover svg{transform:translateX(4px)}
        .btn-hero-ghost{
        display:inline-flex;align-items:center;gap:.5rem;
        padding:.95rem 1.5rem;border-radius:12px;
        border:1.5px solid var(--brd2);background:var(--surface);
        color:var(--txt2);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
        box-shadow:var(--sh-xs);
        transition:border-color .2s,color .2s,box-shadow .2s;
        }
        .btn-hero-ghost:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--sh-sm)}

        /* Stats strip */
        .hero-stats{
        display:flex;gap:2rem;margin-top:2.5rem;padding-top:2rem;
        border-top:1.5px solid var(--brd);
        animation:fadeUp .65s .32s var(--out) both;
        }
        .s-num{
        font-family:var(--ff-d);font-size:2rem;font-weight:900;
        color:var(--txt);line-height:1;margin-bottom:.2rem;letter-spacing:-.04em;
        }
        .s-num em{color:var(--blue);font-style:normal}
        .s-lbl{font-size:.75rem;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em}

        /* ── HERO VISUAL ── */
        .hero-vis{
        position:relative;
        animation:fadeUp .65s .15s var(--out) both;
        }

        .resume-card{
        background:#fff;
        border-radius:20px;
        padding:1.9rem;
        box-shadow:var(--sh-lg),0 0 0 1px rgba(13,135,224,.1);
        transform:perspective(1100px) rotateY(-6deg) rotateX(3deg);
        transition:transform .5s var(--smooth);
        position:relative;z-index:2;
        }
        .resume-card:hover{transform:perspective(1100px) rotateY(-2deg) rotateX(1deg) translateY(-8px)}

        /* Mini resume content */
        .rc-top{display:flex;gap:1rem;margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:2.5px solid var(--txt)}
        .rc-av{
        width:50px;height:50px;border-radius:12px;flex-shrink:0;
        background:linear-gradient(135deg,var(--blue-dk),var(--mint));
        display:grid;place-items:center;
        font-family:var(--ff-d);font-size:1.35rem;font-weight:900;color:#fff;
        }
        .rc-nm{font-family:var(--ff-d);font-size:1.05rem;font-weight:900;letter-spacing:-.025em;color:var(--txt)}
        .rc-rl{font-size:.72rem;font-weight:600;color:var(--txt3);margin-bottom:.35rem}
        .rc-tags{display:flex;flex-wrap:wrap;gap:.28rem}
        .rc-tag{font-size:.6rem;padding:.1rem .42rem;background:var(--sky-100);border-radius:4px;color:var(--blue);font-family:var(--ff-m);font-weight:500}

        .rc-sec{margin-bottom:.85rem}
        .rc-sh{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:.45rem}
        .rc-role{font-size:.76rem;font-weight:700;color:var(--txt);margin-bottom:.1rem}
        .rc-co{font-size:.66rem;color:var(--txt3);margin-bottom:.2rem}
        .rc-bar{height:3px;background:var(--sky-100);border-radius:2px;overflow:hidden;margin:.28rem 0}
        .rc-bar-f{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue-dk),var(--blue-lt))}
        .rc-skills{display:flex;flex-wrap:wrap;gap:.28rem}
        .rc-sk{font-size:.6rem;padding:.15rem .45rem;border-radius:5px;background:var(--sky-100);color:var(--blue);font-weight:600;border:1px solid rgba(13,135,224,.15)}
        .rc-ph{height:3.5px;background:var(--sky-100);border-radius:2px;margin-bottom:.28rem}
        .rc-ph.s{width:52%}.rc-ph.m{width:80%}

        /* Floating chips */
        .fchip{
        position:absolute;background:#fff;border:1.5px solid var(--brd);border-radius:14px;
        padding:.65rem 1rem;display:flex;align-items:center;gap:.55rem;
        box-shadow:var(--sh-md);z-index:3;
        animation:chipFloat 4.5s ease-in-out infinite;
        }
        .fc-ats{bottom:72px;left:-72px;animation-delay:.4s}
        .fc-ai {top:36px;right:-66px;animation-delay:1.5s}
        @keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
        .chip-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex-shrink:0;box-shadow:0 0 0 3px var(--mint-bg);animation:kpulse 2s ease infinite}
        .chip-lbl{font-size:.73rem;font-weight:800;color:var(--txt);font-family:var(--ff-b)}
        .chip-sub{font-size:.63rem;color:var(--txt3);margin-top:.05rem;font-weight:500}
        .chip-score{font-size:.9rem;font-weight:900;color:var(--mint);font-family:var(--ff-d)}
        .chip-ico{font-size:1.2rem}
        .chip-spark{font-size:.68rem;font-weight:600;color:var(--blue);margin-top:.05rem}

        @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

          .hero-vis-container {
                width: 100%;
                max-width: 460px;
                margin: 0 auto;
            }
            
            /* Navigation Tabs */
            .vis-tabs-nav {
                display: flex;
                background: #f1f5f9;
                padding: 6px;
                border-radius: 16px;
                gap: 4px;
                margin-bottom: 20px;
                border: 1px solid #e2e8f0;
            }
            .vis-tab-btn {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 10px 14px;
                font-size: 13px;
                font-weight: 700;
                color: #64748b;
                border: none;
                background: transparent;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .vis-tab-btn:hover {
                color: #1e293b;
            }
            .vis-tab-btn.active {
                background: #ffffff;
                color: #2563eb;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            }

            /* Tab Visibility */
            .hero-tab-content {
                display: none;
                width: 100%;
                position: relative;
            }
            .hero-tab-content.active {
                display: block;
                animation: fadeInTab 0.4s ease forwards;
            }

            @keyframes fadeInTab {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }

            /* WhatsApp Mockup UI */
            .wa-card {
                background: #e5ddd5; /* Classic WhatsApp Chat BG */
                border-radius: 24px;
                overflow: hidden;
                box-shadow: 0 20px 40px rgba(0,0,0,0.08);
                border: 4px solid #ffffff;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            }
            .wa-header {
                background: #075e54;
                padding: 14px 18px;
                display: flex;
                align-items: center;
                gap: 12px;
                color: white;
            }
            .wa-avatar {
                width: 36px;
                height: 36px;
                background: #128c7e;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
            }
            .wa-title {
                font-size: 14px;
                font-weight: 700;
            }
            .wa-status {
                font-size: 11px;
                opacity: 0.8;
            }
            .wa-chat-body {
                padding: 20px 14px;
                background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); /* Official WA tile background pattern */
                background-repeat: repeat;
            }
            .wa-bubble {
                background: #ffffff;
                border-radius: 0 16px 16px 16px;
                padding: 16px;
                max-width: 90%;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                position: relative;
            }
            .wa-badge {
                background: #e8f5e9;
                color: #2e7d32;
                font-size: 11px;
                font-weight: 800;
                padding: 4px 8px;
                border-radius: 6px;
                display: inline-block;
                margin-bottom: 10px;
                text-transform: uppercase;
                tracking: 0.5px;
            }
            .wa-job-title {
                font-size: 18px;
                font-weight: 800;
                color: #111827;
            }
            .wa-job-role {
                font-size: 13px;
                font-weight: 600;
                color: #2563eb;
                margin-bottom: 12px;
            }
            .wa-meta-grid {
                display: grid;
                grid-cols: 1fr 1fr;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                background: #f8fafc;
                padding: 10px;
                border-radius: 10px;
                margin-bottom: 12px;
                border: 1px dashed #e2e8f0;
            }
            .wa-meta-item {
                font-size: 12px;
                font-weight: 600;
                color: #475569;
            }
            .wa-skills-heading {
                font-size: 12px;
                font-weight: 700;
                color: #1e293b;
                margin-bottom: 6px;
            }
            .wa-card-skills {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                margin-bottom: 12px;
            }
            .wa-card-skills span {
                background: #f1f5f9;
                color: #334155;
                font-size: 11px;
                font-weight: 600;
                padding: 3px 8px;
                border-radius: 6px;
            }
            .wa-footer-link {
                font-size: 10px;
                color: #94a3b8;
                text-align: right;
                font-weight: 600;
            }

            /* Specific Floating Chips Positioning */
            .fc-wa-share {
                bottom: 20px;
                left: -25px;
                background: white;
                border: 1px solid #e2e8f0;
            }

        /* ══════════════════════════════════════════════
        MARQUEE
        ══════════════════════════════════════════════ */
        .mq-wrap{
        border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);
        background:linear-gradient(90deg,var(--sky-50),#fff,var(--sky-50));
        padding:.85rem 0;overflow:hidden;position:relative;z-index:1;
        }
        .mq-track{display:flex;gap:2.8rem;animation:mq 26s linear infinite;width:max-content}
        .mq-item{
        display:flex;align-items:center;gap:.55rem;
        font-family:var(--ff-m);font-size:.7rem;font-weight:500;
        color:var(--txt3);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;
        }
        .mq-item::before{content:'◆';color:var(--blue-lt);font-size:.42rem}
        @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

        /* ══════════════════════════════════════════════
        SHARED SECTION STYLES
        ══════════════════════════════════════════════ */
        section{padding:5.5rem 0}
        .wrap{width:min(92%,1280px);margin-inline:auto}
        .wrap-md{width:min(92%,1000px);margin-inline:auto}
        .wrap-sm{width:min(92%,760px);margin-inline:auto}

        .tag{
        display:inline-flex;align-items:center;gap:.4rem;
        font-family:var(--ff-m);font-size:.68rem;font-weight:500;
        color:var(--blue);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem;
        }
        .tag::before{content:'//';opacity:.5}
        .sec-h2{
        font-family:var(--ff-d);font-size:clamp(1.9rem,3.6vw,2.8rem);
        font-weight:900;line-height:1.1;letter-spacing:-.04em;color:var(--txt);margin-bottom:.7rem;
        }
        .sec-sub{font-size:1rem;font-weight:400;line-height:1.75;color:var(--txt2);max-width:520px}

        /* ══════════════════════════════════════════════
        FEATURES
        ══════════════════════════════════════════════ */
        .feat-section{background:var(--surface)}
        .feat-wrap{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
        .feat-copy{position:sticky;top:8rem}
        .feat-cards{display:flex;flex-direction:column;gap:1.1rem}

        .feat-card{
        background:var(--sky-50);border:1.5px solid var(--brd);border-radius:16px;
        padding:1.65rem 1.75rem;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
        transition:border-color .25s,transform .3s var(--spring),box-shadow .25s;cursor:default;
        }
        .feat-card:hover{
        border-color:var(--blue);
        transform:translateX(8px) translateY(-2px);
        box-shadow:-4px 0 0 var(--blue),var(--sh-sm);
        background:#fff;
        }
        .feat-ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
        .fi-blue{background:var(--blue-bg)}
        .fi-coral{background:var(--coral-bg)}
        .fi-mint{background:var(--mint-bg)}
        .fi-amber{background:var(--amber-bg)}
        .feat-card h3{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.42rem;color:var(--txt)}
        .feat-card p{font-size:.9rem;color:var(--txt2);line-height:1.68;font-weight:400}
        .feat-pill{
        display:inline-block;margin-top:.65rem;
        font-family:var(--ff-m);font-size:.63rem;padding:.18rem .55rem;border-radius:5px;
        color:var(--blue);background:var(--blue-bg);border:1px solid var(--brd2);
        }

        /* ══════════════════════════════════════════════
        TEMPLATES
        ══════════════════════════════════════════════ */
        .tmpl-section{background:var(--bg2)}
        .tmpl-header{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:3rem;gap:1rem}
        .tmpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}

        .tmpl-card{
        position:relative;border-radius:14px;overflow:hidden;
        border:1.5px solid var(--brd);aspect-ratio:3/4;
        background:#fff;cursor:pointer;
        transition:transform .3s var(--spring),box-shadow .3s,border-color .3s;
        }
        .tmpl-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:var(--sh-lg);border-color:var(--blue)}
        .tmpl-inner{position:absolute;inset:0;padding:.9rem;background:#fff;color:var(--txt)}
        .tm-stripe{height:7px;margin:-.9rem -.9rem .85rem;border-radius:0}
        .tm-name{font-family:var(--ff-d);font-size:.85rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.15rem}
        .tm-role{font-size:.6rem;color:var(--txt3);margin-bottom:.65rem;font-weight:500}
        .tm-ln{height:1px;background:#eef4fb;margin:.45rem 0}
        .tm-sh{font-size:.53rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--txt3);margin-bottom:.3rem}
        .tm-bar{display:flex;align-items:center;gap:.35rem;margin-bottom:.22rem}
        .tm-bl{font-size:.52rem;color:var(--txt2);width:36px;flex-shrink:0;font-weight:500}
        .tm-bt{flex:1;height:2.5px;background:#eef4fb;border-radius:2px}
        .tm-bf{height:100%;border-radius:2px}
        .tm-ph{height:3.5px;background:#eef4fb;border-radius:2px;margin-bottom:.28rem}
        .tm-ph.s{width:52%}.tm-ph.m{width:80%}
        .tmpl-overlay{
        position:absolute;inset:0;
        background:linear-gradient(to top,rgba(5,65,140,.94) 0%,rgba(13,135,224,.3) 55%,transparent 100%);
        display:flex;flex-direction:column;justify-content:flex-end;
        padding:1.1rem;opacity:0;transition:opacity .22s;
        }
        .tmpl-card:hover .tmpl-overlay{opacity:1}
        .to-name{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:.38rem;font-family:var(--ff-b);letter-spacing:-.01em}
        .to-btn{
        display:inline-flex;align-items:center;gap:.3rem;
        padding:.4rem .95rem;border-radius:8px;
        background:var(--sky-300);color:var(--blue-dk);
        font-size:.77rem;font-weight:800;border:none;
        transition:background .2s;
        }
        .to-btn:hover{background:#fff}
        .tmpl-badge{
        position:absolute;top:.7rem;right:.7rem;
        font-size:.58rem;padding:.18rem .52rem;border-radius:5px;font-weight:700;font-family:var(--ff-m);
        }
        .b-free{background:rgba(0,184,148,.12);color:var(--mint);border:1px solid rgba(0,184,148,.22)}
        .b-pop{background:var(--amber-bg);color:var(--amber);border:1px solid rgba(245,158,11,.22)}
        .b-new{background:var(--blue-bg);color:var(--blue);border:1px solid var(--brd2)}

        /* ══════════════════════════════════════════════
        HOW IT WORKS
        ══════════════════════════════════════════════ */
        .hiw-section{background:var(--surface)}
        .hiw-hd{text-align:center;margin-bottom:4rem}
        .steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
        .steps-row::before{
        content:'';position:absolute;
        top:46px;left:calc(16.6% + 1rem);right:calc(16.6% + 1rem);
        height:1.5px;
        background:linear-gradient(90deg,var(--blue-lt),var(--mint),var(--blue-lt));
        opacity:.25;
        }
        .step-item{text-align:center;padding:0 1rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
        .step-circle{
        width:88px;height:88px;border-radius:50%;
        display:grid;place-items:center;position:relative;z-index:1;
        border:2px solid var(--brd);background:var(--surface);
        transition:border-color .25s,box-shadow .25s,transform .25s var(--spring);
        }
        .step-item:hover .step-circle{border-color:var(--blue);box-shadow:0 0 0 8px var(--blue-bg);transform:scale(1.06)}
        .step-num{font-family:var(--ff-d);font-size:2rem;font-weight:900;letter-spacing:-.04em}
        .step-item:nth-child(1) .step-num{color:var(--blue)}
        .step-item:nth-child(2) .step-num{color:var(--coral)}
        .step-item:nth-child(3) .step-num{color:var(--mint)}
        .step-item h3{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;color:var(--txt)}
        .step-item p{font-size:.9rem;color:var(--txt2);line-height:1.67}

        /* ══════════════════════════════════════════════
        PRICING
        ══════════════════════════════════════════════ */
        .price-section{background:var(--bg)}
        .price-hd{text-align:center;margin-bottom:3.5rem}
        .price-toggle-row{
        display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:2.5rem;
        }
        .tgl-lbl{font-size:.9rem;font-weight:600;color:var(--txt2);letter-spacing:-.01em}
        .tgl-track{
        width:46px;height:26px;border-radius:999px;background:var(--brd2);
        position:relative;cursor:pointer;transition:background .2s;border:1.5px solid var(--brd2);
        }
        .tgl-track.on{background:var(--blue);border-color:var(--blue)}
        .tgl-thumb{
        width:18px;height:18px;border-radius:50%;background:#fff;
        position:absolute;top:2px;left:2px;
        transition:transform .22s var(--spring);
        box-shadow:var(--sh-xs);
        }
        .tgl-track.on .tgl-thumb{transform:translateX(20px)}
        .save-tag{
        background:rgba(0,184,148,.12);color:var(--mint);border:1px solid rgba(0,184,148,.22);
        font-size:.72rem;font-weight:700;padding:.22rem .65rem;border-radius:999px;font-family:var(--ff-m);
        }

        .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start}
        .pc{
        background:var(--surface);border:1.5px solid var(--brd);border-radius:20px;
        padding:2rem;transition:transform .25s var(--spring),box-shadow .25s;position:relative;
        }
        .pc:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}

        .pc.hot{
        border-color:var(--blue);
        box-shadow:0 0 0 5px var(--blue-bg),var(--sh-md);
        transform:scale(1.035);
        }
        .pc.hot:hover{transform:scale(1.035) translateY(-5px)}
        .hot-pill{
        position:absolute;top:-15px;left:50%;transform:translateX(-50%);
        background:linear-gradient(135deg,var(--blue-dk),var(--blue));
        color:#fff;font-size:.7rem;font-weight:800;
        padding:.3rem 1.1rem;border-radius:999px;white-space:nowrap;
        font-family:var(--ff-m);letter-spacing:.06em;
        box-shadow:0 3px 12px var(--blue-gl);
        }
        .pc-label{font-family:var(--ff-m);font-size:.68rem;font-weight:500;color:var(--blue);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}
        .pc-name{font-family:var(--ff-d);font-size:1.6rem;font-weight:900;letter-spacing:-.035em;color:var(--txt);margin-bottom:.3rem}
        .pc-tagline{font-size:.88rem;color:var(--txt3);line-height:1.55;margin-bottom:1.5rem;font-weight:400}
        .pc-price{display:flex;align-items:baseline;gap:.25rem;margin-bottom:1.5rem}
        .pc-sym{font-size:1.1rem;font-weight:700;color:var(--txt2);margin-top:.35rem}
        .pc-amt{font-family:var(--ff-d);font-size:3rem;font-weight:900;color:var(--txt);letter-spacing:-.05em;line-height:1}
        .pc-amt.free-amt{color:var(--mint)}
        .pc-per{font-size:.85rem;color:var(--txt3);font-weight:400}
        .pc-free-note{font-size:.8rem;color:var(--mint);font-weight:700;margin-top:.3rem}

        .feat-list{list-style:none;display:flex;flex-direction:column;gap:.62rem;margin-bottom:1.8rem}
        .feat-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--txt2);line-height:1.45;font-weight:400}
        .feat-list li::before{content:'✓';color:var(--mint);font-weight:800;font-size:.8rem;flex-shrink:0;margin-top:.1rem}
        .feat-list li.no{color:var(--txt4)}
        .feat-list li.no::before{content:'—';color:var(--brd2);font-weight:400}
        .feat-list strong{color:var(--txt);font-weight:700}

        .btn-free{
        width:100%;padding:.88rem;border-radius:12px;
        border:2px solid var(--brd2);background:transparent;
        color:var(--txt2);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
        transition:border-color .2s,color .2s,background .2s;
        }
        .btn-free:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
        .btn-pro{
        width:100%;padding:.88rem;border-radius:12px;border:none;
        background:linear-gradient(135deg,var(--blue-dk),var(--blue));
        color:#fff;font-weight:800;font-size:.95rem;letter-spacing:-.01em;
        box-shadow:var(--sh-blue);transition:transform .2s var(--spring),box-shadow .2s;
        }
        .btn-pro:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(13,135,224,.38)}
        .btn-biz{
        width:100%;padding:.88rem;border-radius:12px;
        border:2px solid var(--txt);background:var(--txt);
        color:#fff;font-weight:700;font-size:.95rem;letter-spacing:-.01em;
        transition:background .2s,border-color .2s;
        }
        .btn-biz:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
        .pc-note{text-align:center;font-size:.75rem;color:var(--txt4);margin-top:.85rem;font-weight:400}

        /* ══════════════════════════════════════════════
        TESTIMONIALS
        ══════════════════════════════════════════════ */
        .testi-section{background:var(--sky-50);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd)}
        .testi-header{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:2.8rem;gap:1rem}
        .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
        .testi-card{
        background:#fff;border:1.5px solid var(--brd);border-radius:16px;padding:1.75rem;
        transition:border-color .25s,transform .25s var(--spring),box-shadow .25s;
        }
        .testi-card:hover{border-color:var(--blue-lt);transform:translateY(-5px);box-shadow:var(--sh-md)}
        .testi-stars{color:var(--amber);font-size:.82rem;margin-bottom:.9rem;letter-spacing:.08em}
        .testi-quote{
        font-size:.97rem;font-weight:400;line-height:1.75;color:var(--txt2);margin-bottom:1.35rem;
        position:relative;padding-left:.2rem;
        }
        .testi-quote::before{
        content:'\201C';
        font-family:var(--ff-d);font-size:3.2rem;line-height:0;
        color:var(--sky-200);position:absolute;top:.45rem;left:-.5rem;
        }
        .testi-user{display:flex;align-items:center;gap:.7rem}
        .t-av{
        width:40px;height:40px;border-radius:10px;flex-shrink:0;
        display:grid;place-items:center;
        font-family:var(--ff-d);font-size:.9rem;font-weight:900;color:#fff;
        }
        .av1{background:linear-gradient(135deg,#0d87e0,#38a3f5)}
        .av2{background:linear-gradient(135deg,#f05a5a,#ff8080)}
        .av3{background:linear-gradient(135deg,#00b894,#00cba8)}
        .t-name{font-size:.9rem;font-weight:800;color:var(--txt);letter-spacing:-.01em}
        .t-role{font-size:.76rem;color:var(--txt3);margin-top:.06rem;font-weight:400}

        /* ══════════════════════════════════════════════
        CTA SECTION
        ══════════════════════════════════════════════ */
        .cta-block{
        background:linear-gradient(135deg,var(--blue-dk) 0%,var(--blue) 50%,var(--blue-lt) 100%);
        padding:6rem 0;text-align:center;position:relative;overflow:hidden;
        }
        .cta-block::before{
        content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);
        width:700px;height:700px;border-radius:50%;
        background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);
        }
        /* Floating shapes */
        .cta-shapes span{
        position:absolute;border-radius:50%;opacity:.12;
        background:#fff;
        }
        .cs1{width:300px;height:300px;bottom:-150px;right:-100px}
        .cs2{width:200px;height:200px;top:-80px;left:5%}
        .cs3{width:80px;height:80px;top:30%;left:8%;border-radius:16px;opacity:.08}

        .cta-content{position:relative;z-index:1;width:min(92%,640px);margin-inline:auto}
        .cta-tag2{font-family:var(--ff-m);font-size:.7rem;color:rgba(255,255,255,.65);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
        .cta-h{
        font-family:var(--ff-d);font-size:clamp(2rem,4.5vw,3.4rem);
        font-weight:900;letter-spacing:-.04em;line-height:1.08;color:#fff;margin-bottom:1rem;
        }
        .cta-h em{font-style:italic;color:var(--sky-200)}
        .cta-p{font-size:1.05rem;color:rgba(255,255,255,.78);line-height:1.7;margin-bottom:2.3rem;font-weight:300}
        .cta-row{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap}
        .btn-cta-main{
        display:inline-flex;align-items:center;gap:.5rem;
        padding:.95rem 2.1rem;border-radius:12px;border:none;
        background:#fff;color:var(--blue-dk);font-weight:800;font-size:1rem;letter-spacing:-.02em;
        box-shadow:0 6px 24px rgba(0,0,0,.15);transition:transform .2s var(--spring),box-shadow .2s;
        }
        .btn-cta-main:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.2)}
        .btn-cta-out{
        display:inline-flex;align-items:center;gap:.5rem;
        padding:.95rem 1.8rem;border-radius:12px;
        border:1.5px solid rgba(255,255,255,.38);
        color:rgba(255,255,255,.9);font-size:1rem;font-weight:600;background:transparent;
        transition:border-color .2s,background .2s;
        }
        .btn-cta-out:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.1)}
        .cta-small{margin-top:1.3rem;font-size:.78rem;color:rgba(255,255,255,.5);font-family:var(--ff-m)}
        .cta-small span{color:rgba(255,255,255,.78)}

        /* ══════════════════════════════════════════════
        FOOTER
        ══════════════════════════════════════════════ */
        footer{background:var(--txt);padding:3.5rem 0 2rem}
        .foot-wrap{width:min(92%,1280px);margin-inline:auto}
        .foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
        .foot-logo-text{font-family:var(--ff-d);font-size:1.25rem;font-weight:900;letter-spacing:-.03em;color:#fff;margin-bottom:.7rem}
        .foot-logo-text span{color:var(--sky-300)}
        .foot-desc{font-size:.86rem;color:rgba(255,255,255,.38);line-height:1.68;max-width:270px;font-weight:400}
        .foot-col-h{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.32);margin-bottom:.85rem}
        .foot-ul{list-style:none}
        .foot-ul li{margin-bottom:.45rem}
        .foot-ul a{font-size:.86rem;color:rgba(255,255,255,.45);transition:color .2s;font-weight:400}
        .foot-ul a:hover{color:var(--sky-300)}
        .foot-bottom{
        display:flex;align-items:center;justify-content:space-between;
        padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);
        font-size:.78rem;color:rgba(255,255,255,.28);
        }
        .foot-links{display:flex;gap:1.4rem}
        .foot-links a{color:rgba(255,255,255,.28);transition:color .2s}
        .foot-links a:hover{color:var(--sky-300)}

        /* ══════════════════════════════════════════════
        RESPONSIVE
        ══════════════════════════════════════════════ */
        @media(max-width:1080px){
        .hero-inner{grid-template-columns:1fr;text-align:center;gap:3.5rem}
        .hero-desc{max-width:none}
        .hero-btns{justify-content:center}
        .hero-stats{justify-content:center}
        .hero-vis{max-width:460px;margin:0 auto}
        .fc-ats{left:-10px}.fc-ai{right:-10px}
        .feat-wrap{grid-template-columns:1fr;gap:2rem}
        .feat-copy{position:static;text-align:center}
        .sec-sub{margin:0 auto}
        .tmpl-grid{grid-template-columns:repeat(2,1fr)}
        .price-grid{grid-template-columns:1fr}
        .pc.hot{transform:none}
        .pc.hot:hover{transform:translateY(-5px)}
        .testi-grid{grid-template-columns:1fr}
        .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
        }
        @media(max-width:768px){
        nav.desk{display:none}
        .ham-btn{display:flex}
        .hero{padding:8rem 0 4rem}
        .steps-row{grid-template-columns:1fr;gap:2rem}
        .steps-row::before{display:none}
        .tmpl-grid{grid-template-columns:1fr 1fr}
        .testi-header,.tmpl-header{grid-template-columns:1fr}
        .foot-grid{grid-template-columns:1fr;gap:1.5rem}
        .foot-bottom{flex-direction:column;gap:.7rem;text-align:center}
        .resume-card{transform:none!important}
        }
        @media(max-width:480px){
        .hero-stats{flex-wrap:wrap;gap:1rem}
        .tmpl-grid{grid-template-columns:1fr 1fr}
        }

       /* CSS for better alignment & fixes */
        #mainHeader { width: 100%; background: #fff; border-bottom: 1px solid #f1f5f9; position: sticky; top: 0; z-index: 1000; }
        .nav-wrap { display: flex; align-items: center; max-width: 1400px; margin: 0 auto; padding: 12px 20px; }
        
        .nav-end-wrapper { display: flex; align-items: center; gap: 8px; }
        
        @media (min-width: 1024px) {
            .nav-end-wrapper { gap: 15px; }
        }

        .profile-btn-custom {
            display: flex; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; 
            border-radius: 50px; padding: 4px 8px; cursor: pointer; transition: 0.3s;
        }

        /* Beta Tag Style */
        .beta-badge {
            font-size: 9px; background: #3b82f6; color: white; padding: 1px 5px; 
            border-radius: 4px; margin-left: 4px; text-transform: uppercase;
        }

        [x-cloak] { display: none !important; }

        @media (max-width: 768px) {
            .hide-on-mobile { display: none !important; }
        }

        /* ══════════════════════════════════════════════
        SCROLL REVEAL
        ══════════════════════════════════════════════ */
        .rv{opacity:0;transform:translateY(28px);transition:opacity .65s var(--out),transform .65s var(--out)}
        .rv.show{opacity:1;transform:translateY(0)}
        .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}