/* ═══ HAW0K — holding page ═════════════════════════════════════════════
   Brand direction taken from the product's own low-fidelity screens:
   near-black ground, one vivid green signal, geometric grotesque, and the
   wordmark whose zero sits in a rounded green tile. The hero repeats the
   first screen of the product — a lone figure under a rising beam.

   Archivo is shared with haw0k-mem0.com so the two sites read as one
   house; everything else here is HAW0K's own. Dark only, deliberately:
   this is one held moment, and the product itself is a dark interface. */
:root{
  --void:#080B0C;          /* ground */
  --plate:#0E1415;         /* panels */
  --raised:#141C1D;
  --rule:#1E2829;
  --ink:#E8EDEC;
  --dim:#8A9895;
  --signal:#3BE08C;        /* the one accent: beam, badge, anything clickable */
  --signal-dim:rgba(59,224,140,.14);
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scrollbar-color:var(--rule) var(--void)}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
  caret-color:var(--signal);overflow-x:hidden}
::selection{background:var(--signal-dim);color:var(--ink)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--void);border-radius:8px}
a{color:inherit;text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px}
h1,h2{margin:0;text-wrap:balance;letter-spacing:-.03em}
.wrap{max-width:1140px;margin:0 auto;padding-inline:28px}

/* ═══ Wordmark: HAW[0]K, the zero in its own tile ════════════════════ */
.mark{display:inline-flex;align-items:center;font-weight:800;line-height:1;
  letter-spacing:-.015em}
.mark .o{width:.84em;height:.84em;margin-inline:.05em;display:block;flex:none}

/* ═══ Hero ═══════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero .wrap{position:relative;z-index:3;padding-block:112px 0;text-align:center}
.hero .mark{font-size:clamp(52px,11vw,138px)}

/* The stage: horizon, beam, and the slot where the figure stands.
   Drawn rather than photographed so it stays sharp at any width and adds
   nothing to load. */
.stage{position:relative;height:clamp(210px,28vw,320px);margin-top:46px;
  z-index:1}
.stage::before{                      /* the beam, rising from the figure */
  content:"";position:absolute;left:50%;bottom:19%;top:-42%;
  width:min(30vw,340px);transform:translateX(-50%);
  background:linear-gradient(to top,
    rgba(59,224,140,.30) 0%,
    rgba(59,224,140,.13) 34%,
    rgba(59,224,140,.04) 72%,
    transparent 100%);
  clip-path:polygon(41% 100%, 59% 100%, 74% 0%, 26% 0%);
  filter:blur(9px);
}
.stage::after{                       /* pool of light where it lands */
  content:"";position:absolute;left:50%;bottom:12%;
  width:min(52vw,600px);height:min(13vw,130px);transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(59,224,140,.22) 0%, rgba(59,224,140,.06) 46%, transparent 72%);
  filter:blur(12px);
}
@media (prefers-reduced-motion:no-preference){
  .stage::before{animation:breathe 9s ease-in-out infinite}
}
@keyframes breathe{50%{opacity:.7}}

#motes{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;
  pointer-events:none}
.horizon{position:absolute;inset:auto 0 0 0;height:56%;z-index:3;
  display:block;width:100%}

/* ───────────────────────────────────────────────────────────────────────
   TODO — hero figure
   The product's first screen shows a lone figure standing in this beam.
   Export it as a transparent PNG or WebP at landing-haw0k/figure.png:
   pure silhouette, alpha channel, roughly 600×900, feet flush with the
   bottom edge of the canvas so it meets the pool of light without a gap.
   Then uncomment the two lines below — nothing else needs changing, the
   slot is already positioned, sized and layered above the horizon.
   Until then the beam and horizon carry the hero on their own, which is
   why the page does not read as unfinished without it.
   ─────────────────────────────────────────────────────────────────────── */
.figure{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);
  width:min(9vw,104px);height:min(20vw,224px);z-index:4;pointer-events:none;
  /* background:url("figure.png") center bottom / contain no-repeat; */
  /* filter:drop-shadow(0 0 26px rgba(59,224,140,.35)); */
}

.kernel{font-family:var(--data);font-size:clamp(11.5px,1.5vw,15px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--signal);
  margin:26px 0 0}
.soon{display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  font-family:var(--data);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--rule);border-radius:999px;padding:8px 18px}
.soon i{width:7px;height:7px;border-radius:50%;background:var(--signal);
  display:block;flex:none}
