/* PONCLAW - landing */

/* ------------------------------------------------------------------- hero */
/* The vertical padding is not decoration: the hero clips its overflow, and the
   claw is capped at 100% of the hero height, so the hero has to carry enough
   slack for the drift's full excursion or the animation clips its own prongs. */
.hero{position:relative;padding:150px 0 132px;text-align:center;overflow:hidden}
.hero-claws{position:absolute;inset:0;pointer-events:none;z-index:0}
/* Anchored to the vertical centre rather than a top offset, so the claw keeps
   its framing at every hero height instead of drifting as the copy reflows.
   Sized by HEIGHT and capped at 100%, so it can never be clipped vertically;
   width follows the aspect ratio into the gutter beside the headline, which
   the breakpoints below defend. */
.hero-claws svg{
  position:absolute;top:50%;height:min(100%,600px);width:auto;
  transform:translateY(-50%);
  will-change:transform;
}
.hero-claws .l{left:-5%;transform:translateY(-50%) scaleX(-1)}
.hero-claws .r{right:-5%}

/* --- slow life -----------------------------------------------------------
   The drift lives on the <svg> itself, which the compositor can transform
   without repainting; only the small unfiltered contour lines and nodes
   actually redraw. The two claws run at different periods so they never
   settle into a visible lockstep, and the keyframes have to restate the base
   transform (including .l's mirror) because an animated transform replaces
   the declared one outright rather than composing with it. */
@media(prefers-reduced-motion:no-preference){
  .hero-claws .r{animation:clawDriftR 23s ease-in-out infinite}
  .hero-claws .l{animation:clawDriftL 29s ease-in-out infinite}
  .hero-claws .claw-line{animation:clawDash 26s linear infinite}
  .hero-claws .claw-node{animation:clawPulse 8s ease-in-out infinite}
  .hero-claws .claw-sheen-a{animation:clawSheenA 17s ease-in-out infinite}
  .hero-claws .claw-sheen-b{animation:clawSheenB 17s ease-in-out infinite}
}
/* Symmetric around the rest position, so the excursion is +/-9px rather than
   16px in one direction, which halves the headroom the hero has to reserve. */
@keyframes clawDriftR{
  0%,100%{transform:translateY(calc(-50% + 9px)) rotate(-1deg)}
  50%    {transform:translateY(calc(-50% - 9px)) rotate(1.4deg)}
}
@keyframes clawDriftL{
  0%,100%{transform:translateY(calc(-50% + 9px)) scaleX(-1) rotate(-1deg)}
  50%    {transform:translateY(calc(-50% - 9px)) scaleX(-1) rotate(1.4deg)}
}
/* Both dash patterns have a period of 9 units, so a 18 unit shift is two
   whole periods and the loop has no seam. */
@keyframes clawDash{to{stroke-dashoffset:-18}}
@keyframes clawPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes clawSheenA{0%,100%{stop-opacity:.95}50%{stop-opacity:.4}}
@keyframes clawSheenB{0%,100%{stop-opacity:.35}50%{stop-opacity:.9}}
.hero-in{position:relative;z-index:2}
.hero h1{margin:0 auto;max-width:14ch}
.hero .lede{max-width:54ch;margin-inline:auto}
.hero-cta{display:flex;gap:11px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.hero-glow{
  position:absolute;left:50%;top:-190px;transform:translateX(-50%);
  width:940px;height:540px;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(212,252,80,.13),transparent 70%);filter:blur(20px);
}
/* The gutter beside the headline closes faster than the viewport does, because
   the headline keeps its 14ch measure while the page narrows. Each step gives
   up height AND slides further off the edge; the measured clearance from the
   real glyph boxes stays above 80px at every width. */
@media(max-width:1360px){
  .hero-claws svg{height:min(88%,520px)}
  .hero-claws .l{left:-6%}
  .hero-claws .r{right:-6%}
}
@media(max-width:1160px){
  .hero-claws svg{height:min(74%,430px)}
  .hero-claws .l{left:-9%}
  .hero-claws .r{right:-9%}
}
/* Below the desktop breakpoint the copy runs nearly full width, so there is no
   gutter left to hide in. Rather than shrink the claws to a sliver, dissolve
   the edge that points at the text: they stay large at the screen edge and the
   half that would sit under the headline simply is not painted.
   The mask is written in the element's own coordinate space, which is why the
   same declaration works for the mirrored .l as for .r. */
