:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #0b0d10;
  --surface: #15191e;
  --surface-2: #1b2026;
  --text: #f5f7f9;
  --muted: #9099a4;
  --line: #293039;
  --accent: #ff6a2a;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 92% 5%, rgba(255, 106, 42, .13), transparent 34%), var(--bg); }
button, a { -webkit-tap-highlight-color: transparent; }

.shell {
  width: min(100%, 680px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.brand { display: flex; align-items: center; gap: 14px; }
.logout { margin-left: auto; }
.logout button { min-height: 40px; padding: 0 14px; border: 1px solid #3c444e; border-radius: 13px; background: #15191e; color: #b8c0ca; font: inherit; font-size: .78rem; font-weight: 750; }
.mark { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid #3c444e; border-radius: 15px; background: linear-gradient(145deg, #222831, #101317); color: var(--accent); font-size: 1.05rem; font-weight: 900; letter-spacing: -.04em; box-shadow: inset 0 1px rgba(255,255,255,.07); }
.kicker { margin: 0 0 2px; color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.035em; }

.intro { padding: clamp(54px, 9vh, 92px) 2px 28px; }
.status { margin: 0 0 18px; color: #aab2bc; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.status span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #6ee7a2; box-shadow: 0 0 0 5px rgba(110,231,162,.08); }
.intro h2 { max-width: 430px; margin: 0; font-size: clamp(2.45rem, 11vw, 4.5rem); line-height: .96; letter-spacing: -.065em; }
.intro > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 1rem; }

.services { display: grid; gap: 14px; }
.service-card { min-height: 186px; padding: 22px; border: 1px solid var(--line); border-radius: 26px; color: inherit; text-decoration: none; }
.service-card.news, .service-card.vpn, .service-card.downloader { position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(142deg, #20262d, #14181d 72%); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.service-card.news::after, .service-card.vpn::after, .service-card.downloader::after { content: ""; position: absolute; right: -62px; bottom: -80px; width: 190px; height: 190px; border: 30px solid rgba(255,106,42,.09); border-radius: 50%; pointer-events: none; }
.service-card.vpn { background: linear-gradient(142deg, #182c32, #12191d 72%); }
.service-card.vpn::after { border-color: rgba(75,210,180,.09); }
.service-card.vpn .service-icon { background: #62d6b5; }
.service-card.vpn .service-state { color: #62d6b5; }
.service-card.downloader { background: linear-gradient(142deg, #25213a, #151521 72%); }
.service-card.downloader::after { border-color: rgba(145,126,255,.1); }
.service-card.downloader .service-icon { background: #9b8cff; }
.service-card.downloader .service-state { color: #b1a6ff; }
.service-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 11px; }
.quota-reset { position: relative; z-index: 1; min-height: 44px; padding: 10px 14px; margin-bottom: 10px; border: 1px solid #77718f; border-radius: 12px; background: #272138; color: #f6f4ff; font: inherit; cursor: pointer; }
.quota-reset:disabled { opacity: .5; cursor: wait; }
.quota-reset:focus-visible { outline: 2px solid #ffcc66; outline-offset: 3px; }
.service-metrics > span { min-width: 0; padding: 12px 10px; border: 1px solid rgba(177,166,255,.17); border-radius: 16px; background: rgba(9,9,18,.28); }
.service-metrics strong, .service-metrics small { display: block; }
.service-metrics strong { color: #f6f4ff; font-size: clamp(1.25rem, 6vw, 1.65rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.service-metrics small { min-height: 2.4em; margin-top: 7px; color: #9f98bd; font-size: .66rem; font-weight: 750; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
.metrics-note { position: relative; z-index: 1; margin: 0 2px 14px !important; color: #77718f !important; font-size: .72rem !important; }
.service-topline { display: flex; justify-content: space-between; align-items: flex-start; }
.service-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--accent); color: #121417; }
.service-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.open-arrow { color: #b8bec6; font-size: 1.55rem; }
.service-copy { margin: 28px 0 24px; }
.service-state { color: var(--accent); font-size: .69rem; font-weight: 900; letter-spacing: .16em; }
.service-card h3 { margin: 6px 0 7px; font-size: 1.6rem; letter-spacing: -.035em; }
.service-card p { margin: 0; max-width: 360px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.service-action { position: relative; z-index: 1; margin-top: auto; display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 17px; border-radius: 17px; background: #f4f6f8; color: #11151a; font-size: .94rem; font-weight: 800; }
.service-action b { font-size: 1.25rem; }
.news:active, .vpn:active, .downloader:active { transform: scale(.985); }
.news:focus-visible, .vpn:focus-visible, .downloader:focus-visible, .install:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

.upcoming { min-height: 92px; display: flex; align-items: center; gap: 16px; border-style: dashed; background: rgba(21,25,30,.48); }
.upcoming .plus { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border: 1px solid #383f48; border-radius: 15px; color: #7d8792; font-size: 1.6rem; }
.upcoming h3 { margin: 0 0 3px; color: #b3bac3; font-size: 1rem; }
.upcoming p { font-size: .84rem; }

.install { width: 100%; min-height: 58px; margin-top: 14px; border: 1px solid #3a424c; border-radius: 18px; background: #1a1f25; color: white; font: inherit; font-weight: 800; }
.install span { margin-right: 8px; color: var(--accent); }
footer { margin-top: auto; padding: 30px 3px 2px; display: flex; justify-content: space-between; color: #626b76; font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

@media (min-width: 620px) {
  .shell { padding-inline: 28px; }
  .services { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .service-card.downloader { grid-column: 1 / -1; }
  .service-card.downloader .service-copy { max-width: 480px; }
  .service-card.downloader .service-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.public-services { margin-top: clamp(32px, 7vh, 64px); }
.public-services h2 { margin: 6px 0 12px; font-size: clamp(1.9rem, 7vw, 2.7rem); letter-spacing: -.04em; }
.service-action { text-decoration: none; }
.service-action:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (max-width: 380px) { .public-services .service-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }