/* ==========================================================================
   HELIOUS ETERNAL ENERGY SOLUTION & CONSTRUCTION PVT. LTD. — site stylesheet
   Theme taken from the Helious logo:
     logo blue   #24409A  (primary — headings accents, buttons, icons)
     logo green  #39B248  (accent — call-to-action buttons, highlights)
     deep navy   #0E1A4A  (dark sections, footer — a deeper shade of the logo blue)
   --------------------------------------------------------------------------
   Font:  open-licence Outfit (bundled in assets/fonts/) — no external fonts,
          so the site renders fast.
   Layout: golden ratio φ = 1.618 — spacing 6·10·16·26·42·68·110.
   All classes are prefixed  v-  (no clash with Tailwind in hero/header).
   ========================================================================== */

/* ---------- Brand font: Outfit variable font (one file covers every weight) ---------- */
@font-face { font-family: 'Mazzard'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/outfit-latin-wght-normal.woff2) format('woff2'); }
/* ₹ sign (not in Outfit) — a matching sans glyph, only downloaded if a ₹ appears */
@font-face { font-family: 'Mazzard'; font-style: normal; font-weight: 300 800; font-display: swap; unicode-range: U+20B9;
  src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2'); }

:root {
  /* Brand palette from the Helious logo (old variable names kept so every rule follows)
     --navy*  : deep logo blue (dark sections, footer, headings)
     --green* : logo blue — primary colour
     --amber* : logo green — accent (CTAs, highlights) */
  --navy: #0E1A4A; --navy-2: #1B2F78; --navy-3: #24409A;
  --green: #24409A; --green-2: #1B3180; --green-soft: #E9EDF8;
  --amber: #39B248; --amber-2: #2A8F3A; --amber-soft: #E8F6EA;
  --sun: #39B248; --sky: #39B248; --muted: #4B5563;
  --red: #C62828;
  --bg: #F3F5FA; --line: #DCE1EE; --line-2: #EBEEF5;
  --text: #0F1733; --text-2: #2F3A55; --text-3: #4B5563;
  --on-dark: #FFFFFF; --on-dark-2: #E3E8F5;
  --s0: 6px; --s1: 10px; --s2: 16px; --s3: 26px; --s4: 42px; --s5: 68px; --s6: 110px;
  --wrap: 1240px; --gut: 26px;
  --r1: 8px; --r2: 12px; --r3: 18px;
  --sh-1: 0 1px 2px rgba(14,26,74,.06), 0 4px 14px rgba(14,26,74,.06);
  --sh-2: 0 2px 6px rgba(14,26,74,.06), 0 24px 48px -18px rgba(14,26,74,.28);
  --ease: cubic-bezier(.2,.75,.2,1);
  --font: Mazzard, 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
@media (max-width: 640px) { :root { --gut: 18px; } }

/* sitewide font (hero & header included — only the typeface changes there) */
html body, body .font-display, body .font-sans { font-family: var(--font) !important; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* clearer text inside the hero/header (no faded copy anywhere) */
body .text-white\/40, body .text-white\/50 { color: rgba(255,255,255,.86) !important; }
body .text-white\/60 { color: rgba(255,255,255,.9) !important; }
body .text-white\/70, body .text-white\/80, body .text-white\/90 { color: rgba(255,255,255,.96) !important; }
body .text-slate-400 { color: #475569 !important; }
body .text-slate-500 { color: #334155 !important; }

/* ---------- base ---------- */
.v { font-family: var(--font); color: var(--text); font-size: 17px; line-height: 1.65; }
.v *, .v *::before, .v *::after { box-sizing: border-box; }
.v img { display: block; max-width: 100%; }
.v a { color: inherit; text-decoration: none; }
.v h1, .v h2, .v h3, .v h4, .v h5, .v p, .v figure, .v blockquote, .v dl, .v dd, .v ul, .v ol { margin: 0; padding: 0; }
.v ul, .v ol { list-style: none; }
.v :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.v-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.v-sec { padding-top: var(--s6); padding-bottom: var(--s6); position: relative; }
.v-sec--flush-top { padding-top: 0; }
.v-silver { background: var(--bg); }
.v-night { background: var(--navy); color: var(--on-dark-2); }
.v-blue { background: var(--navy-2); color: var(--on-dark-2); }
@media (max-width: 900px) { .v-sec { padding-top: var(--s5); padding-bottom: var(--s5); } }

/* ---------- type ---------- */
.v-d1, .v-d2, .v-d3 { font-family: var(--font); color: var(--text); font-weight: 700; letter-spacing: -.02em; }
.v-d1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; }
.v-d2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14; }
.v-d3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.25; letter-spacing: -.01em; }
.v-night .v-d1, .v-night .v-d2, .v-night .v-d3, .v-blue .v-d1, .v-blue .v-d2, .v-blue .v-d3,
.v-panel--night .v-d3, .v-ph .v-d1 { color: #fff; }
.v-lede { font-size: 18px; line-height: 1.65; color: var(--text-2); max-width: 640px; }
.v-night .v-lede, .v-blue .v-lede, .v-ph .v-lede { color: var(--on-dark-2); }
.v-small { font-size: 15px; color: var(--text-3); line-height: 1.6; }
.v-night .v-small, .v-blue .v-small, .v-panel--night .v-small { color: #D2DBE8; }
.v-num { font-weight: 700; letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.v-mark { display: none; }
.v-label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 14px; font-weight: 600; margin-bottom: var(--s2); }
.v-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.v-night .v-label, .v-blue .v-label { background: rgba(255,255,255,.1); color: #fff; }
.v-accent { color: var(--green); }
.v-night .v-accent, .v-blue .v-accent { color: var(--amber); }

.v-head { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); align-items: end; margin-bottom: var(--s5); }
.v-head--center { display: block; text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.v-head--center .v-lede { margin: var(--s2) auto 0; }
@media (max-width: 900px) { .v-head { grid-template-columns: 1fr; gap: var(--s2); margin-bottom: var(--s4); } }

/* ---------- layout ---------- */
.v-phi { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); }
.v-phi-r { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); }
.v-mid { align-items: center; } .v-top { align-items: start; } .v-end { align-items: end; }
@media (max-width: 900px) { .v-phi, .v-phi-r { grid-template-columns: 1fr; gap: var(--s4); } }
.v-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.v-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.v-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 1024px) { .v-g3, .v-g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .v-g2, .v-g3, .v-g4 { grid-template-columns: 1fr; } }
.v-gap1 { margin-top: var(--s1) !important; } .v-gap2 { margin-top: var(--s2) !important; } .v-gap3 { margin-top: var(--s3) !important; } .v-gap4 { margin-top: var(--s4) !important; } .v-gap5 { margin-top: var(--s5) !important; }
.v-stick { position: sticky; top: 130px; }
@media (max-width: 900px) { .v-stick { position: static; } }

/* ---------- buttons ---------- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: var(--r1); border: 2px solid transparent;
  font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.v-btn::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); transform: translateX(-101%); transition: transform .45s var(--ease); z-index: -1; }
.v-btn:hover::after { transform: none; }
.v-btn:hover { transform: translateY(-2px); }
.v-btn--sun { background: var(--amber); color: var(--navy) !important; }
.v-btn--sun:hover { box-shadow: 0 12px 26px -10px rgba(57,178,72,.7); }
.v-btn--blue { background: var(--green); color: #fff !important; }
.v-btn--blue:hover { box-shadow: 0 12px 26px -10px rgba(36,64,154,.6); }
.v-btn--navy { background: var(--navy); color: #fff !important; }
.v-btn--line { border-color: var(--navy); color: var(--navy) !important; background: transparent; }
.v-btn--line:hover { background: var(--navy); color: #fff !important; }
.v-btn--ghost { border-color: rgba(255,255,255,.6); color: #fff !important; background: transparent; }
.v-btn--ghost:hover { background: #fff; color: var(--navy) !important; }
.v-btn--wa { background: #1FA855; color: #fff !important; }
.v-btn--block { width: 100%; }
.v-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.v-btns { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.v-link { font-weight: 600; color: var(--green) !important; display: inline-flex; align-items: center; gap: 8px; }
.v-link svg { transition: transform .3s var(--ease); }
.v-link:hover svg { transform: translateX(4px); }
.v-night .v-link, .v-blue .v-link, .v-panel--night .v-link { color: var(--amber) !important; }

/* ---------- media frame ---------- */
.v-frame { position: relative; }
.v-frame__img { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1 / 1.1; background: var(--bg); }
.v-frame__img img { width: 100%; height: 100%; object-fit: cover; }
.v-frame::before { content: ""; position: absolute; inset: var(--s3) calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3); border: 2px solid var(--amber); border-radius: var(--r3); z-index: -1; }
.v-frame__badge { position: absolute; left: calc(-1 * var(--s3)); bottom: var(--s4); background: #fff; border-radius: var(--r2); padding: var(--s2) var(--s3); box-shadow: var(--sh-2); display: flex; align-items: center; gap: var(--s2); }
.v-frame__badge b { font-size: 34px; color: var(--green); line-height: 1; }
.v-frame__badge span { font-size: 14px; font-weight: 600; color: var(--text-2); line-height: 1.35; }
.v-arch { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1.618 / 1; background: var(--bg); }
.v-arch img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .v-frame::before { display: none; } .v-frame__badge { left: var(--s2); bottom: var(--s2); } .v-frame__img { aspect-ratio: 1.618 / 1; } }

/* ---------- counters strip ---------- */
.v-counts { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--r3); box-shadow: var(--sh-2); position: relative; z-index: 3; }
.v-counts > div { padding: var(--s4) var(--s3); text-align: center; }
.v-counts > div + div { border-left: 1px solid var(--line); }
.v-counts b { display: block; font-size: clamp(34px, 3.4vw, 46px); color: var(--navy); line-height: 1; font-weight: 700; }
.v-counts b em { font-style: normal; color: var(--amber-2); }
.v-counts > div > span { display: block; margin-top: var(--s1); font-size: 15px; font-weight: 500; color: var(--text-2); }
.v-counts-wrap { margin-top: calc(-1 * var(--s5)); position: relative; z-index: 4; }
@media (max-width: 900px) { .v-counts { grid-template-columns: 1fr 1fr; } .v-counts > div:nth-child(3) { border-left: 0; } .v-counts > div:nth-child(n+3) { border-top: 1px solid var(--line); } .v-counts-wrap { margin-top: 0; padding-top: var(--s4); } }

