/* ===== EBSPLIT — Redesigned with ebash.tech Design System ===== */

:root {
  --bg:        #ffffff;
  --surface:   #f7f8f9;
  --surface-2: #eef0f2;
  --text:      #111827;
  --text-2:    #6b7280;
  --text-3:    #9ca3af;
  --border:    #e5e7eb;
  --border-2:  #d1d5db;
  --accent:    #111827;
  --accent-w:  #ffffff;
  --green:     #059669;
  --green-bg:  #ecfdf5;
  --amber:     #d97706;
  --amber-bg:  #fffbeb;
  --red:       #dc2626;
  --red-bg:    #fef2f2;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.10);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.14);
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── THEMES ── */

/* MIST — Light blue-grey */
[data-theme="mist"] {
  --bg:#f7f9fa; --surface:#eef2f4; --surface-2:#e1e8ed;
  --text:#222c35; --text-2:#4f6070; --text-3:#8a9aab;
  --border:#cdd7df; --border-2:#9badc0;
  --accent:#3a5f7a; --accent-w:#fff;
  --green:#5d8a6b; --green-bg:rgba(93,138,107,.10);
  --amber:#c68030; --amber-bg:rgba(198,128,48,.10);
  --red:#c05050; --red-bg:rgba(192,80,80,.10);
}

/* SAGE — Light green-grey */
[data-theme="sage"] {
  --bg:#f8faf7; --surface:#eff3ec; --surface-2:#e3ebe0;
  --text:#293226; --text-2:#4f5c48; --text-3:#899a80;
  --border:#c9d4c2; --border-2:#9db092;
  --accent:#4a6350; --accent-w:#fff;
  --green:#4f7a53; --green-bg:rgba(79,122,83,.10);
  --amber:#b08930; --amber-bg:rgba(176,137,48,.10);
  --red:#b05050; --red-bg:rgba(176,80,80,.10);
}

/* SLATE — Dark blue-grey */
[data-theme="slate"] {
  --bg:#0b0d10; --surface:#161b22; --surface-2:#21262d;
  --text:#e6edf3; --text-2:#8b949e; --text-3:#484f58;
  --border:#30363d; --border-2:#484f58;
  --accent:#a5b4fc; --accent-w:#0b0d10;
  --green:#68a678; --green-bg:rgba(104,166,120,.12);
  --amber:#d4a373; --amber-bg:rgba(212,163,115,.12);
  --red:#ef5350; --red-bg:rgba(239,83,80,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:   0 4px 24px rgba(0,0,0,.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,.45);
  --shadow-xl:0 24px 64px rgba(0,0,0,.5);
}
[data-theme="slate"] .btn-primary { background:var(--accent); color:var(--accent-w); }
[data-theme="slate"] .btn-primary:hover { background:#c7d2fe; }
[data-theme="slate"] .product-card:hover { border-color:var(--border-2); }
[data-theme="slate"] .hero::before { background:radial-gradient(ellipse 60% 50% at 70% 40%, var(--surface) 0%, transparent 70%); }
[data-theme="slate"] .calc-power-card { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
[data-theme="slate"] .calc-power-btu { background:var(--surface); }
[data-theme="slate"] .cta-block { background:var(--surface); border:1px solid var(--border); }
[data-theme="slate"] .cta-block h2 { color:var(--text); }
[data-theme="slate"] .cta-block p { color:var(--text-2); }
[data-theme="slate"] .cta-block .btn { background:var(--accent); color:var(--accent-w); }

/* MIDNIGHT — Deep navy */
[data-theme="midnight"] {
  --bg:#050a14; --surface:#0f172a; --surface-2:#1e293b;
  --text:#f8fafc; --text-2:#94a3b8; --text-3:#475569;
  --border:#1e293b; --border-2:#334155;
  --accent:#38bdf8; --accent-w:#0f172a;
  --green:#34d399; --green-bg:rgba(52,211,153,0.12);
  --amber:#f0a030; --amber-bg:rgba(240,160,48,.12);
  --red:#ef5350; --red-bg:rgba(239,83,80,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:   0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5);
  --shadow-xl:0 24px 64px rgba(0,0,0,.55);
}
[data-theme="midnight"] .btn-primary { background:var(--accent); color:var(--accent-w); }
[data-theme="midnight"] .btn-primary:hover { background:#7dd3fc; }
[data-theme="midnight"] .product-card:hover { border-color:var(--border-2); }
[data-theme="midnight"] .hero::before { background:radial-gradient(ellipse 60% 50% at 70% 40%, var(--surface) 0%, transparent 70%); }
[data-theme="midnight"] .calc-power-card { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
[data-theme="midnight"] .calc-power-btu { background:var(--surface); }
[data-theme="midnight"] .cta-block { background:var(--surface); border:1px solid var(--border); }
[data-theme="midnight"] .cta-block h2 { color:var(--text); }
[data-theme="midnight"] .cta-block p { color:var(--text-2); }
[data-theme="midnight"] .cta-block .btn { background:var(--accent); color:var(--accent-w); }

/* GRAPHITE — Warm dark */
[data-theme="graphite"] {
  --bg:#111113; --surface:#1a1a1e; --surface-2:#26262c;
  --text:#ececee; --text-2:#8e8e96; --text-3:#55555e;
  --border:#2e2e36; --border-2:#44444e;
  --accent:#d4a373; --accent-w:#111113;
  --green:#3ecf73; --green-bg:rgba(62,207,115,.12);
  --amber:#f0a030; --amber-bg:rgba(240,160,48,.12);
  --red:#ef5350; --red-bg:rgba(239,83,80,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:   0 4px 24px rgba(0,0,0,.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,.45);
  --shadow-xl:0 24px 64px rgba(0,0,0,.5);
}
[data-theme="graphite"] .btn-primary { background:var(--accent); color:var(--accent-w); }
[data-theme="graphite"] .btn-primary:hover { background:#e0b48a; }
[data-theme="graphite"] .product-card:hover { border-color:var(--border-2); }
[data-theme="graphite"] .hero::before { background:radial-gradient(ellipse 60% 50% at 70% 40%, var(--surface) 0%, transparent 70%); }
[data-theme="graphite"] .calc-power-card { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
[data-theme="graphite"] .calc-power-btu { background:var(--surface); }
[data-theme="graphite"] .cta-block { background:var(--surface); border:1px solid var(--border); }
[data-theme="graphite"] .cta-block h2 { color:var(--text); }
[data-theme="graphite"] .cta-block p { color:var(--text-2); }
[data-theme="graphite"] .cta-block .btn { background:var(--accent); color:var(--accent-w); }

/* INK / DOPAMINE — Neon */
[data-theme="ink"] {
  --bg:#08060f; --surface:#12102a; --surface-2:#1e1a42;
  --text:#fefefe; --text-2:#b8b0e8; --text-3:#6e68a0;
  --border:#2a2460; --border-2:#3e3688;
  --accent:#c840ff; --accent-w:#fff;
  --green:#39ff14; --green-bg:rgba(57,255,20,.1);
  --amber:#ffe600; --amber-bg:rgba(255,230,0,.1);
  --red:#ff4466; --red-bg:rgba(255,68,102,.1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:   0 4px 24px rgba(200,64,255,.12);
  --shadow-lg:0 16px 48px rgba(200,64,255,.18);
  --shadow-xl:0 24px 64px rgba(100,40,255,.22);
  --dop-c:#c840ff; --dop-b:#4466ff; --dop-g:#39ff14; --dop-y:#ffe600;
  --dop-grad:linear-gradient(135deg,#c840ff 0%,#4466ff 35%,#39ff14 65%,#ffe600 100%);
}

/* ===== DOPAMINE ACCENT LAYER ===== */
[data-theme="ink"] .btn-primary {
  background:var(--dop-grad); background-size:300% 300%;
  color:#08060f; font-weight:700;
  animation:dopShift 8s ease infinite;
}
[data-theme="ink"] .btn-primary:hover { filter:brightness(1.12); transform:translateY(-2px); }
@keyframes dopShift { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }

[data-theme="ink"] .hero h1,
[data-theme="ink"] .section-head h2 {
  background:var(--dop-grad); background-size:300% 300%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:dopShift 8s ease infinite;
}
[data-theme="ink"] .product-card:hover {
  border-color:rgba(200,64,255,.35);
  box-shadow:0 0 0 1px rgba(200,64,255,.15), 0 8px 32px rgba(200,64,255,.12);
}
[data-theme="ink"] .calc-power-card { background:var(--accent); color:var(--accent-w); }
[data-theme="ink"] .calc-power-card,
[data-theme="ink"] .calc-toggle.active,
[data-theme="ink"] .time-slot.selected,
[data-theme="ink"] .cal-day.selected {
  box-shadow:0 0 0 1px var(--dop-b), 0 6px 20px rgba(68,102,255,.30);
}
[data-theme="ink"] ::selection { background:rgba(200,64,255,.35); }
[data-theme="ink"] .cta-block {
  background:linear-gradient(160deg, #12102a 0%, #1e1a42 50%, #2a2460 100%) !important;
  border:1px solid rgba(200,64,255,.2);
}
[data-theme="ink"] .cta-block h2 {
  background:var(--dop-grad); background-size:300% 300%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:dopShift 8s ease infinite;
}
[data-theme="ink"] .cta-block .btn {
  background:var(--dop-grad); background-size:300% 300%;
  color:#08060f; font-weight:700;
  animation:dopShift 8s ease infinite;
}
[data-theme="ink"] .work-card:hover,
[data-theme="ink"] .works-img:hover {
  box-shadow:0 0 0 2px var(--dop-c), 0 12px 40px rgba(200,64,255,.2);
}
[data-theme="ink"] .contact-card:hover {
  border-color:rgba(200,64,255,.35);
  box-shadow:0 0 0 1px rgba(200,64,255,.15), 0 8px 32px rgba(200,64,255,.12);
}
[data-theme="ink"] .contact-card:hover .contact-icon {
  background:var(--dop-grad); background-size:300% 300%;
  color:#08060f;
  animation:dopShift 8s ease infinite;
}

/* ===== RESET ===== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:15px; line-height:1.6; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .4s var(--ease), color .4s var(--ease);
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
button { font-family:inherit; }

.container { width:100%; max-width:1160px; margin:0 auto; padding:0 24px; position:relative; }

/* ===== HEADER ===== */
.header {
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--border);
  transition:border-color .4s, background .4s;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.logo {
  font-size:22px; font-weight:800; letter-spacing:-.6px;
  display:flex; align-items:center; gap:2px; color:var(--text);
}
.logo-accent { color:var(--accent); }
.nav { display:flex; gap:32px; }
.nav a {
  font-size:14px; font-weight:500; color:var(--text-2);
  transition:color .2s; position:relative;
}
.nav a::after {
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:1.5px;
  background:var(--text); transition:width .3s var(--ease);
}
.nav a:hover { color:var(--text); }
.nav a:hover::after { width:100%; }

/* ===== HERO ===== */
.hero {
  padding:80px 0 64px;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 70% 40%, var(--surface) 0%, transparent 70%);
  pointer-events:none; transition:background .4s;
}
.hero-content { position:relative; max-width:640px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text-2);
  margin-bottom:24px; transition:all .3s;
}
.hero-badge svg { opacity:.6; }
.hero h1 {
  font-size:52px; font-weight:800; line-height:1.05;
  letter-spacing:-2.5px; margin-bottom:20px;
}
.hero .lead {
  font-size:17px; color:var(--text-2); line-height:1.65;
  margin-bottom:36px; max-width:520px;
}
.hero-benefits { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.hero-benefit {
  display:flex; align-items:center; gap:12px; font-size:15px; color:var(--text);
}
.benefit-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:var(--green-bg); color:var(--green);
}
.benefit-icon svg { width:18px; height:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; font-size:14px; font-weight:600;
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  transition:all .25s var(--ease); position:relative;
  letter-spacing:-.2px;
}
.btn-primary {
  background:var(--text); color:var(--bg);
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.btn-primary:hover { opacity:.88; transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-primary:active { transform:translateY(0); }
.btn-outline {
  background:transparent; color:var(--text);
  border:1.5px solid var(--border-2);
}
.btn-outline:hover { background:var(--surface); border-color:var(--text-3); }
.btn-small { padding:10px 16px; font-size:13px; }
.btn svg { width:16px; height:16px; flex-shrink:0; }

/* ===== SECTION ===== */
.section { padding:80px 0; }
.section-alt {
  background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  transition:border-color .4s, background .4s;
}
.section-head { margin-bottom:40px; }
.section-head h2 {
  font-size:36px; font-weight:800; letter-spacing:-1.5px; line-height:1.1; margin-bottom:10px;
}
.section-head p { font-size:16px; color:var(--text-2); max-width:520px; line-height:1.6; }

/* ===== INFO BAR ===== */
.info-bar {
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; background:var(--surface-2); border-radius:var(--radius-md);
  margin-bottom:28px; font-size:14px; color:var(--text-2); line-height:1.5;
}
.info-bar strong { color:var(--text); font-weight:600; }
.info-bar .dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.info-bar .dot.gold { background:var(--amber); }

/* ===== FILTERS ===== */
.filters {
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;
  padding:14px; background:var(--surface-2); border-radius:var(--radius-md);
}
.filter-chip { position:relative; }
.filter-chip select {
  appearance:none; padding:10px 36px 10px 14px; font-size:14px; font-weight:500;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-family:inherit; cursor:pointer; min-width:160px; color:var(--text);
  transition:border-color .2s, background .4s;
}
.filter-chip select:focus { outline:none; border-color:var(--text-2); }

/* ===== CATALOG ===== */
.catalog-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px;
}


/* ===== PRODUCT CARD ===== */
.product-card {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:all .35s var(--ease);
}
/* hover effects moved to ENHANCED ANIMATIONS section */
.product-card.selected {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12), var(--shadow-lg);
  transform:translateY(-4px); background:var(--surface);
}
.product-card.selected .product-footer .btn-outline {
  background:var(--accent); color:var(--accent-w); border-color:var(--accent);
}

/* Product image area */
.product-img {
  aspect-ratio:4/3; background:var(--surface); overflow:hidden; position:relative;
  transition:background .4s;
}
.product-img img {
  width:100%; height:100%; object-fit:contain;
  transition:transform .5s var(--ease);
}

.product-flag {
  position:absolute; top:12px; left:12px;
  padding:5px 12px; border-radius:8px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
}
.flag-stock { background:var(--green-bg); color:var(--green); }
.flag-low   { background:var(--amber-bg); color:var(--amber); }
.flag-order { background:var(--surface); color:var(--text-2); }
.flag-hot   { background:var(--amber-bg); color:var(--amber); }

/* Product gallery (2 images side by side) */
/* gallery removed: single image mode */
/* Product info */
.product-info { padding:20px; }
.product-brand {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text-3); margin-bottom:6px;
}
.product-series {
  font-size:17px; font-weight:700; letter-spacing:-.3px; margin-bottom:2px;
}
.product-name { font-size:13px; color:var(--text-2); margin-bottom:14px; line-height:1.4; }

.product-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.meta-tag {
  font-size:12px; padding:5px 10px; background:var(--surface);
  border-radius:8px; color:var(--text-2); font-weight:600;
  transition:background .4s;
}

/* BTU tabs */
.btu-tabs {
  display:flex; gap:4px; margin-bottom:16px;
  background:var(--surface); border-radius:var(--radius-sm); padding:3px;
  transition:background .4s;
}
.btu-tab {
  flex:1; padding:8px; text-align:center; font-size:13px; font-weight:600;
  background:transparent; border:none; border-radius:calc(var(--radius-sm) - 2px);
  cursor:pointer; transition:all .2s; color:var(--text-2);
  font-family:inherit;
}
.btu-tab:hover:not(:disabled) { color:var(--text); }
.btu-tab.active { background:var(--bg); color:var(--text); box-shadow:var(--shadow-sm); }
[data-theme="slate"] .btu-tab.active,
[data-theme="midnight"] .btu-tab.active,
[data-theme="graphite"] .btu-tab.active { background:var(--surface-2); }
.btu-tab:disabled { opacity:.35; cursor:not-allowed; }

/* Product footer */
.product-footer {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--border); gap:12px;
  transition:border-color .4s;
}
.product-price { font-size:22px; font-weight:800; letter-spacing:-.8px; line-height:1; }
.product-price-sub { font-size:12px; color:var(--text-3); font-weight:500; margin-top:3px; }
.product-area {
  font-size:12px; color:var(--text-3); font-weight:600;
  background:var(--surface); padding:4px 10px; border-radius:8px;
  white-space:nowrap; transition:background .4s;
}

/* ===== CALCULATOR ===== */
.calc-toggle-btn {
  display:inline-flex; align-items:center; gap:8px;
  margin:16px auto 0; padding:12px 28px; border-radius:999px;
  background:var(--accent, #2563eb); color:var(--accent-w, #fff);
  font-size:15px; font-weight:600; border:none;
  cursor:pointer; transition:all .25s var(--ease); font-family:inherit;
}
.calc-toggle-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.calc-toggle-btn svg { transition:transform .3s var(--ease); }
.calc-toggle-btn.open svg { transform:rotate(180deg); }
.calc-body[hidden] { display:none; }

.calc-layout { display:grid; grid-template-columns:1fr 320px; gap:32px; margin-bottom:36px; }
.calc-inputs { display:flex; flex-direction:column; gap:20px; }
.calc-field label {
  display:block; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-2); margin-bottom:8px;
}
.calc-slider-row { display:flex; align-items:center; gap:16px; }
.calc-slider-row input[type="range"] {
  flex:1; -webkit-appearance:none; appearance:none;
  height:6px; border-radius:3px; outline:none;
  background:var(--surface-2); border:none; padding:0;
}
.calc-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--text); cursor:pointer; border:3px solid var(--bg);
  box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .15s;
}
.calc-slider-row input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.15); }
.calc-slider-row input[type="range"]::-webkit-slider-thumb:active { transform:scale(1.25); }
.calc-slider-row input[type="range"]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:var(--text); cursor:pointer; border:3px solid var(--bg);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.calc-slider-row input[type="range"]::-moz-range-track {
  height:6px; border-radius:3px; background:var(--surface-2);
}
[data-theme="slate"] .calc-slider-row input[type="range"]::-webkit-slider-thumb,
[data-theme="midnight"] .calc-slider-row input[type="range"]::-webkit-slider-thumb,
[data-theme="graphite"] .calc-slider-row input[type="range"]::-webkit-slider-thumb {
  background:var(--accent);
}
.calc-value {
  min-width:64px; text-align:right; font-size:16px; font-weight:700;
  color:var(--text); font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
}
.calc-toggles { display:flex; gap:6px; }
.calc-toggle {
  flex:1; padding:10px 14px; font-size:13px; font-weight:600;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text-2); cursor:pointer;
  transition:all .2s var(--ease); font-family:inherit;
}
.calc-toggle:hover { border-color:var(--border-2); color:var(--text); }
.calc-toggle.active { background:var(--text); color:var(--bg); border-color:var(--text); }
[data-theme="slate"] .calc-toggle.active,
[data-theme="midnight"] .calc-toggle.active,
[data-theme="graphite"] .calc-toggle.active {
  background:var(--accent); color:var(--accent-w); border-color:var(--accent);
}
.calc-counter { display:flex; align-items:center; gap:16px; }
.calc-counter-btn {
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--bg);
  font-size:18px; font-weight:600; color:var(--text);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s var(--ease); font-family:inherit;
}
.calc-counter-btn:hover { border-color:var(--text); background:var(--surface); }
.calc-counter-btn:active { transform:scale(.92); }
.calc-counter-val {
  font-size:24px; font-weight:800; color:var(--text);
  min-width:28px; text-align:center; letter-spacing:-1px;
}
.calc-result { display:flex; flex-direction:column; justify-content:center; }
.calc-power-card {
  background:var(--text); color:var(--bg); border-radius:var(--radius-lg);
  padding:32px 28px; text-align:center; position:relative; overflow:hidden;
}
.calc-power-card::before {
  content:""; position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.06);
}
.calc-power-card::after {
  content:""; position:absolute; bottom:-30px; left:-30px;
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.calc-power-label {
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.8px; opacity:.6; margin-bottom:12px;
}
.calc-power-value {
  font-size:42px; font-weight:800; letter-spacing:-2px; line-height:1;
  margin-bottom:8px; position:relative; z-index:1;
}
.calc-power-btu {
  display:inline-block; padding:5px 16px; border-radius:999px;
  font-size:13px; font-weight:700; background:rgba(255,255,255,.12);
  margin-bottom:14px; position:relative; z-index:1;
}
.calc-power-hint {
  font-size:12px; opacity:.4; line-height:1.4;
  position:relative; z-index:1;
}
.calc-models-head { display:flex; align-items:baseline; gap:10px; margin-bottom:20px; }
.calc-models-title { font-size:18px; font-weight:700; color:var(--text); }
.calc-models-count { font-size:13px; color:var(--text-3); font-weight:500; }
.calc-models { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.calc-model-card {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border:1px solid var(--border);
  border-radius:var(--radius-md); background:var(--bg);
  transition:all .25s var(--ease); cursor:default;
}
.calc-model-card:hover { border-color:var(--border-2); box-shadow:var(--shadow); transform:translateY(-1px); }
.calc-model-info { flex:1; min-width:0; }
.calc-model-brand {
  font-size:13px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.2px;
}
.calc-model-name {
  font-size:11px; color:var(--text-3); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:1px;
}
.calc-model-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.calc-model-tag {
  font-size:10px; padding:3px 8px; border-radius:4px;
  background:var(--surface); color:var(--text-2); font-weight:600;
  white-space:nowrap; line-height:1.3;
}
.calc-model-price-col { text-align:right; flex-shrink:0; }
.calc-model-price { font-size:17px; font-weight:800; color:var(--text); letter-spacing:-.5px; line-height:1; }
.calc-model-power { font-size:11px; color:var(--text-3); font-weight:500; margin-top:2px; }
.calc-model-btn {
  display:block; width:100%; margin-top:10px; padding:9px;
  font-size:13px; font-weight:600; border:none;
  border-radius:var(--radius-sm); cursor:pointer;
  background:var(--surface-2); color:var(--text);
  transition:all .2s var(--ease); font-family:inherit;
}
.calc-model-btn:hover { background:var(--text); color:var(--bg); }
[data-theme="slate"] .calc-model-btn:hover,
[data-theme="midnight"] .calc-model-btn:hover,
[data-theme="graphite"] .calc-model-btn:hover {
  background:var(--accent); color:var(--accent-w);
}
.calc-more { display:flex; justify-content:center; margin-top:20px; }
.calc-more .btn-showmore {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--radius-lg);
  background:transparent; color:var(--accent);
  font-size:14px; font-weight:600; border:2px solid var(--accent);
  cursor:pointer; transition:all .25s var(--ease); font-family:inherit;
}
.calc-more .btn-showmore:hover {
  background:var(--accent); color:var(--accent-w);
  transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.calc-more .btn-showmore:hover svg { transform:rotate(180deg); }
.calc-more .btn-showmore svg { transition:transform .25s var(--ease); }

/* ===== WORKS ===== */
.works-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:12px;
}
.work-card {
  border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:4/3; cursor:pointer; position:relative;
  background:var(--surface); border:1px solid var(--border);
  will-change:transform, opacity;
}
.work-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.lightbox.active { opacity:1; pointer-events:auto; }
.lightbox img {
  max-width:90vw; max-height:85vh; border-radius:var(--radius-md);
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:scale(.96);
  transition:transform .3s var(--ease), opacity .25s ease;
  opacity:1;
}
.lightbox img.switching { opacity:0; transform:scale(.92); transition:opacity .15s ease, transform .2s ease; }
.lightbox-close {
  position:absolute; top:20px; right:20px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  border:none; font-size:28px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s; z-index:10;
}
.lightbox-close:hover { background:rgba(255,255,255,.2); }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  border:none; font-size:32px; cursor:pointer; z-index:10;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s; user-select:none;
}
.lightbox-nav:hover { background:rgba(255,255,255,.25); }
.lightbox-nav:active { background:rgba(255,255,255,.35); }
.lightbox-prev { left:20px; }
.lightbox-next { right:20px; }
.lightbox-counter {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.65); font-size:14px; font-weight:500;
  letter-spacing:1px; z-index:10; user-select:none;
}

