/* ==========================================================================
   dulus.ai — site.css
   Commercial landing layer on top of the shared liquid-glass design system.

   Editing this file cannot affect dulus.online, dulus.work, the API, the
   control plane or Fuel. There is no shared runtime between them.

   Everything raised on this page is the `.glass` material from core.css,
   driven through the same four variables (--glass-fill, --glass-rim,
   --lg-lift, --lg-sheen). Nothing here re-implements the material.
   ========================================================================== */

@layer site {
  :root {
    --accent: var(--dulus-orange);
    --accent-soft: var(--dulus-gold);
    --signal: var(--dulus-green);
    --nav-h: 80px;
  }

  [data-theme="dark"] {
    --mesh-1: rgba(255, 107, 31, 0.19);
    --mesh-2: rgba(255, 194, 51, 0.09);
    --mesh-3: rgba(255, 240, 200, 0.05);
  }

  /* ======================================================================
     HERO
     Three depth planes: the bird sits behind the glass, the product shot is
     the glass, the receipt floats in front of it.
     ====================================================================== */

  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: 0;
    /* core.css pulls <main> up under the floating nav capsule; this gives the
       height back so the copy starts where it always did. */
    padding-block: calc(var(--nav-h) + clamp(36px, 5vw, 72px))
      clamp(48px, 6vw, 88px);
    background:
      radial-gradient(
        circle at 78% 16%,
        color-mix(in oklab, var(--dulus-gold) 16%, transparent),
        transparent 32%
      ),
      radial-gradient(
        circle at 14% 76%,
        color-mix(in oklab, var(--accent) 12%, transparent),
        transparent 36%
      ),
      linear-gradient(180deg, var(--hero-wash) 0%, var(--bg) 100%);
  }

  .hero__grid {
    display: grid;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
    grid-template-columns: 1fr;
  }
  @media (min-width: 1060px) {
    .hero__grid {
      /* Copy-first balance. Old minmax(520px, …) on the shot crushed the
         title into a 480px column and forced multi-line wrap on every phrase. */
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
      gap: clamp(24px, 3.5vw, 44px);
      align-items: start;
    }
  }
  .hero__grid,
  .hero__grid > *,
  .hero__copy,
  .hero__shot {
    min-width: 0;
  }
  .hero__copy > * {
    min-width: 0;
    max-width: 100%;
  }

  .hero__copy {
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }

  .hero__title {
    display: grid;
    gap: 0.02em;
    margin-top: var(--s-2);
    /* No ch-cap: EN line 2 ("should actually do something.") is ~29ch and a
       tight cap forced an ugly mid-phrase wrap even after the grid rebalance. */
    max-width: none;
    font-size: clamp(2.35rem, 4.1vw + 0.4rem, 3.55rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.06;
    text-wrap: balance;
  }
  .hero__title > span {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: manual;
  }

  /* Stops are tokens, not literals: the dark theme ends on cream, which would
     be invisible against the light background, so --warm-hi flips to a deep
     burnt orange there and the last two words stay readable. */
  .hero__title-accent {
    /* Solid first so engines without background-clip:text never go invisible. */
    color: var(--accent-ink);
    background: none;
  }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero__title-accent {
      color: transparent;
      background: linear-gradient(
        98deg in oklab,
        var(--accent-ink) 0%,
        var(--gold-ink) 58%,
        var(--warm-hi) 100%
      );
      background-size: 200% 100%;
      background-position: var(--flow) 0;
      -webkit-background-clip: text;
      background-clip: text;
      animation: dulus-flow 12s var(--ease) infinite alternate;
    }
  }

  .hero__lede {
    max-width: 52ch;
  }
  .hero__lede code {
    color: var(--gold-ink);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .hero__cta2 {
    gap: var(--s-1);
    margin-top: calc(-1 * var(--s-2));
    padding-top: var(--s-1);
  }
  .hero__cta2 .btn--quiet {
    padding-inline: 0;
    margin-right: var(--s-4);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 5px;
  }
  .hero__cta2 .btn--quiet:hover {
    text-decoration-color: var(--accent);
  }

  .live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--dulus-green);
    box-shadow:
      0 0 0 5px rgba(0, 255, 163, 0.09),
      0 0 18px rgba(0, 255, 163, 0.55);
    animation: dulus-pulse 2.4s var(--ease) infinite;
  }

  /* Proof strip — four hairline-separated glass cells. */
  .hero__proof-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--line);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo);
  }
  @media (min-width: 720px) {
    .hero__proof-strip {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .hero__proof-strip li {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px 14px;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero__proof-strip li {
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
    }
  }
  .hero__proof-strip strong {
    overflow-wrap: anywhere;
    color: var(--gold-ink);
    font: 700 12px/1.3 var(--font-mono);
  }
  .hero__proof-strip span {
    color: var(--ink-3);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .hero__stats {
    margin-top: var(--s-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 560px) {
    .hero__stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .hero__stats .stat__num {
    font-size: var(--t-xl);
  }
  .hero__stats .stat__label {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .hero__shot {
    position: relative;
    padding-block: clamp(20px, 4vw, 48px) 40px;
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }

  .hero__bird {
    position: absolute;
    z-index: -1;
    width: min(70%, 430px);
    right: -4%;
    top: -11%;
    opacity: 0.42;
    filter: drop-shadow(0 20px 46px rgba(255, 128, 24, 0.22));
    animation: dulus-float 13s var(--ease) infinite;
  }

  /* The shot is tilted away from the reader, so the glass edge catches light
     down one side and the bird behind it visibly refracts. */
  .hero__shot .shot {
    transform: perspective(1400px) rotateY(-5deg) rotateX(1.2deg);
    transition: transform var(--dur-4) var(--ease-out);
  }
  .hero__shot:hover .shot {
    transform: perspective(1400px) rotateY(-2deg) rotateX(0.4deg);
  }

  .hero__receipt {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(330px, 78%);
    display: grid;
    gap: 4px;
    padding: 17px 19px;
    border-radius: var(--r-md);
    background: linear-gradient(
        color-mix(in oklab, var(--signal) 10%, var(--glass-tint)),
        transparent
      ),
      var(--glass);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
      inset 0 0 0 1px color-mix(in oklab, var(--signal) 26%, transparent),
      0 24px 60px -26px rgba(0, 255, 163, 0.42);
    animation: dulus-float 9s var(--ease) infinite;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero__receipt {
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      backdrop-filter: blur(24px) saturate(180%);
    }
  }
  .hero__receipt > span {
    color: var(--green-ink);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hero__receipt > span i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
  }
  .hero__receipt strong {
    color: var(--ink);
    font-size: var(--t-sm);
  }
  .hero__receipt small {
    color: var(--ink-3);
    font-size: 10px;
  }

  /* ======================================================================
     SCREENSHOT FRAMES
     ====================================================================== */

  .shot {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-3);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .shot {
      -webkit-backdrop-filter: blur(24px) saturate(175%);
      backdrop-filter: blur(24px) saturate(175%);
    }
  }

  .shot__bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 11px 15px;
    border-bottom: var(--bw) solid var(--line);
    background: var(--glass-tint);
  }

  .shot__url {
    margin-inline: auto;
    padding: 4px 13px;
    border-radius: var(--r-pill);
    background: var(--glass-tint);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
    font-size: var(--t-xs);
    color: var(--ink-3);
  }

  /* Aspect-ratio boxes keep the layout stable before the PNG arrives, so a
     missing screenshot reads as an empty product panel, never as a broken
     page. */
  .shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    background: var(--bg-3);
  }
  .shot--hero img {
    aspect-ratio: 16 / 10;
  }

  .shot__cap {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--bg) 70%, transparent);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 38%, transparent);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .shot__cap {
      -webkit-backdrop-filter: blur(14px) saturate(170%);
      backdrop-filter: blur(14px) saturate(170%);
    }
  }

  .shot__legend {
    display: grid;
    gap: 6px;
    padding: 19px;
    border-top: var(--bw) solid var(--line);
    background: var(--glass-tint);
  }
  .shot__legend strong {
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .shot__legend > span:last-child {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
  }

  .gallery {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 900px) {
    .gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shot--wide {
      grid-column: 1 / -1;
    }
    .shot--wide img {
      aspect-ratio: 21 / 9;
    }
  }

  /* ======================================================================
     STRIPS
     ====================================================================== */

  .strip__label {
    font-size: var(--t-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
  }
  .logo-strip--models span {
    font-family: var(--font-sans);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ink-2);
  }
  .logo-strip--models span:hover {
    color: var(--ink);
  }

  /* ======================================================================
     ROUTER
     ====================================================================== */

  .router {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px) {
    .router {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  .router__code {
    display: grid;
    gap: var(--s-5);
  }
  .router__copy {
    margin-left: auto;
  }

  .router__pre {
    display: block;
    padding: 19px;
    margin: 0;
    overflow-x: auto;
    font-size: var(--t-sm);
    line-height: 1.75;
  }
  .router__pre code {
    color: #dcd7d0;
    white-space: pre;
  }

  .router__catalog {
    display: grid;
    gap: var(--s-4);
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: var(--r-lg);
    background: radial-gradient(
        130% 92% at 100% 0%,
        color-mix(in oklab, var(--accent) 12%, transparent) 0%,
        transparent 60%
      ),
      linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .router__catalog {
      -webkit-backdrop-filter: blur(22px) saturate(175%);
      backdrop-filter: blur(22px) saturate(175%);
    }
  }

  .router__catalogHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: var(--s-3);
    border-bottom: var(--bw) solid var(--line);
  }

  .mlist {
    display: grid;
    gap: 0;
  }
  .mlist li {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto;
    gap: var(--s-3);
    align-items: baseline;
    padding: 11px 8px;
    margin-inline: -8px;
    border-radius: var(--r-sm);
    border-bottom: var(--bw) solid var(--line);
    font-size: var(--t-sm);
    transition: background var(--dur-2) var(--ease);
  }
  .mlist li:hover {
    background: var(--glass-tint);
  }
  .mlist li:last-child {
    border-bottom: 0;
  }
  .mlist__n {
    color: var(--ink);
    font-size: var(--t-xs);
    white-space: nowrap;
  }
  .mlist__d {
    color: var(--ink-3);
    font-size: var(--t-xs);
    min-width: 0;
  }
  .mlist__r {
    color: var(--accent);
    font-size: var(--t-xs);
  }
  .mlist--hi .mlist__n {
    color: var(--accent);
    font-weight: 700;
  }

  .router__note {
    font-size: var(--t-xs);
    color: var(--ink-4);
    line-height: 1.6;
  }
  .router__ticks li {
    font-size: var(--t-sm);
  }

  /* ======================================================================
     PLANS
     ====================================================================== */

  .plans {
    display: grid;
    gap: var(--s-4);
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .plans {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1320px) {
    .plans {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .plan {
    position: relative;
    gap: var(--s-4);
  }
  .plan--hi {
    --glass-fill: color-mix(in oklab, var(--accent) 10%, var(--glass-tint));
    background: radial-gradient(
        130% 108% at 100% 0%,
        color-mix(in oklab, var(--accent) 16%, transparent) 0%,
        transparent 62%
      ),
      linear-gradient(var(--glass-fill), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent),
      0 20px 60px -28px rgba(255, 107, 31, 0.55);
  }

  .plan__tag {
    position: absolute;
    top: 0;
    right: 20px;
    transform: translateY(-50%);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(
      165deg,
      color-mix(in oklab, var(--accent-soft) 55%, white 6%),
      var(--accent)
    );
    box-shadow: 0 8px 22px -10px rgba(255, 107, 31, 0.9);
    color: #12100e;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .plan__head {
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  .plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .plan__price--custom {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  }

  .plan__unit {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-2);
  }
  .plan__per {
    color: var(--ink-4);
  }
  .plan__usd {
    font-size: var(--t-xs);
    color: var(--ink-2);
  }

  /* Live USD ticker (mirrors production dulus.ai feel) */
  .plan__usd.live-usd {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .plan__usd .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3ddc97;
    box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.12);
    flex: 0 0 auto;
  }
  .plan__usd .sub-live {
    font-size: var(--t-sm);
    font-weight: 700;
    color: #3ddc97;
    transition: color 0.3s, transform 0.3s;
  }
  .plan__usd .sub-live.up {
    transform: translateY(-1px);
    color: #7dffbd;
  }
  .plan__usd .sub-live.down {
    transform: translateY(1px);
    color: #ff8b74;
  }
  .plan__usd .live-label {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }


  .plan__offer {
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--signal) 11%, transparent);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--signal) 36%, transparent);
    font-size: var(--t-xs);
    color: var(--signal-ink);
  }
  .plan__offer strong {
    font-size: var(--t-sm);
  }

  .plan__pitch {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
  }

  .plan__list {
    margin-block: 0 auto;
  }
  .plan__list li {
    font-size: var(--t-xs);
  }

  .plans__note {
    margin-top: var(--s-6);
    font-size: var(--t-xs);
    max-width: 70ch;
    margin-inline: auto;
  }

  /* ======================================================================
     DOWNLOADS
     ====================================================================== */

  .dl {
    display: grid;
    gap: var(--s-5);
    align-items: start;
    grid-template-columns: 1fr;
    min-width: 0;
  }
  @media (min-width: 980px) {
    .dl {
      grid-template-columns: 1.15fr 0.85fr;
    }
  }

  .dl__main {
    display: grid;
    gap: var(--s-4);
    min-width: 0;
    max-width: 100%;
    padding: clamp(22px, 3vw, 36px);
    border-radius: var(--r-xl);
    background: radial-gradient(
        130% 100% at 100% 0%,
        color-mix(in oklab, var(--accent) 15%, transparent) 0%,
        transparent 62%
      ),
      linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent),
      var(--shadow-2);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .dl__main {
      -webkit-backdrop-filter: blur(26px) saturate(180%);
      backdrop-filter: blur(26px) saturate(180%);
    }
  }

  .dl__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
  }
  .dl__sub {
    font-size: var(--t-xs);
    margin-top: 4px;
  }
  .dl__tags {
    gap: 6px;
  }

  .dl__notes {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 70ch;
  }

  .dl__cta {
    justify-self: start;
  }

  .dl__sum {
    display: grid;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 15px 17px;
    border-radius: var(--r-md);
    background: var(--sunken);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
  }
  .dl__sumLabel {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .dl__hash {
    font-size: 11px;
    color: var(--ink-3);
    word-break: break-all;
    line-height: 1.5;
  }
  .dl__sum .copy-btn {
    justify-self: start;
  }

  .dl__side {
    display: grid;
    gap: var(--s-4);
    min-width: 0;
    max-width: 100%;
  }
  .dl__alt {
    gap: var(--s-3);
    min-width: 0;
    max-width: 100%;
  }
  .dl__altHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
  }
  .dl__cli {
    min-width: 0;
    max-width: 100%;
  }
  .dl__cli code {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ======================================================================
     FUEL PROOF — deposit → ledger → key → call → settlement
     ====================================================================== */

  .fuel-proof {
    position: relative;
    border-block: var(--bw) solid var(--line);
    background: radial-gradient(
        circle at 92% 10%,
        color-mix(in oklab, var(--dulus-gold) 10%, transparent),
        transparent 32%
      ),
      linear-gradient(180deg, var(--bg-1), var(--bg));
  }

  .fuel-proof__head {
    display: grid;
    gap: var(--s-5);
    align-items: end;
    margin-bottom: clamp(38px, 5vw, 64px);
  }
  .fuel-proof__head .h2 {
    max-width: 13ch;
    margin-top: var(--s-4);
  }
  @media (min-width: 900px) {
    .fuel-proof__head {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  /* The 1px gaps are the conduit: a gold→green gradient the glass cells sit
     on top of, so the flow direction reads before any text is parsed. */
  .fuel-flow {
    display: grid;
    /* Responsive: stacked on phones, 2-up on tablets, the full 5-step row only
       once there is width for it. Forcing repeat(5) at every size crushed the
       cells and pushed the step text and the → connectors past the right edge. */
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 1px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--dulus-gold) 42%, transparent),
      var(--line) 45%,
      color-mix(in oklab, var(--signal) 32%, transparent)
    );
  }

  @media (min-width: 560px) {
    .fuel-flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1040px) {
    .fuel-flow {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .fuel-step {
    position: relative;
    min-height: 178px;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: clamp(18px, 2.2vw, 28px);
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    transition: background var(--dur-2) var(--ease);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .fuel-step {
      -webkit-backdrop-filter: blur(20px) saturate(170%);
      backdrop-filter: blur(20px) saturate(170%);
    }
  }
  .fuel-step:hover {
    background: linear-gradient(var(--glass-tint-hi), transparent),
      var(--glass);
  }

  .fuel-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    z-index: 2;
    right: -10px;
    top: 27px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-ink);
    background: var(--bg-1);
    font-size: 12px;
  }

  /* The → connector points into the 1px column gap — only valid in the single
     5-across row. When the grid stacks/wraps it would jut past the edge. */
  @media (max-width: 1039.98px) {
    .fuel-step:not(:last-child)::after {
      display: none;
    }
  }

  .fuel-step__num {
    color: var(--gold-ink);
    font: 700 10px/1 var(--font-mono);
    letter-spacing: 0.15em;
  }
  .fuel-step strong {
    font-size: var(--t-lg);
  }
  .fuel-step p {
    color: var(--ink-3);
    font-size: var(--t-sm);
    line-height: 1.55;
  }

  .proof-grid {
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    align-items: stretch;
    margin-top: clamp(36px, 5vw, 64px);
  }
  @media (min-width: 940px) {
    .proof-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
  }

  .proof-terminal {
    min-width: 0;
  }
  .proof-terminal .terminal__body {
    max-width: 100%;
    padding: clamp(18px, 3vw, 32px);
    overflow-x: auto;
    line-height: 1.75;
  }
  .proof-terminal .terminal__body code {
    color: #e5dfd5;
    white-space: pre;
  }
  .proof-terminal__result {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 13px 18px;
    border-top: 1px solid rgba(0, 255, 163, 0.16);
    color: var(--dulus-green);
    background: rgba(0, 255, 163, 0.05);
    font-size: 10px;
  }

  .proof-card {
    display: grid;
    align-content: start;
    gap: var(--s-5);
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--r-xl);
    background: linear-gradient(
        148deg,
        color-mix(in oklab, var(--dulus-gold) 9%, transparent),
        color-mix(in oklab, var(--accent) 3%, transparent)
      ),
      var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--dulus-gold) 22%, transparent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .proof-card {
      -webkit-backdrop-filter: blur(24px) saturate(175%);
      backdrop-filter: blur(24px) saturate(175%);
    }
  }
  .proof-card h3 {
    max-width: 18ch;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
  }
  .proof-card h3 code {
    color: var(--gold-ink);
    font-size: 0.74em;
  }
  .proof-card > p {
    color: var(--ink-2);
  }
  .proof-list {
    display: grid;
    gap: 13px;
  }
  .proof-list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    color: var(--ink-2);
    font-size: var(--t-sm);
  }
  .proof-list li > span:first-child {
    color: var(--green-ink);
  }
  .proof-card .btn {
    justify-self: start;
  }

  /* ======================================================================
     BUSINESS / WHATSAPP
     ====================================================================== */

  .bz__head {
    margin-bottom: 0;
  }

  .wa {
    align-self: start;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-3);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .wa {
      -webkit-backdrop-filter: blur(24px) saturate(175%);
      backdrop-filter: blur(24px) saturate(175%);
    }
  }

  .wa__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: var(--bw) solid var(--line);
    background: var(--glass-tint);
  }
  .wa__bar img {
    border-radius: 50%;
  }
  .wa__id {
    display: grid;
    gap: 1px;
  }
  .wa__id strong {
    font-size: var(--t-sm);
    font-weight: 600;
  }
  .wa__id span {
    font-size: 10px;
  }

  .wa__body {
    display: grid;
    gap: 10px;
    padding: 19px 17px;
    background: radial-gradient(
      80% 60% at 100% 0%,
      color-mix(in oklab, var(--signal) 6%, transparent) 0%,
      transparent 70%
    );
  }

  .bubble {
    max-width: 88%;
    padding: 11px 15px;
    border-radius: 16px 16px 16px 5px;
    background: var(--glass-tint);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .bubble--me {
    margin-left: auto;
    border-radius: 16px 16px 5px 16px;
    background: color-mix(in oklab, var(--signal) 13%, transparent);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--signal) 28%, transparent);
    color: var(--ink);
  }

  /* ======================================================================
     TOKEN
     ====================================================================== */

  .token {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px) {
    .token {
      grid-template-columns: 0.9fr 1.1fr;
    }
  }

  .token__side {
    display: grid;
    gap: var(--s-5);
  }

  .token__rows {
    display: grid;
    gap: 1px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
  }
  .token__rows > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--s-3);
    padding: 14px 17px;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    font-size: var(--t-sm);
    align-items: center;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .token__rows > div {
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
    }
  }
  .token__rows dt {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .token__rows dd {
    min-width: 0;
  }

  .token__addr {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .token__addr code {
    font-size: 11px;
    color: var(--ink-2);
    word-break: break-all;
  }

  .token__cta {
    gap: var(--s-3);
  }

  .token__chart {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-1);
    box-shadow:
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-2);
  }
  .token__chart iframe {
    display: block;
    width: 100%;
    height: clamp(360px, 46vw, 480px);
    border: 0;
  }

  .note {
    padding: 13px 15px;
    border-left: 2px solid var(--dulus-yellow);
    background: color-mix(in oklab, var(--dulus-yellow) 9%, transparent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-2);
  }

  /* ======================================================================
     CTA + FOOTER
     ====================================================================== */

  .cta {
    position: relative;
    overflow: hidden;
    border-top: var(--bw) solid var(--line);
  }
  .cta__title {
    margin-bottom: var(--s-4);
  }
  .cta__row {
    justify-content: center;
    margin-top: var(--s-6);
  }

  .footer__blurb {
    margin-block: var(--s-4);
    max-width: 40ch;
  }
  .footer__social {
    gap: var(--s-2);
  }
  .footer__legal {
    max-width: 62ch;
  }

  /* ======================================================================
     NARROW VIEWPORTS
     ====================================================================== */

  @media (max-width: 780px) {
    .hero {
      min-height: 0;
      /* Still has to clear the floating capsule that <main> is pulled under. */
      padding-top: calc(var(--nav-h) + 20px);
    }
    .hero__title {
      max-width: none;
      font-size: clamp(2.15rem, 9.5vw, 3.1rem);
      letter-spacing: -0.04em;
      line-height: 1.08;
    }
    .hero__cta .btn {
      width: 100%;
    }
    .hero__proof-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hero__shot {
      padding-top: 58px;
      padding-bottom: 0;
    }
    .hero__bird {
      width: 67%;
      top: 0;
      right: -4%;
    }
    .hero__shot .shot,
    .hero__shot:hover .shot {
      transform: none;
    }
    .hero__receipt {
      position: relative;
      right: auto;
      width: calc(100% - 24px);
      margin: -18px 12px 0;
      animation: none;
    }
    .fuel-flow {
      grid-template-columns: 1fr;
    }
    .fuel-step {
      min-height: 0;
    }
    .fuel-step:not(:last-child)::after {
      content: "↓";
      right: 20px;
      top: auto;
      bottom: -11px;
    }
  }

  @media (max-width: 380px) {
    .hero__title {
      font-size: 2.42rem;
    }
    .hero__cta2 {
      display: grid;
    }
    .hero__proof-strip {
      grid-template-columns: 1fr 1fr;
    }
    .shot__url {
      max-width: 165px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}