:root {
  --ink: #122320;
  --muted: #668078;
  --paper: #f4f1e8;
  --paper-deep: #e8e5d9;
  --lime: #d8ff50;
  --orange: #ff6b45;
  --line: rgba(18, 35, 32, .18);
  --mono: "DM Mono", monospace;
  --display: "Prata", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.55; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-grain { position: fixed; z-index: 30; pointer-events: none; inset: 0; opacity: .24; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E"); }
.site-header { height: 84px; max-width: 1320px; padding: 0 38px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand { color: var(--ink); text-decoration: none; font-size: 20px; letter-spacing: -.07em; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }.brand span { color: var(--orange); }.brand-mark { margin-left: -5px; }.brand-icon { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
nav { display: flex; gap: 28px; margin-left: 110px; } nav a, .footer-admin { color: var(--ink); text-decoration: none; border: 0; background: transparent; padding: 2px 0; font-size: 12px; } nav a:hover, .footer-admin:hover { color: var(--orange); }
.account-trigger { border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 9px 13px; font-size: 11px; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: var(--lime); border: 1px solid var(--ink); border-radius: 50%; vertical-align: 1px; margin-right: 5px; }
.section-shell { max-width: 1320px; padding-left: 38px; padding-right: 38px; margin-left: auto; margin-right: auto; }
.hero { padding-top: 102px; min-height: 770px; }.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; color: var(--muted); }
.hero-layout { display: grid; grid-template-columns: 1fr 290px; gap: 24px; margin-top: 36px; align-items: end; }.hero h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.055em; line-height: .98; }.hero h1 { font-size: clamp(65px, 9.3vw, 136px); }.hero em, h2 em { color: var(--orange); font-style: italic; }
.hero-aside { padding-bottom: 12px; }.hero-aside p { max-width: 235px; margin: 0 0 29px; font-size: 13px; }.primary-button { width: auto; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 13px 16px; font-size: 12px; transition: transform .2s, background .2s; }.primary-button:hover { transform: translate(-3px,-3px); box-shadow: 4px 4px 0 var(--orange); }.primary-button span { color: var(--lime); margin-left: 24px; }.wide { width: 100%; margin-top: 25px; }
.signal-board { position: relative; margin-top: 96px; padding: 26px 0 42px; min-height: 158px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px; }.signal-node { display: flex; align-items: center; gap: 12px; font-size: 11px; }.node-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }.node-square { font-size: 32px; line-height: 12px; color: var(--lime); }.node-arrow { font-size: 22px; }.signal-line { height: 1px; background: var(--ink); opacity: .42; }.signal-line.late { background-image: linear-gradient(to right, var(--ink) 55%, transparent 0); background-size: 8px 1px; background-repeat: repeat-x; }.board-caption { position: absolute; bottom: 12px; right: 0; margin: 0; font-size: 10px; color: var(--muted); }
.split-section { padding-top: 120px; padding-bottom: 140px; }.steps { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 50px; border-top: 1px solid var(--ink); }.steps article { padding: 20px 26px 0 0; min-height: 280px; border-right: 1px solid var(--line); }.steps article+article { padding-left: 26px; }.steps article:last-child { border: 0; }.steps span { color: var(--orange); font-size: 11px; }.steps h2 { margin-top: 58px; font-size: clamp(36px, 4.2vw, 56px); }.steps p { margin: 25px 0 0; max-width: 240px; color: var(--muted); font-size: 12px; }
.plans-section { padding-top: 90px; padding-bottom: 125px; background: var(--ink); color: var(--paper); max-width: none; padding-left: max(38px, calc((100% - 1244px)/2)); padding-right: max(38px, calc((100% - 1244px)/2)); }.section-topline { display: flex; justify-content: space-between; align-items: flex-start; }.plans-section .eyebrow { color: #aebcb4; }.muted { color: #aebcb4; margin: 0; max-width: 365px; font-size: 11px; }.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 52px; background: rgba(244,241,232,.3); }.plan-card { min-height: 375px; padding: 21px; background: var(--ink); position: relative; display: flex; flex-direction: column; }.plan-card.featured { background: var(--lime); color: var(--ink); }.plan-meta { display: flex; justify-content: space-between; color: #aebcb4; font-size: 10px; }.featured .plan-meta { color: var(--ink); opacity: .65; }.plan-card h2 { margin-top: 52px; font-size: 47px; }.price { margin: 24px 0 6px; font-family: var(--display); font-size: 42px; letter-spacing: -.06em; }.price small { font-family: var(--mono); font-size: 14px; }.plan-card > p:not(.price) { margin: 0; max-width: 205px; color: #aebcb4; font-size: 11px; }.featured > p:not(.price) { color: var(--ink); opacity: .72; }.text-button { border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; align-self: flex-start; padding: 0 0 3px; margin-top: auto; font-size: 12px; }.text-button:hover { color: var(--orange); }.flag { position: absolute; top: 55px; right: 21px; font-size: 10px; text-transform: uppercase; }
.system-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: end; padding-top: 140px; padding-bottom: 140px; }.system-copy h2, .help-grid h2 { margin: 30px 0 27px; font-size: clamp(48px, 5.6vw, 76px); }.system-copy > p:last-child { max-width: 387px; color: var(--muted); font-size: 12px; }.architecture { border: 1px solid var(--ink); padding: 25px; display: grid; grid-template-columns: 1fr 88px 1fr; align-items: center; }.arch-box { border: 1px solid var(--ink); min-height: 130px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; }.arch-title { font-size: 14px; }.app-box { background: var(--lime); }.vpn-box { background: var(--paper-deep); }.arch-link { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 8px; text-align: center; }.arch-link i { width: 60px; height: 1px; background: var(--ink); position: relative; }.arch-link i:after { content: '›'; position: absolute; right: -1px; top: -12px; font-style: normal; font-size: 17px; }
.help-section { padding-top: 104px; padding-bottom: 130px; border-top: 1px solid var(--line); }.help-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 80px; }.faq-list { border-top: 1px solid var(--ink); }.faq-list details { border-bottom: 1px solid var(--line); padding: 19px 0; }.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; font-size: 12px; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--orange); font-size: 18px; line-height: 13px; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-width: 460px; margin: 13px 0 0; color: var(--muted); font-size: 12px; }
footer { max-width: 1320px; margin: auto; min-height: 140px; padding: 28px 38px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 25px; align-items: start; } footer p { margin: 0; max-width: 420px; color: var(--muted); font-size: 10px; } .footer-admin { text-align: right; }
.overlay { position: fixed; z-index: 40; inset: 0; background: rgba(18,35,32,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }.overlay.active { opacity: 1; pointer-events: auto; }.side-panel { position: fixed; z-index: 41; top: 0; right: 0; width: min(500px, 100vw); height: 100%; overflow: auto; background: var(--paper); padding: 92px 39px 40px; transform: translateX(103%); transition: transform .35s cubic-bezier(.2,.75,.2,1); box-shadow: -8px 0 0 var(--ink); }.side-panel.active { transform: translateX(0); }.side-panel h2 { margin-top: 31px; font-size: clamp(48px, 7vw, 67px); }.close-button { width: 30px; height: 30px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 24px; line-height: 20px; position: absolute; right: 28px; top: 28px; }.choice { position: relative; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-top: 1px solid var(--line); padding: 16px 0; cursor: pointer; }.choice:first-of-type { margin-top: 39px; }.choice:last-of-type { border-bottom: 1px solid var(--line); }.choice input { position: absolute; opacity: 0; }.choice b, .choice small { display: block; }.choice b { font-size: 12px; }.choice small { color: var(--muted); font-size: 10px; margin-top: 3px; }.choice i { width: 17px; height: 17px; border: 1px solid var(--ink); border-radius: 50%; }.choice input:checked + span + i { box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 9px var(--orange); background: var(--orange); }.input-label { display: block; color: var(--muted); margin-top: 26px; font-size: 10px; }.input-label input { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; padding: 10px 0; color: var(--ink); background: transparent; font-size: 12px; }.input-label input:focus { border-color: var(--orange); }.form-note { color: var(--muted); font-size: 10px; margin-top: 17px; }.account-card { border: 1px solid var(--ink); margin: 34px 0 0; padding: 18px; }.account-card > div { color: var(--muted); text-transform: uppercase; font-size: 9px; }.account-card strong { display: block; margin-top: 48px; font-family: var(--display); font-size: 28px; font-weight: 400; letter-spacing: -.04em; }.account-card p { font-size: 11px; color: var(--muted); margin: 15px 0 0; }.telegram-callout { display: flex; gap: 12px; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 17px; }.telegram-callout span { color: var(--orange); }.telegram-callout p { margin: 0; font-size: 10px; }.telegram-callout b { font-size: 11px; color: var(--ink); }.admin-panel { background: var(--ink); color: var(--paper); }.admin-panel .close-button { color: var(--paper); border-color: var(--paper); }.admin-panel .eyebrow { color: #aebcb4; }.admin-tabs { display: flex; gap: 3px; margin-top: 38px; border-bottom: 1px solid rgba(244,241,232,.3); }.admin-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #aebcb4; padding: 10px 8px; font-size: 10px; }.admin-tabs button.active { color: var(--lime); border-color: var(--lime); }.admin-view { display: none; padding-top: 23px; }.admin-view.active { display: block; }.admin-hint { color: #aebcb4; font-size: 11px; }.empty-state { border: 1px dashed rgba(244,241,232,.35); padding: 30px 15px; color: #aebcb4; font-size: 11px; }.node-row { display: flex; gap: 9px; padding: 14px 0; border-bottom: 1px solid rgba(244,241,232,.25); }.node-row .status-dot { margin-top: 3px; }.node-row b, .node-row small { display: block; }.node-row b { font-size: 11px; font-weight: 500; }.node-row small { color: #aebcb4; margin-top: 3px; font-size: 9px; }.tariff-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(244,241,232,.25); padding: 13px 0; font-size: 11px; }.admin-panel .text-button { color: var(--paper); margin-top: 25px; }.toast { position: fixed; z-index: 50; bottom: 22px; left: 50%; transform: translate(-50%, 130px); background: var(--ink); color: var(--paper); padding: 12px 16px; font-size: 11px; box-shadow: 4px 4px 0 var(--orange); transition: transform .3s; }.toast.active { transform: translate(-50%, 0); }
.reveal { animation: rise .8s both cubic-bezier(.2,.7,.2,1); }.delay-1 { animation-delay: .1s; }.delay-2 { animation-delay: .2s; }.delay-3 { animation-delay: .32s; } @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) { .site-header { height: 68px; padding: 0 20px; }.site-header nav { display: none; }.section-shell { padding-left: 20px; padding-right: 20px; }.hero { padding-top: 68px; min-height: 670px; }.hero-layout { grid-template-columns: 1fr; margin-top: 25px; }.hero h1 { font-size: clamp(53px, 16vw, 80px); }.hero-aside { margin-top: 18px; }.hero-aside p { max-width: 290px; }.signal-board { margin-top: 64px; grid-template-columns: 1fr; gap: 7px; }.signal-line { width: 1px; height: 24px; margin-left: 39px; }.signal-line.late { background-image: linear-gradient(to bottom, var(--ink) 55%, transparent 0); background-size: 1px 8px; background-repeat: repeat-y; }.board-caption { right: auto; left: 0; bottom: 10px; max-width: 240px; }.split-section { padding-top: 75px; padding-bottom: 85px; }.steps { grid-template-columns: 1fr; }.steps article, .steps article+article { min-height: 202px; padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }.steps h2 { margin-top: 28px; font-size: 42px; }.plans-section { padding: 70px 20px 75px; }.section-topline { display: block; }.muted { margin-top: 17px; }.plan-grid { grid-template-columns: 1fr; }.plan-card { min-height: 310px; }.system-section, .help-grid { grid-template-columns: 1fr; gap: 38px; padding-top: 80px; padding-bottom: 80px; }.architecture { grid-template-columns: 1fr; gap: 12px; }.arch-link { flex-direction: row; }.arch-link i { width: 70px; }.help-section { padding-top: 74px; padding-bottom: 80px; } footer { grid-template-columns: 1fr; padding: 24px 20px; gap: 16px; } .footer-admin { text-align: left; }.side-panel { padding: 75px 23px 30px; }.close-button { right: 19px; top: 19px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { animation: none; }.side-panel, .overlay, .toast, .primary-button { transition: none; } }