/* FuelBar site. Black and green.
   Structure: a headline that continues in grey, then shelves of cards, one idea per section.
   Texture: hairline rails with plus marks where they cross, mono labels, green highlight blocks. */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-var.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }

:root {
  --bg: #000;
  --panel: #0a0a0b;
  --line: #1c1c1f;
  --line-2: #2c2c30;
  --text: #f5f5f7;
  --soft: #a1a1a6;
  --muted: #86868b;
  --green: #4ade80;
  --green-deep: #22c55e;
  --green-ink: #03130a;
  --green-wash: rgba(74, 222, 128, 0.09);
  --red: #ff6b6b;

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 9vw, 128px);
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--bg); }
body { color: var(--text); background: var(--bg); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--green); color: var(--green-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- small voices ---------- */
.mono, .tag, .chip, .seg button, .btn, .nav-links, .foot, .rules span, .cur button, .replay, .th {
  font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
}
.tag { color: var(--muted); display: flex; gap: 10px; align-items: center; }
.tag .idx { color: var(--green); }
/* a word on a green block */
.chip { display: inline-block; padding: 5px 7px 4px; background: var(--green); color: var(--green-ink); font-weight: 500; }
.chip.quiet { background: var(--green-wash); color: var(--green); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; font-weight: 500;
  background: var(--green); color: var(--green-ink); transition: background-color 0.15s, transform 0.1s, box-shadow 0.2s; }
.btn:hover { background: #6ee7a0; }
.btn:active { transform: scale(0.98); }
.btn[disabled] { background: #1a1a1c; color: var(--muted); cursor: default; }
.btn.big { height: 54px; padding: 0 26px; font-size: 14px; border-radius: 12px; }
.btn.ghost { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1px var(--green-deep); }
.btn.ghost:hover { background: var(--green-wash); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--line); }
.nav-in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); height: 56px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.brand img { width: 24px; height: 24px; border-radius: 6px; }
.nav-links { display: flex; gap: 26px; margin-inline: auto; color: var(--soft); }
.nav-links a { padding: 8px 0; transition: color 0.15s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav .btn { margin-left: auto; }
.nav-links + .btn { margin-left: 0; }

/* ---------- the page: two rails, sections ruled off, plus marks at the crossings ---------- */
main { max-width: var(--max); margin-inline: auto; border-inline: 1px solid var(--line); }
.sec { position: relative; padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.sec:first-child { border-top: 0; }
.sec::before, .sec::after { content: ''; position: absolute; top: -6px; width: 11px; height: 11px; pointer-events: none;
  background: linear-gradient(var(--green), var(--green)) center / 11px 1px no-repeat, linear-gradient(var(--green), var(--green)) center / 1px 11px no-repeat; }
.sec::before { left: -6px; }
.sec::after { right: -6px; }
.sec:first-child::before, .sec:first-child::after { display: none; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .tag { margin-bottom: 18px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
/* the headline says the name in white and carries on in grey */
h1 { font-size: clamp(44px, 7.4vw, 92px); line-height: 1.02; letter-spacing: -0.045em; color: var(--muted); }
h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; color: var(--muted); max-width: 18ch; }
h1 b, h2 b { font-weight: inherit; color: var(--text); }
h2.wide { max-width: 24ch; }
h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.lede { color: var(--soft); max-width: 46ch; }
mark { background: none; color: var(--green); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(48px, 7vw, 96px); background: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: none; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.hero-side { padding-bottom: 10px; }
.hero-side p { color: var(--soft); margin: 14px 0 22px; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-cta .mono { color: var(--muted); }
.ver { white-space: nowrap; }
.foot .ver { margin-left: 14px; color: var(--soft); }

.tools-row { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); margin: clamp(40px, 6vw, 72px) calc(-1 * var(--gutter)) 0; border-block: 1px solid var(--line); background: var(--bg); }
.tools-row li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 8px 20px; border-left: 1px solid var(--line); color: var(--soft); font-size: 14px; }
.tools-row li:first-child { border-left: 0; }
.tools-row svg { width: 26px; height: 26px; fill: currentColor; color: var(--text); }
.tools-row .t-claude svg { color: #d97757; }
.tools-row .t-cursor svg { color: #e8e8ec; }
.tools-row .t-freebuff svg { color: #4ade80; }
.tools-row .t-copilot svg { color: #b39df3; }
.tools-row .t-antigravity svg { color: #8ab4f8; }

/* the big screen */
.stage { margin-top: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 28px; background: #000; overflow: hidden; position: relative; }
.stage-bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.stage video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(20, 20, 22, 0.8); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.seg button { height: 30px; padding: 0 14px; border-radius: 7px; color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.seg button[aria-pressed='true'] { background: var(--green); color: var(--green-ink); }

/* ---------- shelves of cards ---------- */
.shelf-nav { display: flex; gap: 8px; flex: none; }
.shelf-nav button { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--soft); display: grid; place-items: center; transition: color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.shelf-nav button:hover { color: var(--green); box-shadow: inset 0 0 0 1px var(--green-deep); }
.shelf-nav button[disabled] { opacity: 0.35; cursor: default; }
.shelf-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shelf { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.shelf::-webkit-scrollbar { display: none; }
.shelf .card { flex: 0 0 min(84vw, 540px); scroll-snap-align: start; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: #000; overflow: hidden; transition: border-color 0.2s; }
.card:hover { border-color: var(--line-2); }
.card-text { padding: 26px 26px 6px; }
.card-text h3 { margin: 16px 0 8px; }
.card-text p { color: var(--soft); font-size: 15px; line-height: 1.5; max-width: 44ch; }
.card video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: auto; background: #000; }

/* ---------- at a glance: ring colours ---------- */
.glance { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.glance > div { padding: 26px 24px 24px; border-left: 1px solid var(--line); }
.glance > div:first-child { border-left: 0; }
.glance svg { width: 56px; height: 56px; margin-bottom: 20px; overflow: visible; }
.glance circle { fill: none; stroke-width: 6; }
.glance .track { stroke: #26262b; }
.glance .arc { stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.glance h3 { font-size: 19px; margin-bottom: 6px; }
.glance p { color: var(--soft); font-size: 15px; }
@keyframes pulse { 50% { opacity: 0.5; } }
.glance .hot .arc { animation: pulse 2.2s ease-in-out infinite; }

/* ---------- tools ---------- */
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.grid6 > div { padding: 26px 24px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.grid6 > div:nth-child(3n + 1) { border-left: 0; }
.grid6 > div:nth-child(-n + 3) { border-top: 0; }
.grid6 h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; margin-bottom: 14px; }
.grid6 h3 svg { width: 22px; height: 22px; fill: currentColor; }
.grid6 p { color: var(--soft); font-size: 15px; }
.grid6 .th { display: block; color: var(--muted); margin: 16px 0 8px; }
.grid6 .th:first-of-type { margin-top: 0; }

/* ---------- the price ---------- */
.price { text-align: center; }
.price .sec-head { flex-direction: column; align-items: center; }
.price .tag { justify-content: center; }
.price h2 { max-width: none; }
.reveal { position: relative; padding: clamp(8px, 2vw, 24px) 0 0; }
.reveal::before { content: ''; position: absolute; inset: -10% 10% 0; background: radial-gradient(closest-side, rgba(74, 222, 128, 0.16), transparent); opacity: 0; transition: opacity 0.9s; pointer-events: none; }
.reveal.final::before { opacity: 1; }
.odo { position: relative; display: flex; justify-content: center; font: 600 clamp(92px, 19vw, 232px) / 1 var(--sans); letter-spacing: -0.05em; color: var(--text); transition: color 0.5s; }
.reveal.final .odo { color: var(--green); }
.odo number-flow { --number-flow-mask-height: 0.12em; }
.odo number-flow::part(currency) { font-size: 0.42em; margin: 0.34em 0.1em 0 0; color: var(--muted); letter-spacing: 0; transition: color 0.5s; }
.reveal.final .odo number-flow::part(currency) { color: var(--green-deep); }
.reveal-cap { min-height: 1.5em; margin-top: clamp(14px, 2vw, 26px); font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -0.02em; color: var(--soft); }
.reveal.final .reveal-cap { color: var(--text); }
.reveal-cap .chip { margin-right: 10px; vertical-align: 0.14em; }
.buy { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: clamp(26px, 4vw, 40px); }
.cur { display: inline-flex; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cur button { height: 30px; padding: 0 14px; border-radius: 7px; color: var(--soft); }
.cur button[aria-pressed='true'] { background: #1f1f22; color: var(--text); }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); } to { box-shadow: 0 0 0 18px rgba(74, 222, 128, 0); } }
.reveal.final ~ .buy #pay:not([disabled]) { animation: ring 1.4s ease-out 2; }
.replay { color: var(--muted); padding: 6px; }
.replay:hover { color: var(--green); }
.note { color: var(--muted); font-size: 14px; }
.fine { color: var(--soft); max-width: 56ch; margin: clamp(26px, 4vw, 40px) auto 10px; font-size: 16px; }
.again { margin: 26px auto 0; max-width: 520px; border: 1px solid var(--line); border-radius: 14px; text-align: left; }
.again summary { list-style: none; cursor: pointer; padding: 16px 18px; color: var(--soft); font-size: 15px; display: flex; justify-content: space-between; gap: 12px; }
.again summary::-webkit-details-marker { display: none; }
.again summary::after { content: '+'; font-family: var(--mono); color: var(--green); }
.again[open] summary::after { content: '−'; }
.again > p { padding: 0 18px 12px; color: var(--soft); font-size: 15px; }
.again form { display: flex; gap: 10px; padding: 0 18px 14px; }
.again input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: 13px var(--mono); }
.again input::placeholder { color: #55555a; }
code { font-family: var(--mono); font-size: 0.86em; color: var(--green); }

/* ---------- two-up closing cards, and the two-column pages ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo .card { padding: 30px 28px; gap: 14px; }
.duo .card p { color: var(--soft); max-width: 52ch; }
.duo .card a.more { margin-top: auto; padding-top: 8px; color: var(--green); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.duo .card a.more:hover { text-decoration: underline; text-underline-offset: 4px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 88px); }
.split-head > p { color: var(--soft); margin-top: 18px; max-width: 48ch; }
.split-head h2 { max-width: 14ch; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.rules { list-style: none; border-top: 1px solid var(--line); margin-bottom: 40px; }
.rules:last-child { margin-bottom: 0; }
.rules li { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules span { color: var(--green); padding-top: 6px; }
.rules h3 { font-size: 19px; }
.rules p { grid-column: 2; color: var(--soft); font-size: 15px; margin-top: 6px; }
.rules b, .qa b { color: var(--text); font-weight: 500; }
.qa details { border-bottom: 1px solid var(--line); }
.qa details:first-child { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; font-family: var(--mono); color: var(--green); flex: none; }
.qa details[open] summary::after { content: '−'; }
.qa p { color: var(--soft); font-size: 15px; padding: 0 28px 22px 0; max-width: 64ch; }
.contact { margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; }
.contact .who { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.contact a { color: var(--green); }
.contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact .note { margin-top: 12px; }
.dl-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.page-top { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-top h1 { font-size: clamp(40px, 6vw, 76px); max-width: 16ch; }

/* ---------- foot ---------- */
.foot { max-width: var(--max); margin-inline: auto; border-inline: 1px solid var(--line); border-top: 1px solid var(--line); padding: 28px var(--gutter) 40px; color: var(--muted); }
.foot p.small { font-family: var(--sans); font-size: 12px; line-height: 1.6; letter-spacing: 0; text-transform: none; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a:hover { color: var(--text); }

/* sections rise a little as they come into view (only when scripts run) */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .rise.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-top, .split, .duo, .pair { grid-template-columns: 1fr; }
  .tools-row { grid-template-columns: repeat(3, 1fr); }
  .tools-row li:nth-child(4) { border-left: 0; }
  .tools-row li:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .glance { grid-template-columns: 1fr 1fr; }
  .glance > div:nth-child(3) { border-left: 0; }
  .glance > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .grid6 { grid-template-columns: 1fr 1fr; }
  .grid6 > div { border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; }
  .grid6 > div:nth-child(2n + 1) { border-left: 0 !important; }
  .grid6 > div:nth-child(-n + 2) { border-top: 0 !important; }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .split-head h2 { max-width: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid6 { grid-template-columns: 1fr; }
  .grid6 > div { border-left: 0 !important; }
  .grid6 > div:nth-child(2) { border-top: 1px solid var(--line) !important; }
  .stage { border-radius: 18px; }
  .stage-bar { position: static; padding: 12px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .again form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .glance .hot .arc, .reveal.final ~ .buy #pay { animation: none; }
}