/* =========================================================
   СВЕТЛАЯ ТЕМА (ПО УМОЛЧАНИЮ)
   ========================================================= */
:root {
  --ink: #111111;
  --surface: #FFFFFF;
  --surface-secondary: #F5F5F7;
  --line: #E5E5EA;
  --beeline: #FFCC00;
  --beeline-soft: #FFE168;
  --beeline-dark: #000000;
  --muted: #6E6E73;
  --card-bg: #FFFFFF;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --input-bg: #F2F2F7;
  --input-border: #E5E5EA;
  --hero-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
  --text-color: #111111;
  --text-sub: rgba(0, 0, 0, 0.7);
  --header-bg: rgba(255, 255, 255, 0.9);
  --fontPrimary: "BeelineSans", arial, sans-serif;
}

/* =========================================================
   ТЁМНАЯ ТЕМА (ПРИ ПЕРЕКЛЮЧЕНИИ)
   ========================================================= */
[data-theme="dark"] {
  --ink: #0D0D0D;
  --surface: #171717;
  --surface-secondary: #222222;
  --line: rgba(255, 255, 255, 0.1);
  --beeline: #FFCC00;
  --beeline-soft: #FFE168;
  --beeline-dark: #000000;
  --muted: #9A9A9A;
  --card-bg: #171717;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.12);
  --hero-bg: #0D0D0D;
  --text-color: #F5F5F5;
  --text-sub: rgba(255, 255, 255, 0.7);
  --header-bg: rgba(13, 13, 13, 0.85);
}

/* =========================================================
   ДОПОЛНИТЕЛЬНЫЕ ЦВЕТА
   ========================================================= */
