:root {
      --bg: #FBF4EC;
      --card: #FFFFFF;
      --ink: #1F1F1F;
      --muted: #5E5650;
      --line: rgba(31, 31, 31, .14);
      --terra: #D96B4B;
      --peach: #F4A882;
      --cream: #F7E4D5;
      --yellow: #F2D25B;
      --purple: #8E7BEB;
      --blue: #4E9EC6;
      --teal: #2E7D74;
      --olive: #B7B487;
      --red: #E3523D;
      --pink: #F699B7;
      --lav: #D8C4F7;
      --head: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
      --body: "Inter", "Helvetica Neue", Arial, sans-serif;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --bg: #171412;
        --card: #221E1B;
        --ink: #F7E4D5;
        --muted: #BBAEA3;
        --line: rgba(247, 228, 213, .18)
      }
    }

    :root[data-theme="dark"] {
      --bg: #171412;
      --card: #221E1B;
      --ink: #F7E4D5;
      --muted: #BBAEA3;
      --line: rgba(247, 228, 213, .18)
    }

    html {
      scroll-padding-top: env(safe-area-inset-top, 0px);
      scroll-behavior: smooth
    }

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

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--body);
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased
    }

    a {
      color: inherit
    }

    .wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 48px)
    }

    .eyebrow {
      font-family: var(--head);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .32em;
      text-transform: uppercase
    }

    h1,
    h2,
    h3 {
      font-family: var(--head);
      margin: 0;
      letter-spacing: -.02em;
      line-height: 1.08
    }

    .logo {
      font-family: var(--head);
      font-weight: 500;
      letter-spacing: .2em;
      text-decoration: none;
      display: inline-block;
      line-height: 1;
      white-space: nowrap
    }

    .logo svg {
      width: .8em;
      height: .72em;
      margin-right: .2em;
      vertical-align: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 4.4;
      stroke-linejoin: miter
    }

    header {
      padding: 28px 0;
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 50;
      transition: padding .35s cubic-bezier(.2, .7, .2, 1), background .35s, box-shadow .35s
    }

    header .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px
    }

    .theme {
      color: var(--ink);
      background: transparent;
      border: none;
      padding: 8px;
      cursor: pointer;
      transition: opacity .2s;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .theme:hover {
      opacity: 0.7
    }

    .theme:focus-visible {
      outline: 2px solid var(--purple);
      outline-offset: 3px
    }

    header .logo {
      font-size: 26px
    }

    .hero {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(28px, 5vw, 64px);
      align-items: center;
      padding: clamp(24px, 5vw, 56px) 0 clamp(56px, 8vw, 96px)
    }

    .hero h1 {
      font-size: clamp(40px, 6.2vw, 76px);
      font-weight: 700;
      margin: 22px 0 24px
    }

    .hero h1 em {
      font-style: normal;
      color: var(--terra)
    }

    .hero p.lead {
      font-size: clamp(18px, 2vw, 21px);
      color: var(--muted);
      max-width: 30em;
      margin: 0 0 30px
    }

    .tagline {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-family: var(--head);
      font-size: 12px;
      letter-spacing: .34em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--muted)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--ink);
      color: var(--bg);
      font-family: var(--head);
      font-weight: 600;
      font-size: 15px;
      padding: 14px 26px;
      border-radius: 999px;
      text-decoration: none;
      transition: transform .2s
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .art {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 12px;
      min-height: 460px
    }

    .tile {
      position: relative;
      overflow: hidden;
      border-radius: 6px
    }

    .t-a {
      grid-row: span 2;
      background: var(--purple)
    }

    .t-b {
      background: var(--yellow)
    }

    .t-c {
      background: var(--blue)
    }

    .ring {
      position: absolute;
      border: 1px solid rgba(255, 255, 255, .75);
      border-radius: 50%
    }

    .sphere {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #EE8B6C, var(--terra) 55%, #B9532F)
    }

    .plinth {
      position: absolute;
      background: var(--cream);
      border-radius: 3px
    }

    .pill {
      position: absolute;
      border-radius: 999px
    }

    .dot {
      position: absolute;
      border-radius: 50%
    }

    .vline {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(255, 255, 255, .7)
    }

    section {
      padding: clamp(56px, 8vw, 96px) 0
    }

    .sec-head {
      max-width: 640px;
      margin-bottom: 40px
    }

    .sec-head h2 {
      font-size: clamp(30px, 4vw, 46px);
      font-weight: 700;
      margin-top: 16px
    }

    .sec-head p {
      color: var(--muted);
      margin: 16px 0 0
    }

    .what {
      border-top: 1px solid var(--line)
    }

    .what-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(24px, 5vw, 72px);
      align-items: start
    }

    .what-grid h2 {
      font-size: clamp(28px, 3.6vw, 42px);
      font-weight: 700;
      margin-top: 16px
    }

    .list {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .list li {
      display: flex;
      gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line)
    }

    .list li:first-child {
      padding-top: 0
    }

    .list b {
      font-family: var(--head);
      font-size: 12px;
      letter-spacing: .2em;
      color: var(--terra);
      padding-top: 5px;
      min-width: 26px
    }

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

    .step {
      background: var(--card);
      border-radius: 8px;
      padding: 20px 20px 22px;
      box-shadow: 0 1px 0 var(--line);
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .step .top {
      display: flex;
      justify-content: space-between;
      font-family: var(--head);
      font-size: 12px;
      color: var(--muted)
    }

    .step h3 {
      font-size: 22px;
      font-weight: 700;
      margin-top: 6px
    }

    .step p {
      margin: 0;
      color: var(--muted);
      font-size: 15px
    }

    .swatch {
      position: relative;
      height: 110px;
      border-radius: 4px;
      margin-top: 14px;
      overflow: hidden
    }

    .swatch i {
      position: absolute;
      display: block
    }

    .flow {
      margin-top: 36px;
      font-family: var(--head);
      font-weight: 600;
      font-size: clamp(14px, 1.8vw, 18px);
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      align-items: center
    }

    .flow span.arr {
      color: var(--terra)
    }

    .status {
      background: var(--terra);
      color: #FFF6EE;
      position: relative;
      overflow: hidden
    }

    .status .wrap {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 40px;
      align-items: end
    }

    .status h2 {
      font-size: clamp(32px, 5vw, 60px);
      font-weight: 700;
      margin-top: 18px
    }

    .status p {
      margin: 0;
      font-size: 18px;
      max-width: 26em;
      opacity: .95
    }

    .status .ring {
      border-color: rgba(255, 246, 238, .45)
    }

    .pulse {
      display: inline-flex;
      align-items: center;
      gap: 10px
    }

    .pulse::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 0 0 rgba(242, 210, 91, .7);
      animation: p 2.2s infinite
    }

    @keyframes p {
      70% {
        box-shadow: 0 0 0 12px rgba(242, 210, 91, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(242, 210, 91, 0)
      }
    }

    .contact-box {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center
    }

    .contact h2 {
      font-size: clamp(30px, 4vw, 46px);
      font-weight: 700;
      margin-top: 16px
    }

    .mail {
      font-family: var(--head);
      font-weight: 700;
      font-size: clamp(22px, 3.4vw, 38px);
      letter-spacing: -.01em;
      text-decoration: none;
      border-bottom: 3px solid var(--purple);
      word-break: break-all;
      display: inline-block;
      padding-bottom: 4px
    }

    .mail:hover {
      color: var(--purple)
    }

    .contact .sub {
      color: var(--muted);
      margin: 0 0 22px
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 32px 0 40px;
      font-size: 14px;
      color: var(--muted)
    }

    footer .row {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center
    }

    footer .logo {
      font-size: 15px;
      color: var(--ink)
    }

    @media (max-width:900px) {

      .hero,
      .what-grid,
      .status .wrap,
      .contact-box {
        grid-template-columns: 1fr
      }

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

      .art {
        min-height: 380px
      }
    }

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

      header .logo {
        font-size: 21px
      }

      .art {
        min-height: 340px
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
      }
    }