/* ===== CONTACTS ===== */
.contacts-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.contact-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px 22px;
  display:flex; flex-direction:column; gap:16px;
  transition:all .35s var(--ease); text-decoration:none; color:var(--text);
  will-change:transform, opacity;
}
.contact-card:hover {
  transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.12);
  border-color:var(--border-2);
}
.contact-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text-2);
  transition:background .3s, color .3s;
}
.contact-card:hover .contact-icon {
  background:var(--accent); color:var(--accent-w);
}
.contact-icon svg { width:20px; height:20px; }
.contact-info { display:flex; flex-direction:column; gap:4px; }
.contact-label {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text-3);
}
.contact-value {
  font-size:16px; font-weight:700; letter-spacing:-.2px; color:var(--text);
}

/* Bots group */
.contacts-bots {
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:12px;
}
.bots-row {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.bot-hint {
  text-align:center; font-size:12px; font-weight:500;
  color:var(--text-3); margin:0;
  letter-spacing:.3px;
}

/* Bot links with QR popup */
.contact-link-bot {
  position:relative; display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:var(--text);
  transition:color .2s;
}
.contact-link-bot:hover { color:var(--accent); }
.contact-link-bot::after {
  content:''; display:inline-block; width:14px; height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='3' height='3'/%3E%3Crect x='18' y='18' width='3' height='3'/%3E%3Crect x='18' y='14' width='3' height='3'/%3E%3Crect x='14' y='18' width='3' height='3'/%3E%3C/svg%3E") no-repeat center;
  flex-shrink:0; opacity:.5;
}
.contact-link-bot:hover::after { opacity:.8; }

.qr-popup {
  position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) scale(.9);
  width:280px; height:auto; border-radius:var(--radius-md);
  border:2px solid var(--border-2); background:var(--bg);
  box-shadow:var(--shadow-xl);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:50;
  object-fit:contain; padding:12px;
}
.qr-popup::before {
  content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--bg); border-right:2px solid var(--border-2);
  border-bottom:2px solid var(--border-2);
}
.contact-link-bot:hover .qr-popup {
  opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1);
}