:root {
  --grey95: #191c22;
  --grey90: #2c2d37;
  --grey80: #363b4a;
  --grey70: #434856;
  --grey60: #727281;
  --grey50: #8e8e9f;
  --grey40: #bebec9;
  --grey20: #dfe0e5;
  --grey05: #f9f9f9;
  --grey0: #fbfbfb;
  --white: #fff;
  --lemon: #ffe632;
  --gold: #ffd93a;
  --red10: #f45151;
  --black: #000;
  --sienna: #c29553;
  --scarlet: #fa3300;
  --magenta: #e6008c;
  --green: #0bce73;
  --aquamarine: #1ebeaa;
  --violet: #8c32c8;
  --chart1: #ffe890;
  --chart2: #ffdd80;
  --chart3: #b6e6dc;
  --chart4: #a3e8b8;
  --chart5: #abc5ff;
  --chart6: #a1a4e8;
  --chart7: #c7aceb;
  --chart8: #fdb1d0;
  --chart9: #ffb69b;
  --chart1Active: #ffe069;
  --chart2Active: #ffd252;
  --chart3Active: #8fd9cb;
  --chart4Active: #81e0a1;
  --chart5Active: #8bb3ff;
  --chart6Active: #7e87df;
  --chart7Active: #aa83e0;
  --chart8Active: #f888b8;
  --chart9Active: #ff916b;
  --beeline900: #342702;
  --beeline800: #534004;
  --beeline700: #745a08;
  --beeline600: #95740a;
  --beeline500: #ba9213;
  --beeline400: #e3b203;
  --beeline300: #ffc800;
  --beeline200: #ffd259;
  --beeline100: #ffe4a0;
  --beeline50: #fef1d0;
  --lemon900: #2f2903;
  --lemon800: #4b4307;
  --lemon700: #70640c;
  --lemon600: #908113;
  --lemon500: #b4a10b;
  --lemon400: #d6bf0c;
  --lemon300: #f6dd04;
  --lemon200: #ffe632;
  --lemon100: #fff199;
  --lemon50: #fffad8;
  --gold900: #322802;
  --gold800: #4f4105;
  --gold700: #6f5c09;
  --gold600: #86700a;
  --gold500: #a18712;
  --gold400: #c9a80c;
  --gold300: #e5c010;
  --gold200: #ffd93a;
  --gold100: #fee895;
  --gold50: #fef2c5;
  --scarlet900: #4e0f04;
  --scarlet800: #7a1904;
  --scarlet700: #a82608;
  --scarlet600: #cc2c00;
  --scarlet500: #ed4423;
  --scarlet400: #f8866d;
  --scarlet300: #ffaa97;
  --scarlet200: #feccc0;
  --scarlet100: #ffe0d9;
  --scarlet50: #ffede9;
  --red900: #510708;
  --red800: #7e0d0f;
  --red700: #aa1f1e;
  --red600: #cb2c2a;
  --red500: #ed413b;
  --red400: #fd8074;
  --red300: #fda9a0;
  --red200: #fcccc6;
  --red100: #ffe0dc;
  --red50: #feedea;
  --magenta900: #4f002e;
  --magenta800: #7a0249;
  --magenta700: #a41666;
  --magenta600: #c51f7c;
  --magenta500: #e63695;
  --magenta400: #f978b4;
  --magenta300: #faa5c9;
  --magenta200: #fcc8dd;
  --magenta100: #fcdfea;
  --magenta50: #fdedf3;
  --violet900: #2d1360;
  --violet800: #47278e;
  --violet700: #643dbd;
  --violet600: #7a46e9;
  --violet500: #8e6af6;
  --violet400: #ac99fe;
  --violet300: #c2b8fc;
  --violet200: #d9d3fc;
  --violet100: #e8e5fb;
  --violet50: #f2f0fc;
  --saphire900: #0e2161;
  --saphire800: #1e398c;
  --saphire700: #2c51c4;
  --saphire600: #3a64e4;
  --saphire500: #5480f8;
  --saphire400: #86a8f9;
  --saphire300: #a7c2fe;
  --saphire200: #c8d9ff;
  --saphire100: #dfe8fd;
  --saphire50: #eff2f9;
  --blue900: #032a4c;
  --blue800: #0a4475;
  --blue700: #0260a6;
  --blue600: #1874c2;
  --blue500: #288de5;
  --blue400: #67aeff;
  --blue300: #96c7fb;
  --blue200: #beddfd;
  --blue100: #d9eafc;
  --blue50: #eaf3fc;
  --aquamarine900: #07302b;
  --aquamarine800: #094d44;
  --aquamarine700: #066d60;
  --aquamarine600: #128375;
  --aquamarine500: #119e8e;
  --aquamarine400: #49c1b0;
  --aquamarine300: #81d5c6;
  --aquamarine200: #b1e6dc;
  --aquamarine100: #d0f0ea;
  --aquamarine50: #e4f6f2;
  --green900: #07311c;
  --green800: #0f4f2e;
  --green700: #146f41;
  --green600: #12874f;
  --green500: #1fa262;
  --green400: #58c485;
  --green300: #85d8a4;
  --green200: #b2e9c4;
  --green100: #d1f1db;
  --green50: #e8f9ec;
  --gray900: #26292d;
  --gray800: #3f4347;
  --gray700: #5a5e62;
  --gray600: #6e7276;
  --gray500: #868a8e;
  --gray400: #a7abb0;
  --gray300: #c3c6c9;
  --gray200: #d7d9dc;
  --gray100: #e7e8e9;
  --gray50: #f4f5f6;
  --totalWhite: #fdfdfe;
  --totalBlack: #13171b;
}

@font-face { font-family: BeelineSans; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/BeelineSans-Bold.woff2) format("woff2") }
@font-face { font-family: BeelineSans; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/BeelineSans-Medium.woff2) format("woff2") }
@font-face { font-family: BeelineSans; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/BeelineSans-Regular.woff2) format("woff2") }

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-secondary); color: var(--text-color); font-family: var(--fontPrimary); transition: background 0.25s, color 0.25s; }
h1, h2, h3, .display { font-family: var(--fontPrimary); }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.eyebrow { color: var(--ink); background: var(--beeline); display: inline-block; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; font-size: 12px; font-weight: 700; margin: 0 0 16px; }


