/* NexNode landing. Hand-written, no build step: the page used to compile
   Tailwind in the browser from a CDN script. Brand: graphite metal, ice-steel
   type, one node-blue for anything that can be pressed, circuit traces from
   the logo. Logical properties throughout, so one sheet serves fa and en. */

@font-face { font-family: 'Shabnam'; font-weight: 400; font-display: swap; src: url('/static/fonts/shabnam-400.woff2') format('woff2'); }
@font-face { font-family: 'Shabnam'; font-weight: 500 600; font-display: swap; src: url('/static/fonts/shabnam-500.woff2') format('woff2'); }
@font-face { font-family: 'Shabnam'; font-weight: 700; font-display: swap; src: url('/static/fonts/shabnam-700.woff2') format('woff2'); }

:root {
  --graphite: #14181d;
  --deep: #0e1216;
  --panel: #1a2028;
  --panel-2: #202833;
  --hairline: rgba(176, 196, 214, 0.13);
  --hairline-strong: rgba(176, 196, 214, 0.24);
  --steel: #dbe4ec;
  --text: #b9c6d2;
  --mute: #8d9aa8;
  --node: #38bdf8;
  --node-soft: #7dd3fc;
  --node-ink: #06202d;
  --live: #4ade80;
  --sans: 'Shabnam', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --latin: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--graphite); color: var(--text);
  font-family: var(--sans); font-size: 1rem; line-height: 1.85;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html[lang="en"] body { font-family: var(--latin); line-height: 1.65; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--node); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-family: var(--latin); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 100; padding: .4rem .9rem;
  background: var(--node); color: var(--node-ink); border-radius: 8px; font-weight: 700; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.9rem; padding: .55rem 1.35rem; border-radius: 12px;
  font-weight: 700; font-size: .98rem; line-height: 1.3; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--node); color: var(--node-ink); box-shadow: 0 10px 28px -12px rgba(56, 189, 248, .75); }