/* ---------- feature list ---------- */
.v-feats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.v-feat { display: flex; gap: var(--s2); align-items: flex-start; }
.v-feat .ic { width: 52px; height: 52px; border-radius: var(--r2); background: var(--green-soft); color: var(--green); display: grid; place-items: center; flex-shrink: 0; transition: background .3s, color .3s; }
.v-feat:hover .ic { background: var(--green); color: #fff; }
.v-feat .ic svg { width: 24px; height: 24px; }
.v-feat h4 { font-size: 18px; font-weight: 600; color: var(--text); }
.v-feat p { font-size: 15px; color: var(--text-3); margin-top: 4px; line-height: 1.55; }
.v-night .v-feat .ic { background: rgba(255,255,255,.08); color: var(--amber); }
.v-night .v-feat:hover .ic { background: var(--amber); color: var(--navy); }
.v-night .v-feat h4 { color: #fff; } .v-night .v-feat p { color: #D2DBE8; }
@media (max-width: 640px) { .v-feats { grid-template-columns: 1fr; } }

/* ---------- SERVICE CARDS ---------- */
.v-scards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 1024px) { .v-scards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v-scards { grid-template-columns: 1fr; } }
.v-scard { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.v-scard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.v-scard:hover { transform: translateY(-8px); box-shadow: var(--sh-2); border-color: transparent; }
.v-scard:hover::after { transform: scaleX(1); }
.v-scard__img { position: relative; aspect-ratio: 1.618 / 1; overflow: hidden; background: var(--navy); }
.v-scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-scard:hover .v-scard__img img { transform: scale(1.08); }
.v-scard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,74,0) 50%, rgba(14,26,74,.55)); }
.v-scard__tag { position: absolute; top: var(--s2); left: var(--s2); z-index: 2; background: #fff; color: var(--navy); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.v-scard__ic { position: absolute; right: var(--s3); bottom: -28px; z-index: 3; width: 60px; height: 60px; border-radius: 50%; background: var(--amber); color: var(--navy); display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(57,178,72,.8); border: 4px solid #fff; transition: transform .5s var(--ease); }
.v-scard:hover .v-scard__ic { transform: rotate(-12deg) scale(1.06); }
.v-scard__ic svg { width: 24px; height: 24px; }
.v-scard__img { overflow: visible; }
.v-scard__img .mask { position: absolute; inset: 0; overflow: hidden; }
.v-scard__body { padding: var(--s4) var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.v-scard h3 { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--text); letter-spacing: -.01em; }
.v-scard p { font-size: 15.5px; color: var(--text-3); line-height: 1.6; }
.v-scard .v-check { margin-top: var(--s0); gap: 8px; }
.v-scard .v-check li { font-size: 15px; color: var(--text-2); }
.v-scard__foot { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }

/* ---------- checks ---------- */
.v-check { display: grid; gap: var(--s1); }
.v-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.v-check li::before { content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.v-night .v-check li, .v-panel--night .v-check li { color: var(--on-dark-2); }
.v-night .v-check li::before, .v-panel--night .v-check li::before { background-color: var(--amber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1A4A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- why band ---------- */
.v-why { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); align-items: center; }
.v-why__img { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1 / 1.15; position: relative; }
.v-why__img img { width: 100%; height: 100%; object-fit: cover; }
.v-why__img .stamp { position: absolute; right: var(--s3); bottom: var(--s3); background: var(--amber); color: var(--navy); border-radius: var(--r2); padding: var(--s2) var(--s3); font-weight: 700; line-height: 1.25; max-width: 220px; }
.v-why__img .stamp b { display: block; font-size: 34px; line-height: 1; }
@media (max-width: 900px) { .v-why { grid-template-columns: 1fr; gap: var(--s4); } .v-why__img { aspect-ratio: 1.618 / 1; } }

/* ---------- process steps ---------- */
.v-tl { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); position: relative; counter-reset: s; }
.v-tl::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.v-tl li { position: relative; }
.v-tl .dot { width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid var(--green); color: var(--green); display: grid; place-items: center; font-weight: 700; font-size: 20px; position: relative; z-index: 1; transition: background .3s, color .3s; }
.v-tl li:hover .dot { background: var(--green); color: #fff; }
.v-tl .when { display: inline-block; margin-top: var(--s2); font-size: 13px; font-weight: 600; color: var(--green); background: var(--green-soft); padding: 3px 10px; border-radius: 999px; }
.v-tl h4 { font-size: 18px; font-weight: 700; margin-top: var(--s1); color: var(--text); }
.v-tl p { font-size: 15px; color: var(--text-3); margin-top: 6px; line-height: 1.55; }
.v-night .v-tl::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 8px, transparent 8px 14px); }
.v-night .v-tl .dot { background: var(--navy); border-color: var(--amber); color: var(--amber); }
.v-night .v-tl li:hover .dot { background: var(--amber); color: var(--navy); }
.v-night .v-tl .when { background: rgba(57,178,72,.16); color: var(--amber); }
.v-night .v-tl h4 { color: #fff; } .v-night .v-tl p { color: #D2DBE8; }
@media (max-width: 1024px) {
  .v-tl { grid-template-columns: 1fr; }
  .v-tl::before { left: 29px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
  .v-night .v-tl::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.3) 0 8px, transparent 8px 14px); }
  .v-tl li { display: grid; grid-template-columns: 60px 1fr; column-gap: var(--s2); }
  .v-tl .dot { grid-row: span 3; } .v-tl .when { justify-self: start; margin-top: 4px; }
}

