:root {
  --eco-bg: #111620;
  --eco-surface: #1d2430;
  --eco-surface-soft: #202836;
  --eco-text: #eef1f5;
  --eco-muted: rgba(228, 232, 239, .68);
  --eco-border: rgba(255, 255, 255, .09);
  --eco-red: #ef1717;
  --eco-red-dark: #920202;
  --eco-shadow: 18px 18px 40px hsla(220, 32%, 8%, .6), -16px -16px 36px hsla(220, 16%, 22%, .78);
  --eco-soft-shadow: 12px 12px 28px hsla(220, 30%, 8%, .55), -10px -10px 24px hsla(220, 16%, 22%, .75);
}

html.light {
  --eco-bg: #eef2f6;
  --eco-surface: #e5eaf1;
  --eco-surface-soft: #edf1f6;
  --eco-text: #171b22;
  --eco-muted: rgba(23, 27, 34, .66);
  --eco-border: rgba(15, 23, 42, .1);
  --eco-shadow: 14px 14px 30px hsla(220, 16%, 72%, .24), -12px -12px 26px hsla(0, 0%, 100%, .76);
  --eco-soft-shadow: 8px 8px 18px hsla(220, 18%, 72%, .22), -8px -8px 18px hsla(0, 0%, 100%, .7);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--eco-bg); }
body { margin: 0; overflow-x: hidden; color: var(--eco-text); background: var(--eco-bg); font-family: Montserrat, Arial, sans-serif; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.eco-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.eco-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--eco-border); background: color-mix(in srgb, var(--eco-bg) 86%, transparent); backdrop-filter: blur(18px); }
.eco-header__inner { min-height: 82px; display: flex; align-items: center; gap: 26px; }
.eco-logo { width: 54px; flex: 0 0 auto; }
.eco-logo img { display: block; width: 100%; height: auto; }
.eco-logo__light { display: none !important; }
html.light .eco-logo__dark { display: none !important; }
html.light .eco-logo__light { display: block !important; }
.eco-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.eco-nav a, .eco-phone { font-size: 14px; font-weight: 700; text-decoration: none; transition: color 180ms ease, transform 180ms ease; }
.eco-nav a:hover, .eco-phone:hover { color: var(--eco-red); transform: translateY(-1px); }
.eco-phone { white-space: nowrap; }
.eco-theme { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--eco-border); border-radius: 50%; color: var(--eco-text); background: var(--eco-surface); box-shadow: var(--eco-soft-shadow); cursor: pointer; font-size: 20px; }
.eco-theme__sun { display: none; }
html.light .eco-theme__moon { display: none; }
html.light .eco-theme__sun { display: inline; }

