/* noxium.tech: our own website (patron 31.10). Same language as the tenant login: deep dark, turquoise, the prism N.
   The network, the grid and the glows sit fixed behind the whole page (patron: "the dots should be everywhere"). */
:root {
  --bg: #03070a;
  --surface: #071219;
  --line: rgb(34 211 238 / 0.14);
  --line-2: rgb(34 211 238 / 0.3);
  --text: #e6f6fa;
  --muted: #8fb3bc;
  --dim: #5f8590;
  --accent: #22d3ee;
  --accent-2: #67e8f9;
  --accent-3: #3b82f6;
  --ink: #03242b;
  --glass: linear-gradient(180deg, rgb(11 28 36 / 0.82), rgb(5 14 19 / 0.82));
  --radius: 16px;
  --max: 1180px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  counter-reset: sec;
  overflow-x: hidden;
}
/* Phones pan the page sideways when anything sticks out, body's overflow-x notwithstanding (31.10, the template
   showcase's glow): every top-level part keeps its own sideways overflow. */
body > header, body > section, body > footer { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgb(34 211 238 / 0.35); color: #fff; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; }
.kicker.num::before { counter-increment: sec; content: "0" counter(sec) " //"; color: var(--dim); letter-spacing: 0.12em; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.1; letter-spacing: -0.02em; margin-top: 12px; background: linear-gradient(180deg, #fff 35%, #9cdbe9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); }

/* Behind the page: network, grid, slow glows */
#net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx .grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(34 211 238 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(34 211 238 / 0.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 25%, transparent 85%); mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 25%, transparent 85%); }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); }
.o1 { width: 560px; height: 560px; left: -180px; top: -200px; background: rgb(34 211 238 / 0.2); animation: drift1 26s ease-in-out infinite alternate; }
.o2 { width: 480px; height: 480px; right: -180px; top: 35%; background: rgb(59 130 246 / 0.15); animation: drift2 32s ease-in-out infinite alternate; }
.o3 { width: 440px; height: 440px; left: 35%; bottom: -260px; background: rgb(20 184 166 / 0.13); animation: drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(140px, 100px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-150px, -90px) scale(1.1); } }
header, section, footer, .ticker { position: relative; z-index: 1; }

/* Corner brackets, like a screen overlay */
.hud::after { content: ""; position: absolute; inset: 7px; pointer-events: none; --c: rgb(103 232 249 / 0.6);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 10px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 10px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 10px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 10px,
    linear-gradient(var(--c), var(--c)) 0 100% / 10px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 10px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 10px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 10px;
  background-repeat: no-repeat; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); background: rgb(3 8 11 / 0.62); border-bottom: 1px solid var(--line); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(34 211 238 / 0.55), transparent); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.32em; font-size: 16px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--muted); }