@media(max-width:1000px){
  .hero-claws svg{
    height:min(86%,470px);opacity:.6;
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 40%,#000 82%);
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 40%,#000 82%);
  }
  .hero-claws .l{left:-20%}
  .hero-claws .r{right:-20%}
}
@media(max-width:620px){
  .hero-claws svg{height:min(74%,380px);opacity:.5}
  .hero-claws .l{left:-27%}
  .hero-claws .r{right:-27%}
}

/* the wireframe frame around the hero, drawn as SVG so it can animate */
.hero-frame{position:absolute;inset:16px 3% 10px;z-index:1;pointer-events:none;opacity:.16}
.hero-frame svg{width:100%;height:100%}

.ticker-bar{
  position:relative;z-index:1;overflow:hidden;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--glass-bg);
}
.ticker-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker-bar:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{
  display:flex;align-items:baseline;gap:10px;padding:13px 26px;
  border-right:1px solid var(--line-soft);font-family:var(--mono);font-size:12.5px;white-space:nowrap;
}
.tk b{font-weight:600;letter-spacing:.06em}
.tk .px{color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------------------------------------------------------------- metrics */
.metrics{padding:44px 0}
.metrics-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.metric{padding:22px 20px}
.metric .v{font-size:clamp(20px,2.3vw,29px);font-weight:700;letter-spacing:-.035em;line-height:1}
.metric .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);margin-top:11px}
@media(max-width:900px){.metric-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- section */
.section{padding:74px 0}
.section-head{max-width:62ch;margin-bottom:34px}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feat{padding:26px 24px;transition:transform .18s ease,border-color .18s ease}
.feat:hover{transform:translateY(-2px);border-color:var(--line-hot)}
.feat .ico{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line-hot);background:rgba(212,252,80,.11);color:var(--acc);margin-bottom:16px;
}
.feat .ico svg{width:18px;height:18px}
.feat p{color:var(--ink-2);font-size:14px;line-height:1.62;margin:9px 0 0}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------- terminal */
.dev{display:grid;grid-template-columns:.92fr 1.08fr;gap:32px;align-items:center}
@media(max-width:960px){.dev{grid-template-columns:1fr}}
.dev ul{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:11px}
.dev li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.dev li svg{width:15px;height:15px;color:var(--acc);flex:none;margin-top:3px}

.term{overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line-soft)}
.term-bar .b{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.term-bar .b:first-child{background:rgba(212,252,80,.5)}
.term-bar .t{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.term-body{
  padding:20px;font-family:var(--mono);font-size:12.5px;line-height:1.75;min-height:300px;
  white-space:pre-wrap;color:var(--ink-2);background:rgba(0,0,0,.28);
}
.term-body .c{color:var(--ink-3)}
.term-body .g{color:var(--acc)}
.term-body .w{color:var(--ink)}
.caret{display:inline-block;width:8px;height:15px;background:var(--acc);vertical-align:-2px;animation:blink 1.05s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ------------------------------------------------------------------ steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{padding:24px 22px}
.step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--acc);margin-bottom:14px}
.step h4{margin:0 0 12px;font-size:16px;letter-spacing:-.025em;font-weight:600}
.step ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.step li{display:flex;gap:9px;font-size:12.8px;color:var(--ink-2);line-height:1.5}
.step li svg{width:13px;height:13px;color:var(--acc);flex:none;margin-top:3px}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}

/* -------------------------------------------------------------- tool list */
.tools-wrap{overflow-x:auto}
.tools-tbl{width:max-content;min-width:100%;border-collapse:collapse;font-size:13.5px}
.tools-tbl th{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:0 14px 12px;
}
.tools-tbl td{padding:13px 14px;border-top:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
.tools-tbl td:first-child{font-family:var(--mono);color:var(--acc);white-space:nowrap}
@media(max-width:700px){.tools-tbl .hide-s{display:none}}

/* -------------------------------------------------------------------- cta */
.cta{
  text-align:center;padding:62px 30px;position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,rgba(212,252,80,.09),rgba(255,255,255,.03));
  border:1px solid var(--line-hot);
}
.cta .h2{max-width:18ch;margin-inline:auto}