.eco-hero { min-height: 72vh; display: grid; align-items: center; padding: 84px 0 76px; }
.eco-hero__content { max-width: 900px; }
.eco-kicker { display: inline-block; margin-bottom: 20px; padding: 9px 16px; border: 1px solid var(--eco-border); border-radius: 999px; color: var(--eco-red); background: linear-gradient(145deg, #3a414a, #171c24); box-shadow: inset 2px 2px 2px rgba(255,255,255,.12), inset -4px -4px 8px rgba(0,0,0,.45), var(--eco-soft-shadow); font-size: 13px; font-weight: 800; }
html.light .eco-kicker { background: linear-gradient(145deg, #f8f9fa, #bcc3cb); box-shadow: inset 2px 2px 2px #fff, inset -4px -4px 7px rgba(79,88,99,.2), var(--eco-soft-shadow); }
.eco-metal-title { margin: 0; color: #d9dde1; background: linear-gradient(180deg, #fff 0%, #d8dde1 22%, #7d858d 48%, #f1f3f4 68%, #8a9198 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: .35px rgba(255,255,255,.42); filter: drop-shadow(0 2px 0 #363b41) drop-shadow(0 7px 10px rgba(0,0,0,.72)); }
html.light .eco-metal-title { color: #30353a; background: linear-gradient(180deg, #11161c 0%, #515a64 38%, #20262d 68%, #606a74 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: .4px rgba(21,25,29,.4); filter: drop-shadow(0 2px 0 rgba(255,255,255,.88)) drop-shadow(0 7px 10px rgba(15,23,42,.26)); }
.eco-hero h1 { max-width: 1000px; font-size: clamp(44px, 8vw, 82px); line-height: 1.02; }
.eco-hero__lead { max-width: 800px; margin: 26px 0 0; color: var(--eco-muted); font-size: clamp(18px, 2.3vw, 23px); line-height: 1.65; }
.eco-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.eco-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid rgba(110,0,0,.48); border-radius: 12px; color: #fff; background: linear-gradient(180deg, #f02b2b 0%, #c70b0b 58%, #920202 100%); box-shadow: inset 0 2px 1px rgba(255,255,255,.38), inset 0 -5px 9px rgba(71,0,0,.44), 0 11px 20px rgba(44,0,0,.34); font-weight: 800; text-decoration: none; transition: transform 180ms ease, filter 180ms ease; }
.eco-button:hover { filter: brightness(1.07); transform: translateY(-2px); }
.eco-button--secondary { border-color: var(--eco-border); color: var(--eco-text); background: var(--eco-surface); box-shadow: var(--eco-soft-shadow); }

.eco-section { padding: 72px 0; }
.eco-section--tight { padding-top: 20px; }
.eco-section__head { max-width: 820px; margin-bottom: 34px; }
.eco-section__head h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; }
.eco-section__head p { margin: 18px 0 0; color: var(--eco-muted); font-size: 17px; line-height: 1.7; }
.eco-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 18px; }
.eco-card { position: relative; min-height: 220px; padding: 28px; border: 1px solid var(--eco-border); border-radius: 24px; background: var(--eco-surface); box-shadow: var(--eco-shadow); }
.eco-card__number { display: block; margin-bottom: 26px; color: var(--eco-red); font-size: 12px; font-weight: 800; }
.eco-card h3 { margin: 0 0 12px; font-size: 22px; }
.eco-card p { margin: 0; color: var(--eco-muted); line-height: 1.65; }
.eco-list { margin: 18px 0 0; padding: 0; list-style: none; }
.eco-list li { position: relative; padding-left: 22px; color: var(--eco-muted); line-height: 1.6; }
.eco-list li + li { margin-top: 10px; }
.eco-list li::before { position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; content: ""; background: var(--eco-red); box-shadow: 0 0 10px rgba(239,23,23,.5); }

.eco-unique { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 54px; padding: 44px; border-top: 1px solid var(--eco-border); border-bottom: 1px solid var(--eco-border); }
.eco-unique__label { color: var(--eco-red); font-size: 14px; font-weight: 800; }
.eco-unique h2 { margin: 12px 0 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.08; }
.eco-unique__copy p { color: var(--eco-muted); font-size: 18px; line-height: 1.75; }
.eco-unique__copy p:first-child { margin-top: 0; }

.eco-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 18px; }
.eco-step { min-height: 190px; padding: 24px; border: 1px solid var(--eco-border); border-radius: 22px; background: var(--eco-surface); box-shadow: var(--eco-soft-shadow); }
.eco-step span { color: var(--eco-red); font-weight: 800; }
.eco-step h3 { margin: 22px 0 10px; font-size: 19px; }
.eco-step p { margin: 0; color: var(--eco-muted); font-size: 14px; line-height: 1.6; }

.eco-role-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding: 18px; }
.eco-role-link { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid var(--eco-border); border-radius: 20px; background: var(--eco-surface); box-shadow: var(--eco-soft-shadow); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease; }
.eco-role-link:hover { border-color: rgba(239,23,23,.5); transform: translateY(-3px); }
.eco-role-link strong { font-size: 17px; }
.eco-role-link span { color: var(--eco-red); font-size: 22px; }

.eco-cta { margin: 70px auto; padding: 46px; border: 1px solid var(--eco-border); border-radius: 28px; background: var(--eco-surface); box-shadow: var(--eco-shadow); text-align: center; }
.eco-cta h2 { margin: 0; font-size: clamp(32px, 5vw, 50px); }
.eco-cta p { max-width: 700px; margin: 18px auto 0; color: var(--eco-muted); font-size: 17px; line-height: 1.7; }
.eco-cta .eco-actions { justify-content: center; }
.eco-footer { padding: 34px 0 46px; border-top: 1px solid var(--eco-border); color: var(--eco-muted); font-size: 13px; }
.eco-footer__inner { display: flex; justify-content: space-between; gap: 20px; }
.eco-footer a { text-decoration: none; }
.eco-max { position: fixed; right: 16px; bottom: 20px; z-index: 60; display: inline-flex; height: 42px; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; color: #171a2b; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px -14px rgba(0,132,255,.88); font-size: 10px; font-weight: 800; text-decoration: none; }
.eco-max img { width: 32px; height: 32px; border-radius: 50%; }
.eco-max span { display: flex; flex-direction: column; line-height: 1.05; }
.eco-max small { color: rgba(23,26,43,.68); font-size: 8px; }

@media (max-width: 980px) {
  .eco-nav { display: none; }
  .eco-phone { margin-left: auto; }
  .eco-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-role-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-role-link:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .eco-shell { width: calc(100% - 28px); max-width: 1180px; }
  .eco-header__inner { min-height: 70px; gap: 14px; }
  .eco-logo { width: 46px; }
  .eco-phone { display: none; }
  .eco-theme { margin-left: auto; }
  .eco-hero { min-height: auto; padding: 70px 0 58px; }
  .eco-hero__content { min-width: 0; max-width: calc(100% - 28px); }
  .eco-hero h1 { max-width: 100%; font-size: clamp(38px, 12vw, 56px); overflow-wrap: anywhere; word-break: normal; }
  .eco-hero__lead { font-size: 17px; }
  .eco-actions { width: 100%; min-width: 0; flex-direction: column; }
  .eco-button { width: 100%; }
  .eco-section { padding: 54px 0; }
  .eco-grid, .eco-steps, .eco-role-links { grid-template-columns: 1fr; gap: 22px; padding: 18px 12px 28px; }
  .eco-role-link:last-child { grid-column: auto; }
  .eco-card { min-height: auto; padding: 24px; }
  .eco-unique { grid-template-columns: 1fr; gap: 24px; padding: 42px 4px; }
  .eco-cta { margin: 46px auto; padding: 34px 22px; }
  .eco-footer__inner { flex-direction: column; }
  .eco-max { right: 10px; bottom: 14px; height: 39px; }
  .eco-max img { width: 29px; height: 29px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }