/* ==================== SAMPLE SITE POPUP ==================== */
.sample-popup{position:fixed;bottom:24px;right:24px;z-index:80;max-width:380px;background:linear-gradient(165deg,rgba(26,17,8,0.96) 0%,rgba(13,13,15,0.96) 100%);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,180,56,0.25);border-radius:18px;padding:24px;box-shadow:0 24px 60px -10px rgba(0,0,0,0.5),0 8px 24px -8px rgba(255,180,56,0.15);transform:translateY(120%);opacity:0;transition:transform 0.5s cubic-bezier(0.22,0.61,0.36,1),opacity 0.4s var(--ease);visibility:hidden}
.sample-popup.open{transform:translateY(0);opacity:1;visibility:visible}
.sample-popup::before{content:'';position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:2px}
.sample-popup-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:var(--text-soft);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;line-height:1;padding:0}
.sample-popup-close:hover{background:rgba(255,255,255,0.1);color:var(--text-strong);transform:rotate(90deg)}
.sample-popup-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,180,56,0.12);border:1px solid rgba(255,180,56,0.2);color:var(--accent);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;padding:5px 10px;border-radius:100px;margin-bottom:14px}
.sample-popup-icon{font-size:12px;line-height:1}
.sample-popup-title{font-family:var(--ff-display);font-size:22px;font-weight:400;line-height:1.2;color:var(--text-strong);margin-bottom:8px}
.sample-popup-title em{font-style:italic;color:var(--accent-soft)}
.sample-popup-body{font-size:13.5px;color:var(--text-soft);line-height:1.55;margin-bottom:18px}
.sample-popup-actions{display:flex;gap:10px}
.sample-popup-btn{flex:1;padding:11px 14px;font-size:13px;font-weight:600;border-radius:8px;border:none;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s;min-height:44px;line-height:1;font-family:inherit}
.sample-popup-btn.primary{background:var(--accent);color:#1A1108}
.sample-popup-btn.primary:hover{background:var(--accent-soft);transform:translateY(-1px)}
.sample-popup-btn.ghost{background:rgba(255,255,255,0.04);color:var(--text-soft);border:1px solid rgba(255,255,255,0.08)}
.sample-popup-btn.ghost:hover{background:rgba(255,255,255,0.08);color:var(--text-strong)}

@media (max-width:560px){
  .sample-popup{left:12px;right:12px;bottom:84px;max-width:none;padding:20px;border-radius:16px}
}

/* ==================== RESET & TOKENS ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* CSS variables — these get overwritten by adaptive lighting JS */
:root{
  /* Base palette */
  --bg:#0D0D0F;
  --bg-elevated:#181820;
  --bg-card:#1E1E26;
  --bg-hover:#252530;
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.18);

  /* Text — all pass WCAG AA on --bg (contrast 7:1+ for primary, 4.5:1+ for secondary) */
  --text:#FAF8F3;
  --text-strong:#FFFFFF;
  --text-soft:#C8C5BC;
  --text-muted:#8E8B82;

  /* Accents */
  --accent:#FFB438;
  --accent-soft:#FFCB6E;
  --accent-deep:#C77E10;
  --accent-glow:rgba(255,180,56,0.20);
  --accent-dim:rgba(255,180,56,0.10);
  --sky:#7BB4E0;
  --sky-dim:rgba(123,180,224,0.12);
  --green:#84D89A;
  --green-dim:rgba(132,216,154,0.12);

  /* Atmospheric tints — overlays driven by time of day */
  --ambient-tint:transparent;
  --ambient-glow-pos:50% 30%;

  /* Type scale (Google accessibility: body min 16px, line-height min 1.5) */
  --fs-xs:13px;
  --fs-sm:15px;
  --fs-body:17px;
  --fs-lg:19px;
  --fs-h3:24px;
  --fs-h2:clamp(34px,4.5vw,52px);
  --fs-h1:clamp(44px,6.5vw,80px);
  --fs-display:clamp(56px,9vw,108px);

  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'Inter','Helvetica Neue',sans-serif;

  --nav-h:72px;
  --max:1240px;
  --pad-x:clamp(20px,5vw,48px);
  --pad-y:clamp(72px,11vw,140px);
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-xl:28px;

  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --transition-color:color 0.6s var(--ease), background-color 0.6s var(--ease), border-color 0.6s var(--ease);
}

/* Time-of-day variations — applied via [data-time-mode] on body */
body[data-time-mode="dawn"]{
  --bg:#1A1318;
  --bg-elevated:#231A20;
  --bg-card:#2A2129;
  --accent:#FF9550;
  --accent-soft:#FFB880;
  --accent-deep:#C7501A;
  --accent-glow:rgba(255,149,80,0.20);
  --accent-dim:rgba(255,149,80,0.10);
  --ambient-tint:radial-gradient(ellipse 80% 50% at 80% 0%, rgba(255,149,80,0.10), transparent 60%);
}
body[data-time-mode="morning"]{
  --bg:#0F1216;
  --bg-elevated:#171B22;
  --bg-card:#1C2129;
  --accent:#FFC74A;
  --accent-soft:#FFE099;
  --accent-deep:#B07A0F;
  --accent-glow:rgba(255,199,74,0.22);
  --accent-dim:rgba(255,199,74,0.10);
  --ambient-tint:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,199,74,0.12), transparent 65%);
}
body[data-time-mode="midday"]{
  --bg:#0B0F14;
  --bg-elevated:#141A22;
  --bg-card:#1A2129;
  --accent:#FFD24A;
  --accent-soft:#FFE799;
  --accent-deep:#B08810;
  --accent-glow:rgba(255,210,74,0.18);
  --ambient-tint:radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,210,74,0.10), transparent 60%);
}
body[data-time-mode="afternoon"]{
  --bg:#11100F;
  --bg-elevated:#1C1B17;
  --bg-card:#22211D;
  --accent:#FFB438;
  --accent-soft:#FFCB6E;
  --accent-deep:#C77E10;
  --accent-glow:rgba(255,180,56,0.20);
  --ambient-tint:radial-gradient(ellipse 80% 50% at 70% 10%, rgba(255,180,56,0.12), transparent 60%);
}
body[data-time-mode="dusk"]{
  --bg:#180F0C;
  --bg-elevated:#221610;
  --bg-card:#291C15;
  --accent:#FF8849;
  --accent-soft:#FFB07B;
  --accent-deep:#B84A12;
  --accent-glow:rgba(255,136,73,0.22);
  --accent-dim:rgba(255,136,73,0.10);
  --ambient-tint:radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255,136,73,0.14), transparent 60%),radial-gradient(ellipse 60% 40% at 0% 100%, rgba(186,74,18,0.10), transparent 60%);
}
body[data-time-mode="night"]{
  --bg:#080A12;
  --bg-elevated:#10131C;
  --bg-card:#161A24;
  --accent:#A8C5FF;
  --accent-soft:#D4E0FF;
  --accent-deep:#3D5BAB;
  --accent-glow:rgba(168,197,255,0.18);
  --accent-dim:rgba(168,197,255,0.08);
  --ambient-tint:radial-gradient(ellipse 70% 40% at 30% 10%, rgba(168,197,255,0.10), transparent 60%),radial-gradient(ellipse 50% 40% at 90% 90%, rgba(61,91,171,0.08), transparent 60%);
}
/* Weather variations — applied on top of time-mode */
body[data-weather="cloudy"]{
  --accent-glow:rgba(255,180,56,0.10);
  --ambient-tint:radial-gradient(ellipse 100% 60% at 50% 0%, rgba(120,140,160,0.10), transparent 70%);
}
body[data-weather="rainy"]{
  --accent-glow:rgba(123,180,224,0.18);
  --ambient-tint:radial-gradient(ellipse 100% 60% at 30% 0%, rgba(80,110,140,0.18), transparent 70%),radial-gradient(ellipse 60% 50% at 80% 100%, rgba(60,90,120,0.10), transparent 60%);
}

/* Light mode — clean ivory background with orange accents only */
body[data-time-mode="light"]{
  --bg:#FAF8F3;
  --bg-elevated:#F2EFE7;
  --bg-card:#FFFFFF;
  --bg-hover:#F5F2EA;
  --border:rgba(20,20,24,0.10);
  --border-strong:rgba(20,20,24,0.18);
  --text:#1A1A1F;
  --text-strong:#0D0D0F;
  --text-soft:#454550;
  --text-muted:#7A7A85;
  --accent:#E8761A;
  --accent-soft:#FF9540;
  --accent-deep:#B05010;
  --accent-glow:rgba(232,118,26,0.16);
  --accent-dim:rgba(232,118,26,0.10);
  --sky:#2A6BAA;
  --sky-dim:rgba(42,107,170,0.08);
  --green:#4A9050;
  --green-dim:rgba(74,144,80,0.10);
  --ambient-tint:radial-gradient(ellipse 80% 50% at 70% 10%, rgba(232,118,26,0.08), transparent 60%);
}
body[data-time-mode="light"] nav.site-nav{background:rgba(250,248,243,0.85)}
body[data-time-mode="light"] .btn-primary,
body[data-time-mode="light"] .calc-cta,
body[data-time-mode="light"] .form-submit{color:#FFFFFF}
body[data-time-mode="light"] .calc-slider::-webkit-slider-thumb,
body[data-time-mode="light"] .calc-slider::-moz-range-thumb{border-color:var(--bg-card)}
body[data-time-mode="light"] .lighting-control{background:rgba(255,255,255,0.85);color:var(--text-strong)}
body[data-time-mode="light"] .lighting-menu{background:rgba(255,255,255,0.96);box-shadow:0 12px 40px rgba(0,0,0,0.12)}
body[data-time-mode="light"] .lighting-opt:hover{background:rgba(20,20,24,0.04)}
body[data-time-mode="light"] .mobile-drawer{background:rgba(250,248,243,0.98)}
body[data-time-mode="light"] .sample-popup{background:linear-gradient(165deg,rgba(255,255,255,0.96) 0%,rgba(248,245,238,0.96) 100%);border-color:rgba(232,118,26,0.25);box-shadow:0 24px 60px -10px rgba(0,0,0,0.15),0 8px 24px -8px rgba(232,118,26,0.15)}
body[data-time-mode="light"] .hero-grid-overlay{background-image:linear-gradient(rgba(20,20,24,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,24,0.04) 1px,transparent 1px)}
body[data-time-mode="light"] .btn-secondary{color:var(--text-strong)}

/* ==================== WEATHER EFFECTS ==================== */
.weather-fx{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.weather-fx-rain{position:absolute;inset:0;opacity:0;transition:opacity 0.8s ease}
body[data-weather="rainy"] .weather-fx-rain{opacity:1}
.rain-drop{position:absolute;top:-20%;width:1px;height:90px;background:linear-gradient(180deg,transparent 0%,rgba(180,200,220,0.25) 30%,rgba(200,215,230,0.45) 100%);animation:rain-fall linear infinite;will-change:transform}
@keyframes rain-fall{0%{transform:translateY(0)}100%{transform:translateY(120vh)}}
body[data-time-mode="light"] .rain-drop{background:linear-gradient(180deg,transparent 0%,rgba(80,110,140,0.18) 30%,rgba(60,90,120,0.32) 100%)}

.weather-fx-clouds{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(ellipse 60% 30% at 20% 15%,rgba(200,210,220,0.06) 0%,transparent 60%),radial-gradient(ellipse 70% 25% at 75% 25%,rgba(210,215,225,0.05) 0%,transparent 60%),radial-gradient(ellipse 50% 20% at 40% 10%,rgba(190,200,215,0.07) 0%,transparent 65%)}
body[data-weather="cloudy"] .weather-fx-clouds{opacity:1}
body[data-weather="rainy"] .weather-fx-clouds{opacity:0.7}
body[data-time-mode="light"] .weather-fx-clouds{background:radial-gradient(ellipse 60% 30% at 20% 15%,rgba(150,160,175,0.10) 0%,transparent 60%),radial-gradient(ellipse 70% 25% at 75% 25%,rgba(140,155,170,0.08) 0%,transparent 60%),radial-gradient(ellipse 50% 20% at 40% 10%,rgba(150,165,180,0.12) 0%,transparent 65%)}

.weather-fx-lightning{position:absolute;inset:0;background:rgba(255,255,255,0);pointer-events:none;mix-blend-mode:screen}
.weather-fx-lightning.flash{animation:lightning-strike 1.2s ease-out}
@keyframes lightning-strike{
  0%{background:rgba(255,255,255,0)}
  4%{background:rgba(220,225,255,0.6)}
  8%{background:rgba(255,255,255,0)}
  12%{background:rgba(255,255,255,0)}
  18%{background:rgba(200,215,255,0.85)}
  22%{background:rgba(255,255,255,0)}
  35%{background:rgba(180,200,255,0.5)}
  38%{background:rgba(255,255,255,0)}
  100%{background:rgba(255,255,255,0)}
}
body[data-time-mode="light"] .weather-fx-lightning{mix-blend-mode:multiply}

@media (prefers-reduced-motion:reduce){
  .rain-drop{animation:none;display:none}
  .weather-fx-lightning.flash{animation:none}
}

/* ==================== HERO TRUST — Google reviews + badges ==================== */
.hero-trust-google{display:flex;align-items:center;gap:10px}
.hero-trust-google-logo{width:22px;height:22px;flex-shrink:0}
.hero-trust-google-stars{font-size:13px;color:#FFB438;letter-spacing:1px;line-height:1}
.hero-trust-google-rating{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.hero-trust-google-meta{font-size:12px;color:var(--text-soft)}
.hero-trust-google-meta strong{color:var(--text-strong);font-weight:700}
.hero-trust-sep{width:1px;height:32px;background:var(--border);flex-shrink:0}
.hero-trust-badges{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-trust .hero-trust-item strong{color:var(--text-strong);font-weight:600}

/* ==================== BASE ==================== */
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  transition:var(--transition-color);
}
body::before{
  content:'';
  position:fixed;inset:0;
  background:var(--ambient-tint);
  pointer-events:none;
  z-index:0;
  transition:background 1.2s var(--ease);
}
main{position:relative;z-index:1}

a{color:var(--accent);text-decoration:none;transition:opacity 0.2s}
a:hover{opacity:0.85}

/* Typography */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:300;line-height:1.05;letter-spacing:-0.015em;color:var(--text-strong)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}
em{font-style:italic;color:var(--accent-soft)}

/* ==================== UTILITIES ==================== */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
.section{padding:var(--pad-y) 0;position:relative}
.eyebrow{font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--accent)}
.lead-text{font-size:var(--fs-lg);color:var(--text-soft);line-height:1.65;font-weight:400;max-width:580px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-sm);font-weight:500;letter-spacing:0.01em;padding:14px 26px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:transform 0.15s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;text-decoration:none;line-height:1;min-height:48px}
.btn:hover{transform:translateY(-1px);opacity:1}
.btn-primary{background:var(--accent);color:#1A1108;font-weight:600}
.btn-primary:hover{background:var(--accent-soft)}
.btn-secondary{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--text-soft);background:rgba(255,255,255,0.04)}
.btn-wa{background:#25D366;color:#0A2114;font-weight:600}
.btn-wa:hover{background:#3BE077}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Fade-up reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.8s var(--ease), transform 0.8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:0.08s}
.reveal-d2{transition-delay:0.16s}
.reveal-d3{transition-delay:0.24s}

/* ==================== ADAPTIVE LIGHTING BADGE ==================== */
.lighting-control{position:fixed;top:calc(var(--nav-h) + 14px);right:var(--pad-x);z-index:50;display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(20,20,28,0.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:100px;font-size:var(--fs-xs);color:var(--text-soft);transition:opacity 0.3s, transform 0.3s;cursor:pointer}
.lighting-control:hover{background:rgba(30,30,40,0.8);transform:translateY(-1px)}
.lighting-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--accent);transition:color 0.6s var(--ease)}
.lighting-text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.lighting-time{font-weight:600;color:var(--text-strong);font-size:12px;letter-spacing:0.02em}
.lighting-mode{font-size:10px;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase}

.lighting-menu{position:fixed;top:calc(var(--nav-h) + 56px);right:var(--pad-x);z-index:50;width:220px;background:rgba(20,20,28,0.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid var(--border);border-radius:14px;padding:8px;display:none;flex-direction:column;gap:2px;box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.lighting-menu.open{display:flex;animation:fadeSlideIn 0.25s var(--ease)}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lighting-menu-head{font-size:10px;font-weight:600;letter-spacing:0.12em;color:var(--text-muted);text-transform:uppercase;padding:10px 12px 6px}
.lighting-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;background:none;border:none;color:var(--text-soft);font-size:13px;text-align:left;cursor:pointer;border-radius:8px;font-family:inherit;transition:background 0.2s;width:100%}
.lighting-opt:hover{background:rgba(255,255,255,0.04);color:var(--text-strong)}
.lighting-opt.active{background:var(--accent-dim);color:var(--accent-soft)}
.lighting-opt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ==================== NAVIGATION ==================== */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);background:rgba(13,13,15,0.7);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border-bottom:1px solid var(--border);transition:background 0.4s var(--ease)}
.nav-row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{width:34px;height:34px;flex-shrink:0}
.brand-name{font-family:var(--ff-display);font-size:22px;font-weight:500;color:var(--text-strong);letter-spacing:0.005em;line-height:1}

.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:var(--text-soft);letter-spacing:0.005em;position:relative;padding:6px 0}
.nav-links a:hover{color:var(--text-strong);opacity:1}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform 0.3s var(--ease);transform-origin:center}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions .btn{padding:11px 20px;min-height:44px;font-size:13px}