/* ---------- estimate ---------- */
.v-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--amber) 0 var(--p, 30%), rgba(255,255,255,.25) var(--p, 30%) 100%); outline: none; cursor: pointer; }
.v-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid var(--amber); box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: grab; }
.v-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid var(--amber); cursor: grab; }
.v-light .v-range { background: linear-gradient(90deg, var(--green) 0 var(--p, 30%), var(--line) var(--p, 30%) 100%); }
.v-light .v-range::-webkit-slider-thumb { border-color: var(--green); }
.v-light .v-range::-moz-range-thumb { border-color: var(--green); }
.v-range-scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-3); margin-top: var(--s1); }
.v-est { background: var(--navy); color: var(--on-dark-2); border-radius: var(--r3); padding: var(--s5); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.v-est::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 100% 0%, rgba(57,178,72,.22), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(36,64,154,.4), transparent 60%); z-index: -1; }
.v-est .v-d2 { color: #fff; }
.v-est .bill { display: flex; align-items: baseline; gap: var(--s1); margin: var(--s3) 0 var(--s2); }
.v-est .bill b { font-size: clamp(42px, 5vw, 64px); color: #fff; line-height: 1; }
.v-est .bill span { color: var(--on-dark-2); }
.v-est .v-range-scale { color: #D2DBE8; }
.v-est-out { display: grid; gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--r2); overflow: hidden; }
.v-est-out div { background: rgba(255,255,255,.06); padding: var(--s2) var(--s3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.v-est-out span { font-size: 15px; color: var(--on-dark-2); }
.v-est-out b { color: #fff; font-size: 24px; }
.v-est-out .hl b { color: var(--amber); }
@media (max-width: 900px) { .v-est { grid-template-columns: 1fr; padding: var(--s4) var(--s3); gap: var(--s4); } }

/* ---------- projects ---------- */
.v-strip-ctl { display: flex; gap: var(--s1); }
.v-strip-ctl button { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: all .25s; }
.v-strip-ctl button:hover { background: var(--navy); color: #fff; }
.v-night .v-strip-ctl button { border-color: rgba(255,255,255,.6); color: #fff; }
.v-night .v-strip-ctl button:hover { background: #fff; color: var(--navy); }
.v-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, 82vw); gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s0) max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) var(--s3); scrollbar-width: none; scroll-padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }
.v-strip::-webkit-scrollbar { display: none; }
.v-proj { scroll-snap-align: start; display: block; position: relative; border-radius: var(--r3); overflow: hidden; background: var(--navy); }
.v-proj .ph { aspect-ratio: 1 / 1.272; position: relative; overflow: hidden; }
.v-proj .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-proj:hover .ph img { transform: scale(1.07); }
.v-proj .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,74,0) 35%, rgba(14,26,74,.92) 100%); }
.v-proj .kw { position: absolute; left: var(--s3); top: var(--s3); z-index: 2; background: var(--amber); color: var(--navy); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.v-proj .cap { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 2; color: #fff; }
.v-proj h3 { font-size: 21px; font-weight: 700; line-height: 1.3; color: #fff; }
.v-proj .meta { font-size: 14.5px; color: #E3E9F2; margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v-proj .meta span + span::before { content: "·"; margin-right: 8px; color: var(--amber); font-weight: 700; }
.v-proj--wide .ph { aspect-ratio: 1.618 / 1; }

/* ---------- subsidy bars ---------- */
.v-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: end; height: 300px; border-bottom: 2px solid var(--navy); }
.v-tier { background: var(--navy-2); border-radius: var(--r1) var(--r1) 0 0; color: #fff; padding: var(--s2); display: flex; flex-direction: column; transform-origin: bottom; }
.v-tier b { font-size: clamp(20px, 2.2vw, 28px); line-height: 1; }
.v-tier span { font-size: 14px; color: #DCE4F0; margin-top: 6px; }
.v-tier:last-child { background: var(--green); }
.v-tier-x { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s1); font-size: 15px; font-weight: 600; color: var(--text); }
html.js .v-tiers.reveal-ready .v-tier { transform: scaleY(0); transition: transform 1s var(--ease); }
html.js .v-tiers.is-in .v-tier { transform: scaleY(1); }
html.js .v-tiers.is-in .v-tier:nth-child(2) { transition-delay: .15s; } html.js .v-tiers.is-in .v-tier:nth-child(3) { transition-delay: .3s; }

/* ---------- testimonials ---------- */
.v-tslider { overflow: hidden; }
.v-ttrack { display: flex; gap: var(--s3); transition: transform .7s var(--ease); }
.v .v-tcard { flex: 0 0 calc((100% - 2 * var(--s3)) / 3); background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4) var(--s3) var(--s3); position: relative; }
.v-tcard::before { content: ""; position: absolute; top: var(--s3); right: var(--s3); width: 42px; height: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2339B248'%3E%3Cpath d='M9.5 5C6 6.4 4 9.3 4 13v6h6v-6H7c0-2.4 1.2-4.2 3.3-5.1L9.5 5zm10 0C16 6.4 14 9.3 14 13v6h6v-6h-3c0-2.4 1.2-4.2 3.3-5.1L19.5 5z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; }
.v-tcard .stars { color: var(--amber); letter-spacing: 3px; font-size: 17px; }
.v-tcard p { margin-top: var(--s2); font-size: 16.5px; line-height: 1.65; color: var(--text-2); min-height: 6.6em; }
.v-tcard .who { display: flex; align-items: center; gap: 12px; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line-2); }
.v-tcard .ini { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; }
.v-tcard b { display: block; font-size: 16.5px; color: var(--text); }
.v-tcard small { display: block; font-size: 14px; color: var(--text-3); }
.v-tdots { display: flex; gap: 8px; justify-content: center; margin-top: var(--s4); }
.v-tdots button { width: 10px; height: 10px; border-radius: 99px; border: 0; background: var(--line); cursor: pointer; transition: width .3s, background .3s; padding: 0; }
.v-tdots button.on { width: 32px; background: var(--green); }
@media (max-width: 1024px) { .v .v-tcard { flex-basis: calc((100% - var(--s3)) / 2); } }
@media (max-width: 640px) { .v .v-tcard { flex-basis: 100%; } }

/* ---------- FAQ ---------- */
.v-faq { display: grid; gap: var(--s1); }
.v-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); transition: border-color .3s, box-shadow .3s; }
.v-faq details[open] { border-color: var(--green); box-shadow: var(--sh-1); }
.v-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 20px var(--s3); font-size: 18px; font-weight: 600; color: var(--text); }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 22px; font-weight: 500; transition: transform .35s var(--ease), background .3s, color .3s; }
.v-faq details[open] summary::after { transform: rotate(45deg); background: var(--green); color: #fff; }
.v-faq details p { padding: 0 var(--s3) 20px; color: var(--text-2); font-size: 16px; line-height: 1.65; }
.v-silver .v-faq details { background: #fff; }

/* ---------- CTA band ---------- */
.v-cta { border-radius: var(--r3); background: linear-gradient(110deg, var(--sky) 0%, var(--green) 40%, var(--navy) 100%); color: #fff; padding: var(--s5); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.v-cta::before { content: ""; position: absolute; right: -110px; top: -110px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(57,178,72,.5), transparent 65%); z-index: -1; }
.v-cta .v-d2 { color: #fff; }
.v-cta p { color: #E6F2FB; margin-top: var(--s2); font-size: 17px; }
.v-cta .side { display: grid; gap: var(--s1); }
@media (max-width: 900px) { .v-cta { grid-template-columns: 1fr; padding: var(--s4) var(--s3); } }

/* ---------- page header ---------- */
.v-ph { position: relative; background: var(--navy); color: var(--on-dark-2); overflow: hidden; isolation: isolate; }
.v-ph__bg { position: absolute; inset: 0; z-index: -2; }
.v-ph__bg img { width: 100%; height: 100%; object-fit: cover; }
.v-ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(14,26,74,.96) 0%, rgba(14,26,74,.88) 50%, rgba(14,26,74,.6) 100%); }
.v-ph__in { padding-top: var(--s6); padding-bottom: var(--s5); max-width: 860px; }
.v-crumb { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 16px; border-radius: 999px; }
.v-crumb a { color: var(--amber); font-weight: 600; }
.v-ph .v-d1 { margin-top: var(--s3); }
.v-ph .v-lede { margin-top: var(--s2); font-size: 19px; }
.v-ph__sun, .v-ph .v-arch { display: none; }
@media (max-width: 900px) { .v-ph__in { padding-top: var(--s5); padding-bottom: var(--s4); } }

/* ---------- panels / values / tags ---------- */
.v-panel { border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4); background: #fff; }
.v-panel--night { background: var(--navy); border-color: var(--navy); color: var(--on-dark-2); }
.v-panel--night h3, .v-panel--night h4 { color: #fff; }
@media (max-width: 640px) { .v-panel { padding: var(--s3); } }
.v-val { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s3); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.v-val:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.v-val .ic { width: 56px; height: 56px; border-radius: var(--r2); background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.v-val .ic svg { width: 26px; height: 26px; }
.v-val h3 { font-size: 19px; font-weight: 700; margin-top: var(--s2); color: var(--text); }
.v-val p { font-size: 15.5px; color: var(--text-3); margin-top: 6px; line-height: 1.6; }
.v-night .v-val { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.v-night .v-val .ic { background: rgba(57,178,72,.15); color: var(--amber); }
.v-night .v-val h3 { color: #fff; } .v-night .v-val p { color: #D2DBE8; }
.v-tag { display: inline-block; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); }
.v-tag--sun { background: var(--amber); color: var(--navy); }
.v-tag--white { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.v-statement { font-size: clamp(20px, 2vw, 25px); line-height: 1.5; font-weight: 500; color: var(--text); }
.v-facts { border-top: 2px solid var(--navy); }
.v-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.v-facts dt { font-size: 16px; color: var(--text-2); }
.v-facts dd { font-size: 24px; color: var(--navy); }

/* ---------- tabs ---------- */
.v-tabs { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s4); }
.v-tabs button { background: #fff; border: 1px solid var(--line); padding: 10px 20px; border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .25s; }
.v-tabs button:hover { border-color: var(--navy); color: var(--navy); }
.v-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.v-tabs button em { font-style: normal; font-size: 13px; margin-left: 6px; opacity: .85; }
@media (max-width: 640px) { .v-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .v-tabs::-webkit-scrollbar { display: none; } .v-tabs button { flex-shrink: 0; } }

/* ---------- services detail rows ---------- */
.v-svc-row { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); align-items: center; padding: var(--s5) 0; border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.v-svc-row:nth-child(even) { grid-template-columns: 1.618fr 1fr; }
.v-svc-row:nth-child(even) .ph { order: 2; }
.v-svc-row .ph { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1.618 / 1; position: relative; }
.v-svc-row .ph img { width: 100%; height: 100%; object-fit: cover; }
.v-svc-row .ph .v-tag { position: absolute; left: var(--s2); top: var(--s2); }
.v-svc-row .desc { margin-top: var(--s2); color: var(--text-2); font-size: 17px; }
.v-svc-row .v-check { margin-top: var(--s3); grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .v-svc-row, .v-svc-row:nth-child(even) { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4) 0; } .v-svc-row:nth-child(even) .ph { order: 0; } .v-svc-row .v-check { grid-template-columns: 1fr; } }

/* ---------- work list ---------- */
.v-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 1024px) { .v-work { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v-work { grid-template-columns: 1fr; } }
.v-work article { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; }
.v-work article:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.v-work .ph { aspect-ratio: 1.618 / 1; overflow: hidden; position: relative; }
.v-work .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-work article:hover .ph img { transform: scale(1.06); }
.v-work .ph .v-tag { position: absolute; left: var(--s2); top: var(--s2); }
.v-work .bd { padding: var(--s3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v-work .kw { font-size: 30px; line-height: 1; color: var(--green); }
.v-work h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); }
.v-work p { color: var(--text-3); font-size: 15px; line-height: 1.6; }
.v-work dl { margin-top: auto; padding-top: var(--s1); border-top: 1px solid var(--line-2); }
.v-work dl div { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px 0; font-size: 15px; }
.v-work dt { color: var(--text-3); } .v-work dd { font-weight: 600; text-align: right; color: var(--text); }

/* ---------- gallery ---------- */
.v-masonry { columns: 3; column-gap: var(--s2); }
.v-masonry a { display: block; break-inside: avoid; margin-bottom: var(--s2); border-radius: var(--r2); overflow: hidden; position: relative; background: var(--bg); }
.v-masonry img { width: 100%; height: auto; transition: transform .9s var(--ease); }
.v-masonry a:hover img { transform: scale(1.05); }
.v-masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s2) var(--s2); background: linear-gradient(transparent, rgba(14,26,74,.9)); color: #fff; font-size: 15px; font-weight: 600; transform: translateY(100%); transition: transform .45s var(--ease); }
.v-masonry a:hover figcaption, .v-masonry a:focus-visible figcaption { transform: none; }
@media (max-width: 900px) { .v-masonry { columns: 2; } }
@media (hover: none) { .v-masonry figcaption { transform: none; } }
.v-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(3,22,35,.95); display: none; align-items: center; justify-content: center; padding: var(--s5) var(--s4); }
.v-lb.on { display: flex; animation: vFade .3s ease; }
.v-lb img { max-width: 100%; max-height: 80vh; border-radius: var(--r1); }
.v-lb .cap { position: absolute; left: 0; right: 0; bottom: var(--s3); text-align: center; color: #fff; font-family: var(--font); font-size: 16px; }
.v-lb button { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-size: 26px; cursor: pointer; display: grid; place-items: center; }
.v-lb button:hover { background: #fff; color: var(--navy); }
.v-lb .x { top: var(--s3); right: var(--s3); } .v-lb .pv { left: var(--s3); top: 50%; transform: translateY(-50%); } .v-lb .nx { right: var(--s3); top: 50%; transform: translateY(-50%); }
@keyframes vFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- forms ---------- */
.v-form { display: grid; gap: var(--s3); }
.v-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 640px) { .v-row { grid-template-columns: 1fr; } }
.v-field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.v-field input, .v-field select, .v-field textarea { width: 100%; min-height: 54px; padding: 0 var(--s2); border: 1.5px solid var(--line); border-radius: var(--r1); background: #fff;
  font-family: var(--font); font-size: 16px; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.v-field input::placeholder, .v-field textarea::placeholder { color: #64748B; }
.v-field textarea { padding: 14px var(--s2); min-height: 120px; resize: vertical; line-height: 1.5; }
.v-field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3647' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; padding-right: 48px; }
.v-field input:focus, .v-field select:focus, .v-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(36,64,154,.12); }
.v-alert { background: #FDECEE; color: #8B1027; border-left: 4px solid var(--red); padding: var(--s2); font-size: 15px; border-radius: 6px; }
.v-contact a, .v-contact div { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.v-contact svg { flex: 0 0 22px; margin-top: 3px; color: var(--amber); }
.v-contact b { display: block; color: #fff; font-size: 17px; word-break: break-word; font-weight: 600; }
.v-contact small { display: block; font-size: 14.5px; color: #D2DBE8; }

/* ---------- calculator ---------- */
.v-calc { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: start; }
.v-calc-in { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4); box-shadow: var(--sh-1); }
.v-calc-out { background: var(--navy); color: var(--on-dark-2); border-radius: var(--r3); padding: var(--s4); position: sticky; top: 130px; overflow: hidden; isolation: isolate; }
.v-calc-out::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(57,178,72,.28), transparent 65%); z-index: -1; }
.v-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: var(--r2); padding: 5px; gap: 5px; }
.v-seg button { border: 0; background: transparent; padding: 13px; border-radius: var(--r1); font-family: var(--font); font-weight: 600; font-size: 16px; color: var(--text-2); cursor: pointer; transition: all .25s; }
.v-seg button.on { background: var(--green); color: #fff; box-shadow: 0 6px 16px -8px rgba(36,64,154,.8); }
.v-ctl { padding: var(--s3) 0; border-bottom: 1px solid var(--line-2); }
.v-ctl:last-child { border-bottom: 0; padding-bottom: 0; }
.v-ctl-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.v-ctl-top label { font-weight: 600; font-size: 17px; color: var(--text); }
.v-ctl-top output { font-size: 24px; color: var(--green); font-weight: 700; white-space: nowrap; }
.v-big { font-size: clamp(56px, 6vw, 80px); color: #fff; line-height: .95; font-weight: 700; }
.v-big small { font-size: .34em; color: var(--amber); margin-left: 6px; }
.v-kv { margin-top: var(--s3); border-top: 1px solid rgba(255,255,255,.16); }
.v-kv div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.v-kv span { font-size: 15.5px; color: var(--on-dark-2); }
.v-kv b { color: #fff; font-size: 19px; font-feature-settings: "tnum" 1; font-weight: 700; }
.v-kv .hl b { color: var(--amber); }
.v-calc-out .v-small { color: #D2DBE8; }
.v-chart { width: 100%; height: auto; display: block; margin-top: var(--s2); }
.v-chart .ax { stroke: var(--line); stroke-width: 1; }
.v-chart text { font-family: var(--font); font-size: 13px; fill: var(--text-3); }
.v-legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 15px; color: var(--text-2); margin-top: var(--s1); }
.v-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; }
.v-emi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; margin-top: var(--s3); }
.v-emi div { background: #fff; padding: var(--s2) var(--s3); }
.v-emi span { display: block; font-size: 14.5px; color: var(--text-3); }
.v-emi b { display: block; font-size: 24px; color: var(--text); margin-top: 4px; font-feature-settings: "tnum" 1; font-weight: 700; }
.v-emi .hl { background: var(--amber-soft); } .v-emi .hl b { color: var(--navy); }
@media (max-width: 1024px) { .v-calc { grid-template-columns: 1fr; } .v-calc-out { position: static; } }
@media (max-width: 640px) { .v-calc-in, .v-calc-out { padding: var(--s3); } .v-emi { grid-template-columns: 1fr; } .v-ctl-top output { font-size: 20px; } .v-ctl-top label { font-size: 15.5px; } }

/* ---------- B2B ---------- */
.v-b2b-stats { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.v-b2b-stats div { padding: var(--s3); border-bottom: 1px solid var(--line); }
.v-b2b-stats div:nth-child(odd) { border-right: 1px solid var(--line); }
.v-b2b-stats div:nth-last-child(-n+2) { border-bottom: 0; }
.v-b2b-stats b { display: block; font-size: 26px; line-height: 1.1; color: var(--navy); }
.v-b2b-stats span { font-size: 15px; color: var(--text-3); }
.v-pcard { border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: transform .45s var(--ease), box-shadow .45s, border-color .3s; }
.v-pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.v-pcard.sel { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,64,154,.25); }
.v-pcard .ph { aspect-ratio: 1.618 / 1; background: var(--bg); position: relative; overflow: hidden; }
.v-pcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-pcard:hover .ph img { transform: scale(1.06); }
.v-pcard .ph .v-tag { position: absolute; left: var(--s2); top: var(--s2); }
.v-pcard .ph .v-tag--sun { left: auto; right: var(--s2); }
.v-pcard .bd { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.v-pcard .brand { font-size: 14px; font-weight: 600; color: var(--green); }
.v-pcard h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); }
.v-pcard .desc { font-size: 15px; color: var(--text-3); line-height: 1.55; }
.v-specs { border: 1px solid var(--line-2); border-radius: var(--r1); overflow: hidden; }
.v-specs div { display: flex; justify-content: space-between; gap: var(--s2); padding: 9px 12px; font-size: 14.5px; }
.v-specs div:nth-child(odd) { background: var(--bg); }
.v-specs span { color: var(--text-3); } .v-specs b { text-align: right; font-weight: 600; color: var(--text); }
.v-pcard .foot { margin-top: auto; padding-top: var(--s2); display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s2); font-size: 14px; border-top: 1px dashed var(--line); }
.v-pcard .foot small { display: block; color: var(--text-3); font-size: 13.5px; }
.v-pcard .foot strong { display: block; font-size: 15.5px; color: var(--text); }
.v-pcard .foot .pr { text-align: right; } .v-pcard .foot .pr strong { color: var(--green); }
.v-pcard .acts { display: flex; gap: var(--s1); margin-top: var(--s2); }
.v-pcard .acts .v-btn { flex: 1; }
.v-pcard.sel .b2b-add { background: var(--amber); color: var(--navy) !important; }
.v-wa { width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--r1); display: grid; place-items: center; background: #E7F6EE; color: #1FA855; border: 1.5px solid #BFE6CF; transition: background .2s; }
.v-wa:hover { background: #1FA855; color: #fff; }
.v-search { position: relative; }
.v-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.v-search input { padding-left: 48px !important; }
.v-chips { display: flex; flex-wrap: wrap; gap: var(--s0); min-height: 28px; }
.v-chips span { display: inline-flex; align-items: center; gap: 8px; background: var(--green-soft); color: var(--green); font-size: 14.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; }
.v-chips button { border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--green); padding: 0; }
.v-chips .none { background: none !important; padding: 0 !important; color: var(--text-3) !important; font-weight: 400 !important; font-size: 15px !important; }
.v-tray { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 160%); visibility: hidden; opacity: 0; z-index: 60; background: var(--navy); color: #fff; border-radius: 999px; padding: 8px 8px 8px 26px; display: flex; align-items: center; gap: var(--s2); box-shadow: 0 26px 42px -16px rgba(2,6,23,.6); transition: transform .45s var(--ease), opacity .3s, visibility .3s; max-width: calc(100% - 110px); font-family: var(--font); }
.v-tray.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.v-tray span { font-size: 15px; font-weight: 600; white-space: nowrap; }
.v-tray .v-btn { border-radius: 999px; }

/* ---------- footer ---------- */
.v-foot { background: #0A1338; color: #DCE4F0; font-size: 15.5px; }
.v-foot__big { padding-top: var(--s5); padding-bottom: var(--s5); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.v-foot__big .v-d2 { color: #fff; }
.v-foot__big p { color: #DCE4F0; margin-top: var(--s1); }
.v-foot__cols { display: grid; grid-template-columns: 1.618fr 1fr 1fr 1.272fr; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s5); }
.v-foot h5 { font-family: var(--font); color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 var(--s2); position: relative; padding-bottom: 12px; }
.v-foot h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: var(--amber); }
.v-foot li + li { margin-top: 12px; }
.v-foot ul a { transition: color .2s, padding .2s; }
.v-foot ul a:hover { color: var(--amber); padding-left: 4px; }
.v-foot .brand { display: inline-flex; align-items: center; }
.v-foot .brand img { height: 84px; width: auto; }
.v-foot .about { margin-top: var(--s3); max-width: 380px; line-height: 1.65; }
.v-foot .social { display: flex; gap: var(--s1); margin-top: var(--s3); }
.v-foot .social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; transition: all .25s; }
.v-foot .social a:hover { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.v-foot .ct a, .v-foot .ct div { display: flex; gap: 12px; align-items: flex-start; }
.v-foot .ct svg { flex: 0 0 18px; margin-top: 4px; color: var(--amber); }
.v-foot .ct > * + * { margin-top: var(--s2); }
.v-foot__bar { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s3); padding-bottom: var(--s3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); font-size: 14.5px; color: #C3CEDE; }
@media (max-width: 1024px) { .v-foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .v-foot__big { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .v-foot__cols { grid-template-columns: 1fr; gap: var(--s4); } }

.v-empty { color: var(--text-3); padding: var(--s5) 0; text-align: center; }

/* ==========================================================================
   ANIMATION  (content is fully visible without JavaScript)
   ========================================================================== */
html.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-reveal="left"] { transform: translateX(-42px); }
html.js [data-reveal="right"] { transform: translateX(42px); }
html.js [data-reveal="zoom"] { transform: scale(.94); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
/* headline words rise from a mask */
.v-split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.v-split .w > span { display: inline-block; }
html.js .v-split.ready .w > span { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 55ms); }
html.js .v-split.ready.is-in .w > span { transform: none; }
/* image wipe */
html.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease); }
html.js [data-wipe].is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .v-split.ready .w > span, html.js [data-wipe] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .v *, .v *::before, .v *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ==========================================================================
   Extra blocks (comparison, capability cards, expertise rows, promise list)
   ========================================================================== */
/* complete system vs parts */
.v-compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; background: #fff; box-shadow: var(--sh-1); }
.v-compare > div { padding: var(--s4) var(--s3); }
.v-compare h3 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text); }
.v-compare h3 small { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.v-compare .parts { background: #F7F9FB; }
.v-compare .parts h3 small { background: #FDECEE; color: #9B1C1C; }
.v-compare .whole { background: linear-gradient(160deg, #fff 0%, var(--green-soft) 100%); border-left: 1px solid var(--line); }
.v-compare .whole h3 small { background: var(--green); color: #fff; }
.v-compare ul { margin-top: var(--s3); display: grid; gap: 14px; }
.v-compare li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.v-compare li::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 11px; }
.v-compare .parts li::before { background-color: #F3C9CE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B1C1C' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.v-compare .whole li::before { background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.v-compare .whole li b { color: var(--text); }
@media (max-width: 800px) { .v-compare { grid-template-columns: 1fr; } .v-compare .whole { border-left: 0; border-top: 1px solid var(--line); } }

/* component cards ("what goes on your roof") */
.v-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); counter-reset: part; }
@media (max-width: 1100px) { .v-parts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v-parts { grid-template-columns: 1fr; } }
.v-part { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3); counter-increment: part; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; overflow: hidden; }
.v-part::before { content: counter(part, decimal-leading-zero); position: absolute; right: 16px; top: 10px; font-size: 40px; font-weight: 800; color: var(--green-soft); line-height: 1; }
.v-part:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: transparent; }
.v-part .ic { width: 48px; height: 48px; border-radius: var(--r2); display: grid; place-items: center; background: var(--navy-2); color: #fff; position: relative; }
.v-part .ic svg { width: 22px; height: 22px; }
.v-part h4 { font-size: 17.5px; font-weight: 700; margin-top: var(--s2); color: var(--text); position: relative; }
.v-part p { font-size: 14.5px; color: var(--text-3); margin-top: 6px; line-height: 1.55; }
.v-part .spec { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--green); background: var(--green-soft); padding: 4px 10px; border-radius: 999px; }
.v-night .v-part { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.v-night .v-part::before { color: rgba(255,255,255,.07); }
.v-night .v-part .ic { background: var(--amber); color: var(--navy); }
.v-night .v-part h4 { color: #fff; } .v-night .v-part p { color: #D3E1EB; }
.v-night .v-part .spec { background: rgba(57,178,72,.16); color: var(--amber); }

/* technology page rows */
.v-tech { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); align-items: center; padding: var(--s5) 0; border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.v-tech:nth-of-type(even) { grid-template-columns: 1.618fr 1fr; }
.v-tech:nth-of-type(even) .ph { order: 2; }
.v-tech .ph { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1.272 / 1; background: var(--bg); position: relative; }
.v-tech .ph img { width: 100%; height: 100%; object-fit: cover; }
.v-tech .ph .v-tag { position: absolute; left: var(--s2); top: var(--s2); }
.v-tech .kicker { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.v-tech p.desc { margin-top: var(--s2); color: var(--text-2); font-size: 17px; }
.v-tech .v-specs { margin-top: var(--s3); }
.v-tech .why { margin-top: var(--s3); padding: var(--s2) var(--s3); border-left: 4px solid var(--amber); background: var(--amber-soft); border-radius: 0 var(--r1) var(--r1) 0; font-size: 15.5px; color: var(--text-2); }
.v-tech .why b { color: var(--navy-2); }
@media (max-width: 900px) { .v-tech, .v-tech:nth-of-type(even) { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4) 0; } .v-tech:nth-of-type(even) .ph { order: 0; } }

/* comparison table (string vs micro etc.) */
.v-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: #fff; font-size: 15.5px; }
.v-table th, .v-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.v-table thead th { background: var(--navy-2); color: #fff; font-weight: 700; font-size: 14.5px; }
.v-table thead th:last-child { background: var(--green); }
.v-table tbody th { font-weight: 600; color: var(--text); width: 28%; background: #F7F9FB; }
.v-table td { color: var(--text-2); }
.v-table tr:last-child th, .v-table tr:last-child td { border-bottom: 0; }
.v-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r2); }
.v-table-wrap .v-table { min-width: 620px; }

/* written promise / commitments */
.v-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
@media (max-width: 1024px) { .v-promise { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v-promise { grid-template-columns: 1fr; } }
.v-promise > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3); display: flex; gap: var(--s2); align-items: flex-start; }
.v-promise .ic { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.v-promise h4 { font-size: 17px; font-weight: 700; color: var(--text); }
.v-promise p { font-size: 14.5px; color: var(--text-3); margin-top: 4px; line-height: 1.55; }

/* region chips */
.v-region { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.v-region > div { border-radius: var(--r2); padding: var(--s3); background: #fff; border: 1px solid var(--line); }
.v-region > div:first-child { background: var(--navy-2); border-color: var(--navy-2); color: #E1EBF2; }
.v-region h4 { font-size: 22px; font-weight: 700; color: var(--text); }
.v-region > div:first-child h4 { color: #fff; }
.v-region small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.v-region > div:first-child small { color: var(--amber); }
.v-region p { font-size: 15px; margin-top: 8px; line-height: 1.6; }
@media (max-width: 640px) { .v-region { grid-template-columns: 1fr; } }

/* founder card */
.v-founder { display: flex; gap: var(--s2); align-items: center; }
.v-founder .av { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--navy-2)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; flex-shrink: 0; letter-spacing: .02em; }
.v-founder b { display: block; font-size: 18px; color: var(--text); }
.v-founder small { display: block; font-size: 14.5px; color: var(--text-3); }

/* ==========================================================================
   HELIOUS — additional blocks
   ========================================================================== */
/* footer brand: round logo + full name */
.v-foot .brand { gap: 14px; }
.v-foot .brand img { height: 84px; width: auto; }
.v-foot .brand-name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.35; max-width: 220px; }

/* hero "what we build" card */
.hero-verts { display: grid; gap: 6px; margin-top: 10px; }
.hero-verts a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #F3F5FA; color: #0F1733; font-size: 13px; font-weight: 600; transition: background .2s, color .2s; }
.hero-verts a svg { color: #24409A; flex-shrink: 0; }
.hero-verts a:hover { background: #24409A; color: #fff; }
.hero-verts a:hover svg { color: #8EDB99; }

/* four verticals */
.v-verts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 1100px) { .v-verts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .v-verts { grid-template-columns: 1fr; } }
.v-vert { display: flex; flex-direction: column; border-radius: var(--r3); overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: transform .45s var(--ease), border-color .3s, background .3s; }
.v-vert:hover { transform: translateY(-6px); border-color: var(--amber); background: rgba(255,255,255,.08); }
.v-vert .ph { position: relative; aspect-ratio: 1.45 / 1; background: var(--navy-2); }
.v-vert .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 75%; transition: transform 1s var(--ease); }
.v-vert:hover .ph img { transform: scale(1.06); }
.v-vert .ph { overflow: hidden; }
.v-vert .ic { position: absolute; left: var(--s2); bottom: var(--s2); width: 48px; height: 48px; border-radius: 12px; background: var(--amber); color: var(--navy); display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(0,0,0,.6); }
.v-vert .bd { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.v-vert h3 { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.25; }
.v-vert p { font-size: 15px; color: #D3DAEC; line-height: 1.6; }
.v-vert .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.v-vert .chips span { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(57,178,72,.16); color: #8EDB99; }
.v-vert .go { margin-top: auto; padding-top: var(--s1); display: inline-flex; align-items: center; gap: 8px; color: var(--amber); font-weight: 600; font-size: 15px; }
.v-vert:hover .go svg { transform: translateX(4px); }
.v-vert .go svg { transition: transform .3s var(--ease); }

/* vision & mission band */
.v-vm { position: relative; border-radius: var(--r3); overflow: hidden; isolation: isolate; background: var(--navy); color: var(--on-dark-2); }
.v-vm__bg { position: absolute; inset: 0; z-index: -2; }
.v-vm__bg img { width: 100%; height: 100%; object-fit: cover; }
.v-vm::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(14,26,74,.97) 0%, rgba(14,26,74,.9) 55%, rgba(27,47,120,.72) 100%); }
.v-vm__in { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); padding: var(--s5); align-items: start; }
.v-vm .v-label { background: rgba(255,255,255,.1); color: #fff; }
.v-vm__big { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.35; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.v-vm__txt { font-size: 17px; line-height: 1.7; color: var(--on-dark-2); }
@media (max-width: 900px) { .v-vm__in { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4) var(--s3); } }