/* all-round-gothic: a locally-installed copy (rare) is used instantly when
       present. The real webfont is delivered by the Typekit kit, which now uses
       display=swap so the fallback shows immediately and the webfont is applied
       as soon as it downloads on every load. */
    @font-face {
      font-family: 'all-round-gothic';
      font-display: swap;
      src: local('all-round-gothic');
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue:   #168CCC;
      --green:  #7DC144;
      --orange: #F7AB1C;
      --pink:   #E6318F;
      --dark:   #05070f;
      --light:  #F8F8F8;
      --mid:    #08091a;
      --glass-bg: rgba(255,255,255,0.06);
      --glass-border: rgba(255,255,255,0.12);
      --font-head: "all-round-gothic", sans-serif;
      --font-body: "Poppins", sans-serif;
      --ease: cubic-bezier(0.4,0,0.2,1);
      /* secloud-2026 compat aliases */
      --mad-green: #7DC144;
      --secloud-blue: #168CCC;
      --power-pink: #E6318F;
      --alert-orange: #F7AB1C;
      --bg: #05070f;
      --surface: rgba(255,255,255,0.035);
      --surface-2: rgba(255,255,255,0.055);
      --surface-3: rgba(255,255,255,0.08);
      --line: rgba(255,255,255,0.08);
      --line-bright: rgba(255,255,255,0.16);
      --text: #F8F8F8;
      --text-muted: rgba(248,248,248,0.72);
      --text-quiet: rgba(248,248,248,0.52);
      --paper: #F8F8F8;
      --ink: #05070f;
      --r-sharp: 0px;
      --font-mono: ui-monospace, "Courier New", monospace;
      --font-display: "all-round-gothic", sans-serif;
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --max: 1180px;
      --gutter: 24px;
    }

    html { scroll-behavior: smooth; overflow-x: hidden; }

    body {
      font-family: var(--font-body);
      background: var(--dark);
      color: #fff;
      overflow-x: hidden;
    }

    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    button { cursor: pointer; font-family: var(--font-body); }

    /* Hide the floating reCAPTCHA v3 badge (compliance notice is provided in the
       forms/privacy policy instead). */
    .grecaptcha-badge { display: none !important; }

    /* ============================================================
       NAVIGATION
    ============================================================ */
    #nav {
      position: fixed;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 900;
      width: calc(100% - 40px);
      max-width: 1160px;
      transition: all 0.2s var(--ease);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 24px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      background:
        linear-gradient(
          rgba(5,7,15,0.3),
          rgba(5,7,15,0.4)
        ),
        linear-gradient(
          90deg,
          rgba(230, 49, 143, 0.2) 0%,
          rgba(22, 140, 204, 0.2) 33%,
          rgba(125, 193, 68, 0.2) 66%,
          rgba(247, 171, 28, 0.2) 100%
        );
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      transition: all 0.2s var(--ease);
    }
    .nav-logo img { height: 32px; width: auto; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
    }
    .nav-links > li {
      position: relative;
    }
    .nav-links > li > a {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 14px;
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .nav-links > li > a:hover,
    .nav-links > li:hover > a {
      color: var(--alert-orange);
    }
    .nav-links > li > a svg { transition: transform 0.25s; }
    .nav-links > li:hover > a svg { transform: rotate(180deg); }

    /* Submenu */
    .sub-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      min-width: 220px;
      background: linear-gradient(
          rgba(5,7,15,0.95),
          rgba(5,7,15,0.95)
        ),
        linear-gradient(
          90deg,
          rgba(230, 49, 143, 0.95) 0%,
          rgba(22, 140, 204, 0.95) 33%,
          rgba(125, 193, 68, 0.95) 66%,
          rgba(247, 171, 28, 0.95) 100%
        );
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 8px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.5);
      list-style: none;
      z-index: 901;
      /* Smooth fade instead of instant display:none pop */
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
      pointer-events: none;
    }
    /* Invisible bridge covers the 8px gap between the nav item and the submenu
       so the cursor doesn't leave the hover zone while moving down to it. */
    .nav-links > li::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 16px; /* taller than the gap */
      background: transparent;
    }
    /* Keep submenu open when hovering the li or the submenu */
    .nav-links > li:hover .sub-menu,
    .sub-menu:hover {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .sub-menu li a {
      display: block;
      padding: 9px 14px;
      border-radius: 10px;
      font-size: 0.82rem;
      color: rgba(255,255,255,0.75);
      transition: background 0.2s, color 0.2s;
    }
    .sub-menu li a:hover { color: var(--alert-orange); }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-ghost {
      padding: 8px 18px;
      border-radius: 100px;
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      background: transparent;
      border: 1px solid rgba(255,255,255,0.2);
      transition: all 0.2s;
    }
    .btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.4); }

    .btn-primary {
      padding: 10px 22px;
      border-radius: 10px;
      font-size: 0.875rem;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(#0a0c18, #0a0c18) padding-box,
                  linear-gradient(120deg, var(--blue), var(--pink)) border-box;
      border: 1.5px solid transparent;
      box-shadow: 0 4px 20px rgba(22,140,204,0.22);
      transition: all 0.1s;
    }
    .btn-primary:hover {
      background: linear-gradient(#0a0c18, #0a0c18) padding-box,
                  linear-gradient(120deg, var(--blue), var(--pink)) border-box;
      transform: translateY(-1px); box-shadow: 0 6px 26px rgba(230,49,143,0.30);
      color: var(--orange);
    }

    /* Burger — three bars (top/bottom half-width, middle full),
       animates into an X. Inspired by the SVG: short bars collapse
       into the middle, then the whole thing snaps 45° to form a cross. */
    .burger {
      display: none;
      position: relative;
      width: 28px;
      height: 22px;
      padding: 0;
      border: none;
      background: transparent;
    }
    .burger span {
      position: absolute;
      left: 50%;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transform-origin: center;
      transition:
        top 0.28s cubic-bezier(0.65, 0, 0.35, 1),
        width 0.28s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.18s ease,
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s;
    }
    .burger span:nth-child(1) {
      top: 4px;
      width: 50%;
      transform: translateX(-50%);
    }
    .burger span:nth-child(2) {
      top: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
    }
    .burger span:nth-child(3) {
      top: calc(100% - 6px);
      width: 50%;
      transform: translateX(-50%);
    }
    /* Open: top bar slides down + stretches to full width + rotates 45deg;
       middle bar rotates -45deg; bottom bar collapses into the center. */
    .burger.open span {
      transition:
        top 0.22s cubic-bezier(0.65, 0, 0.35, 1),
        width 0.22s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.15s ease,
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s;
    }
    .burger.open span:nth-child(1) {
      top: 50%;
      width: 100%;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .burger.open span:nth-child(2) {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    .burger.open span:nth-child(3) {
      top: 50%;
      width: 0;
      opacity: 0;
      transform: translate(-50%, -50%);
    }

    /* Mobile drawer */
    #mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 800;
      background: rgba(5,7,15,0.9);
      backdrop-filter: blur(10px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      opacity: 0;
      transition: opacity 0.25s var(--ease);
    }
    #mobile-menu.open {
      display: flex;
      opacity: 1;
    }
    .mobile-nav-item {
      font-family: var(--font-head);
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      opacity: 0;
      transform: translateY(24px);
      transition: all 0.25s var(--ease);
    }
    #mobile-menu.open .mobile-nav-item {
      opacity: 1;
      transform: translateY(0);
    }
    .mobile-sub { font-size: 0.95rem; font-family: var(--font-body); font-weight: 400; color: rgba(255,255,255,0.55); margin-top: 4px; text-align: center; }
    .mobile-sub a { display: inline-block; margin: 2px 8px; color: rgba(255,255,255,0.55); transition: color 0.2s; }
    .mobile-sub a:hover { color: #fff; }

    /* ============================================================
       HERO SECTION
    ============================================================ */
    #hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: visible;
      padding: 92px 24px 32px;
    }

    /* Aurora — positioned inside each host section */
    #aurora-canvas,
    #aurora-canvas-pitch,
    #aurora-canvas-peace {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
      mix-blend-mode: screen;
      transform: scale(1.04);
      transform-origin: center;
    }

    /* Hero aurora spills well past the hero and twirls over the globe in the
       section below — tall buffer + raised z-index so it paints on top. The
       soft horizontal edge mask dissolves the OUTER (screen-edge) tips into an
       extra-blurry haze; the fade only touches the outer ~10% so the
       horizontally-centred globe ring below stays fully visible. */
    #aurora-canvas {
      height: 210%;
      bottom: auto;
      z-index: 5;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }

    /* Contact aurora: only a band across the TOP of the section. Constrain the
       canvas to the upper portion and fade its lower edge so the glow dissolves
       instead of washing the whole mountain photo green. */
    #aurora-canvas-pitch {
      height: 46%;
      bottom: auto;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    }

    /* Stars bg */
    .stars {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: var(--dark);
    }

    /* Ocean — a clean, FULL-WIDTH horizontal water plane along the bottom of
       the hero: dark navy water mass fading up, with a soft blue glow pooling
       under the aurora. Fades out on scroll (--ocean-fade, set by home.js) so
       the water "joins" the aurora as it leaves the hero to wrap the globe. */
    #hero::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 26%;
      background:
        radial-gradient(ellipse 52% 46% at 50% 88%, rgba(22,140,204,0.13), transparent 72%),
        linear-gradient(to top, rgba(16,60,110,0.32) 0%, rgba(22,140,204,0.10) 45%, transparent 100%);
      filter: blur(18px);
      opacity: calc(1 - var(--ocean-fade, 0));
      pointer-events: none;
      z-index: 3;
    }

    .hero-content {
      position: relative;
      z-index: 10;
      padding: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 100px;
      padding: 6px 16px;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      margin-bottom: 24px;
      backdrop-filter: blur(8px);
    }
    .hero-eyebrow .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: pulse 2s infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }

    .hero-title {
      font-family: var(--font-body);
      font-size: clamp(1.3rem, 6.6vw, 4rem);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.045em;
      color: #fff;
      margin-bottom: 16px;
      white-space: nowrap;
      overflow: hidden;
    }
    .hero-title .gradient-text {
      background: linear-gradient(90deg, var(--green), var(--blue), var(--pink));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* Scroll wipe effect */
    .hero-title-wipe {
      display: inline-block;
      will-change: opacity, transform, filter, -webkit-mask;
    }
    .hero-line-erase {
      transform-origin: left center;
      display: inline-block;
    }

    .hero-subtitle {
      font-size: clamp(0.95rem, 2.2vw, 1.1rem);
      color: rgba(255,255,255,0.65);
      max-width: 620px;
      margin: 0 auto 24px;
      line-height: 1.6;
      font-weight: 300;
      text-align: center;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .btn-hero-primary {
      padding: 14px 32px;
      border-radius: 100px;
      font-size: 1rem;
      font-weight: 700;
      color: #09071D;
      background: var(--orange);
      border: none;
      box-shadow: 0 4px 20px rgba(247,171,28,0.35);
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(247,171,28,0.5); }
    .btn-hero-secondary {
      padding: 13px 28px;
      border-radius: 100px;
      font-size: 1rem;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) padding-box,
                  linear-gradient(90deg, var(--blue), var(--pink)) border-box;
      border: 1.4px solid transparent;
      backdrop-filter: blur(8px);
      transition: all 0.2s;
    }
    .btn-hero-secondary:hover {
      background: linear-gradient(rgba(255,255,255,0.14), rgba(255,255,255,0.14)) padding-box,
                  linear-gradient(90deg, var(--blue), var(--pink)) border-box;
      color: #fff; transform: translateY(-2px);
    }

    .scroll-hint {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: rgba(255,255,255,0.35);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      animation: scrollBounce 2.4s infinite;
    }
    .scroll-hint svg { opacity: 0.5; }
    @keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

    /* ============================================================
       HERO TWO-COLUMN GRID
    ============================================================ */
    .hero-grid {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 1400px;
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 3.5vh, 36px);
      align-items: center;
    }

    /* Demo wrap — shrinks with viewport height so the whole hero fits on
       shorter screens. Aspect ratio is 37/19, so height = width * 19/37; cap the
       width from the available vertical space (reserving room for nav + title).
       --demo-scale lets smaller viewports render the whole demo ~15% smaller. */
    .hero-demo-wrap {
      position: relative;
      width: 100%;
      max-width: min(1160px, calc((100svh - 240px) * 37 / 19));
      margin: 0 auto;
    }
    /* Shorter viewports: tighten the hero chrome so the larger demo still fits. */
    @media (max-height: 1100px) {
      #hero { padding-top: 80px; }
      .hero-grid { gap: clamp(14px, 2.4vh, 26px); }
    }
    .hero-demo-glow {
      position: absolute;
      inset: -60px;
      background: radial-gradient(ellipse at 50% 50%,
        rgba(22,140,204,0.32) 0%,
        rgba(125,193,68,0.14) 45%,
        transparent 72%);
      filter: blur(5px);
      pointer-events: none;
      z-index: 0;
    }
    .hero-demo-frame {
      position: relative;
      z-index: 1;
      border-radius: 18px;
      border: 0.65em solid rgba(255,255,255,0.10);
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(5,8,30,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
      background: rgba(8,10,26,0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .hero-demo-chrome {
      background: rgba(255,255,255,0.045);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .chrome-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .chrome-dot:nth-child(1) { background: #ff5f57; }
    .chrome-dot:nth-child(2) { background: #febc2e; }
    .chrome-dot:nth-child(3) { background: #28c840; }
    .chrome-url {
      flex: 1;
      margin-left: 10px;
      height: 24px;
      background: rgba(255,255,255,0.06);
      border-radius: 100px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.32);
      letter-spacing: 0.04em;
      gap: 7px;
      font-family: var(--font-body);
    }
    .chrome-url-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
      animation: pulse 2s infinite;
    }
    .hero-demo-slides {
      width: 100%;
      aspect-ratio: 37 / 19;
      position: relative;
      overflow: hidden;
      cursor: default;
      -webkit-user-select: none;
      user-select: none;
      display: block;
      background: #06080f;
    }
    .hds-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.38s ease;
      pointer-events: none;
      background: #06080f;
    }
    .hds-slide.active {
      opacity: 1;
      pointer-events: auto;
    }
    .hds-slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .hds-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 36px 16px 13px;
      background: linear-gradient(to top, rgba(5,7,15,0.90) 0%, transparent 100%);
      display: flex;
      align-items: flex-end;
      gap: 12px;
      pointer-events: none;
      z-index: 2;
    }
    .hds-caption { flex: 1; min-width: 0; }
    .hds-step-label { display: none; }
    .hds-step-text {
      font-size: 1rem;
      font-weight: 500;
      color: rgba(255,255,255,0.90);
      line-height: 1.3;
      font-family: var(--font-body);
      /* One line when it fits; wrap to a max of 3 lines (then ellipsis) on
         narrow viewports where the caption runs out of horizontal space. */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
    }
    .hds-dots {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
      padding-bottom: 2px;
      pointer-events: auto;
    }
    .hds-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.22);
      transition: background 0.2s, transform 0.2s;
      cursor: pointer;
    }
    .hds-dot.active {
      background: var(--blue);
      transform: scale(1.4);
    }
    .hds-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-60%);
      width: 44px;
      height: 44px;
      z-index: 3;
      background: rgba(5,8,22,0.72);
      border: 1.5px solid rgba(255,255,255,0.48);
      border-radius: 50%;
      outline: 0;
      padding: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      opacity: 0;
      transition: background 0.18s, border-color 0.18s, transform 0.18s, opacity 0.2s;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 2px 16px rgba(0,0,0,0.5);
    }
    .hero-demo-slides:hover .hds-nav { opacity: 1; }
    .hds-nav:hover {
      background: rgba(22,140,204,0.28);
      border-color: rgba(22,140,204,0.88);
      transform: translateY(-60%) scale(1.1);
      box-shadow: 0 0 18px rgba(22,140,204,0.35);
    }
    .hds-nav svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
    .hds-nav-prev { left: 14px; }
    .hds-nav-next { right: 14px; }
    .hds-progress {
      position: absolute;
      top: 0;
      left: 0;
      height: 2px;
      background: var(--blue);
      opacity: 0.75;
      z-index: 4;
    }
    .hds-cursor-dot {
      position: absolute;
      width: 14px;
      height: 14px;
      transform: translate(-50%, -50%);
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease, left 0.6s cubic-bezier(0.4,0,0.2,1), top 0.6s cubic-bezier(0.4,0,0.2,1);
    }
    .hds-cursor-dot.visible { opacity: 1; }
    .hds-cursor-dot.moving .hds-cursor-dot-ring { animation: none; opacity: 0; transition: opacity 0.15s; }
    .hds-cursor-dot-inner {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 2.5px rgba(77,101,159,0.9);
    }
    .hds-cursor-dot-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      animation: hdsDotPing 1.5s ease-out infinite;
      transition: opacity 0.15s;
    }
    @keyframes hdsDotPing {
      0%   { box-shadow: 0 0 0 0    rgba(77,101,159,0.75); }
      70%  { box-shadow: 0 0 0 12px rgba(77,101,159,0); }
      100% { box-shadow: 0 0 0 0    rgba(77,101,159,0); }
    }
    .hero-demo-tag {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 0.75rem;
      color: rgba(255,255,255,0.35);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .hero-demo-tag .tag-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      animation: pulse 2s infinite;
      flex-shrink: 0;
    }

    /* ============================================================
       TRUSTED BY LOGOS
    ============================================================ */
    #trusted {
      background: #FFF;
      padding: 52px 40px;
      border-top: 1px solid rgba(0,0,0,0.06);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .section-label {
      text-align: center;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(5,7,15,0.65);
      margin-bottom: 36px;
    }
    .logos-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 40px 56px;
      max-width: 1160px;
      margin: 0 auto;
    }
    .logo-item img {
      height: 50px;
      width: auto;
      object-fit: contain;
      filter: none;
      opacity: 0.75;
      transition: opacity 0.2s;
      display: block;
    }
    .logo-item img:hover {
      opacity: 1;
      cursor: pointer;
    }

    /* ============================================================
       SECTION SHARED
    ============================================================ */
    section { position: relative; }
    .container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 30px;
      position: relative;
      z-index: 100;
    }

    @media (max-width: 768px) { .container, .section-title, .section-subtitle, .mdm-table thead th { text-align: center !important; } }

    .section-eyebrow {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .section-title {
      font-family: var(--font-head);
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.015em;
      text-align: center;
    }
    .section-subtitle {
      font-size: 1.05rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.75);
      max-width: 580px;
      margin-top: 16px;
    }
    .section-subtitle.dark { color: rgba(5,7,15,0.72); }

    /* ============================================================
       NORTHERN STORY / WHY SECLOUD (dark)
    ============================================================ */
    #why {
      padding: 120px 0;
    }
    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .why-image-wrap {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
    }
    .why-image-wrap img {
      width: 100%;
      height: 480px;
      object-fit: cover;
      border-radius: 24px;
    }
    .why-image-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(22,140,204,0.25), rgba(230,49,143,0.18));
      border-radius: 24px;
    }
    .stat-badges {
      position: absolute;
      bottom: 24px;
      left: 24px;
      right: 24px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .stat-badge {
      background: rgba(5,7,15,0.75);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      flex-direction: column;
    }
    .stat-badge .num {
      font-family: var(--font-head);
      font-size: 1.5rem;
      font-weight: 700;
      background: linear-gradient(90deg, var(--blue), var(--green));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .stat-badge .lbl { font-size: 0.7rem; color: rgba(255,255,255,0.70); margin-top: 2px; }
    .why-text .section-eyebrow { color: var(--blue); }
    .why-text .section-title { color: #fff; }
    .compliance-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
    }
    .tag {
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.2);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.04);
      transition: all 0.2s;
    }
    .tag:hover { border-color: var(--blue); color: var(--blue); }

    /* ============================================================
       SPOTLIGHT CARDS (dark mode features)
    ============================================================ */
    #features {
      padding: 70px 0;
    }
    @media (max-width: 720px) {
      #features, .fg-section { padding: 10px 0;}
    }
    .features-header { text-align: center; margin-bottom: 64px; }
    .features-header .section-eyebrow { color: var(--pink); }
    .features-header .section-title { color: var(--dark); }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .spotlight-card {
      position: relative;
      background: #fff;
      border: 1px solid rgba(9,7,29,0.07);
      border-radius: 20px;
      padding: 32px;
      overflow: hidden;
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      cursor: default;
      box-shadow:
        0 1px 3px rgba(9,7,29,0.06),
        0 4px 12px rgba(9,7,29,0.07),
        0 12px 32px rgba(9,7,29,0.06);
    }
    .spotlight-card:hover {
      transform: translateY(-5px);
      border-color: rgba(22,140,204,0.25);
      box-shadow:
        0 2px 6px rgba(9,7,29,0.07),
        0 8px 24px rgba(22,140,204,0.1),
        0 20px 48px rgba(9,7,29,0.1);
    }
    /* Scroll-triggered shimmer sweep */
    .spotlight-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -80%;
      width: 55%;
      height: 100%;
      background: linear-gradient(
        108deg,
        transparent 25%,
        rgba(255,255,255,0.06) 44%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0.06) 56%,
        transparent 75%
      );
      pointer-events: none;
      z-index: 2;
    }
    .spotlight-card.card-shimmer::before {
      animation: cardShimmer 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
    }
    @keyframes cardShimmer {
      from { left: -80%; }
      to   { left: 150%; }
    }
    .card-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 1.6rem;
    }
    .card-title {
      font-family: var(--font-head);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 10px;
    }
    .card-body {
      font-size: 0.9rem;
      line-height: 1.7;
      color: rgba(9,7,29,0.72);
    }
    .card-tag {
      display: inline-block;
      margin-top: 16px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      background: rgba(22,140,204,0.15);
      color: var(--blue);
    }

    /* ============================================================
       HOW IT WORKS — process rail
    ============================================================ */
    .how {
      background: var(--dark);
      position: relative;
      padding: 120px 0 150px;
    }
    .how-header {
      text-align: center;
      margin-bottom: 72px;
      display: grid;
      place-items: center;
      gap: 20px;
    }
    .how-header .section-title {
      max-width: 22ch;
      color: #fff;
    }
    .how-header .section-subtitle {
      max-width: 56ch;
      color: var(--text-muted);
      font-size: 1rem;
      line-height: 1.65;
    }

    .process {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      max-width: 980px;
      margin: 0 auto;
    }
    .process::before {
      content: '';
      position: absolute;
      top: 44px;
      left: 12.5%; right: 12.5%;
      height: 1px;
      background: linear-gradient(90deg, var(--green), var(--blue), var(--orange), var(--pink));
      opacity: 0.35;
    }
    .process-step {
      text-align: center;
      position: relative;
    }
    .step-node {
      width: 88px; height: 88px;
      margin: 0 auto 24px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 50%;
      display: grid; place-items: center;
      position: relative;
      z-index: 2;
      transition: transform 320ms var(--ease-out-expo), border-color 320ms;
    }
    .process-step:hover .step-node {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,0.2);
    }
    .step-node svg { width: 32px; height: 32px; }
    .step-node .ring {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid currentColor;
      opacity: 0;
      animation: stepRing 3s ease-out infinite;
    }
    .process-step:nth-child(1) .step-node { color: var(--green); }
    .process-step:nth-child(2) .step-node { color: var(--blue); }
    .process-step:nth-child(3) .step-node { color: var(--orange); }
    .process-step:nth-child(4) .step-node { color: var(--pink); }
    .process-step:nth-child(2) .step-node .ring { animation-delay: 0.4s; }
    .process-step:nth-child(3) .step-node .ring { animation-delay: 0.8s; }
    .process-step:nth-child(4) .step-node .ring { animation-delay: 1.2s; }
    @keyframes stepRing {
      0%   { opacity: 0.5; transform: scale(1); }
      100% { opacity: 0;   transform: scale(1.35); }
    }
    .step-n {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      color: var(--text-quiet);
      font-weight: 600;
    }
    .step-title {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 1.3rem;
      letter-spacing: -0.03em;
      margin: 6px 0 8px;
      color: #fff;
    }
    .step-body {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.55;
      max-width: 26ch;
      margin: 0 auto;
      font-weight: 400;
    }

    /* Mobile */
    @media (max-width: 700px) {
      .process { grid-template-columns: repeat(2, 1fr); gap: 40px; }
      .process::before { display: none; }
    }
    @media (max-width: 400px) {
      .process { grid-template-columns: 1fr; }
    }

    /* ============================================================
       LIGHT SECTION – PEACE OF MIND
    ============================================================ */
    #peace {
      background: transparent;
      padding: 0;
    }
    .peace-photo-wrap {
      position: relative;
      height: 90vh;
      min-height: 600px;
      overflow: hidden;
    }
    .peace-photo-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transform: scale(1.08);
      transition: transform 5s ease-out;
    }
    .peace-photo-wrap.in-view img { transform: scale(1); }
    .peace-overlay {
      position: absolute;
      inset: 0;
      background: rgba(5,7,15,0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 80px;
      text-align: center;
    }
    .peace-text { max-width: 620px; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .peace-text .section-eyebrow { color: var(--green); margin-bottom: 16px; }
    .peace-text .section-title { color: #fff; margin-bottom: 20px; }
    .peace-text p { font-size: 1.05rem; color: rgba(255,255,255,0.7); line-height: 1.75; text-align: center; }
    .peace-cta {
      margin-top: 32px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 28px;
      border-radius: 100px;
      font-size: 0.95rem;
      font-weight: 700;
      background: var(--green);
      color: #09071D;
      transition: all 0.25s;
    }
    .peace-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(125,193,68,0.45); }
    /* Shared four-lobe brand gradient background.
       Applied via the single .brand-gradient-bg class on:
       #portal, #pitch, #compliance/.comp-section, .hp-proof, .hp-trial, .hp-faq */
    .brand-gradient-bg {
      background:
        radial-gradient(18vmax 13vmax at 41% 44%, rgba(125,193,68,0.26) 30%, transparent 100%) fixed,
        radial-gradient(18vmax 13vmax at 59% 44%, rgba(247,171,28,0.26) 30%, transparent 100%) fixed,
        radial-gradient(18vmax 13vmax at 41% 56%, rgba(22,140,204,0.26) 30%, transparent 100%) fixed,
        radial-gradient(18vmax 13vmax at 59% 56%, rgba(230,49,143,0.26) 30%, transparent 100%) fixed,
        #F8F8F8;
    }
    @media (max-width: 600px) {
      /* Taller lobes on phones so the gradient fills the narrow viewport. */
      .brand-gradient-bg {
        background:
          radial-gradient(9vmax 13vmax at 44% 42%,rgba(125,193,68,0.26) 30%,transparent 100%) fixed,
          radial-gradient(9vmax 13vmax at 56% 42%,rgba(247,171,28,0.26) 30%,transparent 100%) fixed,
          radial-gradient(13vmax 18vmax at 44% 58%,rgba(22,140,204,0.26) 30%,transparent 100%) fixed,
          radial-gradient(10vmax 18vmax at 56% 58%,rgba(230,49,143,0.26) 30%,transparent 100%) fixed,
          #F8F8F8
      }
    }
    /* ============================================================
       PORTAL SECTION
    ============================================================ */
    #portal {
      padding: 120px 0;
    }
    .portal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .portal-text .section-eyebrow { color: var(--blue); }
    .portal-text .section-title { color: #fff; }
    .portal-text .section-subtitle { color: rgba(255,255,255,0.6); }
    .portal-features-col {
      display: flex;
      align-items: center;
    }
    .portal-text .section-title { text-align: left; }
    .portal-features {
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
    }
    .portal-feature {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px 22px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(5,7,15,0.07);
      border-radius: 16px;
      transition: border-color 0.22s, background 0.22s;
      box-shadow: 0px 5px 8px #0000002e;
    }
    .portal-feature:hover {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(22,140,204,0.25);
    }
    .portal-feature-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: rgba(22,140,204,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }
    .portal-feature h3 {
      font-family: var(--font-head);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 4px;
    }
    .portal-feature p { font-size: 0.85rem; color: rgba(5,7,15,0.72); line-height: 1.6; margin: 0; }

    .portal-screenshot {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(5,7,15,0.18);
    }
    .portal-screenshot img {
      width: 100%;
      border-radius: 20px;
    }
    .portal-mock {
      width: 100%;
      background: #0e1018;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(5,7,15,0.25);
    }
    .mock-topbar {
      background: #080a12;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mock-logo-text {
      margin-left: 12px;
      font-family: var(--font-head);
      font-size: 0.85rem;
      font-weight: 700;
      color: rgba(255,255,255,0.7);
    }
    .mock-body { padding: 20px; }
    .mock-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }
    .mock-stat {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px;
      padding: 14px;
    }
    .mock-stat .val {
      font-family: var(--font-head);
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
    }
    .mock-stat .lbl { font-size: 0.68rem; color: rgba(255,255,255,0.65); margin-top: 4px; }
    .mock-stat .badge {
      font-size: 0.65rem;
      padding: 2px 6px;
      border-radius: 100px;
      font-weight: 700;
      margin-top: 4px;
      display: inline-block;
    }
    .badge-green { background: rgba(125,193,68,0.2); color: var(--green); }
    .badge-blue  { background: rgba(22,140,204,0.2); color: var(--blue); }
    .badge-pink  { background: rgba(230,49,143,0.2); color: var(--pink); }
    .mock-list { display: flex; flex-direction: column; gap: 8px; }
    .mock-list-item {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mock-list-item .name { font-size: 0.8rem; color: rgba(255,255,255,0.7); }
    .mock-list-item .status { font-size: 0.68rem; padding: 2px 8px; border-radius: 100px; font-weight: 600; }
    .status-ok   { background: rgba(125,193,68,0.15); color: var(--green); }
    .status-warn { background: rgba(247,171,28,0.15); color: var(--orange); }
    .status-done { background: rgba(22,140,204,0.15); color: var(--blue); }

    /* ============================================================
       PITCH GENERATOR
    ============================================================ */
    #pitch {
      padding: 120px 0;
      position: relative;
    }
    .pitch-header { text-align: center; margin-bottom: 48px; }
    .pitch-header .section-eyebrow { color: var(--orange); }
    .pitch-header .section-title { color: var(--dark); }
    .pitch-header .section-subtitle { color: rgba(5,7,15,0.72); margin: 12px auto 0; }
    /* Two-column: header text left, bento right */
    .pitch-layout {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: clamp(32px, 5vw, 80px);
      align-items: center;
      max-width: 1160px;
      margin: 0 auto;
    }
    .pitch-layout .pitch-header {
      text-align: left;
      margin-bottom: 0;
      align-self: center;
    }
    .pitch-layout .pitch-header .section-title { margin: 0 0 18px; text-align: left; }
    .pitch-layout .pitch-header .section-subtitle { margin: 0; max-width: 420px; }
    @media (max-width: 880px) {
      .pitch-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 520px;
      }
      .pitch-layout .pitch-header { text-align: center; }
      .pitch-layout .pitch-header .section-subtitle { margin: 0 auto; }
    }
    /* Bento — roles "square" (top) melted into the output "rectangle" (bottom) */
    .pitch-bento {
      --bento-bg: #ffffff;
      position: relative;
      width: 100%;
      max-width: 560px;
      margin: 0;
      display: flex;
      flex-direction: column;
      filter: drop-shadow(0 24px 50px rgba(5,7,15,0.12));
    }
    .pitch-roles-card {
      position: relative;
      width: 70%;
      align-self: flex-end;
      margin-bottom: -1px;
      padding: 26px 24px 32px;
      background: var(--bento-bg);
      border-radius: 30px 30px 30px 0;
      box-shadow: inset 0 0 0 1px rgba(5,7,15,0.05);
    }
    /* Concave filler — melts the card's lower-left edge down into the rectangle */
    .pitch-roles-card::before {
      content: "";
      position: absolute;
      left: -30px;
      bottom: 0;
      width: 30px;
      height: 30px;
      background: var(--bento-bg);
      -webkit-mask: radial-gradient(circle 30px at 0 0, transparent 0 30px, #000 31px);
              mask: radial-gradient(circle 30px at 0 0, transparent 0 30px, #000 31px);
    }
    .pitch-output-card {
      position: relative;
      width: 86%;
      align-self: flex-start;
      padding: 28px 32px 34px;
      background: var(--bento-bg);
      border-radius: 30px 30px 30px 30px;
      box-shadow: 0px 10px 0px var(--power-pink);
    }
    .pitch-roles-label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(5,7,15,0.4);
      margin-bottom: 16px;
    }
    .roles-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    @media (max-width: 768px) {
      .roles-grid {
        height: 150px;
        background: linear-gradient(transparent 67%, #cbcbcb);
        overflow: scroll;
        border: 1px solid #CCC;
        border-radius: 14px;
      }
    }
    .role-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      width: 100%;
      padding: 13px 16px;
      border: 1px solid rgba(5,7,15,0.1);
      background: rgba(5,7,15,0.02);
      color: rgba(5,7,15,0.7);
      font-size: 0.92rem;
      font-weight: 500;
      text-align: right;
      transition: all 0.22s var(--ease);
      border: 2px solid transparent;
      border-radius: 12px;
    }
    .role-btn .role-arrow {
      width: 16px;
      height: 16px;
      opacity: 0;
      transform: translateX(-6px);
      transition: all 0.22s var(--ease);
      flex-shrink: 0;
    }
    .role-btn:hover {
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg, var(--blue), var(--pink), var(--orange)) border-box;
      color: var(--dark);
    }
    .role-btn:hover .role-arrow { opacity: 0.5; transform: translateX(0); }
    .role-btn.active {
      color: var(--light);
      background:
        linear-gradient(var(--pink)) padding-box,
        linear-gradient(120deg, var(--blue), var(--pink), var(--orange)) border-box;
      border: 2px solid transparent;
      box-shadow: 0 6px 20px rgba(22,140,204,0.16);
    }
    .role-btn.active .role-arrow { opacity: 1; transform: translateX(0); color: var(--pink); }

    .pitch-output-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }
    .pitch-output-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(5,7,15,0.4);
    }
    .pitch-output-tag .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 10px var(--green);
    }
    .pitch-output {
      min-height: 150px;
      position: relative;
      display: none;
    }
    .pitch-output.visible { display: block; }
    .pitch-platform {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .platform-chip {
      padding: 4px 12px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .chip-slack { background: rgba(75,0,130,0.1); color: #6d3fc0; }
    .chip-teams { background: rgba(68,114,196,0.1); color: #3b6cc4; }
    .pitch-text {
      font-size: 0.97rem;
      line-height: 1.8;
      color: var(--dark);
      font-family: monospace;
    }
    .pitch-copy-btn {
      flex-shrink: 0;
      padding: 7px 16px;
      background: rgba(5,7,15,0.04);
      border: 1px solid rgba(5,7,15,0.12);
      font-size: 0.78rem;
      font-weight: 500;
      color: rgba(5,7,15,0.7);
      transition: all 0.2s;
    }
    .pitch-copy-btn:hover { background: rgba(5,7,15,0.1); color: var(--dark); }

    @media (max-width: 880px) {
      .pitch-bento { max-width: 460px; margin: 0 auto; }
    }
    @media (max-width: 680px) {
      .pitch-bento { max-width: 460px; }
      .pitch-roles-card {
        width: 100%;
        border-radius: 26px 26px 0 0;
      }
      .pitch-roles-card::before { display: none; }
      .pitch-output-card {
        width: 100%;
        border-radius: 0 0 26px 26px;
      }
    }

    /* ============================================================
       COMPLIANCE STRIP
    ============================================================ */
    #compliance {
      padding: 80px 0;
    }
    .compliance-inner {
      display: flex;
      align-items: center;
      gap: 64px;
      flex-wrap: wrap;
    }
    .compliance-text { flex: 1; min-width: 260px; }
    .compliance-text .section-eyebrow { color: var(--green); }
    .compliance-text .section-title { color: #fff; font-size: 2rem; }
    .compliance-logos {
      flex: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
    .compliance-badge {
      padding: 12px 20px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.65);
      transition: all 0.25s;
    }
    .compliance-badge:hover { border-color: var(--green); color: var(--green); background: rgba(125,193,68,0.06); transform: translateY(-2px); }
    .nemko-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 20px;
      background: rgba(125,193,68,0.08);
      border: 1.5px solid rgba(125,193,68,0.3);
      border-radius: 12px;
      color: var(--green);
      font-size: 0.82rem;
      font-weight: 700;
    }
    .nemko-badge .star { font-size: 1.2rem; }

    /* ============================================================
       CONTACT SECTION
    ============================================================ */
    #contact {
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: transparent;
      position: relative;
      overflow: hidden;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 64px;
      align-items: start;
    }
    .contact-info .section-eyebrow { color: var(--pink); }
    .contact-info .section-title { color: #fff; text-align: left; }
    .contact-info p { font-size: 1rem; line-height: 1.75; color: var(--light); margin-top: 16px; }
    .contact-details { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
    .contact-item { display: flex; align-items: center; gap: 12px; will-change: transform; transform-origin: left center; }
    .contact-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
    .contact-item span { font-size: 1rem; color: var(--light); }
    .contact-item span a { color: inherit; text-decoration: none; }
    .contact-item span a:hover { color: var(--alert-orange); }

    @media (max-width: 768px) {
      .contact-item { justify-content: center; }
      .contact-item span { text-align: left; }
    }

    .contact-form {
      /* Light mode: a frosted WHITE-transparent panel with dark text, sitting on
         the dark mountain photo. */
      background: rgba(255,255,255,0.8);
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 24px 60px rgba(5,7,15,0.28);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      box-shadow: 0px 10px 0px var(--alert-orange);
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .form-group label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.72); letter-spacing: 0.05em; text-transform: uppercase; }
    .form-group input,
    .form-group select,
    .form-group textarea {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 12px 16px;
      color: #fff;
      font-size: 0.9rem;
      font-family: var(--font-body);
      outline: none;
      transition: border-color 0.25s, box-shadow 0.25s;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(22,140,204,0.15);
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(255,255,255,0.25); }
    .form-group select option { background: #0e1018; }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-submit {
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      border: none;
      font-size: 1rem;
      font-weight: 700;
      color: #F8F8F8;
      background: var(--pink);
      box-shadow: 0 4px 24px rgba(22,140,204,0.3);
      transition: all 0.1s;
    }
    .form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(22,140,204,0.45); }
    .form-success {
      display: none;
      text-align: center;
      padding: 32px;
      color: var(--green);
      font-size: 1rem;
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    #footer {
      position: relative;
      background: var(--light);
    }
    .footer-cloud-top {
      position: relative;
      height: 80px;
      overflow: hidden;
      line-height: 0;
    }
    .footer-cloud-top svg { width: 100%; height: 100%; }
    .cloud-path { fill: var(--light); }

    .footer-inner {
      padding: 60px 0 40px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(9,7,29,0.1);
    }
    .footer-brand img { height: auto; }
    .footer-brand p { font-size: 0.85rem; color: rgba(9,7,29,0.65); line-height: 1.7; max-width: 240px; }
    .footer-social { display: flex; gap: 10px; margin-top: 20px; }
    .social-btn {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: var(--dark);
      border: 1px solid rgba(9,7,29,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: var(--white);
      transition: all 0.2s;
    }
    .social-btn:hover {color: var(--white); background: var(--secloud-blue); }
    .footer-col h3 {
      font-family: var(--font-head);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(9,7,29,0.60);
      margin-bottom: 16px;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col ul li a { font-size: 0.875rem; color: rgba(9,7,29,0.65); transition: color 0.2s; }
    .footer-col ul li a:hover { color: var(--dark); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 32px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-bottom p { font-size: 0.8rem; color: rgba(9,7,29,0.58); }
    .footer-bottom a { color: rgba(9,7,29,0.65); transition: color 0.2s; }
    .footer-bottom a:hover { color: var(--dark); }

    @media (max-width: 768px) {
      .footer-brand p {
        text-align: center;
        max-width: 100%;
      }
      .footer-social { justify-content: center; }
      .footer-logo { justify-content: center; }
      .footer-bottom { justify-content: center; }
    }

    /* ============================================================
       SCROLL REVEAL — 3D space entrance
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: perspective(900px) translateZ(-80px) translateY(28px);
      transition: opacity 0.25s var(--ease),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.visible {
      opacity: 1;
      transform: perspective(900px) translateZ(0) translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1024px) {
      .cards-grid { grid-template-columns: 1fr 1fr; }
      .why-grid { gap: 48px; }
      .portal-grid { gap: 40px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .hero-grid { gap: clamp(20px, 3.5vh, 32px); }
    }
    @media (max-width: 768px) {
      .nav-links, .nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
      .burger { display: block; }
      .cards-grid { grid-template-columns: 1fr; }
      .why-grid { grid-template-columns: 1fr; }
      .portal-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .peace-overlay { padding: 32px; }
      .steps-flow { grid-template-columns: 1fr; gap: 24px; }
      .step-connector { display: none; }
      .compliance-inner { flex-direction: column; align-items: center; gap: 32px; }
      .compliance-text { text-align: center; width: 100%; }
      .compliance-logos { justify-content: center; }
      .portal-features-col { width: 100%; }
      .portal-text { text-align: center; }
      .portal-feature { flex-direction: column; align-items: center; text-align: center; }
      #contact { padding: 100px 0; }
      #hero { padding: 80px 20px 24px; }
      .hero-actions { flex-direction: column; align-items: center; }
      .hero-grid { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 28px); }
      .hero-content { text-align: center; }
      .hero-subtitle { margin: 0 auto 10px; }
      .hero-actions { justify-content: center; }
    }
    @media (max-width: 480px) {
      .footer-grid { grid-template-columns: 1fr; }
      .nav-inner { padding: 10px 16px; }
    }

    /* ============================================================
       MISC UTILS
    ============================================================ */
    .gradient-blue-pink {
      background: linear-gradient(135deg, var(--blue), var(--pink));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .gradient-green-blue {
      background: linear-gradient(135deg, var(--green), var(--blue));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .icon-bg-blue   { background: rgba(22,140,204,0.15); }
    .icon-bg-green  { background: rgba(125,193,68,0.15); }
    .icon-bg-pink   { background: rgba(230,49,143,0.15); }
    .icon-bg-orange { background: rgba(247,171,28,0.15); }

    /* ============================================================
       CONTACT PHOTO PARALLAX BACKGROUND
    ============================================================ */
    #contact-bg-img {
      position: absolute;
      inset: -20% 0;
      z-index: 0;
      pointer-events: none;
      will-change: transform;
    }
    @media (max-width: 768px) {
      #contact-bg-img { inset: 0; will-change: auto; }
    }
    #contact-bg-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      display: block;
    }

    #contact-bg-overlay {
      position: absolute;
      inset: 0;
      background: rgba(5,7,15,0.72);
      z-index: 1;
    }

    /* Lift all page content above the starfield */
    #nav    { z-index: 900 !important; }
    #mobile-menu { z-index: 800 !important; }

    /* Deepen the body background — serves as the void */
    body { background: #05070f; }

    /* Hero stars overlay — solid void, no gradient */
    .stars {
      background: #05070f !important;
    }

    /* ============================================================
       DEPTH NEBULA
    #why::before,
    #how::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    #features::before {
      background: radial-gradient(ellipse 80% 55% at 50% 50%,
        rgba(22,140,204,0.05) 0%, transparent 70%);
    }
    #why::before {
      background: radial-gradient(ellipse 70% 55% at 25% 50%,
        rgba(125,193,68,0.05) 0%, transparent 65%);
    }
    #how::before {
      background: none;
    }
    #features .container,
    #features .features-header,
    #why .container,
    #how .container { position: relative; z-index: 1; }

    /* ============================================================
       PORTAL SECTION — subtitle (light mode)
    ============================================================ */
    .section-subtitle.dark { color: rgba(5,7,15,0.6); }

    /* ============================================================
       FEATURES GLOBE SECTION
    ============================================================ */
    .fg-section {
      background: var(--dark);
      position: relative;
      padding: clamp(100px, 14vw, 200px) 0 clamp(60px, 10vw, 140px);
    }
    .fg-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
      margin-top: clamp(32px, 5vw, 64px);
    }
    .fg-header .section-title { max-width: 22ch; color: #fff; margin: 0; }
    .fg-lede {
      max-width: 44ch;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.6;
    }
    .fg-globe-wrap {
      display: flex;
      justify-content: center;
      will-change: opacity, transform;
      /* The globe JS sets a transform here, which makes this a stacking context
         (z-index auto) that would otherwise TRAP #globe-container's z-index:6
         below the hero aurora (z-index 5). Give the wrapper a positive z-index
         above the aurora so the globe AND its cards paint in FRONT of the halo. */
      position: relative;
      z-index: 7;
    }
    #globe-container {
      width: 100%;
      max-width: 1160px;
      height: auto;
      aspect-ratio: 2.4 / 1;
      margin: 0 auto;
      position: relative;
      /* Raised above the hero aurora (z-index 5) so the green ring coils
         BEHIND the globe — the sphere occludes the inner half, leaving a halo. */
      z-index: 6;
      isolation: isolate;
      overflow: hidden;
      cursor: grab;
      /* auto (not none): let the browser scroll the page for touches that miss
         the sphere. The globe JS raycasts each touchstart and only calls
         preventDefault when the tap actually lands ON the globe, so on-globe
         drags still spin (both axes) while off-globe taps scroll normally.
         touch-action:none would block scrolling everywhere on the element,
         which made empty-space taps do nothing instead of scrolling. */
      touch-action: auto;
      perspective: 1400px;
      perspective-origin: 50% 50%;
    }
    #globe-container.is-dragging { cursor: grabbing; }

    /* HTML callout cards (CSS2DRenderer) */
    .globe-card {
      font-family: var(--font-body), sans-serif;
      position: absolute;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 18px;
      background: rgba(8,10,22,0.92);
      border: 1px solid rgba(255,255,255,0.16);
      border-left-width: 3px;
      border-radius: 3px;
      padding: 24px 36px 24px 26px;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      transform-origin: center center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .gc-icon {
      flex-shrink: 0;
      width: 52px;
      height: 52px;
    }
    .gc-icon svg {
      width: 100%;
      height: 100%;
    }
    .gc-eyebrow {
      font-family: var(--font-head), sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .gc-line1 {
      font-size: 20px;
      font-weight: 500;
      color: rgba(248,248,248,0.92);
      margin-bottom: 5px;
      line-height: 1.35;
    }
    .gc-line2 {
      font-size: 18px;
      font-weight: 400;
      color: rgba(248,248,248,0.70);
      line-height: 1.35;
    }

    #globe-container canvas {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 24px 56px rgba(0,0,0,0.55));
      -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 3%,
        rgba(0,0,0,1) 97%,
        rgba(0,0,0,0) 100%
      );
      mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 3%,
        rgba(0,0,0,1) 97%,
        rgba(0,0,0,0) 100%
      );
    }
    .globe-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      overflow: visible;
      pointer-events: none;
    }
    @media (max-width: 720px) {
      .fg-globe-wrap { padding: 0; }
      #globe-container {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 1.5 / 1;
      }
      .globe-card {
        gap: 12px;
        padding: 14px 18px 14px 16px;
        white-space: normal;
        width: 70vw;
        max-width: 70vw;
      }
      .gc-icon { width: 36px; height: 36px; }
      .gc-eyebrow {
        font-size: 14px;
        letter-spacing: 0.05em;
        margin-bottom: 6px;
      }
      .gc-line1 {
        font-size: 15px;
        margin-bottom: 3px;
        line-height: 1.3;
      }
      .gc-line2 {
        font-size: 13px;
        line-height: 1.35;
      }
    }

    /* ============================================================
       NO ROUNDED SHAPES — flat, sharp-edged system
    ============================================================ */
    .btn-ghost  { border-radius: 0 !important; }
    .sub-menu { border-radius: 0 !important; }
    .sub-menu li a { border-radius: 0 !important; }
    .hero-eyebrow { border-radius: 0 !important; }
    .btn-hero-primary  { border-radius: 0 !important; }
    .btn-hero-secondary { border-radius: 0 !important; }
    .spotlight-card { border-radius: 0 !important; }
    .card-icon { border-radius: 0 !important; }
    .step-circle { border-radius: 0 !important; }
    .why-image-wrap { border-radius: 0 !important; }
    .why-image-wrap img { border-radius: 0 !important; }
    .stat-badge { border-radius: 0 !important; }
    .tag { border-radius: 0 !important; }
    .compliance-badge { border-radius: 0 !important; }
    .compliance-badge:hover { transform: none !important; }
    .nemko-badge { border-radius: 0 !important; }
    .portal-mock { border-radius: 0 !important; }
    .mock-topbar { border-radius: 0 !important; }
    .mock-stat { border-radius: 0 !important; }
    .mock-list-item { border-radius: 0 !important; }
    .chrome-url { border-radius: 0 !important; }
    .portal-screenshot { border-radius: 0 !important; }
    .portal-screenshot img { border-radius: 0 !important; }
    .contact-form { border-radius: 0 !important; }
    .form-group input,
    .form-group select,
    .form-group textarea { border-radius: 0 !important; }
    .form-submit { border-radius: 0 !important; }
    .pitch-output { border-radius: 0 !important; }
    .pitch-copy-btn { border-radius: 0 !important; }
    .platform-chip { border-radius: 0 !important; }
    .peace-cta { border-radius: 0 !important; }
    .social-btn { border-radius: 0 !important; }
    .badge-green, .badge-blue, .badge-pink { border-radius: 0 !important; }
    .portal-feature-icon { border-radius: 0 !important; }
    .contact-icon { border-radius: 0 !important; }
    .status-ok, .status-warn, .status-done { border-radius: 0 !important; }
    .why-image-wrap .stat-badge { border-radius: 0 !important; }

    /* ============================================================
       STATEMENT SECTION — full-bleed editorial photo quote
    ============================================================ */
    .statement {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      min-height: 640px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #peace-bg-img {
      position: absolute;
      inset: -20% 0;
      z-index: 0;
      pointer-events: none;
      will-change: transform;
    }
    @media (max-width: 768px) {
      #peace-bg-img { inset: 0; will-change: auto; }
    }
    #peace-bg-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      display: block;
    }
    #peace-bg-overlay {
      position: absolute;
      inset: 0;
      background: rgba(5,7,15,0.72);
      z-index: 1;
    }
    .statement-overlay {
      width: 100%;
      display: grid;
      place-items: center;
      padding: clamp(40px, 8vw, 96px);
      text-align: center;
      z-index: 3;
    }
    .statement-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(244,242,236,0.45);
      margin-bottom: 20px;
    }
    .statement-eyebrow .eyebrow-dash { color: rgba(244,242,236,0.2); margin: 0 2px; }
    .statement-h {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: clamp(2rem, 4.6vw, 3.8rem);
      line-height: 1.04;
      letter-spacing: -0.025em;
      color: #fff;
      max-width: 22ch;
      margin: 0 auto 20px;
    }
    .statement-lede {
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      line-height: 1.65;
      color: rgba(244,242,236,0.60);
      max-width: 56ch;
      margin: 0 auto;
      font-weight: 400;
    }
    @media (max-width: 768px) {
      .statement { min-height: 50vh; min-height: 50dvh; }
      .statement-overlay { padding: 32px 24px; }
      .statement-h { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    }

    /* ============================================================
       COMPLIANCE TYPOGRAPHIC LIST — editorial grid
    ============================================================ */
    .comp-section {
      padding: 120px 0;
    }
    .comp-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
      gap: clamp(40px, 6vw, 80px);
      align-items: start;
    }
    .comp-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .comp-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 18px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(5,7,15,0.07);
      border-radius: 16px;
      box-shadow: 0px 5px 8px #0000002e;
      transition: transform 0.22s var(--ease), border-color 0.22s, background 0.22s, box-shadow 0.22s;
    }
    .comp-card:hover {
      transform: translateY(-3px);
      background: #fff;
      border-color: rgba(125,193,68,0.32);
      box-shadow: 0 10px 26px rgba(5,7,15,0.12);
    }
    .comp-card-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(125,193,68,0.4);
    }
    .comp-card-check svg { display: block; }
    .comp-card-check--cert {
      background: var(--blue);
      box-shadow: 0 2px 8px rgba(22,140,204,0.4);
    }
    .comp-card-name {
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: -0.01em;
      color: var(--dark);
    }
    .comp-card-status {
      margin-left: auto;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 0.66rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--green);
      white-space: nowrap;
    }
    .comp-card-status--cert { color: var(--blue); }
    .comp-nemko {
      margin-top: 16px;
      padding: 22px 24px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(125,193,68,0.22);
      border-radius: 16px;
      box-shadow: 0px 5px 8px #0000002e;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      align-items: center;
    }
    .comp-nemko-badge {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      color: var(--green);
      padding: 8px 14px;
      border-radius: 10px;
      background: rgba(125,193,68,0.1);
      border: 1px solid rgba(125,193,68,0.25);
    }
    .comp-nemko-text {
      font-size: 0.92rem;
      color: rgba(5,7,15,0.70);
      font-weight: 400;
      line-height: 1.5;
      margin: 0;
    }
    .comp-nemko-text strong { color: var(--green); font-weight: 600; }
    @media (max-width: 768px) {
      .comp-grid { grid-template-columns: 1fr; gap: 40px; }
      .comp-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .comp-card { padding: 13px 14px; gap: 10px; }
      .comp-nemko { grid-template-columns: 1fr; gap: 12px; }
    }

    /* ============================================================
       FLOATING LABEL FORM FIELDS
    ============================================================ */
    .float-field {
      position: relative;
      padding-top: 18px;
      margin-bottom: 4px;
    }
    .float-field input,
    .float-field select,
    .float-field textarea {
      width: 100%;
      padding: 10px 0 8px;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(5,7,15,0.22);
      color: #15171f;
      font-size: 0.95rem;
      font-family: var(--font-body);
      font-weight: 400;
      outline: none;
      transition: border-color 220ms;
      border-radius: 0;
      appearance: none;
      -webkit-appearance: none;
    }
    .float-field input:focus,
    .float-field select:focus,
    .float-field textarea:focus {
      border-bottom-color: var(--blue);
    }
    .float-field input:-webkit-autofill,
    .float-field input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
      -webkit-text-fill-color: #15171f !important;
      caret-color: #15171f;
    }
    .float-field textarea { resize: vertical; min-height: 96px; }
    .float-field select {
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='rgba(5,7,15,0.45)' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 2px center;
    }
    .float-field select option { background: #fff; color: #15171f; }
    .float-field label {
      position: absolute;
      top: 26px;
      left: 0;
      font-size: 0.92rem;
      color: rgba(20,22,30,0.62);
      font-weight: 400;
      pointer-events: none;
      transition: top 180ms ease, font-size 180ms ease, color 180ms ease, letter-spacing 180ms ease;
    }
    /* Float label up when field is focused or has content */
    .float-field input:focus          ~ label,
    .float-field input:not(:placeholder-shown) ~ label,
    .float-field textarea:focus       ~ label,
    .float-field textarea:not(:placeholder-shown) ~ label,
    .float-field select:focus         ~ label,
    .float-field select.has-val       ~ label {
      top: 0px;
      font-size: 0.70rem;
      color: var(--blue);
      letter-spacing: 0.04em;
    }
    .float-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .float-form { display: grid; gap: 6px; }
    @media (max-width: 768px) {
      .float-row { grid-template-columns: 1fr; gap: 0; }
    }
    .contact-submit-btn {
      margin-top: 20px;
      padding: 13px 28px;
      background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
      color: #fff;
      border: 0;
      font-size: 0.92rem;
      font-weight: 600;
      font-family: var(--font-body);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: filter 200ms, transform 180ms;
      cursor: pointer;
      border-radius: 0;
    }
    .contact-submit-btn:hover { filter: brightness(1.10); }
    .contact-submit-btn:active { transform: translateY(1px); }
    .contact-submit-btn .arrow { transition: transform 240ms ease; }
    .contact-submit-btn:hover .arrow { transform: translateX(3px); }

    /* ============================================================
       PORTAL SECTION — light mode overrides
    ============================================================ */
    #portal .portal-feature-icon { background: rgba(5,7,15,0.07); }
    .portal-text .section-eyebrow { color: var(--blue); }

    /* ============================================================
       COMPLIANCE SECTION — light mode overrides
    ============================================================ */
    .comp-section .section-subtitle { color: rgba(5,7,15,0.6); }

    /* ============================================================
       MDM COMPARISON TABLE
    ============================================================ */
    .mdm-section {
      background: #f0f1f4;
      padding: 100px 0 110px;
    }
    .mdm-header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 56px;
    }
    .mdm-header h2 {
      font-family: var(--font-head);
      font-size: clamp(1.9rem, 3.5vw, 2.9rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.025em;
      color: var(--dark);
      margin-bottom: 18px;
    }
    .mdm-header p {
      font-size: 1rem;
      line-height: 1.65;
      color: rgba(5,7,15,0.55);
      max-width: 54ch;
      margin: 0 auto;
    }
    .mdm-table-wrap {
      max-width: 1160px;
      margin: 0 auto;
      background: #fff;
      border: 1px solid rgba(5,7,15,0.08);
      overflow: hidden;
      box-shadow: 0px 10px 0px var(--secloud-blue);
    }
    .mdm-table {
      width: 100%;
      border-collapse: collapse;
    }
    .mdm-table thead tr {
      border-bottom: 1px solid rgba(5,7,15,0.08);
    }
    .mdm-table thead th {
      padding: 18px 24px;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(5,7,15,0.60);
      text-align: left;
    }
    .mdm-table thead th.col-check { text-align: center; width: 110px; }
    .mdm-table tbody tr {
      border-bottom: 1px solid rgba(5,7,15,0.06);
      transition: background 150ms;
    }
    .mdm-table tbody tr:last-child { border-bottom: 0; }
    .mdm-table tbody tr:hover { background: rgba(5,7,15,0.018); }
    .mdm-table td {
      padding: 20px 24px;
      vertical-align: middle;
    }
    .mdm-cap {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--dark);
    }
    .mdm-why {
      font-size: 0.88rem;
      color: rgba(5,7,15,0.65);
      line-height: 1.5;
    }
    .mdm-why .hl { font-weight: 500; }
    .mdm-why .hl-blue  { color: var(--blue); }
    .mdm-why .hl-pink  { color: var(--pink); }
    .mdm-why .hl-green { color: var(--green); }
    .mdm-why .hl-orange{ color: var(--orange); }
    .col-check { text-align: center; }
    .chk-yes {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--dark);
    }
    .chk-yes svg { display: block; }
    .chk-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.5px solid rgba(5,7,15,0.18);
      color: rgba(5,7,15,0.28);
      font-size: 1rem;
      line-height: 1;
    }
    @media (max-width: 720px) {
      /* 2026 mobile pattern: don't shrink the table — break each row into a
         self-describing card. Each verdict is labelled in place, so the reader
         never has to map a tiny header back to a distant column. */
      .mdm-section { padding: 56px 0 60px; }
      .mdm-header { margin: 0 auto 28px; }
      .mdm-table thead { display: none; }

      .mdm-table-wrap {
        background: transparent;
        border: 0;
        overflow: visible;
      }
      .mdm-table,
      .mdm-table tbody { display: block; }

      .mdm-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        background: #fff;
        border: 1px solid rgba(5,7,15,0.08);
        padding: 12px 12px 11px;
        margin-bottom: 9px;
        transition: none;
      }
      .mdm-table tbody tr:hover { background: #fff; }
      .mdm-table tbody td { padding: 0; }

      /* Capability headline spans the full card width */
      .mdm-table tbody td.mdm-cap {
        grid-column: 1 / -1;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.01em;
        color: var(--dark);
      }

      /* Two labelled verdict tiles, side by side — compact inline label + mark */
      .mdm-table tbody td.col-check {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 7px 8px;
        text-align: center;
        border: 1px solid rgba(5,7,15,0.07);
        background: rgba(5,7,15,0.015);
      }
      .mdm-table tbody td.col-check::before {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(5,7,15,0.42);
      }
      .mdm-table tbody td.col-check:nth-of-type(2)::before { content: "Intune / MDM"; }
      .mdm-table tbody td.col-check:nth-of-type(3)::before { content: "Secloud"; }

      /* Smaller verdict marks on mobile to keep the tiles short */
      .mdm-table tbody td.col-check .chk-yes,
      .mdm-table tbody td.col-check .chk-no { width: 22px; height: 22px; }
      .mdm-table tbody td.col-check .chk-yes svg { width: 12px; height: 12px; }

      /* The Secloud column subtly "wins" — accent tint + side rule */
      .mdm-table tbody td.col-check:nth-of-type(3) {
        border-color: rgba(22,140,204,0.35);
        background: rgba(22,140,204,0.06);
        box-shadow: inset 2px 0 0 var(--blue);
      }
      .mdm-table tbody td.col-check:nth-of-type(3)::before { color: var(--blue); }

      /* Why-it-matters as a quiet footnote under the verdicts */
      .mdm-table tbody td.mdm-why {
        grid-column: 1 / -1;
        margin-top: 1px;
        padding-top: 9px;
        border-top: 1px solid rgba(5,7,15,0.07);
        font-size: 0.78rem;
        line-height: 1.45;
        color: rgba(5,7,15,0.6);
      }
    }

    /* ============================================================
       ABOUT PAGE — light sections now use the shared .brand-gradient-bg class
    ============================================================ */

    /* ============================================================
       ABOUT PAGE — subpage hero
    ============================================================ */
    .subpage-hero {
      background: var(--dark);
      min-height: 50vh;
      max-height: 100vh;
      display: flex;
      align-items: flex-end;
      padding: 130px 24px 19px;
      overflow: hidden;
      position: relative;
    }
    .hero-gradient-rule {
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--blue) 25%, var(--green) 50%, var(--pink) 75%, transparent);
      opacity: 0.45;
    }
    #aurora-about {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 0;
      mix-blend-mode: screen;
      filter: blur(7px);
      transform: scale(1.04);
      transform-origin: center;
    }
    .subpage-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 60% 30%, rgba(22,140,204,0.07) 0%, transparent 55%),
                  radial-gradient(ellipse at 30% 70%, rgba(125,193,68,0.05) 0%, transparent 50%);
      pointer-events: none;
      z-index: 1;
    }
    .about-hero-inner {
      max-width: 1160px; margin: 0 auto; width: 100%;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 64px; position: relative; z-index: 2;
      align-items: end;
      align-items: last baseline;
    }
    .about-hero-eyebrow {
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--green); margin-bottom: 20px;
      display: flex; align-items: center; gap: 10px;
    }
    .about-hero-eyebrow::before {
      content: '';
      display: inline-block; width: 20px; height: 1px; background: var(--green);
    }
    .about-hero-title {
      font-family: var(--font-head);
      font-size: clamp(3.2rem, 8vw, 6.8rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #fff;
      display: flex;
      flex-direction: column;
      line-height: 0.77;
    }
    .about-hero-title .gradient-line {
      background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      display: block;
    }
    .about-hero-right { padding-bottom: 4px; }
    .about-hero-right p {
      font-size: 1.1rem; line-height: 1.4; color: rgb(255,255,255);
      font-weight: 400; margin-bottom: 36px; max-width: 50ch;
    }
    .about-metrics {
      display: flex; gap: 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 28px;
    }
    .about-metric { flex: 1; padding-right: 32px; }
    .about-metric:not(:last-child) {
      border-right: 1px solid rgba(255,255,255,0.08); margin-right: 32px;
    }
    .about-metric-num {
      font-family: var(--font-head); font-size: 2.2rem; font-weight: 700;
      color: #fff; line-height: 1; letter-spacing: -0.02em;
    }
    .about-metric-lbl {
      font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: rgba(255,255,255,0.38); margin-top: 5px;
    }
    @media (max-width: 768px) {
      .subpage-hero {
        min-height: auto;
        padding: 120px 20px 56px;
        align-items: center;
        text-align: center;
      }
      .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: center;
        justify-items: center;
      }
      .about-hero-left,
      .about-hero-right { width: 100%; }
      .about-hero-eyebrow {
        justify-content: center;
        font-size: 0.68rem;
        margin-bottom: 14px;
      }
      .about-hero-title {
        font-size: clamp(2.6rem, 11vw, 4rem);
        line-height: 0.98;
      }
      .about-hero-right { padding-bottom: 0; }
      .about-hero-right p {
        max-width: none;
        font-size: 0.98rem;
        line-height: 1.65;
        margin: 0 auto 28px;
      }
      /* Metrics: stop forcing 3 equal flex columns — they overflow once
         "HEADQUARTERS" can't shrink. Let them wrap and shrink instead. */
      .about-metrics {
        flex-wrap: wrap;
        gap: 18px 0;
        justify-content: center;
        padding-top: 22px;
      }
      .about-metric {
        flex: 1 1 33%;
        min-width: 0;
        padding: 0 12px;
        text-align: center;
      }
      .about-metric:not(:last-child) {
        margin-right: 0;
        border-right: 1px solid rgba(255,255,255,0.08);
      }
      .about-metric-num { font-size: 1.55rem; }
      .about-metric-lbl {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        word-spacing: -0.05em;
      }
    }

    /* ============================================================
       ABOUT PAGE — origin story
    ============================================================ */
    #origin { padding: 120px 0; }
    .origin-grid {
      display: grid; grid-template-columns: 5fr 8fr;
      gap: 88px; align-items: start;
    }
    .origin-left { position: sticky; top: 100px; }
    .origin-index {
      font-family: var(--font-head); font-size: 7rem; font-weight: 700;
      color: rgba(5,7,15,0.05); line-height: 1; margin-bottom: -12px;
      letter-spacing: -0.04em; display: block;
    }
    .origin-left .section-eyebrow { color: var(--blue); }
    .origin-left .section-title { color: var(--dark); font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; }
    .origin-left .section-title .accent {
      background: linear-gradient(90deg, var(--blue), var(--green));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .origin-right .story-lead {
      font-size: 1.2rem; line-height: 1.75; color: rgba(5,7,15,0.80);
      font-weight: 400; margin-bottom: 28px; font-family: var(--font-head);
      letter-spacing: -0.01em;
    }
    .origin-right .story-body {
      font-size: 1rem; line-height: 1.85; color: rgba(5,7,15,0.68); font-weight: 400;
    }
    .origin-right .story-body p { margin-bottom: 20px; }
    .origin-right .story-body p:last-child { margin-bottom: 0; }
    .story-quote {
      margin: 36px 0;
      padding: 28px 32px 28px 28px;
      border-left: 3px solid var(--blue);
      background: rgba(22,140,204,0.04);
    }
    .story-quote p {
      font-family: var(--font-head); font-size: 1.08rem; font-weight: 600;
      line-height: 1.6; color: var(--dark); margin: 0;
    }
    .timeline-strip {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0; margin-top: 52px;
      border-top: 1px solid rgba(5,7,15,0.08);
    }
    .timeline-item { padding: 28px 24px 20px 0; }
    .timeline-item:not(:first-child) { padding-left: 24px; border-left: 1px solid rgba(5,7,15,0.08); }
    .timeline-year {
      font-family: var(--font-head); font-size: 1.8rem; font-weight: 700;
      color: var(--dark); line-height: 1; letter-spacing: -0.02em;
    }
    .timeline-dash {
      display: inline-block; width: 18px; height: 2px; background: var(--blue);
      margin: 8px 0; vertical-align: middle;
    }
    .timeline-desc {
      font-size: 0.82rem; color: rgba(5,7,15,0.52); line-height: 1.55; font-weight: 400;
    }
    @media (max-width: 880px) {
      .origin-grid { grid-template-columns: 1fr; gap: 48px; }
      .origin-left { position: static; }
      .origin-index { font-size: 4.5rem; }
      .timeline-strip { grid-template-columns: 1fr 1fr; }
      .timeline-item:nth-child(2) { padding-left: 24px; border-left: 1px solid rgba(5,7,15,0.08); }
      .timeline-item:nth-child(3) {
        padding-left: 0; border-left: 0; border-top: 1px solid rgba(5,7,15,0.08);
        padding-top: 20px; grid-column: span 2;
      }
    }
    @media (max-width: 480px) {
      .timeline-strip { grid-template-columns: 1fr; }
      .timeline-item { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid rgba(5,7,15,0.08); padding-top: 20px; grid-column: auto !important; }
      .timeline-item:first-child { border-top: 0; padding-top: 28px; }
    }

    /* ============================================================
       ABOUT PAGE — founders
    ============================================================ */
    #founders {
      background: var(--dark);
      padding: 120px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .founders-header { margin-bottom: 60px; }
    .founders-header .section-eyebrow { color: var(--orange); }
    .founders-header .section-title { color: #fff; }
    .founders-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    }
    /* Dossier card — dark mode, round B/W portrait head + spec ledger */
    .founder-card {
      --pc: var(--blue);
      position: relative;
      display: flex; flex-direction: column;
      padding: 36px 34px 28px;
      background: var(--mid);
      border: 1px solid rgba(255,255,255,0.10);
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.25);
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .founder-card:nth-child(2) { --pc: var(--green); }
    .founder-card::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
      background: linear-gradient(90deg, var(--pc), transparent 72%);
    }
    .founder-card:hover {
      border-color: rgba(255,255,255,0.24);
      box-shadow: 0 2px 8px rgba(5,7,15,0.25), 0 18px 44px rgba(5,7,15,0.40);
    }
    .fc-head { display: flex; align-items: center; gap: 26px; margin-bottom: 20px; }
    /* Fixed circle — the photo zooms/turns INSIDE it, the circle never resizes */
    .fc-media {
      position: relative; flex-shrink: 0;
      width: 256px; height: 256px;
      border-radius: 50%; overflow: hidden;
      background: rgba(255,255,255,0.06);
    }
    .fc-media img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      filter: grayscale(1) contrast(1.05) brightness(1.05);
      transform: scale(1.5);
      transition: transform 0.7s var(--ab-ease);
    }
    .founder-card:hover .fc-media img { transform: scale(1.7) rotate(3deg); }
    .founder-role {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc);
      margin-bottom: 10px;
    }
    .founder-role::before { content: ''; width: 18px; height: 1px; background: var(--pc); }
    .founder-name {
      font-family: var(--font-head); font-size: 1.7rem; font-weight: 700;
      color: #fff; margin: 0; letter-spacing: -0.015em;
      text-wrap: balance;
    }
    .founder-bio {
      font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.65); font-weight: 400;
    }
    /* Spec ledger — hairline-ruled key/value rows */
    .fc-ledger { margin: 22px 0 0; display: flex; flex-direction: column; }
    .fc-row {
      display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: baseline;
      padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.10);
    }
    .fc-row dt {
      font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45);
    }
    .fc-row dd { margin: 0; font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,0.80); font-weight: 500; }
    @media (max-width: 1180px) {
      .fc-row { grid-template-columns: 96px 1fr; }
      .founder-card { padding: 30px 26px 24px; }
      .fc-media { width: 200px; height: 200px; }
    }
    @media (max-width: 880px) {
      .founders-grid { grid-template-columns: 1fr; }
      .fc-media { width: 256px; height: 256px; }
    }
    @media (max-width: 480px) {
      .founder-card { padding: 26px 22px 22px; }
      .fc-head { gap: 18px; }
      .fc-media { width: 150px; height: 150px; }
      .founder-name { font-size: 1.4rem; }
    }

    /* ============================================================
       ABOUT PAGE — team
    ============================================================ */
    #team { padding: 120px 0; }
    .team-header { margin-bottom: 60px; }
    .team-header .section-eyebrow { color: var(--pink); }
    .team-header .section-title { color: var(--dark); }
    .team-header p {
      font-size: 1rem; line-height: 1.75; color: rgba(5,7,15,0.60);
      font-weight: 400; margin-top: 16px; text-align: center;
    }
    .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }

    .team-card {
      position: relative; display: flex; flex-direction: column;
      padding: 22px 22px 26px;
      background: rgba(255,255,255,0.32);
      border: 1px solid rgba(5,7,15,0.08);
      backdrop-filter: blur(4px);
      box-shadow: none;
      text-align: center;
      transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
      cursor: help;
    }
    .team-card:hover {
      border-color: rgba(5,7,15,0.18);
      background: rgba(255,255,255,0.80);
    }
    .team-card::before {
      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      opacity: 0; transition: opacity 0.35s;
      background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 20%),
        rgba(22,140,204,0.10), transparent 68%);
    }
    .team-card:hover::before { opacity: 1; }
    .team-card > * { position: relative; z-index: 1; }
    .tc-media { position: relative; width: 100%; aspect-ratio: 1 / 1; }
    /* Fixed circular clip — the photo zooms/turns inside, the circle never resizes */
    .tc-photo {
      position: absolute; inset: 0; display: block;
      border-radius: 50%; overflow: hidden;
    }
    .tc-photo img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
      filter: grayscale(1) contrast(1.04) brightness(1.04);
      --ty: 0%; --sc: 1.5; --sch: 1.7;
      transform: scale(var(--sc)) translateY(var(--ty));
      transition: transform 0.7s var(--ab-ease);
    }
    .team-card:hover .tc-photo img { transform: scale(var(--sch)) rotate(3deg) translateY(var(--ty)); }
    /* Per-photo framing nudge — lifts the image so the face centres in the circle */
    .tc-photo--up img { --ty: -5%; }
    .tc-photo--up2 img { --ty: -9%; }
    /* Per-photo base zoom (some portraits are already tightly framed) */
    .tc-photo--s11 img { --sc: 1.0; --sch: 1.15; }
    .tc-linkedin {
      position: absolute; right: 4%; bottom: 4%;
      width: 44px; height: 44px; border-radius: 50%;
      display: grid; place-items: center;
      background: #fff; color: var(--blue);
      box-shadow: 0 4px 14px rgba(9,7,29,0.18);
      transition: background 0.25s, color 0.25s, transform 0.25s;
    }
    .tc-linkedin:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
    .tc-linkedin svg { width: 18px; height: 18px; display: block; }
    .tc-info { padding-top: 18px; display: flex; flex-direction: column; flex: 1; }
    .team-name {
      font-family: var(--font-body); font-size: 1.2rem; font-weight: 600;
      color: var(--dark); line-height: 1.25; margin-bottom: 3px;
    }
    .team-role { font-family: var(--font-body); font-size: 0.95rem; color: rgba(5,7,15,0.55); }
    .team-role svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; transition: transform 0.25s ease; }
    /* Bio — lives inside the card box, under the name */
    .tc-bio {
      flex: 1;
      margin: 10px 0 0; padding: 12px 0 0;
      border-top: 1px solid rgba(5,7,15,0.08);
      font-size: 0.85rem; line-height: 1.7; color: rgba(5,7,15,0.66);
      text-align: left;
    }
    /* Join tile — dashed circle matching the portraits */
    .tj-media {
      position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
      border: 1.5px dashed rgba(5,7,15,0.28);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 14px; padding: 16%;
      transition: border-color 0.25s, background 0.25s;
    }
    .team-join {cursor: pointer !important;}
    .team-join:hover .tj-media { border-color: var(--blue); background: rgba(22,140,204,0.05); }
    .tj-plus {
      width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
      font-family: var(--font-body); font-size: 1.7rem; line-height: 1; color: var(--blue);
      border: 1.5px solid rgba(22,140,204,0.4);
      transition: transform 0.4s var(--ab-ease), background 0.25s, color 0.25s;
    }
    .team-join:hover .tj-plus { transform: rotate(90deg); background: var(--blue); color: #fff; }
    .tj-hint { font-size: 0.92rem; line-height: 1.5; color: rgba(5,7,15,0.55); }
    .team-join .team-role { color: var(--blue); font-weight: 500; }
    .team-join:hover .team-role svg { transform: translateX(4px); }
    @media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) {
      /* Narrow tiles: the join hint no longer fits inside the circle */
      .tj-hint { display: none; }
      .tj-media { gap: 0; }
      .tc-linkedin { width: 38px; height: 38px; }
      .tc-linkedin svg { width: 15px; height: 15px; }
      .team-card { padding: 16px 16px 20px; }
    }
    @media (max-width: 480px) {
      .team-grid { gap: 18px 12px; }
      .team-card { padding: 13px 13px 16px; }
      .tc-info { padding-top: 12px; }
      .team-name { font-size: 1.02rem; }
      .team-role { font-size: 0.85rem; }
      .tc-bio { font-size: 0.8rem; margin-top: 8px; padding-top: 10px; }
    }

    /* ============================================================
       ABOUT PAGE — mission / values
    ============================================================ */
    #mission {
      background: var(--dark);
      padding: 120px 0;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .mission-grid {
      display: grid; grid-template-columns: 5fr 7fr;
      gap: 96px; align-items: start;
    }
    .mission-left { position: sticky; top: 100px; }
    .mission-left .section-eyebrow { color: var(--green); }
    .mission-left .section-title { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 14px; text-align: left; }
    .mission-left p {
      font-size: 0.95rem; line-height: 1.75; color: rgba(255,255,255,0.55);
      margin-top: 20px; font-weight: 400;
    }
    .mission-cta {
      display: inline-flex; align-items: center; gap: 10px;
      margin-top: 36px; padding: 13px 26px;
      background: var(--blue); color: #fff;
      font-size: 0.9rem; font-weight: 600; font-family: var(--font-body);
      border: 0; transition: filter 200ms, transform 180ms; cursor: pointer;
    }
    .mission-cta:hover { filter: brightness(1.12); }
    .mission-cta .arrow { transition: transform 240ms; }
    .mission-cta:hover .arrow { transform: translateX(4px); }
    .values-list { display: flex; flex-direction: column; }
    .value-item {
      display: grid; grid-template-columns: 40px 1fr 24px;
      gap: 16px; align-items: start;
      padding: 32px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: background 0.2s;
    }
    .value-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
    .value-num {
      font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 0.18em;
      color: rgba(255,255,255,0.18); font-weight: 700; padding-top: 3px;
    }
    .value-body h3 {
      font-family: var(--font-head); font-size: 1.08rem; font-weight: 700;
      color: #fff; margin-bottom: 8px;
    }
    .value-body p {
      font-size: 0.88rem; color: rgba(255,255,255,0.52); line-height: 1.7; font-weight: 400;
    }
    .value-arrow {
      color: rgba(255,255,255,0.14); font-size: 1rem; padding-top: 2px;
      transition: color 0.2s, transform 0.2s;
    }
    .value-item:hover .value-arrow { color: var(--blue); transform: translateX(3px); }
    @media (max-width: 900px) {
      .mission-grid { grid-template-columns: 1fr; gap: 56px; }
      .mission-left { position: static; }
    }

    /* ============================================================
       ABOUT PAGE — location strip
    ============================================================ */
    #location {
      background: #f0f1f5;
      padding: 88px 0;
      border-top: 1px solid rgba(5,7,15,0.06);
    }
    .location-map {
      max-width: 1160px; margin: 0 auto; padding: 0;
    }
    .location-map iframe {
      display: block; width: 100%; height: 320px;
      border: 1px solid rgba(5,7,15,0.09);
      border-bottom: none;
      filter: grayscale(0.2);
    }
    .location-inner {
      max-width: 1160px; margin: 0 auto; padding: 0 24px;
      display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
      gap: 0;
      background: #fff;
      border: 1px solid rgba(5,7,15,0.09);
      overflow: hidden;
    }
    .location-left {
      display: flex; flex-direction: column; gap: 10px;
      padding: 48px;
      border-right: 1px solid rgba(5,7,15,0.09);
    }
    .location-label {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--green);
    }
    .location-address {
      font-family: var(--font-head); font-size: 1.5rem; font-weight: 700;
      color: var(--dark); line-height: 1.35;
    }
    .location-contacts {
      display: flex; flex-direction: column; gap: 4px;
      padding: 32px 48px; justify-content: center;
    }
    .location-contact {
      display: flex; align-items: center; gap: 14px;
      font-size: 0.95rem; color: rgba(5,7,15,0.65);
      padding: 12px 0;
      border-bottom: 1px solid rgba(5,7,15,0.07);
    }
    .location-contact:last-child { border-bottom: none; }
    .location-contact a { color: inherit; transition: color 0.2s; }
    .location-contact a:hover { color: var(--green); }
    .contact-icon {
      width: 36px; height: 36px; background: rgba(5,7,15,0.05);
      border: 1px solid rgba(5,7,15,0.09); display: flex;
      align-items: center; justify-content: center; font-size: 0.82rem;
      flex-shrink: 0;
    }
    @media (max-width: 720px) {
      .location-inner { grid-template-columns: 1fr; }
      .location-left { border-right: none; border-bottom: 1px solid rgba(5,7,15,0.09); padding: 36px; }
      .location-contacts { padding: 20px 36px 36px; }
    }
    .norway-badge {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 22px; background: #fff;
      border: 1px solid rgba(5,7,15,0.08);
    }
    .norway-badge-text { font-size: 0.85rem; color: rgba(5,7,15,0.60); font-weight: 400; line-height: 1.45; }
    .norway-badge-text strong { color: var(--dark); font-weight: 600; display: block; }

    /* ============================================================
       ============================================================
       ABOUT PAGE — 2026 REDESIGN LAYER
       Elevated, GPU-friendly effects. Everything below is additive
       and overrides the base about rules above (loaded later in the
       cascade). transform/opacity only; all motion is guarded by
       prefers-reduced-motion further down.
       ============================================================
       ============================================================ */

    /* ---- Shared easing / tokens for the redesign ---- */
    :root {
      --ab-ease: cubic-bezier(0.22, 1, 0.36, 1);
      --ab-grain: 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    }

    /* ============================================================
       HERO — cinematic CSS aurora mesh (no canvas, fully GPU)
    ============================================================ */
    /* Faint starfield — two layered radial-dot patterns */
    .ab-stars {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.55) 50%, transparent),
        radial-gradient(1.5px 1.5px at 70% 65%, rgba(255,255,255,0.45) 50%, transparent),
        radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,0.40) 50%, transparent),
        radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.40) 50%, transparent),
        radial-gradient(1px 1px at 33% 50%, rgba(255,255,255,0.30) 50%, transparent);
      background-size: 480px 480px, 560px 560px, 380px 380px, 620px 620px, 300px 300px;
      opacity: 0.7;
      mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    }
    /* Aurora mesh — three big blurred blobs that slowly breathe & drift */
    /* Aurora-style fire — a single canvas paints one flowing flame ribbon per
       colour. Mirrors the homepage aurora (additive, blurred, drifting) but
       smaller and self-contained; all motion is drawn in JS on the canvas. */
    .ab-fire {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      width: 100%; height: 100%;
      opacity: 0.95;
      mix-blend-mode: screen;
    }
    /* Grain over the hero for a filmic, premium texture */
    .ab-grain {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background-image: var(--ab-grain);
      opacity: 0.05;
      mix-blend-mode: overlay;
    }
    .subpage-hero .about-hero-inner { z-index: 3; }

    /* Eyebrow upgraded to a live "pill" with a pulsing dot */
    .about-hero-eyebrow {
      align-self: start;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.03);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      width: max-content;
    }
    .about-hero-eyebrow::before {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 0 rgba(125,193,68,0.55);
      animation: abPulse 2.4s ease-out infinite;
    }
    @keyframes abPulse {
      0%   { box-shadow: 0 0 0 0 rgba(125,193,68,0.55); }
      70%  { box-shadow: 0 0 0 8px rgba(125,193,68,0); }
      100% { box-shadow: 0 0 0 0 rgba(125,193,68,0); }
    }

    /* Kinetic headline — words rise + un-blur in sequence */
    .about-hero-title { font-size: clamp(3.4rem, 8.5vw, 7.2rem); }
    .about-hero-title .ab-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(0.42em);
      filter: blur(12px);
      animation: abWordIn 0.9s var(--ab-ease) forwards;
    }
    .about-hero-title .ab-word:nth-child(1) { animation-delay: 0.10s; }
    .about-hero-title .ab-word:nth-child(2) { animation-delay: 0.24s; padding: clamp(1.5rem, 1.5vw, 1.5rem) 0; }
    @keyframes abWordIn { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
    .about-hero-title .gradient-line {
      background: linear-gradient(100deg, var(--blue) 0%, var(--green) 40%, var(--pink) 80%, var(--blue) 100%);
      background-size: 220% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: abWordIn 0.9s var(--ab-ease) 0.24s forwards, abGradSlide 8s linear 1.1s infinite;
    }
    @keyframes abGradSlide { to { background-position: 220% 0; } }

    /* Metrics — odometer count-up + animated baseline */
    .about-metric-num.is-counting { font-variant-numeric: tabular-nums; }
    .about-metrics { position: relative; }
    .about-metrics::after {
      content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--pink));
      transition: width 1.1s var(--ab-ease) 0.3s;
    }
    .about-metrics.is-in::after { width: 100%; }

    /* Scroll cue */
    .ab-scrollcue {
      position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
      z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.4); font-weight: 600;
    }
    .ab-scrollcue span {
      width: 1px; height: 34px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
      animation: abCue 1.8s ease-in-out infinite;
      transform-origin: top;
    }
    @keyframes abCue { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

    /* ============================================================
       MARQUEE — values ticker (seamless, pure CSS)
    ============================================================ */
    .ab-marquee {
      background: var(--dark);
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 26px 0;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .ab-marquee-track {
      display: inline-flex; align-items: center; gap: 28px;
      white-space: nowrap; width: max-content;
      animation: abMarquee 32s linear infinite;
    }
    .ab-marquee:hover .ab-marquee-track { animation-play-state: paused; }
    @keyframes abMarquee { to { transform: translateX(-50%); } }
    .ab-marquee-track span {
      font-family: var(--font-head); font-weight: 700;
      font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: -0.01em;
      color: rgba(255,255,255,0.30);
    }
    .ab-marquee-track span.on { color: #fff; }
    .ab-marquee-track i {
      color: var(--green); font-style: normal; font-size: 0.8rem; opacity: 0.7;
    }
    .ab-marquee-track i:nth-of-type(3n+1) { color: var(--blue); }
    .ab-marquee-track i:nth-of-type(3n+2) { color: var(--pink); }

    /* ============================================================
       ORIGIN — sticky rail + animated timeline
    ============================================================ */
    #origin { padding: 140px 0; }
    .origin-left { position: sticky; top: 120px; }
    /* Vertical progress rail beside the sticky column */
    .origin-rail {
      position: absolute; left: -28px; top: 6px; bottom: 6px; width: 2px;
      background: rgba(5,7,15,0.08); overflow: hidden;
    }
    .origin-rail::after {
      content: ''; position: absolute; inset: 0; transform-origin: top;
      background: linear-gradient(to bottom, var(--blue), var(--green));
      transform: scaleY(var(--ab-progress, 0.06));
    }
    .origin-index {
      background: linear-gradient(120deg, rgba(22,140,204,0.10), rgba(125,193,68,0.05));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .story-quote {
      position: relative; overflow: hidden;
      background: linear-gradient(120deg, rgba(22,140,204,0.05), rgba(125,193,68,0.03));
    }
    .story-quote::before {
      content: '“'; position: absolute; top: -18px; right: 14px;
      font-family: var(--font-head); font-size: 6rem; line-height: 1;
      color: rgba(22,140,204,0.10);
    }
    /* Timeline nodes draw in on reveal */
    .timeline-item { position: relative; }
    .timeline-year {
      background: linear-gradient(120deg, var(--dark), var(--dark));
      transition: transform 0.5s var(--ab-ease);
    }
    .timeline-item .timeline-dash { transition: width 0.6s var(--ab-ease); }
    .timeline-strip.is-in .timeline-dash { animation: abDash 0.7s var(--ab-ease) forwards; }
    @keyframes abDash { from { width: 0; } to { width: 18px; } }

    /* ============================================================
       SPOTLIGHT + TILT cards (founders & team)
    ============================================================ */
    .founder-card {
      transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
      transform-style: preserve-3d;
      transition: transform 0.4s var(--ab-ease), border-color 0.3s, box-shadow 0.3s;
    }
    .founder-card.is-tilting { transition: border-color 0.3s, box-shadow 0.3s; }
    /* Cursor spotlight sheen — sits BEHIND the card content */
    .founder-card::before {
      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      opacity: 0; transition: opacity 0.3s;
      background:
        radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.10), transparent 60%),
        radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--pc, #168CCC) 14%, transparent), transparent 55%);
    }
    .founder-card:hover::before { opacity: 1; }
    /* Card content rides above the glow (accent bar stays on top via z-index 3) */
    .founder-card > * { position: relative; z-index: 1; }

    /* Founder social row — micro-buttons, bottom-aligned across cards */
    .founder-links { display: flex; gap: 10px; margin-top: auto; padding-top: 22px; }
    .founder-link {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
      color: rgba(255,255,255,0.65); padding: 8px 13px;
      border: 1px solid rgba(255,255,255,0.18); transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .founder-link:hover {
      color: #fff;
      border-color: color-mix(in srgb, var(--pc, #168CCC) 60%, transparent);
      background: color-mix(in srgb, var(--pc, #168CCC) 16%, transparent);
    }
    .founder-link svg { width: 13px; height: 13px; }

    /* Team "join us" tile — restyled as a roster tile (see ABOUT PAGE — team above) */

    /* ============================================================
       MISSION — aurora glow + scroll-active values
    ============================================================ */
    #mission { position: relative; overflow: hidden; }
    #mission .ab-mission-glow {
      position: absolute; z-index: 0; top: -20%; right: -10%;
      width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%;
      background: radial-gradient(circle, rgba(22,140,204,0.16), transparent 60%);
      filter: blur(40px); pointer-events: none;
      animation: abDrift2 26s var(--ab-ease) infinite;
    }
    #mission .container { position: relative; z-index: 1; }
    .value-item {
      position: relative; padding-left: 16px;
      transition: background 0.3s, padding-left 0.3s var(--ab-ease);
    }
    .value-item::before {
      content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 2px;
      background: linear-gradient(var(--blue), var(--green)); transform: scaleY(0);
      transform-origin: top; transition: transform 0.4s var(--ab-ease);
    }
    .value-item.is-active::before, .value-item:hover::before { transform: scaleY(1); }
    .value-item.is-active { background: rgba(255,255,255,0.02); padding-left: 24px; }
    .value-item.is-active .value-num { color: var(--green); }
    .value-num {
      font-size: 1.4rem !important; letter-spacing: -0.02em !important;
      -webkit-text-fill-color: transparent;
      background: linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
      -webkit-background-clip: text; background-clip: text;
      transition: background 0.3s;
    }
    .value-item.is-active .value-num {
      background: linear-gradient(120deg, var(--green), var(--blue));
      -webkit-background-clip: text; background-clip: text;
    }

    /* ============================================================
       STATEMENT — From Norway, for the world (quote)
    ============================================================ */
    /* Bridge — the note sits between #founders (dark) and #team (light),
       pulled up into the dark and down into the light so it spans the seam. */
    .founder-bridge {
      position: relative;
      z-index: 20;
      padding: 0 30px;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }
    .founder-bridge .founder-note { pointer-events: auto; }
    .founder-note {
      position: relative;
      max-width: 620px;
      margin: -96px auto -96px;
      background: #fffdf6;
      color: var(--dark);
      padding: 48px 52px;
      box-shadow:
        0 1px 2px rgba(9,7,29,0.06),
        0 24px 60px rgba(9,7,29,0.24);
      transform: rotate(-1.2deg);
      border: 1px solid rgba(5,7,15,0.06);
    }
    .founder-note::before {
      content: '“';
      position: absolute; top: 4px; left: 22px;
      font-family: var(--font-head); font-weight: 700;
      font-size: 5rem; line-height: 1; color: rgba(5,7,15,0.10);
    }
    .founder-note-text {
      font-family: var(--font-head); font-weight: 700;
      font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.3;
      letter-spacing: -0.015em; margin: 0;
    }
    .founder-note-text span { color: var(--green); }
    .founder-note-sign {
      margin: 22px 0 0;
      font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
      color: rgba(5,7,15,0.45);
    }
    @media (max-width: 640px) {
      .founder-note { padding: 36px 32px; transform: rotate(-1deg); margin: -70px auto -70px; }
    }

    /* ============================================================
       CTA BAND — gradient finale with magnetic button
    ============================================================ */
    .ab-cta { position: relative; background: var(--dark); padding: 120px 0; overflow: hidden; text-align: center; }
    .ab-cta-aurora {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 50% 60% at 20% 30%, rgba(125,193,68,0.18), transparent 60%),
        radial-gradient(ellipse 50% 60% at 80% 70%, rgba(230,49,143,0.16), transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(22,140,204,0.14), transparent 65%);
      filter: blur(30px);
    }
    .ab-cta .container { position: relative; z-index: 1; }
    .ab-cta-eyebrow {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--green); margin-bottom: 18px;
    }
    .ab-cta h2 {
      font-family: var(--font-head); font-weight: 700;
      font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.06; letter-spacing: -0.025em;
      color: #fff; max-width: 18ch; margin: 0 auto;
    }
    .ab-cta h2 span {
      background: linear-gradient(100deg, var(--blue), var(--green), var(--pink));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .ab-cta p { margin: 22px auto 0; max-width: 52ch; color: rgba(255,255,255,0.6); font-size: 1.05rem; line-height: 1.7; font-weight: 400; }
    .ab-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
    .ab-cta-ghost {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 15px 28px; font-size: 0.92rem; font-weight: 600;
      color: #fff; border: 1px solid rgba(255,255,255,0.2);
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .ab-cta-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }
    [data-magnetic] { will-change: transform; }

    /* ============================================================
       SCROLL-DRIVEN reveals (native, progressive enhancement)
    ============================================================ */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .ab-anim {
          opacity: 0; transform: translateY(26px);
          animation: abReveal both ease-out;
          animation-timeline: view();
          animation-range: entry 0% entry 42%;
        }
        @keyframes abReveal { to { opacity: 1; transform: translateY(0); } }
      }
    }
    /* When the native timeline isn't supported, .ab-anim relies on the .reveal
       observer fallback if also tagged; otherwise it stays visible. */
    @supports not (animation-timeline: view()) {
      .ab-anim { opacity: 1; transform: none; }
    }

    /* ============================================================
       Flat, sharp-edged system — keep new elements consistent
    ============================================================ */
    .about-hero-eyebrow,
    .ab-cta-ghost,
    .founder-link { border-radius: 0 !important; }

    /* ============================================================
       RESPONSIVE — about redesign
    ============================================================ */
    @media (max-width: 980px) {
      .origin-rail { display: none; }
    }
    @media (max-width: 768px) {
      .subpage-hero { min-height: auto; padding: 130px 20px 72px; }
      .ab-aurora { filter: blur(44px) saturate(120%); opacity: 0.8; }
      .about-hero-eyebrow { align-self: center; }
      .ab-scrollcue { display: none; }
      .ab-statement { min-height: 64vh; }
      .ab-statement-overlay {
        background:
          linear-gradient(180deg, rgba(5,7,15,0.55) 0%, rgba(5,7,15,0.82) 100%);
      }
      .ab-statement-h { max-width: none; }
      .ab-cta { padding: 88px 0; }
    }

    /* ============================================================
       REDUCED MOTION — disable all decorative motion
    ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      .ab-blob, .ab-marquee-track, .about-hero-title .ab-word,
      .about-hero-title .gradient-line, .about-hero-eyebrow::before,
      .ab-scrollcue span, #mission .ab-mission-glow {
        animation: none !important;
      }
      .about-hero-title .ab-word { opacity: 1; transform: none; filter: none; }
      .ab-statement-bg img { transform: none; }
      .founder-card { transform: none !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    /* ============================================================
       HOME — Pitch bento (staggered melt geometry, image-2 layout)
       Moved out of home.html inline <style> (kept verbatim; appended
       last so cascade order matches the previous inline-after-link).
    ============================================================ */
    /* Layout canvas: text overlays top-left, cards stagger underneath */
    .pitch-layout {
      display: block;
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
    }
    .pitch-header {
      position: absolute;
      top: 15%;
      left: 0;
      width: 60%;
      margin: 0;
      text-align: left;
      z-index: 3;
    }
    .pitch-header .section-title { margin: 0 0 16px; }
    .pitch-header .section-subtitle { margin: 0; max-width: 420px; }

    .pitch-bento {
      position: relative;
      display: block;
      width: 100%;
      max-width: none;
      margin: 0;
      filter: drop-shadow(0 0 0.5px rgba(5,7,15,0.16)) drop-shadow(0 24px 48px rgba(5,7,15,0.13));
    }
    /* Roles "square" — anchored top-right; rounded outer corners, sharp inner */
    .pitch-roles-card {
      width: 30%;
      margin: 0 0 -1px auto;
      align-self: auto;
      box-shadow: none;
      /* bottom-left stays sharp because it melts into the output card below. */
      border-radius: 32px 32px 32px 0;
    }
    /* Concave filler — melts roles' lower-left edge down into the rectangle */
    .pitch-roles-card::before {
      content: "";
      position: absolute;
      left: -46px;
      bottom: 0;
      width: 46px;
      height: 46px;
      background: #fff;
      -webkit-mask: radial-gradient(circle 46px at 0 0, transparent 0 46px, #000 47px);
              mask: radial-gradient(circle 46px at 0 0, transparent 0 46px, #000 47px);
    }
    /* Output "rectangle" — wide, anchored bottom-left; rounded outer corners */
    .pitch-output-card {
      width: 80%;
      margin: 0 auto 0 0;
      align-self: auto;
      /* top-right stays sharp (melts into roles). */
      border-radius: 32px 0 32px 32px;
    }
    /* Concave filler — rounds the notch's inner corner (rectangle top-right ↔ square bottom) */
    .pitch-output-card::after {
      content: "";
      position: absolute;
      right: -46px;
      top: 0;
      width: 46px;
      height: 46px;
      background: #fff;
      -webkit-mask: radial-gradient(circle 46px at 100% 100%, transparent 0 46px, #000 47px);
              mask: radial-gradient(circle 46px at 100% 100%, transparent 0 46px, #000 47px);
    }

    /* Snake flash — animated gradient outline that laps the fused silhouette on role change */
    .pitch-snake {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 6;
    }
    .pitch-snake-path {
      fill: none;
      stroke: url(#pitchSnakeGrad);
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
    }
    .pitch-text {
      transition: opacity 0.14s ease;
    }
    .pitch-text.is-fading { opacity: 0; }
    .pitch-text.is-typing::after {
      content: "";
      display: inline-block;
      width: 2px;
      height: 1.05em;
      margin-left: 2px;
      vertical-align: -0.15em;
      background: currentColor;
      animation: pitchCaret 0.6s steps(1) infinite;
    }
    @keyframes pitchCaret { 0%,100%{opacity:0.75} 50%{opacity:0} }

    @media (max-width: 880px) {
      .pitch-header {
        position: static;
        width: 100%;
        text-align: center;
        margin: 0 0 32px;
      }
      .pitch-header .section-subtitle { margin: 0 auto; }
      .pitch-bento { max-width: 460px; margin: 0 auto; }
      .pitch-roles-card { width: 58%; }
      .pitch-output-card { width: 84%; }
    }
    @media (max-width: 680px) {
      .pitch-roles-card { width: 100%; margin: 0; border-radius: 0; }
      .pitch-roles-card::before { display: none; }
      .pitch-output-card { width: 100%; margin: 0; border-radius: 0; }
      .pitch-output-card::after { display: none; }
    }

    /* ============================================================
       HOME — Added sections: proof / trial / FAQ (scoped, additive)
       Moved out of home.html inline <style> (kept verbatim).
    ============================================================ */
    /* shared background now lives on the .brand-gradient-bg class above */

    /* ---------- PROOF / VERIFICATION (light) ---------- */
    .hp-proof { padding: 120px 0; position: relative; }
    .hp-proof-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
    .hp-proof .section-eyebrow { color: var(--green); margin-bottom: 14px; }
    .hp-proof .section-title { color: var(--dark); }
    .hp-proof-quote {
      max-width: 860px; margin: 0 auto;
      background: rgba(255,255,255,0.66);
      border: 1px solid rgba(5,7,15,0.10);
      border-left: 3px solid var(--green);
      border-radius: 0; padding: 44px 48px; position: relative;
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .hp-proof-badge {
      display: inline-block; font-weight: 700;
      letter-spacing: 0.12em; font-size: 0.72rem; color: var(--green);
      border: 1px solid rgba(125,193,68,0.45); border-radius: 0;
      padding: 5px 12px; margin-bottom: 22px;
    }
    .hp-proof-quote blockquote {
      margin: 0;
      font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.5;
      color: rgba(5,7,15,0.88); font-weight: 500;
    }

    /* ============================================================
       PRICING PAGES (Enterprises + Service Provider) — additive
       Built on the site's flat, sharp-edged card system: numbered
       section headers, gradient hairline bars, hover-lift cards and
       full-bleed dark CTA. No eyebrow pills, chips or dividers.
    ============================================================ */

    /* ---------- Section shell + numbered editorial header ---------- */
    .pricing-section { padding: 120px 0; position: relative; }
    .pricing-section--white { background: #fff; border-top: 1px solid rgba(5,7,15,0.06); }

    .pricing-sec-head {
      display: flex; flex-direction: column; align-items: center; margin: 0 0 52px;
    }
    .pricing-sec-index {
      font-family: var(--font-head); font-size: 3.2rem; font-weight: 700;
      line-height: 0.82; letter-spacing: -0.03em; color: rgba(5,7,15,0.12);
    }
    .pricing-sec-head .section-title { color: var(--dark); }
    .pricing-sec-head .section-title .accent {
      background: linear-gradient(90deg, var(--blue), var(--green));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .pricing-sec-lead {
      font-size: 1.06rem; line-height: 1.7; color: rgba(5,7,15,0.62);
      font-weight: 400; margin-top: 18px; text-align: center;
    }
    @media (max-width: 560px) {
      .pricing-sec-head { margin-bottom: 40px; }
      .pricing-sec-lead { margin-top: 14px; }
      .pricing-sec-index { font-size: 2.4rem; }
    }

    /* ---------- Custom pricing plan cards (native, on-brand) ---------- */
    .plan-grid { display: grid; gap: 24px; max-width: 1100px; margin: 0 auto; }
    .plan-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .plan-grid--3 { grid-template-columns: repeat(3, 1fr); }

    .plan-card {
      background: #ffffff80; border: 1px solid rgba(5,7,15,0.08);
      padding: 42px 36px 36px; position: relative; overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 1px 4px rgba(9,7,29,0.05), 0 8px 26px rgba(9,7,29,0.06);
      transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    }
    .plan-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green));
    }
    .plan-card:nth-child(2)::before { background: linear-gradient(90deg, var(--green), var(--orange)); }
    .plan-card:hover {
      transform: translateY(-5px); border-color: rgba(22,140,204,0.18);
      box-shadow: 0 2px 10px rgba(9,7,29,0.07), 0 18px 46px rgba(22,140,204,0.10);
    }

    .plan-name { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--dark); letter-spacing: -0.01em; }
    .plan-desc { font-size: 0.95rem; line-height: 1.65; color: rgba(5,7,15,0.6); font-weight: 400; margin-top: 10px; }
    .plan-price { display: flex; align-items: center; gap: 10px; margin: 26px 0 4px; }
    .plan-price .amount { font-family: var(--font-head); font-size: 3rem; font-weight: 700; color: var(--dark); line-height: 1; letter-spacing: -0.02em; }
    .plan-price .amount--sm { font-size: 1.9rem; }
    .plan-price .period { font-size: 0.86rem; color: rgba(5,7,15,0.55); line-height: 1.25; font-weight: 400; }
    .plan-billing { font-size: 0.8rem; color: rgba(5,7,15,0.45); margin-bottom: 28px; }

    .plan-cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 14px 26px; background: var(--blue); color: #fff;
      font-size: 0.95rem; font-weight: 600; font-family: var(--font-body);
      transition: filter 0.2s, transform 0.18s, box-shadow 0.2s; align-self: flex-start;
    }
    .plan-cta:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(22,140,204,0.32); }
    .plan-cta .arrow { transition: transform 0.22s; }
    .plan-cta:hover .arrow { transform: translateX(4px); }
    .plan-cta--ghost { background: transparent; color: var(--blue); border: 1px solid rgba(22,140,204,0.4); }
    .plan-cta--ghost:hover { background: rgba(22,140,204,0.06); filter: none; box-shadow: none; }

    .plan-feats-label {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(5,7,15,0.4); margin: 30px 0 16px;
    }
    .plan-feats { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; }
    .plan-feats li {
      display: flex; gap: 12px; align-items: flex-start;
      font-size: 0.92rem; line-height: 1.5; color: rgba(5,7,15,0.72); font-weight: 400;
    }
    @media (max-width: 768px) {
      .plan-feats li { text-align: left; }
      .plan-price { flex-direction: column; align-items: center; }
      .plan-cta, .plan-badge { align-self: center; }
    }
    .plan-check {
      flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(125,193,68,0.15); color: var(--green);
    }
    .plan-check svg { width: 11px; height: 11px; display: block; }

    /* Featured horizontal subscription card */
    .plan-feature-card {
      width: 100%; max-width: 1100px; margin: 0 auto; position: relative; overflow: hidden;
      display: grid; grid-template-columns: 1fr 1.15fr;
      background: #fff; border: 1px solid rgba(22,140,204,0.22);
      box-shadow: 0 2px 10px rgba(9,7,29,0.06), 0 22px 60px rgba(22,140,204,0.10);
    }
    .plan-feature-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--orange));
    }
    .plan-feature-main { padding: 50px 44px; border-right: 1px solid rgba(5,7,15,0.07); display: flex; flex-direction: column; }
    .plan-feature-list { padding: 50px 44px; background: #fafbfc; }
    .plan-badge {
      display: inline-block; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
      border: 1px solid rgba(22,140,204,0.35); padding: 5px 11px; margin-bottom: 22px; align-self: flex-start;
    }
    .plan-feature-list .plan-feats-label { margin-top: 0; }
    .plan-feature-list .plan-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 26px; }

    @media (max-width: 820px) {
      .plan-feature-card { grid-template-columns: 1fr; }
      .plan-feature-main { border-right: 0; border-bottom: 1px solid rgba(5,7,15,0.07); }
      .plan-feature-list .plan-feats { grid-template-columns: 1fr; }
      .plan-grid--3 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .plan-grid--2 { grid-template-columns: 1fr; }
      .plan-grid--3 { grid-template-columns: 1fr; }
      .plan-feature-main, .plan-feature-list { padding: 36px 26px; }
    }
    @media (max-width: 560px) { .pricing-section { padding: 88px 0; } }

    /* ---------- Service-provider: collaboration intro (origin-grid) ---------- */
    .collab-lead {
      font-family: var(--font-head); font-size: clamp(1.3rem, 2.6vw, 1.75rem);
      line-height: 1.5; color: var(--dark); font-weight: 600;
      letter-spacing: -0.01em; margin-bottom: 26px;
    }
    .collab-lead .accent {
      background: linear-gradient(90deg, var(--blue), var(--green));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .collab-body p {
      font-size: 1.02rem; line-height: 1.85; color: rgba(5,7,15,0.68);
      font-weight: 400; margin-bottom: 20px;
    }
    .collab-body p:last-child { margin-bottom: 0; }

    /* ---------- Service-provider: photo + narrative feature (home why-grid language) ---------- */
    .pricing-photo-grid {
      display: grid; grid-template-columns: 1.05fr 1fr;
      gap: 72px; align-items: center; max-width: 1100px; margin: 0 auto;
    }
    .pricing-photo-wrap { position: relative; overflow: hidden; }
    .pricing-photo-wrap img { width: 100%; height: 520px; object-fit: cover; display: block; }
    .pricing-photo-overlay {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(140deg, rgba(22,140,204,0.22), rgba(125,193,68,0.16) 52%, rgba(5,7,15,0.46));
    }
    .pricing-photo-text .section-title { color: var(--dark); }
    .pricing-photo-text .section-title .accent {
      background: linear-gradient(90deg, var(--blue), var(--green));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .pricing-photo-text .collab-lead { margin-top: 22px; }
    @media (max-width: 900px) {
      .pricing-photo-grid { grid-template-columns: 1fr; gap: 44px; }
      .pricing-photo-wrap img { height: 380px; }
    }
    @media (max-width: 560px) {
      .pricing-photo-wrap img { height: 300px; }
    }

    /* ---------- Service-provider: partner benefit cards (flat, numbered) ---------- */
    .partner-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
      max-width: 1060px; margin: 0 auto;
    }
    .partner-card {
      background: #fff; border: 1px solid rgba(5,7,15,0.08);
      padding: 38px 34px; position: relative; overflow: hidden;
      box-shadow: 0 1px 4px rgba(9,7,29,0.05), 0 6px 18px rgba(9,7,29,0.05);
      transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    }
    .partner-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
    .partner-card:nth-child(1)::after { background: linear-gradient(90deg, var(--blue), var(--green)); }
    .partner-card:nth-child(2)::after { background: linear-gradient(90deg, var(--green), var(--orange)); }
    .partner-card:nth-child(3)::after { background: linear-gradient(90deg, var(--orange), var(--pink)); }
    .partner-card:nth-child(4)::after { background: linear-gradient(90deg, var(--pink), var(--blue)); }
    .partner-card:hover {
      transform: translateY(-4px); border-color: rgba(22,140,204,0.18);
      box-shadow: 0 2px 8px rgba(9,7,29,0.07), 0 14px 36px rgba(22,140,204,0.09);
    }
    .partner-icon {
      width: 56px; height: 56px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-head); font-size: 1.35rem; font-weight: 700;
      color: #fff; margin-bottom: 26px;
    }
    .partner-icon svg { width: 26px; height: 26px; display: block; }
    .partner-card:nth-child(1) .partner-icon { background: linear-gradient(135deg, #168CCC, #0a5280); }
    .partner-card:nth-child(2) .partner-icon { background: linear-gradient(135deg, #7DC144, #497c1e); }
    .partner-card:nth-child(3) .partner-icon { background: linear-gradient(135deg, #F7AB1C, #a86e0e); }
    .partner-card:nth-child(4) .partner-icon { background: linear-gradient(135deg, #E6318F, #9a1860); }
    .partner-card h3 {
      font-family: var(--font-head); font-size: 1.25rem; font-weight: 700;
      color: var(--dark); margin-bottom: 10px; letter-spacing: -0.01em;
    }
    .partner-card p {
      font-size: 0.95rem; line-height: 1.7; color: rgba(5,7,15,0.6); font-weight: 400;
    }
    @media (max-width: 720px) { .partner-grid { grid-template-columns: 1fr; } }
    @media (max-width: 768px) { .partner-icon { margin: 0 auto 20px; } }

    /* ---------- Shared closing CTA — full-bleed dark band ---------- */
    .pricing-cta {
      background: var(--dark); padding: 120px 0;
      border-top: 1px solid rgba(255,255,255,0.05);
      position: relative; overflow: hidden;
    }
    .pricing-cta::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(38% 60% at 16% 8%,  rgba(22,140,204,0.20) 0%, transparent 60%),
        radial-gradient(38% 60% at 84% 16%, rgba(230,49,143,0.16) 0%, transparent 60%),
        radial-gradient(46% 70% at 72% 96%, rgba(125,193,68,0.14) 0%, transparent 62%),
        radial-gradient(38% 60% at 28% 92%, rgba(247,171,28,0.12) 0%, transparent 60%);
    }
    .pricing-cta .container { position: relative; z-index: 1; }
    .pricing-cta-inner { max-width: 760px; margin: 0 auto; text-align: center; }
    .pricing-cta-inner h2 {
      font-family: var(--font-head); font-weight: 700; color: #fff;
      font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em;
    }
    .pricing-cta-inner p {
      max-width: 56ch; margin: 20px auto 0;
      font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,0.6); font-weight: 400;
    }
    .pricing-cta-actions {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px;
    }
    @media (max-width: 560px) { .pricing-cta { padding: 84px 0; } }
    .hp-proof-quote figcaption { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; }
    .hp-proof-cite { font-weight: 700; color: var(--dark); font-size: 1rem; }
    .hp-proof-role { font-size: 0.85rem; color: rgba(5,7,15,0.55); }
    .hp-proof-link {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
      font-size: 0.9rem; font-weight: 600; color: var(--blue);
      transition: gap 0.2s, color 0.2s;
    }
    .hp-proof-link:hover { gap: 14px; color: var(--dark); }
    .hp-proof-creds {
      list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
      gap: 14px; max-width: 860px; margin: 32px auto 0; padding: 0;
    }
    .hp-proof-creds li {
      flex: 1 1 200px; border: 1px solid rgba(5,7,15,0.12); border-radius: 0;
      padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
      background: rgba(255,255,255,0.5);
    }
    .hp-cred-k { font-family: var(--font-head); font-weight: 700; color: var(--dark); font-size: 0.9rem; letter-spacing: 0.02em; }
    .hp-cred-v { font-size: 0.8rem; color: rgba(5,7,15,0.55); }

    /* ---------- FREE TRIAL CTA (brand gradient band) ---------- */
    .hp-trial { padding: 88px 0; position: relative; }
    .hp-trial-inner {
      position: relative; overflow: hidden; border-radius: 0;
      display: flex; align-items: center; justify-content: space-between;
      gap: 40px; flex-wrap: wrap; padding: 56px;
      background: linear-gradient(120deg, #168ccc 0%, #7dc144 52%, #f7ab1c 100%);
    }
    .hp-trial-inner::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(120% 140% at 100% 0%, rgba(230,49,143,0.55), transparent 60%);
    }
    .hp-trial-copy { position: relative; z-index: 1; max-width: 620px; }
    .hp-trial-eyebrow {
      text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem;
      font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 14px;
    }
    .hp-trial-title {
      font-family: var(--font-head); font-weight: 700;
      font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05;
      color: #fff; margin: 0 0 14px;
    }
    .hp-trial-title span { color: #05070f; }
    .hp-trial-sub { color: rgba(255,255,255,0.92); font-size: 1rem; line-height: 1.6; margin: 0; }
    .hp-trial-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
    .hp-trial-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      background: #05070f; color: #fff; font-weight: 600; font-size: 0.98rem;
      padding: 16px 28px; white-space: nowrap; border-radius: 0;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .hp-trial-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(5,7,15,0.35); }
    .hp-trial-btn svg { transition: transform 0.2s; }
    .hp-trial-btn:hover svg { transform: translateX(4px); }
    .hp-trial-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 14px 28px; font-weight: 600; font-size: 0.95rem; color: #fff;
      border: 1px solid rgba(255,255,255,0.6); border-radius: 0;
      transition: background 0.2s;
    }
    .hp-trial-ghost:hover { background: rgba(255,255,255,0.16); }

    /* ---------- FAQ ACCORDION (light, no JS via <details>) ---------- */
    .hp-faq { padding: 120px 0; }
    .hp-faq-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
    .hp-faq .section-eyebrow { color: var(--pink); margin-bottom: 14px; }
    .hp-faq .section-title { color: var(--dark); }
    .hp-faq-lede { color: rgba(5,7,15,0.62); font-size: 1.05rem; margin: 14px auto 0; max-width: 540px; }
    .hp-faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid rgba(5,7,15,0.12); }
    .hp-faq-item { border-bottom: 1px solid rgba(5,7,15,0.12); }
    .hp-faq-item > summary {
      list-style: none; cursor: pointer; display: flex; align-items: center;
      justify-content: space-between; gap: 24px; padding: 24px 4px;
      font-family: var(--font-head); font-weight: 600;
      font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--dark); transition: color 0.2s; text-align: left;
    }
    .hp-faq-item > summary::-webkit-details-marker { display: none; }
    .hp-faq-item > summary:hover { color: var(--blue); }
    .hp-faq-mark { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
    .hp-faq-mark::before, .hp-faq-mark::after {
      content: ""; position: absolute; background: var(--dark);
      transition: transform 0.25s ease, background 0.2s, opacity 0.2s;
    }
    .hp-faq-mark::before { top: 8px; left: 0; width: 18px; height: 2px; }
    .hp-faq-mark::after { top: 0; left: 8px; width: 2px; height: 18px; }
    .hp-faq-item[open] > summary { color: var(--blue); }
    .hp-faq-item[open] .hp-faq-mark::before { background: var(--blue); }
    .hp-faq-item[open] .hp-faq-mark::after { transform: rotate(90deg); opacity: 0; }
    .hp-faq-a { overflow: hidden; padding: 0 4px 26px; animation: hpFaqIn 0.28s ease; }
    .hp-faq-a p { color: rgba(5,7,15,0.66); font-size: 0.98rem; line-height: 1.7; margin: 0; max-width: 64ch; }
    .hp-faq-a a { color: var(--blue); font-weight: 600; }
    .hp-faq-a a:hover { text-decoration: underline; }
    @keyframes hpFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 760px) {
      .hp-proof, .hp-faq { padding: 80px 0; }
      .hp-proof-quote { padding: 32px 24px; }
      .hp-trial-inner { padding: 36px 28px; flex-direction: column; align-items: flex-start; }
      .hp-trial-actions { width: 100%; }
      .hp-trial-btn, .hp-trial-ghost { width: 100%; }
    }

    /* ============================================================
       PRODUCT + USE-CASE PAGES — reuse the partner-grid card system for
       any number of cards. The base rules only colour nth-child(1..4); these
       cycle the four brand accents so 5+ cards never render an unstyled white
       icon, and give an "Explore" affordance when a whole card is a link.
    ============================================================ */
    .partner-icon { background: linear-gradient(135deg, #168CCC, #0a5280); }
    .partner-card:nth-child(4n+1)::after { background: linear-gradient(90deg, var(--blue), var(--green)); }
    .partner-card:nth-child(4n+2)::after { background: linear-gradient(90deg, var(--green), var(--orange)); }
    .partner-card:nth-child(4n+3)::after { background: linear-gradient(90deg, var(--orange), var(--pink)); }
    .partner-card:nth-child(4n+4)::after { background: linear-gradient(90deg, var(--pink), var(--blue)); }
    .partner-card:nth-child(4n+1) .partner-icon { background: linear-gradient(135deg, #168CCC, #0a5280); }
    .partner-card:nth-child(4n+2) .partner-icon { background: linear-gradient(135deg, #7DC144, #497c1e); }
    .partner-card:nth-child(4n+3) .partner-icon { background: linear-gradient(135deg, #F7AB1C, #a86e0e); }
    .partner-card:nth-child(4n+4) .partner-icon { background: linear-gradient(135deg, #E6318F, #9a1860); }
    .partner-grid--4 { grid-template-columns: repeat(4, 1fr); max-width: 1160px; }
    @media (max-width: 980px) { .partner-grid--4 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .partner-grid--4 { grid-template-columns: 1fr; } }
    a.partner-card { color: inherit; }
    .card-more {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
      font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--blue); transition: gap 0.2s;
    }
    a.partner-card:hover .card-more { gap: 13px; }

    /* Standalone brand checklist (reuses .plan-feats / .plan-check outside a plan card) */
    .feature-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; max-width: 1000px; margin: 0 auto; }
    @media (max-width: 760px) { .feature-cols { grid-template-columns: 1fr; } }

    /* ============================================================
       CAP-LIST — flat editorial capability rows.
       An alternative presentation to the boxed .partner-grid cards for the
       product & use-case feature sections (keeps the same .partner-card /
       .partner-icon markup, just restyles the container to a hairline-ruled,
       icon-left ledger). The colourful brand icon chips are preserved; the
       card box, shadow, hover-lift and top gradient bar are removed.
    ============================================================ */
    .cap-list {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 0 72px; max-width: 1080px; margin: 0 auto;
    }
    .cap-list .partner-card {
      background: transparent; border: 0; box-shadow: none; overflow: visible;
      padding: 30px 0; align-self: stretch;
      display: grid; grid-template-columns: 46px 1fr; column-gap: 22px; row-gap: 8px;
      align-items: start;
      border-top: 1px solid rgba(5,7,15,0.10);
      transition: none;
    }
    .cap-list .partner-card:hover {
      transform: none; border-color: rgba(5,7,15,0.10); box-shadow: none;
    }
    .cap-list .partner-card::after { display: none; }
    .cap-list .partner-icon {
      width: 46px; height: 46px; border-radius: 12px; margin-bottom: 0;
      grid-row: 1 / span 2; align-self: start;
      transition: transform 0.25s ease;
    }
    .cap-list .partner-icon svg { width: 22px; height: 22px; }
    .cap-list .partner-card:hover .partner-icon { transform: translateY(-3px) rotate(-3deg); }
    .cap-list .partner-card h3 {
      grid-column: 2; align-self: center; margin: 0;
      font-size: 1.12rem; letter-spacing: -0.01em;
    }
    .cap-list .partner-card p { grid-column: 2; margin: 0; font-size: 0.92rem; line-height: 1.65; }
    @media (max-width: 720px) {
      .cap-list { grid-template-columns: 1fr; gap: 0; }
      .cap-list .partner-card { padding: 26px 0; }
    }
    @media (max-width: 768px) {
      .cap-list .partner-card h3, .cap-list .partner-card p { text-align: left; }
    }

    /* ============================================================
       LEGAL / DOC PAGES — long-form prose (Terms, Privacy, DPA).
       Clean single measure with a sticky in-page contents rail.
    ============================================================ */
    .legal-layout {
      display: grid; grid-template-columns: 220px 1fr;
      gap: 64px; max-width: 1080px; margin: 0 auto; align-items: start;
    }
    .legal-toc { position: sticky; top: 110px; }
    .legal-toc-label {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: rgba(5,7,15,0.4); margin-bottom: 16px;
    }
    .legal-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
    .legal-toc a {
      display: block; padding: 7px 0; font-size: 0.88rem; line-height: 1.4;
      color: rgba(5,7,15,0.6); border-left: 2px solid transparent; padding-left: 14px;
      transition: color 0.18s, border-color 0.18s;
    }
    .legal-toc a:hover { color: var(--dark); border-color: var(--blue); }
    .legal-meta {
      display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 34px;
      padding-bottom: 26px; border-bottom: 1px solid rgba(5,7,15,0.08);
      font-size: 0.85rem; color: rgba(5,7,15,0.5);
    }
    .legal-meta strong { color: var(--dark); font-weight: 600; }
    .legal-doc { max-width: 68ch; }
    .legal-doc h2 {
      font-family: var(--font-head); font-size: 1.4rem; font-weight: 700;
      color: var(--dark); letter-spacing: -0.01em; margin: 44px 0 14px;
      scroll-margin-top: 100px;
    }
    .legal-doc h2:first-child { margin-top: 0; }
    .legal-doc h3 {
      font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
      color: var(--dark); margin: 26px 0 8px;
    }
    .legal-doc p { font-size: 0.98rem; line-height: 1.75; color: rgba(5,7,15,0.72); margin: 0 0 15px; }
    .legal-doc ul { margin: 0 0 18px; padding-left: 20px; }
    .legal-doc li { font-size: 0.98rem; line-height: 1.7; color: rgba(5,7,15,0.72); margin-bottom: 7px; }
    .legal-doc a { color: var(--blue); font-weight: 500; }
    .legal-doc a:hover { color: var(--dark); }
    .legal-doc .legal-note {
      background: #f7f9fb; border: 1px solid rgba(5,7,15,0.07);
      border-left: 3px solid var(--blue); padding: 18px 22px; margin: 0 0 26px;
      font-size: 0.92rem; line-height: 1.7; color: rgba(5,7,15,0.7);
    }
    @media (max-width: 860px) {
      .legal-layout { grid-template-columns: 1fr; gap: 0; }
      .legal-toc { display: none; }
    }

    /* ---------- Help Center: search band + quick topic tiles ---------- */
    .help-search {
      max-width: 640px; margin: 0 auto; position: relative;
    }
    .help-search-field {
      display: flex; align-items: center; gap: 12px;
      background: #fff; border: 1px solid rgba(5,7,15,0.12);
      border-radius: 14px; padding: 15px 20px;
      box-shadow: 0 1px 4px rgba(9,7,29,0.05), 0 10px 30px rgba(9,7,29,0.06);
    }
    .help-search-field svg { width: 20px; height: 20px; color: rgba(5,7,15,0.4); flex-shrink: 0; }

/* ============================================================
   ABOUT HERO — team photo background (about.html only)
   Scoped to .subpage-hero--photo so other subpage heroes stay intact.
============================================================ */
.subpage-hero--photo { background: #05070f; padding: 300px 24px 19px; }
.subpage-hero--photo::before { display: none; }         /* drop the faint radial tint over the photo */
.subpage-hero--photo .ab-fire { opacity: 0.35; }        /* keep only a faint brand glow over the photo */

.subpage-hero--photo .sph-photo {
  position: absolute; inset: -18% 0; z-index: 0;
  pointer-events: none; will-change: transform;
}
.subpage-hero--photo .sph-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Faces sit in the upper-middle band — keep every face framed at any ratio. */
  object-position: 50% 44%;
}
.subpage-hero--photo .sph-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,15,0.32) 0%,
    rgba(5,7,15,0.01) 42%, rgba(5,7,15,0.32) 100%),
    linear-gradient(to bottom,
      rgba(5,7,15,0.77) 0%,
      rgba(5,7,15,0.01) 26%,
      rgba(5,7,15,0.05) 52%,
      rgba(5,7,15,0.12) 82%,
      rgba(5,7,15,0.77) 100%
    )
}
/* Hero title 50% transparent on this page. */
.subpage-hero--photo .about-hero-title,
.subpage-hero--photo .about-hero-title .ab-word { color: rgba(255,255,255,0.7); }

/* Phones: the wide team photo can't fit inside a tall "cover" crop without
   losing faces, so lay the hero out as a clean vertical card — a full-bleed
   photo on top (every face visible, no crop) with the title + intro stacked
   neatly below on the dark background. */
@media (max-width: 640px) {
  .subpage-hero--photo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 20px 48px;
    gap: 30px;
  }
  /* Photo becomes an in-flow, edge-to-edge window at the very top. It keeps a
     fixed 3:2 frame (full width shown, so every face stays in view) with an
     overscanned cover image the parallax JS can drift — same feel as desktop. */
  .subpage-hero--photo .sph-photo {
    position: relative;
    order: -1;
    width: 150%;
    height: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    will-change: transform;
  }
  .subpage-hero--photo .sph-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;     /* keep the faces in frame while it drifts */
    /* transform is driven by the parallax JS (about.js) */
  }
  /* The shade + aurora are only needed behind overlaid text (desktop). */
  .subpage-hero--photo .sph-shade,
  .subpage-hero--photo .ab-fire,
  .subpage-hero--photo .ab-grain { display: none; }
  /* Stack + centre the title and intro under the photo. */
  .subpage-hero--photo .about-hero-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
    align-items: center;
  }
  .subpage-hero--photo .about-hero-title {
    align-items: center;
    line-height: 0.9;
    font-size: clamp(2.6rem, 13vw, 4rem);
  }
  .subpage-hero--photo .about-hero-title .ab-word:nth-child(2) { padding: 0; }
  .subpage-hero--photo .about-hero-right { padding-bottom: 0; }
  .subpage-hero--photo .about-hero-right p { margin-bottom: 0; }
}
    .help-search-field input {
      border: 0; outline: 0; width: 100%; background: transparent;
      font-family: var(--font-body); font-size: 1rem; color: var(--dark);
    }
    .help-search-field input::placeholder { color: rgba(5,7,15,0.4); }
    .help-search-hint { margin-top: 14px; text-align: left; font-size: 0.88rem; color: rgba(255,255,255,0.55); }
    .help-search-hint a { color: #fff; font-weight: 500; }

    /* ============================================================
       404 — full-screen aurora hero with an oversized gradient code.
    ============================================================ */
    .nf-hero {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      padding: 130px 0 90px; text-align: center;
    }
    .nf-inner { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; padding: 0 24px; }
    .nf-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.5); font-weight: 700; margin: 0 0 6px;
    }
    .nf-code {
      font-family: var(--font-head); font-weight: 700; line-height: 0.88;
      font-size: clamp(6.5rem, 26vw, 17rem); letter-spacing: -0.04em; margin: 0;
      background: linear-gradient(120deg, var(--blue), var(--green) 38%, var(--orange) 70%, var(--pink));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .nf-title {
      font-family: var(--font-head); font-weight: 700; color: #fff;
      font-size: clamp(1.5rem, 4vw, 2.35rem); letter-spacing: -0.02em;
      margin: 10px 0 0; line-height: 1.14;
    }
    .nf-lead {
      color: rgba(255,255,255,0.62); font-size: 1.05rem; line-height: 1.7;
      margin: 20px auto 0; max-width: 52ch;
    }
    .nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }
    .nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 30px; }
    .nf-links a { font-size: 0.9rem; color: rgba(255,255,255,0.68); font-weight: 500; transition: color 0.18s; }
    .nf-links a:hover { color: #fff; }
    @media (max-width: 560px) { .nf-hero { padding: 110px 0 70px; } }

    /* ============================================================
       FOLDABLE / SQUARE (~1:1) — the unfolded-foldable viewport can land in one
       of two awkward zones:
         (a) 769-880px  — just above the mobile-burger cutoff, below desktop.
         (b) 881-1100px AND near-square (aspect <= 5:4) — wide enough that the
             desktop pitch switches to its side-by-side layout, but the screen
             is still square, so that layout (and the full nav) looks cramped.
       Both bands keep the nav on a single, balanced row and give the pitch the
       clean CENTRED stack sized for the square. The aspect-ratio guard on band
       (b) means true landscape laptops/desktops (aspect > 5:4) are excluded and
       left EXACTLY as they are. The pitch "snake" outline is traced by JS from
       the live card rects, so it follows the centred bento automatically.
    ============================================================ */
    /* (a) Narrow square band — tighten the nav hard so it fits one row. */
    @media (min-width: 769px) and (max-width: 880px) {
      .nav-inner { padding: 8px 16px; }
      .nav-logo img { height: 29px; }
      .nav-links { gap: 2px; }
      .nav-links > li > a { padding: 8px 10px; font-size: 0.83rem; }
      .nav-cta { gap: 8px; }
      .nav-cta .btn-ghost { padding: 9px 15px; font-size: 0.8rem; white-space: nowrap; }
      .nav-cta .btn-primary { padding: 10px 15px; font-size: 0.8rem; white-space: nowrap; }

      /* Pitch bento fills the square rather than the small 460px form. */
      .pitch-bento { max-width: 560px; }
    }

    /* (b) Wide-but-square band — reclaim the desktop side-by-side pitch into the
       centred stack, and let the nav breathe on its single row. */
    @media (min-width: 881px) and (max-width: 1100px) and (max-aspect-ratio: 5/4) {
      .nav-inner { padding: 10px 20px; }
      .nav-links > li > a { padding: 9px 12px; font-size: 0.9rem; }
      .nav-cta { gap: 10px; }
      .nav-cta .btn-ghost { padding: 9px 18px; white-space: nowrap; }
      .nav-cta .btn-primary { padding: 10px 20px; white-space: nowrap; }

      /* Pitch: desktop side-by-side -> centred stack, sized for the square. */
      .pitch-header {
        position: static;
        width: 100%;
        text-align: center;
        margin: 0 0 36px;
      }
      .pitch-header .section-subtitle { margin: 0 auto; }
      .pitch-bento { max-width: 600px; margin: 0 auto; }
      .pitch-roles-card { width: 58%; }
      .pitch-output-card { width: 84%; }
    }

    /* ============================================================
       STRIPE EMBEDS (pricing tables + buy buttons) & DEMO VIDEO
    ============================================================ */
    .stripe-embed {
      max-width: 1100px; margin: 32px auto 0; position: relative; overflow: hidden;
      background: #fff; border: 1px solid rgba(5,7,15,0.08);
      padding: 36px 36px 8px;
      box-shadow: 0 1px 4px rgba(9,7,29,0.05), 0 8px 26px rgba(9,7,29,0.06);
    }
    .stripe-embed::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--orange));
    }
    .stripe-embed-label {
      text-align: center; font-size: 0.85rem; color: rgba(5,7,15,0.55);
      margin: 0 0 16px;
    }
    .stripe-buy-grid {
      max-width: 1100px; margin: 0 auto; position: relative; overflow: hidden;
      background: #fff; border: 1px solid rgba(5,7,15,0.08);
      padding: 36px;
      box-shadow: 0 1px 4px rgba(9,7,29,0.05), 0 8px 26px rgba(9,7,29,0.06);
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px; justify-items: center; align-items: start;
    }
    .stripe-buy-grid::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--orange));
    }
    @media (max-width: 900px) { .stripe-buy-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .stripe-buy-grid { grid-template-columns: 1fr; } }
    @media (max-width: 640px) { .stripe-embed, .stripe-buy-grid { padding-left: 22px; padding-right: 22px; } }

    .demo-video-wrap { max-width: 860px; margin: 0 auto; }
    .demo-video {
      display: block; width: 100%; height: auto;
      background: #05070f;
      border: 1px solid rgba(5,7,15,0.10);
      box-shadow: 0 24px 60px rgba(5,7,15,0.18);
    }

    /* Feature-overview category headings (products page) */
    .feat-cat {
      font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
      color: var(--dark); margin: 38px 0 18px;
    }
    .reveal > .feat-cat:first-child { margin-top: 0; }