.hamburger{display:none;flex-direction:column;gap:5px;padding:10px;background:none;border:none;cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.hamburger span{width:22px;height:1.5px;background:var(--text-soft);transition:transform 0.3s var(--ease), opacity 0.2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-drawer{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:39;background:rgba(13,13,15,0.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:24px var(--pad-x) calc(24px + env(safe-area-inset-bottom));transform:translateY(-110%);transition:transform 0.4s var(--ease);visibility:hidden;overflow-y:auto;display:flex;flex-direction:column}
.mobile-drawer.open{transform:translateY(0);visibility:visible}
.mobile-drawer ul{list-style:none;display:flex;flex-direction:column;gap:0;margin:0 0 24px}
.mobile-drawer ul a{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;border-bottom:1px solid var(--border);font-size:17px;color:var(--text);font-weight:400;text-decoration:none;transition:color 0.2s,padding-left 0.2s}
.mobile-drawer ul a:hover{color:var(--accent);padding-left:8px}
.mobile-drawer ul a span{color:var(--text-muted);font-size:18px;transition:color 0.2s,transform 0.2s}
.mobile-drawer ul a:hover span{color:var(--accent);transform:translateX(4px)}
.mob-cta{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px;border-top:1px solid var(--border)}
.mob-cta .btn{width:100%;padding:16px;font-size:15px;min-height:54px}
.mob-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mob-cta-row .btn{padding:14px;font-size:14px;min-height:48px}
.mob-contact{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;color:var(--text-muted);margin-top:8px}
.mob-contact a{color:var(--text-soft);font-weight:500}

/* ==================== HERO ==================== */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:var(--nav-h);position:relative;overflow:hidden}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 100%);pointer-events:none;z-index:1}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 0.95fr;gap:80px;align-items:center;padding:80px 0 60px}

.live-strip{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;margin-bottom:24px;width:fit-content;font-size:13px;color:var(--text-soft)}
.live-strip-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(132,216,154,0.5);animation:pulse-ring 2s infinite}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(132,216,154,0.5)}70%{box-shadow:0 0 0 10px rgba(132,216,154,0)}100%{box-shadow:0 0 0 0 rgba(132,216,154,0)}}
.live-strip-sep{color:var(--text-muted)}
.live-strip strong{color:var(--text-strong);font-weight:500}

.hero-h1{margin-bottom:28px}
.hero-h1 em{display:block}
.hero-lede{margin-bottom:40px;max-width:520px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:48px}

.hero-trust{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--border)}
.hero-trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.hero-trust-item svg{color:var(--accent);flex-shrink:0;width:16px;height:16px}

/* Hero calculator card */
.calc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;position:relative;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,0.4)}
.calc-card::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.calc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;position:relative}
.calc-head-label{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
.calc-weather-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;font-size:11px;color:var(--text-soft);font-weight:500}
.calc-bill-display{font-family:var(--ff-display);font-size:56px;font-weight:300;color:var(--text-strong);letter-spacing:-0.02em;line-height:1;margin-bottom:6px;position:relative}
.calc-bill-label{font-size:13px;color:var(--text-muted);margin-bottom:22px;position:relative}
.calc-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:rgba(255,255,255,0.08);border-radius:2px;outline:none;cursor:pointer;margin-bottom:24px;position:relative}
.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg-card);box-shadow:0 0 0 1px var(--accent),0 4px 12px rgba(0,0,0,0.3)}
.calc-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg-card);box-shadow:0 0 0 1px var(--accent)}
.calc-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.calc-cell{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px}
.calc-cell-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:6px}
.calc-cell-val{font-family:var(--ff-display);font-size:24px;font-weight:400;line-height:1.1}
.calc-cell-val.green{color:var(--green)}
.calc-cell-val.sky{color:var(--sky)}
.calc-cell-val.accent{color:var(--accent)}
.calc-cell-sub{font-size:11px;color:var(--text-muted);margin-top:3px}
.calc-cta{margin-top:18px;width:100%;padding:14px;background:var(--accent);color:#1A1108;font-weight:600;font-size:14px;border:none;border-radius:var(--r-sm);cursor:pointer;transition:background 0.2s, transform 0.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.calc-cta:hover{background:var(--accent-soft);transform:translateY(-1px)}

/* ==================== TICKER STRIP ==================== */
.ticker{background:var(--bg-elevated);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px 0;overflow:hidden;position:relative}
.ticker-track{display:flex;gap:0;animation:ticker-scroll 40s linear infinite;width:max-content}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{display:flex;align-items:center;gap:14px;padding:0 32px;border-right:1px solid var(--border);white-space:nowrap}
.ticker-val{font-family:var(--ff-display);font-size:26px;font-weight:400;color:var(--accent);line-height:1}
.ticker-label{font-size:13px;color:var(--text-soft);line-height:1.3}

/* ==================== LIVE GENERATION SECTION ==================== */
.live-section{padding:80px 0;border-bottom:1px solid var(--border)}
.live-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.live-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.live-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden}
.live-stat-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--accent-dim);color:var(--accent)}
.live-stat-val{font-family:var(--ff-display);font-size:36px;font-weight:400;color:var(--text-strong);line-height:1;margin-bottom:6px;display:flex;align-items:baseline;gap:4px}
.live-stat-val small{font-size:18px;font-weight:400;color:var(--accent)}
.live-stat-label{font-size:13px;color:var(--text-muted);letter-spacing:0.02em}

