:root {
      color-scheme: dark;
      --orange: #FF7622;
      --purple: #52006A;
      --line: rgba(255,255,255,.11);
    }

    * { box-sizing: border-box; }

    body {
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 50% -12%, rgba(255,118,34,.16), transparent 34rem),
        radial-gradient(circle at 10% 18%, rgba(82,0,106,.30), transparent 34rem),
        radial-gradient(circle at 90% 8%, rgba(255,118,34,.08), transparent 28rem),
        #050505;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: .14;
      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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
    }

    .site-shell { position: relative; z-index: 2; }

    .glass {
      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
      border: 1px solid var(--line);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 80px rgba(0,0,0,.28);
      backdrop-filter: blur(22px);
    }

    .dark-glass {
      background: linear-gradient(180deg, rgba(18,18,22,.88), rgba(10,10,12,.78));
      border: 1px solid var(--line);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 100px rgba(0,0,0,.40);
      backdrop-filter: blur(24px);
    }

    .gradient-text {
      background: linear-gradient(90deg, #ffffff 0%, #ECE5FF 32%, #FFB574 78%, #FF7622 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .premium-gradient {
      background:
        radial-gradient(circle at 22% 12%, rgba(139,59,255,.34), transparent 18rem),
        radial-gradient(circle at 78% 20%, rgba(255,118,34,.24), transparent 20rem),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    }

    .orb {
      background:
        radial-gradient(circle at 50% 42%, rgba(255,118,34,.10), transparent 24rem),
        radial-gradient(circle at 48% 50%, rgba(82,0,106,.16), transparent 21rem),
        #111113;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(255,255,255,.05),
        0 60px 160px rgba(0,0,0,.58),
        0 0 120px rgba(255,118,34,.12);
    }

    .phone-frame {
      width: min(82vw, 370px);
      aspect-ratio: 9 / 18.6;
      border-radius: 42px;
      padding: 11px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 16%, rgba(0,0,0,.88) 54%),
        linear-gradient(145deg, #2f3138, #08080a);
      box-shadow: 0 50px 160px rgba(0,0,0,.60), 0 0 100px rgba(255,118,34,.16);
      transform-style: preserve-3d;
    }

    .phone-screen {
      height: 100%;
      border-radius: 34px;
      overflow: hidden;
      position: relative;
      background:
        radial-gradient(circle at 80% 0%, rgba(255,118,34,.22), transparent 16rem),
        radial-gradient(circle at 10% 5%, rgba(139,59,255,.24), transparent 14rem),
        linear-gradient(180deg, #15151A, #070708);
      border: 1px solid rgba(255,255,255,.08);
    }

    .phone-notch {
      width: 102px;
      height: 26px;
      background: #050505;
      border-radius: 0 0 18px 18px;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      z-index: 5;
    }

    .screen-card {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    }

    .marquee-track {
      width: max-content;
      animation: marquee 28s linear infinite;
    }

    @keyframes marquee {
      to { transform: translateX(-50%); }
    }

    .floating-logo { animation: float 7s ease-in-out infinite; }
    .floating-phone { animation: phoneFloat 8s ease-in-out infinite; }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(-1.5deg); }
      50% { transform: translateY(-18px) rotate(1deg); }
    }

    @keyframes phoneFloat {
      0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(-4deg); }
      50% { transform: translateY(-20px) rotateX(2deg) rotateY(4deg); }
    }

    .scroll-line {
      background: linear-gradient(180deg, rgba(255,118,34,0), rgba(255,118,34,.8), rgba(82,0,106,0));
    }

    .reveal, .reveal-up, .reveal-left, .reveal-right, .scale-reveal, .stagger-card, .faq-item {
      will-change: transform, opacity;
    }

    .showcase {
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 26%, rgba(82,0,106,.28), transparent 30rem),
        radial-gradient(circle at 86% 18%, rgba(255,118,34,.13), transparent 28rem);
    }

    .showcase-copy h2 {
      font-size: clamp(2.45rem, 7vw, 4.9rem);
      line-height: .98;
    }

    .showcase-copy p:last-child {
      max-width: 46rem;
      font-size: clamp(1rem, 1.7vw, 1.125rem);
      line-height: 1.75;
    }

    .showcase-grid {
      align-items: start;
      gap: clamp(1.5rem, 4vw, 4.25rem);
    }

    .showcase-phone-panel {
      position: relative;
    }

    .showcase-phone-panel::before {
      content: "";
      position: absolute;
      inset: 8% 0 auto 50%;
      width: min(24rem, 70vw);
      height: min(24rem, 70vw);
      transform: translateX(-50%);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255,118,34,.18), rgba(82,0,106,.14), transparent 67%);
      filter: blur(24px);
      pointer-events: none;
    }

    .showcase-phone {
      position: relative;
      z-index: 1;
    }

    .showcase-phone-frame {
      width: min(82vw, 345px);
      box-shadow: 0 38px 120px rgba(0,0,0,.58), 0 0 90px rgba(255,118,34,.12);
    }

    .showcase-list {
      display: grid;
      gap: 1rem;
    }

    .showcase-step {
      min-height: 13.5rem;
      transition: border-color .28s ease, background .28s ease, transform .28s ease, box-shadow .28s ease;
    }

    .showcase-step:hover,
    .showcase-step:focus-within,
    .showcase-step.is-active {
      border-color: rgba(255,118,34,.58);
      background: linear-gradient(180deg, rgba(255,118,34,.14), rgba(255,255,255,.055));
      box-shadow: 0 24px 90px rgba(255,118,34,.09);
      transform: translateY(-3px);
    }

    .feature-count-pill {
      background: linear-gradient(135deg, rgba(255,118,34,.18), rgba(139,59,255,.12));
    }

    @media (min-width: 768px) and (max-width: 1023px) {
      .showcase-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .showcase-phone-panel {
        position: sticky;
        top: 7.25rem;
      }

      .showcase-phone-frame {
        width: min(31vw, 365px);
      }

      .showcase-list {
        gap: 1.1rem;
      }
    }

    @media (max-width: 640px) {
      .showcase-copy h2 {
        font-size: clamp(2.5rem, 12vw, 3.65rem);
      }

      .showcase-phone-frame {
        width: min(86vw, 315px);
      }

      .showcase-step {
        min-height: auto;
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .floating-logo, .floating-phone, .marquee-track { animation: none; }
    }