.nav-links a { position: relative; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.on { color: var(--accent-2); }
.nav-links a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 12px; font-family: var(--mono); }
.lang a { padding: 4px 10px; color: var(--muted); }
.lang a.on { background: rgb(34 211 238 / 0.14); color: var(--accent-2); }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 11px; font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s, box-shadow 0.25s, background 0.25s, border-color 0.25s; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(135deg, #67e8f9, #22d3ee 45%, #0ea5e9); color: var(--ink); box-shadow: 0 0 0 1px rgb(165 243 252 / 0.45) inset, 0 10px 34px -10px rgb(34 211 238 / 0.9); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.5) 50%, transparent 70%); transform: translateX(-130%); transition: transform 0.7s; }
.btn-primary:hover { box-shadow: 0 0 0 1px rgb(165 243 252 / 0.6) inset, 0 14px 44px -8px rgb(34 211 238 / 1); }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-ghost { border-color: rgb(34 211 238 / 0.4); color: #cfeff5; background: rgb(34 211 238 / 0.05); }
.btn-ghost:hover { background: rgb(34 211 238 / 0.12); border-color: var(--accent); box-shadow: 0 0 24px -8px var(--accent); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; height: 36px; width: 40px; }

/* Hero */
.hero { padding: 104px 0 84px; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(34 211 238 / 0.32); border-radius: 999px; padding: 5px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent-2); background: rgb(4 13 17 / 0.75); box-shadow: 0 0 30px -12px var(--accent); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }
.hero h1 { font-size: clamp(38px, 6.4vw, 76px); line-height: 1.04; letter-spacing: -0.03em; margin: 24px auto 0; max-width: 980px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #a5f3fc, #22d3ee 25%, #3b82f6 50%, #22d3ee 75%, #a5f3fc); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite; filter: drop-shadow(0 0 26px rgb(34 211 238 / 0.35)); }
@keyframes shine { to { background-position: -200% 0; } }
.hero .lead { max-width: 660px; margin: 22px auto 0; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.emblem { margin: 0 auto 8px; width: 96px; height: 96px; position: relative; filter: drop-shadow(0 0 28px rgb(34 211 238 / 0.35)); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 60px; }
.stat { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; background: var(--glass); }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: -60%; height: 50%; background: linear-gradient(transparent, rgb(34 211 238 / 0.09), transparent); animation: scan 6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes scan { to { top: 120%; } }
.stat b { display: block; font-family: var(--mono); font-size: clamp(24px, 3.2vw, 36px); font-weight: 600; background: linear-gradient(180deg, #fff 40%, #7fe3f3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: 14px; }

/* Capability ticker */
.ticker { border-block: 1px solid var(--line); background: rgb(3 10 13 / 0.6); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker .track { display: flex; width: max-content; animation: tick 45s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 30px; padding: 17px 15px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.24em; color: var(--muted); white-space: nowrap; }
.ticker span::after { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes tick { to { transform: translateX(-50%); } }

/* Sections */
section { padding: 104px 0; }
.head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.head .lead { margin-top: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); padding: 26px; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -60%), rgb(34 211 238 / 0.15), transparent 60%); opacity: 0; transition: opacity 0.3s; }
.card:hover::before { opacity: 1; }
.card:hover { border-color: rgb(34 211 238 / 0.45); transform: translateY(-4px); box-shadow: 0 26px 60px -30px rgb(34 211 238 / 0.6); }
.card .icw { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, rgb(34 211 238 / 0.2), rgb(59 130 246 / 0.08)); border: 1px solid rgb(34 211 238 / 0.32); box-shadow: inset 0 0 22px -6px rgb(34 211 238 / 0.55); }
.card svg.ic { width: 25px; height: 25px; color: var(--accent-2); }
.card .idx { position: absolute; top: 24px; right: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--dim); }
.card h3 { font-size: 19px; margin-top: 18px; }
.card p { color: var(--muted); margin: 8px 0 0; font-size: 15px; }

/* Original games: the providers running past in two rows */
.vendors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vrow { display: flex; gap: 12px; width: max-content; animation: tick 70s linear infinite; }
.vrow.rev { animation-direction: reverse; animation-duration: 80s; }
.vendors:hover .vrow { animation-play-state: paused; }
.vrow span { padding: 14px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); font-size: 17px; font-weight: 600; letter-spacing: 0.01em; color: #a9cdd6; white-space: nowrap; transition: color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.vrow span:hover { color: #fff; border-color: rgb(34 211 238 / 0.5); box-shadow: 0 0 24px -8px var(--accent); }
.vmore { text-align: center; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }

/* Payments: crypto path and the bank transfer log */
.pay { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); padding: 28px; }
.panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 100% 0%, rgb(34 211 238 / 0.12), transparent 70%); }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tag { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(34 211 238 / 0.06); font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--accent); }
.coins { display: flex; gap: 6px; flex-wrap: wrap; }
.coins span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255 255 255 / 0.05); font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff; }
.coins i { margin-left: 5px; font-style: normal; font-weight: 400; color: var(--muted); }
.panel h3 { font-size: 24px; margin-top: 16px; }
.ticks { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 10px; color: var(--muted); font-size: 15px; }
.ticks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border: 1px solid rgb(34 211 238 / 0.45); border-radius: 50%; background: rgb(34 211 238 / 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.chain { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 22px; padding: 18px 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(2 8 11 / 0.7); }
.chain .line { position: absolute; left: 12.5%; right: 12.5%; top: 40px; height: 1px; background: linear-gradient(90deg, rgb(34 211 238 / 0.25), rgb(34 211 238 / 0.6), rgb(52 211 153 / 0.6)); }
.chain .line i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #a5f3fc; box-shadow: 0 0 12px 3px rgb(34 211 238 / 0.8); animation: travel 3.2s linear infinite; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 7px); } }
.node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.node .ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: #04121a; color: var(--accent-2); animation: lit 3.2s linear infinite; animation-delay: calc(var(--k) * 1.07s); }
.node .ic svg { width: 20px; height: 20px; }
.node:nth-child(4) .ic { color: #34d399; border-color: rgb(52 211 153 / 0.5); }
.node small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
@keyframes lit { 0%, 30%, 100% { box-shadow: none; } 4%, 16% { box-shadow: 0 0 22px -2px rgb(34 211 238 / 0.85); border-color: var(--accent); } }
.log { display: grid; gap: 9px; min-height: 128px; margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(2 8 11 / 0.85); font-family: var(--mono); font-size: 12.5px; }
.lr { display: flex; align-items: center; gap: 10px; color: #b6dbe3; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s, transform 0.4s; }
.lr.in { opacity: 1; transform: none; }
.lr .t { color: var(--dim); }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.dot.c { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot.a { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.dot.g { background: #34d399; box-shadow: 0 0 8px #34d399; }

/* Our own technology: a panel drawn in lines */
.own { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; }
.dash { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius); background: rgb(3 10 13 / 0.92); box-shadow: 0 40px 100px -50px rgb(34 211 238 / 0.6); }
.dash-body { display: grid; grid-template-columns: 54px minmax(0, 1fr); }
.dash aside { display: grid; align-content: start; justify-items: center; gap: 12px; padding: 14px 0; border-right: 1px solid var(--line); background: rgb(8 20 26 / 0.6); }
.dash aside b { width: 24px; height: 24px; margin-bottom: 6px; border-radius: 7px; background: linear-gradient(135deg, #67e8f9, #0e7490); box-shadow: 0 0 14px -2px var(--accent); }
.dash aside i { width: 22px; height: 22px; border-radius: 7px; background: rgb(255 255 255 / 0.06); }
.dash aside i.on { background: rgb(34 211 238 / 0.25); box-shadow: 0 0 12px -2px var(--accent); }
.dash-main { display: grid; align-content: start; gap: 12px; padding: 16px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgb(8 20 26 / 0.7); }
.kpi small, .chart small { display: block; font-size: 11px; color: var(--muted); }
.kpi svg { display: block; width: 100%; height: 30px; margin-top: 6px; overflow: visible; }
.kpi polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 300; stroke-dashoffset: 300; filter: drop-shadow(0 0 3px rgb(34 211 238 / 0.7)); }
.dash.in polyline { animation: draw 2.2s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart { padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgb(8 20 26 / 0.7); }
.chart .bars { display: flex; align-items: flex-end; gap: 5px; height: 116px; margin-top: 10px; }
.chart .bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), rgb(59 130 246 / 0.3)); opacity: 0.85; transform-origin: bottom; animation: bar 2.8s ease-in-out infinite alternate; animation-delay: var(--dl); }
@keyframes bar { from { transform: scaleY(0.6); } to { transform: scaleY(1); } }
.rows { display: grid; gap: 8px; }
.rows div { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border-radius: 8px; background: rgb(255 255 255 / 0.03); }
.rows b { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.rows span { height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.09); }

/* Templates: a showcase, the light around it in the picked template's colours */
@property --a { syntax: "<color>"; inherits: true; initial-value: #22d3ee; }
@property --b { syntax: "<color>"; inherits: true; initial-value: #0e7490; }
.show { position: relative; isolation: isolate; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; --cycle: 5s; }
.show, .show.reveal { transition: --a 0.9s, --b 0.9s, opacity 0.8s ease, transform 0.8s ease; }
.show::before { content: ""; position: absolute; inset: -90px -70px; z-index: -1; pointer-events: none; background: radial-gradient(42% 55% at 66% 42%, color-mix(in srgb, var(--a) 24%, transparent), transparent 70%), radial-gradient(30% 32% at 76% 76%, color-mix(in srgb, var(--b) 22%, transparent), transparent 70%); }
.picker { position: relative; display: grid; gap: 6px; }
.pick { position: relative; overflow: hidden; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(6 16 21 / 0.72); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s; }
.pick:hover { border-color: color-mix(in srgb, var(--a) 45%, transparent); transform: translateX(3px); }
.pick:focus-visible { outline: 1px solid var(--a); outline-offset: 2px; }
.pick .num { font-family: var(--mono); font-size: 11.5px; color: var(--dim); transition: color 0.25s; }
.pick:hover .num, .pick.on .num { color: var(--a); }
.pick .nm { display: grid; line-height: 1.25; min-width: 0; }
.pick b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pick small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; border-radius: 2px; background: var(--a); box-shadow: 0 0 10px var(--a); opacity: 0; transition: opacity 0.25s; }
.pick.on { border-color: color-mix(in srgb, var(--a) 65%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 18%, rgb(6 16 21 / 0.8)), rgb(6 16 21 / 0.8) 75%); box-shadow: 0 0 32px -14px var(--a); }
.pick.on::before { opacity: 1; }
.pick .bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--a), var(--b)); box-shadow: 0 0 8px var(--a); }
.pick.on .bar { animation: fill var(--cycle) linear forwards; }
.show.hold .pick.on .bar, .show.off .pick.on .bar { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.stage { perspective: 1800px; }
.frame { position: relative; border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); border-radius: 14px; overflow: hidden; background: #000; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.4s ease; box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--a) 75%, transparent), 0 0 70px -24px color-mix(in srgb, var(--a) 55%, transparent); }
.frame-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: linear-gradient(180deg, #0d1a20, #071015); border-bottom: 1px solid var(--line); }
.frame-bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #1d3640; }
.frame-bar i:first-child { background: var(--a); box-shadow: 0 0 8px var(--a); }
.frame-bar .url { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 24px; min-width: 42%; margin: 0 auto; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 0.04); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.frame-bar .url svg { width: 12px; height: 12px; color: var(--a); }
.frame-bar .count { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--dim); }
.screen { position: relative; aspect-ratio: 16 / 10; background: #000; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.025); transition: opacity 0.7s ease, transform 1.4s ease; }
.screen img.on { opacity: 1; transform: none; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / 0.07), transparent 32%); }
.info { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.info h3 { font-size: 26px; letter-spacing: -0.01em; }
.info p { margin: 2px 0 0; color: var(--muted); }
.info .actions { display: flex; gap: 10px; }
.info .btn-primary { background: var(--a); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25) inset, 0 10px 34px -10px var(--a); }
.swatch { display: inline-flex; height: 10px; width: 42px; border-radius: 3px; overflow: hidden; }
.swatch i { flex: 1; }

/* Partnership: steps on a line, a setup running in a terminal */
.flow { display: grid; grid-template-columns: 1fr 1.08fr; gap: 24px; align-items: stretch; }
.steps { position: relative; display: grid; gap: 14px; }
.steps::before { content: ""; position: absolute; left: 40px; top: 36px; bottom: 36px; width: 1px; background: linear-gradient(var(--accent), rgb(59 130 246 / 0.5), transparent); box-shadow: 0 0 8px var(--accent); }
.step { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 18px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--glass); }
.step .n { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--accent); background: #04121a; color: var(--accent-2); font-family: var(--mono); font-size: 12px; box-shadow: 0 0 18px -3px rgb(34 211 238 / 0.7); }
.step h3 { font-size: 19px; }
.step p { color: var(--muted); margin: 4px 0 0; font-size: 15px; }
.term { position: relative; display: flex; flex-direction: column; min-height: 330px; border: 1px solid var(--line-2); border-radius: var(--radius); background: rgb(2 8 11 / 0.9); overflow: hidden; box-shadow: 0 30px 80px -40px rgb(34 211 238 / 0.6); }
.term::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgb(34 211 238 / 0.03) 3px 4px); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgb(8 20 26 / 0.85); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #1d3640; }
.term-bar i:first-child { background: rgb(34 211 238 / 0.7); box-shadow: 0 0 8px var(--accent); }
.term-bar span { margin-left: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); }
.term pre { flex: 1; margin: 0; padding: 20px 22px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.95; color: #b6dbe3; white-space: pre; }
.term .p { color: var(--accent); }
.term .ok { color: #34d399; }
.term .k { color: #fff; }
.term .d { color: var(--dim); }
.term .go { color: var(--accent-2); text-shadow: 0 0 12px rgb(34 211 238 / 0.6); }
.term .cur { display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Security */
.sec { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.checks { display: grid; gap: 12px; }
.check { position: relative; display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--glass); transition: border-color 0.25s, transform 0.25s; }
.check:hover { border-color: rgb(34 211 238 / 0.4); transform: translateX(4px); }
.check svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; filter: drop-shadow(0 0 6px rgb(34 211 238 / 0.6)); }
.check b { display: block; font-size: 16px; }
.check span { color: var(--muted); font-size: 14.5px; }

/* Application */
.apply { position: relative; border: 1px solid rgb(34 211 238 / 0.32); border-radius: 20px; background: linear-gradient(180deg, rgb(9 26 33 / 0.94), rgb(4 13 17 / 0.94)); padding: clamp(24px, 4vw, 44px); overflow: hidden; box-shadow: 0 40px 100px -50px rgb(34 211 238 / 0.55); }
.apply-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
.tg { display: grid; justify-items: start; gap: 12px; margin-top: 28px; }
.tg .btn svg { width: 18px; height: 18px; }
form .f { display: grid; gap: 6px; margin-bottom: 14px; }
form label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; color: #7ea2ab; text-transform: uppercase; }
form input, form select, form textarea { width: 100%; border: 1px solid rgb(34 211 238 / 0.2); background: rgb(3 10 13 / 0.9); color: #fff; border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(34 211 238 / 0.15), 0 0 24px -8px var(--accent); }
form textarea { min-height: 96px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { margin-top: 12px; font-size: 14.5px; }
.msg.ok { color: #6ee7b7; }
.msg.err { color: #fca5a5; }
.run { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.run rect { fill: none; stroke: var(--accent); stroke-linecap: round; filter: drop-shadow(0 0 3px rgb(34 211 238 / 0.8)); animation: run 7s linear infinite; }
@keyframes run { from { stroke-dashoffset: var(--o) } to { stroke-dashoffset: calc(var(--o) - 100) } }

footer { border-top: 1px solid var(--line); background: rgb(3 8 11 / 0.7); padding: 28px 0 36px; color: var(--dim); font-size: 13px; }
footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); }
footer a:hover { color: var(--accent-2); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1140px) {
  .nav .wrap { gap: 18px; }
  .nav-links { gap: 15px; font-size: 13.5px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgb(4 9 12 / 0.97); border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 20px; border-top: 1px solid var(--line); }
  .nav-links a.on::after { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .nav .cta { display: none; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .show::before { inset: -60px 0; }
  .picker { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
  .picker::-webkit-scrollbar { display: none; }
  .pick { grid-template-columns: auto auto; padding: 9px 14px; }
  .pick:hover { transform: none; }
  .pick .num, .pick small { display: none; }
  .sec, .apply-grid, .flow, .pay, .own { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  section { padding: 68px 0; }
  .grid3, .two { grid-template-columns: 1fr; }
  .info { flex-direction: column; align-items: stretch; gap: 14px; }
  .info .actions .btn { flex: 1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: 22px; }
  .node small { font-size: 11px; }
  .vrow span { padding: 11px 18px; font-size: 15px; }
  .frame-bar .url { min-width: 0; }
  .hero { padding: 64px 0 52px; }
  .term pre { font-size: 11.5px; padding: 16px; white-space: pre-wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pill .dot, .run rect, .orb, .stat::before, .ticker .track, .hero h1 em, .term .cur, .pick.on .bar, .vrow, .chain .line i, .node .ic, .chart .bars i { animation: none; }
  .kpi polyline { stroke-dashoffset: 0; }
}