@font-face {
      font-family: 'Onest';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(assets/fonts/Onest-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Onest';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(assets/fonts/Onest-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

/* ─────────────────────────────────────────────
       V4 — Apple 2026 Design System
    ───────────────────────────────────────────── */
    :root {
      /* Brand */
      --green:        #7DC83E;
      --green-dark:   #3E7A00;
      --green-mid:    #6AAF32;
      --green-light:  #F0FAE5;
      --green-glow:   rgba(125,200,62,0.15);

      /* Backgrounds */
      --bg:        #FBFBFD;
      --bg-white:  #FFFFFF;
      --bg-card:   #FFFFFF;
      --bg-dark:   #161617;
      --bg-dark2:  #1D1D1F;
      --bg-dark3:  #2D2D2F;

      /* Text — Apple's exact scale */
      --t1: #1D1D1F;
      --t2: #515154;
      --t3: #86868B;
      --t4: #A1A1A6;

      /* On dark */
      --d1: #F5F5F7;
      --d2: #A1A1A6;
      --d3: #6E6E73;

      /* Borders */
      --border:   #D2D2D7;
      --border-s: #E8E8ED;

      /* Shadows — very subtle on light bg */
      --sh-xs: 0 1px 4px rgba(0,0,0,0.05);
      --sh-sm: 0 2px 12px rgba(0,0,0,0.07);
      --sh-md: 0 4px 28px rgba(0,0,0,0.09);
      --sh-lg: 0 8px 50px rgba(0,0,0,0.12);
      --sh-xl: 0 20px 80px rgba(0,0,0,0.16);

      /* Geometry */
      --r-sm:  12px;
      --r-md:  20px;
      --r-lg:  28px;
      --r-xl:  36px;
      --r-btn: 980px;  /* pill */

      --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --dur: 0.3s;

      --max-w: 1200px;
      --nav-h: 60px;
    }

    /* ─────────────────────────────────────────────
       Reset & Base
    ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
    body {
      font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
      font-optical-sizing: auto;
      font-synthesis: none;
      font-feature-settings: 'kern' 1, 'liga' 1;
      background: var(--bg);
      color: var(--t1);
      font-size: 17px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

    /* ─────────────────────────────────────────────
       Layout Utilities
    ───────────────────────────────────────────── */
    .container {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 40px;
    }
    section { padding: 120px 0 100px; }

    /* ─────────────────────────────────────────────
       Scroll Reveal
    ───────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ─────────────────────────────────────────────
       Typography — Apple scale
    ───────────────────────────────────────────── */
    .section-headline {
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.1;
      color: var(--t1);
      margin-bottom: 20px;
    }
    .section-sub {
      font-size: 19px;
      color: var(--t2);
      line-height: 1.7;
      max-width: 540px;
      font-weight: 400;
    }
    .section-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--green-dark);
      margin-bottom: 16px;
      display: block;
    }
    /* On dark sections */
    .on-dark .section-headline { color: var(--d1); }
    .on-dark .section-sub { color: var(--d2); }
    .on-dark .section-label { color: var(--green); }

    /* ─────────────────────────────────────────────
       Buttons — Apple pill style
    ───────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 24px;
      border-radius: var(--r-btn);
      font-size: 15px;
      font-weight: 600;
      transition: all var(--dur) var(--ease);
      white-space: nowrap;
      cursor: pointer;
    }
    /* Green — primary */
    .btn-primary {
      background: var(--green);
      color: #0D2600;
      box-shadow: 0 1px 6px rgba(125,200,62,0.3);
    }
    .btn-primary:hover {
      background: var(--green-mid);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(125,200,62,0.4);
    }
    /* Dark fill — on light sections */
    .btn-dark {
      background: var(--t1);
      color: #FFFFFF;
    }
    .btn-dark:hover {
      background: #3A3A3C;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }
    /* Ghost on light */
    .btn-ghost {
      background: var(--bg-white);
      color: var(--t1);
      border: 1.5px solid rgba(0,0,0,0.14);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .btn-ghost:hover {
      background: var(--bg);
      border-color: rgba(0,0,0,0.22);
      box-shadow: 0 2px 8px rgba(0,0,0,0.09);
    }
    /* Ghost on dark */
    .btn-ghost-white {
      background: rgba(255,255,255,0.1);
      color: #FFFFFF;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .btn-ghost-white:hover {
      background: rgba(255,255,255,0.18);
    }

    /* ─────────────────────────────────────────────
       1. NAV — Apple ultra-clean
    ───────────────────────────────────────────── */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--nav-h);
      background: rgba(251,251,253,0.85);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    #nav .container { height: 100%; }
    .nav-inner {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .nav-logo img { height: 28px; width: auto; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0;
      margin-left: auto;
    }
    .nav-links a {
      font-size: 13px;
      font-weight: 500;
      color: var(--t2);
      padding: 7px 14px;
      border-radius: 8px;
      transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
      letter-spacing: -0.01em;
    }
    .nav-links a:hover { color: var(--t1); background: rgba(0,0,0,0.05); }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 16px;
    }

    /* Nav CTA button — compact variant */
    .nav-cta { padding: 8px 18px; font-size: 13px; margin-right: 8px; }

    /* Nav logo SVG */
    .nav-logo-svg { height: 32px; width: auto; }

    /* Language toggle */
    .lang-toggle {
      display: flex;
      align-items: center;
      background: rgba(0,0,0,0.06);
      border-radius: 8px;
      padding: 3px;
    }
    .lang-btn {
      font-size: 12px;
      font-weight: 600;
      color: var(--t3);
      padding: 4px 10px;
      border-radius: 6px;
      transition: all var(--dur) var(--ease);
      letter-spacing: 0.04em;
    }
    .lang-btn.active { background: var(--bg-white); color: var(--t1); box-shadow: var(--sh-xs); }
    .lang-btn:hover:not(.active) { color: var(--t1); }

    /* Hamburger */
    .nav-hamburger {
      display: none;
      color: var(--t1);
      font-size: 20px;
      margin-left: auto;
    }

    /* Mobile drawer */
    .nav-mobile {
      display: none;
      flex-direction: column;
      gap: 2px;
      padding: 12px 24px 20px;
      background: rgba(251,251,253,0.98);
      border-bottom: 1px solid var(--border-s);
    }
    .nav-mobile.open { display: flex; }
    .nav-mobile a {
      font-size: 16px;
      font-weight: 500;
      color: var(--t2);
      padding: 12px 0;
      border-bottom: 1px solid var(--border-s);
      transition: color var(--dur);
    }
    .nav-mobile a:hover { color: var(--t1); }
    .nav-mobile .mobile-actions { display: flex; gap: 10px; padding-top: 16px; }

    /* ─────────────────────────────────────────────
       2. HERO — Apple 2026: full-width centered, gradient mesh
    ───────────────────────────────────────────── */
    #hero {
      padding-top: calc(var(--nav-h) + 100px);
      padding-bottom: 0;
      position: relative;
      overflow: hidden;
      background: var(--bg);
      text-align: center;
    }

    /* Gradient mesh — Apple aurora style */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(125,200,62,0.09) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(125,200,62,0.07) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(125,200,62,0.05) 0%, transparent 45%);
      pointer-events: none;
    }

    /* ─────────────────────────────────────────────
       Ring Deco — dekorativt cirkelmotiv
    ───────────────────────────────────────────── */
    .ring-deco {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }
    .ring-deco ~ * { position: relative; z-index: 1; }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 36px;
    }
    .hero-eyebrow::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
    }

    /* MASSIVE display headline — Apple style */
    .hero-h1 {
      font-size: clamp(52px, 9vw, 96px);
      font-weight: 700;
      letter-spacing: -0.055em;
      line-height: 1.02;
      color: var(--t1);
      margin-bottom: 28px;
      max-width: 900px;
    }
    .hero-h1 em {
      font-style: normal;
      color: var(--green);
    }

    .hero-lead {
      font-size: 19px;
      color: var(--t2);
      line-height: 1.72;
      margin-bottom: 44px;
      max-width: 560px;
    }

    .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 80px;
    }

    /* Stats band — isolated large numbers, Apple "numbers that sell" */
    .hero-stats-band {
      position: relative;
      z-index: 1;
      border-top: 1px solid var(--border-s);
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(12px);
    }
    .hero-stats-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      justify-content: center;
    }
    .hero-stat {
      padding: 36px 32px;
      border-right: 1px solid var(--border-s);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: default;
      transition: background var(--dur) var(--ease);
    }
    .hero-stat:last-child { border-right: none; }
    .hero-stat:hover { background: rgba(125,200,62,0.04); }
    .hero-stat-num {
      font-size: 40px;
      font-weight: 700;
      letter-spacing: -0.05em;
      color: var(--t1);
      line-height: 1;
    }
    .hero-stat-num em { font-style: normal; color: var(--green-dark); }
    .hero-stat-label {
      font-size: 13px;
      color: var(--t3);
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    /* ─────────────────────────────────────────────
       3. PLATFORM NARRATIVE / WHY INCIRCLE
    ───────────────────────────────────────────── */
    #why-incircle { background: var(--bg-white); }
    .platform-narrative-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 64px;
    }
    .platform-narrative-header .section-sub { margin: 20px auto 0; }

    /* Platform vs Service distinction */
    .pvs-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 20px;
      align-items: center;
      margin-bottom: 48px;
    }
    .pvs-card {
      background: var(--bg);
      border-radius: var(--r-lg);
      padding: 32px 28px;
      box-shadow: var(--sh-sm);
    }
    .pvs-card.platform { border-top: 1px solid var(--border-s); }
    .pvs-card.service  { border-top: 1px solid rgba(125,200,62,0.25); }
    .pvs-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .pvs-card.platform .pvs-label { color: var(--t2); }
    .pvs-card.service  .pvs-label { color: var(--green-dark); }
    .pvs-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 14px;
      letter-spacing: -0.02em;
    }
    .pvs-list { display: flex; flex-direction: column; gap: 8px; }
    .pvs-list li {
      font-size: 14px;
      color: var(--t2);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .pvs-list li::before {
      content: '';
      width: 5px; height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .pvs-card.platform .pvs-list li::before { background: var(--t4); }
    .pvs-card.service  .pvs-list li::before { background: var(--green); }
    .pvs-plus {
      font-size: 28px;
      font-weight: 300;
      color: var(--t4);
      text-align: center;
    }

    /* Architecture diagram */
    .arch-diagram {
      background: var(--bg);
      border-radius: var(--r-lg);
      padding: 40px 36px 32px;
      position: relative;
      box-shadow: var(--sh-sm);
    }
    .arch-diagram-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .arch-diagram-label::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
    }
    .arch-modules { display: flex; align-items: center; gap: 0; margin-bottom: 16px; }
    .arch-module {
      flex: 1;
      background: var(--bg-white);
      border-radius: var(--r-sm);
      padding: 18px 12px;
      text-align: center;
      box-shadow: var(--sh-xs);
      transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
      cursor: default;
    }
    .arch-module:hover { box-shadow: var(--sh-sm); transform: translateY(-1px); }
    .arch-module-icon { font-size: 22px; color: var(--green-dark); margin-bottom: 8px; }
    .arch-module-name { font-size: 11px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; }
    .arch-arrow {
      flex-shrink: 0; width: 28px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(62,122,0,0.35); font-size: 14px;
    }
    .arch-backbone {
      display: flex; align-items: center; justify-content: center; gap: 0;
      background: rgba(125,200,62,0.05);
      border: 1px solid rgba(125,200,62,0.13);
      border-radius: 6px;
      padding: 9px 20px;
    }
    .arch-backbone-line { display: none; }
    .arch-backbone-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--green-dark);
      opacity: 0.65; padding: 0; white-space: nowrap;
    }

    @media (max-width: 768px) {
      .pvs-grid { grid-template-columns: 1fr; }
      .pvs-plus { display: none; }
      .arch-modules { flex-wrap: wrap; gap: 8px; }
      .arch-module { flex: calc(50% - 4px); }
      .arch-arrow { display: none; }
    }

    /* ─────────────────────────────────────────────
       4. PRODUCTS — Apple Bento Grid
    ───────────────────────────────────────────── */
    #products { background: var(--bg); }
    .modules-header {
      margin-bottom: 56px;
      text-align: center;
    }
    .modules-header .section-sub { margin: 16px auto 0; }

    /* Bento grid — asymmetric Apple style */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: auto;
      align-items: start;
      gap: 16px;
    }

    /* Cards */
    .module-card {
      background: var(--bg-white);
      border-radius: var(--r-lg);
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: var(--sh-xs);
      cursor: default;
      overflow: hidden;
      position: relative;
      transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .module-card:hover {
      box-shadow: var(--sh-lg);
      transform: translateY(-2px);
    }
    /* Wide card spans 2 columns */
    .module-card.bento-wide { grid-column: span 2; }
    /* Tall card spans 2 rows */
    .module-card.bento-tall { grid-row: span 2; }

    /* Sequential number — small, precise, top-left */
    .module-card::before {
      content: attr(data-num);
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--green);
      line-height: 1;
      margin-bottom: 20px;
    }

    /* No icon — typography does the work */
    .module-icon { display: none; }

    .module-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--t1);
      line-height: 1.2;
    }
    .module-body {
      font-size: 14px;
      color: var(--t2);
      line-height: 1.68;
      flex: 1;
    }
    .module-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--green-dark);
      transition: gap var(--dur) var(--ease);
      margin-top: auto;
    }
    .module-link:hover { gap: 10px; }

    /* ─────────────────────────────────────────────
       5. LIFECYCLE FLOW — editorial columns
    ───────────────────────────────────────────── */
    #lifecycle {
      background: var(--bg-dark);
      position: relative;
      overflow: hidden;
    }
    #lifecycle::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url('assets/images/keyboard-bg.jpg') center center / cover no-repeat;
      opacity: 0.05;
      pointer-events: none;
      z-index: 0;
    }
    #lifecycle > .container { position: relative; z-index: 1; }
    .lifecycle-header { margin-bottom: 56px; }
    .lifecycle-header .section-headline { color: var(--d1); }
    .lifecycle-header .section-sub { color: var(--d2); }

    /* Seven editorial columns — no cards, no circles */
    .lifecycle-flow {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0;
      border-top: 1px solid rgba(255,255,255,0.09);
      position: static;
    }
    .lifecycle-flow::before { display: none; }

    .lifecycle-step {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 28px 20px 0 0;
      border-right: 1px solid rgba(255,255,255,0.07);
      transition: opacity var(--dur) var(--ease);
    }
    .lifecycle-step:last-child { border-right: none; padding-right: 0; }
    /* No hover — steps are informational, not interactive */

    /* Hide node + connector entirely */
    .step-node { display: none; }
    .step-connector { display: none; }

    /* Strip all card styling */
    .step-card {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      width: 100%;
      overflow: visible;
      transition: none;
    }
    .step-card::after { display: none; }

    /* Step number — subtle, muted green */
    .step-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: rgba(125,200,62,0.55);
      text-transform: none;
      opacity: 1;
      margin-bottom: 16px;
      line-height: 1;
      display: block;
    }

    /* Step title */
    .step-title {
      font-size: clamp(15px, 1.3vw, 18px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: rgba(245,245,247,0.92);
      margin-bottom: 10px;
      line-height: 1.2;
    }

    /* Description */
    .step-desc {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      line-height: 1.7;
    }

    /* Loop footer — clean, no box */
    .lifecycle-loop {
      margin-top: 40px;
      padding: 20px 0 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border-radius: 0;
      gap: 0;
    }
    .loop-line { display: none; }
    .loop-inner {
      display: flex; align-items: center; gap: 8px;
      color: rgba(255,255,255,0.38);
      font-size: 13px; font-weight: 500;
      letter-spacing: 0.01em;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
    }
    .loop-inner i { font-size: 13px; color: rgba(125,200,62,0.6); opacity: 1; }

    /* ─────────────────────────────────────────────
       6. PLATFORM & TECH
    ───────────────────────────────────────────── */
    #platform { background: var(--bg-white); }
    #platform .section-headline { color: var(--t1); }
    #platform .section-sub { color: var(--t2); }
    .platform-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .platform-features { display: flex; flex-direction: column; gap: 10px; }
    .platform-feature {
      display: flex; gap: 16px;
      background: var(--bg);
      border-radius: var(--r-md);
      padding: 20px 22px;
      transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
      cursor: default;
    }
    .platform-feature:hover { background: var(--bg-white); box-shadow: var(--sh-sm); }
    .platform-feature-icon {
      width: 24px;
      display: flex; align-items: flex-start; justify-content: center;
      font-size: 20px; color: var(--green-dark); flex-shrink: 0; margin-top: 3px;
    }
    .platform-feature-title {
      font-size: 15px; font-weight: 700; color: var(--t1);
      margin-bottom: 4px; letter-spacing: -0.02em;
    }
    .platform-feature-desc { font-size: 13.5px; color: var(--t2); line-height: 1.65; }

    /* Mock UI card — light */
    .platform-ui-card {
      background: var(--bg-white);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--sh-xl);
    }
    .ui-topbar {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-s);
      background: var(--bg);
    }
    .ui-topbar img { height: 20px; width: auto; }
    .ui-topbar-label { font-size: 13px; font-weight: 600; color: var(--t1); }
    .ui-dots { display: flex; gap: 6px; margin-left: auto; }
    .ui-dot { width: 8px; height: 8px; border-radius: 50%; }
    .ui-dot:nth-child(1) { background: #FCA5A5; }
    .ui-dot:nth-child(2) { background: #FCD34D; }
    .ui-dot:nth-child(3) { background: var(--green); }
    .ui-body { padding: 20px; }
    .ui-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
    .ui-stat {
      background: var(--bg); border-radius: var(--r-sm); padding: 14px;
    }
    .ui-stat-val {
      font-size: 22px; font-weight: 800; letter-spacing: -0.04em;
      color: var(--t1); line-height: 1; margin-bottom: 4px;
    }
    .ui-stat-val.green { color: var(--green-dark); }
    .ui-stat-label { font-size: 11px; color: var(--t3); font-weight: 500; }
    .ui-chart-label {
      font-size: 11px; font-weight: 600; color: var(--t3);
      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;
    }
    .ui-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
    .ui-bar-wrap {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; gap: 4px; height: 100%; justify-content: flex-end;
    }
    .ui-bar {
      width: 100%;
      background: linear-gradient(180deg, var(--green), rgba(125,200,62,0.3));
      border-radius: 4px 4px 0 0; min-height: 4px;
    }
    .ui-bar-month { font-size: 9px; color: var(--t4); text-align: center; }

    /* ─────────────────────────────────────────────
       7. ESG / SUSTAINABILITY
    ───────────────────────────────────────────── */
    #esg {
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    /* Centered header */
    .esg-header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 64px;
    }
    .esg-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 20px;
    }
    .esg-label i { font-size: 13px; color: var(--green); }
    .esg-headline {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      color: var(--t1);
      margin-bottom: 16px;
    }
    .esg-lead {
      font-size: 16px;
      color: var(--t2);
      line-height: 1.78;
    }

    /* Three large metric columns */
    .esg-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 48px;
    }
    .esg-metric {
      background: var(--bg-white);
      border: 1px solid var(--border-s);
      border-radius: var(--r-lg);
      padding: 36px 32px;
      text-align: left;
      box-shadow: var(--sh-xs);
      transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
      cursor: default;
    }
    .esg-metric:hover {
      box-shadow: var(--sh-md);
      transform: translateY(-2px);
    }
    .esg-metric-icon {
      margin-bottom: 24px;
    }
    .esg-metric-icon i { font-size: 28px; color: var(--green); opacity: 0.7; }
    .esg-metric-num {
      font-size: clamp(36px, 4vw, 52px);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--t1);
      line-height: 1;
      margin-bottom: 10px;
    }
    .esg-metric-num em { font-style: normal; color: var(--green-dark); }
    .esg-metric-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 6px;
    }
    .esg-metric-desc {
      font-size: 13px;
      color: var(--t3);
      line-height: 1.6;
    }

    /* Pillar grid below metrics */
    .esg-pillars {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .esg-pillar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 24px;
      background: var(--bg-white);
      border: 1px solid var(--border-s);
      border-radius: var(--r-sm);
      box-shadow: var(--sh-xs);
    }
    .esg-pillar.full { grid-column: 1 / -1; }
    .esg-pillar i { font-size: 18px; color: var(--green-dark); }
    .esg-pillar-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--t1);
    }
    .esg-pillar-desc {
      font-size: 13px;
      color: var(--t3);
      line-height: 1.6;
    }
    .sdg-badges {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
      align-items: center;
    }
    .sdg-badges img {
      width: 96px;
      height: 96px;
      border-radius: 6px;
    }
    .sdg-credit {
      font-size: 11px;
      color: var(--t3);
      margin-top: 8px;
    }
    .sdg-credit a { color: var(--t3); text-decoration: underline; }

    @media (max-width: 768px) {
      .esg-metrics { grid-template-columns: 1fr; }
      .esg-pillars { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
      .esg-pillars { grid-template-columns: 1fr; }
    }

    /* ─────────────────────────────────────────────
       8. ENTERPRISE PROOF
    ───────────────────────────────────────────── */
    #proof {
      background: var(--bg-white);
      position: relative;
    }
    #proof::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('assets/images/office-bg.jpg') center 30% / cover no-repeat;
      opacity: 0.04;
      pointer-events: none;
      z-index: 0;
    }
    #proof > .container { position: relative; z-index: 1; }
    .proof-header { margin-bottom: 52px; }

    /* Case metric cards */
    .proof-cases {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 52px;
    }
    .proof-case {
      background: var(--bg-white);
      border: 1px solid var(--border-s);
      border-radius: var(--r-lg);
      padding: 28px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--sh-xs);
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
      cursor: default;
    }
    .proof-case:hover {
      border-color: rgba(125,200,62,0.35);
      box-shadow: var(--sh-md);
      transform: translateY(-2px);
    }
    .proof-case-industry {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--t3);
      background: var(--bg);
      border: 1px solid var(--border-s);
      border-radius: 20px;
      padding: 4px 10px;
      margin-bottom: 18px;
    }
    .proof-case-metric {
      font-size: 48px;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--green-dark);
      line-height: 1;
      margin-bottom: 6px;
    }
    .proof-case-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 10px;
    }
    .proof-case-desc {
      font-size: 13px;
      color: var(--t3);
      line-height: 1.65;
    }
    .proof-case-footer {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border-s);
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--t4);
    }

    /* Logo placeholder bar */
    .proof-logo-bar { margin-bottom: 44px; }
    .proof-logo-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--t4);
      text-align: center;
      margin-bottom: 20px;
    }
    .proof-logo-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .proof-logo-chip {
      background: var(--bg-white);
      border: 1px solid var(--border-s);
      border-radius: var(--r-sm);
      padding: 24px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-width: 150px;
      box-shadow: var(--sh-sm);
      text-align: center;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
      cursor: default;
    }
    .proof-logo-chip:hover {
      border-color: rgba(125,200,62,0.45);
      box-shadow: var(--sh-md);
      transform: translateY(-2px);
    }
    .plc-icon {
      font-size: 28px;
      color: var(--green-dark);
      line-height: 1;
      flex-shrink: 0;
    }
    .plc-icon i { font-size: inherit; }
    .plc-text {
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      text-align: center;
      line-height: 1.4;
    }
    .proof-logo-nda {
      font-size: 11px;
      color: var(--t4);
      text-align: center;
      margin-top: 12px;
      font-style: italic;
    }

    /* Compliance badges */
    .proof-badges {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .proof-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      background: var(--bg-white);
      border: 1px solid var(--border-s);
      border-radius: var(--r-sm);
      padding: 24px 28px;
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      box-shadow: var(--sh-sm);
      text-align: center;
      min-width: 150px;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .proof-badge:hover {
      border-color: rgba(125,200,62,0.45);
      box-shadow: var(--sh-md);
      transform: translateY(-2px);
    }
    .proof-badge-icon {
      font-size: 28px;
      color: var(--green-dark);
      flex-shrink: 0;
      line-height: 1;
    }

    /* ─────────────────────────────────────────────
       9. CTA SECTION — dark contrast block (Apple-style)
    ───────────────────────────────────────────── */
    #contact { padding: 80px 0; background: var(--bg-white); }
    .cta-card {
      background: var(--bg-dark);
      border-radius: var(--r-xl);
      padding: 80px 60px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-card::before {
      content: '';
      position: absolute;
      top: -80px; left: 50%;
      transform: translateX(-50%);
      width: 600px; height: 400px;
      background: radial-gradient(ellipse, rgba(125,200,62,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .cta-headline {
      font-size: clamp(26px, 3.5vw, 40px);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #FFFFFF;
      margin-bottom: 14px;
      position: relative;
    }
    .cta-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.55);
      max-width: 440px;
      margin: 0 auto 36px;
      line-height: 1.75;
      position: relative;
    }
    .cta-btns {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 24px;
      position: relative;
    }
    .cta-email { font-size: 13px; color: rgba(255,255,255,0.4); position: relative; }
    .cta-email a { color: var(--green); font-weight: 500; }
    .cta-email a:hover { text-decoration: underline; }

    /* Contact form */
    .contact-form {
      max-width: 480px;
      margin: 0 auto;
      text-align: left;
      position: relative;
    }
    .contact-form .form-row {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }
    .contact-form .form-row > * { flex: 1; }
    .contact-form input:not([type="checkbox"]),
    .contact-form textarea {
      width: 100%;
      padding: 13px 16px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--r-sm);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-size: 14px;
      font-family: inherit;
      transition: border-color 0.2s;
    }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(255,255,255,0.35);
    }
    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--green);
      background: rgba(255,255,255,0.08);
    }
    .contact-form textarea {
      resize: vertical;
      min-height: 80px;
      margin-bottom: 12px;
    }
    .contact-form .form-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }
    .contact-form .form-submit .btn {
      padding: 14px 32px;
      font-size: 15px;
      white-space: nowrap;
      width: 100%;
      justify-content: center;
    }
    .contact-form .form-gdpr {
      font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.5;
      margin-bottom: 8px; width: 100%;
    }
    .contact-form .form-gdpr a { color: rgba(255,255,255,0.6); text-decoration: underline; }
    .contact-form .form-gdpr a:hover { color: #fff; }
    .contact-form .form-note {
      font-size: 12px;
      color: rgba(255,255,255,0.35);
      line-height: 1.5;
    }
    @media (max-width: 600px) {
      .contact-form .form-row { flex-direction: column; }
      .contact-form .form-submit { flex-direction: column; text-align: center; }
    }

    /* ─────────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────────── */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--border-s);
      padding: 40px 0;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .footer-brand { display: flex; flex-direction: column; gap: 6px; }
    .footer-brand img { height: 28px; width: auto; }
    .footer-tagline { font-size: 12px; color: var(--t3); }
    .footer-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0 auto;
    }
    .footer-links a {
      font-size: 13px;
      color: var(--t3);
      padding: 4px 10px;
      border-radius: 4px;
      transition: color var(--dur) var(--ease);
      font-weight: 500;
    }
    .footer-links a:hover { color: var(--t1); }
    .footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }
    .footer-copy { font-size: 12px; color: var(--t3); }
    .footer-legal { font-size: 11px; color: var(--t3); opacity: 0.7; }
    .footer-privacy { font-size: 12px; color: var(--t3); transition: color var(--dur) var(--ease); }
    .footer-privacy:hover { color: var(--t1); }

    /* ─────────────────────────────────────────────
       RESPONSIVE — TABLET (768px)
    ───────────────────────────────────────────── */
    @media (max-width: 768px) {
      section { padding: 80px 0; }
      .container { padding: 0 20px; }
      .nav-links { display: none; }
      .nav-right  { display: none; }
      .nav-hamburger { display: flex; }

      /* Hero */
      #hero { padding-top: calc(var(--nav-h) + 64px); }
      .hero-h1 { font-size: clamp(40px, 10vw, 64px); }
      .hero-stats-inner { grid-template-columns: 1fr; }
      .hero-stat { border-right: none; border-bottom: 1px solid var(--border-s); padding: 24px 20px; }
      .hero-stat:last-child { border-bottom: none; }

      /* Bento grid — stack to 2 col */
      .bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
      .module-card.bento-wide { grid-column: span 2; }
      .module-card.bento-tall { grid-row: span 1; }

      /* Lifecycle — 4+3 grid on tablet */
      .lifecycle-flow { grid-template-columns: repeat(4, 1fr); }
      .lifecycle-step { border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 24px; }
      .lifecycle-step:nth-child(4) { border-right: none; }
      .lifecycle-step:nth-child(5),
      .lifecycle-step:nth-child(6),
      .lifecycle-step:nth-child(7) { border-bottom: none; }
      .lifecycle-loop { padding: 14px 16px; }
      .loop-line { display: none; }

      /* Platform */
      .platform-inner { grid-template-columns: 1fr; }

      /* Why / PVS */
      .pvs-grid { grid-template-columns: 1fr; }
      .pvs-plus { display: none; }
      .arch-modules { flex-wrap: wrap; gap: 8px; }
      .arch-module { flex: calc(50% - 4px); }
      .arch-arrow { display: none; }

      /* ESG */
      .esg-metrics { grid-template-columns: 1fr; }
      .esg-pillars { grid-template-columns: 1fr 1fr; }

      /* Proof */
      .proof-cases { grid-template-columns: 1fr; }
      .proof-case-metric { font-size: 40px; }

      /* CTA / Footer */
      .cta-card { padding: 56px 28px; border-radius: var(--r-lg); }
      .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
      .footer-links { margin: 0; flex-wrap: wrap; }
      .footer-right { align-items: flex-start; }
    }

    /* ─────────────────────────────────────────────
       RESPONSIVE — MOBILE (480px)
    ───────────────────────────────────────────── */
    @media (max-width: 480px) {
      .bento-grid { grid-template-columns: 1fr; }
      .module-card.bento-wide { grid-column: span 1; }
      .hero-ctas { flex-direction: column; }
      .cta-btns { flex-direction: column; align-items: center; }
      .esg-pillars { grid-template-columns: 1fr; }
      /* Lifecycle — 2-col on mobile */
      .lifecycle-flow { grid-template-columns: 1fr 1fr; }
      .lifecycle-step:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.07); }
      .lifecycle-step:nth-child(2),
      .lifecycle-step:nth-child(4),
      .lifecycle-step:nth-child(6) { border-right: none; padding-right: 0; }
      .lifecycle-step:nth-child(7) { border-right: none; padding-right: 0; border-bottom: none; }
      .lifecycle-step:nth-child(6) { border-bottom: none; }
    }

    /* ─────────────────────────────────────────────
       Reduced Motion
    ───────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal { opacity: 1; transform: none; transition: none; }
      .btn-primary:hover, .btn-dark:hover { transform: none; }
      .module-card:hover, .esg-metric:hover, .arch-module:hover,
      .platform-feature:hover, .proof-case:hover { transform: none; }
      .step-card:hover .step-title { opacity: 1; }
      .proof-case:hover { transform: none; }
    }

    /* ─────────────────────────────────────────────
       OVERDRIVE — A: countup (no CSS needed)
       OVERDRIVE — B: Lifecycle step stagger
    ───────────────────────────────────────────── */
    .lifecycle-step {
      transform: translateY(14px);
      transition: opacity 0.5s var(--ease), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .lifecycle-step.lc-active { transform: translateY(0); }

    /* ─────────────────────────────────────────────
       OVERDRIVE — C: Headline line reveal
    ───────────────────────────────────────────── */
    /* Hero h1 — each line rises in on load */
    .hero-h1 > span[data-i18n],
    .hero-h1 > em {
      display: inline-block;
      transform: translateY(36px);
      opacity: 0;
      transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity  0.65s ease-out;
    }
    .hero-h1 > span[data-i18n].line-in,
    .hero-h1 > em.line-in {
      transform: translateY(0);
      opacity: 1;
    }

    /* Section headlines — rise when parent reveal fires */
    .section-headline span[data-i18n] {
      display: inline-block;
      transform: translateY(22px);
      opacity: 0;
      transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
                  opacity  0.6s  ease-out                         0.08s;
    }
    .reveal.visible .section-headline span[data-i18n] {
      transform: translateY(0);
      opacity: 1;
    }
    /* Slight stagger for second span */
    .reveal.visible .section-headline span[data-i18n]:nth-of-type(2) {
      transition-delay: 0.2s;
    }
    .reveal.visible .section-headline span[data-i18n]:nth-of-type(3) {
      transition-delay: 0.32s;
    }

    /* Reduced motion overrides */
    @media (prefers-reduced-motion: reduce) {
      .hero-h1 > span[data-i18n],
      .hero-h1 > em { transform: none; opacity: 1; transition: none; }
      .section-headline span[data-i18n] { transform: none; opacity: 1; transition: none; }
      .lifecycle-step { transform: none; }
    }

    /* ─────────────────────────────────────────────
       Reveal transition-delay utilities
    ───────────────────────────────────────────── */
    .reveal-d1  { transition-delay: 0.05s; }
    .reveal-d2  { transition-delay: 0.1s; }
    .reveal-d3  { transition-delay: 0.15s; }
    .reveal-d4  { transition-delay: 0.2s; }
    .reveal-d5  { transition-delay: 0.25s; }
    .reveal-d6  { transition-delay: 0.3s; }
    .reveal-d7  { transition-delay: 0.35s; }

    /* ─────────────────────────────────────────────
       Platform section header
    ───────────────────────────────────────────── */
    .platform-section-header { margin-bottom: 48px; }

    /* ─────────────────────────────────────────────
       Trust / Proof section
    ───────────────────────────────────────────── */
    .trust-numbers {
      text-align: center;
      margin-bottom: 48px;
    }
    .trust-stat-num {
      font-size: 48px;
      font-weight: 800;
      color: var(--green-dark);
      line-height: 1.1;
    }
    .trust-stat-label {
      font-size: 14px;
      color: var(--t3);
      margin-top: 4px;
    }

    /* ─────────────────────────────────────────────
       Mid-page CTA strip
    ───────────────────────────────────────────── */
    #mid-cta { padding: 48px 0; background: var(--bg); }
    .mid-cta-inner { text-align: center; }
    .mid-cta-headline {
      font-size: 18px;
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 6px;
    }
    .mid-cta-sub {
      font-size: 14px;
      color: var(--t3);
      margin-bottom: 20px;
    }
    .mid-cta-btn { padding: 12px 28px; font-size: 14px; }

    /* ─────────────────────────────────────────────
       FAQ section
    ───────────────────────────────────────────── */
    #faq { padding: 80px 0; }
    .faq-container { max-width: 720px; }
    .faq-headline { margin-bottom: 40px; }
    .faq-list { border-top: 1px solid var(--border-s); }
    .faq-item {
      border-bottom: 1px solid var(--border-s);
      padding: 20px 0;
    }
    .faq-question {
      font-weight: 600;
      font-size: 15px;
      color: var(--t1);
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .faq-answer {
      margin-top: 12px;
      font-size: 14px;
      color: var(--t3);
      line-height: 1.7;
    }

    /* ─────────────────────────────────────────────
       Form proof badges
    ───────────────────────────────────────────── */
    .form-proof-row {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }
    .form-proof-item {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .form-proof-icon {
      color: var(--green);
      font-size: 16px;
    }

    /* Form success state */
    .form-success { display: none; text-align: center; padding: 40px 0; }
    .form-success-icon {
      font-size: 48px;
      color: var(--green);
      display: block;
      margin-bottom: 16px;
    }
    .form-success-title {
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
    }
    .form-success-sub {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
    }
    .cta-email-mt { margin-top: 20px; }