@font-face{font-family:Routix;src:url(/static/Inter-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--bg:#070c13;--base:#070c13;--subtle:#0c131d;--surface:#101925;--surface-strong:#142131;--border:#293848;--text:#edf3fa;--accent:#8dc5ff;--text-muted:#a9b9cc}
body{font-family:Routix,Inter,sans-serif;background:#070c13;color:#edf3fa}
button,input,select,textarea{font-family:inherit}
.header{background:#0b121cf5;border-bottom:1px solid #263545;box-shadow:none}
.header-inner,.container{max-width:1240px}
.logo{letter-spacing:-.05em}.logo-img{border-radius:28%}.nav-links a.active{background:#233549;color:#d9ecff}
body .hero.tab-panel.active{display:grid;grid-template-columns:1.14fr 1fr;align-items:center;gap:30px;padding:clamp(28px,5vw,76px);margin:32px 0;background:radial-gradient(ellipse at 84% 42%,#1c3b59 0,transparent 51%),#101924;border:1px solid #304153;border-radius:32px;overflow:hidden}
.hero .hero-content{position:relative;z-index:1;text-align:left}
.hero h1{font-size:clamp(44px,6vw,86px);line-height:1.03;letter-spacing:-.065em;margin:0 0 24px;color:#f3f7fb}
.hero-content p{max-width:45ch;color:#b5c4d4;font-size:clamp(16px,1.4vw,20px);line-height:1.6}
.route-art{display:block;width:100%;overflow:visible}.route-art .pulse{stroke-dasharray:4 96;animation:traffic 6s linear infinite}.route-art .slow{animation-delay:-3s}
@keyframes traffic{to{stroke-dashoffset:-100}}
.access-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-facts{display:flex;gap:24px;margin-top:32px;border-top:1px solid #344253;padding-top:20px;flex-wrap:wrap}.hero-facts strong,.hero-facts small{display:block}.hero-facts strong{font-size:20px}.hero-facts small{color:#aab8c8}
.section.tab-panel{background:transparent;border:0;box-shadow:none;padding:clamp(16px,3vw,44px) 0}
.section>h2{font-size:clamp(32px,5vw,62px);letter-spacing:-.055em;line-height:1.08;margin-bottom:24px}
.section .card,.purchase-item,.section .plan-mini{background:linear-gradient(145deg,#172331,#0d151f);border:1px solid #304051;border-radius:20px;padding:clamp(18px,2.5vw,32px);box-shadow:none}
.section .plan-mini.featured{background:linear-gradient(145deg,#213f60,#122031);border-color:#6899cb}
.section .price{font-family:inherit;letter-spacing:-.06em;font-size:clamp(30px,3vw,46px)}
body .btn-primary{color:#071523;background:#a6d1ff;border:1px solid transparent;border-radius:12px;font-weight:700}
body .btn-ghost{color:#dae9f8;background:#172432;border:1px solid #415165;border-radius:12px}
input:not([type=checkbox]),select{background:#0a121c;color:#edf3fa;border-color:#39495a}
:focus-visible{outline:2px solid #a6d1ff;outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.tab-panel.active{animation:enter .32s ease-out both}.plan,button{transition:transform .2s,background-color .2s}@media(hover:hover){.plan:hover{transform:translateY(-4px)}button:hover{filter:brightness(1.08)}}}
@keyframes enter{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:760px){body .hero.tab-panel.active{grid-template-columns:1fr;margin:16px 0;padding:24px;gap:10px}.route-art{max-height:175px}.hero-facts{gap:18px}.nav-links{overflow-x:auto}.section .plans-grid{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}