/* ---------- BASE ---------- */
        body {
            font-family: 'Inter', sans-serif;
            background: #05060d;
            color: #e2e8f0;
            overflow-x: hidden;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                radial-gradient(700px circle at 12% 8%, rgba(0,87,255,.16), transparent 60%),
                radial-gradient(600px circle at 92% 45%, rgba(0,194,255,.09), transparent 60%),
                radial-gradient(500px circle at 20% 90%, rgba(168,85,247,.08), transparent 60%);
        }
        html { scroll-behavior: smooth; }
        section[id] { scroll-margin-top: 80px; }

        /* ---------- TEXT GRADIENT ---------- */
        .g {
            background: linear-gradient(135deg, #0057FF, #00C2FF);
            -webkit-background-clip: text;
            background-clip: text;
            color: #38bdf8;
            -webkit-text-fill-color: transparent;
        }

        /* ---------- BUTTONS ---------- */
        .btn {
            background: linear-gradient(135deg, #0057FF, #00C2FF);
            transition: .3s;
        }
        .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(0,87,255,.4);
        }

        /* ---------- CARD (with spotlight effect) ---------- */
        .card {
            background:
                radial-gradient(380px circle at var(--mx,50%) var(--my,-20%), rgba(0,194,255,.10), transparent 45%),
                rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 1.25rem;
            transition: transform .35s, border-color .35s, box-shadow .35s;
        }
        .card:hover {
            transform: translateY(-6px);
            border-color: rgba(0,194,255,.4);
            box-shadow: 0 20px 40px rgba(0,87,255,.18);
        }

        /* ---------- SECTION HEADERS ---------- */
        .kick { font-size: .8rem; font-weight: 600; color: #38bdf8; margin-bottom: 12px; }
        .h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.2; }
        .sub { color: #94a3b8; max-width: 640px; margin: 14px auto 0; line-height: 1.7; }

        /* ---------- ICON BOX ---------- */
        .ico {
            width: 52px; height: 52px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; color: #fff;
            background: linear-gradient(135deg, #0057FF, #00C2FF);
        }

        /* ---------- FILTER PILLS ---------- */
        .pill {
            padding: 10px 24px; border-radius: 999px;
            font-weight: 600; font-size: .85rem;
            background: rgba(255,255,255,.06); color: #94a3b8;
            transition: .3s;
        }
        .pill:hover { color: #fff; }
        .pill.active { background: linear-gradient(135deg, #0057FF, #00C2FF); color: #fff; }

        /* ---------- TAGS (Free/Paid) ---------- */
        .tag {
            font-size: .7rem; font-weight: 700;
            padding: 4px 12px; border-radius: 999px;
            background: rgba(0,87,255,.14);
            border: 1px solid rgba(0,87,255,.35);
            color: #60a5fa;
        }
        .tag.free { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.35); color: #34d399; }
        .tag.paid { background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.35);  color: #f87171; }

        /* ---------- INPUTS ---------- */
        .inp {
            width: 100%; padding: 12px 16px; border-radius: 12px;
            background: rgba(0,0,0,.4);
            border: 1px solid rgba(255,255,255,.1);
            color: #fff; outline: none; transition: .3s;
        }
        .inp:focus {
            border-color: #00C2FF;
            box-shadow: 0 0 0 3px rgba(0,194,255,.15);
        }
        .inp::placeholder { color: #64748b; }
        .inp option { background: #0b1020; }

        /* ---------- REVEAL ANIMATIONS ---------- */
        .js .rv {
            opacity: 0;
            transition: opacity .8s ease, transform .8s ease, filter .8s ease;
        }
        .js .rv { transform: translateY(40px); }
        .js .rv[data-a=l] { transform: translateX(-50px); }
        .js .rv[data-a=r] { transform: translateX(50px); }
        .js .rv[data-a=z] { transform: scale(.92); }
        .js .rv[data-a=b] { transform: none; filter: blur(10px); }
        .js .rv.in { opacity: 1; transform: none; filter: none; }
        .js .rv.in.card { transition: transform .35s, border-color .35s, box-shadow .35s; }

        /* ---------- PRELOADER ANIMATIONS ---------- */
        .pi {
            width: 50px; height: 50px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; color: #fff;
            background: linear-gradient(135deg, #0057FF, #00C2FF);
            opacity: 0; transform: scale(.4);
            animation: pop .5s forwards;
        }
        @keyframes pop { to { opacity: 1; transform: scale(1); } }
        .pb { height: 3px; width: 0; background: linear-gradient(90deg,#0057FF,#00C2FF); animation: fill 3s linear forwards; }
        @keyframes fill { to { width: 100%; } }

        /* ---------- TOOL TICKER ---------- */
        .mq { display: flex; gap: 14px; width: max-content; animation: mq 35s linear infinite; }
        @keyframes mq { to { transform: translateX(-50%); } }

        /* ---------- HERO BROWSER MOCKUP ---------- */
        .cb {
            position: relative; border-radius: 1.1rem; overflow: hidden;
            background: rgba(6,10,20,.9);
            border: 1px solid rgba(0,87,255,.3);
            box-shadow: 0 40px 90px -30px rgba(0,87,255,.45);
        }
        .cb::before {
            content: ''; position: absolute;
            top: 0; left: 0; right: 0; height: 3px; z-index: 2;
            background: linear-gradient(90deg,#0057FF,#00C2FF,#a855f7,#0057FF);
            background-size: 300% 100%;
            animation: sh 6s linear infinite;
        }
        @keyframes sh { to { background-position: 300% 0; } }
        #stage {
            height: 340px; opacity: 0; transition: opacity .5s;
            background: linear-gradient(135deg, rgba(0,87,255,.2), rgba(168,85,247,.14));
        }
        #stage.on { opacity: 1; }
        .bt {
            padding: 8px 18px; border-radius: 999px;
            font-size: .75rem; font-weight: 700; color: #fff;
            background: linear-gradient(135deg,#0057FF,#00C2FF);
        }
        .bt2 {
            padding: 8px 18px; border-radius: 999px;
            font-size: .75rem; font-weight: 600; color: #fff;
            border: 1px solid rgba(0,194,255,.5);
        }

        /* ---------- SKILL BARS ---------- */
        .sk {
            height: 6px; border-radius: 9px; width: 0;
            background: linear-gradient(90deg,#0057FF,#00C2FF);
            transition: width 1.5s ease;
        }

        /* ---------- FAQ ACCORDION ---------- */
        details.fq summary { list-style: none; cursor: pointer; }
        details.fq summary::-webkit-details-marker { display: none; }
        details.fq[open] { border-color: rgba(0,194,255,.4); }
        details.fq[open] i { transform: rotate(45deg); }

        /* ---------- GLOW EFFECT (spinning border) ---------- */
        @property --a {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }
        .glow::before {
            content: ''; position: absolute; inset: -1px;
            border-radius: inherit; padding: 1.5px;
            background: conic-gradient(from var(--a), #0057FF, #00C2FF, #a855f7, #0057FF);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: gspin 5s linear infinite;
            pointer-events: none;
        }
        .glow::after {
            content: ''; position: absolute; inset: 0;
            border-radius: inherit; pointer-events: none;
            box-shadow: 0 0 50px rgba(0,87,255,.22);
            animation: gp 4s ease-in-out infinite;
        }
        @keyframes gspin { to { --a: 360deg; } }
        @keyframes gp { 50% { box-shadow: 0 0 80px rgba(0,194,255,.32); } }

        /* ---------- REVIEW CARD ENTRY ANIM ---------- */
        .rnew { animation: rin .9s cubic-bezier(.2,.9,.3,1.15), rg 2.8s ease-out; }
        @keyframes rin { from { opacity: 0; transform: translateY(-34px) scale(.92); } }
        @keyframes rg {
            0%, 40% { box-shadow: 0 0 0 2px rgba(0,194,255,.7), 0 0 40px rgba(0,194,255,.4); }
            100%    { box-shadow: none; }
        }

        /* ---------- TOAST NOTIFICATION ---------- */
        #toast {
            position: fixed; right: 20px; bottom: 24px; z-index: 90;
            transform: translateY(120px); opacity: 0;
            transition: .5s cubic-bezier(.2,.9,.3,1.2);
            pointer-events: none;
        }
        #toast.show { transform: none; opacity: 1; }
        .ck-c, .ck-p { stroke-dasharray: 160; stroke-dashoffset: 160; }
        .show .ck-c { animation: dash .6s forwards; }
        .show .ck-p { animation: dash .4s .5s forwards; }
        @keyframes dash { to { stroke-dashoffset: 0; } }

        /* ---------- CONFETTI SPARKLES ---------- */
        .sp {
            position: fixed; width: 6px; height: 6px; border-radius: 50%;
            pointer-events: none; z-index: 95;
            animation: spk .8s ease-out forwards;
        }
        @keyframes spk { to { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; } }

        /* ---------- TYPEWRITER CARET ---------- */
        .pcaret {
            display: inline-block; width: 3px; height: 1em;
            background: #00C2FF; margin-left: 4px;
            vertical-align: -.1em;
            animation: cb .8s step-end infinite;
        }
        @keyframes cb { 50% { opacity: 0; } }

        /* ---------- ACCESSIBILITY ---------- */
        :focus-visible { outline: 2px solid #00C2FF; outline-offset: 2px; }
        html { -webkit-tap-highlight-color: transparent; }

        /* ---------- PRELOADER LAYOUT ---------- */
        #pre { transition: opacity .8s, transform .8s, filter .8s !important; }
        #pre.opacity-0 { transform: scale(1.06); filter: blur(10px); }
        .pre-bg { position: absolute; inset: 0; overflow: hidden; }
        .pre-bg i {
            position: absolute; border-radius: 50%;
            filter: blur(90px); opacity: .45;
            animation: pf 8s ease-in-out infinite alternate;
        }
        @keyframes pf { to { transform: translate(60px,-40px) scale(1.25); } }
        .pre-ring {
            position: absolute; inset: 11.5%; border-radius: 50%; padding: 2px;
            background: conic-gradient(from var(--a), transparent 0, #0057FF, #00C2FF, #a855f7, transparent 75%);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: gspin 2.4s linear infinite;
        }
        .pre-orbit { position: absolute; inset: 0; animation: orb 16s linear infinite; }
        @keyframes orb { to { transform: rotate(360deg); } }
        .pre-ico {
            position: absolute; left: 50%; top: 50%;
            width: 44px; height: 44px;
            margin: -22px 0 0 -22px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #fff;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(0,194,255,.35);
            backdrop-filter: blur(8px);
            box-shadow: 0 0 20px rgba(0,87,255,.35);
            transform:
                rotate(calc(360deg/var(--n)*var(--i)))
                translateY(calc(var(--r)*-1))
                rotate(calc(-360deg/var(--n)*var(--i)));
            opacity: 0;
            animation: pfi .6s forwards;
            animation-delay: calc(.3s + var(--i)*.12s);
        }
        .pre-ico i { animation: orb 16s linear infinite reverse; }
        @keyframes pfi { to { opacity: 1; } }
        .pre-core {
            position: absolute; inset: 30.5%; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 2.4rem; font-weight: 900; color: #fff;
            background: radial-gradient(circle at 30% 25%, #00C2FF, #0057FF 60%, #1e1b4b);
            box-shadow: 0 0 60px rgba(0,194,255,.55), inset 0 0 20px rgba(255,255,255,.25);
            animation: cp 2s ease-in-out infinite;
        }
        @keyframes cp {
            50% {
                transform: scale(1.07);
                box-shadow: 0 0 90px rgba(0,194,255,.75), inset 0 0 20px rgba(255,255,255,.25);
            }
        }
        #pre { --r: 116px; }
        @media (max-width: 480px) { #pre { --r: 98px; } }

        /* ---------- CHAT BUBBLES ---------- */
        .bub:empty { display: none; }

        /* ---------- REDUCED MOTION ---------- */
        @media (prefers-reduced-motion: reduce) {
            .js .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
            .mq { animation: none; }
        }
    

            #pre { display: none !important; }
            .rv { opacity: 1 !important; }
        
.rv{opacity:1!important;transform:none!important}.nx-article{max-width:1000px;margin:0 auto;padding:32px 24px 80px;color:#94a3b8;line-height:1.9}.nx-article h2{color:white;font-size:24px;margin:30px 0 14px}.nx-article p{margin:0 0 22px}.nx-article a{color:#38bdf8}.sk{width:var(--skill,90%)}