* { -webkit-tap-highlight-color: transparent; }
        html { scroll-behavior: smooth; }
        body {
            background: #FAFBFF;
            color: #1F2937;
            font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
        }
        ::selection { background:#C7D2FE; color:#1E1B4B; }

        /* ===== Scrollbar ===== */
        ::-webkit-scrollbar { width: 8px; height:8px; }
        ::-webkit-scrollbar-track { background: #F3F4F6; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#818CF8,#A78BFA); border-radius:99px; }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#6366F1,#8B5CF6); }

        /* ===== Aurora Mesh Background ===== */
        .aurora-bg {
            position: fixed; inset: 0; z-index: -2; pointer-events:none;
            background:
                radial-gradient(at 15% 10%, rgba(125,211,252,.45) 0, transparent 45%),
                radial-gradient(at 85% 15%, rgba(167,139,250,.40) 0, transparent 50%),
                radial-gradient(at 80% 85%, rgba(240,171,252,.35) 0, transparent 50%),
                radial-gradient(at 15% 90%, rgba(110,231,183,.30) 0, transparent 45%),
                linear-gradient(180deg,#FAFBFF 0%, #F0F4FF 100%);
            background-size: 200% 200%;
            animation: aurora 25s ease-in-out infinite;
        }
        .noise-overlay {
            position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35; mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
        }

        /* ===== Glass (luminoso) ===== */
        .glass {
            background: rgba(255,255,255,0.65);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.8);
            box-shadow: 0 8px 32px 0 rgba(31,38,135,0.08), inset 0 1px 0 rgba(255,255,255,.9);
        }
        .glass-soft {
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.9);
        }
        .glass-dark {
            background: rgba(17,24,39,0.75);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.1);
            color:#fff;
        }

        /* ===== Grid pattern ===== */
        .grid-dots {
            background-image: radial-gradient(rgba(99,102,241,0.15) 1px, transparent 1px);
            background-size: 28px 28px;
        }

        /* ===== Custom cursor (desktop) ===== */
        .cursor-dot, .cursor-ring {
            position: fixed; top:0; left:0; pointer-events:none; z-index:9999;
            transform: translate(-50%,-50%); transition: transform .15s ease-out;
        }
        .cursor-dot  { width:6px; height:6px;  background:#6366F1; border-radius:50%; }
        .cursor-ring { width:36px; height:36px; border:1.5px solid rgba(99,102,241,.4); border-radius:50%; transition: transform .3s, width .3s, height .3s, border-color .3s; }
        .cursor-ring.grow { width:60px; height:60px; border-color:#A78BFA; }
        @media (pointer: coarse) { .cursor-dot, .cursor-ring { display:none; } }

        /* ===== Magnetic button ===== */
        .magnetic { transition: transform .25s cubic-bezier(.2,.9,.3,1.2); }

        /* ===== Reveal anims ===== */
        [data-reveal] { opacity:0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.9,.3,1), transform .9s cubic-bezier(.2,.9,.3,1); transition-delay: var(--d,0s); }
        [data-reveal].visible { opacity:1; transform:none; }
        [data-reveal="left"]{transform:translateX(-40px)}
        [data-reveal="right"]{transform:translateX(40px)}
        [data-reveal="zoom"]{transform:scale(.92)}
        [data-reveal].visible{transform:none}

        /* ===== Shimmer text ===== */
        .shimmer-text {
            background: linear-gradient(90deg,#818CF8 0%, #A78BFA 25%, #F0ABFC 50%, #A78BFA 75%, #818CF8 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: shimmer 3.5s linear infinite;
        }

        /* ===== Text reveal (mask) ===== */
        .char { display:inline-block; opacity:0; transform:translateY(40%) rotate(6deg); transition: all .8s cubic-bezier(.2,.9,.3,1); transform-origin: bottom; }
        .char.in { opacity:1; transform:none; }

        /* ===== Skill bar (animated) ===== */
        .skill-bar { transition: width 1.8s cubic-bezier(.22,1,.36,1); }
        .skill-count { transition: all .2s ease-out; }

        /* ===== Card 3D tilt ===== */
        .tilt { transition: transform .35s cubic-bezier(.2,.9,.3,1); transform-style: preserve-3d; }

        /* ===== Dialer popup ===== */
        #dialerPopup {
            position: fixed; bottom: 100px; right: 24px; width: 340px; height: 520px; max-width: calc(100vw - 48px);
            z-index: 95; border-radius: 28px; overflow: hidden;
            transition: all .4s cubic-bezier(.16,1,.3,1);
            opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
            box-shadow: 0 30px 60px -15px rgba(99,102,241,.35);
            border:1px solid rgba(255,255,255,.6);
        }
        #dialerPopup.active { opacity:1; transform:none; pointer-events:auto; }

        /* ===== Marquee ===== */
        .marquee-mask { -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); overflow:hidden; }

        /* ===== Mobile drawer ===== */
        .drawer { transform: translateX(100%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
        .drawer.open { transform: translateX(0); }

        /* ===== Progress bar ===== */
        #progressBar {
            position: fixed; top:0; left:0; height:3px; width:0%; z-index:200;
            background: linear-gradient(90deg,#818CF8,#A78BFA,#F0ABFC);
            transition: width .1s linear;
            box-shadow: 0 0 10px rgba(129,140,248,.5);
        }

        /* ===== Preloader ===== */
        #preloader {
            position:fixed; inset:0; z-index:300; background:#FAFBFF;
            display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.5rem;
            transition: opacity .6s ease, visibility .6s ease;
        }
        #preloader.done { opacity:0; visibility:hidden; }
        .pre-orbit {
            width:80px; height:80px; position:relative;
        }
        .pre-orbit::before, .pre-orbit::after {
            content:''; position:absolute; inset:0; border-radius:50%;
            border: 2px solid transparent; border-top-color:#818CF8;
            animation: spin 1.2s linear infinite;
        }
        .pre-orbit::after { inset:8px; border-top-color:#F0ABFC; animation-duration:1.8s; animation-direction: reverse; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ===== FAQ ===== */
        .faq-item.open .faq-answer { max-height:400px; opacity:1; padding-top:1rem; }
        .faq-item.open .faq-icon { transform: rotate(45deg); color:#A78BFA; }
        .faq-answer { max-height:0; opacity:0; overflow:hidden; transition: all .4s ease; }
        .faq-icon { transition: all .3s; }

        /* ===== Ripple ===== */
        .ripple { position:relative; overflow:hidden; }
        .ripple-ink { position:absolute; border-radius:50%; background:rgba(255,255,255,.45); transform:scale(0); animation: ink .65s ease-out forwards; pointer-events:none; }
        @keyframes ink { to { transform:scale(4); opacity:0; } }

        /* ===== Gradient border ===== */
        .gradient-border {
            position: relative;
            background: linear-gradient(white, white) padding-box,
                        linear-gradient(135deg,#818CF8,#A78BFA,#F0ABFC,#7DD3FC) border-box;
            border: 2px solid transparent;
        }

        /* ===== Float shapes ===== */
        .shape { position:absolute; pointer-events:none; opacity:.6; }

        /* ===== Hero avatar ring ===== */
        .avatar-ring {
            background: conic-gradient(from 0deg, #818CF8, #A78BFA, #F0ABFC, #7DD3FC, #818CF8);
            padding: 4px; border-radius: 50%;
            animation: spin 8s linear infinite;
        }
        .avatar-ring > div { background: #FAFBFF; border-radius: 50%; padding: 6px; }

        /* ===== Pulse dot ===== */
        .live-dot { position:relative; }
        .live-dot::after {
            content:''; position:absolute; inset:0; border-radius:50%; background:currentColor;
            animation: pulseRing 2s cubic-bezier(.455,.03,.515,.955) infinite;
        }

        /* ===== Service card hover ===== */
        .service-card::before {
            content:''; position:absolute; inset:-1px; border-radius: inherit;
            background: linear-gradient(135deg,#818CF8,#A78BFA,#F0ABFC,#7DD3FC);
            opacity: 0; transition: opacity .4s; z-index:-1;
        }
        .service-card:hover::before { opacity:1; }

        /* ===== Counter ===== */
        .counter { font-variant-numeric: tabular-nums; }

        /* ===== Bottom nav ===== */
        .bnav-item.active .bnav-dot { opacity:1; transform:scale(1); }
        .bnav-dot { opacity:0; transform:scale(0); transition:all .3s; }
        .bnav-item.active { color:#6366F1; }

        /* ===== Modal detail ===== */
        .modal-backdrop { background: rgba(17,24,39,.6); backdrop-filter: blur(16px); }
        .modal-panel { animation: modalIn .5s cubic-bezier(.16,1,.3,1); }
        @keyframes modalIn { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:none; } }