.explore-page {
  --paper:#FFFFFF;
  --paper-2:#F3F8F4;
  --paper-3:#E9F1EB;
  --ink:#0C1A13;
  --muted:#566B61;
  --faint:#85978D;
  --line:#E2EBE5;
  --line-2:#D1DFD7;
  --brand:#0E9E76;
  --brand-deep:#0A6E52;
  --brand-ink:#0A3527;
  --forest:#06291E;
  --forest-2:#0A3727;
  --mint:#2FD79B;
  --amber:#C76A28;
  --amber-bright:#F0A35E;
  --amber-soft:#F7EADD;
  --maxw:1400px;

  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;

  *,
  *::before,
  *::after {
    box-sizing:border-box;
  }

  img,
  svg,
  video {
    max-width:100%;
  }
  
  li {
    list-style: none;
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin-top:0;
  }

  a {
    color:inherit;
  }

  ::selection {
    background:var(--mint);
    color:var(--forest);
  }

  /* =========================================================
     UTILITY
     ========================================================= */

  .wrap {
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 28px;
  }

  .mono {
    font-family:'IBM Plex Mono',monospace;
  }

  .eyebrow {
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--brand);
    display:inline-flex;
    align-items:center;
    gap:11px;

    &.on-dark {
      color:var(--mint);

    }
  }

  /* =========================================================
     EXPLORE STICKY NAV
     ========================================================= */
  
  .explore-nav-wrap {
    position:sticky;
    top:0;
    z-index:999;
  
    width:100%;
  }
  
  .explore-nav {
    width:100%;
  
    background:rgba(51, 51, 51, 0.9);
  
  
    box-shadow:
      0 8px 24px -20px rgba(8,40,28,.35);
  
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  
  .explore-nav-inner {
    width:90%;
    max-width: 1800px;
    min-height:72px;
  
    margin:0 auto;
    padding:0;
  
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
  }
  
  
  /* =========================================================
     LINKS
     ========================================================= */
  
  .explore-nav-links {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
  
    margin-left:auto;
  }
  
  .explore-nav-links > a:not(.btn) {
    position:relative;
  
    display:inline-flex;
    align-items:center;
  
    height:42px;
    padding:0 14px;
  
    border-radius:8px;
  
    font-size:13px;
    font-weight:600;
  
    color:#fff;
    text-decoration:none;
  
    white-space:nowrap;
  
    transition:
      color .2s ease,
      background .2s ease;
  }
  
  .explore-nav-links > a:not(.btn):hover {
    color:var(--brand-deep);
    background:var(--paper-2);
  }
  
  
  /* Active section */
  
  .explore-nav-links > a:not(.btn).active {
    color:var(--brand-deep);
    background:rgba(14,158,118,.08);
  }
  
  .explore-nav-links > a:not(.btn).active::after {
    content:"";
  
    position:absolute;
    left:50%;
    bottom:5px;
  
    width:4px;
    height:4px;
  
    border-radius:50%;
  
    background:var(--brand);
  
    transform:translateX(-50%);
  }
  
  
  /* =========================================================
     CTA
     ========================================================= */
  
  .explore-nav-links .btn-primary {
    margin-left:10px;
  
    padding:11px 20px;
  
    white-space:nowrap;
  
  }
  
  .explore-nav-links .btn-primary svg {
    width:16px;
    height:16px;
    flex:0 0 16px;
  }
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width:860px) {
  
    .explore-nav-inner {
      min-height:64px;
      padding:0 18px;
    }
  
    .explore-nav-logo img {
      max-width:160px;
    }
  
    .explore-nav-links {
      overflow-x:auto;
      scrollbar-width:none;
    }
  
    .explore-nav-links::-webkit-scrollbar {
      display:none;
    }
  
    .explore-nav-links > a {
      flex:0 0 auto;
    }
  }

  /* =========================================================
     BUTTONS
     ========================================================= */

  .btn {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:600;
    text-decoration:none;
    border-radius:999px;
    transition:transform .2s,box-shadow .2s,background .2s;

    svg {
      width:16px;
      height:16px;
      flex:0 0 16px;
    }

    &.btn-primary {
      background:var(--brand);
      color:#fff;
      font-size:14px;
      padding:11px 22px;
      box-shadow:0 8px 22px -12px rgba(14,158,118,.8);

      &:hover {
        transform:translateY(-2px);
        background:var(--brand-deep);
      }
    }

    &.btn-ghost {
      border:1px solid var(--line-2);
      color:var(--ink);
      font-size:14px;
      padding:11px 22px;
      background:#fff;

      &:hover {
        border-color:var(--brand);
      }
    }

    &.btn-white {
      background:#fff;
      color:var(--forest);
      font-size:15px;
      padding:15px 30px;

      &:hover {
        transform:translateY(-2px);
      }
    }

    &.btn-line {
      border:1px solid rgba(255,255,255,.4);
      color:#fff;
      font-size:15px;
      padding:14px 28px;

      &:hover {
        border-color:#fff;
      }
    }
  }

  /* =========================================================
     HERO
     ========================================================= */

  .hero {
    padding:74px 0 40px;
    position:relative;
    isolation:isolate;

    &::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        radial-gradient(
          680px 420px at 88% -6%,
          rgba(47,215,155,.13),
          transparent 62%
        ),
        radial-gradient(
          620px 460px at 6% 4%,
          rgba(14,158,118,.07),
          transparent 60%
        );
    }
  }

  .hero-grid {
    display:grid;
    grid-template-columns:1.04fr 1.12fr;
    gap:54px;
    align-items:center;
    width:100%;
  }

  .hero {
    h1 {
      font-size:clamp(38px,5.1vw,52px);
      margin:22px 0 0;
      max-width:20ch;
      line-height: 58px;
      font-weight: bold;
      .g {
        color:var(--brand);
      }
    }

    .lede {
      margin-top:22px;
      font-size:clamp(16px,1.5vw,18.5px);
      color:var(--muted);
      max-width:48ch;
      line-height:1.6;

      b {
        color:var(--ink);
        font-weight:600;
      }
    }

    .hero-cta {
      margin-top:30px;
      display:flex;
      gap:13px;
      flex-wrap:wrap;
      align-items:center;
    }

    .hero-meta {
      margin-top:34px;
      display:flex;
      gap:26px;
      flex-wrap:wrap;
      font-family:'IBM Plex Mono',monospace;
      font-size:12px;
      color:var(--faint);

      b {
        color:var(--ink);
      }

      span {
        display:flex;
        flex-direction:column;
        gap:3px;
      }

      .n {
        font-family:'Bricolage Grotesque';
        font-weight:700;
        font-size:22px;
        color:var(--brand);
        letter-spacing:-.01em;
      }
    }
  }

  /* =========================================================
     TRUST BAR
     ========================================================= */

  .trustbar {
    margin-top:30px;
    padding-top:24px;
    border-top:1px solid var(--line);

    .tb-lbl {
      font-family:'IBM Plex Mono';
      font-size:10px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--faint);
      margin-bottom:16px;
    }
  }

  .tb-logos {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    justify-items:center;
    gap:24px 28px;

    img {
      max-width:100%;
      width:auto;
      display:block;
      filter:grayscale(1);
      opacity:.6;
      transition:filter .25s,opacity .25s;

      &:hover {
        filter:grayscale(0);
        opacity:1;
      }
    }
  }

  /* =========================================================
     LOGO WALL
     ========================================================= */

  .logos {
    margin-top:42px;
    padding:36px 32px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:34px 48px;

    img {
      width:auto;
      display:block;
      object-fit:contain;
    }
  }

  /* =========================================================
     EXPLORE UI DEMO
     ========================================================= */

  .demo {
    border:1px solid var(--line-2);
    border-radius:18px;
    background:#fff;
    box-shadow:
      0 40px 90px -50px rgba(8,40,28,.45),
      0 2px 0 rgba(255,255,255,.6) inset;
    overflow:hidden;
  }

  .demo-top {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 16px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fff,#fafdfb);
  }

  .demo-brand {
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono';
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--brand-deep);
    font-weight:600;

    .dot {
      width:9px;
      height:9px;
      border-radius:3px;
      background:var(--brand);
    }
  }

  .demo-search {
    flex:1;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--line-2);
    border-radius:10px;
    padding:9px 12px;
    background:#fff;
    min-width:0;

    svg {
      width:15px;
      height:15px;
      color:var(--faint);
      flex:0 0 auto;
    }

    input {
      border:0;
      outline:0;
      font-family:inherit;
      font-size:13px;
      color:var(--ink);
      width:100%;
      background:transparent;
    }
  }

  .ai-toggle {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:'IBM Plex Mono';
    font-size:10.5px;
    letter-spacing:.04em;
    color:var(--muted);
    border:1px solid var(--line-2);
    border-radius:999px;
    padding:7px 11px;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    transition:all .2s;

    .sw {
      width:24px;
      height:14px;
      border-radius:999px;
      background:var(--line-2);
      position:relative;
      transition:background .2s;

      &::after {
        content:"";
        position:absolute;
        top:2px;
        left:2px;
        width:10px;
        height:10px;
        border-radius:50%;
        background:#fff;
        transition:transform .2s;
        box-shadow:0 1px 2px rgba(0,0,0,.25);
      }
    }

    &.on {
      color:var(--brand-deep);
      border-color:var(--brand);
      background:rgba(14,158,118,.06);

      .sw {
        background:var(--brand);

        &::after {
          transform:translateX(10px);
        }
      }
    }
  }

  .demo-body {
    display:grid;
    grid-template-columns:158px 1fr;
  }

  .demo-rail {
    border-right:1px solid var(--line);
    padding:16px 14px;
    background:#fbfdfc;

    .rail-h {
      font-family:'IBM Plex Mono';
      font-size:9.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--faint);
      margin:0 0 11px;
    }

    .facet {
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:12px;
      color:var(--muted);
      padding:8px 0;
      border-bottom:1px solid var(--line);

      svg {
        width:11px;
        height:11px;
        opacity:.5;
      }

      &:last-child {
        border-bottom:0;
      }
    }
  }

  .chips {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:13px;
  }

  .fchip {
    font-family:'IBM Plex Mono';
    font-size:10px;
    border:1px solid var(--line-2);
    border-radius:999px;
    padding:5px 9px;
    color:var(--muted);
    cursor:pointer;
    transition:all .15s;
    background:#fff;

    &:hover {
      border-color:var(--brand);
    }

    &.active {
      background:var(--brand);
      color:#fff;
      border-color:var(--brand);
    }
  }

  .demo-main {
    padding:14px 16px;
    background:#fff;
  }

  .result-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:'IBM Plex Mono';
    font-size:10.5px;
    color:var(--faint);
    padding-bottom:11px;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;

    b {
      color:var(--ink);
    }
  }

  .legend {
    display:flex;
    gap:13px;

    i {
      width:8px;
      height:8px;
      border-radius:50%;
      display:inline-block;
      margin-right:5px;
      vertical-align:middle;
    }
  }

  .cards {
    display:flex;
    flex-direction:column;
    gap:11px;
    margin-top:13px;
  }

  .pcard {
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 15px;
    transition:border-color .18s,box-shadow .18s,transform .18s;
    position:relative;

    &:hover {
      border-color:var(--line-2);
      box-shadow:0 16px 34px -26px rgba(8,40,28,.4);
      transform:translateY(-1px);
    }

    &.hide {
      display:none;
    }
  }

  .pc-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }

  .pc-name {
    font-family:'Bricolage Grotesque';
    font-weight:600;
    font-size:14.5px;
    line-height:1.2;
  }

  .pc-vendor {
    font-family:'IBM Plex Mono';
    font-size:10.5px;
    color:var(--faint);
    margin-top:3px;
  }

  .lic {
    font-family:'IBM Plex Mono';
    font-size:9.5px;
    letter-spacing:.04em;
    border-radius:999px;
    padding:4px 9px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;

    &.yes {
      background:rgba(14,158,118,.1);
      color:var(--brand-deep);
      border:1px solid rgba(14,158,118,.3);
    }

    &.par {
      background:var(--amber-soft);
      color:var(--amber);
      border:1px solid rgba(199,106,40,.28);
    }

    .d {
      width:6px;
      height:6px;
      border-radius:50%;
      background:currentColor;
    }
  }

  .pc-desc {
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
    margin:9px 0 11px;
    max-width:54ch;
  }

  .meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
  }

  .mtag {
    font-family:'IBM Plex Mono';
    font-size:9.5px;
    color:var(--muted);
    background:var(--paper-2);
    border:1px solid var(--line);
    border-radius:6px;
    padding:4px 8px;

    &.k {
      color:var(--brand-deep);
      background:rgba(14,158,118,.07);
      border-color:rgba(14,158,118,.2);
    }
  }

  .pc-usage {
    margin-top:11px;
    display:flex;
    align-items:center;
    gap:10px;

    .lab {
      font-family:'IBM Plex Mono';
      font-size:9.5px;
      color:var(--faint);
      white-space:nowrap;
    }

    .pct {
      font-family:'IBM Plex Mono';
      font-size:10.5px;
      color:var(--brand-deep);
      font-weight:600;
    }
  }

  .bar {
    flex:1;
    height:6px;
    border-radius:999px;
    background:var(--paper-3);
    overflow:hidden;

    i {
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--brand),var(--mint));
    }
  }

  .demo-cap {
    font-family:'IBM Plex Mono';
    font-size:10px;
    color:var(--faint);
    text-align:center;
    padding:9px;
    border-top:1px solid var(--line);
    background:#fbfdfc;
  }

  /* =========================================================
     SECTIONS
     ========================================================= */

  section {
    padding:60px 0;
    position:relative;
  }

  .sec-head {
    max-width:74ch;

    h2 {
      font-size:clamp(28px,3.6vw,42px);
      line-height:clamp(34px,4.3vw,52px);
      margin:16px 0 0;
      font-weight:bold;
      .g {
        color:var(--brand);
      }
    }

    .sub {
      margin-top:16px;
      color:var(--muted);
      font-size:17px;
      line-height:1.6;
    }
  }

  /* =========================================================
     DARK BAND / PROBLEM
     ========================================================= */

  .band-dark {
    background-color:var(--forest);
    color:#EAF3EE;

    .sec-head {
      h2 {
        color:#fff;

        .g {
          color:var(--mint);
        }
      }

      .sub {
        color:rgba(234,243,238,.72);
      }
    }
  }

  .cost-wrap {
    margin-top:44px;
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:40px;
    align-items:stretch;
  }

  .cost-chart {
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:26px 26px 20px;
    background:rgba(255,255,255,.03);

    svg {
      width:100%;
      height:auto;
      display:block;
      overflow:visible;
    }

    .cap {
      font-family:'IBM Plex Mono';
      font-size:10px;
      color:rgba(255,255,255,.5);
      margin-top:10px;
    }

    .ch-title {
      font-family:'Bricolage Grotesque',sans-serif;
      font-weight:600;
      font-size:17px;
      color:#fff;
      letter-spacing:-.01em;
      margin-bottom:16px;
    }
  }

  .yoy-row {
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .yc {
    font-family:'IBM Plex Mono';
    font-size:10px;
    color:rgba(255,255,255,.7);
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    padding:6px 11px;

    b {
      color:var(--mint);
    }
  }

  .cost-stats {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:16px;
  }

  .cstat {
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:22px;
    background:rgba(255,255,255,.03);

    .n {
      font-family:'Bricolage Grotesque';
      font-weight:700;
      font-size:clamp(30px,4vw,40px);
      color:var(--mint);
      line-height:1;
    }

    .l {
      font-size:13.5px;
      color:rgba(234,243,238,.72);
      margin-top:9px;
      line-height:1.45;

      b {
        color:#fff;
        font-weight:600;
      }
    }
  }

  .challenge {
    margin-top:50px;

    .ch-h {
      font-family:'IBM Plex Mono';
      font-size:11px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--mint);
      margin-bottom:20px;
    }
  }

  .ch-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }

  .ch {
    border-top:1px solid rgba(255,255,255,.16);
    padding-top:16px;

    p {
      font-size:14px;
      color:rgba(234,243,238,.82);
      line-height:1.5;
    }

    .x {
      font-family:'IBM Plex Mono';
      font-size:13px;
      color:var(--mint);
      margin-bottom:9px;
    }
  }

  /* =========================================================
     STAT STRIP
     ========================================================= */

  .statstrip {
    background:var(--paper-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .ss-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    text-align:center;
  }

  .ss {
    padding:46px 18px;
    border-right:1px solid var(--line);

    &:last-child {
      border-right:0;
    }

    .n {
      font-family:'Bricolage Grotesque';
      font-weight:800;
      font-size:clamp(34px,4.4vw,52px);
      color:var(--brand);
      line-height:1;
      letter-spacing:-.02em;
    }

    .l {
      font-size:13px;
      color:var(--muted);
      margin-top:10px;
      line-height:1.4;
    }
  }

  /* =========================================================
     VALUE PILLARS
     ========================================================= */

  .pillars {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:48px;
  }

  .pil {
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px 28px;
    background:#fff;
    transition:border-color .2s,box-shadow .2s,transform .2s;

    &:hover {
      border-color:var(--line-2);
      box-shadow:0 28px 60px -44px rgba(8,40,28,.4);
      transform:translateY(-2px);
    }

    .pi {
      width:46px;
      height:46px;
      border-radius:12px;
      background:var(--paper-2);
      border:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--brand);
      margin-bottom:18px;

      svg {
        width:23px;
        height:23px;
      }
    }

    h3 {
      font-size:21px;
      margin-bottom:9px;
    }

    .pd {
      font-size:14px;
      color:var(--muted);
      line-height:1.55;
      margin-bottom:16px;
    }

    ul {
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    li {
      font-size:13.5px;
      color:var(--muted);
      line-height:1.45;
      padding-left:20px;
      position:relative;

      &::before {
        content:"";
        position:absolute;
        left:2px;
        top:7px;
        width:7px;
        height:7px;
        border-radius:2px;
        background:var(--brand);
        transform:rotate(45deg);
      }
    }
  }

  /* AI highlight */

  .ai-highlight {
    margin-top:22px;
    border:1px solid var(--line-2);
    border-radius:20px;
    background:linear-gradient(135deg,#F1F8F3,#E6F1EA);
    padding:34px 36px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:44px;
    align-items:center;

    h3 {
      font-size:24px;
      margin:16px 0 8px;
    }

    .aih-sub {
      font-size:14.5px;
      color:var(--muted);
      line-height:1.55;
      margin-bottom:20px;
    }
  }

  .aih-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono';
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--brand-deep);
    background:rgba(14,158,118,.1);
    border:1px solid rgba(14,158,118,.25);
    border-radius:999px;
    padding:6px 12px;

    svg {
      width:14px;
      height:14px;
    }
  }

  .aih-points {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:13px;

    li {
      display:flex;
      gap:12px;
      font-size:14px;
      color:var(--ink);
      line-height:1.5;
    }

    .ck {
      width:22px;
      height:22px;
      border-radius:50%;
      background:var(--brand);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:none;
      margin-top:1px;

      svg {
        width:13px;
        height:13px;
      }
    }
  }

  .aih-prompts {
    display:flex;
    flex-direction:column;
    gap:12px;

    .pl {
      font-family:'IBM Plex Mono';
      font-size:10px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--faint);
      margin-bottom:2px;
    }
  }

  .prompt {
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px 14px 14px 4px;
    padding:13px 15px;
    font-size:13.5px;
    color:var(--ink);
    line-height:1.5;
    box-shadow:0 12px 26px -20px rgba(8,40,28,.5);
    display:flex;
    gap:10px;
    align-items:flex-start;

    svg {
      width:15px;
      height:15px;
      color:var(--brand);
      flex:none;
      margin-top:2px;
    }
  }

  /* =========================================================
     TAXONOMY
     ========================================================= */

  .tax {
    margin-top:48px;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    background:#fff;
  }

  .tax-head {
    padding:22px 28px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;

    h3 {
      font-size:20px;
      color:var(--ink);
    }

    .t {
      font-family:'IBM Plex Mono';
      font-size:10.5px;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--faint);
    }
  }

  .tax-grid {
    display:grid;
    grid-template-columns:1fr 78px 1.25fr;
  }

  .tax-col {
    padding:26px 28px;

    &.mid {
      display:flex;
      align-items:center;
      justify-content:center;
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
      background:var(--paper-2);
    }

    .ct {
      font-family:'IBM Plex Mono';
      font-size:10px;
      letter-spacing:.12em;
      text-transform:uppercase;
      margin-bottom:16px;
    }

    &.before .ct {
      color:var(--amber);
    }

    &.after .ct {
      color:var(--brand-deep);
    }

    &.after .enrich {
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:6px;

      .mtag.k {
        font-size:10px;
      }
    }
  }

  .raw {
    font-family:'IBM Plex Mono';
    font-size:12.5px;
    color:var(--muted);
    line-height:1.7;

    .lbl {
      color:var(--faint);
    }

    .v {
      color:var(--ink);
    }

    .msg {
      margin-top:16px;
      font-size:11.5px;
      color:var(--amber);
      background:var(--amber-soft);
      border-radius:8px;
      padding:9px 11px;
      line-height:1.4;
    }
  }

  .tree {
    font-family:'IBM Plex Mono';
    font-size:12.5px;
    line-height:1.9;

    .row {
      display:flex;
      gap:9px;

      &.desc {
        align-items:flex-start;
        margin-top:5px;

        .k {
          padding-top:1px;
        }
      }
    }

    .k {
      color:var(--faint);
      min-width:118px;
    }

    .val {
      color:var(--ink);
      font-weight:500;

      &.hi {
        color:var(--brand-deep);
      }

      &.pdv {
        font-family:'Hanken Grotesk',sans-serif;
        font-weight:400;
        font-size:12px;
        line-height:1.5;
        color:var(--muted);
      }
    }
  }

  .arrowwrap {
    svg {
      width:30px;
      height:30px;
      color:var(--brand);
    }
  }

  .tax-note {
    margin-top:18px;
    display:flex;
    align-items:flex-start;
    gap:11px;
    border:1px solid rgba(14,158,118,.22);
    background:rgba(14,158,118,.05);
    border-radius:12px;
    padding:14px 16px;

    svg {
      width:18px;
      height:18px;
      color:var(--brand);
      flex:0 0 auto;
      margin-top:1px;
    }

    p {
      font-size:13px;
      color:var(--muted);
      line-height:1.55;

      b {
        color:var(--ink);
        font-weight:600;
      }
    }

    .tn-body {
      display:flex;
      flex-direction:column;
      gap:9px;
    }
  }

  .tn-logos {
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:3px;
    padding-top:11px;
    border-top:1px solid rgba(14,158,118,.18);
    flex-wrap:wrap;

    .tn-lbl {
      font-family:'IBM Plex Mono';
      font-size:9px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--faint);
    }

    img {
      height:23px;
      width:auto;
      display:block;
    }
  }

  /* =========================================================
     CASE STUDY
     ========================================================= */

  .case {
    margin-top:24px;
    border:1px solid var(--line);
    border-top:3px solid var(--brand);
    border-radius:20px;
    overflow:hidden;
    background:linear-gradient(180deg,#FFFFFF,#EEF5F0);
  }

  .case-head {
    padding:24px 28px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    flex-wrap:wrap;

    .ttl {
      display:flex;
      flex-direction:column;
      gap:7px;
      max-width:62ch;
    }

    .tag {
      font-family:'IBM Plex Mono';
      font-size:10.5px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--brand);
    }

    h3 {
      font-size:21px;
      line-height:1.18;
      color:var(--ink);

      .g {
        color:var(--brand);
      }
    }
  }

  .case-logo {
    height:42px;
    width:auto;
    display:block;
    flex:0 0 auto;
  }

  .case-grid {
    display:grid;
    grid-template-columns:1fr 72px 1fr;
  }

  .case-col {
    padding:28px 30px;

    &.mid {
      display:flex;
      align-items:center;
      justify-content:center;
      padding:14px 0;
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
      background:var(--paper-2);
    }

    .ph {
      font-family:'IBM Plex Mono';
      font-size:10.5px;
      letter-spacing:.12em;
      text-transform:uppercase;
      margin-bottom:18px;
    }

    &.before .ph {
      color:var(--amber);
    }

    &.after .ph {
      color:var(--brand-deep);
    }

    ul {
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:13px;
    }

    li {
      font-size:13.5px;
      color:var(--muted);
      line-height:1.5;
      padding-left:20px;
      position:relative;

      &::before {
        content:"";
        position:absolute;
        left:2px;
        top:7px;
        width:7px;
        height:7px;
        border-radius:50%;
      }
    }

    &.before li::before {
      background:var(--amber-bright);
    }

    &.after li::before {
      background:var(--brand);
    }
  }

  .case-chev {
    flex:none;
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--brand);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow:0 8px 20px -10px rgba(14,158,118,.8);

    svg {
      width:19px;
      height:19px;
    }
  }

  .case-quote {
    border-top:1px solid var(--line-2);
    background:rgba(14,158,118,.06);
    padding:30px 34px;
    display:flex;
    gap:22px;
    align-items:flex-start;

    .cq-mark {
      font-family:'Bricolage Grotesque',sans-serif;
      font-weight:800;
      font-size:64px;
      line-height:.7;
      color:var(--brand);
      flex:none;
    }

    .cq-body {
      flex:1;
    }

    p {
      font-family:'Bricolage Grotesque',sans-serif;
      font-weight:500;
      font-size:clamp(17px,1.9vw,21px);
      line-height:1.4;
      letter-spacing:-.01em;
      color:var(--brand-ink);
    }

    .cq-who {
      margin-top:16px;
      display:flex;
      align-items:center;
      gap:12px;

      img {
        height:24px;
        width:auto;
        display:block;
      }

      span {
        font-family:'IBM Plex Mono';
        font-size:11px;
        letter-spacing:.04em;
        color:var(--muted);
      }
    }
  }

  /* =========================================================
     BENEFITS
     ========================================================= */

  .benefits {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:40px;
  }

  .benefit {
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04);
    border-radius:14px;
    padding:22px 20px;

    .bi {
      width:38px;
      height:38px;
      border-radius:10px;
      background:rgba(47,215,155,.14);
      color:var(--mint);
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:14px;

      svg {
        width:19px;
        height:19px;
      }
    }

    h4 {
      font-family:'Bricolage Grotesque',sans-serif;
      font-weight:600;
      font-size:15.5px;
      color:#fff;
      margin-bottom:7px;
      line-height:1.2;
    }

    p {
      font-size:12.5px;
      color:rgba(234,243,238,.72);
      line-height:1.5;
    }
  }

  /* =========================================================
     QUOTE CARD
     ========================================================= */

  .quote-card {
    margin-top:24px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    background:rgba(255,255,255,.04);
    padding:36px 40px;
    display:flex;
    gap:26px;
    align-items:flex-start;

    .cq-mark {
      font-family:'Bricolage Grotesque',sans-serif;
      font-weight:800;
      font-size:72px;
      line-height:.7;
      color:var(--mint);
      flex:none;
    }

    .cq-body {
      flex:1;
    }

    p {
      font-family:'Bricolage Grotesque',sans-serif;
      font-weight:500;
      font-size:clamp(18px,2.1vw,24px);
      line-height:1.4;
      letter-spacing:-.01em;
      color:#fff;
    }

    .cq-who {
      margin-top:20px;
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;

      img {
        height:26px;
        width:auto;
        display:block;
      }

      span {
        font-family:'IBM Plex Mono';
        font-size:12px;
        letter-spacing:.03em;
        color:rgba(234,243,238,.72);
      }
    }
  }

  /* =========================================================
     AI ASSISTANT
     ========================================================= */

  .assist-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
    margin-top:8px;
  }

  .assist-copy {
    .alist {
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:16px;
      margin-top:26px;

      li {
        display:flex;
        gap:14px;
        font-size:14.5px;
        color:var(--muted);
        line-height:1.5;
      }

      .ai {
        width:34px;
        height:34px;
        border-radius:9px;
        background:var(--paper-2);
        border:1px solid var(--line);
        color:var(--brand);
        display:flex;
        align-items:center;
        justify-content:center;
        flex:none;

        svg {
          width:17px;
          height:17px;
        }
      }

      b {
        color:var(--ink);
        font-weight:600;
        display:block;
        margin-bottom:2px;
      }
    }
  }

  .assist-stage {
    display:flex;
    justify-content:center;
  }

  .device {
    width:100%;
    max-width:338px;
    border:1px solid var(--line-2);
    border-radius:22px;
    background:#fff;
    padding:10px;
    box-shadow:
      0 50px 100px -50px rgba(8,40,28,.55),
      0 2px 0 rgba(255,255,255,.6) inset;

    video {
      width:100%;
      display:block;
      border-radius:14px;
    }
  }

  .device-cap {
    text-align:center;
    font-family:'IBM Plex Mono';
    font-size:10px;
    color:var(--faint);
    margin-top:12px;
    letter-spacing:.03em;
  }

  .device-hero {
    max-width:540px;
    margin:0 auto;
  }

  /* =========================================================
     LIFECYCLE
     ========================================================= */

  .lc-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin-top:48px;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
  }

  .lc {
    padding:30px 28px;
    border-right:1px solid var(--line);
    position:relative;

    &:last-child {
      border-right:0;
    }

    .num {
      font-family:'IBM Plex Mono';
      font-size:11px;
      color:var(--brand);
      letter-spacing:.1em;
    }

    h4 {
      font-family:'Bricolage Grotesque';
      font-weight:600;
      font-size:18px;
      margin:10px 0 9px;
    }

    p {
      font-size:13.5px;
      color:var(--muted);
      line-height:1.55;
    }
  }

  /* =========================================================
     DELIVERY
     ========================================================= */

  .deliv {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:48px;
  }

  .dcard {
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px 28px;
    background:#fff;

    .dn {
      font-family:'IBM Plex Mono';
      font-size:10.5px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--brand);
      margin-bottom:14px;
    }

    h3 {
      font-size:20px;
      margin-bottom:11px;
    }

    .dl {
      font-size:13.5px;
      color:var(--muted);
      line-height:1.55;
      margin-bottom:16px;
    }

    ul {
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    li {
      font-size:13px;
      color:var(--muted);
      line-height:1.45;
      padding-left:19px;
      position:relative;

      &::before {
        content:"";
        position:absolute;
        left:0;
        top:8px;
        width:7px;
        height:7px;
        border-radius:50%;
        border:2px solid var(--brand);
      }
    }
  }

  /* =========================================================
     FEATURE GRID
     ========================================================= */

  .feat {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:48px;
  }

  .fc {
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px 20px;
    background:#fff;
    transition:border-color .2s,transform .2s;

    &:hover {
      border-color:var(--brand);
      transform:translateY(-2px);
    }

    .fi {
      width:38px;
      height:38px;
      border-radius:10px;
      background:var(--paper-2);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--brand);
      margin-bottom:14px;

      svg {
        width:19px;
        height:19px;
      }
    }

    h4 {
      font-family:'Bricolage Grotesque';
      font-weight:600;
      font-size:15px;
      margin-bottom:6px;
    }

    p {
      font-size:12.5px;
      color:var(--muted);
      line-height:1.5;
    }
  }

  /* =========================================================
     TESTIMONIALS
     ========================================================= */

  .quotes {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:48px;
  }

  .q {
    border:1px solid var(--line);
    border-radius:18px;
    padding:34px 32px;
    background:linear-gradient(180deg,#fff,var(--paper-2));

    .mark {
      font-family:'Bricolage Grotesque';
      font-weight:800;
      font-size:44px;
      color:var(--brand);
      line-height:.6;
      height:24px;
    }

    p {
      font-size:17px;
      line-height:1.55;
      color:var(--ink);
      margin:14px 0 20px;
    }

    .who {
      font-family:'IBM Plex Mono';
      font-size:11.5px;
      color:var(--muted);
      letter-spacing:.02em;

      b {
        color:var(--ink);
        font-weight:600;
      }
    }
  }

  /* =========================================================
     WHY
     ========================================================= */

  .why-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:44px;
  }

  .why {
    padding-top:18px;
    border-top:2px solid var(--brand);

    h5 {
      font-family:'Bricolage Grotesque';
      font-weight:600;
      font-size:15.5px;
      line-height:1.25;
      margin-bottom:8px;

      em {
        font-style:normal;
        color:var(--brand);
      }
    }

    p {
      font-size:12.5px;
      color:var(--muted);
      line-height:1.5;
    }
  }

  /* =========================================================
     CTA / CONTACT
     ========================================================= */

  .cta-band {
    background:
      radial-gradient(
        640px 420px at 82% 14%,
        rgba(47,215,155,.16),
        transparent 64%
      ),
      linear-gradient(135deg,var(--forest),var(--forest-2));
    color:#fff;
  }

  .cta-grid {
    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:50px;
    align-items:center;

    h2 {
      font-size:clamp(28px,3.6vw,42px);
      line-height:clamp(34px,4.3vw,52px);
      margin:16px 0 0;
      font-weight:bold;
      color:#fff;

      .g {
        color:var(--mint);
      }
    }

    .ctl {
      margin-top:18px;
      color:rgba(255,255,255,.82);
      font-size:17px;
      line-height:1.6;
      max-width:46ch;
    }
  }

  .cta-actions {
    margin-top:28px;
    display:flex;
    gap:13px;
    flex-wrap:wrap;
    align-items:center;
  }

  .contact-card {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    padding:28px;

    .ch-h {
      font-family:'IBM Plex Mono';
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--mint);
      margin-bottom:18px;
    }

    .who {
      b {
        display:block;
        font-family:'Bricolage Grotesque';
        font-weight:600;
        font-size:18px;
        margin-bottom:3px;
      }

      span {
        font-size:13.5px;
        color:rgba(255,255,255,.72);
      }
    }

    .em {
      margin-top:7px;
      font-family:'IBM Plex Mono';
      font-size:12.5px;
      color:var(--mint);
      word-break:break-all;
    }

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

    .cc-photo {
      width:96px;
      height:96px;
      border-radius:50%;
      object-fit:cover;
      flex:none;
      border:2px solid rgba(255,255,255,.2);
    }
  }

  /* =========================================================
     DEMO FORM
     ========================================================= */

  .demo-form {
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 30px 70px -40px rgba(0,0,0,.6);

    .df-h {
      font-family:'IBM Plex Mono';
      font-size:10.5px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--brand-deep);
      margin-bottom:20px;
    }
  }

  .df-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .df-field {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;

    label {
      font-size:12px;
      font-weight:600;
      color:var(--ink);
    }

    input,
    select {
      font-family:inherit;
      font-size:14px;
      color:var(--ink);
      background:var(--paper-2);
      border:1px solid var(--line-2);
      border-radius:10px;
      padding:11px 12px;
      outline:none;
      width:100%;
      transition:border-color .15s,box-shadow .15s,background .15s;

      &:focus {
        border-color:var(--brand);
        box-shadow:0 0 0 3px rgba(14,158,118,.15);
        background:#fff;
      }

      &.df-err {
        border-color:#D26B5A;
        box-shadow:0 0 0 3px rgba(210,107,90,.14);
      }
    }
  }

  .df-hint {
    font-size:11.5px;
    color:var(--muted);
    margin:-4px 0 16px;
  }

  .df-submit {
    width:100%;
    margin-top:4px;
    font-family:inherit;
    font-weight:700;
    font-size:15px;
    border:0;
    border-radius:999px;
    padding:15px;
    background:var(--brand);
    color:#fff;
    cursor:pointer;
    transition:transform .2s,background .2s;

    &:hover {
      transform:translateY(-2px);
      background:var(--brand-deep);
    }
  }

  .df-note {
    margin-top:12px;
    font-size:11.5px;
    color:var(--muted);
    text-align:center;
  }

  .df-success {
    display:none;
    text-align:center;
    padding:26px 8px;

    .tick {
      width:52px;
      height:52px;
      border-radius:50%;
      background:rgba(14,158,118,.12);
      color:var(--brand-deep);
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 16px;

      svg {
        width:26px;
        height:26px;
      }
    }

    h4 {
      font-family:'Bricolage Grotesque';
      font-weight:600;
      font-size:20px;
      margin-bottom:9px;
      color:var(--ink);
    }

    p {
      font-size:14px;
      color:var(--muted);
      line-height:1.55;
      max-width:36ch;
      margin:0 auto;
    }
  }

  /* =========================================================
     ANIMATION
     ========================================================= */

  .reveal {
    opacity:0;
    transform:translateY(20px);
    transition:
      opacity .7s cubic-bezier(.2,.7,.2,1),
      transform .7s cubic-bezier(.2,.7,.2,1);

    &.in {
      opacity:1;
      transform:none;
    }
  }

  /* =========================================================
     RESPONSIVE
     ========================================================= */

  @media (max-width:1000px) {

    .hero-grid {
      grid-template-columns:1fr;
      gap:42px;
    }

    .cost-wrap {
      grid-template-columns:1fr;
    }

    .pillars,
    .ch-grid,
    .ss-grid,
    .feat,
    .why-grid,
    .benefits {
      grid-template-columns:1fr 1fr;
    }

    .lc-grid,
    .deliv,
    .quotes,
    .cta-grid,
    .tax-grid,
    .case-grid {
      grid-template-columns:1fr;
    }

    .lc {
      border-right:0;
      border-bottom:1px solid var(--line);

      &:last-child {
        border-bottom:0;
      }
    }

    .ss {
      border-right:0;
      border-bottom:1px solid var(--line);
    }

    .tax-col.mid {
      border:0;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:14px;

      .arrowwrap {
        transform:rotate(90deg);
      }
    }

    .case-col.mid {
      border:0;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:14px;

      .case-chev {
        transform:rotate(90deg);
      }
    }

    .ai-highlight {
      grid-template-columns:1fr;
      gap:28px;
    }

    .assist-grid {
      grid-template-columns:1fr;
      gap:36px;
    }

    .assist-stage {
      order:-1;
    }
  }

  @media (max-width:860px) {

    .nav-links {
      a:not(.btn) {
        display:none;
      }
    }
  }

  @media (max-width:600px) {

    .wrap {
      padding:0 18px;
    }

    .pillars,
    .ch-grid,
    .ss-grid,
    .feat,
    .why-grid,
    .benefits {
      grid-template-columns:1fr;
    }

    .demo-body {
      grid-template-columns:1fr;
    }

    .demo-rail {
      display:none;
    }

    .logos {
      gap:28px 32px;
      padding:28px 20px;
    }

    .tb-logos {
      grid-template-columns:repeat(2,1fr);
      gap:22px 24px;
    }

    .case-quote {
      padding:24px 22px;
      gap:14px;

      .cq-mark {
        font-size:48px;
      }
    }

    .quote-card {
      padding:26px 22px;
      gap:14px;

      .cq-mark {
        font-size:52px;
      }
    }

    .df-row {
      grid-template-columns:1fr;
    }

    .demo-form {
      padding:24px 20px;
    }
  }

  @media (prefers-reduced-motion:reduce) {

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

    * {
      scroll-behavior:auto;
    }
  }
}