:root {
    --paper: #f2ecdd;
    --paper-deep: #e9e1cc;
    --ink: #12283a;
    --ink-soft: #3d5266;
    --ink-faint: #8fa0ae;
    --signal: #e4572e;
    --sea: #7fa8a4;
    --line: rgba(18, 40, 58, 0.16);
    --serif: "Fraunces", serif;
    --sans: "Instrument Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
  }
  ::selection { background: var(--signal); color: var(--paper); }

  /* ---- bathymetric backdrop ---- */
  .chart-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 90% 60% at 75% -10%, rgba(127,168,164,.22), transparent 60%),
      radial-gradient(ellipse 70% 50% at 10% 110%, rgba(127,168,164,.16), transparent 60%),
      var(--paper);
  }
  .chart-bg::before {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 85%);
  }
  .chart-bg::after {
    content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.16 0 0 0 0 0.23 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

  /* ---- nav ---- */
  nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0;
  }
  .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
  .brand strong { font-family: var(--serif); font-weight: 640; font-size: 24px; letter-spacing: -.01em; }
  .brand .mono { color: var(--ink-faint); }
  nav a.cta-mini {
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--signal); padding-bottom: 2px;
  }
  nav a.cta-mini:hover { color: var(--signal); }

  /* ---- hero ---- */
  header.hero { padding: 72px 0 40px; position: relative; }
  .coords { display: flex; gap: 24px; margin-bottom: 28px; }
  .coords span { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); }
  h1 {
    font-family: var(--serif); font-weight: 340; font-size: clamp(42px, 7vw, 84px);
    line-height: 1.04; letter-spacing: -.02em; max-width: 15ch;
  }
  h1 em { font-style: italic; font-weight: 340; color: var(--signal); }
  .hero p.sub {
    margin-top: 28px; font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); max-width: 52ch;
  }
  .reveal { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .d1 { animation-delay: .05s } .d2 { animation-delay: .18s } .d3 { animation-delay: .32s } .d4 { animation-delay: .48s }
  @keyframes rise { to { opacity: 1; transform: none } }

  /* ---- waitlist form ---- */
  .waitlist { margin-top: 40px; max-width: 480px; }
  .waitlist form { display: flex; border: 1.5px solid var(--ink); background: rgba(255,255,255,.55); }
  .waitlist input {
    flex: 1; min-width: 0; border: 0; background: transparent; padding: 15px 16px;
    font: 500 15px var(--sans); color: var(--ink); outline: none;
  }
  .waitlist input::placeholder { color: var(--ink-faint); }
  .waitlist button {
    border: 0; cursor: pointer; background: var(--ink); color: var(--paper);
    font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase;
    padding: 0 22px; transition: background .2s;
  }
  .waitlist button:hover { background: var(--signal); }
  .waitlist .note { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: .04em; }
  .waitlist .note.ok { color: #2c7a4b; }
  .waitlist .note.err { color: var(--signal); }

  /* ---- archipelago map ---- */
  .map { margin: 48px 0 0; position: relative; }
  .map svg { width: 100%; height: auto; display: block; }
  .isle { fill: var(--ink); opacity: .92; }
  .isle-ring { fill: none; stroke: var(--ink); stroke-opacity: .28; }
  .route {
    fill: none; stroke: var(--ink-soft); stroke-width: 1.4; stroke-dasharray: 3 6;
    animation: sail 30s linear infinite; opacity: .7;
  }
  @keyframes sail { to { stroke-dashoffset: -450 } }
  .map text { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; fill: var(--ink-soft); text-transform: uppercase; }
  .map text.you { fill: var(--signal); font-weight: 500; }
  .helm { fill: var(--signal); }

  /* ---- sections ---- */
  section { padding: 88px 0; border-top: 1.5px solid var(--line); }
  .sec-label { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
  .sec-label::after { content: ""; height: 1.5px; flex: 1; background: var(--line); }
  h2 { font-family: var(--serif); font-weight: 560; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.015em; line-height: 1.15; max-width: 22ch; }

  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 48px; background: var(--line); border: 1.5px solid var(--line); }
  .pillar { background: var(--paper); padding: 32px 26px 36px; position: relative; transition: background .25s; }
  .pillar:hover { background: var(--paper-deep); }
  .pillar .num { font-family: var(--mono); font-size: 12px; color: var(--signal); letter-spacing: .1em; }
  .pillar h3 { font-family: var(--serif); font-weight: 560; font-size: 23px; margin: 14px 0 10px; letter-spacing: -.01em; }
  .pillar p { font-size: 15px; color: var(--ink-soft); }

  .steps { margin-top: 48px; display: grid; gap: 0; }
  .step {
    display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: baseline;
    padding: 26px 0; border-bottom: 1px solid var(--line);
  }
  .step:first-child { border-top: 1px solid var(--line); }
  .step .mono { color: var(--signal); }
  .step h3 { font-family: var(--serif); font-size: 22px; font-weight: 560; display: inline; margin-right: 12px; }
  .step p { display: inline; color: var(--ink-soft); font-size: 15.5px; }

  /* ---- final cta ---- */
  .final { text-align: left; }
  .final .waitlist { margin-top: 36px; }

  footer {
    border-top: 1.5px solid var(--line); padding: 32px 0 48px;
    display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px;
  }
  footer .mono { color: var(--ink-faint); text-transform: none; letter-spacing: .04em; }

  @media (max-width: 720px) {
    .pillars { grid-template-columns: 1fr; }
    .step { grid-template-columns: 1fr; gap: 6px; }
    .coords span:nth-child(2) { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
    .route { animation: none; }
  }