/* ─────────────────────────────────────────────
       ANIMATED GRADIENT TEXT
    ───────────────────────────────────────────── */
    @keyframes gradient-flow {
      0%   { background-position: 0% center; }
      100% { background-position: 200% center; }
    }

    .text-gradient {
      background: linear-gradient(90deg, #6e6e6a, #b5afa8, #e0d9d0, #b5afa8, #6e6e6a);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient-flow 4s linear infinite;
    }

    .text-gradient-light {
      background: linear-gradient(90deg, #7a7772, #c4bdb4, #7a7772);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient-flow 4s linear infinite;
    }

    /* ─────────────────────────────────────────────
       RESET + TOKENS
    ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── Palette ─────────────────────────────── */
      --dark:                  #111110;   /* near-black: dark section bg, primary buttons  */
      --light:                 #f5f2ee;   /* warm off-white: light section bg              */
      --light-surface:         #ede9e4;   /* slightly deeper warm: cards, upload zones     */
      --white:                 #ffffff;
      --surface:               #161614;   /* lifted dark: 3D model placeholders            */

      /* ── Text ────────────────────────────────── */
      --text-dark:             #111110;  /* primary on light          */
      --text-secondary:        #5c5a56;  /* secondary on light        */
      --text-tertiary:         #999690;  /* decorative / large labels */
      --text-secondary-light:  #8C8C88;  /* muted on dark             */
      --text-tertiary-light:   #555552;  /* muted on light            */
      --text-light:            #ffffff;  /* primary on dark           */

      /* ── Borders ─────────────────────────────── */
      --border-dark:            #ffffff1f;  /* dividers on dark sections  */
      --border-light:           #00000014;  /* dividers on light sections */
      --border-card:            #B5AEA6;   /* subtle card outline        */
      --border-subtle:          var(--border-card);  /* dashed upload zone         */

      /* ── Component tokens ────────────────────── */
      --toggle-bg:      var(--light-surface);
      --cta-card-bg:    #f5f2ee10;
      --cta-card-bg-h:  #f5f2ee30;
      --header-bg-d:    #f5f2ee85;
      --header-bg-m:    #f5f2ee50;

      /* ── Radii ───────────────────────────────── */
      --radius-sm:   4px;
      --radius-md:   12px;
      --radius-lg:   16px;
      --radius-xl:   32px;
      --radius-arch: 150px;
      --radius-pill: 999px;

      /* ── Typography ──────────────────────────── */
      --font-display: 'Satoshi', sans-serif;
      --font-body:    'Instrument Sans', sans-serif;
    }

    html, body { width: 100%; overflow-x: hidden; }
    body { background: var(--dark); font-family: var(--font-body); }

    /* ─────────────────────────────────────────────
       12-COLUMN GRID SYSTEM — 24px gutter
    ───────────────────────────────────────────── */
    .grid-container {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 48px;
      box-sizing: border-box;
    }

    .grid-row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
    }

    /* Span helpers */
    .col-1  { grid-column: span 1; }
    .col-2  { grid-column: span 2; }
    .col-3  { grid-column: span 3; }
    .col-4  { grid-column: span 4; }
    .col-5  { grid-column: span 5; }
    .col-6  { grid-column: span 6; }
    .col-7  { grid-column: span 7; }
    .col-8  { grid-column: span 8; }
    .col-9  { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }

    /* Start-position helpers */
    .col-start-1  { grid-column-start: 1; }
    .col-start-2  { grid-column-start: 2; }
    .col-start-3  { grid-column-start: 3; }
    .col-start-4  { grid-column-start: 4; }
    .col-start-5  { grid-column-start: 5; }
    .col-start-6  { grid-column-start: 6; }
    .col-start-7  { grid-column-start: 7; }
    .col-start-8  { grid-column-start: 8; }
    .col-start-9  { grid-column-start: 9; }
    .col-start-10 { grid-column-start: 10; }

    /* Tablet: tighten padding, keep 12 cols */
    @media (max-width: 1024px) {
      .grid-container { padding: 0 32px; }
      .services-grid  { padding: 0 32px; }
      .playground-s   { padding: 100px 32px; }
      .platform-s     { padding: 120px 32px 160px; }
      .hiw-s          { padding: 80px 32px 100px; }
      .pricing-s      { padding: 80px 32px 100px; }
      .faq-s          { padding: 80px 32px 72px; }
    }

    @media (max-width: 768px) {
      .grid-container { padding: 0 24px; }
      .grid-row { gap: 16px; }
    }

    /* ─────────────────────────────────────────────
       SHARED BUTTONS
    ───────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      border: 1px solid transparent;
      -webkit-font-smoothing: antialiased;
      position: relative;
      overflow: hidden;
      z-index: 1;
      transition: color 0.35s ease, border-color 0.35s ease, transform 0.1s;
    }
    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      transform: translateY(100%);
      transition: transform 0.35s ease;
    }
    .btn:hover::before { transform: translateY(0); }
    .btn:active { transform: scale(0.97); }

    .btn-dark    { background: var(--dark);  color: var(--text-light); }
    .btn-dark::before { background: var(--white); }
    .btn-dark:hover   { color: var(--dark); border-color: var(--dark); }

    .btn-light   { background: var(--white); color: var(--text-dark); }
    .btn-light::before { background: var(--dark); }
    .btn-light:hover   { color: var(--text-light); border-color: var(--white); }

    .btn-outline { background: transparent;  color: var(--text-light); border: 1px solid var(--white); }
    .btn-outline::before { background: var(--white); }
    .btn-outline:hover   { color: var(--dark); }

    /* ─────────────────────────────────────────────
       DESKTOP HERO
    ───────────────────────────────────────────── */
    .hero-desktop {
      position: relative;
      width: 100%;
      height: 95vh;
      min-height: 700px;
      background: var(--dark);
      overflow: hidden;
    }

    /* — Header — fixed, transitions between hero style and scrolled pill style */
    .header-d {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 65px;
      background: var(--header-bg-d);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      z-index: 200;
      transition:
        top            0.48s cubic-bezier(0.4, 0, 0.2, 1),
        width          0.48s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius  0.48s cubic-bezier(0.4, 0, 0.2, 1),
        background     0.48s ease,
        padding        0.48s ease;
    }

    /* Scrolled state — pill floating 40px from top */
    .header-d.scrolled {
      top: 40px;
      width: min(1344px, calc(100% - 96px));
      border-radius: var(--radius-pill);
      background: rgba(245, 242, 238, 0.20);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid #f5f2ee2e;
      box-shadow:
        inset 0 1px 0 #ffffff33,
        0 8px 32px #0000004d;
      padding: 0 32px;
      z-index: 200;
    }

    .logo {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 28px;
      color: var(--text-dark);
      text-decoration: none;
      letter-spacing: -0.02em;
    }

    .nav {
      display: flex;
      gap: 24px;
      list-style: none;
    }
    .nav a {
      font-size: 18px;
      line-height: 30px;
      color: var(--text-dark);
      text-decoration: none;
      transition: opacity 0.2s;
    }
    .nav a:hover { opacity: 0.55; }

    /* — Arches —
       Fixed top position (not centered) so CTAs always fit above the fold.
       Arches sit just below the header with a small gap.
    */
    .arches-wrap {
      position: absolute;
      top: 150px;
      left: 50%;
      transform: translateX(-50%);
      width: min(100% - 96px, 1344px);
      height: 450px;
      display: flex;
      gap: 24px;
      align-items: stretch;
    }

    .arch {
      position: relative;
      height: 100%;
      border-radius: var(--radius-arch) var(--radius-arch) 0 0;
      overflow: hidden;
      cursor: pointer;
      flex: 1 1 0;
      transition:
        flex-basis 0.78s cubic-bezier(0.4, 0, 0.2, 1),
        filter     0.55s ease;
      filter: grayscale(0.7) brightness(0.7);
    }

    /* Active / hovered arch = full colour */
    .arch.active { filter: grayscale(0) brightness(1); }

    /* Arch media — swap <img> for <video autoplay muted loop playsinline> when assets are ready */
    .arch img, .arch video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      display: block;
    }

    /* — Hero display text —
       top = arch_top (100px) + arch_height (400px) − overlap (82px) = 418px
       All three phrases render in this same container starting at the same x/y.
    */
    .hero-text {
      position: absolute;
      left: 64px;
      bottom: 104px;
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(56px, 6.5vw, 96px);
      line-height: 1.4;
      color: var(--text-secondary);
      mix-blend-mode: plus-lighter;
      -webkit-font-smoothing: antialiased;
      z-index: 10;
      white-space: nowrap;
    }

    /* Line masking — inner element animates up from below */
    .line-wrap  { display: block; overflow: hidden; }
    .line-inner { display: block; will-change: transform; }

    /* — CTAs — 40px below text, 48px between buttons */
    .hero-ctas {
      position: absolute;
      left: 48px;
      bottom: 40px;
      display: flex;
      gap: 24px;
      z-index: 20;
    }

    /* ─────────────────────────────────────────────
       MOBILE HERO
    ───────────────────────────────────────────── */
    .hero-mobile {
      display: none;
      position: relative;
      width: 100%;
      height: 100svh;
      min-height: 852px;
      background: var(--dark);
      overflow: hidden;
    }

    /* — Mobile header (pill) — fixed so it persists across all sections */
    .header-m {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      max-width: 345px;
      height: 48px;
      background: rgba(245, 242, 238, 0.10);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid rgba(245, 242, 238, 0.18);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.3);      border-radius: var(--radius-pill);
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      z-index: 200;
    }

    .logo-m {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      color: var(--text-dark);
    }

    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
    }
    .hamburger span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--text-dark);
      border-radius: 999px;
    }

    /* — Mobile arches —
       Flexbox with negative right margins to create the overlapping stack.
       Active arch expands to 232px; inactive arches shrink to 112.5px.
       Total width maths:
         arch widths (232 + 112.5 + 112.5 = 457) – 2×48px overlap = 361px ✓
    */
    .mobile-arches {
      position: absolute;
      top: 98px;
      left: 16px;
      width: 361px;
      height: 502px;
      display: flex;
      align-items: stretch;
    }

    .m-arch {
      position: relative;
      height: 100%;
      border-radius: var(--radius-arch) var(--radius-arch) 0 0;
      overflow: hidden;
      cursor: pointer;
      filter: grayscale(1) brightness(0.65);
      transition:
        flex-basis 0.72s cubic-bezier(0.4, 0, 0.2, 1),
        filter     0.55s ease;
      flex-shrink: 0;
    }
    .m-arch.active { filter: grayscale(0) brightness(1); }

    /* Default state: arch-3 (rightmost) starts active at 232px, others at 112.5px */
    .m-arch-1 { flex-basis: 112.5px; margin-right: -48px; z-index: 3; }
    .m-arch-2 { flex-basis: 112.5px; margin-right: -48px; z-index: 2; }
    .m-arch-3 { flex-basis: 232px;   z-index: 4; }

    .m-arch img, .m-arch video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    /* — Mobile hero text —
       Positioned lower so its top edge sits on the arch section.
       arch_bottom = 98 + 502 = 600px. bottom: 130px → text top ≈ 578px (22px inside arches).
    */
    .hero-m-text {
      position: absolute;
      left: 16px;
      bottom: 130px;
      width: 361px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 48px;
      line-height: 1.0;
      color: var(--text-secondary);
      mix-blend-mode: plus-lighter;
      -webkit-font-smoothing: antialiased;
      z-index: 10;
    }

    /* — Mobile CTAs — */
    .hero-m-ctas {
      position: absolute;
      bottom: 40px;
      left: 0; right: 0;
      display: flex;
      gap: 24px;
      padding: 0 16px;
      z-index: 20;
    }
    .hero-m-ctas .btn { flex: 1; }

    /* ─────────────────────────────────────────────
       RESPONSIVE BREAKPOINT
    ───────────────────────────────────────────── */
    /* Section show/hide moved after all section definitions — see below */

    /* ═══════════════════════════════════════════
       SECTION 2 — SERVICES / TABS (DESKTOP)
    ════════════════════════════════════════════ */
    .services-scroll-wrapper {
      /* 100vh pinned section + 100vh of scroll room so ScrollTrigger can
         scrub through the 2 tabs (tab 0 → tab 1) while services-desktop
         stays pinned at the top of the viewport. */
      height: 300vh;
      position: relative;
    }
    .services-desktop {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 900px;
      background: var(--dark);
      overflow: hidden;
    }

    /* Inner grid for services layout */
    .services-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      padding: 0 48px;
      align-content: center;
    }

    /* Left tab labels — vertically centred */
    .tabs-nav {
      grid-column: 1 / 6;
      align-self: center;
      margin-top: -48px;
      display: flex;
      flex-direction: column;
    }

    .tab-label {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 48px;
      line-height: 48px;
      color: var(--text-secondary-light);
      cursor: pointer;
      padding: 36px 0;
      transition: color 0.35s ease;
      -webkit-font-smoothing: antialiased;
      user-select: none;
    }
    .tab-label:first-child { padding-top: 0; }
    .tab-label:last-child  { padding-bottom: 0; }
    .tab-label.active      { color: var(--text-light); }
    .tab-label:not(.active):hover { color: rgba(255,255,255,0.55); }

    /* Right demo panel — right half of the section */
    .demo-panel {
      grid-column: 6 / 13;
      align-self: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24px;
    }

    /*
      3D Body mesh placeholder — FIXED size and position, does NOT change between tabs.
      Only the inner track pans (camera moves along the body).
      Replace with <canvas> / Three.js / Spline when the real asset is ready.
    */
    .body-model-clip {
      width: 100%;
      max-width: 520px;
      height: 420px;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: var(--radius-arch) var(--radius-arch) 8px 8px;
      position: relative;
    }

    /* Tall inner track — GSAP pans Y only (camera effect). Shape never changes. */
    .body-model-track {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 220%;
      will-change: transform;
    }

    /* The mesh block fills the full track width and stays fixed in size */
    .body-mesh-block {
      position: absolute;
      inset: 0;
      background: var(--surface);
      background-image:
        linear-gradient(rgba(200,200,195,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,200,195,0.08) 1px, transparent 1px);
      background-size: 32px 32px;
      overflow: hidden;
    }
    .body-mesh-block::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,0.07) 0%, transparent 60%);
      pointer-events: none;
    }
    .body-mesh-block::after {
      content: '3D MODEL — REPLACE';
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.15);
      white-space: nowrap;
    }

    /* Description + CTA sit below the model in the flex column */
    .demo-content {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .demo-desc-d {
      font-family: var(--font-body);
      font-size: 18px;
      line-height: 30px;
      color: var(--text-light);
      text-align: center;
      min-height: 60px;
    }
    .demo-cta-wrap { display: flex; justify-content: center; }

    /* Section title — 96px tall, bottom -48px so exactly half is below the fold */
    .services-title-d {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -0;
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(56px, 6.5vw, 96px);
      line-height: 1;
      color: var(--text-tertiary);
      white-space: nowrap;
      pointer-events: none;
      z-index: 5;
    }

    /* ═══════════════════════════════════════════
       SECTION 2 — SERVICES / TABS (MOBILE)
    ════════════════════════════════════════════ */
    .services-mobile-s {
      display: none;
      position: relative;
      width: 100%;
      height: 100svh;
      min-height: 852px;
      background: var(--dark);
      overflow: hidden;
    }

    /* Horizontal tabs strip wrapper — clips overflow. top accounts for fixed header (72px) */
    .tabs-strip-wrap {
      position: absolute;
      top: 96px;
      left: 0; right: 0;
      overflow: hidden;
      height: 38px;
    }

    /* The inner flex row — JS translates it to centre the active tab */
    .tabs-nav-m {
      display: flex;
      gap: 32px;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      will-change: transform;
    }

    .tab-label-m {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 28px;
      line-height: 28px;
      color: var(--text-secondary);
      cursor: pointer;
      white-space: nowrap;
      width: 198px;
      text-align: center;
      flex-shrink: 0;
      transition: color 0.3s ease;
      -webkit-font-smoothing: antialiased;
      user-select: none;
    }
    .tab-label-m.active { color: var(--text-light); }

    /* Mobile demo area */
    .demo-panel-m {
      position: absolute;
      top: 222px;
      left: 0; right: 0;
      height: 398px;
      overflow: hidden;
    }

    /* Inner track — same panning approach as desktop */
    .body-track-m {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 200%;
      will-change: transform;
    }

    .body-block-m {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 340px;
      height: 480px;
      border-radius: var(--radius-arch) var(--radius-arch) 0 0;
      background: var(--surface);
      background-image:
        linear-gradient(rgba(200,200,195,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,200,195,0.08) 1px, transparent 1px);
      background-size: 28px 28px;
      overflow: hidden;
      will-change: width, height;
    }
    .body-block-m::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,0.07) 0%, transparent 60%);
      pointer-events: none;
    }

    /* Mobile description + CTA */
    .demo-desc-m {
      position: absolute;
      top: 652px;
      left: 50%;
      transform: translateX(-50%);
      width: 313px;
      font-family: var(--font-body);
      font-size: 18px;
      line-height: 30px;
      color: var(--text-light);
      text-align: center;
    }
    .demo-cta-m {
      position: absolute;
      top: 766px;
      left: 50%;
      transform: translateX(-50%);
    }



    /* ═══════════════════════════════════════════
       SECTION 3 — GALLERY (DESKTOP)
       Tall wrapper provides scroll space for the pinned reveal.
       ScrollTrigger pins .gallery-desktop while the images animate in.
    ════════════════════════════════════════════ */
    .gallery-scroll-wrapper {
      /* 100vh section + 400vh scroll space for a slow, flowing animation */
      height: 500vh;
      position: relative;
    }

    .gallery-desktop-s {
      width: 100%;
      height: 100vh;
      min-height: 800px;
      background: var(--light);
      overflow: hidden;
      position: relative;
    }

    /* Title — sits at vertical center, NO z-index so images layer on top as they grow */
    .gallery-title-d {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(56px, 6.5vw, 96px);
      line-height: 2;
      color: var(--text-secondary-light);
      white-space: nowrap;
      pointer-events: none;
    }

    /* 4 × 2 grid — fluid columns, 24px gap, centred in section */
    .gallery-grid-d {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(100% - 96px, 1344px);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 24px;
      aspect-ratio: 1408 / 984;
    }

    .g-img {
      position: relative;
      overflow: hidden;
      border-radius: 0;
      /* opacity + transform (scale 1/3 → 1) driven by GSAP */
      will-change: opacity, transform;
    }
    .g-img img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    /* ═══════════════════════════════════════════
       SECTION 3 — GALLERY (MOBILE)
       3 rows, each driven horizontally by vertical scroll.
       Row 1 & 3: right→left. Row 2: left→right.
    ════════════════════════════════════════════ */
    .gallery-mobile-s {
      display: none;
      position: relative;
      width: 100%;
      height: 100svh;
      min-height: 852px;
      background: var(--light);
      overflow: hidden;
    }

    .gallery-title-m {
      position: absolute;
      top: 88px;
      left: 34px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 48px;
      line-height: 1;
      color: var(--text-secondary-light);
    }

    /* Each row: full-width clip window */
    .gallery-row-outer {
      position: absolute;
      left: 0; right: 0;
      height: 195px;
      overflow: hidden;
    }
    .gallery-row-1 { top: 187px; }
    .gallery-row-2 { top: 422px; }
    .gallery-row-3 { top: 657px; }

    /* Inner track — translateX applied here by JS */
    .gallery-row-track {
      display: flex;
      gap: 40px;
      height: 100%;
      will-change: transform;
    }

    .g-img-m {
      height: 195px;
      flex-shrink: 0;
      border-radius: 10px;
      overflow: hidden;
    }
    .g-img-m img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }

    /* Image widths per row matching Figma */
    .gallery-row-1 .g-img-m { width: 269px; }
    .gallery-row-2 .g-img-m { width: 166px; }
    .gallery-row-3 .g-img-m { width: 114.5px; }



    /* ═══════════════════════════════════════════
       SECTION 4 — PHOTO PLAYGROUND
       States: pg-empty → pg-ready → pg-scanning → pg-result
    ════════════════════════════════════════════ */

    /* ── Shared button extension ── */
    .btn-ghost {
      background: transparent;
      color: var(--text-dark);
      border: 1px solid var(--text-dark);
    }
    .btn-ghost::before { background: var(--dark); }
    .btn-ghost:hover   { color: var(--text-light); border-color: var(--dark); }
    .btn-sm    { padding: 10px 16px; font-size: 13px; }
    .btn-block { width: 100%; justify-content: center; }

    /* ── Desktop section ── */
    .playground-scroll-wrapper {
      /* 100vh pinned section + 100vh of scroll room so ScrollTrigger can
         hold playground-s pinned to the viewport while scroll advances. */
      height: 200vh;
      position: relative;
    }
    .playground-s {
      background: var(--light);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;
      min-height: 900px;
      padding: 80px 0;
      overflow: hidden;
    }

    .playground-inner {
      width: 100%;
      max-width: 1024px;
    }

    .playground-title {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(56px, 6.5vw, 96px);
      line-height: 1.4;
      color: var(--text-secondary-light);
      text-align: center;
      margin-bottom: 8px;
      -webkit-font-smoothing: antialiased;
    }

    .playground-sub {
      font-size: 18px;
      line-height: 30px;
      color: var(--text-secondary-light);
      text-align: center;
      margin-bottom: 48px;
      max-width: 740px;
      margin-left: auto;
      margin-right: auto;
    }

    .playground-content {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      align-items: flex-start;
    }

    /* ── Product grid — spans 7 columns ── */
    .product-grid {
      grid-column: 1 / 8;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, auto);
      gap: 24px;
    }

    .product-item {
      background: var(--light-surface);
      overflow: hidden;
      cursor: pointer;
      position: relative;
      aspect-ratio: 140 / 186;
      transition: box-shadow 0.22s, background 0.22s;
    }
    .product-item:hover { box-shadow: 0 0 0 2px rgba(17,17,16,0.25); }
    .product-item.selected {
      background: var(--white);
      border: 1px solid var(--border-card);
      box-shadow: 0 4px 4px 0 rgba(181, 174, 166, 0.75);;
    }
    .product-item img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }

    /* ── Upload zone — spans 5 columns ── */
    .upload-zone {
      grid-column: 8 / 13;
      width: 100%;
      align-self: stretch;
      position: relative;
      border: 1.5px dashed var(--border-subtle);
      background: var(--light);
      overflow: hidden;
      transition: background 0.4s, border-color 0.4s;
    }

    /* ── Photo layers ── */
    .upload-photo-blur,
    .upload-photo-sharp {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: none;
    }
    .upload-photo-blur { filter: blur(14px); transform: scale(1.08); }

    /* States where layers are visible */
    .upload-zone.pg-scanning .upload-photo-blur,
    .upload-zone.pg-scanning .upload-photo-sharp { display: block; }

    .upload-zone.pg-ready .upload-photo-blur { display: none; }
    .upload-zone.pg-ready .upload-photo-sharp { display: block; }

    /* ── Scan line ── */
    .scan-line {
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85) 15%, #fff 50%, rgba(255,255,255,0.85) 85%, transparent);
      box-shadow: 0 0 18px 6px rgba(255,255,255,0.65);
      top: 0;
      display: none;
      z-index: 5;
    }
    .upload-zone.pg-scanning .scan-line { display: block; }

    /* ── Drop card ── */
    .drop-card {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 250px;
      background: var(--header-bg-d);
      border-radius: var(--radius-md);
      padding: 18px 16px 14px;
      z-index: 20;
      text-align: center;
    }
    /* Empty: centred */
    .upload-zone.pg-empty .drop-card {
      top: 50%;
      transform: translate(-50%, -50%);
    }
    /* Ready: float near bottom */
    .upload-zone.pg-ready .drop-card {
      bottom: 18px;
      top: auto;
    }
    /* Scanning / result: hide card */
    .upload-zone.pg-scanning .drop-card,
    .upload-zone.pg-result   .drop-card { display: none; }

    .drop-card-title {
      font-size: 16px; font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .drop-card-sub {
      font-size: 13px; color: var(--text-dark);
      margin-bottom: 14px;
      line-height: 1.4;
    }
    .drop-card-btns { display: flex; gap: 8px; align-items: center; justify-content: center; }
    .drop-card-hint {
      font-size: 11px; color: var(--text-dark);
      margin-top: 8px; display: none;
    }
    .drop-card-hint.visible { display: block; }

    /* ── Result zone & polaroid ── */
    .upload-zone.pg-result {
      border-color: transparent;
      background: var(--white);
    }

    .polaroid-wrap {
      position: absolute;
      inset: 0;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }
    .upload-zone.pg-result .polaroid-wrap { display: flex; }

    .polaroid-card {
      background: var(--white);
      padding: 16px 16px 0;
      box-shadow: 0 3px 28px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.05);
    }
    .polaroid-photo {
      width: 240px; height: 290px;
      overflow: hidden; background: var(--light-surface);
    }
    .polaroid-photo img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .polaroid-caption {
      font-size: 11px; color: var(--text-muted-light);
      text-align: center; padding: 12px 0 16px;
      letter-spacing: 0.03em;
    }
    .polaroid-action-btns { display: flex; gap: 12px; }

    /* ── Tablet playground override ── */
    @media (max-width: 1024px) {
      .playground-inner { max-width: 100%; }
      .playground-content { grid-template-columns: 1fr; }
      .product-grid { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
      .upload-zone  { grid-column: 1 / -1; aspect-ratio: 3 / 2; align-self: auto; }
    }

    /* ── Mobile playground ── */
    .playground-mobile-s {
      display: none;
      background: var(--light);
      padding: 100px 24px 60px;
    }
    .playground-title-m {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 40px;
      line-height: 1.05;
      color: var(--text-secondary-light);
      margin-bottom: 16px;
      -webkit-font-smoothing: antialiased;
    }
    .playground-sub-m {
      font-size: 15px; line-height: 1.55;
      color: var(--text-tertiary-light); margin-bottom: 32px;
    }
    .product-grid-m {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    .product-item-m {
      height: 230px;
      background: var(--light-surface);
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow 0.22s, background 0.22s;
    }
    .product-item-m:active { box-shadow: 0 0 0 2px rgba(17,17,16,0.25); }
    .product-item-m.selected {
      background: var(--white);
      box-shadow: 0 4px 4px 0 rgba(181, 174, 166, 0.75);;
    }
    .product-item-m img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }

    /* Mobile upload zone */
    .upload-zone-m {
      width: 100%; height: 280px;
      position: relative;
      border: 1.5px dashed var(--border-subtle);
      background: var(--light-surface);
      overflow: hidden;
      transition: background 0.4s, border-color 0.4s;
    }
    .upload-zone-m.pg-result { border-color: transparent; background: var(--white); }

    .upload-photo-blur-m,
    .upload-photo-sharp-m {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: none;
    }
    .upload-photo-blur-m { filter: blur(12px); transform: scale(1.07); }
    .upload-zone-m.pg-scanning .upload-photo-blur-m,
    .upload-zone-m.pg-scanning .upload-photo-sharp-m { display: block; }
    .upload-zone-m.pg-ready .upload-photo-blur-m { display: none; }
    .upload-zone-m.pg-ready .upload-photo-sharp-m { display: block; }

    .scan-line-m {
      position: absolute; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9) 15%, #fff 50%, rgba(255,255,255,0.9) 85%, transparent);
      box-shadow: 0 0 12px 4px rgba(255,255,255,0.65);
      top: 0; display: none; z-index: 5;
    }
    .upload-zone-m.pg-scanning .scan-line-m { display: block; }

    .drop-card-m {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 220px;
      background: var(--header-bg-d);
      border-radius: var(--radius-sm);
      padding: 12px;
      z-index: 20;
    }
    .upload-zone-m.pg-ready .drop-card-m {
      top: auto; bottom: 14px;
      transform: translateX(-50%);
    }
    .upload-zone-m.pg-scanning .drop-card-m,
    .upload-zone-m.pg-result   .drop-card-m { display: none; }

    .polaroid-wrap-m {
      position: absolute; inset: 0;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }
    .upload-zone-m.pg-result .polaroid-wrap-m { display: flex; }

    .polaroid-card-m {
      background: var(--white);
      padding: 10px 10px 0;
      box-shadow: 0 3px 20px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.05);
    }
    .polaroid-photo-m { width: 140px; height: 160px; overflow: hidden; background: var(--light-surface); }
    .polaroid-photo-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .polaroid-caption-m {
      font-size: 9px; color: var(--text-muted-light);
      text-align: center; padding: 8px 0 10px;
      letter-spacing: 0.03em;
    }
    .polaroid-action-btns-m { display: flex; gap: 8px; }



    /* ═══════════════════════════════════════════
       SECTION 5 — PLATFORM  (dark, two blocks)
       Cards start below, parallax up to settle under each heading.
    ════════════════════════════════════════════ */
    .platform-s {
      background: var(--dark);
      padding: 0;
      position: relative;
      /* overflow: hidden removed — it clipped ScrollTrigger's pinned .platform-block
         (each block is individually pinned by initPlatform, see script). */
    }
    #platformCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    /* Tall wrapper creates the scroll distance used while .platform-block is
       pinned. 200vh = 100vh visible + 100vh of scroll travel. Animations finish
       partway through, then elements hold in place before the next block. */
    .platform-scroll-wrapper {
      height: 200vh;
      position: relative;
    }

    .platform-block {
      max-width: 1440px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      padding: 140px 32px;
      min-height: 100vh;
      box-sizing: border-box;
    }

    .platform-title {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(56px, 6.5vw, 96px);
      line-height: 1.4;
      color: var(--text-tertiary);
      margin-bottom: 8px;
      -webkit-font-smoothing: antialiased;
    }

    .platform-sub {
      font-size: 18px;
      line-height: 30px;
      color: var(--text-light);
      max-width: 650px;
      margin: 0 auto 88px;
    }

    /* Card row — centred, grid-aware gap */
    .platform-cards {
      display: flex;
      justify-content: center;
      gap: 24px;
      position: relative;
    }
    .platform-cards::before {
      content: '';
      position: absolute;
      inset: -80px -120px;
      pointer-events: none;
      z-index: -1;
    }

    /* Individual card */
    .pcard {
      width: 300px;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      flex-shrink: 0;
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      /* opacity + y set by GSAP */
    }
    .pcard::before {
      content: '';
      position: absolute;
      inset: 0;
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      pointer-events: none;
    }
    .pcard:hover {
      transform: translateY(-6px);
    }

    .pcard-label {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      color: var(--text-secondary-light);
      line-height: 1;
    }

    .pcard-img {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .pcard-img img {
      max-width: 85%;
      max-height: 85%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    /* Mobile overrides */
    /* ═══════════════════════════════════════════
       SECTION 6 — HOW IT WORKS
       Light cream, 100vh. Toggle switches Shopify ↔ Custom integration.
       Desktop: 3 columns, text "waterfalls" diagonally (different padding-top).
       Mobile: 3 rows stacked with horizontal dividers.
    ════════════════════════════════════════════ */
    .hiw-scroll-wrapper {
      height: 400vh;
      position: relative;
    }
    .hiw-s {
      background: var(--light);
      position: relative;
      z-index: 1;
      height: 100vh;
      padding: 150px 48px 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    .hiw-inner {
      max-width: 1440px;
      margin: 0 auto;
    }

    .hiw-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 40px;
    }

    .hiw-title {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(48px, 5.5vw, 80px);
      line-height: 1.2;
      color: var(--text-secondary);
      -webkit-font-smoothing: antialiased;
    }

    /* ── Toggle pill ── */
    .hiw-toggle {
      display: flex;
      background: var(--toggle-bg);
      border-radius: 999px;
      padding: 8px;
      flex-shrink: 0;
      margin-top: 8px; /* align vertically with title cap */
    }

    .hiw-tab {
      height: 40px;
      padding: 0 18px;
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      color: var(--text-muted);
      background: transparent;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.25s, color 0.25s, box-shadow 0.25s;
    }

    .hiw-tab.active {
      background: var(--white);
      color: var(--dark);
      box-shadow: 0 1px 5px rgba(0,0,0,0.13), 0 0 0 0.5px rgba(0,0,0,0.06);
    }

    /* ── CTA ── */
    .hiw-cta { display: flex; justify-content: center; margin-bottom: 40px; }
    #hiwCtaBtn { gap: 10px; }
    .hiw-cta-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; }

    /* ── 3-column waterfall ── */
    .hiw-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      align-items: start;
    }

    .hiw-step {
      box-sizing: border-box;
      padding: 24px;
      overflow: hidden;
      align-content: end;
      border: 1px solid var(--border-light);
    }

    .hiw-step-1 { padding-top: 88px;}
    .hiw-step-2 { padding-top: 152px;}
    .hiw-step-3 { padding-top: 216px;}

    .hiw-step-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 22px;
      line-height: 1.2;
      color: var(--text-secondary);
      margin-bottom: 12px;
      -webkit-font-smoothing: antialiased;
    }

    .hiw-step-body {
      font-size: 16px;
      line-height: 26px;
      color: var(--text-muted);
      max-width: 360px;
    }

    /* ── Mobile overrides ── */
    @media (max-width: 768px) {
      .hiw-scroll-wrapper { height: auto; }
      .hiw-s { padding: 80px 24px 60px; min-height: auto; height: auto; display: block; }
      .hiw-header { flex-direction: column; gap: 32px; margin-bottom: 24px; }
      .hiw-title { font-size: 40px; line-height: 1.1; }
      .hiw-toggle { align-self: flex-start; }
      .hiw-cta { justify-content: flex-start; margin-bottom: 32px; }

      /* Mobile: vertical stack, no waterfall */
      .hiw-steps {
        grid-template-columns: 1fr;
        height: auto;
        border-top: none;
        border-bottom: none;
      }
      .hiw-step {
        padding: 28px 24px;
        border-left: none !important;
        border-top: 1px solid var(--border-light);
      }
      .hiw-step:last-child { border-bottom: 1px solid var(--border-light); }
      /* Remove waterfall padding on mobile */
      .hiw-step-1, .hiw-step-2, .hiw-step-3 { padding-top: 28px; }
      .hiw-step-title { font-size: 22px; margin-bottom: 16px; }
      .hiw-step-body  { font-size: 16px; line-height: 26px; max-width: none; }
    }

    /* ══════════════════════════════════════════
       SECTION 7 — PRICING
    ══════════════════════════════════════════ */
    .pricing-s {
      background: var(--light);
      border: var(--border-light);
      position: relative;
      z-index: 2;
      padding: 100px 48px 120px;
      box-sizing: border-box;
    }

    .pricing-inner {
      max-width: 14404px;
      margin: 0 auto;
    }

    .pricing-title {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(56px, 6.5vw, 96px);
      line-height: 2;
      color: var(--text-secondary);
      margin-bottom: 80px;
      -webkit-font-smoothing: antialiased;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }

    .pricing-card {
      border: 1px solid var(--border-light);
      padding: 40px 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pricing-card-top {
      display: flex;
      flex-direction: column;
      height: 180px;
      justify-content: space-between;
    }

    .pricing-plan-info {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pricing-plan-name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      color: var(--text-dark);
    }

    .pricing-plan-desc {
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 22px;
      color: var(--text-secondary);
    }

    .pricing-price {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 28px;
      color: var(--text-dark);
      text-align: center;
    }

    .pricing-price-sub {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      letter-spacing: 0.14px;
    }

    .pricing-feature {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 16px;
      color: var(--text-secondary);
    }

    @media (max-width: 768px) {
      .pricing-s     { padding: 64px 24px 80px; margin-top: -32px; border-radius: 24px 24px 0 0; }
      .pricing-title { font-size: 40px; line-height: 1.1; margin-bottom: 40px; }
      .pricing-grid  { grid-template-columns: 1fr; }
      .pricing-card  { padding: 40px 24px; }
      .pricing-card-top { height: auto; gap: 24px; }
    }

    /* ══════════════════════════════════════════
       SECTION 8 — FAQ + CTA
    ══════════════════════════════════════════ */
    .faq-s {
      background: var(--dark);
      padding: 100px 48px 100px;
      box-sizing: border-box;
    }

    .faq-inner {
      max-width: 1344px;
      margin: 0 auto;
    }

    /* Top area: title left, accordion right — 12-col grid */
    .faq-body {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }

    .faq-title {
      grid-column: 1 / 6;
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(56px, 6.5vw, 96px);
      line-height: 1.2;
      color: var(--text-secondary-light);
      padding-top: 80px;
      -webkit-font-smoothing: antialiased;
    }

    .faq-list { grid-column: 7 / 13; }

    .faq-item {
      border-top: 1px solid var(--border-dark);
    }
    .faq-item:last-child { border-bottom: 1px solid var(--border-dark); }

    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      cursor: pointer;
      user-select: none;
      gap: 16px;
    }

    .faq-question-text {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      color: var(--text-secondary-light);
    }

    .faq-chevron {
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }

    .faq-answer {
      overflow: hidden;
      height: 0;
    }

    .faq-answer-inner {
      padding-bottom: 20px;
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 26px;
      color: var(--text-light);
    }

    /* CTA area */
    .faq-ctas { display: flex; flex-direction: column; gap: 80px; }

    .faq-cta-start {
      margin-left: auto;
      width: min(100%, 824px);
      background: rgba(245, 242, 238, 0.10);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid rgba(245, 242, 238, 0.18);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.3);      
      border-radius: var(--radius-lg);
      padding: 32px;
      cursor: pointer;
      transition: background 0.3s ease;
      box-sizing: border-box;
    }
    .faq-cta-start:hover { background: var(--cta-card-bg-h); }

    .faq-cta-start-text {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 40px;
    }
    .faq-cta-headline {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      line-height: 1.4;
      color: var(--text-secondary-light);
    }
    .faq-cta-subhead {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      line-height: 1.4;
      color: var(--text-secondary-light);
    }
    .faq-cta-action {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(40px, 5vw, 74px);
      line-height: 1;
      color: var(--text-light);
      -webkit-font-smoothing: antialiased;
    }
    .faq-cta-arrow {
      display: inline-block;
      width: 0;
      overflow: hidden;
      opacity: 0;
      transition: width 0.35s ease, opacity 0.25s ease;
      vertical-align: baseline;
    }
    .faq-cta-start:hover .faq-cta-arrow {
      width: 1.2em;
      opacity: 1;
    }

    .faq-cta-ent {
      width: 100%;
      background: rgba(245, 242, 238, 0.5);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid rgba(245, 242, 238, 0.18);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.3);      border-radius: var(--radius-lg);
      padding: 24px 40px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .faq-cta-ent-label {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      color: var(--text-dark);
    }
    .faq-cta-ent-action {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 48px;
      line-height: 48px;
      color: var(--text-dark);
    }
    .ent-arrow-left {
      display: inline-block;
      width: 1.2em;
      overflow: hidden;
      transition: width 0.35s ease, opacity 0.25s ease;
      vertical-align: baseline;
    }
    .ent-arrow-right {
      display: inline-block;
      width: 0;
      overflow: hidden;
      opacity: 0;
      transition: width 0.35s ease, opacity 0.25s ease;
      vertical-align: baseline;
    }
    .faq-cta-ent:hover .ent-arrow-left {
      width: 0;
      opacity: 0;
    }
    .faq-cta-ent:hover .ent-arrow-right {
      width: 1.2em;
      opacity: 1;
    }

    /* ══════════════════════════════════════════
       SECTION 9 — FOOTER
    ══════════════════════════════════════════ */
    .footer-s {
      background: var(--light-surface);
      padding: 80px 48px 24px;
      border-top: 1px solid var(--border-dark);
      overflow: hidden;
      box-sizing: border-box;
    }

    /* ── Brand statement ── */
    .footer-brand        { margin-bottom: 80px; }

    .footer-tagline {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(36px, 5vw, 88px);
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--text-secondary);
      max-width: 700px;
    }

    /* ── 4-column grid ── */
    .footer-cols {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1.4fr;
      gap: 24px;
      padding-bottom: 64px;
      border-bottom: 1px solid var(--border-light);
    }

    .footer-col-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: lowercase;
      color: var(--text-tertiary);
      margin-bottom: 24px;
    }

    /* ── Nav lists (shared: footer-nav + footer-social) ── */
    .footer-nav,
    .footer-social {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* Sliding-underline link — byfrontyard signature, also used by hello email */
    .footer-nav a,
    .footer-social a,
    .footer-hello-email {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 15px;
      line-height: 2;
      color: var(--text-secondary);
      text-decoration: none;
      display: inline-block;
      position: relative;
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-size: 0% 1px;
      background-position: 0 100%;
      transition:
        color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        background-size 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .footer-nav a:hover,
    .footer-social a:hover,
    .footer-hello-email:hover {
      color: var(--text-dark);
      background-size: 100% 1px;
    }

    .footer-hello-email  { margin-bottom: 28px; }

    /* ── Bottom bar ── */
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 24px;
      gap: 16px;
      flex-wrap: wrap;
    }

    .footer-bottom-left {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .footer-copy,
    .footer-made {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--text-tertiary);
    }

    .footer-legal {
      display: flex;
      gap: 20px;
    }
    .footer-legal a {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--text-tertiary);
      text-decoration: none;
      transition: color 0.22s ease;
    }
    .footer-legal a:hover { color: var(--text-secondary); }

    /* ── Scroll-reveal initial states (GSAP animates to visible) ── */
    .footer-tagline,
    .footer-col,
    .footer-bottom {
      opacity: 0;
      transform: translateY(20px);
    }

    /* Mobile — FAQ + Platform (merged) */
    @media (max-width: 768px) {
      .faq-s        { padding: 80px 24px 72px; }
      .faq-body     { grid-template-columns: 1fr; gap: 40px; }
      .faq-title    { grid-column: 1; font-size: 40px; line-height: 1.1; padding-top: 0; }
      .faq-list     { grid-column: 1; }
      .faq-cta-start { margin-left: 0; max-width: 100%; }
      .faq-cta-start:hover { background: var(--cta-card-bg); } /* no hover on mobile */
      .faq-cta-start:hover .faq-cta-arrow { width: 0; opacity: 0; }
      .faq-cta-action { font-size: 40px; line-height: 40px; }
      .faq-cta-ent  { flex-direction: column; align-items: flex-start; gap: 16px; }
      .faq-cta-ent-action { font-size: 32px; line-height: 36px; }

      .platform-s  { padding: 80px 24px 100px; }
      .platform-scroll-wrapper { height: auto; }
      .platform-block { max-width: none; min-height: auto; padding: 0; }
      .platform-title { font-size: 40px; line-height: 1.05; margin-bottom: 16px; }
      .platform-sub   { font-size: 15px; line-height: 1.55; margin-bottom: 48px; max-width: none; }
      .platform-cards { gap: 20px; flex-wrap: wrap; justify-content: center; }
      .pcard          { width: 144px; height: 166px; border-radius: var(--radius-md); gap: 6px; }
      .pcard-label    { font-size: 16px; }

      .footer-s           { padding: 60px 24px 40px; }
      .footer-brand       { margin-bottom: 56px; }
      .footer-tagline     { font-size: 32px; }
      .footer-cols        { grid-template-columns: 1fr 1fr; gap: 40px 20px; padding-bottom: 48px; }
      .footer-bottom      { flex-direction: column; align-items: flex-start; gap: 12px; }
      .footer-bottom-left { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    @media (max-width: 480px) {
      .footer-cols { grid-template-columns: 1fr; }
    }
    /* ── Section show/hide ── */
    @media (max-width: 768px) {
      .hero-desktop            { display: none; }
      .header-d                { display: none; }
      .header-m                { display: flex; }
      .hero-mobile             { display: block; }
      .services-scroll-wrapper { display: none; }
      .services-mobile-s       { display: block; }
      .gallery-scroll-wrapper  { display: none; }
      .gallery-mobile-s        { display: block; }
      .playground-scroll-wrapper { display: none; }
      .playground-mobile-s     { display: block; }
    }

      /* ── Section stack-over ──
         z-index MUST match DOM order: each sticky section covers the previous.
         Order: hero → platform → services → gallery → playground → hiw → pricing → faq → footer
         NOTE: .platform-s is NOT sticky — it flows naturally (matches mobile).
         Blocks fade in on view via ScrollTrigger, no pinning. */
      .hero-desktop,
      .hero-mobile           { position: sticky; top: 0; z-index: 1; }
      .platform-s            { position: relative; z-index: 2; }
      .services-scroll-wrapper { position: sticky; top: 0; z-index: 3; }
      .gallery-scroll-wrapper { position: sticky; top: 0; z-index: 4; }
      .playground-scroll-wrapper { position: sticky; top: 0; z-index: 5; }
      .hiw-scroll-wrapper    { position: sticky; top: 0; z-index: 6; }
      .pricing-s             { z-index: 7; }
      .faq-s                 { position: sticky; top: 0; z-index: 8; }
      .footer-s              { position: relative; z-index: 9; }
  /* ───── Floating effect (platform images only) ───── */
.pcard-img img {
  will-change: transform, filter;
  transition: transform 0.3s ease;
}
.pcard:hover .pcard-img::after {
  opacity: 1;
}