/* ==================== SOLUTIONS ==================== */
.solutions-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
.sol-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:border-color 0.4s var(--ease), transform 0.4s var(--ease);position:relative}
.sol-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.sol-visual{height:240px;background:var(--bg-elevated);position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);overflow:hidden}
.sol-visual-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,15,0) 40%,rgba(13,13,15,0.4) 100%);pointer-events:none;z-index:1}
.sol-visual-placeholder{padding:24px;text-align:center;color:var(--text-muted);font-size:13px;line-height:1.6;max-width:280px}
.sol-visual-placeholder strong{display:block;color:var(--accent);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.illust-badge{position:absolute;top:14px;right:14px;background:var(--accent-dim);border:1px solid rgba(255,180,56,0.3);color:var(--accent);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.sol-body{padding:28px}
.sol-tag{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.sol-title{font-family:var(--ff-display);font-size:30px;font-weight:400;color:var(--text-strong);margin-bottom:12px;line-height:1.1}
.sol-desc{font-size:15px;color:var(--text-soft);line-height:1.65;margin-bottom:20px}
.sol-specs{display:flex;flex-wrap:wrap;gap:8px}
.sol-pill{font-size:12px;color:var(--text-soft);background:var(--bg);border:1px solid var(--border);padding:6px 14px;border-radius:100px}

/* ==================== PROCESS / HOW IT WORKS ==================== */
.process-section{background:var(--bg-elevated)}
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:64px;position:relative}
.process-grid::before{content:'';position:absolute;top:32px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.35}
.process-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 18px;position:relative;z-index:1}
.process-num{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:22px;font-weight:400;margin-bottom:20px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);transition:all 0.3s var(--ease)}
.process-step.active .process-num{background:var(--accent);color:#1A1108;border-color:var(--accent);transform:scale(1.05)}
.process-step.done .process-num{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
.process-title{font-size:15px;font-weight:600;color:var(--text-strong);margin-bottom:8px}
.process-step:not(.active):not(.done) .process-title{color:var(--text-muted)}
.process-desc{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:10px}
.process-eta{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;letter-spacing:0.04em}
.process-eta.now{background:var(--green-dim);color:var(--green)}
.process-eta.next{background:var(--accent-dim);color:var(--accent)}
.process-eta.later{background:var(--bg-card);color:var(--text-muted);border:1px solid var(--border)}

/* ==================== TECH SPECS ==================== */
.specs-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:flex-start}
.specs-sticky{position:sticky;top:calc(var(--nav-h) + 32px)}
.specs-list{display:flex;flex-direction:column;gap:14px}
.spec-row{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;align-items:flex-start;gap:20px;transition:border-color 0.3s var(--ease)}
.spec-row:hover{border-color:var(--accent)}
.spec-row-icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.spec-row-icon svg{width:24px;height:24px}
.spec-row-body{flex:1}
.spec-row-name{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.spec-row-val{font-size:17px;font-weight:600;color:var(--text-strong);margin-bottom:4px}
.spec-row-detail{font-size:14px;color:var(--text-soft);line-height:1.6;margin-bottom:10px}
.spec-row-badge{display:inline-block;font-size:11px;font-weight:600;padding:4px 12px;border-radius:100px;background:var(--accent-dim);color:var(--accent)}

/* ==================== GALLERY ==================== */
.gallery-section{background:var(--bg-elevated)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:280px 280px;gap:14px;margin-top:48px}
.gallery-item{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;transition:transform 0.4s var(--ease)}
.gallery-item:hover{transform:translateY(-2px)}
.gallery-item.wide{grid-column:span 2}
.gallery-item.tall{grid-row:span 2}
.gallery-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--text-muted);font-size:12px;line-height:1.6}
.gallery-placeholder strong{color:var(--accent);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.gallery-overlay{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.92) 100%);color:var(--text-strong);font-size:14px;line-height:1.4;font-weight:600;z-index:2;pointer-events:none}
.gallery-overlay small{display:block;font-size:11px;color:rgba(255,255,255,0.85);margin-top:4px;font-weight:400}

/* ==================== VIDEO TESTIMONIALS ==================== */
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.video-card{aspect-ratio:9/16;border-radius:var(--r-lg);background:var(--bg-card);border:1px solid var(--border);overflow:hidden;position:relative;cursor:pointer;transition:transform 0.4s var(--ease)}
.video-card:hover{transform:translateY(-3px)}
.video-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.95) 100%);z-index:1;pointer-events:none}
.video-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--accent);color:#1A1108;display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px;box-shadow:0 6px 24px rgba(255,180,56,0.4);transition:transform 0.25s var(--ease);z-index:2}
.video-card:hover .video-play-btn{transform:translate(-50%,-50%) scale(1.1)}
.video-meta{position:absolute;bottom:14px;left:14px;right:14px;color:var(--text-strong);z-index:2;font-size:13px;font-weight:600;line-height:1.4}
.video-meta small{display:block;font-size:11px;color:rgba(255,255,255,0.85);margin-top:3px;font-weight:400}
.video-duration{position:absolute;top:14px;right:14px;background:rgba(0,0,0,0.75);color:#fff;font-size:11px;font-weight:500;padding:4px 8px;border-radius:6px;z-index:2;backdrop-filter:blur(4px)}

/* ==================== APP SECTION ==================== */
.app-section{position:relative}
.app-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.app-mock{display:flex;justify-content:center}
.app-phone{width:300px;background:var(--bg-card);border-radius:42px;overflow:hidden;border:3px solid var(--bg-elevated);box-shadow:0 30px 80px -20px rgba(0,0,0,0.6)}
.app-top{padding:14px 22px 8px;background:var(--bg-card);display:flex;justify-content:space-between;align-items:center}
.app-top-time{font-size:13px;font-weight:600;color:var(--text-strong)}
.app-screen{background:var(--bg);padding:22px}
.app-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.app-hdr-logo{font-family:var(--ff-display);font-size:18px;font-weight:500;color:var(--accent)}
.app-hdr-live{font-size:10px;font-weight:600;color:var(--green);background:var(--green-dim);padding:3px 10px;border-radius:100px;display:flex;align-items:center;gap:5px}
.app-loc{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:18px;text-align:center}
.app-ring{display:flex;justify-content:center;margin-bottom:18px}
.app-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.app-stat-tile{background:var(--bg-card);border-radius:10px;padding:11px;text-align:center}
.app-stat-tile-v{font-family:var(--ff-display);font-size:18px;font-weight:400;color:var(--text-strong);margin-bottom:3px}
.app-stat-tile-l{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.app-mini-chart{background:var(--bg-card);border-radius:10px;padding:12px;height:60px;display:flex;align-items:flex-end;gap:4px}
.app-mini-chart-bar{flex:1;border-radius:3px;background:var(--accent-dim);min-height:5px}
.app-mini-chart-bar.hi{background:var(--accent)}
.app-bottom-nav{background:var(--bg-card);padding:14px 0 18px;display:flex;justify-content:space-around;border-top:1px solid var(--border)}
.app-bnav-icon{font-size:18px;color:var(--text-muted);margin-bottom:3px}
.app-bnav-icon.active{color:var(--accent)}
.app-bnav-label{font-size:9px;color:var(--text-muted);letter-spacing:0.06em;font-weight:600}
.app-bnav-label.active{color:var(--accent)}

.app-features{display:flex;flex-direction:column;gap:22px;margin-top:40px}
.app-feat{display:flex;gap:18px}
.app-feat-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-dim);color:var(--accent)}
.app-feat-icon svg{width:22px;height:22px}
.app-feat-title{font-size:15px;font-weight:600;color:var(--text-strong);margin-bottom:5px}
.app-feat-desc{font-size:14px;color:var(--text-soft);line-height:1.6}
.app-store-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.app-store-btn{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 18px;text-decoration:none;transition:border-color 0.2s}
.app-store-btn:hover{border-color:var(--accent);opacity:1}
.app-store-icon{font-size:22px}
.app-store-text small{display:block;font-size:10px;color:var(--text-muted);line-height:1;margin-bottom:3px}
.app-store-text strong{font-size:14px;color:var(--text-strong);font-weight:600}