/* ===== ABOUT ===== */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
.about-text p {
  font-size:15px; line-height:1.7; color:var(--text-2); margin-bottom:14px;
}
.about-text p:last-child { margin-bottom:0; }
.about-services {
  display:flex; flex-direction:column; gap:12px;
}
.about-service {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-md); transition:all .3s var(--ease);
  will-change:transform, opacity;
}
.about-service:hover {
  border-color:var(--border-2); transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.about-svc-icon {
  width:40px; height:40px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--green-bg); color:var(--green);
  flex-shrink:0; transition:background .3s, color .3s;
}
.about-svc-icon svg { width:20px; height:20px; }
.about-service:hover .about-svc-icon {
  background:var(--accent); color:var(--accent-w);
}
.about-service span {
  font-size:14px; font-weight:600; color:var(--text);
}

/* Bot hint */
.bot-hint {
  grid-column:1 / -1;
  text-align:center;
  font-size:13px; font-weight:500; color:var(--text-3);
  margin:4px 0 0;
  letter-spacing:.1px;
}

/* ===== CTA BLOCK ===== */
.cta-block {
  background:var(--text); border-radius:var(--radius-xl);
  padding:56px 40px; text-align:center; position:relative; overflow:hidden;
  transition:background .4s;
}
.cta-block::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.cta-block::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:140px; height:140px; border-radius:50%;
  background:rgba(255,255,255,.03);
}
.cta-block h2 {
  font-size:30px; font-weight:800; letter-spacing:-1.2px;
  color:var(--bg); margin-bottom:12px; position:relative;
}
.cta-block p {
  font-size:16px; color:rgba(255,255,255,.5);
  max-width:420px; margin:0 auto 28px; line-height:1.6; position:relative;
}
.cta-block .btn { background:var(--bg); color:var(--text); position:relative; }
.cta-block .btn:hover { opacity:.9; transform:translateY(-2px); }

