:root {
    --ink: #13343B;
    --ink-soft: #3F5E65;
    --paper: #FFFFFF;
    --mist: #EEF3F1;
    --line: #D3DEDA;
    --star: #F6B91A;
    --star-deep: #B97F00;
    --leaf: #2E7D4F;
    --alert: #B3261E;
    --display: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
    --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --measure: 36rem;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--star-deep); outline-offset: 3px; border-radius: 4px; }
  .wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }

  h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; letter-spacing: -0.015em; }
  h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 800; }
  h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
  h3 { font-size: 1.25rem; font-weight: 700; }
  p { margin: 0; }

  /* Header */
  .site-head { padding-block: 1.25rem; }
  .site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .logo { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--display); font-weight: 800; font-size: 1.35rem; text-decoration: none; }
  .logo svg { width: 1.6rem; height: 1.6rem; }
  .head-link { font-weight: 600; text-decoration: none; padding: .5rem .9rem; border-radius: 999px; border: 2px solid var(--ink); }
  .head-link:hover { background: var(--ink); color: var(--paper); }

  /* Buttons */
  .btn {
    display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
    background: var(--star); color: var(--ink); border: 0; border-radius: 999px;
    padding: .95rem 1.6rem; text-decoration: none; box-shadow: 0 3px 0 var(--star-deep);
  }
  .btn:hover { background: #FFC93A; }
  .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--star-deep); }

  /* Hero */
  .hero { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
  .hero .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .hero-copy > * + * { margin-top: 1.4rem; }
  .hero-lede { font-size: 1.2rem; color: var(--ink-soft); max-width: var(--measure); }
  .hero-small { font-size: .95rem; color: var(--ink-soft); }
  .founder { display: inline-block; background: var(--mist); border-radius: .6rem; padding: .55rem .85rem; font-size: .95rem; font-weight: 600; }

  /* The counter sign — the one memorable object */
  .counter { display: grid; justify-items: center; }
  .sign {
    position: relative; width: min(21rem, 100%);
    background: var(--paper); border: 2px solid var(--ink); border-radius: 1.4rem;
    padding: 1.7rem 1.6rem 1.5rem; text-align: center;
    transform: rotate(-2.5deg);
    box-shadow: 10px 12px 0 var(--ink);
  }
  .sign-biz { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
  .sign-title { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.15; margin-top: .3rem; }
  .sign-qr { width: 9.5rem; height: 9.5rem; margin: 1.1rem auto .9rem; display: block; }
  .sign-cta { font-size: .95rem; }
  .stars { display: flex; justify-content: center; gap: .3rem; margin-top: 1rem; }
  .stars svg { width: 2rem; height: 2rem; }
  .stars path { fill: var(--line); }
  .stars .on path { animation: fill .35s ease-out forwards; }
  .stars .on:nth-child(1) path { animation-delay: .5s; }
  .stars .on:nth-child(2) path { animation-delay: .7s; }
  .stars .on:nth-child(3) path { animation-delay: .9s; }
  .stars .on:nth-child(4) path { animation-delay: 1.1s; }
  .stars .on:nth-child(5) path { animation-delay: 1.3s; }
  @keyframes fill { to { fill: var(--star); } }
  .stand { width: 9rem; height: 1.1rem; background: var(--ink); border-radius: 0 0 .6rem .6rem; margin-top: -.2rem; transform: rotate(-2.5deg) translateX(-.6rem); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }

  /* Sections */
  section { padding-block: clamp(3.5rem, 8vw, 6rem); }
  .section-intro { max-width: var(--measure); }
  .section-intro p { margin-top: 1rem; color: var(--ink-soft); }

  /* Steps — a real sequence, so numbers are earned */
  .how { background: var(--mist); }
  .steps { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; }
  .steps li { counter-increment: step; }
  .steps li::before {
    content: counter(step);
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--ink); color: var(--paper); font-family: var(--display); font-weight: 800; font-size: 1.35rem;
    margin-bottom: 1rem;
  }
  .steps p { margin-top: .5rem; color: var(--ink-soft); }

  /* Customer view */
  .customer .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
  .mail {
    background: var(--paper); border: 2px solid var(--line); border-radius: 1.2rem; overflow: hidden; max-width: 27rem;
  }
  .mail-head { padding: 1rem 1.25rem; border-bottom: 2px solid var(--line); font-size: .92rem; }
  .mail-head strong { display: block; font-size: 1rem; }
  .mail-head span { color: var(--ink-soft); }
  .mail-body { padding: 1.25rem; }
  .mail-body p + p { margin-top: .85rem; }
  .mail-btn { display: inline-block; margin-top: 1.1rem; background: var(--ink); color: var(--paper); border-radius: .6rem; padding: .7rem 1.1rem; font-weight: 700; font-size: .95rem; }
  .mail-sign { margin-top: 1.1rem; color: var(--ink-soft); font-size: .95rem; }
  .customer-copy > * + * { margin-top: 1rem; }
  .customer-copy p { color: var(--ink-soft); max-width: var(--measure); }

  /* Rules */
  .rules { background: var(--ink); color: var(--paper); }
  .rules .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .rules p { color: #D6E4E1; max-width: var(--measure); }
  .rules p + p { margin-top: 1rem; }

  /* Pricing — two plans, two different weights */
  .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; max-width: 52rem; }
  .plan { border: 2px solid var(--line); border-radius: 1.2rem; padding: 1.8rem; }
  .plan--plus { border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .plan-price { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; margin-top: .9rem; }
  .plan-price small { font-family: var(--body); font-size: 1rem; font-weight: 500; }
  .plan-founder { margin-top: .5rem; font-size: .95rem; font-weight: 600; color: var(--leaf); }
  .plan--plus .plan-founder { color: var(--star); }
  .plan ul { list-style: none; padding: 0; margin: 1.4rem 0 0; }
  .plan li { padding-left: 1.7rem; position: relative; }
  .plan li + li { margin-top: .55rem; }
  .plan li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: 1rem; background: var(--star); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  .soon { font-size: .8rem; font-weight: 700; background: var(--mist); color: var(--ink); border-radius: .4rem; padding: .1rem .4rem; margin-left: .3rem; white-space: nowrap; }
  .plan-note { margin-top: 1.5rem; color: var(--ink-soft); font-size: .95rem; max-width: 52rem; }

  /* FAQ */
  .faq { background: var(--mist); }
  .faq-list { margin-top: 2rem; max-width: 46rem; }
  details { border-bottom: 2px solid var(--line); }
  summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 700; position: relative; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; position: absolute; right: .3rem; top: .75rem; font-family: var(--display); font-size: 1.6rem; font-weight: 700; transition: transform .2s; }
  details[open] summary::after { transform: rotate(45deg); }
  details p { padding-bottom: 1.2rem; color: var(--ink-soft); max-width: var(--measure); }

  /* Waitlist */
  .join .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .join-copy > * + * { margin-top: 1rem; }
  .join-copy p { color: var(--ink-soft); max-width: var(--measure); }
  form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
  .field { display: grid; gap: .35rem; }
  .field--wide { grid-column: 1 / -1; }
  label { font-weight: 600; font-size: .95rem; }
  input, select {
    font: inherit; color: var(--ink); background: var(--paper);
    border: 2px solid var(--line); border-radius: .7rem; padding: .75rem .85rem; width: 100%;
  }
  input:focus, select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(246,185,26,.45); }
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .form-foot { grid-column: 1 / -1; display: grid; gap: .9rem; justify-items: start; }
  .consent { font-size: .9rem; color: var(--ink-soft); }
  .form-msg { grid-column: 1 / -1; font-weight: 600; }
  .form-msg.error { color: var(--alert); }
  .done { border: 2px solid var(--ink); border-radius: 1.2rem; padding: 2rem; box-shadow: 8px 10px 0 var(--star); }
  .done h3 { font-size: 1.6rem; }
  .done p { margin-top: .6rem; color: var(--ink-soft); }

  /* Footer */
  .site-foot { border-top: 2px solid var(--line); padding-block: 2rem; font-size: .95rem; color: var(--ink-soft); }
  .site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
  .foot-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

  @media (max-width: 860px) {
    .hero .wrap, .customer .wrap, .rules .wrap, .join .wrap { grid-template-columns: 1fr; }
    .customer-copy { order: -1; }
    .sign { width: min(18rem, 100%); }
    .steps { grid-template-columns: 1fr; }
    .plans { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    form { grid-template-columns: 1fr; }
    .head-link { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .stars .on path { animation: none; fill: var(--star); }
  }

  /* Language switch */
  .head-nav { display: flex; align-items: center; gap: 1.1rem; }
  .lang-link { font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }