:root { --asphalt:#0b0b0c; --graphite:#151517; --line:#2a2a2e; --blue:#0065f1; --cyan:#00a8e1; --ink:#f5f5f6; --muted:#a7a7ad; color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(850px 420px at 88% -4%,rgba(0,101,241,.24),transparent 63%),var(--asphalt); line-height:1.55; }
a { color:inherit; }
.site-header, main, footer { width:min(calc(100% - 40px),72rem); margin:auto; }
.site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { text-decoration:none; display:inline-flex; align-items:center; gap:.72rem; min-width:205px; color:#fff; font-weight:850; letter-spacing:-.045em; font-size:1.32rem; line-height:1; }
.brand > img { width:42px; height:42px; object-fit:contain; }
nav { display:flex; gap:1rem; color:var(--muted); font-size:.92rem; } nav a { text-decoration:none; }
main { padding:5rem 0; }.hero { padding:1rem 0 5rem; }.hero-grid { min-height:520px; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(330px,.98fr); align-items:center; gap:2.4rem; }.eyebrow { color:var(--cyan); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:.65rem 0 1.4rem; max-width:11ch; font-size:clamp(3rem,7vw,5.75rem); line-height:.93; letter-spacing:-.075em; text-wrap:balance; }
h2 { font-size:clamp(1.75rem,3.5vw,2.7rem); line-height:1.05; letter-spacing:-.045em; }.lede, article p, footer { color:var(--muted); max-width:48rem; font-size:1.05rem; }
.actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.7rem 1rem; border:1px solid var(--line); border-radius:13px; text-decoration:none; font-weight:750; }.primary { background:var(--blue); border-color:var(--blue); color:white; }
.hero-note { margin-top:1.2rem; color:var(--muted); font-size:.92rem; }.hero-art { position:relative; min-height:420px; display:grid; place-items:center; overflow:hidden; }.hero-glow { position:absolute; width:390px; height:390px; border-radius:50%; background:radial-gradient(circle,rgba(0,168,225,.28),rgba(0,101,241,.08) 46%,transparent 70%); filter:blur(6px); }.monitor-card { position:relative; z-index:1; width:min(390px,94%); border:1px solid rgba(116,184,255,.35); background:linear-gradient(145deg,rgba(18,29,42,.96),rgba(7,12,20,.96)); border-radius:22px; padding:18px; box-shadow:0 28px 75px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08); transform:rotate(-3deg); }.monitor-top,.signal-row { display:flex; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.09em; color:#9fb4c9; }.status-dot { width:8px; height:8px; border-radius:50%; background:#25d6b7; box-shadow:0 0 14px #25d6b7; }.timer { margin-left:auto; color:#fff; }.route { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; margin:18px 0; padding:15px; border-radius:15px; background:rgba(0,101,241,.18); border:1px solid rgba(0,168,225,.25); }.route-pin { width:18px; height:18px; border:3px solid var(--cyan); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }.route strong,.route small { display:block; }.route strong { font-size:.92rem; }.route small { color:#9fb4c9; font-size:.75rem; margin-top:3px; }.route b { color:var(--cyan); font-size:1.6rem; }.signal-row i { height:1px; background:#38536d; flex:1; }.signal-good { color:#25d6b7; }.signal-bars { height:52px; margin-top:16px; display:flex; align-items:end; gap:7px; }.signal-bars em { display:block; flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(#00a8e1,#0065f1); }.signal-bars em:nth-child(1){height:27%}.signal-bars em:nth-child(2){height:52%}.signal-bars em:nth-child(3){height:38%}.signal-bars em:nth-child(4){height:84%}.signal-bars em:nth-child(5){height:64%}
.section { padding:3.25rem 0; border-top:1px solid rgba(255,255,255,.08); }.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; }.cards article { padding:1.25rem; background:var(--graphite); border:1px solid var(--line); border-radius:18px; }.cards h3 { margin:.1rem 0 .5rem; } .cards p { margin:0; font-size:.96rem; }
.support-layout { display:grid; grid-template-columns:minmax(0,.72fr) minmax(360px,1.28fr); gap:3rem; align-items:start; }.support-layout h2 { margin-top:0; }.support-form { display:grid; gap:1rem; padding:1.5rem; border:1px solid rgba(255,255,255,.10); border-radius:20px; background:rgba(21,21,23,.88); }.support-form label { display:grid; gap:.45rem; color:#e7edf6; font-weight:700; font-size:.9rem; }.support-form input,.support-form select,.support-form textarea { width:100%; color:var(--ink); background:#0d1015; border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:.78rem .85rem; font:inherit; line-height:1.45; resize:vertical; }.support-form input:focus,.support-form select:focus,.support-form textarea:focus { outline:2px solid rgba(0,168,225,.75); outline-offset:2px; border-color:transparent; }.support-form .button { justify-self:start; cursor:pointer; }.support-form .button:disabled { cursor:not-allowed; opacity:.56; }.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.turnstile-status { min-height:1.2rem; color:var(--muted); font-size:.88rem; }.form-note { margin:0; color:var(--muted); font-size:.88rem; }.notice { margin-top:1.4rem; max-width:720px; padding:1rem 1.1rem; border-left:3px solid var(--cyan); background:rgba(0,168,225,.08); color:#c9d7e7; border-radius:0 12px 12px 0; }
footer { padding:2rem 0 3rem; border-top:1px solid rgba(255,255,255,.08); font-size:.9rem; } footer a { color:var(--cyan); }
@media (max-width:720px) { .site-header,main,footer { width:min(calc(100% - 32px),72rem); }.site-header nav { display:none; }.hero-grid { display:block; min-height:0; }.hero-art { min-height:355px; margin-top:1.2rem; }.cards,.support-layout { grid-template-columns:1fr; }.support-layout { gap:1.4rem; }.support-form { padding:1.15rem; } main { padding:3.2rem 0; } }
@media (max-width:420px) { .site-header { min-height:74px; gap:.45rem; }.brand { min-width:0; gap:.5rem; font-size:1.05rem; white-space:nowrap; }.brand > img { width:34px; height:34px; }.language { display:flex; gap:0; }.language button { padding-inline:.42rem; } }