.btn-primary:hover { background: var(--node-soft); box-shadow: 0 14px 34px -12px rgba(56, 189, 248, .9); }
.btn-ghost { border-color: var(--hairline-strong); color: var(--steel); }
.btn-ghost:hover { border-color: var(--node); color: #fff; background: rgba(56, 189, 248, .07); }
.btn-sm { min-height: 2.35rem; padding: .35rem .95rem; font-size: .9rem; border-radius: 10px; }
.btn-lg { min-height: 3.3rem; padding: .7rem 1.7rem; font-size: 1.05rem; border-radius: 14px; }

/* ---------- header ---------- */
.top {
  position: sticky; inset-block-start: 0; z-index: 50;
  border-block-end: 1px solid transparent;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}
.top.scrolled, .top.open {
  background: rgba(17, 21, 26, .86); border-block-end-color: var(--hairline);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.top-row { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--latin); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.brand img { height: 1.75rem; width: auto; }
.brand span {
  background: linear-gradient(180deg, #f0f4f8 0%, #c2ccd6 45%, #8f9aa6 78%, #cfd8e0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav { display: none; align-items: center; gap: 1.15rem; margin-inline-start: 1rem; font-size: .9rem; font-weight: 500; color: var(--text); }
.nav a { position: relative; padding-block: .4rem; white-space: nowrap; transition: color .2s; }
.nav a::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px;
  background: var(--node); transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.nav .sep { width: 1px; height: 1.1rem; background: var(--hairline-strong); }
.live-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--live); margin-inline-end: .45rem; vertical-align: middle; animation: live 2.4s ease-in-out infinite; }
@keyframes live { 0%, 100% { box-shadow: 0 0 5px rgba(74, 222, 128, .5); } 50% { box-shadow: 0 0 13px 3px rgba(74, 222, 128, .85); } }
.actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.actions .btn-ghost, .actions .btn-primary { display: none; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; color: var(--mute); transition: color .2s, background-color .2s; }
.iconbtn:hover { color: var(--node-soft); background: rgba(255, 255, 255, .05); }
.iconbtn svg { width: 1.35rem; height: 1.35rem; }
.mobile-nav { display: none; padding-block: .5rem 1.25rem; border-block-start: 1px solid var(--hairline); }
.top.open .mobile-nav { display: block; animation: drop .28s var(--ease) both; }
.mobile-nav a { display: flex; align-items: center; padding-block: .6rem; color: var(--text); border-block-end: 1px solid var(--hairline); }
.mobile-nav a:last-child { border: 0; }
.mobile-nav a:hover { color: #fff; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 30rem) { .actions .btn-ghost { display: inline-flex; } }
@media (min-width: 48rem) { .actions .btn-primary { display: inline-flex; } }
/* From 75rem the row has the wrap's full width (72rem): the nav is shown only
   where it has all of it. test_landing.py checks the three parts never overlap. */
@media (min-width: 75rem) {
  .nav { display: flex; }
  #menuToggle, .mobile-nav, .top.open .mobile-nav { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; margin-block-start: -4.25rem; padding-block: calc(4.25rem + clamp(2.5rem, 7vw, 5.5rem)) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 55% at 78% 0%, rgba(56, 189, 248, .16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(9, 12, 16, .9), transparent 70%);
  /* Fades out before the hero ends, so its bottom edge is not a line across the page. */
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
html[dir="rtl"] .hero::before { transform: scaleX(-1); }
.hero-grid { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
/* The logo's circuit traces, leaving the calculator for the margins: drawn and
   still. Until October 2026 the hero had a grid and four lines with glowing
   packets falling down them forever, which the owner found annoying. The box
   hangs off the grid's end edge, so the traces keep their place against the
   calculator at any width; the SVG notes which part of it the calculator covers. */
@media (min-width: 62rem) {
  .hero-grid::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset-block-start: -120px; inset-inline-end: -200px; width: 760px; height: 820px;
    background: url('/static/img/hero-traces.v1.svg') no-repeat 0 0 / 760px 820px;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 140px);
    mask-image: linear-gradient(to left, transparent, #000 140px);
  }
  html[dir="rtl"] .hero-grid::before { transform: scaleX(-1); }
  .hero--solo .hero-grid::before { display: none; }
}
@media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero--solo .hero-grid { grid-template-columns: minmax(0, 46rem); }
.hero h1 { color: #fff; font-weight: 700; font-size: clamp(2.15rem, 5.4vw, 3.9rem); line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
html[lang="en"] .hero h1 { font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.lede { margin-block-start: 1.25rem; max-width: 34rem; font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--text); }
.cta-row { margin-block-start: 1.75rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .cta-row { margin-block-start: 2rem; }
/* A tick drawn from two borders, so nothing to load and nothing to mirror. */
.hero-points { margin-block-start: 1.5rem; display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; font-size: .9rem; color: var(--text); }
.hero-points li { display: inline-flex; align-items: center; gap: .6rem; }
.hero-points li::before { content: ''; flex: none; width: .38rem; height: .7rem; margin-block-start: -.25rem; border: solid var(--node); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* One orchestrated entrance, on load, and nothing after it competes. */
.hero h1, .lede, .hero .cta-row, .hero-points { animation: rise .8s var(--ease) both; }
.lede { animation-delay: .08s; }
.hero .cta-row { animation-delay: .18s; }
.hero-points { animation-delay: .28s; }
.meter { animation: rise .9s var(--ease) .2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- the meter: what a server costs for as long as you keep it ---------- */
.meter {
  position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--hairline-strong); border-radius: 22px; padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(56, 189, 248, .05), 0 0 90px -30px rgba(56, 189, 248, .35);
}
.meter::before {
  content: ''; position: absolute; inset-inline: 1.5rem; inset-block-start: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--node), transparent); opacity: .7;
}
.meter-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--steel); font-weight: 700; font-size: 1.02rem; }
.meter-title small { font-weight: 400; font-size: .8rem; color: var(--mute); }
.meter-label { margin-block: 1.35rem .6rem; font-size: .85rem; color: var(--mute); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .6rem .8rem; text-align: start;
  border: 1px solid var(--hairline); border-radius: 12px; background: rgba(255, 255, 255, .02);
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.chip:hover { border-color: var(--hairline-strong); }
.chip[aria-pressed="true"] { border-color: var(--node); background: rgba(56, 189, 248, .09); }
.chip-size { color: var(--steel); font-size: .92rem; font-weight: 700; }
/* The flag and its place as one unit; a long name is cut, never wrapped under the flag. */
.chip-where { display: flex; align-items: center; gap: .4rem; max-width: 100%; font-size: .78rem; color: var(--mute); }
.chip-where span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-where .flag { width: 1.05rem; height: .78rem; border-radius: 2px; }
.chip.sk { height: 3.6rem; }

.range { width: 100%; margin: 0; height: 1.75rem; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; --fill: 20%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to left, var(--node) var(--fill), rgba(176, 196, 214, .18) var(--fill)); }
html[dir="ltr"] .range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--node) var(--fill), rgba(176, 196, 214, .18) var(--fill)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(176, 196, 214, .18); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--node); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.35rem; height: 1.35rem; margin-top: calc(3px - .675rem); border-radius: 50%; background: #fff; border: 4px solid var(--node); box-shadow: 0 0 0 5px rgba(56, 189, 248, .16); transition: box-shadow .2s; }
.range::-moz-range-thumb { width: .85rem; height: .85rem; border-radius: 50%; background: #fff; border: 4px solid var(--node); box-shadow: 0 0 0 5px rgba(56, 189, 248, .16); }
.range:active::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(56, 189, 248, .2); }
.ticks { display: flex; justify-content: space-between; margin-block-start: .15rem; font-size: .74rem; color: var(--mute); }
.ticks span { flex: 1; text-align: center; transition: color .2s; }
.ticks span:first-child { text-align: start; }
.ticks span:last-child { text-align: end; }
.ticks span.on { color: var(--node-soft); font-weight: 700; }

.readout { margin-block-start: 1.4rem; padding-block-start: 1.25rem; border-block-start: 1px dashed var(--hairline-strong); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.readout-what { font-size: .85rem; color: var(--mute); }
.readout-usd { display: block; color: #fff; font-family: var(--latin); font-weight: 800; font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.readout-irt { display: block; margin-block-start: .2rem; font-size: .9rem; color: var(--steel); min-height: 1.6em; }
.meter-note { margin-block-start: .9rem; font-size: .78rem; color: var(--mute); }
.sk { position: relative; overflow: hidden; background: rgba(176, 196, 214, .07); border-radius: 8px; color: transparent !important; }
.sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(176, 196, 214, .1), transparent); animation: sweep 1.4s linear infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- sections ---------- */
.sec { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sec--band { background: var(--deep); border-block: 1px solid var(--hairline); }
/* Two plain sections in a row share one gap, not two. */
.sec:not(.sec--band) + .sec:not(.sec--band) { padding-block-start: 0; }
.sec-head { max-width: 40rem; margin-block-end: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head h2 { color: #fff; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.35; text-wrap: balance; }
html[lang="en"] .sec-head h2 { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.sec-head p { margin-block-start: .6rem; color: var(--mute); font-size: 1.02rem; }

/* Sections fade up as they enter, driven by the scroll itself: no script, so
   a page whose script failed is still a page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
  }
}

/* ---------- plans: a price board, not a wall of cards ---------- */
.board-scroll { border: 1px solid var(--hairline); border-radius: 18px; background: var(--panel); overflow: hidden; }
.board { width: 100%; border-collapse: collapse; font-size: .93rem; }
.board th, .board td { padding: .85rem 1rem; text-align: start; vertical-align: middle; white-space: nowrap; }
.board thead th { font-size: .8rem; font-weight: 500; color: var(--mute); background: rgba(255, 255, 255, .025); border-block-end: 1px solid var(--hairline); }
.board tbody tr { border-block-end: 1px solid var(--hairline); transition: background-color .2s; animation: rowin .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.board tbody tr:last-child { border: 0; }
.board tbody tr:hover { background: rgba(56, 189, 248, .05); }
@keyframes rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.board tbody th { font-weight: 700; color: var(--steel); }
.board tbody th small { display: block; font-weight: 400; font-size: .78rem; color: var(--mute); }
.board .place { display: inline-flex; align-items: center; gap: .5rem; }
.flag { width: 1.3rem; height: .95rem; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.board .price b { display: block; color: #fff; font-family: var(--latin); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir="rtl"] .board .price b { text-align: right; }
.board .price small { display: block; font-size: .76rem; color: var(--mute); }
.board .go { text-align: end; }
.board .sk { display: inline-block; height: 1rem; width: 70%; }
.board-msg { padding: 2.5rem 1rem; text-align: center; color: var(--mute); }
.board-msg a { color: var(--node-soft); text-decoration: underline; text-underline-offset: 3px; }
.board-foot { margin-block-start: .9rem; font-size: .85rem; color: var(--mute); }
.board-foot a { color: var(--node-soft); }
.board-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* On a phone each row is its own small sheet: name and price on top, specs under. */
@media (max-width: 61.99rem) {
  .board-scroll { border: 0; background: none; border-radius: 0; overflow: visible; }
  .board, .board tbody, .board tr, .board th, .board td { display: block; }
  .board thead { display: none; }
  .board tbody { display: grid; gap: .8rem; }
  @media (min-width: 40rem) { .board tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .board tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem 0; align-items: start; padding: 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: 16px; background: var(--panel); }
  .board tbody tr:last-child { border: 1px solid var(--hairline); }
  .board th, .board td { padding: 0; white-space: normal; }
  .board tbody th { grid-column: span 2; font-size: 1.05rem; }
  .board td.loc { grid-column: span 2; justify-self: end; font-size: .88rem; padding-block-start: .15rem; }
  .board td.spec { font-size: .86rem; color: var(--steel); padding-block-start: .6rem; border-block-start: 1px solid var(--hairline); }
  .board td.spec.num { text-align: start; }
  html[dir="rtl"] .board td.spec.num { text-align: right; }
  .board td[data-label]::before { content: attr(data-label); display: block; font-family: var(--sans); font-size: .72rem; color: var(--mute); direction: inherit; }
  html[lang="en"] .board td[data-label]::before { font-family: var(--latin); }
  .board td.price { grid-column: span 2; }
  .board td.go { grid-column: 1 / -1; }
  .board .sk { width: 100%; }
  .board td.go .btn { width: 100%; }
}

/* ---------- datacenters ---------- */
/* Hairlines are each tile's own, so an unfilled last row is plain ground. */
.dcs { display: grid; gap: 1px; border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; }
@media (min-width: 40rem) { .dcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .dcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dc { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem 1.4rem; background: var(--deep); box-shadow: 0 0 0 1px #20262e; transition: background-color .25s; }
.sec:not(.sec--band) .dc { background: var(--graphite); }
.dc::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px; background: var(--node); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
html[dir="rtl"] .dc::before { transform-origin: 100% 50%; }
.dc:hover { background: var(--panel); }
.dc:hover::before, .dc:focus-visible::before { transform: scaleX(1); }
.dc h3 { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--steel); font-size: 1.05rem; font-weight: 700; }
.dc h3 svg { width: 1rem; height: 1rem; color: var(--mute); transition: color .2s, transform .3s var(--ease); flex: none; }
html[dir="rtl"] .dc h3 svg { transform: scaleX(-1); }
.dc:hover h3 svg { color: var(--node); transform: translateX(3px); }
html[dir="rtl"] .dc:hover h3 svg { transform: scaleX(-1) translateX(3px); }
.dc p { font-size: .88rem; color: var(--mute); flex: 1; }
.dc-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-start: .35rem; min-height: 1.4rem; }
.dc-flags { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.dc-flags .more { font-size: .76rem; color: var(--mute); }
.dc-from { font-size: .82rem; color: var(--steel); white-space: nowrap; }
.dc.sk { min-height: 8rem; border-radius: 0; }
.dcs-msg { grid-column: 1 / -1; padding: 2.5rem 1rem; text-align: center; color: var(--mute); background: var(--deep); }

/* ---------- apps: what a server can come with ---------- */
/* Marks are one sprite (img/landing-apps.v1.svg) drawn in currentColor: steel at
   rest, the app's own hue on hover, so fourteen brands do not shout at once.
   --brand is set per tile, lifted where the brand's own is too dark for this
   ground. The two leads wear theirs from the start. */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 40rem) { .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .apps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.app {
  --brand: var(--node);
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--hairline); border-radius: 16px; background: var(--panel);
  transition: border-color .25s, transform .3s var(--ease);
}
.app .mark { width: 1.7rem; height: 1.7rem; margin-block-end: .7rem; fill: currentColor; color: var(--steel); transition: color .25s; }
.app h3 { font-family: var(--latin); color: var(--steel); font-size: .98rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.app h3 small { margin-inline-start: .25rem; font-size: .78em; font-weight: 500; color: var(--mute); }
.app p { margin-block-start: .2rem; font-size: .8rem; line-height: 1.6; color: var(--mute); }
.app:hover { border-color: var(--hairline-strong); border-color: color-mix(in srgb, var(--brand) 50%, transparent); transform: translateY(-2px); }
.app:hover .mark { color: var(--brand); }
.app--lead { --glow-x: 0%; grid-column: span 2; padding: 1.4rem 1.45rem 1.5rem; }
html[dir="rtl"] .app--lead { --glow-x: 100%; }
@supports (background: color-mix(in srgb, red, blue)) {
  .app--lead { background: radial-gradient(90% 120% at var(--glow-x) 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%), var(--panel); }
}
@media (min-width: 62rem) { .app--lead { grid-column: span 3; } }
.app--lead .mark { width: 2.6rem; height: 2.6rem; margin-block-end: 1rem; color: var(--brand); }
.app--lead h3 { font-size: 1.2rem; }
.app--lead p { margin-block-start: .35rem; max-width: 34rem; font-size: .92rem; line-height: 1.75; color: var(--text); }
html[lang="en"] .app--lead p { line-height: 1.6; }
.apps-foot { margin-block-start: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.apps-more { max-width: 44rem; font-size: .92rem; color: var(--mute); }
/* Each name its own run, so the Farsi list keeps its order around the commas. */
.apps-more b { font-family: var(--latin); font-weight: 600; color: var(--steel); unicode-bidi: isolate; }

/* ---------- how it works: three steps, and they are a sequence ---------- */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.steps li { position: relative; padding-block-start: 1.4rem; border-block-start: 1px solid var(--hairline-strong); counter-increment: step; }
.steps li::before { content: ''; position: absolute; inset-block-start: -4px; inset-inline-start: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--node); box-shadow: 0 0 12px 2px rgba(56, 189, 248, .6); }
.steps li::after { content: counter(step); position: absolute; inset-block-start: 1.1rem; inset-inline-end: 0; font-family: var(--latin); font-weight: 800; font-size: 2.6rem; line-height: 1; color: rgba(176, 196, 214, .1); }
.steps h3 { color: var(--steel); font-size: 1.12rem; font-weight: 700; }
.steps p { margin-block-start: .4rem; max-width: 22rem; font-size: .93rem; color: var(--mute); }

.facts { margin-block-start: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 0 3rem; }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .1rem 1rem; padding-block: 1.25rem; border-block-start: 1px solid var(--hairline); }
.facts svg { grid-row: span 2; width: 1.6rem; height: 1.6rem; margin-block-start: .25rem; color: var(--node); }
.facts h3 { color: var(--steel); font-weight: 700; font-size: 1rem; }
.facts p { font-size: .92rem; color: var(--mute); }

/* ---------- figures ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; background: var(--hairline); gap: 1px; }
@media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats div { padding: 1.6rem 1.25rem; background: var(--panel); text-align: center; }
.sec--band .stats div { background: var(--graphite); }
.stats b { display: block; color: #fff; font-family: var(--latin); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.2; font-variant-numeric: tabular-nums; direction: ltr; }
.stats span { font-size: .88rem; color: var(--mute); }

/* ---------- API ---------- */
.api { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .api { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.api .sec-head { margin-block-end: 1.5rem; }
.term { direction: ltr; text-align: left; border: 1px solid var(--hairline-strong); border-radius: 16px; background: #0b0e12; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(56, 189, 248, .3); }
.term-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid var(--hairline); background: rgba(255, 255, 255, .03); }
.term-bar i { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(176, 196, 214, .22); }
.term-bar span { margin-left: auto; font-family: var(--mono); font-size: .74rem; color: var(--mute); }
.term pre { margin: 0; padding: 1.1rem 1.2rem 1.3rem; font-family: var(--mono); font-size: .8rem; line-height: 1.75; color: var(--text); overflow-x: auto; }
.term .c { color: var(--mute); }
.term .k { color: var(--node-soft); }
.term .s { color: #fcd9a0; }
.term .req { display: inline-block; overflow: hidden; white-space: pre; vertical-align: bottom; }
.term .caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 1px; background: var(--node); vertical-align: text-bottom; opacity: 0; }
.term.armed .req { max-width: 0; }
.term.armed .res { opacity: 0; transform: translateY(6px); }
.term.run .req { max-width: 60ch; transition: max-width 1.5s steps(34, end); }
.term.run .req2 { transition-delay: 1.5s; transition-duration: 1.3s; }
.term.run .caret { animation: blink .9s steps(1) 3.3; }
.term.run .res { opacity: 1; transform: none; transition: opacity .5s 3s, transform .5s var(--ease) 3s; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; border-block-start: 1px solid var(--hairline-strong); }
.faq details { border-block-end: 1px solid var(--hairline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; cursor: pointer; list-style: none; color: var(--steel); font-weight: 700; font-size: 1.02rem; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary::after { content: ''; flex: none; width: .6rem; height: .6rem; border-inline-end: 2px solid var(--node); border-block-end: 2px solid var(--node); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p { padding-block-end: 1.25rem; max-width: 44rem; color: var(--text); font-size: .96rem; }
.faq details a { color: var(--node-soft); text-decoration: underline; text-underline-offset: 3px; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .35s var(--ease), opacity .35s, content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- closing ---------- */
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 2.75rem); border: 1px solid var(--hairline-strong); border-radius: 22px; background: linear-gradient(120deg, rgba(56, 189, 248, .12), transparent 55%), var(--panel); }
.closing h2 { color: #fff; font-weight: 700; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.4; }
.closing p { margin-block-start: .3rem; color: var(--mute); }
.closing .cta-row { margin: 0; animation: none; }

/* ---------- footer ---------- */
.foot { padding-block: 3rem 2rem; border-block-start: 1px solid var(--hairline); background: var(--deep); font-size: .9rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)) auto; } }
.foot-about p { margin-block-start: .75rem; max-width: 22rem; color: var(--mute); }
.foot h3 { margin-block-end: .7rem; font-size: .85rem; font-weight: 500; color: var(--mute); }
.foot li + li { margin-block-start: .35rem; }
.foot li a { color: var(--text); transition: color .2s; }
.foot li a:hover { color: var(--node-soft); }
.seals { display: flex; align-items: center; gap: 1rem; }
.seals a { display: block; border-radius: 10px; transition: opacity .2s; }
.seals a:hover { opacity: .85; }
.seals img { height: 85px; width: auto; border-radius: 10px; }
.foot-base { margin-block-start: 2.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: var(--mute); font-size: .84rem; }
.foot-base a { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); }
.foot-base a:hover { color: var(--node-soft); }
.foot-base svg { width: 1rem; height: 1rem; }

/* ---------- floating: the order button on a phone, and the way back up ---------- */
.sticky-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: rgba(14, 18, 22, .92); border-block-start: 1px solid var(--hairline); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateY(110%); transition: transform .4s var(--ease); }
.sticky-cta .btn { width: 100%; }
.sticky-cta.show { transform: none; }
@media (min-width: 48rem) { .sticky-cta { display: none; } }
@media (max-width: 47.99rem) { .foot { padding-block-end: 6rem; } }
.to-top { position: fixed; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; z-index: 44; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--hairline-strong); color: var(--steel); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s var(--ease), color .2s, border-color .2s; }
.to-top svg { width: 1.1rem; height: 1.1rem; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { color: var(--node); border-color: var(--node); }
@media (max-width: 47.99rem) { .to-top { inset-block-end: 5rem; } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--graphite); }
::-webkit-scrollbar-thumb { background: #2d3742; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .term.armed .req { max-width: none; }
  .term.armed .res { opacity: 1; transform: none; }
}