:root{ --bg:#020617; }
    html{ scroll-behavior:smooth; }
    body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: var(--bg); }

    /* Dynamic premium background */
    .bg-wrap{ position:relative; overflow:hidden; min-height:100vh; }
    .bg-wrap:before{
      content:""; position:absolute; inset:-45%;
      background:
        radial-gradient(900px 520px at 10% 15%, rgba(16,185,129,.26), transparent 62%),
        radial-gradient(900px 520px at 85% 20%, rgba(99,102,241,.28), transparent 62%),
        radial-gradient(900px 520px at 60% 90%, rgba(236,72,153,.18), transparent 62%),
        radial-gradient(760px 460px at 30% 75%, rgba(56,189,248,.14), transparent 64%),
        radial-gradient(800px 420px at 70% 60%, rgba(168,85,247,.14), transparent 65%),
        linear-gradient(180deg, #020617, #020617);
      filter: saturate(1.12);
      animation: drift 18s ease-in-out infinite;
      transform: translate3d(0,0,0);
      will-change: transform;
      pointer-events:none;
      opacity:.98;
      z-index:0;
    }
    @keyframes drift{
      0%,100%{ transform: translate3d(-2%, -1%, 0) scale(1.02); }
      50%{ transform: translate3d(2%, 1.5%, 0) scale(1.05); }
    }
    .glass{ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

    .noise{ position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
      background-size:160px 160px; z-index:1;
    }
    #spotlight{ position:absolute; inset:-220px;
      background: radial-gradient(440px 440px at var(--x,50%) var(--y,40%), rgba(255,255,255,.09), transparent 60%);
      pointer-events:none; opacity:.65; transition: opacity .35s ease; z-index:2;
    }
    #grid{ position:absolute; inset:-40%;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 44px 44px;
      transform: rotate(-10deg);
      opacity:.12;
      mask-image: radial-gradient(closest-side at 50% 40%, rgba(0,0,0,1), rgba(0,0,0,0));
      animation: gridMove 14s linear infinite;
      pointer-events:none; z-index:1;
    }
    @keyframes gridMove{ 0%{ background-position:0 0, 0 0; } 100%{ background-position:220px 220px, 220px 220px; } }

    .orb{ position:absolute; width:780px; height:780px; border-radius:999px; filter: blur(60px); opacity:.16;
      background: conic-gradient(from 180deg, rgba(16,185,129,.95), rgba(99,102,241,.95), rgba(236,72,153,.85), rgba(16,185,129,.95));
      animation: floaty 12s ease-in-out infinite; pointer-events:none; z-index:0;
    }
    .orb2{ position:absolute; width:600px; height:600px; border-radius:999px; filter: blur(60px); opacity:.12;
      background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.9), transparent 60%),
                  radial-gradient(circle at 70% 70%, rgba(168,85,247,.85), transparent 60%);
      animation: floaty2 14s ease-in-out infinite; pointer-events:none; z-index:0;
    }
    @keyframes floaty{ 0%,100%{ transform: translate(-10%, -6%) scale(1); } 50%{ transform: translate(4%, 8%) scale(1.06); } }
    @keyframes floaty2{ 0%,100%{ transform: translate(10%, 4%) scale(1); } 50%{ transform: translate(-2%, -6%) scale(1.08); } }

    #particles{ position:absolute; inset:0; width:100%; height:100%; z-index:2; opacity:.55; pointer-events:none; }

    .reveal{ opacity:0; transform: translateY(14px) scale(.99);
      transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);
      will-change: opacity, transform;
    }
    .reveal.show{ opacity:1; transform: translateY(0) scale(1); }

    .card{ position:relative; border-radius:26px; background: rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 65px rgba(0,0,0,.40);
      transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s cubic-bezier(.2,.8,.2,1), border-color .25s cubic-bezier(.2,.8,.2,1);
      will-change: transform; overflow:hidden;
    }
    .card:before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
      background: linear-gradient(135deg, rgba(16,185,129,0), rgba(99,102,241,.18), rgba(236,72,153,.12), rgba(16,185,129,0));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.85;
    }
    .card:hover{ transform: translateY(-3px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
    .card.tilt{ transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px); }

    .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
      border-radius:14px; padding:12px 16px; font-weight:800;
      transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s cubic-bezier(.2,.8,.2,1), background-color .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1);
      user-select:none; -webkit-tap-highlight-color: transparent; overflow:hidden;
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn:active{ transform: translateY(0px) scale(.99); }
    .btn:focus{ outline:none; box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
    .btn-primary{ background:#fff; color:#0b1220; box-shadow: 0 14px 44px rgba(255,255,255,.10); }
    .btn-primary:after{ content:""; position:absolute; inset:-40%;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
      transform: translateX(-55%) rotate(12deg); opacity:0; transition: opacity .35s ease;
    }
    .btn-primary:hover:after{ opacity:.55; animation: shimmer 1.2s ease-in-out infinite; }
    @keyframes shimmer{ 0%{ transform: translateX(-55%) rotate(12deg); } 100%{ transform: translateX(55%) rotate(12deg); } }

    .btn-ghost{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
    .btn-ghost:hover{ background: rgba(255,255,255,.10); }

    .ripple{ position:absolute; border-radius:999px; transform: scale(0); background: rgba(255,255,255,.35);
      animation: ripple .6s cubic-bezier(.2,.8,.2,1); pointer-events:none; mix-blend-mode: overlay;
    }
    @keyframes ripple{ to{ transform: scale(5); opacity:0; } }

    .pill{ display:inline-flex; align-items:center; gap:.5rem; padding:8px 12px; border-radius:999px;
      border:1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.35); color: rgba(226,232,240,.85); font-size:13px;
      transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s cubic-bezier(.2,.8,.2,1);
    }
    .pill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }

    section{ scroll-margin-top: 90px; }

    #stickyCta{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:70; display:none; width:min(94vw, 680px); pointer-events:none; }
    #stickyCta .inner{ pointer-events:auto; border-radius:18px; border:1px solid rgba(255,255,255,.10);
      background: rgba(2,6,23,.55); box-shadow:0 18px 70px rgba(0,0,0,.45);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      padding:10px; display:flex; gap:10px; align-items:center; justify-content:space-between;
    }
    #stickyCta .price{ font-weight:800; letter-spacing:-0.02em; }
    @media (max-width: 900px){ #stickyCta{ display:block; } }

    #contactModal, #authModal, #taskModal{ display:none; }
    #contactModal.show, #authModal.show, #taskModal.show{ display:block; }

    .modal-card{ animation: pop .24s cubic-bezier(.2,.8,.2,1); }
    @keyframes pop{ from{ transform: translateY(14px) scale(.98); opacity:0; } to{ transform: translateY(0) scale(1); opacity:1; } }

    #appView{ display:none; }
    #appView.show{ display:block; }
    #siteView.hide{ display:none; }

    .step-dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.20);
      transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease; }
    .step-dot.active{ background: rgba(16,185,129,.55); transform: scale(1.2); }
    .progress{ height:8px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.10); }
    .progress > div{ height:100%; width:0%; background: linear-gradient(90deg, rgba(16,185,129,.95), rgba(99,102,241,.95)); border-radius:999px;
      transition: width .35s cubic-bezier(.2,.8,.2,1); }

    @media (prefers-reduced-motion: reduce){
      .bg-wrap:before, .orb, .orb2, #grid{ animation:none !important; }
      .card, .btn, .reveal{ transition:none !important; }
      .btn-primary:hover:after{ animation:none !important; }
    }