@media (prefers-reduced-motion:no-preference){
  .soon i{animation:pulse 2.6s ease-in-out infinite}
}
@keyframes pulse{50%{opacity:.3}}
.lead{max-width:44ch;margin:26px auto 0;font-size:clamp(17px,2vw,21px);
  color:var(--dim)}
.acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:16.5px;
  font-weight:600;text-decoration:none;padding:14px 26px;border-radius:5px;
  border:1px solid var(--signal);background:var(--signal);color:var(--void);
  transition:background .18s,color .18s}
.btn:hover{background:transparent;color:var(--signal)}
.btn svg,.ghost svg{width:1em;height:1em;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{align-self:center;font-family:var(--data);font-size:13.5px;color:var(--dim)}

/* ═══ What it is ═════════════════════════════════════════════════════ */
.what{border-bottom:1px solid var(--rule)}
.what .wrap{padding-block:clamp(60px,8vw,100px)}
.what h2{font-size:clamp(25px,3.3vw,36px);font-weight:700;max-width:18ch;
  margin-bottom:24px}
.what p{max-width:66ch;color:var(--dim);margin:0}
/* The board. One object divided by rules, not four cards — the lanes are a
   sequence and the order carries meaning, so they share a frame. The live
   lane is the only lit thing on the page besides the beam and the button. */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:48px;border:1px solid var(--rule);border-radius:8px;
  background:var(--plate);overflow:hidden}
.lane{min-width:0;padding:26px 24px 30px;border-right:1px solid var(--rule);
  position:relative}
.lane:last-child{border-right:0}
.lane p{margin:0;color:var(--dim);font-size:16px;line-height:1.5;max-width:26ch}
.lane.live{background:linear-gradient(to bottom,rgba(59,224,140,.07),transparent 72%)}
.lane.live::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--signal)}
/* Chevrons on the rules: the lanes are a flow, and the flow has a direction. */
.lane+.lane::after{content:"";position:absolute;left:-5px;top:34px;
  width:8px;height:8px;border-top:1.5px solid var(--rule);
  border-right:1.5px solid var(--rule);transform:rotate(45deg);
  background:var(--plate)}
.lane.live+.lane::after,.lane.live::after{border-color:var(--signal)}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--data);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px!important}
.lane.live .chip{color:var(--signal)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--signal);
  display:block;flex:none}
@media (prefers-reduced-motion:no-preference){
  .lane.live .chip i{animation:pulse 2.6s ease-in-out infinite}
}

/* ═══ Ecosystem ══════════════════════════════════════════════════════ */
.eco{border-bottom:1px solid var(--rule);background:var(--plate)}
.eco .wrap{padding-block:clamp(52px,7vw,84px);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:30px 48px;align-items:center}
.eco .tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--data);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--signal);margin:0 0 14px}
.eco .tag i{width:6px;height:6px;border-radius:50%;background:var(--signal);
  display:block;flex:none}
.eco h2{font-size:clamp(23px,2.9vw,31px);font-weight:700;margin-bottom:12px}
.eco p{margin:0;color:var(--dim);max-width:58ch}
.ghost{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:16.5px;font-weight:600;text-decoration:none;padding:14px 24px;
  border-radius:5px;border:1px solid var(--rule);color:var(--ink);
  transition:border-color .18s,color .18s}
.ghost:hover{border-color:var(--signal);color:var(--signal)}

/* ═══ Foot ═══════════════════════════════════════════════════════════ */
footer .wrap{padding-block:34px 46px;display:flex;gap:14px 34px;flex-wrap:wrap;
  align-items:center;font-size:15px;color:var(--dim)}
footer .mark{font-size:18px}
footer a{color:var(--signal)}

@media (max-width:860px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lane:nth-child(2){border-right:0}
  .lane:nth-child(n+3){border-top:1px solid var(--rule)}
  .lane:nth-child(3)::after{display:none}
  .eco .wrap{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:560px){
  body{font-size:17px}
  .hero .wrap{padding-block:80px 0}
  .stage{height:clamp(200px,52vw,260px);margin-top:40px}
  .board{grid-template-columns:1fr}
  .lane{border-right:0}
  .lane+.lane{border-top:1px solid var(--rule)}
  .lane+.lane::after{display:none}
}