:root {
      --bg0: #E7F1FF;
      --bg1: #F6FAFF;
      --ink: #071022;
      --muted: #4B5563;
      --card: #FFFFFF;
      --stroke: rgba(15, 23, 42, .10);
      --accent: #1E64FF;
      --accent2: #00A8D9;
      --glow: rgba(30, 100, 255, .22);
      --good: #059669;
      --warn: #D97706;
      --bad: #DC2626;
      --icon-opacity: 1;
      --gradient-text-from: #0052CC;
      --gradient-text-to: #0077B6;
      color-scheme: light;
    }

    html.dark {
      --bg0: #050B1A;
      --bg1: #071330;
      --ink: #EAF2FF;
      --muted: #A9B4CC;
      --card: rgba(255, 255, 255, .06);
      --stroke: rgba(255, 255, 255, .10);
      --accent: #3B82F6;
      --accent2: #22D3EE;
      --glow: rgba(34, 211, 238, .20);
      --good: #34D399;
      --warn: #FBBF24;
      --bad: #F87171;
      --icon-opacity: 0.95;
      --gradient-text-from: #60A5FA;
      --gradient-text-to: #22D3EE;
      color-scheme: dark;
    }

    body {
      font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    .font-display {
      font-family: Montserrat, Poppins, system-ui, sans-serif;
    }

    /* Enhanced icons - MUCH MORE VISIBLE */
    svg {
      stroke-width: 2.5;
    }

    /* Icons in containers get extra visibility */
    [class*="rounded-2xl"] svg,
    [class*="grid place-items-center"] svg {
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    }

    html.dark [class*="rounded-2xl"] svg,
    html.dark [class*="grid place-items-center"] svg {
      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    }

    /* Gradient text that works in both light and dark modes */
    .gradient-text {
      background: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-to));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Icon container enhancements for better visibility */
    [class*="grid place-items-center"] svg,
    [class*="rounded-2xl"]>svg {
      opacity: var(--icon-opacity);
    }

    /* Stronger icon backgrounds in light mode */
    .icon-enhanced {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    html.dark .icon-enhanced {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Make icon container backgrounds more visible in light mode */
    [class*="bg-emerald-500"],
    [class*="bg-indigo-500"],
    [class*="bg-sky-500"],
    [class*="bg-amber-500"],
    [class*="bg-fuchsia-500"],
    [class*="bg-cyan-500"],
    [class*="bg-rose-500"] {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Cross-device hardening */
    html {
      scrollbar-gutter: stable;
    }

    html,
    body {
      overflow-x: hidden;
    }

    @supports (overflow: clip) {

      html,
      body {
        overflow-x: clip;
      }
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      background: color-mix(in srgb, var(--bg1), transparent 35%);
    }

    ::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--accent), #000 28%);
      border-radius: 999px;
    }

    html.dark ::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--accent2), #000 45%);
    }

    /* Hero background */
    .hero-bg {
      background:
        radial-gradient(1200px 650px at 20% 12%, rgba(30, 100, 255, .20), transparent 56%),
        radial-gradient(900px 520px at 80% 15%, rgba(0, 194, 255, .16), transparent 56%),
        radial-gradient(900px 720px at 50% 86%, rgba(99, 102, 241, .13), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
    }

    /* Section cinematic divider */
    .section-divider {
      position: relative;
    }

    .section-divider::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent), transparent 25%), color-mix(in srgb, var(--accent2), transparent 25%), transparent);
      opacity: .55;
    }

    /* ambient blobs */
    .blob {
      filter: blur(30px);
      opacity: .55;
      transform: translateZ(0);
      will-change: transform;
      border-radius: 999px;
    }

    @keyframes blobFloat {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(20px, -14px, 0) scale(1.06);
      }

      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes blobFloat2 {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(-16px, 18px, 0) scale(1.08);
      }

      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    /* Sparkles */
    .sparkle {
      position: absolute;
      border-radius: 999px;
      opacity: .75;
      background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .85), rgba(255, 255, 255, .0));
    }

    @keyframes sparkleDrift {
      0% {
        transform: translate3d(-25vw, 6vh, 0) rotate(20deg);
        opacity: .0;
      }

      15% {
        opacity: .65;
      }

      70% {
        opacity: .35;
      }

      100% {
        transform: translate3d(120vw, -10vh, 0) rotate(20deg);
        opacity: .0;
      }
    }

    /* Title glint */
    .glint {
      position: relative;
      isolation: isolate;
    }

    .glint::after {
      content: "";
      position: absolute;
      inset: -22% -30%;
      background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 47%, transparent 60%);
      transform: translateX(-70%);
      mix-blend-mode: overlay;
      pointer-events: none;
      animation: glintMove 7s ease-in-out infinite;
    }

    @keyframes glintMove {

      0%,
      50% {
        transform: translateX(-70%);
        opacity: 0;
      }

      58% {
        opacity: .85;
      }

      76% {
        transform: translateX(60%);
        opacity: .0;
      }

      100% {
        transform: translateX(60%);
        opacity: 0;
      }
    }

    /* Typewriter highlight */
    .type-highlight {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      padding: .7rem 1.0rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--card), transparent 0%);
      border: 1px solid var(--stroke);
      box-shadow: 0 18px 45px rgba(30, 100, 255, .12);
      overflow: hidden;
      max-width: 100%;
    }

    .type-highlight::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .20;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, .12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .10) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(140px 80px at 18% 55%, #000 35%, transparent 72%);
      pointer-events: none;
    }

    .type-highlight::after {
      content: "";
      position: absolute;
      inset: -30% -60%;
      background: linear-gradient(110deg, transparent 42%, rgba(0, 194, 255, .22) 50%, transparent 58%);
      transform: translateX(-70%);
      opacity: .0;
      mix-blend-mode: overlay;
      pointer-events: none;
      animation: typeSheen 6.6s ease-in-out infinite;
    }

    @keyframes typeSheen {

      0%,
      56% {
        transform: translateX(-70%);
        opacity: 0;
      }

      64% {
        opacity: .85;
      }

      82% {
        transform: translateX(70%);
        opacity: 0;
      }

      100% {
        transform: translateX(70%);
        opacity: 0;
      }
    }

    .tw-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: min(76vw, 56ch);
    }

    .tw-cursor {
      width: .6ch;
      height: 1.15em;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--accent2), var(--accent));
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent2), transparent 88%);
      animation: cursorPulse 1.05s ease-in-out infinite;
      flex: 0 0 auto;
    }

    @keyframes cursorPulse {

      0%,
      100% {
        opacity: .38;
        transform: translateY(0);
      }

      50% {
        opacity: 1;
        transform: translateY(-1px);
      }
    }

    /* Canvas */
    #particles {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .75s ease, transform .75s ease;
    }

    .reveal.is-in {
      opacity: 1;
      transform: translateY(0);
    }

    /* Force visible on mobile to prevent bugs */
    @media (max-width: 768px) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* Marquee */
    .marquee {
      animation: marquee 24s linear infinite;
    }

    .marquee:hover {
      animation-play-state: paused;
    }

    @keyframes marquee {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    /* Fade edges for ticker */
    .fade-edges {
      position: relative;
    }

    .fade-edges::before,
    .fade-edges::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 42px;
      pointer-events: none;
      z-index: 2;
    }

    .fade-edges::before {
      left: 0;
      background: linear-gradient(90deg, color-mix(in srgb, var(--card), transparent 0%), transparent);
    }

    .fade-edges::after {
      right: 0;
      background: linear-gradient(-90deg, color-mix(in srgb, var(--card), transparent 0%), transparent);
    }

    /* Glass fallback */
    .header-glass {
      background: rgba(231, 241, 255, .72);
    }

    html.dark .header-glass {
      background: rgba(5, 11, 26, .72);
    }

    /* Safe-area for floating buttons (iOS) */
    #waFloat {
      bottom: calc(1.25rem + env(safe-area-inset-bottom));
      left: calc(1.25rem + env(safe-area-inset-left));
    }

    #backToTop {
      bottom: calc(1.25rem + env(safe-area-inset-bottom));
      right: calc(1.25rem + env(safe-area-inset-right));
    }

    /* Modal */
    .modal-hidden {
      display: none;
    }

    .modal-backdrop {
      background: rgba(2, 6, 23, .58);
    }

    .modal-card {
      background: color-mix(in srgb, var(--card), transparent 0%);
      border: 1px solid var(--stroke);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    }

    /* Modal form controls (fix dark-mode readability across iOS/Android/desktop) */
    #modal input,
    #modal textarea,
    #modal select {
      color: var(--ink);
      background: color-mix(in srgb, var(--bg1), transparent 35%);
      -webkit-text-fill-color: var(--ink);
    }

    #modal ::placeholder {
      color: color-mix(in srgb, var(--muted), transparent 8%);
      opacity: .9;
    }

    #modal select option {
      background: var(--bg1);
      color: var(--ink);
    }

    html.dark #modal select option {
      background: color-mix(in srgb, var(--bg1), #000 0%);
      color: var(--ink);
    }

    /* Stable scroll lock */
    body.scroll-locked {
      position: fixed;
      width: 100%;
    }

    /* Modal height fallback */
    #modalBody {
      max-height: 74vh;
      max-height: 74svh;
    }

    /* Phone mock */
    .phone-shell {
      border-radius: 2.25rem;
    }

    .phone-notch {
      width: 42%;
      height: 18px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .35);
    }

    html.dark .phone-notch {
      background: rgba(255, 255, 255, .14);
    }

    .sparkline {
      background: linear-gradient(90deg, rgba(30, 100, 255, .0), rgba(30, 100, 255, .25), rgba(0, 194, 255, .35), rgba(30, 100, 255, .25), rgba(30, 100, 255, .0));
    }

    /* Carousel */
    .carousel {
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .carousel::-webkit-scrollbar {
      display: none;
    }

    .snap {
      scroll-snap-align: start;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .blob {
        animation: none !important;
      }

      .glint::after {
        animation: none !important;
        opacity: 0 !important;
      }

      .sparkle {
        animation: none !important;
        opacity: 0 !important;
      }

      .reveal {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }

      .marquee {
        animation: none !important;
        transform: none !important;
      }

      .tw-cursor {
        animation: none !important;
      }
    }