:root {
        color-scheme: dark;
        --brand-cyan: #35d4ea;
        --brand-purple: #ab54ec;
        --brand-mint: #46d69a;
        --brand-coral: #ff9966;
        --brand-violet: #b38bff;
        --brand-sky: #5ac8fa;
        --brand-amber: #ffc857;
        --brand-ink: #0b0d12;
        --brand-ink-deep: #06070a;
        --brand-surface: #0e1118;
        --brand-text: #eef2ff;
        --brand-muted: #9aa3bc;
        --brand-stroke: rgba(255, 255, 255, 0.1);
        --brand-glass: rgba(14, 18, 30, 0.55);
        --brand-glass-strong: rgba(18, 24, 40, 0.72);
        --brand-gradient: linear-gradient(120deg, #35d4ea 0%, #6ec6ea 35%, #ab54ec 100%);
        --brand-gradient-soft: radial-gradient(
            1200px 600px at 10% 10%,
            rgba(53, 212, 234, 0.35),
            rgba(10, 12, 20, 0)
          ),
          radial-gradient(1000px 560px at 85% 20%, rgba(171, 84, 236, 0.32), rgba(10, 12, 20, 0)),
          radial-gradient(800px 500px at 50% 95%, rgba(70, 214, 154, 0.12), rgba(10, 12, 20, 0));
        --font-display: "Space Grotesk", "Segoe UI", sans-serif;
        --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
        --section-space-y: clamp(80px, 10vh, 120px);
        --section-pad-y: var(--section-space-y);
        --section-pad-x: clamp(24px, 5vw, 48px);
        --content-max: 1240px;
        --radius-lg: 24px;
        --radius-md: 18px;
        --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
        --bp-wide: 900px;
        --bp-tablet: 720px;
        --bp-phone: 480px;
        --bp-xs: 360px;
        --page-gutter: max(0px, 100vw - 100%);
        --surface-header: rgba(6, 7, 10, 0.72);
        --surface-header-border: rgba(255, 255, 255, 0.06);
        --surface-control: rgba(12, 16, 28, 0.75);
        --surface-control-border: rgba(255, 255, 255, 0.12);
        --surface-control-hover: rgba(14, 18, 32, 0.9);
        --surface-control-hover-border: rgba(53, 212, 234, 0.35);
        --surface-drawer-backdrop: rgba(4, 6, 12, 0.72);
        --surface-drawer-panel: linear-gradient(165deg, rgba(10, 14, 26, 0.98) 0%, rgba(8, 10, 20, 0.98) 100%);
        --surface-drawer-panel-border: rgba(255, 255, 255, 0.08);
        --shadow-drawer: -24px 0 64px rgba(6, 7, 10, 0.55);
        --surface-card: rgba(12, 16, 28, 0.65);
        --surface-card-solid: rgba(12, 16, 28, 0.72);
        --surface-card-border: rgba(255, 255, 255, 0.08);
        --surface-card-border-subtle: rgba(255, 255, 255, 0.06);
        --shadow-card: 0 24px 64px rgba(6, 7, 10, 0.4);
        --shadow-elevated: 0 32px 80px rgba(6, 7, 10, 0.45);
        --surface-ghost-btn: rgba(14, 18, 30, 0.6);
        --surface-input: rgba(8, 12, 24, 0.65);
        --surface-input-border: rgba(255, 255, 255, 0.1);
        --surface-footer: rgba(6, 7, 10, 0.85);
        --surface-panel: rgba(12, 16, 28, 0.7);
        --surface-partner-brand: rgba(6, 8, 16, 0.55);
        --page-overlay: linear-gradient(180deg, rgba(6, 7, 10, 0.55) 0%, rgba(6, 7, 10, 0.25) 40%, rgba(6, 7, 10, 0.65) 100%);
        --products-shell-bg: linear-gradient(155deg, rgba(10, 14, 28, 0.92) 0%, rgba(18, 14, 36, 0.88) 50%, rgba(10, 12, 26, 0.92) 100%);
        --techstack-bg: linear-gradient(180deg, #0a0e18 0%, #0e1424 50%, #0c101c 100%);
        --partners-bg: linear-gradient(180deg, rgba(8, 12, 22, 0.55) 0%, #0c101c 72%, #0a0e18 100%);
        --services-intro-bg: linear-gradient(165deg, rgba(8, 12, 22, 0.98) 0%, rgba(10, 14, 28, 0.96) 50%, rgba(8, 10, 20, 0.98) 100%);
        --surface-services-shell: linear-gradient(165deg, rgba(10, 14, 28, 0.88) 0%, rgba(14, 12, 32, 0.82) 45%, rgba(8, 10, 22, 0.9) 100%);
        --page-bg-photo: url("/background.png");
      }

      html {
        overflow-x: clip;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        font-family: var(--font-body);
        background: var(--brand-ink-deep);
        color: var(--brand-text);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      .ambient {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }

      .ambient__orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.55;
      }

      .ambient__orb--cyan {
        width: min(560px, 70vw);
        height: min(560px, 70vw);
        top: -8%;
        left: -6%;
        background: radial-gradient(circle, rgba(53, 212, 234, 0.35) 0%, transparent 70%);
      }

      .ambient__orb--purple {
        width: min(480px, 60vw);
        height: min(480px, 60vw);
        top: 32%;
        right: -8%;
        background: radial-gradient(circle, rgba(171, 84, 236, 0.28) 0%, transparent 70%);
      }

      .ambient__orb--mid {
        width: min(400px, 50vw);
        height: min(400px, 50vw);
        bottom: 8%;
        left: 28%;
        background: radial-gradient(circle, rgba(53, 212, 234, 0.15) 0%, transparent 70%);
      }

      .ambient__orb--mint {
        width: min(320px, 42vw);
        height: min(320px, 42vw);
        top: 58%;
        right: 12%;
        background: radial-gradient(circle, rgba(70, 214, 154, 0.18) 0%, transparent 70%);
        opacity: 0.4;
      }

      .ambient__grid {
        position: absolute;
        inset: 0;
        background: url("/assets/grid-pattern.svg") center / 800px repeat;
        opacity: 0.45;
        mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
      }

      .section-divider {
        position: relative;
        z-index: 1;
        max-width: var(--content-max);
        margin: 0 auto;
        padding: var(--section-space-y) var(--section-pad-x);
        opacity: 0.7;
      }

      .section-divider img {
        width: 100%;
        height: auto;
        display: block;
      }

      .section-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand-cyan);
        margin-bottom: 20px;
      }

      .section-eyebrow::before {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--brand-gradient);
      }

      .section-eyebrow--mint {
        color: var(--brand-mint);
      }

      .section-eyebrow--mint::before {
        background: linear-gradient(90deg, var(--brand-mint), rgba(70, 214, 154, 0.2));
      }

      .section-eyebrow--violet {
        color: var(--brand-violet);
      }

      .section-eyebrow--violet::before {
        background: linear-gradient(90deg, var(--brand-violet), rgba(179, 139, 255, 0.2));
      }

      .section-eyebrow--coral {
        color: var(--brand-coral);
      }

      .section-eyebrow--coral::before {
        background: linear-gradient(90deg, var(--brand-coral), rgba(255, 153, 102, 0.2));
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 200;
        backdrop-filter: blur(20px) saturate(1.2);
        background: var(--surface-header);
        border-bottom: 1px solid var(--surface-header-border);
        transition: padding 0.3s var(--ease-out), background 0.3s var(--ease-out);
        padding-top: env(safe-area-inset-top, 0px);
      }

      .nav {
        max-width: var(--content-max);
        margin: 0 auto;
        padding: 24px var(--section-pad-x);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        transition: padding 0.3s var(--ease-out);
      }

      .nav__logo {
        display: inline-flex;
        align-items: center;
        gap: 12px;
      }

      .nav__logo img {
        height: 36px;
        width: auto;
      }

      .nav__links {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .nav__links a {
        color: var(--brand-muted);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.92rem;
        transition: color 0.2s ease;
      }

      .nav__links a:hover {
        color: var(--brand-text);
      }

      .nav__cta {
        padding: 10px 18px;
        border-radius: 999px;
        background: var(--brand-gradient);
        color: #0b0d12;
        font-weight: 600;
        text-decoration: none;
      }

      .nav__actions {
        display: inline-flex;
        align-items: center;
        gap: 12px;
      }

      .nav__toggle {
        display: none;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--surface-control-border);
        border-radius: 12px;
        background: var(--surface-control);
        color: var(--brand-text);
        cursor: pointer;
        flex-shrink: 0;
        transition: border-color 0.2s ease, background 0.2s ease;
      }

      .nav__toggle:hover {
        border-color: var(--surface-control-hover-border);
        background: var(--surface-control-hover);
      }

      .nav__toggle .material-symbols-rounded {
        font-size: 24px;
        line-height: 1;
      }

      .nav__drawer {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        pointer-events: none;
      }

      .nav__drawer.is-open {
        display: block;
        pointer-events: auto;
      }

      .nav__drawer-backdrop {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--surface-drawer-backdrop);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 0.3s var(--ease-out);
      }

      .nav__drawer.is-open .nav__drawer-backdrop {
        opacity: 1;
      }

      .nav__drawer-panel {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: min(320px, 100%);
        height: 100%;
        padding:
          calc(16px + env(safe-area-inset-top, 0px))
          calc(20px + env(safe-area-inset-right, 0px))
          calc(24px + env(safe-area-inset-bottom, 0px))
          calc(20px + env(safe-area-inset-left, 0px));
        background: var(--surface-drawer-panel);
        border-left: 1px solid var(--surface-drawer-panel-border);
        box-shadow: var(--shadow-drawer);
        display: flex;
        flex-direction: column;
        gap: 28px;
        transform: translateX(100%);
        transition: transform 0.32s var(--ease-out);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .nav__drawer.is-open .nav__drawer-panel {
        transform: translateX(0);
      }

      .nav__drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .nav__drawer-title {
        font-family: var(--font-display);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand-muted);
      }

      .nav__drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--surface-control-border);
        border-radius: 12px;
        background: var(--surface-control);
        color: var(--brand-text);
        cursor: pointer;
      }

      .nav__drawer-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .nav__drawer-links a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 10px 14px;
        border-radius: 12px;
        color: var(--brand-text);
        text-decoration: none;
        font-weight: 500;
        font-size: 1rem;
        transition: background 0.2s ease, color 0.2s ease;
      }

      .nav__drawer-links a:hover {
        background: rgba(53, 212, 234, 0.1);
        color: var(--brand-cyan);
      }

      .nav__drawer-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: auto;
      }

      .nav__drawer-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 12px 18px;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
      }

      .nav__drawer-actions .nav__cta {
        background: var(--brand-gradient);
        color: #0b0d12;
      }

      body.nav-open {
        overflow: hidden;
      }

      body.nav-open .site-header {
        z-index: 1100;
      }

      .product-card__body > h3 {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 500;
        color: rgba(53, 212, 234, 0.9);
        margin-bottom: 14px;
        letter-spacing: 0.01em;
      }

      .products__snaprytr .product-card__body > h3 {
        color: rgba(255, 153, 102, 0.95);
      }

      .products__snap-projects .product-card__body > h3 {
        color: rgba(70, 214, 154, 0.95);
      }

      .products__slm .product-card__body > h3 {
        color: rgba(90, 200, 250, 0.95);
      }

      .products__taaweel .product-card__body > h3 {
        color: rgba(179, 139, 255, 0.95);
      }

      .products__homeschooling .product-card__body > h3 {
        color: rgba(53, 212, 234, 0.95);
      }

      .products__snaprytr a {
        background: rgba(255, 153, 102, 0.16);
        border-color: rgba(255, 153, 102, 0.42);
      }

      .products__snap-projects a {
        background: rgba(70, 214, 154, 0.14);
        border-color: rgba(70, 214, 154, 0.38);
      }

      .products__slm .product-card__soon {
        color: rgba(90, 200, 250, 0.9);
        border-color: rgba(90, 200, 250, 0.35);
        background: rgba(90, 200, 250, 0.1);
      }

      .products__taaweel .product-card__soon {
        color: rgba(179, 139, 255, 0.9);
        border-color: rgba(179, 139, 255, 0.35);
        background: rgba(179, 139, 255, 0.1);
      }

      .products__homeschooling a {
        background: rgba(53, 212, 234, 0.14);
        border-color: rgba(53, 212, 234, 0.38);
      }

      .site-header.is-shrunk .nav {
        padding: 12px var(--section-pad-x);
      }

      main.page {
        position: relative;
        z-index: 1;
      }

      .page {
        min-height: 100vh;
        position: relative;
        overflow-x: clip;
        overflow-y: visible;
        background: var(--brand-gradient-soft), var(--page-bg-photo) center/cover no-repeat scroll;
      }

      @media (min-width: 901px) {
        .page {
          background: var(--brand-gradient-soft), var(--page-bg-photo) center/cover no-repeat fixed;
        }
      }

      .page::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--page-overlay);
        z-index: 0;
      }

      .hero {
        position: relative;
        z-index: 1;
        max-width: var(--content-max);
        margin: 0 auto;
        padding: clamp(64px, 10vh, 100px) var(--section-pad-x) 0;
        display: grid;
        gap: clamp(48px, 8vw, 80px);
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        align-items: center;
      }

      .hero__badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        border-radius: 999px;
        background: rgba(53, 212, 234, 0.1);
        border: 1px solid rgba(53, 212, 234, 0.28);
        font-size: 0.88rem;
        color: var(--brand-text);
        font-weight: 500;
        margin-bottom: 32px;
        letter-spacing: 0.02em;
      }

      .hero__badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-mint);
        box-shadow: 0 0 12px rgba(70, 214, 154, 0.65);
        flex-shrink: 0;
      }

      .hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.6rem, 5vw, 4.2rem);
        line-height: 1.08;
        margin-bottom: 32px;
        letter-spacing: -0.02em;
        font-weight: 500;
      }

      .hero__title span {
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .hero__copy {
        color: var(--brand-muted);
        font-size: 1.12rem;
        max-width: 540px;
        margin-bottom: 40px;
        line-height: 1.75;
      }

      .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 15px 28px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
      }

      .btn--primary {
        background: var(--brand-gradient);
        color: #0b0d12;
        box-shadow: 0 20px 40px rgba(53, 212, 234, 0.22);
      }

      .btn--ghost {
        background: var(--surface-ghost-btn);
        color: var(--brand-text);
        border: 1px solid var(--brand-stroke);
        backdrop-filter: blur(18px);
      }

      .btn:hover {
        transform: translateY(-3px);
      }

      .hero__visual {
        display: grid;
        gap: 18px;
        grid-template-columns: 1fr;
        align-items: stretch;
        position: relative;
      }

      .hero__frame {
        position: relative;
        padding: 3px;
        border-radius: calc(var(--radius-lg) + 3px);
        background: var(--brand-gradient);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.06),
          0 40px 80px rgba(6, 7, 10, 0.7),
          0 0 120px rgba(53, 212, 234, 0.12);
      }

      .hero__frame::before {
        content: "";
        position: absolute;
        inset: -40px;
        background: url("/assets/hero-orb.svg") center / contain no-repeat;
        opacity: 0.5;
        z-index: -1;
        pointer-events: none;
      }

      .hero__panel {
        padding: 0;
        border-radius: var(--radius-lg);
        background: var(--brand-ink-deep);
        overflow: hidden;
        border: 0;
        backdrop-filter: none;
        box-shadow: none;
      }

      .hero__panel img {
        width: 100%;
        height: clamp(320px, 46vw, 520px);
        border-radius: 18px;
        object-fit: cover;
        box-shadow: 0 45px 90px rgba(6, 7, 10, 0.65);
      }

      .hero__panel video {
        width: 100%;
        height: clamp(340px, 46vw, 540px);
        border-radius: var(--radius-lg);
        object-fit: cover;
        display: block;
      }

      .section {
        position: relative;
        z-index: 1;
        max-width: var(--content-max);
        margin: 0 auto;
        padding: 0 var(--section-pad-x) var(--section-space-y);
      }

      .section:has(+ .section-divider) {
        padding-bottom: 0;
      }

      .products {
        position: relative;
        display: grid;
        gap: 40px;
        align-items: start;
      }

      @media (min-width: 901px) {
        .products {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          grid-template-rows: auto auto auto;
        }

        .products__intro-copy {
          grid-column: 1;
          grid-row: 1;
        }

        .products__snaprytr {
          grid-column: 2;
          grid-row: 1;
        }

        .products__snap-projects {
          grid-column: 1;
          grid-row: 2;
        }

        .products__slm {
          grid-column: 2;
          grid-row: 2;
        }

        .products__taaweel {
          grid-column: 1;
          grid-row: 3;
        }

        .products__homeschooling {
          grid-column: 2;
          grid-row: 3;
        }

        .products__snap-projects,
        .products__slm,
        .products__taaweel,
        .products__homeschooling {
          align-self: stretch;
          display: flex;
          flex-direction: column;
          min-height: 0;
        }

        .product-card {
          display: flex;
          flex-direction: column;
        }

        .products__snap-projects > .product-card__body > a {
          margin-top: auto;
        }

        .products__homeschooling > .product-card__body > a {
          margin-top: auto;
        }

        .products__slm .product-card__body .product-card__soon,
        .products__taaweel .product-card__body .product-card__soon {
          margin-top: auto;
        }
      }

      /* --bp-wide: 900px */
      @media (max-width: 900px) {
        .products {
          grid-template-columns: 1fr;
        }
      }

      .products::before {
        content: "";
        position: absolute;
        inset: -60px -24px;
        width: calc(100% + 48px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--products-shell-bg);
        border-radius: var(--radius-lg);
        z-index: -1;
        border: 1px solid var(--surface-card-border-subtle);
        box-shadow: var(--shadow-card);
      }

      .products::after {
        content: "";
        position: absolute;
        top: -20px;
        right: 5%;
        width: 280px;
        height: 280px;
        background: url("/assets/hero-orb.svg") center / contain no-repeat;
        opacity: 0.35;
        z-index: -1;
        pointer-events: none;
      }

      @media (max-width: 640px) {
        .products::before {
          width: 100%;
          inset: -24px -12px;
          left: 0;
          transform: none;
          border-radius: 24px;
        }
      }

      .products__heading {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 3.5vw, 3.2rem);
        margin-bottom: 28px;
        letter-spacing: -0.02em;
        font-weight: 500;
      }

      .products__copy {
        color: var(--brand-muted);
        font-size: 1.08rem;
        max-width: 540px;
        line-height: 1.75;
      }

      .products__copy + .products__copy {
        margin-top: 24px;
      }

      .product-card {
        padding: 0;
        border-radius: var(--radius-md);
        background: var(--surface-card);
        border: 1px solid var(--surface-card-border);
        backdrop-filter: blur(20px);
        box-shadow: var(--shadow-card);
        position: relative;
        overflow: hidden;
        transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
      }

      .product-card:hover {
        transform: translateY(-4px);
        border-color: rgba(53, 212, 234, 0.2);
      }

      .product-card__art {
        width: 100%;
        height: auto;
        display: block;
        border-bottom: 1px solid var(--surface-card-border-subtle);
      }

      .product-card__body {
        padding: 28px;
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .product-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
      }

      .product-card h3 {
        font-family: var(--font-display);
        font-size: 1.2rem;
        color: var(--brand-text);
        margin-bottom: 0;
      }

      .product-card p {
        color: var(--brand-muted);
        font-size: 0.98rem;
        margin-bottom: 24px;
        line-height: 1.7;
      }

      .product-card a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(171, 84, 236, 0.2);
        border: 1px solid rgba(171, 84, 236, 0.45);
        color: var(--brand-text);
        text-decoration: none;
        font-weight: 600;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .product-card a::after {
        content: "->";
        font-size: 1rem;
      }

      .product-card a:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(171, 84, 236, 0.35);
      }

      .product-card__glyph {
        font-size: 40px;
        color: rgba(53, 212, 234, 0.9);
        line-height: 1;
        user-select: none;
      }

      .product-card__soon {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: var(--brand-muted);
        font-weight: 600;
        font-size: 0.9rem;
      }

      .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        background: radial-gradient(
          140px 100px at 6% 94%,
          rgba(255, 255, 255, 0.22),
          rgba(255, 255, 255, 0)
        );
        pointer-events: none;
      }
      .services__cta {
        position: relative;
        z-index: 1;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        display: flex;
        align-items: stretch;
        overflow: hidden;
        margin-top: 0;
        border-top: none;
        background: linear-gradient(165deg, #0a0e18 0%, #0e1424 45%, #120e22 100%);
      }

      .services__cta::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(120px, 18vh, 220px);
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(10, 14, 24, 0.92) 0%, transparent 100%);
      }

      .services__cta-layout {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
      }

      .services__cta-visual {
        position: relative;
        min-height: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(6, 8, 16, 0.35);
        overflow: hidden;
      }

      .services__cta-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          90deg,
          rgba(10, 14, 24, 0.1) 0%,
          rgba(10, 14, 24, 0.35) 55%,
          rgba(10, 14, 24, 0.72) 100%
        );
        pointer-events: none;
      }

      .services__cta-visual img,
      .services__cta-visual svg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
      }

      .services__cta-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        gap: 24px;
        padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px);
        background:
          radial-gradient(
            ellipse 90% 70% at 0% 50%,
            rgba(53, 212, 234, 0.08) 0%,
            transparent 65%
          ),
          linear-gradient(160deg, rgba(8, 12, 24, 0.92) 0%, rgba(12, 16, 32, 0.88) 100%);
      }

      .services__cta-title {
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 4.5vw, 3.4rem);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.08;
        color: var(--brand-text);
        max-width: 12ch;
      }

      .services__cta-copy {
        color: var(--brand-muted);
        font-size: clamp(1rem, 1.5vw, 1.1rem);
        line-height: 1.75;
        max-width: 42ch;
      }

      .services__cta .btn--primary {
        margin-top: 8px;
        padding: 16px 32px;
        font-size: 1rem;
        box-shadow:
          0 0 0 1px rgba(53, 212, 234, 0.25),
          0 24px 48px rgba(53, 212, 234, 0.28);
      }

      /* --bp-wide: 900px */
      @media (max-width: 900px) {
        .services__cta-layout {
          grid-template-columns: 1fr;
          grid-template-rows: minmax(42vh, 46vh) 1fr;
        }

        .services__cta-visual {
          border-right: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .services__cta-visual::after {
          background: linear-gradient(
            180deg,
            rgba(10, 14, 24, 0.05) 0%,
            rgba(10, 14, 24, 0.55) 100%
          );
        }

        .services__cta-content {
          align-items: center;
          text-align: center;
          padding: clamp(36px, 6vw, 56px) var(--section-pad-x);
        }

        .services__cta-title,
        .services__cta-copy {
          max-width: none;
        }
      }
      .footer {
        position: relative;
        z-index: 1;
        padding:
          calc(var(--section-space-y) * 0.5)
          calc(var(--section-pad-x) + env(safe-area-inset-right, 0px))
          calc(var(--section-space-y) + env(safe-area-inset-bottom, 0px))
          calc(var(--section-pad-x) + env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--surface-card-border-subtle);
        background: var(--surface-footer);
        backdrop-filter: blur(12px);
      }

      .footer__inner {
        max-width: var(--content-max);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }

      .footer__logo {
        height: 32px;
        width: auto;
      }

      .footer__links {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
      }

      .footer__links a {
        color: var(--brand-muted);
        text-decoration: none;
        font-size: 0.9rem;
      }

      .product-logo {
        width: min(180px, 55%);
        height: 48px;
        display: block;
        object-fit: contain;
      }

      @media (max-width: 860px) {
        .hero {
          padding-top: 36px;
        }
      }

      /* --bp-tablet: 720px */
      @media (max-width: 720px) {
        .nav__links {
          display: none;
        }

        .nav__toggle {
          display: inline-flex;
          position: relative;
          z-index: 1;
        }

        .nav__actions .nav__cta {
          padding: 7px 11px;
          font-size: 0.78rem;
          line-height: 1.15;
          letter-spacing: -0.01em;
          white-space: nowrap;
        }

        .nav {
          gap: 10px;
        }
      }

      /* --bp-phone: 480px */
      @media (max-width: 480px) {
        .nav__actions .nav__cta {
          padding: 6px 9px;
          font-size: 0.72rem;
        }

        .hero {
          padding-top: 28px;
          padding-bottom: 0;
        }

        .hero__title {
          font-size: clamp(2rem, 9vw, 2.6rem);
        }

        .hero__copy {
          font-size: 1rem;
        }

        .hero__actions {
          flex-direction: column;
        }

        .hero__actions .btn {
          width: 100%;
        }

        .products::before {
          width: 100%;
          inset: -20px -8px;
          left: 0;
          transform: none;
          border-radius: 20px;
        }

        .product-card__body {
          padding: 22px;
        }

        .product-logo {
          width: min(140px, 48%);
          height: 40px;
        }

        .services__intro {
          padding-inline: 16px;
          min-height: 0;
          height: auto;
        }

        .services__intro-inner {
          gap: 24px;
        }

        .services__quicklinks {
          grid-template-columns: 1fr;
        }

        .service-card__container--boxed {
          min-height: 0;
          height: auto;
        }

        .partner-card__body {
          padding: 22px;
        }

        .partners__shell {
          padding-inline: 16px;
        }

        .ecosystem-blend {
          height: clamp(64px, 10vh, 110px);
          margin-top: calc(-1 * clamp(16px, 3vh, 32px));
          margin-bottom: calc(-1 * clamp(20px, 4vh, 40px));
        }

        .services__cta {
          min-height: auto;
          height: auto;
        }

        .services__cta .btn--primary {
          width: 100%;
        }

        .contact__panel {
          padding: 24px 20px;
        }

        .contact__form button {
          width: 100%;
          justify-self: stretch;
        }

        .footer__inner {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .footer__links {
          justify-content: center;
        }
      }

      /* short phones */
      @media (max-width: 600px) {
        .services {
          gap: clamp(24px, 5vw, 40px);
        }

        .services__stream {
          gap: clamp(12px, 3.5vw, 22px);
        }

        .service-card--full .service-card__visual img,
        .service-card--full .service-card__visual svg.service-card__art,
        .service-card--boxed .service-card__visual img,
        .service-card--boxed .service-card__visual svg.service-card__art {
          height: clamp(160px, 34vw, 220px);
        }

        .services__cta {
          min-height: auto;
          height: auto;
        }

        .services__cta-layout {
          grid-template-rows: minmax(36vh, 40vh) auto;
        }

        .footer__inner {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .footer__links {
          justify-content: center;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .nav__drawer-panel,
        .nav__drawer-backdrop {
          transition: none;
        }

        .nav__drawer.is-open .nav__drawer-panel {
          transform: none;
        }
      }
      .alive-surface {
        --alive-r: 53;
        --alive-g: 212;
        --alive-b: 234;
        --alive-x: 50%;
        --alive-y: 50%;
      }

      .alive-glow {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
          circle at var(--alive-x) var(--alive-y),
          rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.22) 0%,
          rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.08) 28%,
          transparent 62%
        );
        opacity: 0;
        transition: opacity 0.45s var(--ease-out);
        pointer-events: none;
        z-index: 0;
      }

      .alive-surface.is-glowing > .alive-glow {
        opacity: 1;
      }

      .alive-surface.is-glowing {
        transition:
          border-color 0.35s var(--ease-out),
          box-shadow 0.35s var(--ease-out),
          transform 0.25s var(--ease-out);
      }

      .product-card.alive-surface.is-glowing,
      .partner-card.alive-surface.is-glowing,
      .tech-card.alive-surface.is-glowing,
      .service-sub.alive-surface.is-glowing,
      .services__metric.alive-surface.is-glowing {
        border-color: rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.32);
        box-shadow:
          0 0 0 1px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.14),
          0 24px 56px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.12);
      }

      .tech-card.alive-surface.is-glowing .tech-card__icon {
        transform: scale(1.05);
        background: linear-gradient(
          145deg,
          rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.48) 0%,
          rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.2) 100%
        );
        border-color: rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.65);
        box-shadow:
          0 0 32px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
      }

      .service-card.alive-surface.is-glowing {
        border-color: rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.28);
        box-shadow:
          0 0 0 1px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.1),
          0 32px 72px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.14);
      }

      .alive-surface.is-glowing .service-sub__icon {
        background: rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.2);
        border-color: rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.42);
        box-shadow: 0 0 22px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.28);
        transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
      }

      .alive-surface.is-pressed {
        transform: scale(0.985);
      }

      .btn.alive-surface.is-pressed,
      .nav__cta.alive-surface.is-pressed {
        transform: translateY(-1px) scale(0.98);
      }

      .alive-ripple {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50%;
        pointer-events: none;
        z-index: 3;
        background: radial-gradient(
          circle,
          rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.42) 0%,
          rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.18) 40%,
          transparent 70%
        );
        transform: translate(-50%, -50%) scale(0);
        animation: alive-ripple 0.7s var(--ease-out) forwards;
      }

      @keyframes alive-ripple {
        to {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0;
        }
      }

      .nav__links a.alive-surface.is-glowing {
        color: rgb(var(--alive-r), var(--alive-g), var(--alive-b));
        text-shadow: 0 0 18px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.35);
      }

      .nav__cta.alive-surface.is-glowing,
      .btn--primary.alive-surface.is-glowing {
        box-shadow:
          0 0 0 1px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.35),
          0 22px 44px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.32);
      }

      .btn--ghost.alive-surface.is-glowing {
        border-color: rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.45);
        color: rgb(var(--alive-r), var(--alive-g), var(--alive-b));
        box-shadow: 0 0 28px rgba(var(--alive-r), var(--alive-g), var(--alive-b), 0.16);
      }

      .product-card.alive-surface .product-card__art,
      .product-card.alive-surface .product-card__body,
      .partner-card.alive-surface .partner-card__brand,
      .partner-card.alive-surface .partner-card__body,
      .service-card.alive-surface .service-card__visual,
      .service-card.alive-surface .service-card__content {
        position: relative;
        z-index: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .alive-glow,
        .alive-ripple {
          display: none !important;
        }

        .alive-surface.is-pressed {
          transform: none;
        }
      }