/* ==========================================================
   Purchase Planner AI — Landing page styles
   Sections: Base · Header · Hero Section · Problem · Solution
   (What is / Why agentic AI) · How it works · Order plan ·
   Features · Stock health · Proforma check · Value forecast ·
   Rules & control · Results & ROI · Before/after · FAQ ·
   Contact Form (POC + popup) · Footer · Animations & Effects.
   Responsive rules sit with each section in @media blocks.
   ========================================================== */
   :root {
      --bg: #f6f5f2;
      --bg2: #efede8;
      --card: #fff;
      --ink: #141414;
      --ink2: #3a3936;
      --mut: #74716b;
      --hair: #e7e4de;
      --hair2: #f0eee9;
      --red: #e3262b;
      --red-d: #b51c21;
      --red-w: #fde9e9;
      --pink: #f3a3a6;
      --dred: #9c1b33;
      --green: #2c9a5f;
      --amber: #e6a01e;
      --brown: #a3744f;
      --grey: #5a5956;
      --pale: #d4d1cb;
      --sans: "Geist", system-ui, sans-serif;
      --mono: "Geist Mono", ui-monospace, monospace;
      --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
      --r: 30px;
  }
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
  }
  body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--ink);
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
  }
  ::selection {
      background: var(--red);
      color: #fff;
  }
  a {
      color: var(--ink);
      text-decoration: none;
  }
  a:hover {
      color: var(--red);
  }
  img,
  svg {
      display: block;
      max-width: 100%;
  }
  button {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      cursor: pointer;
  }
  :focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 3px;
      border-radius: 8px;
  }
  .wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
  }
  @media (max-width: 720px) {
      .wrap {
          padding: 0 20px;
      }
  }
  .skip {
      position: absolute;
      left: -999px;
  }
  .skip:focus {
      left: 12px;
      top: 12px;
      z-index: 999;
      background: #fff;
      padding: 8px 12px;
      border-radius: 8px;
  }
  .mono {
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
  }
  /* type */
  .eb {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--hair);
      background: var(--card);
      border-radius: 999px;
      padding: 7px 15px 7px 10px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink2);
      margin-bottom: 24px;
  }
  .eb::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 4px var(--red-w);
  }
  .h2 {
      font-weight: 500;
      font-size: clamp(34px, 4.4vw, 60px);
      line-height: 1.04;
      letter-spacing: -0.04em;
      text-wrap: balance;
  }
  .h2 em,
  .h1 em {
      font-style: normal;
      color: var(--red);
  }
  .lede {
      font-size: clamp(16.5px, 1.35vw, 19px);
      color: var(--mut);
      max-width: 620px;
      text-wrap: pretty;
  }
  .sh {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 24px 70px;
      align-items: end;
      margin-bottom: 60px;
  }
  .sh .eb {
      grid-column: 1/-1;
      justify-self: start;
      margin: 0;
  }
  .sh .lede {
      padding-bottom: 8px;
  }
  .sh.c {
      grid-template-columns: 1fr;
      text-align: center;
      justify-items: center;
  }
  .sh.c .eb {
      justify-self: center;
  }
  @media (max-width: 900px) {
      .sh {
          grid-template-columns: 1fr;
          margin-bottom: 40px;
      }
  }
  section {
      padding: 130px 0;
      position: relative;
  }
  @media (max-width: 720px) {
      section {
          padding: 84px 0;
      }
  }
  .card {
      background: var(--card);
      border-radius: var(--r);
      border: 1px solid var(--hair2);
      box-shadow:
          0 1px 0 #fff inset,
          0 24px 50px -40px rgba(30, 25, 20, 0.25);
  }
  /* buttons */
  .btn {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 14px 24px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 500;
      transition:
          transform 0.25s var(--ease),
          background 0.2s,
          box-shadow 0.25s;
      white-space: nowrap;
  }
  .btn:has(.ar) {
      padding: 6px 6px 6px 24px;
  }
  .btn .ar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      transition:
          transform 0.3s var(--ease),
          background 0.2s;
  }
  .btn:hover {
      transform: translateY(-2px);
  }
  .btn:hover .ar {
      transform: translateX(3px);
  }
  .btn-k {
      background: var(--ink);
      color: #fff;
  }
  .btn-k .ar {
      background: #fff;
      color: var(--ink);
  }
  .btn-k:hover {
      color: #fff;
      box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
  }
  .btn-k:hover .ar {
      background: var(--red);
      color: #fff;
  }
  .btn-w {
      background: var(--card);
      color: var(--ink);
      border: 1px solid var(--hair);
  }
  .btn-w .ar {
      background: var(--bg2);
  }
  .btn-w:hover {
      color: var(--ink);
      border-color: var(--ink);
  }
  .btn-r {
    background: var(--red) !important;
    color: #fff;
    border-radius: 50px !important;
    width: 100%;
    text-transform: capitalize !important;
    padding: 12px 12px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}
  .btn-r .ar {
      background: #fff;
      color: var(--red);
  }
  .btn-r:hover {
      color: #fff;
      background: var(--red-d);
  }
  /* ===== Header ===== */
  .nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 100;
      transition:
          background 0.3s,
          border-color 0.3s;
      border-bottom: 1px solid transparent;
  }
  .nav.s {
      background: rgba(246, 245, 242, 0.82);
      backdrop-filter: blur(18px) saturate(1.3);
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
      border-color: var(--hair);
  }
  .nav .wrap {
      height: 80px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 20px;
  }
  .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 16px;
      letter-spacing: -0.02em;
      color: var(--ink);
  }
  .logo i {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: var(--ink);
      position: relative;
      overflow: hidden;
  }
  .logo i::before {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      bottom: 7px;
      height: 4px;
      border-radius: 2px;
      background: #fff;
      box-shadow:
          0 -6px 0 rgba(255, 255, 255, 0.55),
          0 -12px 0 rgba(255, 255, 255, 0.3);
  }
  .logo i::after {
      content: "";
      position: absolute;
      right: 6px;
      top: 6px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
  }
  .logo span {
      color: var(--red);
  }
  .nav ul {
      display: flex;
      list-style: none;
      gap: 2px;
      background: var(--bg2);
      padding: 5px;
      border-radius: 999px;
  }
  .nav ul a {
      display: block;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 14px;
      color: var(--ink2);
      transition: background 0.2s;
  }
  .nav ul a:hover,
  .nav ul a.on {
      background: #fff;
      color: var(--ink);
  }
  .nav-r {
      justify-self: end;
      display: flex;
      gap: 8px;
      align-items: center;
  }
  .nav .btn:has(.ar) {
      padding: 5px 5px 5px 18px;
      font-size: 14px;
  }
  .nav .btn .ar {
      width: 34px;
      height: 34px;
  }
  .mbtn {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--hair);
      background: #fff;
      position: relative;
  }
  .mbtn i {
      position: absolute;
      left: 14px;
      right: 14px;
      height: 1.5px;
      background: var(--ink);
      transition: transform 0.3s var(--ease);
  }
  .mbtn i:first-child {
      top: 18px;
  }
  .mbtn i:last-child {
      top: 25px;
  }
  .mbtn[aria-expanded="true"] i:first-child {
      transform: translateY(3.5px) rotate(45deg);
  }
  .mbtn[aria-expanded="true"] i:last-child {
      transform: translateY(-3.5px) rotate(-45deg);
  }
  .mmenu {
      display: none;
  }
  @media (max-width: 1060px) {
      .nav .wrap {
          grid-template-columns: 1fr auto;
      }
      .nav nav[aria-label="Primary"] {
          display: none;
      }
      .mbtn {
          display: block;
      }
      .mmenu {
          display: grid;
          position: absolute;
          top: 76px;
          left: 12px;
          right: 12px;
          background: #fff;
          border: 1px solid var(--hair);
          border-radius: 24px;
          padding: 10px;
          box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.3);
          opacity: 0;
          transform: translateY(-8px);
          pointer-events: none;
          transition: all 0.3s var(--ease);
      }
      .mmenu.on {
          opacity: 1;
          transform: none;
          pointer-events: auto;
      }
      .mmenu a {
          padding: 14px 16px;
          border-radius: 14px;
          font-size: 16px;
      }
      .mmenu a:hover {
          background: var(--bg);
      }
  }
  @media (max-width: 520px) {
      .nav .btn {
          display: none;
      }
  }
  /* ===== Hero Section ===== */
  .hero {
      padding: 150px 0 70px;
      overflow: hidden;
  }
  .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(40% 40% at 82% 18%, rgba(227, 38, 43, 0.16), transparent 70%),
          radial-gradient(35% 35% at 10% 70%, rgba(243, 163, 166, 0.28), transparent 70%);
      pointer-events: none;
  }
  .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(var(--hair) 1px, transparent 1px),
          linear-gradient(90deg, var(--hair) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000, transparent 75%);
      mask-image: radial-gradient(70% 55% at 50% 30%, #000, transparent 75%);
      opacity: 0.55;
      pointer-events: none;
  }
  .hero .wrap {
      position: relative;
      z-index: 1;
  }
  .ht {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
      gap: 30px 60px;
      align-items: end;
  }
  .pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 16px 6px 6px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--hair);
      font-size: 13.5px;
      color: var(--ink2);
      grid-column: 1/-1;
      justify-self: start;
  }
  .pill b {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.06em;
      background: var(--ink);
      color: #fff;
      padding: 5px 10px;
      border-radius: 999px;
  }
  .h1 {
      font-weight: 500;
      font-size: clamp(48px, 7.4vw, 108px);
      line-height: 0.96;
      letter-spacing: -0.05em;
      text-wrap: balance;
  }
  .hs {
      display: flex;
      flex-direction: column;
      gap: 28px;
      padding-bottom: 12px;
  }
  .hs p {
      font-size: clamp(16.5px, 1.35vw, 19px);
      color: var(--ink2);
      text-wrap: pretty;
  }
  .hs .cta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }
  @media (max-width: 960px) {
      .ht {
          grid-template-columns: 1fr;
      }
  }
  /* hero dashboard */
  .dash {
      position: relative;
      margin-top: 70px;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 18px;
  }
  .dash > .card {
      padding: 28px;
  }
  .d-head {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
  }
  .d-ic {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--bg2);
      display: grid;
      place-items: center;
      flex-shrink: 0;
  }
  .d-ic svg {
      width: 20px;
      height: 20px;
  }
  .d-go {
      margin-left: auto;
      color: var(--mut);
  }
  .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      border-radius: 999px;
      background: var(--bg2);
      font-size: 13px;
      color: var(--ink2);
      white-space: nowrap;
  }
  .tag.r {
      background: var(--red-w);
      color: var(--red-d);
  }
  .tag.r::before,
  .tag.dr::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
  }
  .tag.dr {
      background: var(--red-w);
      color: var(--dred);
  }
  .tag.dr::before {
      background: var(--dred);
  }
  .d1 {
      grid-row: span 2;
      display: flex;
      flex-direction: column;
  }
  .d1 .d-head .tag {
      margin-left: auto;
  }
  .d1-b {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 20px;
      align-items: end;
      margin: 34px 0 22px;
  }
  .big {
      font-weight: 500;
      font-size: clamp(72px, 8vw, 120px);
      line-height: 0.85;
      letter-spacing: -0.06em;
  }
  .big small {
      font-size: 0.3em;
      letter-spacing: -0.02em;
      color: var(--mut);
      margin-left: 8px;
  }
  .d1 .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
  }
  .bars {
      display: flex;
      gap: 10px;
      align-items: flex-end;
      height: 150px;
  }
  .bars > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
      justify-content: flex-end;
  }
  .bars b {
      font-weight: 500;
      font-size: 13px;
  }
  .bars i {
      width: 100%;
      border-radius: 12px;
      height: 0;
      transition: height 1.2s var(--ease);
  }
  .bars span {
      font-size: 11px;
      color: var(--mut);
      letter-spacing: 0.05em;
  }
  .d1 .acts {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: auto;
  }
  .d1 .acts span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 20px;
      border-radius: 999px;
      background: var(--bg2);
      font-size: 14.5px;
      font-weight: 500;
  }
  .d1 .acts span:first-child {
      background: var(--ink);
      color: #fff;
  }
  .d-n {
      font-weight: 500;
      font-size: 64px;
      letter-spacing: -0.05em;
      line-height: 1;
      margin: 24px 0 16px;
  }
  .d-red {
      background: radial-gradient(70% 90% at 90% 0%, #f06569, transparent 60%), var(--red);
      color: #fff;
      border: 0;
      box-shadow: 0 30px 60px -30px rgba(227, 38, 43, 0.6);
  }
  .d-red h3 {
      font-size: 18px;
      font-weight: 500;
  }
  .d-red p {
      font-size: 13.5px;
      opacity: 0.85;
  }
  .d-red .d-n {
      font-size: 52px;
      margin: 16px 0 18px;
  }
  .d-split {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
  }
  .d-split div {
      border-left: 1px solid rgba(255, 255, 255, 0.4);
      padding-left: 10px;
      font-size: 11.5px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      opacity: 0.9;
  }
  .d-split b {
      display: block;
      font-size: 16px;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 500;
  }
  .agent {
      position: absolute;
      left: 50%;
      top: -26px;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 18px 8px 8px;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
      font-size: 14px;
      white-space: nowrap;
  }
  .agent .sp {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--red);
      display: grid;
      place-items: center;
  }
  .agent .sp::before {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      animation: spin 1s linear infinite;
  }
  .agent.done .sp {
      background: var(--green);
  }
  .agent.done .sp::before {
      content: "✓";
      border: 0;
      animation: none;
      font-size: 13px;
      width: auto;
      height: auto;
  }
  .agent em {
      font-style: normal;
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
  }
  @keyframes spin {
      to {
          transform: rotate(360deg);
      }
  }
  @media (max-width: 1080px) {
      .dash {
          grid-template-columns: 1fr 1fr;
      }
      .d1 {
          grid-column: 1/-1;
          grid-row: auto;
      }
  }
  @media (max-width: 620px) {
      .dash {
          grid-template-columns: 1fr;
      }
      .d1-b {
          grid-template-columns: 1fr;
      }
      .bars {
          height: 110px;
      }
      .agent {
          font-size: 12.5px;
      }
      .agent em {
          display: none;
      }
  }
  .feeds {
      margin-top: 70px;
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: center;
  }
  .feeds p {
      font-size: 12.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--mut);
      font-weight: 500;
  }
  .feeds div {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
  }
  .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--hair);
      font-size: 13.5px;
      color: var(--ink2);
  }
  .chip svg {
      width: 16px;
      height: 16px;
      color: var(--red);
  }
  /* ===== Problem ===== */
  .pg {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
  }
  @media (max-width: 1080px) {
      .pg {
          grid-template-columns: 1fr 1fr;
      }
  }
  @media (max-width: 560px) {
      .pg {
          grid-template-columns: 1fr;
      }
  }
  .pc {
      padding: 14px 14px 26px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition:
          transform 0.45s var(--ease),
          box-shadow 0.45s var(--ease);
  }
  .pc:hover {
      transform: translateY(-5px);
      box-shadow: 0 40px 70px -46px rgba(30, 25, 20, 0.4);
  }
  .pv {
      height: 170px;
      border-radius: 22px;
      background: var(--bg);
      display: grid;
      place-items: center;
      padding: 18px;
      margin-bottom: 14px;
      overflow: hidden;
      position: relative;
  }
  .pc .n {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--red);
      letter-spacing: 0.06em;
      padding: 0 8px;
  }
  .pc h3 {
      font-size: 21px;
      font-weight: 500;
      letter-spacing: -0.025em;
      line-height: 1.15;
      padding: 0 8px;
  }
  .pc p {
      font-size: 14px;
      color: var(--mut);
      padding: 0 8px;
  }
  .gauge {
      width: 100%;
      display: grid;
      gap: 10px;
  }
  .gauge .t {
      height: 16px;
      border-radius: 8px;
      background: var(--hair);
      position: relative;
      overflow: visible;
  }
  .gauge .t i {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      border-radius: 8px;
      background: linear-gradient(90deg, var(--ink) 0 75%, var(--red) 75%);
  }
  .gauge .t b {
      position: absolute;
      left: 75%;
      top: -8px;
      bottom: -8px;
      width: 2px;
      background: var(--ink);
  }
  .gauge div {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--mut);
  }
  .gauge div strong {
      color: var(--red);
      font-weight: 600;
  }
  .sku0 {
      background: #fff;
      border: 1px solid var(--hair);
      border-radius: 16px;
      padding: 14px 16px;
      width: 100%;
      display: grid;
      gap: 8px;
      font-size: 13px;
  }
  .sku0 div {
      display: flex;
      justify-content: space-between;
  }
  .sku0 .z {
      font-family: var(--mono);
      font-size: 22px;
      color: var(--red);
  }
  .dup {
      display: grid;
      gap: 8px;
      width: 100%;
  }
  .dup div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border: 1px solid var(--hair);
      border-radius: 12px;
      padding: 9px 12px;
      font-size: 12.5px;
  }
  .dup div:last-child {
      border-color: var(--red);
      background: var(--red-w);
      color: var(--red-d);
  }
  .dup b {
      font-family: var(--mono);
      font-weight: 500;
  }
  .codes {
      display: grid;
      gap: 8px;
      width: 100%;
      font-family: var(--mono);
      font-size: 12.5px;
  }
  .codes span {
      background: #fff;
      border: 1px solid var(--hair);
      border-radius: 10px;
      padding: 9px 12px;
      display: flex;
      justify-content: space-between;
  }
  .codes em {
      font-style: normal;
      color: var(--red);
      font-family: var(--sans);
      font-weight: 600;
  }
  .stat {
      margin-top: 22px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border-radius: var(--r);
      background: var(--ink);
      color: #fff;
      overflow: hidden;
  }
  .stat > div {
      padding: 34px 34px 30px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }
  .stat > div + div {
      border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  .stat b {
      font-weight: 500;
      font-size: clamp(40px, 4vw, 58px);
      letter-spacing: -0.05em;
      line-height: 1;
  }
  .stat b em {
      font-style: normal;
      color: var(--pink);
  }
  .stat span {
      font-size: 14.5px;
      color: rgba(255, 255, 255, 0.75);
  }
  .stat small {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      margin-top: auto;
      padding-top: 10px;
  }
  @media (max-width: 860px) {
      .stat {
          grid-template-columns: 1fr;
      }
      .stat > div + div {
          border-left: 0;
          border-top: 1px solid rgba(255, 255, 255, 0.12);
      }
  }
  /* what */
  .wi {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.1fr) 80px minmax(0, 1fr);
      align-items: stretch;
  }
  .wcol {
      display: grid;
      gap: 12px;
  }
  .wc {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 22px;
  }
  .wc .ic {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: var(--bg);
      display: grid;
      place-items: center;
      flex-shrink: 0;
  }
  .wc .ic svg {
      width: 21px;
      height: 21px;
  }
  .wc b {
      display: block;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
  }
  .wc small {
      display: block;
      font-size: 12.5px;
      color: var(--mut);
  }
  .wc.o .ic {
      background: var(--red-w);
      color: var(--red);
  }
  .wl {
      width: 100%;
      height: 100%;
      overflow: visible;
  }
  .wl path {
      fill: none;
      stroke: var(--pale);
      stroke-width: 1.5;
      stroke-dasharray: 3 5;
      vector-effect: non-scaling-stroke;
  }
  .wl circle {
      fill: var(--red);
  }
  .hub {
      position: relative;
      border-radius: 34px;
      background: var(--ink);
      color: #fff;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 18px;
      overflow: hidden;
      box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55);
  }
  .hub::before {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(227, 38, 43, 0.55), transparent 70%);
  }
  .hub > * {
      position: relative;
  }
  .hub .logo {
      color: #fff;
  }
  .hub .logo i {
      background: #fff;
  }
  .hub .logo i::before {
      background: var(--ink);
      box-shadow:
          0 -6px 0 rgba(20, 20, 20, 0.5),
          0 -12px 0 rgba(20, 20, 20, 0.25);
  }
  .hst {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 12px;
      align-items: start;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .hst .n {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--pink);
  }
  .hst b {
      display: block;
      font-weight: 500;
      font-size: 14.5px;
  }
  .hst small {
      display: block;
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.6);
  }
  @media (max-width: 1080px) {
      .wi {
          grid-template-columns: 1fr;
          max-width: 560px;
          margin: 0 auto;
          gap: 22px;
      }
      .wl {
          display: none;
      }
      .wcol.in {
          grid-template-columns: 1fr 1fr;
      }
  }
  @media (max-width: 520px) {
      .wcol.in {
          grid-template-columns: 1fr;
      }
  }
  /* anatomy */
  .an2 {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
  }
  .tbl {
      padding: 10px;
      overflow-x: auto;
  }
  .tbl table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      min-width: 1180px;
      font-size: 14px;
      margin: 0;
      border: 0;
  }
  .tbl th {
      font-weight: 500;
      font-size: 12.5px;
      color: var(--mut);
      text-align: right;
      padding: 16px 14px;
      background: var(--bg);
      white-space: nowrap;
      border: 0 !important;
  }
  .tbl th:first-child {
      text-align: left;
      border-radius: 18px 0 0 18px;
  }
  .tbl th:last-child {
      border-radius: 0 18px 18px 0;
      text-align: left;
  }
  .tbl td {
      padding: 18px 14px;
      text-align: right;
      border: 0 !important;
      border-bottom: 1px solid var(--hair2) !important;
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
      vertical-align: top;
  }
  .tbl tr:last-child td {
      border-bottom: 0;
  }
  .tbl td:first-child {
      text-align: left;
      font-family: var(--sans);
  }
  .tbl td:first-child b {
      font-family: var(--mono);
      font-weight: 500;
      display: block;
  }
  .tbl td:first-child small {
      color: var(--mut);
      font-size: 12px;
  }
  .tbl td.rec {
      font-weight: 600;
      font-size: 17px;
  }
  .tbl td.dt {
      text-align: left;
      font-family: var(--sans);
  }
  .tbl td.rs {
      text-align: left;
      font-family: var(--sans);
      color: var(--ink2);
      max-width: 300px;
      font-size: 13.5px;
      line-height: 1.45;
  }
  .on-now {
      display: inline-block;
      padding: 5px 11px;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      font-size: 12.5px;
      font-weight: 500;
  }
  .on-dt {
      display: inline-block;
      padding: 5px 11px;
      border-radius: 999px;
      background: var(--bg2);
      font-size: 12.5px;
      font-weight: 500;
  }
  .tbl td.dt small {
      display: block;
      color: var(--mut);
      font-size: 11.5px;
      margin-top: 6px;
  }
  .tl {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 18px;
  }
  .chart {
      padding: 30px 30px 22px;
  }
  .chart h3,
  .expl h3 {
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.015em;
  }
  .chart .leg {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 12.5px;
      color: var(--mut);
      margin: 8px 0 18px;
  }
  .chart .leg span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
  }
  .chart .leg i {
      width: 16px;
      height: 3px;
      border-radius: 2px;
      background: var(--ink);
  }
  .chart svg {
      width: 100%;
      height: auto;
      overflow: visible;
  }
  .chart .ln {
      fill: none;
      stroke: var(--ink);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      transition: stroke-dashoffset 2.2s var(--ease);
  }
  .chart.in .ln {
      stroke-dashoffset: 0;
  }
  .expl {
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }
  .eq {
      display: grid;
      gap: 8px;
  }
  .eq div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-radius: 14px;
      background: var(--bg);
      font-size: 14.5px;
  }
  .eq b {
      font-family: var(--mono);
      font-weight: 500;
  }
  .eq .tot {
      background: var(--ink);
      color: #fff;
  }
  .eq .res {
      background: var(--red);
      color: #fff;
  }
  .expl p {
      font-size: 14.5px;
      color: var(--ink2);
  }
  @media (max-width: 960px) {
      .tl {
          grid-template-columns: 1fr;
      }
  }
  /* steps */
  .flow {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      counter-reset: s;
  }
  @media (max-width: 1000px) {
      .flow {
          grid-template-columns: 1fr 1fr;
      }
  }
  @media (max-width: 560px) {
      .flow {
          grid-template-columns: 1fr;
      }
  }
  .fs {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 230px;
      position: relative;
  }
  .fs .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .fs .n {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--mut);
  }
  .who {
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 5px 11px;
      border-radius: 999px;
      background: var(--bg2);
      color: var(--ink2);
  }
  .fs h3 {
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-top: 2rem;
  }
  .fs p {
      font-size: 14px;
      color: var(--mut);
  }
  .fs.ag, .fs.active {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
  }
  .fs.ag .who {
      background: var(--red);
      color: #fff;
  }
  .fs.ag p {
      color: rgba(255, 255, 255, 0.65);
  }
  .fs.ag .n {
      color: rgba(255, 255, 255, 0.5);
  }
  .rule {
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 26px;
      border-radius: 24px;
      background: var(--red-w);
      color: var(--red-d);
      font-size: 15.5px;
      font-weight: 500;
  }
  .rule svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
  }
  /* bento */
  .bento {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 16px;
  }
  .bt {
      grid-column: span 2;
      padding: 14px 14px 26px;
      display: flex;
      flex-direction: column;
      gap: 6px;
  }
  .bt.w {
      grid-column: span 3;
  }
  .bt .bv {
      height: 180px;
      border-radius: 22px;
      background: var(--bg);
      display: grid;
      place-items: center;
      padding: 18px;
      margin-bottom: 14px;
      overflow: hidden;
  }
  .bt .q {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--red);
      letter-spacing: 0.05em;
      padding: 0 8px;
  }
  .bt h3 {
      font-size: 21px;
      font-weight: 500;
      letter-spacing: -0.025em;
      line-height: 1.15;
      padding: 0 8px;
  }
  .bt p {
      font-size: 14px;
      color: var(--mut);
      padding: 0 8px;
      margin-bottom: 0;
  }
  @media (max-width: 1000px) {
      .bento {
          grid-template-columns: 1fr 1fr;
      }
      .bt,
      .bt.w {
          grid-column: span 1;
      }
  }
  @media (max-width: 600px) {
      .bento {
          grid-template-columns: 1fr;
      }
  }
  .lbls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
  }
  .lb {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--hair);
      font-size: 12.5px;
  }
  .lb::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c);
  }
  .lvl {
      width: 100%;
      display: grid;
      gap: 6px;
  }
  .lvl div {
      display: grid;
      grid-template-columns: 70px 1fr 40px;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--mut);
  }
  .lvl i {
      height: 12px;
      border-radius: 6px;
      background: var(--c);
  }
  .lvl b {
      font-family: var(--mono);
      font-weight: 500;
      color: var(--ink);
      text-align: right;
  }
  .risk {
      width: 100%;
      display: grid;
      gap: 8px;
  }
  .risk div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border: 1px solid var(--hair);
      border-radius: 12px;
      padding: 9px 12px;
      font-size: 12.5px;
  }
  .risk em {
      font-style: normal;
      font-size: 11.5px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 999px;
  }
  .risk .h {
      background: var(--red-w);
      color: var(--red-d);
  }
  .risk .m {
      background: #fdf1dc;
      color: #9a6408;
  }
  .risk .l {
      background: var(--bg2);
      color: var(--mut);
  }
  .ans {
      background: #fff;
      border: 1px solid var(--hair);
      border-radius: 16px;
      padding: 16px;
      font-size: 14px;
      line-height: 1.45;
      width: 100%;
  }
  .ans b {
      color: var(--red);
  }
  .ins {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      align-items: center;
      font-size: 12.5px;
  }
  .ins span {
      padding: 6px 11px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--hair);
  }
  .ins strong {
      padding: 7px 13px;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-weight: 500;
  }
  .fc {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      gap: 5px;
  }
  .fc i {
      flex: 1;
      border-radius: 6px 6px 2px 2px;
      background: var(--pale);
  }
  .fc i.f {
      background: repeating-linear-gradient(135deg, var(--red) 0 4px, #ef5b5f 4px 8px);
  }
  .hz {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      justify-content: center;
  }
  .hz span {
      font-size: 11.5px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--hair);
  }
  .hz span.on {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
  }
  .alrt {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
  }
  .alrt div {
      background: #fff;
      border: 1px solid var(--hair);
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 11.5px;
      color: var(--mut);
  }
  .alrt div b {
      display: block;
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.04em;
      color: var(--ink);
  }
  .alrt div:first-child {
      background: var(--ink);
      color: rgba(255, 255, 255, 0.7);
      border-color: var(--ink);
  }
  .alrt div:first-child b {
      color: #fff;
  }
  /* labels dark */
  .dk {
      border-radius: 36px;
      background: #161616;
      color: #fff;
      padding: clamp(22px, 3vw, 40px);
      box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.6);
  }
  .dk-h {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
  }
  .dk-h .d-ic {
      background: #fff;
      color: var(--ink);
      width: 52px;
      height: 52px;
  }
  .dk-h h3 {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.02em;
  }
  .dk-h > span:last-child {
      margin-left: auto;
      font-size: 13.5px;
      color: rgba(255, 255, 255, 0.55);
  }
  .br {
      background: #222;
      border-radius: 24px;
      padding: 22px 26px;
      margin-top: 12px;
  }
  .br-t {
      display: grid;
      grid-template-columns: 120px 90px minmax(0, 1fr) 130px;
      align-items: center;
      gap: 18px;
  }
  .br-t b {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.02em;
  }
  .br-t small {
      font-size: 13.5px;
      color: rgba(255, 255, 255, 0.55);
  }
  .br-t em {
      font-style: normal;
      font-size: 14.5px;
      color: rgba(255, 255, 255, 0.6);
      text-align: right;
  }
  .br-t em strong {
      color: var(--pink);
      font-weight: 500;
  }
  .seg {
      display: flex;
      height: 14px;
      border-radius: 7px;
      overflow: hidden;
      gap: 2px;
  }
  .seg i {
      height: 100%;
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 1.2s var(--ease);
  }
  .dk.in .seg i {
      transform: none;
  }
  .br-c {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
  }
  .br-c span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
  }
  .br-c span::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c);
  }
  .br-c span b {
      font-weight: 600;
      color: #fff;
  }
  @media (max-width: 760px) {
      .br-t {
          grid-template-columns: 1fr auto;
      }
      .br-t .seg {
          grid-column: 1/-1;
          order: 3;
      }
      .br-t small {
          text-align: right;
      }
      .br-t em {
          grid-column: 1/-1;
          text-align: left;
          order: 4;
      }
  }
  .legend {
      margin-top: 22px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
  }
  .legend div {
      padding: 16px 18px;
      border-radius: 20px;
      background: #fff;
      border: 1px solid var(--hair2);
  }
  .legend b {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14.5px;
      font-weight: 600;
  }
  .legend b::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--c);
  }
  .legend p {
      font-size: 13px;
      color: var(--mut);
      margin-top: 4px;
  }
  @media (max-width: 900px) {
      .legend {
          grid-template-columns: 1fr 1fr;
      }
  }
  @media (max-width: 500px) {
      .legend {
          grid-template-columns: 1fr;
      }
  }
  /* PI check */
  .pi {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 18px;
      align-items: start;
  }
  @media (max-width: 1000px) {
      .pi {
          grid-template-columns: 1fr;
      }
  }
  .pis {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  .pst {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 16px;
      padding: 18px 20px;
      border-radius: 22px;
      background: #fff;
      border: 1px solid var(--hair2);
      transition:
          border-color 0.3s,
          box-shadow 0.3s;
  }
  .pst .n {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--bg);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 13px;
      transition:
          background 0.3s,
          color 0.3s;
  }
  .pst b {
      display: block;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
  }
  .pst p {
      font-size: 13.5px;
      color: var(--mut);
  }
  .pst.on {
      border-color: var(--ink);
      box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.35);
  }
  .pst.on .n {
      background: var(--ink);
      color: #fff;
  }
  .pic {
      padding: 24px;
      position: sticky;
      top: 100px;
  }
  .pic-h {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--hair2);
      flex-wrap: wrap;
  }
  .pdf {
      width: 44px;
      height: 54px;
      border-radius: 8px;
      background: var(--red-w);
      color: var(--red);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      flex-shrink: 0;
  }
  .pic-h b {
      display: block;
      font-size: 15.5px;
      font-weight: 600;
  }
  .pic-h small {
      font-size: 12.5px;
      color: var(--mut);
  }
  .pic-h .tag {
      margin-left: auto;
  }
  .pl {
      margin-top: 8px;
  }
  .pr {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) 60px 74px minmax(0, 1.5fr);
      gap: 12px;
      align-items: center;
      padding: 14px 6px;
      border-bottom: 1px solid var(--hair2);
      font-size: 13.5px;
  }
  .pr:last-child {
      border-bottom: 0;
  }
  .pr.hd {
      font-size: 11.5px;
      color: var(--mut);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 12px 6px;
  }
  .pr .m b {
      font-family: var(--mono);
      font-weight: 500;
      display: block;
  }
  .pr .m small {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--mut);
  }
  .pr .m small.fix {
      color: var(--green);
  }
  .pr .q {
      font-family: var(--mono);
      text-align: right;
  }
  .pr .p {
      font-family: var(--mono);
      text-align: right;
  }
  .pr .p small {
      display: block;
      font-family: var(--sans);
      font-size: 11px;
      color: var(--red);
      font-weight: 600;
  }
  .vd {
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 0.12;
      transition: opacity 0.5s var(--ease);
  }
  .vd.on {
      opacity: 1;
  }
  .vd em {
      align-self: flex-start;
      font-style: normal;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 11px;
      border-radius: 999px;
  }
  .vd small {
      font-size: 12px;
      color: var(--mut);
      line-height: 1.35;
  }
  .v-ok {
      background: #e4f4ea;
      color: #1d7445;
  }
  .v-stop {
      background: var(--red);
      color: #fff;
  }
  .v-short {
      background: #fdf1dc;
      color: #9a6408;
  }
  .v-new {
      background: var(--bg2);
      color: var(--ink2);
  }
  .pic-f {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--hair2);
      flex-wrap: wrap;
  }
  .pic-f span {
      font-size: 13px;
      color: var(--mut);
      margin-right: auto;
  }
  .pic-f button {
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 500;
      background: var(--bg2);
  }
  .pic-f button.k {
      background: var(--ink);
      color: #fff;
  }
  @media (max-width: 620px) {
      .pr {
          grid-template-columns: 1fr 50px 64px;
      }
      .pr .vd {
          grid-column: 1/-1;
      }
      .pr.hd span:last-child {
          display: none;
      }
  }
  /* value */
  .val {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
      gap: 18px;
  }
  @media (max-width: 960px) {
      .val {
          grid-template-columns: 1fr;
      }
  }
  .vr {
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }
  .vr .d-n {
      font-size: clamp(48px, 5vw, 68px);
      margin: 6px 0;
  }
  .vbs {
      margin-top: auto;
      display: grid;
      gap: 10px;
  }
  .vbs div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  .vbs b {
      font-weight: 500;
  }
  .vc {
      padding: 30px 30px 22px;
  }
  .vc-h {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 26px;
  }
  .vc-h h3 {
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.015em;
  }
  .vleg {
      display: flex;
      gap: 16px;
      font-size: 13px;
      color: var(--ink2);
  }
  .vleg span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
  }
  .vleg i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--c);
  }
  .stk {
      height: 300px;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 10px;
      align-items: end;
  }
  .stk > div {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;
      height: 100%;
      gap: 3px;
      position: relative;
  }
  .stk em {
      font-style: normal;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--mut);
      text-align: center;
      margin-bottom: 6px;
  }
  .stk i {
      border-radius: 6px;
      height: 0;
      transition: height 1s var(--ease);
  }
  .stk span {
      font-size: 11px;
      color: var(--mut);
      text-align: center;
      margin-top: 8px;
      letter-spacing: 0.04em;
  }
  @media (max-width: 620px) {
      .stk {
          gap: 4px;
          height: 220px;
      }
      .stk em {
          display: none;
      }
      .stk span {
          font-size: 9.5px;
      }
  }
  /* control */
  .ctl {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
  }
  @media (max-width: 1000px) {
      .ctl {
          grid-template-columns: 1fr;
      }
  }
  .cc {
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }
  .cc h3 {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.025em;
  }
  .cc > p {
      font-size: 14px;
      color: var(--mut);
  }
  .kb {
      margin-top: 6px;
      border-radius: 20px;
      background: var(--bg);
      padding: 16px;
      font-family: var(--mono);
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--ink2);
      display: grid;
      gap: 8px;
  }
  .kb .vh {
      display: flex;
      justify-content: space-between;
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink);
  }
  .kb .vh em {
      font-style: normal;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-weight: 500;
  }
  .kb p {
      padding: 8px 10px;
      border-radius: 10px;
      background: #fff;
  }
  .kb p mark {
      background: var(--red-w);
      color: var(--red-d);
      padding: 0 4px;
      border-radius: 4px;
  }
  .set {
      margin-top: 6px;
      display: grid;
      gap: 14px;
  }
  .set label {
      display: grid;
      gap: 8px;
      font-size: 13.5px;
      color: var(--ink2);
  }
  .set label span {
      display: flex;
      justify-content: space-between;
  }
  .set label b {
      font-family: var(--mono);
      font-weight: 500;
      color: var(--ink);
  }
  input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--ink) var(--p, 50%), var(--hair) var(--p, 50%));
      outline: none;
  }
  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--ink);
      box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.4);
      cursor: pointer;
  }
  input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--ink);
      cursor: pointer;
  }
  .dec {
      margin-top: 6px;
      display: grid;
      gap: 10px;
  }
  .dl {
      border-radius: 18px;
      background: var(--bg);
      padding: 14px 16px;
      display: grid;
      gap: 10px;
  }
  .dl div {
      display: flex;
      justify-content: space-between;
      font-size: 13.5px;
  }
  .dl div b {
      font-family: var(--mono);
      font-weight: 500;
  }
  .dl .tag {
      justify-self: start;
  }
  .seg3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      background: #fff;
      border-radius: 999px;
      padding: 4px;
  }
  .seg3 button {
      padding: 9px 6px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink2);
      transition:
          background 0.2s,
          color 0.2s;
  }
  .seg3 button[aria-pressed="true"] {
      background: var(--ink);
      color: #fff;
  }
  .seg3 button.rj[aria-pressed="true"] {
      background: var(--red);
  }
  /* results */
  .res {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
  }
  @media (max-width: 1000px) {
      .res {
          grid-template-columns: 1fr 1fr;
      }
  }
  @media (max-width: 520px) {
      .res {
          grid-template-columns: 1fr;
      }
  }
  .rc {
      padding: 30px 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 250px;
  }
  .rc b {
      font-weight: 500;
      font-size: clamp(44px, 4.4vw, 64px);
      letter-spacing: -0.05em;
      line-height: 1;
  }
  .rc b small {
      font-size: 0.45em;
      color: var(--mut);
      letter-spacing: -0.02em;
  }
  .rc h3 {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
  }
  .rc p {
      font-size: 13.5px;
      color: var(--mut);
      margin-top: auto;
  }
  .rc.k {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
  }
  .rc.k p {
      color: rgba(255, 255, 255, 0.6);
  }
  .rc.k b small {
      color: rgba(255, 255, 255, 0.5);
  }
  .rc.r {
      background: radial-gradient(70% 90% at 90% 0%, #f06569, transparent 60%), var(--red);
      color: #fff;
      border: 0;
  }
  .rc.r p {
      color: rgba(255, 255, 255, 0.8);
  }
  .roi {
      margin-top: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0;
      overflow: hidden;
  }
  @media (max-width: 900px) {
      .roi {
          grid-template-columns: 1fr;
      }
  }
  .roi-l {
      padding: 34px;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }
  .roi-l h3 {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.025em;
  }
  .roi-l > p {
      font-size: 14px;
      color: var(--mut);
      margin-top: -12px;
  }
  .roi-r {
      padding: 34px;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      gap: 14px;
      justify-content: center;
  }
  .roi-r small {
      font-size: 12.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--mut);
      font-weight: 500;
  }
  .roi-r .out {
      font-weight: 500;
      font-size: clamp(52px, 6vw, 84px);
      letter-spacing: -0.06em;
      line-height: 1;
      color: var(--red);
  }
  .roi-r .row {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;
      border-top: 1px solid var(--hair);
      font-size: 14.5px;
  }
  .roi-r .row b {
      font-family: var(--mono);
      font-weight: 500;
  }
  .roi-r .nt {
      font-size: 12px;
      color: var(--mut);
  }
  /* before after */
  .vs {
      padding: clamp(14px, 2.5vw, 26px);
  }
  .vs-h,
  .vs-r {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 40px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
  }
  .vs-h {
      padding: 4px 14px 14px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
  }
  .vs-h .b {
      color: var(--mut);
  }
  .vs-h .a {
      color: var(--red);
  }
  .vs-r {
      padding: 14px;
      border-radius: 16px;
      transition: background 0.25s;
  }
  .vs-r:hover {
      background: var(--bg);
  }
  .vs-r + .vs-r {
      border-top: 1px solid var(--hair2);
  }
  .vs-r .l {
      font-size: 15.5px;
      font-weight: 500;
  }
  .vs-r .p {
      justify-self: start;
      font-size: 14px;
      padding: 8px 14px;
      border-radius: 999px;
  }
  .vs-r .p.b {
      background: var(--bg2);
      color: var(--mut);
      text-decoration: line-through;
      text-decoration-color: rgba(0, 0, 0, 0.25);
  }
  .vs-r .p.a {
      background: var(--ink);
      color: #fff;
  }
  .vs-r .ar {
      color: var(--red);
      text-align: center;
  }
  @media (max-width: 700px) {
      .vs-h {
          display: none;
      }
      .vs-r {
          grid-template-columns: 1fr 24px 1fr;
      }
      .vs-r .l {
          grid-column: 1/-1;
      }
      .vs-r .p {
          justify-self: stretch;
          text-align: center;
          font-size: 13px;
      }
  }
  /* ===== FAQ ===== */
  .faq {
      max-width: 900px;
      margin: 0 auto;
  }
  .faq details {
      border-bottom: 1px solid var(--hair);
  }
  .faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      padding: 24px 4px;
      font-size: clamp(17px, 1.6vw, 21px);
      font-weight: 500;
      letter-spacing: -0.02em;
  }
  .faq summary::-webkit-details-marker {
      display: none;
  }
  .faq summary i {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--hair);
      position: relative;
      transition: all 0.3s var(--ease);
  }
  .faq summary i::before,
  .faq summary i::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 1.5px;
      background: currentColor;
      transform: translate(-50%, -50%);
      transition: transform 0.3s var(--ease);
  }
  .faq summary i::after {
      transform: translate(-50%, -50%) rotate(90deg);
  }
  .faq details[open] summary i {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
  }
  .faq details[open] summary i::after {
      transform: translate(-50%, -50%) rotate(0);
  }
  .faq .a {
      padding: 0 4px 24px;
      color: var(--ink2);
      max-width: 760px;
      font-size: 15.5px;
  }
  /* ===== Contact Form (POC section) ===== */
  .cta2 {
      border-radius: 40px;
      background: var(--ink);
      color: #fff;
      padding: clamp(30px, 5vw, 70px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(30px, 5vw, 70px);
      position: relative;
      overflow: hidden;
  }
  .cta2::before {
      content: "";
      position: absolute;
      right: -10%;
      top: -30%;
      width: 70%;
      height: 90%;
      background: radial-gradient(circle, rgba(227, 38, 43, 0.55), transparent 65%);
      pointer-events: none;
  }
  .cta2 > * {
      position: relative;
  }
  @media (max-width: 960px) {
      .cta2 {
          grid-template-columns: 1fr;
      }
  }
  .cta2 .eb {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.2);
      color: #fff;
  }
  .cta2 .eb::before {
      box-shadow: 0 0 0 4px rgba(227, 38, 43, 0.3);
  }
  .cta2 .h2 {
      color: #fff;
  }
  .cta2 .h2 em {
      color: var(--pink);
  }
  .cta2 .lede {
      color: rgba(255, 255, 255, 0.7);
      margin-top: 20px;
  }
  .ps {
      margin-top: 30px;
      display: grid;
      gap: 10px;
  }
  .ps div {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 15px;
  }
  .ps span {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 13px;
      color: var(--pink);
  }
  .form {
      background: #fff;
      color: var(--ink);
      border-radius: 30px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
  .form h3 {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.025em;
  }
  .fg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
  }
  @media (max-width: 520px) {
      .fg {
          grid-template-columns: 1fr;
      }
  }
  .fd {
      display: flex;
      flex-direction: column;
      gap: 6px;
  }
  .fd label {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink2);
  }
  .fd input,
  .fd select {
      background: var(--bg);
      border: 1px solid var(--hair2);
      border-radius: 14px;
      padding: 10px 14px;
      font: inherit;
      font-size: 14px !important;
      color: var(--ink);
      outline: none;
      transition:
          border-color 0.2s,
          background 0.2s;
  }
  .fd input:focus,
  .fd select:focus {
      border-color: var(--ink);
      background: #fff;
  }
  .fd input:user-invalid {
      border-color: var(--red);
  }
  .form .btn {
      justify-content: space-between;
      margin-top: 6px;
  }
  .form small {
      font-size: 12.5px;
      color: var(--mut);
      text-align: center;
  }
  .done {
      display: none;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      padding: 10px 0;
  }
  .form.sent > * {
      display: none;
  }
  .form.sent .done {
      display: flex;
  }
  .done span {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 22px;
  }
  .done p {
      color: var(--mut);
  }
  /* ===== Footer ===== */
  footer {
      padding: 70px 0 36px;
  }
  .fgrid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.2fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--hair);
  }
  @media (max-width: 900px) {
      .fgrid {
          grid-template-columns: 1fr 1fr;
      }
  }
  .fgrid p {
      font-size: 14px;
      color: var(--mut);
      margin-top: 14px;
      max-width: 320px;
  }
  .fgrid h4 {
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--mut);
      margin-bottom: 14px;
      font-weight: 500;
  }
  .fgrid ul {
      list-style: none;
      display: grid;
      gap: 9px;
  }
  .fgrid li a,
  .fgrid address {
      font-size: 14px;
      color: var(--ink2);
      font-style: normal;
  }
  .fbot {
      padding-top: 26px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
      color: var(--mut);
  }
  /* reveal */
  .js .rv {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
      transition:
          opacity 0.9s var(--ease),
          transform 1s var(--ease),
          filter 0.9s var(--ease);
  }
  .js .rv.in {
      opacity: 1;
      transform: none;
      filter: none;
  }
  @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
      }
      .js .rv {
          opacity: 1;
          transform: none;
          filter: none;
      }
  }
  .tbl td.rs {
      min-width: 280px;
  }
  .tbl td.dt {
      min-width: 130px;
  }
  .on-now,
  .on-dt {
      white-space: nowrap;
  }
  
  /* hero banner v2 */
  .hero {
      padding: 160px 0 80px;
  }
  .hero::before {
      background: radial-gradient(45% 40% at 50% 8%, rgba(227, 38, 43, 0.18), transparent 70%),
          radial-gradient(40% 35% at 85% 60%, rgba(243, 163, 166, 0.3), transparent 70%),
          radial-gradient(40% 35% at 12% 55%, rgba(243, 163, 166, 0.22), transparent 70%);
  }
  .ht {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0;
  }
  .ht .pill {
      justify-self: auto;
  }
  .h1 {
      font-size: clamp(52px, 8.4vw, 128px);
      line-height: 0.95;
      letter-spacing: -0.055em;
      margin: 30px 0 26px;
      max-width: 1100px;
  }
  .hsub {
      font-size: clamp(17px, 1.5vw, 20.5px);
      color: var(--ink2);
      max-width: 680px;
      text-wrap: pretty;
  }
  .ht .cta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 34px;
  }
  .stage {
      position: relative;
      max-width: 1180px;
      margin: 80px auto 0;
      perspective: 1600px;
  }
  .frame {
      position: relative;
      z-index: 1;
      border-radius: 34px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow:
          0 1px 0 #fff inset,
          0 80px 140px -60px rgba(120, 20, 25, 0.35),
          0 30px 60px -40px rgba(0, 0, 0, 0.25);
      transform: rotateX(12deg) scale(0.96);
      transform-origin: 50% 0;
      transition: transform 1.4s var(--ease);
  }
  .js .frame {
      opacity: 0;
      animation: fIn 1.4s 0.3s var(--ease) forwards;
  }
  @keyframes fIn {
      to {
          opacity: 1;
          transform: none;
      }
  }
  .fbar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px 14px;
  }
  .fbar i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--hair);
  }
  .fbar span {
      margin: 0 auto;
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--mut);
      background: #fff;
      padding: 5px 16px;
      border-radius: 999px;
  }
  .frame .dash {
      margin: 0;
      padding: 18px;
      border-radius: 26px;
      background: var(--bg);
      gap: 14px;
  }
  .frame .dash > .card {
      padding: 22px;
  }
  .frame .d-head {
      font-size: 15.5px;
  }
  .frame .d-ic {
      width: 38px;
      height: 38px;
  }
  .frame .big {
      font-size: clamp(60px, 6.4vw, 96px);
  }
  .frame .d1-b {
      grid-template-columns: minmax(0, 1fr) 200px;
      margin: 26px 0 18px;
  }
  .frame .bars {
      height: 130px;
  }
  .frame .d-n {
      font-size: 52px;
      margin: 18px 0 14px;
  }
  .frame .d-red .d-n {
      font-size: 42px;
  }
  .frame .d1 .acts span {
      padding: 11px 18px;
      font-size: 13.5px;
  }
  .frame .tag {
      font-size: 12px;
      padding: 6px 12px;
  }
  .frame .agent {
      top: -22px;
  }
  .fl {
      position: absolute;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px 12px 12px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid #fff;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.35);
      font-size: 13px;
      animation: flo 7s ease-in-out infinite;
  }
  .fl b {
      display: block;
      font-weight: 600;
      font-size: 14px;
  }
  .fl small {
      color: var(--mut);
  }
  .fi {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--ink);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 700;
      flex-shrink: 0;
  }
  .fi.r {
      background: var(--red);
  }
  .fl1 {
      left: -40px;
      top: 34%;
  }
  .fl2 {
      right: -36px;
      top: 62%;
      animation-delay: -3.5s;
  }
  @keyframes flo {
      50% {
          translate: 0 -10px;
      }
  }
  @media (max-width: 1260px) {
      .fl1 {
          left: 10px;
          top: -34px;
      }
      .fl2 {
          right: 10px;
          top: auto;
          bottom: -30px;
      }
  }
  @media (max-width: 760px) {
      .fl {
          display: none;
      }
      .frame {
          padding: 6px;
          border-radius: 24px;
      }
      .frame .dash {
          padding: 10px;
      }
      .fbar span {
          display: none;
      }
  }
  @media (prefers-reduced-motion: reduce) {
      .frame {
          transform: none;
          opacity: 1;
      }
      .fl {
          animation: none;
      }
  }
  
  .fbar {
      position: relative;
      min-height: 46px;
  }
  .frame .agent {
      top: 50%;
      transform: translate(-50%, -50%);
  }
  .fbar {
      min-height: 56px;
  }
  .frame .dash {
      position: static;
  }
  @media (max-width: 1260px) {
      .fl1 {
          left: auto;
          right: 10px;
          top: -78px;
      }
      .fl2 {
          bottom: -64px;
      }
  }
  
  .lm {
      width: 32px;
      height: 32px;
      color: var(--ink);
      flex-shrink: 0;
  }
  .hub .lm {
      color: #fff;
      --lmi: var(--ink);
  }
  .logo i {
      display: none;
  }
  /* ===== Contact Form (popup) ===== */
  .md {
      border: 0;
      padding: 0;
      background: transparent;
      max-width: min(520px, calc(100vw - 24px));
      width: 100%;
      margin: auto;
      overflow: visible;
  }
  .md::backdrop {
      background: rgba(20, 20, 20, 0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
  }
  .md[open] {
      animation: mdIn 0.45s var(--ease);
  }
  @keyframes mdIn {
      from {
          opacity: 0;
          transform: translateY(24px) scale(0.97);
      }
  }
  .md-f {
      position: relative;
      background: #fff;
      border-radius: 32px;
      padding: clamp(24px, 4vw, 38px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.5);
  }
  .md-f .eb {
      margin: 0;
      align-self: flex-start;
  }
  .md-f h2 {
      font-size: 30px;
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1.1;
  }
  .md-f > p {
      font-size: 14.5px;
      color: var(--mut);
      margin-top: -6px;
  }
  .md-x {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--bg);
      font-size: 22px;
      line-height: 1;
      color: var(--ink);
      transition: background 0.2s;
  }
  .md-x:hover {
      background: var(--bg2);
  }
  .md-f .btn {
      justify-content: space-between;
      margin-top: 6px;
  }
  .md-f .fd label::after {
      content: " *";
      color: var(--red);
  }
  .md-f.sent > *:not(.done):not(.md-x) {
      display: none;
  }
  .md-f.sent .done {
      display: flex;
  }
  .md-f .done .btn {
      justify-content: center;
      padding: 12px 22px;
      margin-top: 6px;
  }
  .fbar {
      min-height: 30px;
  }
  
  /* why agentic */
  .ag {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
      gap: 24px 30px;
      align-items: center;
  }
  .ag-side {
      display: flex;
      gap: 18px;
      align-items: flex-start;
      padding: 28px;
      border-radius: 30px;
      border: 1px solid var(--hair2);
      background: var(--bg);
  }
  .ag-side.r {
      background: #fff;
      box-shadow: 0 30px 60px -44px rgba(30, 25, 20, 0.35);
  }
  .ag-ic {
      width: 64px;
      height: 64px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
  }
  .ag-ic.m {
      background: #fff;
      color: var(--mut);
      border: 1px solid var(--hair);
  }
  .ag-ic.a {
      background: var(--red);
      color: #fff;
      box-shadow: 0 16px 30px -14px rgba(227, 38, 43, 0.6);
  }
  .ag-side h3 {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 1.1;
  }
  .ag-side p {
      font-size: 14.5px;
      color: var(--mut);
      margin-top: 6px;
  }
  .ag-side ul {
      list-style: none;
      margin-top: 14px;
      display: grid;
      gap: 8px;
  }
  .ag-side li {
      font-size: 13.5px;
      display: flex;
      gap: 10px;
      align-items: baseline;
  }
  .ag-side.l li {
      color: var(--mut);
      text-decoration: line-through;
      text-decoration-color: rgba(0, 0, 0, 0.2);
  }
  .ag-side.l li::before {
      content: "✕";
      color: var(--red);
      font-size: 11px;
      font-weight: 700;
  }
  .ag-side.r li::before {
      content: "✓";
      color: var(--green);
      font-size: 12px;
      font-weight: 700;
  }
  .ag-hub {
      display: grid;
      place-items: center;
      position: relative;
  }
  .ag-hub::before,
  .ag-hub::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 30px;
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--red) 0 6px, transparent 6px 11px);
  }
  .ag-hub::before {
      right: 100%;
  }
  .ag-hub::after {
      left: 100%;
  }
  .ag-orb {
      position: relative;
      width: 300px;
      height: 300px;
      display: grid;
      place-items: center;
  }
  .ag-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px dashed rgba(227, 38, 43, 0.35);
      animation: spin 30s linear infinite;
  }
  .ag-ring::after {
      content: "";
      position: absolute;
      left: 50%;
      top: -6px;
      width: 12px;
      height: 12px;
      margin-left: -6px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 6px rgba(227, 38, 43, 0.15);
  }
  .ag-ring.r2 {
      inset: 26px;
      border-style: solid;
      border-color: var(--hair);
      animation-duration: 22s;
      animation-direction: reverse;
  }
  .ag-ring.r2::after {
      background: var(--ink);
      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.08);
  }
  .ag-core {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 28%, #3a3a3a, #141414 70%);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
      box-shadow:
          0 40px 70px -30px rgba(0, 0, 0, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .ag-core .lm {
      width: 40px;
      height: 40px;
  }
  .ag-core b {
      font-size: 17px;
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.2;
  }
  .ag-tree {
      grid-column: 1/-1;
      height: 46px;
      position: relative;
      margin-top: -10px;
  }
  .ag-tree::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      height: 22px;
      border-left: 2px solid var(--pale);
  }
  .ag-tree i {
      position: absolute;
      left: calc(100% / 6);
      right: calc(100% / 6);
      top: 22px;
      height: 24px;
      border: 2px solid var(--pale);
      border-bottom: 0;
      border-radius: 14px 14px 0 0;
  }
  .ag-tree i::after {
      content: "";
      position: absolute;
      left: 50%;
      top: -2px;
      height: 24px;
      border-left: 2px solid var(--pale);
  }
  .ag-caps {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
  }
  .ag-cap {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      padding: 26px 22px;
      border-radius: 26px;
      background: var(--bg);
  }
  .ag-cap span {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--hair);
      display: grid;
      place-items: center;
      color: var(--red);
      margin-bottom: 6px;
  }
  .ag-cap b {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.015em;
  }
  .ag-cap p {
      font-size: 13.5px;
      color: var(--mut);
      max-width: 260px;
  }
  @media (max-width: 1080px) {
      .ag {
          grid-template-columns: 1fr;
          max-width: 620px;
          margin: 0 auto;
      }
      .ag-hub {
          order: -1;
      }
      .ag-hub::before,
      .ag-hub::after,
      .ag-tree {
          display: none;
      }
      .ag-orb {
          width: 260px;
          height: 260px;
      }
      .ag-core {
          width: 176px;
          height: 176px;
      }
      .ag-caps {
          grid-template-columns: 1fr;
      }
  }
  @media (prefers-reduced-motion: reduce) {
      .ag-ring {
          animation: none;
      }
  }
  
  /* ===== Animations & Effects ===== */
  /* progress */
  .prog {
      position: fixed;
      left: 0;
      top: 0;
      height: 3px;
      width: 100%;
      transform-origin: left;
      transform: scaleX(var(--sp, 0));
      background: linear-gradient(90deg, var(--red), #ff8a8d);
      z-index: 200;
  }
  /* hero mesh */
  .hero::before {
      display: none;
  }
  .mesh {
      position: absolute;
      inset: -10% -5% 20%;
      pointer-events: none;
      filter: blur(70px);
      opacity: 0.9;
  }
  .mesh i {
      position: absolute;
      border-radius: 50%;
      mix-blend-mode: multiply;
  }
  .mesh i:nth-child(1) {
      width: 46vw;
      height: 46vw;
      left: 28%;
      top: -18%;
      background: radial-gradient(circle, rgba(227, 38, 43, 0.32), transparent 65%);
      animation: m1 18s ease-in-out infinite;
  }
  .mesh i:nth-child(2) {
      width: 38vw;
      height: 38vw;
      left: -6%;
      top: 22%;
      background: radial-gradient(circle, rgba(243, 163, 166, 0.55), transparent 65%);
      animation: m2 22s ease-in-out infinite;
  }
  .mesh i:nth-child(3) {
      width: 40vw;
      height: 40vw;
      right: -8%;
      top: 12%;
      background: radial-gradient(circle, rgba(255, 180, 150, 0.45), transparent 65%);
      animation: m3 20s ease-in-out infinite;
  }
  .mesh i:nth-child(4) {
      width: 30vw;
      height: 30vw;
      left: 40%;
      top: 40%;
      background: radial-gradient(circle, rgba(227, 38, 43, 0.18), transparent 65%);
      animation: m2 26s ease-in-out infinite reverse;
  }
  @keyframes m1 {
      50% {
          transform: translate(-8vw, 6vw) scale(1.12);
      }
  }
  @keyframes m2 {
      50% {
          transform: translate(10vw, -4vw) scale(0.9);
      }
  }
  @keyframes m3 {
      50% {
          transform: translate(-6vw, 8vw) scale(1.1);
      }
  }
  /* headline reveal */
  .h1 .w {
      display: inline-block;
      opacity: 0;
      transform: translateY(0.35em);
      filter: blur(10px);
      animation: wIn 1s var(--ease) forwards;
  }
  .h1 em .w {
      background: linear-gradient(100deg, var(--red) 20%, #ff7a7e 45%, var(--red) 70%);
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation:
          wIn 1s var(--ease) forwards,
          shine 5s 1.6s linear infinite;
  }
  @keyframes wIn {
      to {
          opacity: 1;
          transform: none;
          filter: none;
      }
  }
  @keyframes shine {
      from {
          background-position: 120% 0;
      }
      to {
          background-position: -120% 0;
      }
  }
  .js .ht .pill,
  .js .hsub,
  .js .ht .cta {
      opacity: 0;
      transform: translateY(16px);
      animation: wIn 0.9s var(--ease) forwards;
  }
  .js .ht .pill {
      animation-delay: 0.05s;
  }
  .js .hsub {
      animation-delay: 0.75s;
  }
  .js .ht .cta {
      animation-delay: 0.9s;
  }
  /* 3d frame on scroll + mouse */
  .stage {
      perspective: 1400px;
  }
  .js .frame {
      opacity: 1;
      animation: none;
      transform: rotateX(var(--tx, 16deg)) rotateY(var(--ty, 0deg)) scale(var(--ts, 0.94));
      transition: transform 0.25s linear;
  }
  .frame::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 34px;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%);
      background-size: 250% 100%;
      background-position: 150% 0;
      animation: sweep 6s 2s ease-in-out infinite;
      mix-blend-mode: soft-light;
  }
  @keyframes sweep {
      0%,
      60% {
          background-position: 150% 0;
      }
      100% {
          background-position: -60% 0;
      }
  }
  .stage::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -60px;
      height: 120px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(120, 20, 25, 0.28), transparent 70%);
      filter: blur(20px);
      z-index: 0;
  }
  /* ticker */
  .tick {
      position: relative;
      padding: 34px 0 10px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .tr {
      overflow: hidden;
      padding: 6px 0;
  }
  .tr > div {
      display: flex;
      gap: 12px;
      width: max-content;
      animation: tk 60s linear infinite;
  }
  .tr.rev > div {
      animation-direction: reverse;
      animation-duration: 70s;
  }
  .tick:hover .tr > div {
      animation-play-state: paused;
  }
  @keyframes tk {
      to {
          transform: translateX(-50%);
      }
  }
  .tk {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px 8px 8px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--hair);
      white-space: nowrap;
      box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.3);
  }
  .tk b {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 13px;
      padding: 6px 12px;
      border-radius: 999px;
      background: var(--bg);
  }
  .tk em {
      font-style: normal;
      font-weight: 600;
      font-size: 13.5px;
  }
  .tk small {
      font-size: 13px;
      color: var(--mut);
  }
  .tk.k em {
      color: var(--ink);
  }
  .tk.r em {
      color: var(--red);
  }
  .tk.s em {
      color: #fff;
      background: var(--red);
      padding: 4px 10px;
      border-radius: 999px;
  }
  .tk.g em {
      color: var(--green);
  }
  .tk.a em {
      color: #9a6408;
  }
  .tk.n em {
      color: var(--grey);
  }
  /* kinetic */
  .kin {
      overflow: hidden;
      padding: 50px 0;
      background: #fff;
      border-top: 1px solid var(--hair2);
  }
  .kin-t {
      display: flex;
      align-items: center;
      gap: 4vw;
      white-space: nowrap;
      width: max-content;
      transform: translateX(var(--kx, 0px));
      will-change: transform;
  }
  .kin-t span {
      font-size: clamp(64px, 11vw, 170px);
      font-weight: 500;
      letter-spacing: -0.06em;
      line-height: 1;
      color: var(--ink);
  }
  .kin-t span.o {
      color: transparent;
      -webkit-text-stroke: 2px var(--ink);
  }
  .kin-t i {
      width: clamp(40px, 5vw, 80px);
      height: clamp(40px, 5vw, 80px);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ff8a8d, var(--red));
      flex-shrink: 0;
      box-shadow: 0 20px 40px -14px rgba(227, 38, 43, 0.6);
  }
  /* spotlight cards */
  .card {
      position: relative;
      isolation: isolate;
  }
  .card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s;
      background: radial-gradient(
          420px circle at var(--mx, 50%) var(--my, 50%),
          rgba(227, 38, 43, 0.09),
          transparent 45%
      );
      z-index: 2;
  }
  .card:hover::before {
      opacity: 1;
  }
  .d-red::before,
  .rc.r::before {
      background: radial-gradient(
          420px circle at var(--mx, 50%) var(--my, 50%),
          rgba(255, 255, 255, 0.22),
          transparent 45%
      );
  }
  .fs.ag::before,
  .rc.k::before {
      background: radial-gradient(
          420px circle at var(--mx, 50%) var(--my, 50%),
          rgba(255, 255, 255, 0.1),
          transparent 45%
      );
  }
  .bt,
  .pc,
  .fs,
  .rc,
  .cc {
      transition:
          transform 0.5s var(--ease),
          box-shadow 0.5s var(--ease);
  }
  .bt:hover,
  .fs:hover,
  .rc:hover,
  .cc:hover {
      transform: translateY(-6px);
      box-shadow: 0 50px 80px -50px rgba(30, 25, 20, 0.45);
  }
  /* section headline sweep */
  .sh .h2 em {
      background: linear-gradient(100deg, var(--red) 30%, #ff7a7e 50%, var(--red) 70%);
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      background-position: 120% 0;
      transition: background-position 1.6s var(--ease) 0.3s;
  }
  .sh.in .h2 em {
      background-position: -20% 0;
  }
  .cta2 .h2 em {
      background: none;
      color: var(--pink);
  }
  /* magnetic */
  .btn-k,
  .btn-r {
      will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
      .mesh i,
      .tr > div,
      .frame::after,
      .h1 em .w {
          animation: none !important;
      }
      .h1 .w,
      .js .ht .pill,
      .js .hsub,
      .js .ht .cta {
          opacity: 1;
          transform: none;
          filter: none;
      }
      .kin-t {
          transform: none;
      }
      .js .frame {
          transform: none;
      }
  }
  
  .card::before {
      display: none !important;
  }
  
  /* ===== Conversion fixes ===== */
  .d-red .vf-t {
      font-size: 18px;
      font-weight: 500;
  }
  .fgrid .fh {
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--mut);
      margin-bottom: 14px;
      font-weight: 500;
  }