/* ==================== TESTIMONIALS ==================== */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.test-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;transition:border-color 0.3s var(--ease)}
.test-card:hover{border-color:var(--accent)}
.test-stars{color:var(--accent);font-size:14px;letter-spacing:3px;margin-bottom:16px}
.test-quote{font-family:var(--ff-display);font-size:19px;font-weight:300;color:var(--text-strong);line-height:1.5;font-style:italic;margin-bottom:24px}
.test-meta{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.test-avatar{width:46px;height:46px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0}
.test-name{font-size:14px;font-weight:600;color:var(--text-strong)}
.test-detail{font-size:12px;color:var(--text-muted);margin-top:2px}
.test-savings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding-top:20px;border-top:1px solid var(--border)}
.test-saving{text-align:center}
.test-saving-v{font-family:var(--ff-display);font-size:19px;font-weight:400}
.test-saving-l{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:4px}

/* ==================== BLOG / LEARN ==================== */
.learn-section{background:var(--bg-elevated)}
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.learn-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:transform 0.4s var(--ease), border-color 0.3s var(--ease);cursor:pointer}
.learn-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.learn-img{height:200px;background:var(--bg);position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);overflow:hidden}
.learn-img-placeholder{padding:20px;color:var(--text-muted);font-size:11px;text-align:center;line-height:1.6}
.learn-img-placeholder strong{display:block;color:var(--accent);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.learn-body{padding:24px}
.learn-cat{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.learn-title{font-family:var(--ff-display);font-size:21px;font-weight:400;color:var(--text-strong);line-height:1.25;margin-bottom:12px}
.learn-excerpt{font-size:14px;color:var(--text-soft);line-height:1.65;margin-bottom:18px}
.learn-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted)}
.learn-cats-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.learn-cat-chip{padding:8px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--text-soft);text-decoration:none;transition:all 0.2s}
.learn-cat-chip:hover,.learn-cat-chip.active{background:var(--accent);color:#1A1108;border-color:var(--accent);opacity:1}

/* ==================== FAQ ==================== */
.faq-list{display:flex;flex-direction:column;margin-top:48px;max-width:760px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;font-size:17px;font-weight:500;color:var(--text-strong);text-align:left;font-family:inherit;gap:24px;line-height:1.5}
.faq-q:hover{color:var(--accent)}
.faq-icon{flex-shrink:0;width:28px;height:28px;border:1px solid var(--border-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;transition:transform 0.3s var(--ease)}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;font-size:15px;color:var(--text-soft);line-height:1.75;transition:max-height 0.4s var(--ease),padding 0.3s}
.faq-item.open .faq-a{max-height:400px;padding:0 0 24px}

/* ==================== LEAD CAPTURE ==================== */
.lead-section{position:relative;overflow:hidden}
.lead-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 75% 50%,var(--accent-glow),transparent 60%);pointer-events:none}
.lead-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative}
.lead-benefits{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.lead-benefit{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-soft);line-height:1.55}
.lead-benefit-check{color:var(--green);flex-shrink:0;margin-top:2px}

.lead-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px;position:relative}
.lead-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-soft),var(--accent));border-radius:var(--r-xl) var(--r-xl) 0 0}
.lead-title{font-family:var(--ff-display);font-size:30px;font-weight:400;color:var(--text-strong);margin-bottom:8px;line-height:1.15}
.lead-sub{font-size:14px;color:var(--text-muted);margin-bottom:32px}
.lead-form{display:flex;flex-direction:column;gap:18px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-label{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-soft)}
.form-input{width:100%;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:15px 18px;font-size:16px;font-weight:400;color:var(--text-strong);outline:none;transition:border-color 0.2s, background 0.2s;font-family:inherit;min-height:52px}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{border-color:var(--accent);background:rgba(255,180,56,0.04)}
.form-pincode-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.pincode-status{font-size:12px;color:var(--green);padding-bottom:18px;display:none;align-items:center;gap:5px;font-weight:500}
.pincode-status.show{display:flex}
.form-submit{width:100%;padding:18px;background:#25D366;color:#0A2114;font-weight:600;font-size:15px;border:none;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;transition:background 0.2s, transform 0.15s;min-height:56px}
.form-submit:hover{background:#3BE077;transform:translateY(-1px)}
.form-submit:disabled{background:var(--bg-elevated);color:var(--text-muted);cursor:not-allowed;transform:none}
.form-note{font-size:12px;color:var(--text-muted);text-align:center;margin-top:14px;line-height:1.6}
.form-note strong{color:var(--text-soft);font-weight:600}

/* ==================== FOOTER ==================== */
footer{background:var(--bg);border-top:1px solid var(--border);padding:80px 0 36px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px}
.foot-brand{max-width:340px}
.foot-logo{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.foot-tag{font-size:14px;color:var(--text-soft);line-height:1.65;margin-bottom:24px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-soft);transition:border-color 0.2s, color 0.2s}
.foot-social a:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.foot-col-title{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-links a{font-size:14px;color:var(--text-soft);text-decoration:none;font-weight:400}
.foot-links a:hover{color:var(--text-strong);opacity:1}
.foot-certs{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.foot-cert{padding:7px 13px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);font-size:11px;color:var(--text-soft);font-weight:500}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--border);font-size:13px;color:var(--text-muted);flex-wrap:wrap;gap:16px}
.foot-legal{display:flex;gap:24px}
.foot-legal a{color:var(--text-muted);text-decoration:none}
.foot-legal a:hover{color:var(--text-soft);opacity:1}

/* ==================== FLOATING WHATSAPP ==================== */
.wa-fab{position:fixed;bottom:32px;right:32px;z-index:30;width:60px;height:60px;border-radius:50%;background:#25D366;color:white;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,0.35);transition:transform 0.2s, box-shadow 0.2s}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 12px 32px rgba(37,211,102,0.5);opacity:1}
.wa-fab svg{width:30px;height:30px}

/* ==================== MOBILE STICKY ==================== */
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:30;padding:12px var(--pad-x) calc(12px + env(safe-area-inset-bottom));background:rgba(13,13,15,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);gap:10px}
.mob-sticky .btn{flex:1;padding:14px;font-size:14px;min-height:52px}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:48px;padding:40px 0}
  .hero-visual{order:-1;max-width:520px;margin:0 auto;width:100%}
  .solutions-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .process-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .process-grid::before{display:none}
  .specs-inner{grid-template-columns:1fr;gap:48px}
  .specs-sticky{position:static}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:240px 240px 240px 240px}
  .gallery-item.wide{grid-column:span 2}
  .gallery-item.tall{grid-row:span 1}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .app-inner{grid-template-columns:1fr;gap:60px}
  .app-mock{order:-1}
  .test-grid{grid-template-columns:1fr 1fr}
  .learn-grid{grid-template-columns:1fr 1fr}
  .lead-inner{grid-template-columns:1fr;gap:48px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .lighting-control{top:auto;bottom:88px;right:14px}
  .lighting-menu{top:auto;bottom:calc(88px + 46px);right:14px}
}