/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 700; padding: 14px 28px; font-size: 14px; cursor: pointer; border: none; transition: .15s; }
.btn-primary { background: var(--beeline); color: var(--beeline-dark); }
.btn-primary:hover { background: var(--beeline-soft); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #FFF; }
.btn-dark:hover { opacity: 0.9; }
.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--card-shadow); transition: background 0.25s, border-color 0.25s; }
.section { padding: 80px 0; border-bottom: 1px solid var(--line); }


/* HEADER */
header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: background 0.25s; }
header .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.logo { font-size: 22px; font-weight: 800; font-family: var(--fontPrimary); }
.logo span { color: var(--beeline); }
.city-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card-bg); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--beeline); }
nav.main { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--text-sub); }
nav.main a:hover { color: var(--text-color); }
.left-group { display: flex; align-items: center; gap: 20px; }
.right-group { display: flex; align-items: center; gap: 16px; }


/* THEME TOGGLE SWITCH */
.theme-toggle { background: var(--input-bg); border: 1px solid var(--line); padding: 8px 12px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-color); transition: 0.2s; }
.theme-toggle:hover { border-color: var(--beeline); }
@media(max-width:960px){ nav.main, .phone-link { display: none; } }


/* CITY MODAL STYLES */
.city-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 1000; }
.city-modal { background: var(--card-bg); width: 90%; max-width: 600px; border-radius: 24px; padding: 32px; box-shadow: var(--card-shadow); border: 1px solid var(--line); position: relative; }
.city-modal-close { position: absolute; top: 20px; right: 20px; border: none; background: none; font-size: 24px; cursor: pointer; color: var(--text-color); }
.city-search-input { width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-color); font-size: 15px; outline: none; margin: 16px 0 24px; }
.city-search-input:focus { border-color: var(--beeline); }
.city-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: 320px; overflow-y: auto; padding-right: 8px; }
@media(max-width: 500px) { .city-list-grid { grid-template-columns: 1fr; } }
.city-item-link { padding: 10px 14px; border-radius: 10px; background: var(--input-bg); font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.city-item-link:hover { background: var(--beeline); color: var(--beeline-dark); font-weight: 700; }
.city-item-region { font-size: 12px; opacity: 0.6; }


/* HERO */
.hero-wrap { background: var(--hero-bg); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; padding: 60px 0 80px; align-items: center; }
@media(max-width:960px){ .hero-grid{ grid-template-columns: 1fr; padding: 40px 0; } .hero-graphic{ display: none; } }
h1.hero-title { font-size: 42px; font-weight: 800; line-height: 1.15; max-width: 540px; margin: 0 0 18px; }
.hero-sub { max-width: 460px; color: var(--text-sub); margin: 0 0 32px; font-size: 16px; }
.address-form { padding: 16px; display: flex; gap: 10px; flex-wrap: wrap; background: var(--card-bg); }
.address-form .field { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 16px; padding: 12px 16px; }
.address-form input { background: transparent; border: none; outline: none; color: var(--text-color); font-size: 14px; width: 100%; }
.address-form input::placeholder { color: var(--muted); }
.status-msg { font-size: 14px; color: #10B981; margin-top: 12px; font-weight: 600; display: none; }
.coverage-note { color: var(--muted); font-size: 13px; margin-top: 16px; }
.hero-graphic { display: flex; justify-content: center; }
.hero-graphic img { width: 300px; height: 300px; }


/* TARIFF GRID */
.tariff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
@media(max-width:900px){ .tariff-grid{ grid-template-columns: 1fr; } }
.tariff-card { padding: 32px 28px; position: relative; display: flex; flex-direction: column; height: 100%; }
.tariff-card.featured { border: 2px solid var(--beeline); }
.badge { position: absolute; top: -14px; left: 28px; background: var(--beeline); color: var(--beeline-dark); font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 999px; }
.tariff-name { font-size: 20px; font-weight: 700; margin: 0 0 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-bottom: 22px; }
.stat { background: var(--input-bg); border-radius: 14px; padding: 10px 4px; }
.stat b { display: block; font-size: 14px; color: var(--text-color); }
.stat span { font-size: 12px; color: var(--muted); }
.feat-list { list-style: none; padding: 0; margin: 0 0 24px; font-size: 14px; color: var(--text-sub); flex: 1; }
.feat-list li { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.feat-list li:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--beeline); flex: none; }
.price-block { border-top: 1px solid var(--line); padding-top: 20px; margin-top: auto; }
.price { font-size: 32px; font-weight: 800; margin: 0; font-family: var(--fontPrimary); }
.price small { font-size: 15px; font-weight: 400; color: var(--muted); font-family: var(--fontPrimary); }
.price-note { font-size: 12px; color: var(--muted); margin: 4px 0 16px; }


/* ADVANTAGES */
.adv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
@media(max-width:960px){ .adv-grid{ grid-template-columns: repeat(2, 1fr); } }
.adv-card { padding: 24px; }
.adv-num { font-size: 22px; font-weight: 800; color: var(--beeline); font-family: var(--fontPrimary); }
.adv-card h3 { font-size: 15px; margin: 12px 0 6px; font-weight: 700; }
.adv-card p { font-size: 13px; color: var(--text-sub); margin: 0; }


/* STEPS */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
@media(max-width:900px){ .steps-grid{ grid-template-columns: 1fr; } }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--beeline); color: var(--beeline-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; font-family: var(--fontPrimary); }
.steps-grid h3 { font-size: 16px; margin: 16px 0 6px; font-weight: 700; }
.steps-grid p { font-size: 14px; color: var(--text-sub); margin: 0; }


