:root {
    --bg: #08080b;
    --bg-alt: #0c0c10;
    --card: #111116;
    --card-hi: #16161d;
    --chip: #1c1c24;
    --line: rgba(255, 255, 255, .07);
    --line-mid: rgba(255, 255, 255, .12);
    --line-hi: rgba(255, 255, 255, .22);
    --ink: #f0f2f8;
    --ink-mid: #9ea0b0;
    --ink-lo: #666880;
    --ink-dim: #44465a;
    --blue: #6b6d78;
    --blue-hi: #8d8f9a;
    --blue-lo: #4a4c57;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: hidden
  }

  a {
    color: inherit;
    text-decoration: none
  }

  ::selection {
    background: var(--blue);
    color: #fff
  }

  /* Shared page background grid texture from page 1 */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .028;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
  }

  .wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px
  }

  /* ===== GLOBAL BACKGROUND (grid squares + glow + AXIOM watermark) — shown on every view ===== */
  .site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
      radial-gradient(950px 600px at 68% 45%, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 48%, transparent 72%),
      radial-gradient(750px 500px at 30% 50%, rgba(170, 172, 184, .07), transparent 65%),
      var(--bg);
  }

  .site-bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 55% 45%, #000 30%, rgba(0, 0, 0, .55) 65%, transparent 95%);
    mask-image: radial-gradient(ellipse at 55% 45%, #000 30%, rgba(0, 0, 0, .55) 65%, transparent 95%);
  }

  /* content sits above the global background */
  .view-panel,
  footer {
    position: relative;
    z-index: 1
  }

  /* ===== NAV ===== */
  header.nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(8, 8, 11, .86);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line)
  }

  .nav-in {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 68px
  }

  .brand-wrap {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    user-select: none
  }

  .axiom-logo-mark {
    width: 22px;
    height: 22px;
    flex: 0 0 auto
  }

  .brand-core {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    cursor: pointer;
  }

  .brand-core:hover {
    transform: scale(1.09) rotate(-2deg) translateX(-4px)
  }

  .brand-mark {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -.02em;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
  }

  .brand-mark span {
    color: #ffffff
  }

  .brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 0 0 14px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-lo);
    letter-spacing: -.01em;
    pointer-events: none;
  }

  nav.links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 30px
  }

  nav.links a.lnk {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-mid);
    transition: color .3s;
    position: relative;
    padding: 4px 0
  }

  nav.links a.lnk::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--blue-hi);
    transition: right .28s cubic-bezier(.2, .8, .2, 1)
  }

  nav.links a.lnk:hover {
    color: var(--ink)
  }

  nav.links a.lnk:hover::after {
    right: 0
  }

  /* ===== BUTTONS ===== */
  .btn {
    --b-lift: -3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.01em;
    line-height: 1;
    padding: 14px 24px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    isolation: isolate;
    overflow: hidden;
    white-space: nowrap;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .3s, color .3s, box-shadow .5s cubic-bezier(.16, 1, .3, 1)
  }

  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, 0) 55%);
    opacity: .5;
    transition: opacity .3s;
    z-index: 1
  }

  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .8) 48%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, .8) 52%, transparent 68%);
    transform: translateX(-140%);
    opacity: 0;
    transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .3s;
    z-index: 2
  }

  .btn:hover::after {
    transform: translateX(140%);
    opacity: .45
  }

  .btn>* {
    position: relative;
    z-index: 3
  }

  .btn:active {
    transform: translateY(0) scale(.985);
    transition-duration: .12s
  }

  .btn .arrow {
    display: inline-block;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1)
  }

  .btn:hover .arrow {
    transform: translateX(5px)
  }

  .btn-primary {
    color: #0a0a0b;
    background: linear-gradient(180deg, #fff 0%, #eaeaea 50%, #dddde0 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 0 rgba(255, 255, 255, .75) inset, 0 -1px 0 rgba(0, 0, 0, .12) inset, 0 8px 18px -8px rgba(0, 0, 0, .55), 0 2px 4px -1px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
  }

  .btn-primary:hover {
    transform: translateY(var(--b-lift));
    background: linear-gradient(180deg, #fff 0%, #f2f2f4 50%, #e8e8ea 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 1px 0 rgba(255, 255, 255, .85) inset, 0 -1px 0 rgba(0, 0, 0, .08) inset, 0 20px 40px -14px rgba(0, 0, 0, .7), 0 8px 18px -6px rgba(0, 0, 0, .45), 0 0 70px rgba(255, 255, 255, .14)
  }

  .btn-ghost {
    color: var(--ink-mid);
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-mid);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 -1px 0 rgba(0, 0, 0, .2) inset
  }

  .btn-ghost::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 55%)
  }

  .btn-ghost>* {
    position: relative;
    z-index: 3
  }

  .btn-ghost:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, .05);
    border-color: var(--line-hi);
    transform: translateY(-3px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 14px 30px -14px rgba(0, 0, 0, .8)
  }

  /* ===== VIEWS SWITCHER ===== */
  .view-panel {
    display: none;
  }

  .view-panel.active {
    display: block;
  }

  /* ===== PAGE TRANSITION (overlay pill + page-in animation) ===== */
  .pt {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: rgba(6, 6, 9, .74);
    backdrop-filter: blur(16px) saturate(.85);
    -webkit-backdrop-filter: blur(16px) saturate(.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.16, 1, .3, 1);
  }

  .pt.show {
    opacity: 1;
    pointer-events: auto
  }

  .pt-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px 13px 20px;
    border-radius: 14px;
    background: linear-gradient(180deg, #14141a 0%, #0c0c10 100%);
    border: 1px solid var(--line-mid);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 80px -16px rgba(0, 0, 0, .95), 0 0 60px rgba(170, 172, 184, .08);
    transform: translateY(14px) scale(.94);
    opacity: 0;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .45s;
  }

  .pt.show .pt-pill {
    transform: none;
    opacity: 1;
    transition-delay: .05s
  }

  .pt-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: #fff
  }

  .pt-brand svg {
    width: 20px;
    height: 20px
  }

  .pt-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--ink-mid);
    text-transform: uppercase
  }

  .pt-bar {
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
    display: block
  }

  .pt-bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, #8d8f9a 45%, #fff 100%);
    transform: translateX(-100%)
  }

  .pt.show .pt-bar i {
    animation: ptSweep 1s cubic-bezier(.65, 0, .35, 1) infinite
  }

  @keyframes ptSweep {
    0% {
      transform: translateX(-100%)
    }

    100% {
      transform: translateX(100%)
    }
  }

  @keyframes pageIn {
    from {
      opacity: 0;
      transform: translateY(30px) scale(.985);
      filter: blur(10px)
    }

    to {
      opacity: 1;
      transform: none;
      filter: blur(0)
    }
  }

  @keyframes cardIn {
    from {
      opacity: 0;
      transform: translateY(34px) scale(.96)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  .view-panel.entering {
    animation: pageIn .85s cubic-bezier(.16, 1, .3, 1) backwards
  }

  .view-panel.entering .option-card {
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) backwards
  }

  .view-panel.entering .option-card:nth-child(1) {
    animation-delay: .12s
  }

  .view-panel.entering .option-card:nth-child(2) {
    animation-delay: .2s
  }

  .view-panel.entering .option-card:nth-child(3) {
    animation-delay: .28s
  }

  .view-panel.entering .option-card:nth-child(4) {
    animation-delay: .36s
  }

  .view-panel.entering .options-header {
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) backwards
  }

  /* ===== OPTIONS DASHBOARD VIEW (AXIOMFEED THEMED WITH PAGE 1 BACKGROUND SQUARES) ===== */
  .options-page {
    position: relative;
    padding: 56px 0 130px;
    min-height: calc(100vh - 68px);
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
  }

  .options-page-bg {
    display: none;
  }

  .options-page .wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .options-header {
    text-align: center;
    margin-bottom: 44px;
  }

  .options-header h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: .97;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: .3em;
  }

  .options-header h2 .h-solid {
    color: #fff;
    white-space: nowrap;
  }

  .options-header h2 .h-outline {
    color: #000;
    -webkit-text-fill-color: #000;
    background: none;
    filter: url(#outlineFx);
    white-space: nowrap;
  }

  .options-header h2:hover .h-outline {
    filter: url(#outlineFxHi);
  }

  .options-header h2 .h-dot {
    color: #fff;
  }

  .options-header p {
    color: var(--ink-mid);
    font-size: 16.5px;
    font-weight: 500;
  }

  .options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1360px;
    margin: 0 auto;
  }

  @property --ang {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  .option-card {
    --mx: 50%;
    --my: 0%;
    background:
      radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, .06) 0%, transparent 55%),
      linear-gradient(180deg, #14151b 0%, #0b0c10 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 20px 22px 22px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
  }

  .option-card>* {
    position: relative;
    z-index: 3;
  }

  /* draggable cards */
  .option-card {
    user-select: none;
    -webkit-user-select: none;
  }

  .option-badge {
    cursor: grab;
    -webkit-user-drag: element;
  }

  .option-badge:active {
    cursor: grabbing;
  }

  /* light that travels around the card border, shown while a badge is hovered */
  .option-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--ang), transparent 0deg, transparent 250deg, rgba(255, 255, 255, .95) 310deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s;
    animation: spinAng 3.2s linear infinite;
  }

  .option-card.lit::after {
    opacity: 1;
  }

  .option-num {
    position: absolute !important;
    right: 16px;
    bottom: 6px;
    z-index: 0 !important;
    font-family: "Space Grotesk", var(--sans);
    font-weight: 700;
    font-size: 92px;
    line-height: 1;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
    pointer-events: none;
    user-select: none;
  }

  .option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .option-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
  }

  .option-icon-box svg {
    width: 26px;
    height: 26px;
  }

  .option-icon-box:has(svg[fill="currentColor"]) svg {
    width: 22px;
    height: 22px;
  }

  .option-badge {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #aeb1bd;
    border-radius: 999px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    outline: none;
    transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
  }

  .option-badge {
    position: relative;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .3s, border-color .3s, color .3s, box-shadow .4s;
  }

  .option-badge::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    background: conic-gradient(from var(--ang), transparent 0deg, transparent 250deg, rgba(255, 255, 255, .95) 310deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s;
    animation: spinAng 2.6s linear infinite;
  }

  @keyframes spinAng {
    to {
      --ang: 360deg;
    }
  }

  .option-badge:hover,
  .option-badge:focus-visible {
    transform: scale(1.12) translateY(-2px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(255, 255, 255, .28), 0 0 18px rgba(255, 255, 255, .12);
  }

  .option-badge:hover::after,
  .option-badge:focus-visible::after {
    opacity: 1;
  }

  .option-badge:hover i,
  .option-badge:focus-visible i {
    animation-duration: .8s;
  }

    .option-badge svg.badge-logo {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .5));
    display: inline-block;
    vertical-align: middle;
  }

  .option-badge:hover svg.badge-logo,
  .option-badge:focus-visible svg.badge-logo {
    transform: scale(1.18);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .95));
  }

  /* Custom drag ghost displayed when dragging the bookmarklet */
  .bm-drag-ghost {
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: 999999;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    background: #0f1016;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 255, 255, 0.25);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff;
    pointer-events: none;
  }

  .bm-drag-ghost svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
  }

  .option-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, .8);
    animation: badgePulse 2s ease-in-out infinite;
  }

  @keyframes badgePulse {

    0%,
    100% {
      opacity: .35
    }

    50% {
      opacity: 1
    }
  }

  .option-card h3 {
    font-family: "Space Grotesk", var(--sans);
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.03em;
    margin-bottom: 8px;
    line-height: 1.1;
  }

  .option-card p {
    color: var(--ink-mid);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.003em;
  }

  .option-card p {
    margin-bottom: 0;
  }

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

    .option-card::after,
    .option-badge::after,
    .option-badge i {
      animation: none;
    }
  }

  .options-back-row {
    max-width: 1360px;
    margin: 0 auto 22px;
  }

  .back-link {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-lo);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .2s;
  }

  .back-link:hover {
    color: var(--ink);
  }

  /* ===== HERO ===== */
  .hero {
    position: relative;
    padding: 110px 0 115px;
    overflow: hidden;
    background: transparent;
  }

  .hero-bg {
    display: none
  }

  .hero-word {
    position: absolute;
    left: -1.5vw;
    top: 29%;
    transform: translateY(-50%);
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(180px, 22vw, 330px);
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    color: #000;
    filter: url(#outlineWm);
    pointer-events: none;
    user-select: none;
    z-index: 1;
  }

  .hero .wrap {
    position: relative;
    z-index: 2
  }

  .hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
  }

  .hero-inner>* {
    min-width: 0
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 5;
  }

  h1.hero-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(52px, 5.6vw, 82px);
    line-height: .97;
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin: 0 0 32px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-title .h-solid {
    color: #ffffff;
    white-space: nowrap
  }

  /* Outline drawn by an SVG filter: traces only the outer edge of the merged glyph shapes,
   so overlapping font contours (R, W, A, touching letters) never show inner lines. */
  .hero-title .h-outline {
    color: #000;
    filter: url(#outlineFx);
    white-space: nowrap;
  }

  .hero-title:hover .h-outline {
    filter: url(#outlineFxHi);
  }

  .hero-title .h-dot {
    color: #ffffff
  }

  .hero-lede {
    color: var(--ink-mid);
    font-size: 17px;
    max-width: 520px;
    margin: 0 0 36px;
    line-height: 1.68;
    letter-spacing: -.003em;
  }

  .hero-lede b {
    color: var(--ink);
    font-weight: 700
  }

  .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 196px;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 15px 22px;
    font-size: 14.5px;
    border-radius: 11px;
  }

  .card-stack {
    position: relative;
    transform-style: preserve-3d;
    perspective: 1500px;
    perspective-origin: 50% 40%;
    padding: 10px 0 20px;
    transform: translate(-64px, 20px);
  }

  @keyframes floatTweet {

    0%,
    100% {
      transform: translateY(0) rotateX(7deg) rotateY(14deg) rotateZ(-2deg)
    }

    50% {
      transform: translateY(-10px) rotateX(8deg) rotateY(12deg) rotateZ(-1deg)
    }
  }

  @keyframes floatTerm {

    0%,
    100% {
      transform: translateY(0) translateZ(60px) rotateX(7deg) rotateY(14deg) rotateZ(1.2deg)
    }

    50% {
      transform: translateY(-8px) translateZ(60px) rotateX(8deg) rotateY(12deg) rotateZ(.4deg)
    }
  }

  .tweet-card {
    position: relative;
    width: 90%;
    animation: floatTweet 5.5s ease-in-out infinite;
    transform: rotateX(7deg) rotateY(14deg) rotateZ(-2deg);
    transform-origin: center center;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .045), transparent 50%), linear-gradient(180deg, #141419 0%, #0d0d11 100%);
    border: 1px solid rgba(255, 255, 255, .11);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 1px 0 rgba(255, 255, 255, .08) inset, 1px 0 0 rgba(255, 255, 255, .05) inset, -14px 22px 34px -12px rgba(0, 0, 0, .7), 0 44px 80px -22px rgba(0, 0, 0, .95);
    border-radius: 18px;
    padding: 28px 30px 22px;
    overflow: hidden;
    transition: transform .65s cubic-bezier(.16, 1, .3, 1), box-shadow .65s cubic-bezier(.16, 1, .3, 1), border-color .5s;
  }

  .tweet-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(500px 260px at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .05), transparent 65%);
    opacity: 0;
    transition: opacity .45s;
    z-index: 0
  }

  .tweet-card:hover {
    border-color: var(--line-hi);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 1px 0 rgba(255, 255, 255, .12) inset, 0 52px 100px -28px rgba(0, 0, 0, .95)
  }

  .tweet-card:hover::before {
    opacity: 1
  }

  .tweet-card>* {
    position: relative;
    z-index: 1
  }

  .tc-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px
  }

  .tc-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1c1d24;
    border: 1px solid rgba(255, 255, 255, .1);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
    font-family: var(--sans);
    color: #fff;
    flex: 0 0 auto;
  }

  .tc-av {
    position: relative;
    overflow: hidden
  }

  .tc-av img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
  }

  .tc-name {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -.005em;
    color: #fff
  }

  .tc-name svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto
  }

  .tc-handle {
    color: var(--ink-lo);
    font-size: 13px;
    margin-top: 1px
  }

  .tc-more {
    margin-left: auto;
    color: var(--ink-lo);
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1;
    padding-bottom: 8px;
    user-select: none
  }

  .tc-body {
    font-size: 16px;
    line-height: 1.58;
    color: #e1e3ec;
    letter-spacing: -.003em;
    margin-bottom: 15px
  }

  .tc-pills {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 18px
  }

  .tc-pill {
    font-family: var(--mono);
    font-size: 12px;
    color: #a0a3b1;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 7px;
    padding: 4px 11px;
    letter-spacing: .01em;
  }

  .tc-metrics {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    color: #71767b;
    font-size: 13px;
    font-family: var(--mono)
  }

  .tc-met {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #71767b
  }

  .tc-met svg {
    width: 15px;
    height: 15px
  }

  .tc-retweet {
    color: #00ba7c
  }

  .tc-like {
    color: #f91880
  }

  .term-card {
    animation: floatTerm 6.2s ease-in-out infinite;
    animation-delay: .8s;
    transform: translateZ(60px) rotateX(7deg) rotateY(14deg) rotateZ(1.2deg);
    position: relative;
    margin-top: -44px;
    margin-left: 24%;
    width: 72%;
    z-index: 4;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .045), transparent 50%), linear-gradient(180deg, #141419 0%, #0d0d11 100%);
    border: 1px solid rgba(255, 255, 255, .11);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 1px 0 rgba(255, 255, 255, .08) inset, 1px 0 0 rgba(255, 255, 255, .05) inset, -14px 22px 34px -12px rgba(0, 0, 0, .7), 0 44px 80px -22px rgba(0, 0, 0, .95);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .65s cubic-bezier(.16, 1, .3, 1), border-color .5s;
  }

  .tweet-card:hover,
  .term-card:hover {
    animation-play-state: paused
  }

  .term-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px 200px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .05), transparent 65%);
    opacity: 0;
    transition: opacity .45s;
    z-index: 3
  }

  .term-card:hover {
    border-color: var(--line-hi);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 1px 0 rgba(255, 255, 255, .12) inset, 0 52px 100px -28px rgba(0, 0, 0, .95)
  }

  .term-card:hover::before {
    opacity: 1
  }

  .term-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid rgba(255, 255, 255, .06)
  }

  .term-dots {
    display: flex;
    gap: 6px
  }

  .term-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%
  }

  .term-dots i:nth-child(1) {
    background: #ff5f56
  }

  .term-dots i:nth-child(2) {
    background: #ffbd2e
  }

  .term-dots i:nth-child(3) {
    background: #27c93f
  }

  .term-ttl {
    margin-left: 5px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #7d8590
  }

  .term-chip {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    font-weight: 600;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #9aa0ab;
    border-radius: 6px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: chipPhase 6s ease-in-out infinite
  }

  .term-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-160%);
    animation: chipSweep 6s cubic-bezier(.4, 0, .2, 1) infinite
  }

  /* one grey, 3 phases: dim -> medium -> bright */
  @keyframes chipPhase {

    0%,
    22% {
      color: #9aa0ab;
      border-color: rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .05);
      box-shadow: 0 0 0 rgba(255, 255, 255, 0)
    }

    33%,
    55% {
      color: #c4c8d0;
      border-color: rgba(255, 255, 255, .28);
      background: rgba(255, 255, 255, .09);
      box-shadow: 0 0 8px rgba(255, 255, 255, .08)
    }

    66%,
    88% {
      color: #ffffff;
      border-color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .16);
      box-shadow: 0 0 14px rgba(255, 255, 255, .18)
    }

    100% {
      color: #9aa0ab;
      border-color: rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .05);
      box-shadow: 0 0 0 rgba(255, 255, 255, 0)
    }
  }

  @keyframes chipSweep {

    0%,
    58% {
      transform: translateX(-160%)
    }

    72% {
      transform: translateX(160%)
    }

    73%,
    100% {
      transform: translateX(-160%)
    }
  }

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

    .term-chip,
    .term-chip::after {
      animation: none
    }
  }

  .term-body {
    padding: 22px 24px;
    position: relative;
    z-index: 1
  }

  .tracker-ttl-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px
  }

  .tracker-ttl {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -.02em
  }

  .tracker-vbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto
  }

  .tracker-vbadge svg {
    width: 100%;
    height: 100%;
    display: block
  }

  .t-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 13px
  }

  .t-k {
    color: #6b7280;
    font-family: var(--sans);
    font-weight: 500
  }

  .t-v {
    color: #f4f4f6;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 13px
  }

  .ca-tag {
    font-family: var(--mono);
    font-size: 12.5px;
    color: #c9ccd6;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    padding: 3px 9px
  }

  .t-fill {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09)
  }

  .t-fill-ic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto
  }

  .t-fill-ic svg {
    width: 14px;
    height: 14px
  }

  .t-fill-main {
    flex: 1;
    min-width: 0;
    line-height: 1.3
  }

  .t-fill-ttl {
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em
  }

  .t-fill-ttl b {
    color: #ffffff;
    font-weight: 700
  }

  .t-fill-sub {
    font-family: var(--sans);
    font-size: 12px;
    color: #7d8590;
    margin-top: 1px
  }

  .t-fill-sub b {
    color: #c9ccd6;
    font-weight: 700
  }

  .t-fill-time {
    font-family: var(--mono);
    font-size: 11.5px;
    color: #7d8590;
    white-space: nowrap
  }

  /* ===== SECTION ===== */
  section.band {
    padding: 96px 0;
    position: relative
  }

  .sec-mark {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    text-transform: uppercase
  }

  .sec-mark::after {
    content: "";
    height: 1px;
    flex: 0 0 48px;
    background: var(--line-mid)
  }

  .sec-mark b {
    color: var(--blue-hi);
    font-weight: 600
  }

  h2.sec-h {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(30px, 4.2vw, 52px);
    letter-spacing: -.04em;
    line-height: 1.04;
    margin: 0 0 14px;
    max-width: 15ch;
    color: var(--ink)
  }

  h2.sec-h em {
    font-style: normal;
    color: var(--blue-hi)
  }

  .sec-lede {
    color: var(--ink-mid);
    font-size: 16.5px;
    max-width: 520px;
    margin: 0;
    line-height: 1.65;
    letter-spacing: -.003em
  }

  /* ===== FEATURE GRID ===== */
  .feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 52px
  }

  .feat {
    background: linear-gradient(180deg, #131318 0%, #0f0f14 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s cubic-bezier(.16, 1, .3, 1), border-color .5s, background .5s
  }

  .feat.wide {
    grid-column: span 2
  }

  .feat::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    right: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    transition: left .9s cubic-bezier(.16, 1, .3, 1), right .9s cubic-bezier(.16, 1, .3, 1);
    z-index: 4
  }

  .feat::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(500px 220px at var(--mx, 50%) var(--my, 0%), rgba(170, 172, 184, .1), transparent 60%);
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none;
    z-index: 3
  }

  .feat:hover {
    transform: translateY(-8px) scale(1.01);
    background: linear-gradient(180deg, #17171d 0%, #131318 100%);
    border-color: var(--line-hi);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 40px 80px -28px rgba(0, 0, 0, .9), 0 0 60px rgba(170, 172, 184, .07)
  }

  .feat:hover::before {
    left: 0;
    right: 0
  }

  .feat:hover::after {
    opacity: 1
  }

  .feat>* {
    position: relative;
    z-index: 5
  }

  .feat .f-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-hi);
    background: rgba(170, 172, 184, .1);
    border: 1px solid rgba(170, 172, 184, .25);
    border-radius: 6px;
    padding: 4px 10px;
    margin-bottom: 16px;
    transition: background .35s, border-color .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1)
  }

  .feat:hover .f-tag {
    background: rgba(170, 172, 184, .22);
    border-color: rgba(170, 172, 184, .45);
    transform: translateY(-2px)
  }

  .feat .stat-n {
    font-family: var(--sans);
    font-size: 38px;
    font-weight: 800;
    color: var(--ink);
    display: block;
    margin-bottom: 4px;
    letter-spacing: -.03em;
    line-height: 1;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), text-shadow .5s
  }

  .feat:hover .stat-n {
    transform: translateY(-2px);
    text-shadow: 0 0 28px rgba(255, 255, 255, .18)
  }

  .feat .stat-n em {
    font-style: normal;
    color: var(--ink-dim);
    font-size: 18px;
    margin-left: 1px;
    font-weight: 600
  }

  .feat .stat-lbl {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-lo);
    text-transform: uppercase;
    letter-spacing: .1em
  }

  .feat h3 {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 14px 0 8px;
    line-height: 1.3;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1)
  }

  .feat:hover h3 {
    transform: translateY(-1px)
  }

  .feat p {
    color: var(--ink-mid);
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: -.003em;
    transition: color .4s
  }

  .feat:hover p {
    color: #b0b2c0
  }

  @media(max-width:860px) {
    .feat-grid {
      grid-template-columns: repeat(2, 1fr)
    }

    .feat.wide {
      grid-column: span 1
    }
  }

  @media(max-width:540px) {
    .feat-grid {
      grid-template-columns: 1fr
    }
  }

  /* ===== TIMELINE ===== */
  .timeline {
    max-width: 760px;
    margin-top: 52px;
    position: relative;
    padding-left: 50px
  }

  .timeline::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 10px;
    bottom: 10px;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .1) 60%, transparent 100%)
  }

  .tstep {
    position: relative;
    padding-bottom: 40px;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1)
  }

  .tstep:hover {
    transform: translateX(8px)
  }

  .tstep:last-child {
    padding-bottom: 0
  }

  .tstep::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--ink-mid);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .03), 0 0 14px rgba(255, 255, 255, .12);
    transition: box-shadow .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.34, 1.56, .64, 1), background .55s, border-color .55s
  }

  .tstep:hover::before {
    box-shadow: 0 0 0 8px rgba(170, 172, 184, .12), 0 0 30px rgba(170, 172, 184, .65);
    transform: scale(1.3);
    background: var(--blue);
    border-color: var(--blue-hi)
  }

  .tstep .t-num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-lo);
    text-transform: uppercase;
    letter-spacing: .14em;
    transition: color .4s
  }

  .tstep:hover .t-num {
    color: var(--blue-hi)
  }

  .tstep h3 {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 7px 0 9px;
    letter-spacing: -.02em;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1)
  }

  .tstep:hover h3 {
    transform: translateX(2px)
  }

  .tstep p {
    color: var(--ink-mid);
    font-size: 15px;
    line-height: 1.7;
    max-width: 560px;
    letter-spacing: -.003em;
    transition: color .4s
  }

  .tstep:hover p {
    color: #c0c0c8
  }

  .mono-chip {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-mid);
    background: var(--chip);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 5px 14px;
    display: inline-block;
    margin-top: 12px;
    transition: background .4s, border-color .4s, color .4s, transform .45s cubic-bezier(.34, 1.56, .64, 1)
  }

  .tstep:hover .mono-chip {
    background: #1a1a26;
    border-color: var(--line-mid);
    color: var(--ink);
    transform: translateY(-2px)
  }

  /* ===== FAQ ===== */
  .faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 60px;
    align-items: start
  }

  details {
    background: linear-gradient(180deg, #131318 0%, #0f0f14 100%);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
    transition: border-color .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1), background .4s
  }

  details::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--blue-hi), rgba(170, 172, 184, .25));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    z-index: 2
  }

  details:hover {
    border-color: var(--line-mid);
    background: linear-gradient(180deg, #17171d 0%, #131318 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 20px 44px -18px rgba(0, 0, 0, .75);
    transform: translateY(-3px)
  }

  details:hover::before,
  details[open]::before {
    transform: scaleY(1)
  }

  details[open] {
    border-color: var(--line-hi);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 52px -18px rgba(0, 0, 0, .8)
  }

  summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 24px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    letter-spacing: -.01em;
    transition: padding-left .5s cubic-bezier(.16, 1, .3, 1)
  }

  details:hover summary {
    padding-left: 28px
  }

  summary::-webkit-details-marker {
    display: none
  }

  summary .plus {
    color: var(--ink-lo);
    font-size: 20px;
    font-weight: 300;
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), color .3s, text-shadow .4s;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center
  }

  details[open] summary .plus {
    transform: rotate(45deg);
    color: var(--ink)
  }

  details:hover summary .plus {
    color: var(--ink);
    transform: scale(1.3);
    text-shadow: 0 0 16px rgba(255, 255, 255, .5)
  }

  details[open]:hover summary .plus {
    transform: rotate(45deg) scale(1.3)
  }

  .faq-a {
    padding: 0 24px 20px;
    color: var(--ink-mid);
    font-size: 14.5px;
    line-height: 1.7;
    letter-spacing: -.003em
  }

  /* ===== FOOTER ===== */
  footer {
    border-top: 1px solid var(--line);
    padding: 44px 0 36px;
    background: var(--bg)
  }

  .foot-in {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap
  }

  .foot-links {
    margin-left: auto;
    display: flex;
    gap: 28px;
    flex-wrap: wrap
  }

  .foot-links a {
    color: var(--ink-lo);
    font-size: 13.5px;
    transition: color .3s
  }

  .foot-links a:hover {
    color: var(--ink)
  }

  .disclaimer {
    color: var(--ink-dim);
    font-size: 11px;
    margin-top: 24px;
    max-width: 740px;
    line-height: 1.65;
    font-family: var(--mono)
  }

  /* ===== REVEAL ===== */
  .reveal {
    opacity: 0;
    transform: translateY(64px);
    transition: opacity .9s cubic-bezier(.22, .8, .2, 1), transform 1s cubic-bezier(.22, .8, .2, 1)
  }

  .reveal.slide-l {
    transform: translateX(-72px)
  }

  .reveal.slide-r {
    transform: translateX(72px)
  }

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

  @media(max-width:760px) {

    .reveal.slide-l,
    .reveal.slide-r {
      transform: translateY(48px)
    }
  }

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

    .reveal,
    .reveal.slide-l,
    .reveal.slide-r {
      transform: none;
      transition: none;
      opacity: 1
    }
  }

  @media(max-width:1024px) {
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 56px
    }

    .card-stack {
      max-width: 580px;
      margin: 0 auto;
      transform: none
    }

    .options-grid {
      grid-template-columns: repeat(2, 1fr)
    }

    .faq-layout {
      grid-template-columns: 1fr;
      gap: 24px
    }

    nav.links a.lnk {
      display: none
    }
  }

  @media(max-width:640px) {
    .options-grid {
      grid-template-columns: 1fr
    }
  }

  @media(max-width:560px) {
    .wrap {
      padding: 0 18px
    }

    .hero-word {
      display: none
    }

    .tweet-card {
      width: 100%;
      padding: 20px 18px
    }

    .term-card {
      margin-left: 8%;
      width: 92%;
      margin-top: -28px
    }

    .tc-metrics {
      gap: 14px;
      font-size: 11.5px
    }
  }

  /* ===== WORKS WITH YOUR FAVORITE DEX ===== */
  .dex-section {
    max-width: 1360px;
    margin: 52px auto 0;
  }

  .dex-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: .3em;
    color: #fff;
    text-align: center;
  }

  .dex-title .h-solid {
    color: #fff;
    white-space: nowrap;
  }

  .dex-title .h-outline {
    color: #000;
    -webkit-text-fill-color: #000;
    filter: url(#outlineFx);
    white-space: nowrap;
  }

  .dex-title:hover .h-outline {
    filter: url(#outlineFxHi);
  }

  .dex-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 520px;
    margin: 0 auto;
  }

  .dex-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: radial-gradient(140% 120% at 0% 0%, rgba(255, 255, 255, .05) 0%, transparent 55%), linear-gradient(180deg, #14151b 0%, #0b0c10 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
  }

  .dex-l {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .dex-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #c4c6d0;
    background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  }

  .dex-logo svg {
    width: 14px;
    height: 14px;
  }

  .dex-name {
    font-family: "Space Grotesk", var(--sans);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
  }

  .dex-blur {
    filter: blur(3.5px);
    opacity: .7;
    user-select: none;
  }

  .dex-soon .dex-logo {
    filter: blur(1.5px);
    opacity: .6;
  }

  .dex-tag {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7d8190;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .dex-tag.dex-on {
    color: #e4e6ee;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
  }

  .dex-tag i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, .8);
    animation: badgePulse 2s ease-in-out infinite;
  }

  @media (max-width: 640px) {
    .dex-row {
      grid-template-columns: 1fr;
      max-width: none;
    }

    .dex-section {
      margin-top: 48px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dex-tag i {
      animation: none;
    }
  }