@media (max-width:768px){
  :root{--nav-h:62px;--fs-body:16px;--fs-lg:17px}
  .nav-links,.nav-actions{display:none}
  .hamburger{display:flex}
  .hero{min-height:auto;padding-bottom:60px}
  /* On mobile, calculator goes BELOW the hero content (H1 + trust + CTAs first) */
  .hero-content{order:1}
  .hero-visual{order:2}
  .hero-actions{width:100%;flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-trust{gap:14px 24px}
  .hero-trust-sep{display:none}
  .hero-trust-badges{gap:12px 18px}
  .calc-bill-display{font-size:46px}
  .live-section .live-inner{grid-template-columns:1fr;gap:40px}
  .live-stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .live-stat{padding:18px}
  .live-stat-val{font-size:30px}
  .process-grid{grid-template-columns:1fr;max-width:420px;margin:48px auto 0}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:240px}
  .gallery-item.wide,.gallery-item.tall{grid-column:auto;grid-row:auto}
  .video-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .test-grid,.learn-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .mob-sticky{display:flex}
  body{padding-bottom:72px}
  .wa-fab{display:none}
  .lighting-control{bottom:84px}
  .lighting-menu{bottom:130px}
  .lead-card{padding:28px 22px}
  .test-card{padding:24px}
  .container{padding:0 20px}
  .specs-inner{gap:36px}
  .spec-row{padding:18px;gap:14px;flex-direction:column;align-items:flex-start}
}

@media (max-width:420px){
  .calc-results{grid-template-columns:1fr 1fr;gap:8px}
  .calc-cell{padding:12px}
  .calc-cell-val{font-size:20px}
  .live-stat{padding:16px}
  .live-stat-val{font-size:26px}
  .test-savings{gap:6px}
  .test-saving-v{font-size:16px}
  .hero-h1{font-size:42px}
  .ticker-val{font-size:22px}
  .video-grid{grid-template-columns:1fr 1fr}
}

/* ==================== INNER PAGE HEADER ==================== */
.page-header{padding:calc(var(--nav-h) + 64px) 0 64px;position:relative;border-bottom:1px solid var(--border);overflow:hidden}
.page-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,var(--accent-glow),transparent 65%);pointer-events:none}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);margin-bottom:24px;position:relative;flex-wrap:wrap}
.breadcrumb a{color:var(--text-soft);text-decoration:none;transition:color 0.2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current]{color:var(--accent)}
.page-title{font-family:var(--ff-display);font-size:var(--fs-h1);font-weight:300;line-height:1.05;letter-spacing:-0.015em;color:var(--text-strong);margin-bottom:20px;position:relative}
.page-title em{font-style:italic;color:var(--accent-soft)}
.page-lede{font-size:var(--fs-lg);color:var(--text-soft);line-height:1.6;max-width:620px;position:relative}

/* ==================== GENERIC PAGE PATTERNS ==================== */
.detail-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:80px}
.detail-block-reverse{grid-template-columns:1fr 1fr}
.detail-img{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:var(--bg-card);aspect-ratio:4/3;position:relative}
.detail-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-body h2{margin-bottom:16px}
.detail-body p{font-size:var(--fs-body);color:var(--text-soft);line-height:1.7;margin-bottom:14px}
.detail-body ul{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:12px}
.detail-body ul li{display:flex;gap:12px;font-size:var(--fs-body);color:var(--text-soft);line-height:1.6}
.detail-body ul li::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:11px}

.cta-band{margin-top:80px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:48px;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,var(--accent-glow),transparent 60%);pointer-events:none}
.cta-band h2{margin-bottom:14px;position:relative}
.cta-band p{font-size:var(--fs-lg);color:var(--text-soft);max-width:540px;margin:0 auto 32px;line-height:1.6;position:relative}
.cta-band-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

@media (max-width:768px){
  .page-header{padding:calc(var(--nav-h) + 40px) 0 44px}
  .detail-block,.detail-block-reverse{grid-template-columns:1fr;gap:32px;margin-top:48px}
  .detail-img{aspect-ratio:3/2}
  .cta-band{padding:36px 24px;margin-top:56px}
  .cta-band-actions{flex-direction:column}
  .cta-band-actions .btn{width:100%}
}

/* ==================== ARTICLE / BLOG POST ==================== */
.article-wrap{max-width:760px;margin:0 auto;padding:0 var(--pad-x)}
.article-hero-img{width:100%;border-radius:var(--r-lg);margin-bottom:48px;aspect-ratio:16/9;object-fit:cover}
.article-body{font-size:var(--fs-body);color:var(--text-soft);line-height:1.8}
.article-body h2{margin:48px 0 20px;font-size:30px}
.article-body h3{margin:32px 0 16px;color:var(--text-strong)}
.article-body p{margin-bottom:20px}
.article-body ul,.article-body ol{margin:20px 0 20px 24px}
.article-body li{margin-bottom:10px}
.article-body strong{color:var(--text-strong);font-weight:600}
.article-body blockquote{border-left:3px solid var(--accent);padding:8px 0 8px 20px;margin:32px 0;font-family:var(--ff-display);font-style:italic;font-size:22px;color:var(--text);line-height:1.5}
.article-meta-row{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--text-muted);margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border);flex-wrap:wrap}

/* ==================== GALLERY PAGE ==================== */
.gallery-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.gallery-filter-chip{padding:8px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--text-soft);cursor:pointer;transition:all 0.2s;font-family:inherit}
.gallery-filter-chip:hover{border-color:var(--accent);color:var(--accent)}
.gallery-filter-chip.active{background:var(--accent);color:#1A1108;border-color:var(--accent);font-weight:600}
.gallery-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-full-grid .gallery-item{aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--bg-card);border:1px solid var(--border);position:relative;overflow:hidden}
@media (max-width:1024px){.gallery-full-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery-full-grid{grid-template-columns:1fr}}

/* ==================== CONTACT PAGE ==================== */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;margin-top:48px}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;gap:16px;align-items:flex-start;transition:border-color 0.2s}
.contact-info-card:hover{border-color:var(--accent)}
.contact-info-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-label{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);font-weight:600;margin-bottom:4px}
.contact-info-val{font-size:16px;color:var(--text-strong);font-weight:500;margin-bottom:2px;word-break:break-word}
.contact-info-val a{color:var(--text-strong);text-decoration:none}
.contact-info-val a:hover{color:var(--accent)}
.contact-info-sub{font-size:13px;color:var(--text-muted)}
.contact-map{height:280px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px;text-align:center;padding:20px;margin-top:16px}
@media (max-width:1024px){.contact-grid{grid-template-columns:1fr}}