/* ===== FORM ===== */
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-2); margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:12px 14px; font-size:15px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); font-family:inherit; color:var(--text);
  transition:border-color .2s, background .4s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--text-2); }

/* ===== ORDER DASHBOARD ===== */
.order-dashboard { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.order-summary-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px; align-self:start;
  transition:background .4s, border-color .4s;
}
.order-line { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px; }
.order-line-label { color:var(--text-2); font-weight:500; }
.order-line-value {
  color:var(--text); font-weight:600; text-align:right;
  max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.order-line-value select {
  appearance:none; padding:6px 28px 6px 12px; font-size:13px; font-weight:600;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family:inherit; cursor:pointer; color:var(--text); min-width:140px;
  transition:border-color .2s, background .4s;
}
.order-line-value select:focus { outline:none; border-color:var(--text-2); }
.order-divider { height:1px; background:var(--border); margin:6px 0; }
.order-total .order-line-label { font-size:16px; font-weight:700; color:var(--text); }
.order-total .order-line-value { font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--text); }
#orderLineModel .order-line-value.empty { color:var(--text-3); font-weight:500; font-style:italic; }
.order-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.order-form-panel .form-group { margin-bottom:12px; }

/* ===== CALENDAR ===== */
.cal-box { margin-bottom:14px; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-title { font-size:14px; font-weight:700; color:var(--text); }
.cal-nav { display:flex; gap:4px; }
.cal-nav button {
  width:26px; height:26px; border:1px solid var(--border); background:var(--bg);
  border-radius:var(--radius-sm); cursor:pointer; font-size:13px;
  color:var(--text); transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.cal-nav button:hover { background:var(--surface); border-color:var(--border-2); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow {
  text-align:center; font-size:10px; font-weight:700; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.5px; padding:4px 0;
}
.cal-day {
  height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); font-size:13px; font-weight:500;
  cursor:pointer; background:var(--bg); border:none;
  transition:all .15s var(--ease); font-family:inherit; color:var(--text);
}
.cal-day:hover:not(:disabled) { background:var(--surface-2); }
.cal-day.selected { background:var(--text); color:var(--bg); }
[data-theme="slate"] .cal-day.selected,
[data-theme="midnight"] .cal-day.selected,
[data-theme="graphite"] .cal-day.selected { background:var(--accent); color:var(--accent-w); }
.cal-day:disabled { opacity:.3; cursor:not-allowed; }
.cal-day.today { font-weight:700; position:relative; }
.cal-day.today::after {
  content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:currentColor;
}
.cal-day.sunday { color:var(--text-3); }
.cal-day.blocked { opacity:.3; cursor:not-allowed; text-decoration:line-through; }
.cal-day.partly-blocked { position:relative; }
.cal-day.partly-blocked::after {
  content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}

/* ===== TIME SLOTS ===== */
.time-slots { display:flex; gap:12px; }
.time-slot {
  flex:1; padding:16px; text-align:center;
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; font-weight:700; font-size:15px;
  background:var(--bg); transition:all .2s var(--ease);
  font-family:inherit; color:var(--text);
}
.time-slot:hover:not(:disabled) { border-color:var(--text); }
.time-slot.selected { background:var(--text); color:var(--bg); border-color:var(--text); }
[data-theme="slate"] .time-slot.selected,
[data-theme="midnight"] .time-slot.selected,
[data-theme="graphite"] .time-slot.selected { background:var(--accent); color:var(--accent-w); border-color:var(--accent); }
.time-slot.disabled { opacity:.35; cursor:not-allowed; background:var(--surface-2); color:var(--text-3); border-color:var(--border); }
.time-slot.disabled small { opacity:.4; }
.time-slot small { display:block; font-size:11px; font-weight:500; opacity:.6; margin-top:4px; }

/* ===== iOS PICKER ===== */
.ios-modal {
  position:fixed; inset:0; z-index:600;
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.ios-modal.active { opacity:1; pointer-events:auto; }
.ios-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.ios-picker-sheet {
  position:relative;
  background:var(--bg); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:0 0 env(safe-area-inset-bottom, 0);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:1; max-height:60vh; overflow-y:auto;
}
.ios-modal.active .ios-picker-sheet { transform:translateY(0); }
.ios-picker-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg); z-index:2;
}
.ios-picker-bar button { background:none; border:none; font-size:16px; font-weight:500; color:var(--text-3); cursor:pointer; padding:4px; }
.ios-picker-bar button.ios-picker-done { color:var(--green); font-weight:600; }
.ios-picker-options { padding:8px 0; }
.ios-option { padding:14px 24px; font-size:17px; color:var(--text); cursor:pointer; transition:background .15s; position:relative; }
.ios-option:hover { background:var(--surface); }
.ios-option.selected { font-weight:600; }
.ios-option.selected::after {
  content:"\2713"; position:absolute; right:24px; top:50%; transform:translateY(-50%);
  color:var(--green); font-weight:600;
}
.ios-option + .ios-option { border-top:1px solid var(--border); }

/* ===== FOOTER ===== */
.footer {
  background:var(--surface); border-top:1px solid var(--border); padding:56px 0;
  transition:background .4s, border-color .4s;
}
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-info { display:flex; flex-direction:column; gap:6px; }
.footer-info span { font-size:13px; color:var(--text-2); }
.footer-info .bold { font-weight:600; color:var(--text); }
.footer-links a { font-size:13px; color:var(--text-2); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--text); text-decoration:underline; }

