/* Image-led Platega composition, adapted to FixErrorVPN's green identity.
   Product displays are image assets; the black cabinet UI is never recolored. */
:root {
  --bg: #080c09;
  --panel: #111813;
  --panel-2: #1c271e;
  --text: #f2f6ef;
  --muted: #acb9a9;
  --line: #a5c2a32e;
  --accent: #a4ef76;
  --accent-hover: #bafc93;
  --accent-ink: #10200e;
  --accent-soft: #203a25;
  --blue: var(--accent);
  --blue-hover: var(--accent-hover);
  --gutter: 20px;
}
[data-theme=light] {
  --bg: #f4f7ef;
  --panel: #ffffff;
  --panel-2: #e9f0e3;
  --text: #18271a;
  --muted: #52634c;
  --line: #29492930;
  --accent-soft: #e0efd4;
}
body { font-size: 15px; line-height: 1.65; }
.shell { width: min(1600px, calc(100% - 24px)); }
.section { margin-top: 16px; padding-block: 52px; }
.header { min-height: 80px; gap: 12px; }
.brand-mark { background: var(--accent); color: var(--accent-ink); }
.brand-vpn { color: var(--accent); }
[data-theme=light] .brand-vpn { color: #36782f; }
.button { gap: 16px; font-size: 14px; min-height: 52px; border-radius: 12px; }
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: var(--accent-hover); }
.hero { padding-block: 40px 24px; gap: 28px; border: 1px solid var(--line); background: radial-gradient(ellipse at 98% 0, #345b2860, transparent 60%), radial-gradient(ellipse at 4% 100%, #163a2770, transparent 60%), var(--bg); }
.hero h1 { font-size: clamp(34px, 8.8vw, 58px); line-height: 1.12; letter-spacing: -.055em; }
.hero h1 > span { color: var(--accent); }
.hero-text { font-size: 16px; line-height: 1.7; max-width: 35ch; }
.hero-copy > .eyebrow { font-size: 9px; letter-spacing: .13em; }
.hero-mini-services { margin-block: 24px; }
.hero-mini-services img { width: 40px; height: 40px; }
.hero-stage { min-height: 0; gap: 12px; padding: 0; }
.hero-phone-render { width: min(520px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; }
.hero-stage figcaption { max-width: 38ch; margin: 0; font-size: 10px; line-height: 1.6; }
.trial-note { font-size: 12px; }
.workspace { gap: 28px; padding-block: 36px; background: radial-gradient(ellipse at 90% 100%, #416a353c, transparent 70%), var(--panel); }
.workspace h2, .support h2 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.18; }
.workspace-copy p, .support-copy > p { font-size: 14px; line-height: 1.7; }
.workspace-visual { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.generated-workspace { width: 100%; height: auto; object-fit: contain; }
.workspace-visual figcaption { position: static; font-size: 10px; line-height: 1.7; }
.center-heading h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.2; }
.center-heading > p { font-size: 14px; }
.applications { background: var(--panel); }
.application-grid { gap: 16px; }
.application-card { padding: 26px 22px; background: var(--bg); border-radius: 24px; }
.application-card h3 { font-size: 26px; line-height: 1.18; }
.application-card > p { font-size: 12px; line-height: 1.7; }
.category-art { display: flex; flex-direction: column; gap: 16px; width: 100%; height: auto; min-height: 0; margin: 20px auto 22px; }
.category-render { display: block; width: min(260px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; }
.category-icons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; }
.category-icons img { width: 42px; height: 42px; object-fit: contain; padding: 9px; background: #f7faf3; border: 1px solid #dce8d4; border-radius: 12px; }
.category-icons img[src$="openai.svg"] { padding: 8px; }
.category-caption { min-height: 38px; font-size: 11px; line-height: 1.7; }
.ticker-app { font-size: 13px; }
.ticker-app img { width: 24px; height: 24px; }
.server-grid { gap: 16px; }
.server-card { gap: 20px; background: radial-gradient(ellipse at 100% 10%, #5a954645, transparent 70%), #183520; border-color: #a4ef7636; }
.server-world { background: radial-gradient(ellipse at 100% 10%, #75b65338, transparent 65%), #24472b; }
.server-russia { background: #142e1d; }
.server-special { background: #1e3a27; }
.server-card .server-art, .devices-art { filter: none; mix-blend-mode: normal; }
.server-copy h3 { font-size: 26px; line-height: 1.2; }
.country-tags { gap: 8px; }
.country-tags > span { font-size: 11px; padding: 6px 8px; }
.server-footnote { font-size: 12px; }
.blue-panel { background: #101610; color: #f2f6ef; border: 1px solid #a5c2a32e; }
.blue-panel .center-heading > p { color: #b6c3b0; font-size: 15px; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 24px 16px; align-items: center; padding: 26px 22px; border-radius: 24px; background: #191f19; color: #f2f6ef; border-color: #475442; }
.plan-premium { background: #1d2b1d; border-color: #80a968; }
.plan-title { grid-column: 1 / -1; grid-row: 1; }
.plan-title h3 { font-size: 28px; }
.plan-title > span { font-size: 10px; background: #253122; color: #cbdcc1; border-color: #617257; }
.plan-price { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 2px; }
.plan-price strong { font-size: clamp(36px, 4vw, 58px); line-height: 1.15; }
.plan-price > span { color: #b6c3b0; font-size: 13px; }
.plan-details { grid-column: 1 / -1; grid-row: 3; gap: 12px; margin: 0; }
.plan-details li { font-size: 13px; color: #c8d3c2; }
.plan-details .icon { color: #a4ef76; }
.plan > .button { grid-column: 1 / -1; grid-row: 4; font-size: 13px; background: #273327; border-color: #718768; color: #f2f6ef; }
.plan > .button:hover { background: #354735; }
.plan-premium > .button { background: #a4ef76; color: #10200e; border-color: #a4ef76; }
.plan-premium > .button:hover { background: #bafc93; }
.tariff-image { grid-column: 2; grid-row: 2; width: 100%; max-width: 210px; height: auto; margin: 0; justify-self: end; box-shadow: none; }
.packs-heading > span, .pricing-note { font-size: 12px; color: #b6c3b0; }
.traffic-pack { background: #1c261d; color: #f2f6ef; border-color: #52644a; }
.traffic-pack:hover { background: #2c3c2d; }
.step-card { padding: 24px 22px 20px; background: var(--panel); }
.step-card > div:first-child { flex-wrap: wrap; gap: 12px; }
.step-card h3 { font-size: 18px; }
.step-card > p { font-size: 13px; min-height: 0; }
.step-image { display: grid; place-items: center; height: auto; min-height: 0; padding-top: 20px; overflow: visible; }
.step-image > img { width: 230px; height: auto; max-width: 100%; aspect-ratio: 1; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.step-plan > img { width: 270px; aspect-ratio: auto; border-radius: 14px; margin-block: 36px; }
.client-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 250px; margin: 32px auto 16px; padding: 0; min-height: 160px; }
.client-apps > span { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.client-apps img { width: 84px; height: 84px; border-radius: 20px; object-fit: contain; }
.client-apps strong { font-size: 14px; font-weight: 500; }
.facts { padding-block: 40px 64px; }
.fact-grid strong { font-size: 42px; }
.fact-grid p { font-size: 12px; }
.devices-art { width: 100%; max-width: 850px; margin: 0 auto 26px; height: auto; }
.devices .center-heading { margin-bottom: 24px; }
.platform-grid article { padding: 22px 10px; }
.platform-grid h3 { font-size: 13px; }
.platform-grid p { font-size: 11px; }
.support { padding-block: 40px; }
.support-art { min-height: 0; align-self: center; }
.generated-support { width: min(250px, 100%); height: auto; object-fit: contain; }
.support-copy .button { font-size: 13px; }
.detail-card { padding: 16px 16px 24px; }
.detail-card h3 { font-size: 20px; }
.detail-card p { font-size: 13px; }
.detail-image { background: #101310; }
.faq-list summary { min-height: 76px; font-size: 14px; padding: 20px; }
.faq-list details > p { font-size: 13px; padding: 0 20px 22px; }
.faq-list summary > span { flex-shrink: 0; }
.final { padding-block: 40px; gap: 24px; background: #e1f1d6; }
.final h2 { font-size: clamp(36px, 4.5vw, 60px); }
.final-visual { min-height: 0; padding: 0; align-self: center; }
.generated-final { width: min(450px, 100%); height: auto; }
.footer-links a { min-height: 44px; font-size: 12px; }
.footer-links > div > span, .footer-top > div > p { font-size: 12px; }
.footer-bottom { font-size: 11px; }
.account-dialog { max-width: 480px; border-radius: 28px; }
.auth-subtitle, .auth-help { font-size: 12px; }
.auth-tabs { gap: 8px; }
.auth-tabs button, .auth-form > label { font-size: 13px; }
.auth-form { gap: 12px; }
.auth-form input { height: 52px; }
.auth-submit { margin-top: 12px; font-size: 13px; }
.auth-legal a { min-height: 44px; display: inline-flex; align-items: center; }
.auth-legal > span { display: inline-flex; align-items: center; }
.auth-legal { font-size: 11px; }
.telegram-auth { font-size: 13px; }
[data-theme=light] .hero { background: radial-gradient(ellipse at 100% 0, #cbe8bb88, transparent 65%), var(--bg); }
[data-theme=light] .workspace { background: radial-gradient(ellipse at 90% 100%, #d5eac8, transparent 70%), var(--panel); }
[data-theme=light] .blue-panel { background: #eaf0e3; color: #18271a; border-color: #b5c6a7; }
[data-theme=light] .blue-panel .center-heading > p,
[data-theme=light] .packs-heading > span, [data-theme=light] .pricing-note { color: #52634c; }
[data-theme=light] .plan { background: #fff; color: #18271a; border-color: #bccbb1; }
[data-theme=light] .plan-premium { background: #e1efd5; border-color: #729c59; }
[data-theme=light] .plan-title > span { background: #f4f8ef; color: #52634c; border-color: #b9c9ac; }
[data-theme=light] .plan-price > span, [data-theme=light] .plan-details li { color: #52634c; }
[data-theme=light] .plan-details .icon { color: #36782f; }
[data-theme=light] .plan > .button { background: #18391e; border-color: #18391e; color: #f2f6ef; }
[data-theme=light] .plan > .button:hover { background: #29542d; }
[data-theme=light] .plan-premium > .button { background: #a4ef76; border-color: #80b85c; color: #10200e; }
[data-theme=light] .plan-premium > .button:hover { background: #bafc93; }
[data-theme=light] .traffic-pack { background: #fff; color: #18271a; border-color: #b5c6a7; }
[data-theme=light] .traffic-pack:hover { background: #f4f8ef; }

/* Shared styling for the existing standalone login/register/verification flow. */
.login-page::before { background: radial-gradient(ellipse at 12% 35%, #28512d70, transparent 58%), radial-gradient(ellipse at 95% 90%, #2d49263d, transparent 55%); }
.login-page::after { background-image: radial-gradient(#a6c39a29 1px, transparent 1px); background-size: 24px 24px; }
.login-header { min-height: 80px; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 1480px; margin-inline: auto; padding: 12px 16px 40px; align-items: start; }
.login-card { justify-self: center; order: 0; width: 100%; max-width: 500px; padding: 28px 22px; background: var(--panel); box-shadow: 0 24px 90px #0002; }
.login-story { order: 1; display: grid; justify-items: center; gap: 20px; width: 100%; padding: 16px 8px; text-align: center; }
.login-story h2 { max-width: 14ch; font-size: clamp(30px, 6vw, 58px); line-height: 1.15; letter-spacing: -.05em; }
.login-story h2 > span { color: var(--accent); }
[data-theme=light] .login-story h2 > span { color: #36782f; }
.login-story > p { max-width: 40ch; color: var(--muted); font-size: 14px; }
.login-story > img { width: min(300px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; }
.login-story-note { font-size: 11px; color: var(--muted); line-height: 1.7; }
.login-lock { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.login-tabs { gap: 8px; }
.login-tabs [aria-selected=true] { background: var(--accent); color: var(--accent-ink); }
.login-tabs button, .web-access-form label { font-size: 13px; }
.web-access-form { gap: 18px; }
.web-access-form input { min-height: 52px; border-color: color-mix(in srgb, var(--muted) 60%, var(--panel-2)); }
.web-access-form input:focus-visible { outline-color: #80c259; }
.web-access-form .button { font-size: 14px; }
.login-help, .web-access-form small, .login-telegram > p { font-size: 12px; line-height: 1.75; }
.login-notice { border-color: #80b56970; background: #67984918; }
.login-back { font-size: 12px; }
.login-telegram .telegram-auth { background: var(--panel-2); color: var(--text); }
.login-page .registration-link { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 12px; }
.login-page .registration-actions { gap: 12px; }

@media (min-width: 620px) {
  :root { --gutter: 32px; }
  .section { padding-block: 64px; }
  .hero { padding-block: 52px 32px; }
  .hero h1 { font-size: 58px; }
  .hero-stage { max-width: 600px; justify-self: center; width: 100%; }
  .hero-phone-render { width: 520px; }
  .application-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .server-card .server-art { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; max-width: 100%; }
  .server-copy h3 { font-size: 28px; }
  .step-card { padding-inline: 18px; }
  .step-card h3 { font-size: 16px; }
  .step-card > p { font-size: 12px; min-height: 42px; }
  .fact-grid strong { font-size: 34px; }
  .fact-grid strong > span { font-size: 17px; }
  .support-art { align-self: center; }
  .login-layout { padding: 24px 32px 48px; }
  .login-card { padding: 36px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 44px; }
  .header { min-height: 90px; }
  .desktop-nav { gap: 16px; font-size: 12px; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; min-height: 650px; padding-block: 48px; }
  .hero h1 { font-size: clamp(48px, 4.6vw, 72px); }
  .hero-copy > .eyebrow { font-size: 10px; }
  .hero-text { font-size: 17px; }
  .hero-phone-render { width: 100%; max-width: 600px; }
  .workspace { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 36px; }
  .workspace-copy .inline-link { font-size: 14px; }
  .center-heading { margin-bottom: 44px; }
  .application-card { padding: 30px; }
  .server-card { min-height: 310px; padding: 30px; }
  .country-tags > span { font-size: 10px; }
  .plan { padding: 34px; }
  .plan-title { flex-wrap: wrap; }
  .plan-details li { font-size: 14px; }
  .step-card { padding: 28px 24px 24px; }
  .step-card h3 { font-size: 19px; }
  .step-card > p { font-size: 13px; }
  .step-image > img { width: 250px; }
  .fact-grid strong { font-size: 44px; }
  .fact-grid strong > span { font-size: 21px; }
  .support { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
  .final { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .login-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding: 40px 48px 60px; align-items: center; }
  .login-story { order: 0; justify-items: start; text-align: left; padding: 0; }
  .login-story > img { width: min(420px, 100%); justify-self: center; }
  .login-story h2 { font-size: clamp(42px, 4vw, 64px); }
  .login-card { order: 1; }
}
@media (min-width: 1280px) {
  :root { --gutter: 48px; }
  .desktop-nav { gap: 24px; font-size: 13px; }
  .hero { gap: 32px; min-height: 700px; padding-block: 56px; }
  .hero-copy > .button { min-height: 56px; padding-inline: 28px; }
  .hero-mini-services { margin-block: 30px; }
  .hero-mini-services p { font-size: 13px; }
  .application-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .application-card { padding: 28px 24px; }
  .category-render { width: 100%; }
  .category-icons { gap: 10px; }
  .plan-price strong { font-size: 58px; }
  .workspace { gap: 48px; }
}
@media (min-width: 1800px) {
  :root { --gutter: 64px; }
  .hero h1 { font-size: 76px; }
  .hero { min-height: 760px; }
}