/* ==================== ABOUT TIMELINE ==================== */
.timeline{display:flex;flex-direction:column;gap:0;margin-top:48px;position:relative;padding-left:48px}
.timeline::before{content:'';position:absolute;left:18px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--accent),transparent)}
.timeline-item{position:relative;padding-bottom:32px}
.timeline-item::before{content:'';position:absolute;left:-37px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.timeline-year{font-family:var(--ff-display);font-size:32px;font-weight:400;color:var(--accent);line-height:1;margin-bottom:8px}
.timeline-title{font-size:17px;font-weight:600;color:var(--text-strong);margin-bottom:6px}
.timeline-desc{font-size:14px;color:var(--text-soft);line-height:1.7}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;text-align:center}
.team-avatar{width:80px;height:80px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:28px;font-weight:400;margin:0 auto 16px}
.team-name{font-size:16px;font-weight:600;color:var(--text-strong);margin-bottom:4px}
.team-role{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;margin-bottom:12px}
.team-bio{font-size:13px;color:var(--text-soft);line-height:1.6}
@media (max-width:1024px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}

/* ==================== STORIES PAGE ==================== */
.story-card-large{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-bottom:24px;display:grid;grid-template-columns:1fr 1.2fr;transition:border-color 0.3s}
.story-card-large:hover{border-color:var(--accent)}
.story-card-img{position:relative;background:var(--bg-elevated);min-height:280px;overflow:hidden}
.story-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-card-body{padding:36px}
.story-card-cat{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600}
.story-card-quote{font-family:var(--ff-display);font-size:24px;font-weight:300;color:var(--text-strong);line-height:1.4;margin-bottom:20px;font-style:italic}
.story-card-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.story-card-avatar{width:42px;height:42px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0}
.story-card-name{font-size:14px;font-weight:600;color:var(--text-strong)}
.story-card-detail{font-size:12px;color:var(--text-muted);margin-top:2px}
.story-card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding-top:20px;border-top:1px solid var(--border)}
.story-card-stat{text-align:center}
.story-card-stat-v{font-family:var(--ff-display);font-size:20px;font-weight:400}
.story-card-stat-l{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:4px}
@media (max-width:768px){.story-card-large{grid-template-columns:1fr}.story-card-img{min-height:200px}.story-card-body{padding:24px}.story-card-quote{font-size:20px}}

/* ==================== HOW IT WORKS DETAILED ==================== */
.process-detail{position:relative;padding-left:60px;padding-bottom:48px;border-left:1px solid var(--border);margin-left:30px}
.process-detail:last-child{border-left-color:transparent}
.process-detail-num{position:absolute;left:-30px;top:0;width:60px;height:60px;border-radius:50%;background:var(--bg);border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:24px;font-weight:400}
.process-detail-title{font-size:24px;font-family:var(--ff-display);font-weight:400;color:var(--text-strong);margin-bottom:8px;line-height:1.2}
.process-detail-eta{display:inline-block;font-size:11px;background:var(--accent-dim);color:var(--accent);padding:4px 12px;border-radius:100px;margin-bottom:16px;font-weight:600;letter-spacing:0.04em}
.process-detail-body{font-size:var(--fs-body);color:var(--text-soft);line-height:1.7;margin-bottom:16px}
.process-detail-list{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:16px 0 0}
.process-detail-list li{display:flex;gap:10px;font-size:14px;color:var(--text-soft);line-height:1.6}
.process-detail-list li::before{content:'✓';color:var(--green);font-weight:600;flex-shrink:0}
@media (max-width:768px){.process-detail{padding-left:48px;margin-left:24px}.process-detail-num{left:-24px;width:48px;height:48px;font-size:18px}}


/* ==================== SOLUTIONS PAGE ==================== */

/* Quick-jump service strip */
.service-jump{margin-top:48px;margin-bottom:24px;position:relative}
.service-jump-track{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.service-jump-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px 18px;text-decoration:none;color:inherit;cursor:pointer;transition:all 0.25s var(--ease);position:relative;display:flex;flex-direction:column;gap:8px;min-height:140px}
.service-jump-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 32px -12px rgba(255,180,56,0.2)}
.service-jump-card-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.service-jump-card-icon svg{width:20px;height:20px}
.service-jump-card-tag{font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.service-jump-card-name{font-size:15px;font-weight:600;color:var(--text-strong);line-height:1.3}
.service-jump-card-range{font-size:12px;color:var(--text-soft);margin-top:auto;display:flex;align-items:center;gap:6px}
.service-jump-card-arrow{margin-left:auto;color:var(--accent);font-size:14px;transition:transform 0.2s}
.service-jump-card:hover .service-jump-card-arrow{transform:translateX(3px)}

/* Distinct service block layouts */
.svc-block{padding:80px 0;border-top:1px solid var(--border);scroll-margin-top:90px;position:relative}
.svc-block:first-of-type{border-top:none;padding-top:48px}
.svc-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.svc-block-head-left{flex:1;min-width:260px}
.svc-block-tag{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);padding:6px 14px;border-radius:100px;margin-bottom:14px}
.svc-block-title{font-family:var(--ff-display);font-size:clamp(28px,4vw,40px);font-weight:300;line-height:1.1;letter-spacing:-0.01em;color:var(--text-strong)}
.svc-block-title em{font-style:italic;color:var(--accent-soft)}
.svc-block-lede{font-size:var(--fs-body);color:var(--text-soft);line-height:1.6;max-width:540px;margin-top:14px}
.svc-block-cta{flex-shrink:0;display:flex;align-items:center;gap:10px}

/* Residential — image left, stat grid right */
.svc-residential-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.svc-residential-img{aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);position:relative}
.svc-residential-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-residential-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(13,13,15,0.6) 100%)}
.svc-residential-img-badge{position:absolute;bottom:20px;left:20px;right:20px;display:flex;align-items:center;gap:12px;z-index:2;color:var(--text-strong)}
.svc-residential-img-badge-icon{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#1A1108;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;font-weight:600}
.svc-residential-img-badge-text{font-size:13px;line-height:1.3}
.svc-residential-img-badge-text strong{display:block;font-size:14px;font-weight:600}
.svc-residential-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:border-color 0.3s}
.svc-stat-card:hover{border-color:var(--accent)}
.svc-stat-card-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.svc-stat-card-icon svg{width:18px;height:18px}
.svc-stat-card-val{font-family:var(--ff-display);font-size:28px;font-weight:400;color:var(--text-strong);line-height:1;margin-bottom:6px}
.svc-stat-card-val small{font-size:14px;color:var(--accent)}
.svc-stat-card-label{font-size:12px;color:var(--text-muted);line-height:1.4}
.svc-stat-card-wide{grid-column:span 2;display:flex;align-items:center;gap:20px;padding:20px 24px}
.svc-stat-card-wide .svc-stat-card-icon{margin-bottom:0;flex-shrink:0}
.svc-stat-card-wide-body{flex:1}
.svc-stat-card-wide-body strong{display:block;font-size:14px;color:var(--text-strong);font-weight:600;margin-bottom:3px}
.svc-stat-card-wide-body p{font-size:12px;color:var(--text-muted);line-height:1.5}