/* --------------------------------------------------------------- sign in */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:rgba(6,6,6,.72);backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.modal .card{width:min(460px,100%);padding:26px;max-height:88vh;overflow:auto}
.modal h3{margin:0 0 4px;font-size:19px;letter-spacing:-.025em}
.wal-btn{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:left;
  transition:border-color .15s ease,background .15s ease;
}
.wal-btn:hover{border-color:var(--line-hot);background:rgba(212,252,80,.07)}
.wal-btn .t{flex:1}
.wal-btn .t b{display:block;font-size:14px;font-weight:600}
.wal-btn .t span{font-size:12px;color:var(--ink-2)}
.wal-btn .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-hot);color:var(--acc);background:rgba(212,252,80,.1)}
.wal-btn .ic svg{width:17px;height:17px}

/* ------------------------------------------------------------------- trial */
.trial{padding:26px}
.trial-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.trial-steps{grid-template-columns:1fr}}
.tstep{display:grid;gap:9px;align-content:start}
.tnum{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.tstep label{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.tstep input{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--ink);font-size:14px;outline:none;
  transition:border-color .15s ease;
}
.tstep input:focus{border-color:var(--acc)}
.thint{margin:0;font-size:12px;line-height:1.55;color:var(--ink-3)}

.trial-rule{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding:13px 16px;
  border-radius:12px;border:1px dashed var(--line-hot);background:rgba(212,252,80,.05);
}
.trule-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);flex:none}
.trial-rule code{font-family:var(--mono);font-size:12.5px;color:var(--acc);word-break:break-word}

.trial-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.trial-go .thint{max-width:42ch}
.terr{
  margin:0;width:100%;font-size:13px;color:var(--bad);
  border-left:2px solid var(--bad);padding-left:11px;
}

/* --- deployed state --- */
.tlive-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tlive-id{display:flex;align-items:center;gap:13px}
.tlive-mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-hot);background:rgba(212,252,80,.11);color:var(--acc);
}
.tlive-mark svg{width:20px;height:20px}
.tlive-id b{display:block;font-size:17px;letter-spacing:-.02em}
.tlive-id .mono{font-size:11.5px;color:var(--ink-3)}

.tlive-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:20px}
@media(max-width:700px){.tlive-kpis{grid-template-columns:1fr 1fr}}
.tkpi{padding:14px;border-radius:12px;border:1px solid var(--glass-line);background:rgba(255,255,255,.03)}
.tkpi .v{font-size:19px;font-weight:700;letter-spacing:-.03em}
.tkpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}

.tlive-rule{margin-top:14px}
.trow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 15px;border-radius:12px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.03);
}
.trow + .trow{margin-top:8px}
.trow code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.trow.dim{color:var(--ink-3);font-size:13px}
.tdetail{font-family:var(--mono);font-size:11.5px;color:var(--acc);margin-left:auto}
.tbar{width:100%;height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--acc);transition:width .4s ease}

.tlive-log{margin-top:14px;display:grid;gap:5px}
.tlog{
  display:grid;grid-template-columns:74px 1fr;gap:11px;
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-2);
}
.tlog span:first-child{color:var(--ink-3)}
.tlog.dim span:last-child{color:var(--ink-3)}
.tlog.lv-buy span:last-child,.tlog.lv-ok span:last-child,.tlog.lv-rule span:last-child,
.tlog.lv-deploy span:last-child,.tlog.lv-fill span:last-child{color:var(--acc)}
.tlog.lv-sell span:last-child{color:#8ab4f8}
.tlog.lv-warn span:last-child,.tlog.lv-hold span:last-child,.tlog.lv-loss span:last-child{color:var(--warn)}
.tlog.lv-block span:last-child{color:var(--bad)}

/* landing leaderboard: the shared tools table with numeric columns */
.board-tbl th.r,.board-tbl td.r{text-align:right}
.board-tbl td{padding:11px 14px;white-space:nowrap}
.board-tbl td:first-child{color:var(--ink-3)}
.board-tbl a{border-bottom:1px solid var(--line-hot)}