/* FAQ */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { margin-bottom: 12px; overflow: hidden; cursor: pointer; }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-size: 15px; font-weight: 700; }
.faq-plus { color: var(--beeline-dark); background: var(--beeline); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; transition: .2s; }
.faq-a { max-height: 0; overflow: hidden; transition: .25s ease; font-size: 14px; color: var(--text-sub); padding: 0 24px; }
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 20px; }
.faq-item.open .faq-plus { transform: rotate(45deg); }


/* LEAD FORM */
.lead-card { padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--card-bg); }
@media(max-width:900px){ .lead-card{ grid-template-columns: 1fr; padding: 32px; } }
.lead-card h2 { font-size: 32px; margin: 0 0 16px; line-height: 1.2; }
.lead-card p.lead-desc { max-width: 360px; color: var(--text-sub); font-size: 14px; margin-bottom: 24px; }
.lead-phone { font-size: 22px; font-weight: 800; display: block; margin-bottom: 4px; font-family: var(--fontPrimary); }
form.lead-fields { display: flex; flex-direction: column; gap: 14px; }
form.lead-fields input[type=text], form.lead-fields input[type=tel] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 16px; padding: 16px 20px; color: var(--text-color); font-size: 14px; outline: none; font-family: inherit; }
form.lead-fields .field { display: flex; align-items: baseline; gap: 8px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 16px; padding: 16px 20px; }
form.lead-fields .field input[type=text] { background: transparent; border: none; padding: 0; }
form.lead-fields input::placeholder { color: var(--muted); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--muted); }
.consent input { margin-top: 3px; accent-color: var(--beeline); }
.lead-success { color: #10B981; font-size: 14px; font-weight: 600; display: none; margin-top: 8px; }


/* FOOTER */
footer { padding: 56px 0; background: var(--surface-secondary); }
.footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.footer-nav { display: flex; gap: 24px; font-size: 14px; color: var(--text-sub); flex-wrap: wrap; }
.footer-legal { font-size: 12px; line-height: 1.7; color: var(--muted); max-width: 800px; }
.footer-legal a { text-decoration: underline; }
.footer-copy { font-size: 12px; color: var(--muted); margin-top: 16px; }


/* DaData Override for Theme */
.suggestions-suggestions { border-radius: 12px !important; border: 1px solid var(--line) !important; box-shadow: var(--card-shadow) !important; background: var(--card-bg) !important; color: var(--text-color) !important; }
.suggestions-suggestion { color: var(--text-color) !important; }
.suggestions-suggestion:hover { background: var(--input-bg) !important; }