/* ===== TOAST ===== */
.toast {
  position:fixed; bottom:24px; right:24px;
  background:var(--text); color:var(--bg);
  padding:16px 24px; border-radius:var(--radius-md);
  box-shadow:var(--shadow-xl); z-index:300;
  transform:translateY(120%); opacity:0;
  transition:all .35s var(--ease); font-size:14px; font-weight:500;
  max-width:380px; line-height:1.5;
}
.toast.show { transform:translateY(0); opacity:1; }

/* ===== CONSENT ===== */
.consent-label a:hover { opacity:.8; }
#submitBtn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ===== COOKIE BANNER ===== */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--border);
  z-index:250;
  transform:translateY(100%);
  transition:transform .45s var(--ease);
}
.cookie-banner.show { transform:translateY(0); }
.cookie-inner {
  max-width:1160px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.cookie-text p { font-size:13px; color:var(--text-2); line-height:1.5; margin:0; }
.cookie-text a { color:var(--text); text-decoration:underline; }
.cookie-actions { display:flex; gap:10px; flex-shrink:0; }
.cookie-actions .btn { padding:10px 18px; font-size:13px; border-radius:var(--radius-sm); }
.cookie-actions .btn-outline { border:1px solid var(--border); background:transparent; color:var(--text); }
.cookie-actions .btn-outline:hover { background:var(--surface); }

/* ===== THEME SWITCHER (header dots) ===== */
.theme-switcher {
  display:flex; align-items:center; gap:6px;
}
.theme-dot {
  width:18px; height:18px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:0; transition:transform .2s, box-shadow .2s, border-color .2s;
  flex-shrink:0;
}
.theme-dot:hover { transform:scale(1.25); }
.theme-dot.active {
  border-color:var(--text);
  box-shadow:0 0 0 1px var(--bg), 0 2px 6px rgba(0,0,0,.2);
}

/* ===== ANIMATIONS ===== */
.fade-up {
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-up.visible { opacity:1; transform:translateY(0); }
.s1{transition-delay:60ms}.s2{transition-delay:120ms}.s3{transition-delay:180ms}
.s4{transition-delay:240ms}.s5{transition-delay:300ms}.s6{transition-delay:360ms}

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
  .nav { display:none; }
  .section { padding:48px 0; }
  .container { padding:0 16px; }

  /* Hero */
  .hero { padding:40px 0 36px; }
  .hero h1 { font-size:32px; letter-spacing:-1.2px; }
  .hero .lead { font-size:15px; max-width:none; margin-bottom:24px; }
  .hero-badge { font-size:12px; padding:5px 12px; margin-bottom:16px; }
  .hero::before { display:none; }

  /* Section heads */
  .section-head h2 { font-size:26px; letter-spacing:-1px; }
  .section-head p { font-size:14px; }
  .section-head { margin-bottom:28px; }

  /* Catalog: 2-col compact like ebash */
  .catalog-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .product-card { border-radius:var(--radius-md); }
  .product-img { aspect-ratio:4/3; }
  .product-flag { top:8px; left:8px; padding:3px 8px; font-size:10px; }
  .product-info { padding:10px 12px 12px; }
  .product-brand { font-size:10px; margin-bottom:2px; }
  .product-series { font-size:14px; margin-bottom:0; }
  .product-name { font-size:11px; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .product-meta { gap:4px; margin-bottom:8px; }
  .meta-tag { font-size:10px; padding:3px 7px; }
  .product-footer { padding-top:10px; }
  .product-price { font-size:17px; }
  .product-price-sub { font-size:10px; }
  .product-area { font-size:10px; padding:3px 7px; }
  .btu-tabs { margin-bottom:10px; }
  .btu-tab { padding:6px; font-size:11px; }

  /* Works: 2-col */
  .works-grid { grid-template-columns:repeat(2,1fr); gap:8px; }

  /* Calculator */
  .calc-layout { grid-template-columns:1fr; gap:16px; }
  .calc-power-value { font-size:34px; }
  .calc-models { grid-template-columns:1fr; }

  /* Order */
  .order-dashboard { grid-template-columns:1fr; }

  /* Lightbox */
  .lightbox-prev { left:8px; width:44px; height:44px; font-size:26px; }
  .lightbox-next { right:8px; width:44px; height:44px; font-size:26px; }

  /* Theme switcher on mobile: smaller dots in header */
  .theme-switcher { gap:4px; }
  .theme-dot { width:14px; height:14px; }

  /* Filters */
  .filters { gap:8px; padding:10px; }
  .filter-chip select { padding:8px 30px 8px 10px; font-size:13px; min-width:0; }

  /* CTA */
  .cta-block { padding:36px 20px; }
  .cta-block h2 { font-size:22px; }

  /* About */
  .about-grid { grid-template-columns:1fr; gap:24px; }

  /* Footer */
  .footer { padding:36px 0; }

  /* Cookie */
  .cookie-inner { flex-direction:column; align-items:flex-start; }
  .cookie-actions { width:100%; }
  .cookie-actions .btn { flex:1; }
}

@media (max-width:480px) {
  .hero h1 { font-size:26px; letter-spacing:-.8px; }
  .hero .lead { font-size:14px; }
  .section { padding:36px 0; }
  .section-head h2 { font-size:22px; }
  .section-head { margin-bottom:20px; }

  /* Catalog: 2-col very compact */
  .catalog-grid { gap:8px; }
  .product-info { padding:8px 10px 10px; }
  .product-brand { font-size:9px; }
  .product-series { font-size:13px; }
  .product-name { font-size:10px; margin-bottom:6px; }
  .product-meta { margin-bottom:6px; }
  .meta-tag { font-size:9px; padding:2px 6px; }
  .product-price { font-size:15px; }
  .product-price-sub { font-size:9px; }
  .product-area { font-size:9px; padding:2px 6px; }
  .btu-tab { padding:5px; font-size:10px; }
  .btu-tabs { margin-bottom:8px; }
  .product-footer { padding-top:8px; gap:8px; }

  /* Works: 2-col tight */
  .works-grid { gap:6px; }

  /* Calculator */
  .calc-toggles { flex-wrap:wrap; }

  /* Order */
  .order-form-row { grid-template-columns:1fr; }
  .time-slots { flex-wrap:wrap; gap:8px; }

  /* Footer */
  .footer-inner { flex-direction:column; text-align:center; gap:16px; }

  /* Info bar */
  .info-bar { flex-wrap:wrap; font-size:13px; padding:10px 14px; }

  /* Contacts */
  .contacts-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .bots-row { grid-template-columns:repeat(2,1fr); gap:10px; }
  .contact-card { padding:20px 16px; gap:14px; }
  .contact-icon { width:40px; height:40px; }
  .contact-icon svg { width:18px; height:18px; }
  .contact-value { font-size:15px; }
  .qr-popup { width:240px; padding:8px; }
}

@media (max-width:480px) {
  .contacts-grid { grid-template-columns:1fr; }
  .bots-row { grid-template-columns:1fr; }
  .qr-popup { width:220px; }
}

/* ===== ENHANCED ANIMATIONS ===== */

/* Hero entrance - staggered children */
.hero-content.fade-up.visible .hero-badge { animation:heroSlideIn .6s var(--ease) .1s both; }
.hero-content.fade-up.visible h1 { animation:heroSlideIn .6s var(--ease) .2s both; }
.hero-content.fade-up.visible .lead { animation:heroSlideIn .6s var(--ease) .3s both; }
.hero-content.fade-up.visible .hero-benefits { animation:heroSlideIn .6s var(--ease) .4s both; }
.hero-content.fade-up.visible .hero-actions { animation:heroSlideIn .6s var(--ease) .5s both; }
@keyframes heroSlideIn {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}

/* Section heads - slide in */
.section-head.fade-up { opacity:0; transform:translateY(16px); }
.section-head.fade-up.visible { opacity:1; transform:translateY(0); }

/* Product cards - hover lift + image zoom */
.product-card {
  cursor:pointer;
  will-change:transform, opacity;
}
.product-card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.product-card:hover .product-img img {
  transform:scale(1.06);
}

/* Product cards use base .fade-up + .s1-.s6 stagger (same as ebash) */

/* Work cards - hover zoom */
.work-card { transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.work-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.work-card:hover img { transform:scale(1.06); }
/* Work + Product cards use base .fade-up + .s1-.s6 stagger */

/* Info bar slide */
.info-bar.fade-up { opacity:0; transform:translateY(12px); }
.info-bar.fade-up.visible { opacity:1; transform:translateY(0); }

/* Calculator toggle entrance */
.calc-power-card.fade-up { opacity:0; transform:translateY(16px) scale(.98); }
.calc-power-card.fade-up.visible { opacity:1; transform:translateY(0) scale(1); }

/* Order dashboard reveal */
.order-dashboard.fade-up { opacity:0; transform:translateY(16px); }
.order-dashboard.fade-up.visible { opacity:1; transform:translateY(0); }

/* CTA block pulse */
.cta-block.fade-up.visible .btn {
  animation:ctaPulse 2.5s ease-in-out 1s 2;
}
@keyframes ctaPulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.04); }
}