/* Commercial — pricing tier comparison */
.svc-commercial-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.tier-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:all 0.3s var(--ease)}
.tier-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.tier-card.featured{border-color:var(--accent);background:linear-gradient(165deg,rgba(255,180,56,0.06),var(--bg-card))}
.tier-card.featured::before{content:'Most popular';position:absolute;top:-10px;left:24px;background:var(--accent);color:#1A1108;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:100px}
.tier-name{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.tier-size{font-family:var(--ff-display);font-size:32px;font-weight:400;color:var(--text-strong);line-height:1;margin-bottom:4px}
.tier-size small{font-size:14px;color:var(--text-muted);font-weight:400}
.tier-desc{font-size:13px;color:var(--text-soft);line-height:1.55;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.tier-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.tier-features li{font-size:13px;color:var(--text-soft);line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.tier-features li::before{content:'';flex-shrink:0;width:14px;height:14px;border-radius:50%;background:var(--green-dim);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384D89A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-size:9px;background-position:center;background-repeat:no-repeat;margin-top:3px}
.tier-cta{display:block;text-align:center;padding:12px;border-radius:10px;background:transparent;border:1px solid var(--border-strong);color:var(--text-strong);font-size:13px;font-weight:600;text-decoration:none;transition:all 0.2s}
.tier-cta:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.tier-card.featured .tier-cta{background:var(--accent);color:#1A1108;border-color:var(--accent)}
.tier-card.featured .tier-cta:hover{background:var(--accent-soft);color:#1A1108}

/* Housing Society — process / steps */
.svc-society-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:flex-start}
.svc-society-steps{display:flex;flex-direction:column;gap:0}
.svc-society-step{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--border)}
.svc-society-step:last-child{border-bottom:none}
.svc-society-step-num{width:44px;height:44px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:18px;font-weight:500;flex-shrink:0}
.svc-society-step-body h4{font-size:15px;font-weight:600;color:var(--text-strong);margin-bottom:6px}
.svc-society-step-body p{font-size:13px;color:var(--text-soft);line-height:1.6}
.svc-society-aside{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:28px;position:sticky;top:90px}
.svc-society-aside-img{aspect-ratio:4/3;border-radius:12px;background:var(--bg-elevated);overflow:hidden;position:relative;margin-bottom:20px}
.svc-society-aside-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-society-aside h4{font-size:16px;font-weight:600;color:var(--text-strong);margin-bottom:10px}
.svc-society-aside p{font-size:13px;color:var(--text-soft);line-height:1.6;margin-bottom:20px}
.svc-society-aside-stat{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--border)}
.svc-society-aside-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.svc-society-aside-stat-val{font-family:var(--ff-display);font-size:18px;color:var(--accent)}

/* Battery — energy flow diagram */
.svc-battery-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.svc-battery-viz{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:36px 24px;position:relative;overflow:hidden}
.svc-battery-viz::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%,var(--accent-glow),transparent 70%);pointer-events:none}
.battery-viz-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;position:relative;z-index:1;align-items:center}
.battery-viz-node{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 6px;background:var(--bg);border:1px solid var(--border);border-radius:14px;transition:border-color 0.3s}
.battery-viz-node.active{border-color:var(--accent)}
.battery-viz-icon{width:42px;height:42px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.battery-viz-icon svg{width:22px;height:22px}
.battery-viz-name{font-size:11px;font-weight:600;color:var(--text-strong);margin-bottom:3px}
.battery-viz-val{font-family:var(--ff-display);font-size:14px;color:var(--accent)}
.battery-viz-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;opacity:0.4}
.battery-viz-flow-bar{margin-top:18px;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;position:relative;z-index:1}
.battery-viz-flow-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-soft));width:74%;border-radius:3px;position:relative}
.battery-viz-flow-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:flow-shimmer 2s linear infinite}
@keyframes flow-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.battery-viz-status{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:10px;font-weight:500}
.svc-battery-points{list-style:none;padding:0;margin-top:24px;display:flex;flex-direction:column;gap:14px}
.svc-battery-points li{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px}
.svc-battery-points li svg{flex-shrink:0;width:18px;height:18px;color:var(--green);margin-top:1px}
.svc-battery-points-text strong{display:block;font-size:14px;color:var(--text-strong);font-weight:600;margin-bottom:3px}
.svc-battery-points-text p{font-size:12.5px;color:var(--text-soft);line-height:1.5}

/* AMC — tier checklist */
.svc-amc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.amc-tier{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;transition:all 0.3s var(--ease)}
.amc-tier:hover{border-color:var(--accent);transform:translateY(-2px)}
.amc-tier.featured{border-color:var(--accent);background:linear-gradient(165deg,rgba(255,180,56,0.06),var(--bg-card))}
.amc-tier-name{font-family:var(--ff-display);font-size:24px;font-weight:400;color:var(--text-strong)}
.amc-tier-price{font-family:var(--ff-display);font-size:32px;font-weight:400;color:var(--accent);line-height:1}
.amc-tier-price small{font-size:13px;color:var(--text-muted);font-weight:400;font-family:var(--ff-body)}
.amc-tier-desc{font-size:13px;color:var(--text-soft);line-height:1.55;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.amc-tier-features{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--text-soft);flex:1}
.amc-tier-features li{display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.amc-tier-features li::before{content:'';flex-shrink:0;width:14px;height:14px;border-radius:50%;background:var(--green-dim);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384D89A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-size:9px;background-position:center;background-repeat:no-repeat;margin-top:3px}

/* Comparison Table */
.svc-compare{margin-top:80px;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:40px;overflow:hidden}
.svc-compare-head{margin-bottom:32px;text-align:center}
.svc-compare-head h2{margin-bottom:12px}
.svc-compare-head p{color:var(--text-soft);font-size:var(--fs-body);max-width:560px;margin:0 auto;line-height:1.6}
.compare-table{width:100%;border-collapse:collapse;font-size:13.5px}
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
.compare-table th{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);background:var(--bg);position:sticky;top:0}
.compare-table td:first-child{font-weight:600;color:var(--text-strong)}
.compare-table td{color:var(--text-soft);vertical-align:top;line-height:1.5}
.compare-yes{color:var(--green);font-weight:600}
.compare-no{color:var(--text-muted)}
.compare-table tbody tr:hover{background:rgba(255,255,255,0.015)}

/* Responsive — mobile first */
@media (max-width:1024px){
  .service-jump-track{grid-template-columns:repeat(3,1fr)}
  .svc-residential-grid,.svc-society-grid,.svc-battery-grid{grid-template-columns:1fr;gap:32px}
  .svc-residential-img{max-width:520px;margin:0 auto;aspect-ratio:3/2}
  .svc-society-aside{position:static}
  .svc-commercial-tiers,.svc-amc-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .tier-card.featured{order:-1}
  .amc-tier.featured{order:-1}
}

@media (max-width:768px){
  .svc-block{padding:56px 0;scroll-margin-top:80px}
  .svc-block-head{flex-direction:column;gap:14px;margin-bottom:28px}
  .svc-block-cta{width:100%}
  .svc-block-cta .btn{flex:1}
  .service-jump{margin-top:36px;margin-bottom:0}
  .service-jump-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad-x);margin:0 calc(-1 * var(--pad-x));scrollbar-width:none;-ms-overflow-style:none}
  .service-jump-track::-webkit-scrollbar{display:none}
  .service-jump-card{flex:0 0 200px;scroll-snap-align:start;min-height:auto}
  .svc-residential-stats{grid-template-columns:1fr 1fr;gap:10px}
  .svc-stat-card{padding:18px}
  .svc-stat-card-val{font-size:22px}
  .svc-stat-card-wide{flex-direction:column;align-items:flex-start;gap:12px}
  .svc-compare{padding:28px 20px;margin-top:60px;border-radius:18px}
  .compare-table-wrap{overflow-x:auto;margin:0 -20px;padding:0 20px}
  .compare-table{min-width:560px}
  .battery-viz-grid{gap:4px}
  .battery-viz-icon{width:36px;height:36px}
  .battery-viz-icon svg{width:18px;height:18px}
  .battery-viz-name{font-size:10px}
  .svc-battery-points li{padding:12px}
  .tier-card,.amc-tier{padding:24px}
  .tier-size,.amc-tier-price{font-size:26px}
}