/* Button active press */
.btn:active { transform:scale(.97); }
.btn-primary:active { transform:translateY(0) scale(.97); }

/* Nav link underline animation */
.nav a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background:var(--accent);
  transition:width .3s var(--ease);
}
.nav a:hover::after { width:100%; }

/* Theme dot spring */
.theme-dot:active { transform:scale(.9); }

/* Toast slide */
.toast.show { animation:toastIn .4s var(--ease); }
@keyframes toastIn {
  from { opacity:0; transform:translateY(16px) scale(.95); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce) {
  .fade-up, .fade-up.visible, .section-head.fade-up, .section-head.fade-up.visible,


  .info-bar.fade-up, .info-bar.fade-up.visible,
  .order-dashboard.fade-up, .order-dashboard.fade-up.visible,
  .calc-power-card.fade-up, .calc-power-card.fade-up.visible {
    opacity:1 !important; transform:none !important;
    transition:none !important; animation:none !important;
  }
  .hero-content.fade-up.visible .hero-badge,
  .hero-content.fade-up.visible h1,
  .hero-content.fade-up.visible .lead,
  .hero-content.fade-up.visible .hero-benefits,
  .hero-content.fade-up.visible .hero-actions {
    animation:none !important;
  }
  .product-card:hover, .work-card:hover {
    transform:none !important;
  }
  .product-card:hover .product-img img,
  .work-card:hover img {
    transform:none !important;
  }
  .cta-block.fade-up.visible .btn { animation:none !important; }
}