/** Shopify CDN: Minification failed

Line 2457:0 Unexpected "<"

**/


    :root {

      /* Sunset palette — 光 PV gold / 储 storage warm charcoal / 充 EV green */

      --primary: #c97f1e;

      --primary-light: #e9a94e;

      --primary-dark: #a5641a;

      --accent: #3fa26f;

      --dark: #16110a;

      --dark-2: #211910;

      --white: #ffffff;

      --gray-100: #f7f2e9;

      --gray-200: #ece3d3;

      --gray-300: #dbcdb5;

      --gray-400: #a79b85;

      --gray-500: #796d5a;

      --gray-700: #3c3528;

    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: auto; }

    body {

      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

      color: var(--dark);

      background: var(--white);

      overflow-x: hidden;

      transition: font-family .3s;

    }

    /* RTL support */

    html[dir="rtl"] body { font-family: 'Noto Naskh Arabic', 'Inter', sans-serif; }

    /* Arabic (RTL): keep the brand lockup (icon + Xiaofu) pinned to the top-LEFT,

       so the header bar stays balanced instead of crowding everything on the right */

    html[dir="rtl"] .topbar { direction: ltr; }

    html[dir="rtl"] .topbar-right { direction: ltr; }

    html[dir="rtl"] .logo { direction: ltr; letter-spacing: 0; }

    html[dir="rtl"] .stage-text, html[dir="rtl"] .progress-label { letter-spacing: 0; }



    /* ─── Header ─── */

    .topbar {

      /* Single source of truth for the bar height: the brand lockup and the

         responsive rules all derive from it, so the logo can never outgrow

         the bar (or float undersized inside it). */

      --topbar-h: 60px;

      position: fixed; top: 0; left: 0; right: 0; z-index: 300;

      background: rgba(253,250,244,.92);

      backdrop-filter: blur(16px);

      border-bottom: 1px solid var(--gray-200);

      height: var(--topbar-h);

      display: flex; align-items: center;

      padding: 0 40px;

      transition: background .4s;

    }

    .topbar.dark { background: rgba(24,18,10,.92); border-color: rgba(255,255,255,.08); }

    .logo { font-size: 20px; font-weight: 800; color: var(--dark); letter-spacing: -.03em; display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }

    .topbar.dark .logo { color: var(--white); }

    .logo span { color: var(--primary); }

    .logo img { display: block; width: auto; }

    /* ─── Brand lockup (header): one transparent PNG ─── */

    /* Height is a ratio of --topbar-h, so the mark is always proportionally

       sized to the bar (60px bar -> ~37px logo) instead of being a magic number

       that only happens to look right at one breakpoint. */

    .logo--brand { align-self: stretch; }

    .logo--brand img { height: calc(var(--topbar-h, 60px) * .62); width: auto; }

    .logo--full img { height: 75px; width: auto; }

    /* Brand wordmark next to the icon */

    .logo .logo-word { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--dark); margin-inline-start: 10px; white-space: nowrap; }

    .topbar.dark .logo .logo-word { color: var(--white); }

    [dir="rtl"] .logo-word { letter-spacing: 0; }

    @media (max-width: 768px) {

      .topbar { --topbar-h: 54px; }

      .logo--full img { height: 58px; }

      .logo .logo-word { font-size: 16px; margin-inline-start: 8px; }

    }

    .topbar-right { margin-left: auto; display: flex; gap: 24px; align-items: center; }

    .topbar-right a { font-size: 13px; color: var(--gray-500); font-weight: 500; transition: color .2s; }

    .topbar.dark .topbar-right a { color: rgba(255,255,255,.6); }

    .topbar-right a:hover { color: var(--primary); }

    /* ─── Nav actions ───

       Every nav entry is a filled brand button. Scoped as

       `.topbar-right .nav-pill` because the generic `.topbar-right a` rule

       (colour / 13px) would otherwise win on specificity.



       WHY THIS WAS INVISIBLE BEFORE: the pills used `var(--gray-100)`

       (#f7f2e9) on a topbar of rgba(253,250,244,.92) — cream on cream, so

       they read as plain text with no button at all. They now carry the

       brand gold that the old "Get a Quote" button used. */

    .nav-links { display: flex; align-items: center; gap: 8px; }

    .topbar-right .nav-pill {

      display: inline-flex; align-items: center;

      padding: 8px 14px; border-radius: 8px;

      font-size: 12px; font-weight: 600; line-height: 1;

      color: var(--white);

      background: var(--primary);

      border: 1px solid var(--primary);

      box-shadow: 0 1px 2px rgba(0,0,0,.08);

      white-space: nowrap;

      transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;

    }

    .topbar-right .nav-pill:hover {

      color: var(--white);

      background: var(--primary-light);

      border-color: var(--primary-light);

      transform: translateY(-1px);

      box-shadow: 0 4px 10px rgba(0,0,0,.12);

    }

    /* Over the dark (transparent-at-top) bar the gold still reads, so keep it. */

    .topbar.dark .topbar-right .nav-pill { color: var(--white); background: var(--primary); border-color: rgba(255,255,255,.28); }

    .topbar.dark .topbar-right .nav-pill:hover { background: var(--primary-light); border-color: var(--primary-light); }

    /* Progressive collapse — the bar must never wrap to a second line. */

    @media (max-width: 1440px) {

      .topbar { padding: 0 28px; }

      .topbar-right { gap: 14px; }

      .nav-links { gap: 6px; }

      .topbar-right .nav-pill { padding: 7px 11px; font-size: 11.5px; }

    }

    @media (max-width: 1220px) {

      .topbar { padding: 0 20px; }

      .topbar-right { gap: 10px; }

      .topbar-right .nav-pill { padding: 6px 9px; font-size: 11px; }

    }

    /* The two directory entries are the first to go: they have no page yet.

       Measured: all six pills + lockup still fit down to ~1060px, so 1080 keeps

       a real breathing gap before anything collapses. */

    @media (max-width: 1080px) { .topbar-right .nav-pill--dir { display: none; } }

    @media (max-width: 980px)  { .nav-links { display: none; } }



    /* ─── PVGIS Solar Calculator (in-site modal) ─── */

    .modal.modal--wide { width: min(1040px, 94vw); max-width: 94vw; }

    .pvgis-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 24px; }

    .pvgis-grid > div { min-width: 0; }

    @media (max-width: 880px) { .pvgis-grid { grid-template-columns: 1fr; } }

    @media (max-width: 560px) {

      .modal__header { padding: 22px 20px 0; }

      .modal__body { padding: 20px; }

      .modal__body .form-row { flex-direction: column; gap: 12px; }

      .pvgis-chart { height: 130px; }

      .pvgis-col .n { display: none; }

    }

    .pvgis-map {

      height: 230px; border-radius: 12px; overflow: hidden;

      border: 1.5px solid var(--gray-200); background: var(--gray-100);

    }

    .pvgis-map--off { display: none; }

    .pvgis-hint { font-size: 12px; color: var(--gray-500); margin-top: 8px; min-height: 15px; }

    .pvgis-sublabel {

      font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;

      color: var(--gray-400); margin: 16px 0 8px;

    }

    .pvgis-presets { display: flex; flex-wrap: wrap; gap: 6px; }

    .pvgis-preset {

      padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;

      border: 1px solid var(--gray-200); background: var(--gray-100); color: var(--gray-700);

      cursor: pointer; transition: all .18s;

    }

    .pvgis-preset:hover, .pvgis-preset.is-on { background: var(--primary); border-color: var(--primary); color: var(--white); }

    .pvgis-geo {

      margin-top: 10px; width: 100%; padding: 9px 12px; border-radius: 9px;

      border: 1.5px dashed var(--gray-300); background: var(--white);

      color: var(--gray-700); font-size: 12px; font-weight: 600; cursor: pointer;

      transition: all .18s;

    }

    .pvgis-geo:hover { border-color: var(--primary); color: var(--primary); }

    .pvgis-opt { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

    .pvgis-opt input { width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; }

    .pvgis-opt label { font-size: 12px; color: var(--gray-500); line-height: 1.3; cursor: pointer; }

    .pvgis-hintline { font-size: 11px; color: var(--gray-400); margin-top: 5px; }

    .pvgis-submit {

      width: 100%; margin-top: 18px; padding: 13px;

      background: var(--primary); color: var(--white);

      border: none; border-radius: 10px; font-size: 14px; font-weight: 700;

      cursor: pointer; transition: background .2s;

    }

    .pvgis-submit:hover { background: var(--primary-light); }

    .pvgis-submit:disabled { background: var(--gray-300); cursor: progress; }

    .pvgis-status { margin-top: 12px; font-size: 12.5px; color: var(--gray-500); min-height: 18px; display: flex; align-items: center; gap: 8px; }

    .pvgis-status.is-err { color: #c0392b; }

    .pvgis-spin { width: 14px; height: 14px; border: 2px solid var(--gray-300); border-top-color: var(--primary); border-radius: 50%; animation: pvgisspin .7s linear infinite; flex-shrink: 0; }

    @keyframes pvgisspin { to { transform: rotate(360deg); } }

    .pvgis-result { margin-top: 22px; border-top: 1px solid var(--gray-200); padding-top: 20px; }

    .pvgis-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

    @media (max-width: 620px) { .pvgis-kpis { grid-template-columns: 1fr; } }

    .pvgis-kpi { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px; padding: 13px 15px; }

    .pvgis-kpi .k { font-size: 11.5px; color: var(--gray-500); font-weight: 600; }

    .pvgis-kpi .v { font-size: 22px; font-weight: 800; color: var(--primary-dark); line-height: 1.3; }

    .pvgis-kpi .u { font-size: 11.5px; color: var(--gray-400); }

    .pvgis-chart { display: flex; align-items: flex-end; gap: 5px; height: 160px; margin-top: 20px; }

    .pvgis-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; min-width: 0; }

    .pvgis-bar { width: 100%; min-height: 2px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--primary-light), var(--primary)); transition: height .5s cubic-bezier(.4,0,.2,1); }

    .pvgis-col .m { font-size: 10px; color: var(--gray-400); }

    .pvgis-col .n { font-size: 9.5px; color: var(--gray-500); font-weight: 600; }

    .pvgis-note { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--gray-100); border: 1px solid var(--gray-200); font-size: 12px; color: var(--gray-500); line-height: 1.6; }

    .pvgis-note b { color: var(--gray-700); }

    /* ─── Solar & EV Configurator extras ─── */

    .sc-app-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

    .sc-app-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--gray-200); border-radius: 9px; background: var(--white); }

    .sc-app-row.is-off { opacity: .45; }

    .sc-app-chk { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }

    .sc-app-name { flex: 1; font-size: 12.5px; color: var(--gray-700); min-width: 0; line-height: 1.2; }

    .sc-app-in { width: 62px; font-size: 12px; padding: 5px 6px; border: 1px solid var(--gray-200); border-radius: 7px; }

    .sc-app-unit { font-size: 10px; color: var(--gray-400); }

    .sc-report-h { font-size: 17px; font-weight: 800; color: var(--primary-dark); margin: 4px 0 14px; }

    @media (max-width: 620px) { .sc-app-in { width: 54px; } }

    .leaflet-container { font: inherit; background: var(--gray-100); }



    /* ─── Language Switcher ─── */

    .lang-switcher {

      display: flex;

      align-items: center;

      gap: 4px;

      background: var(--gray-100);

      border: 1px solid var(--gray-200);

      border-radius: 8px;

      padding: 4px;

      position: relative;

    }

    .topbar.dark .lang-switcher {

      background: rgba(255,255,255,.1);

      border-color: rgba(255,255,255,.15);

    }

    .lang-btn {

      display: flex;

      align-items: center;

      gap: 5px;

      padding: 5px 10px;

      border: none;

      background: transparent;

      border-radius: 6px;

      font-size: 12px;

      font-weight: 600;

      color: var(--gray-500);

      cursor: pointer;

      transition: all .2s;

      white-space: nowrap;

    }

    .topbar.dark .lang-btn { color: rgba(255,255,255,.5); }

    .lang-btn:hover { color: var(--primary); }

    .topbar.dark .lang-btn:hover { color: var(--primary-light); }

    .lang-btn.active {

      background: var(--white);

      color: var(--dark);

      box-shadow: 0 1px 4px rgba(0,0,0,.1);

    }

    .topbar.dark .lang-btn.active {

      background: rgba(255,255,255,.15);

      color: var(--white);

      box-shadow: none;

    }

    .lang-flag {

      width: 18px;

      height: 12px;

      border-radius: 2px;

      object-fit: cover;

      flex-shrink: 0;

    }

    /* SVG flag placeholders */

    .flag-svg {

      width: 18px;

      height: 12px;

      border-radius: 2px;

      flex-shrink: 0;

    }



    /* ─── Scroll Track ─── */

    .scroll-track { height: 800vh; position: relative; }



    /* ─── 3D Viewer (Fixed) ─── */

    .viewer {

      position: fixed;

      inset: 0;

      z-index: 100;

      pointer-events: none;

      display: flex;

      align-items: center;

      justify-content: center;

      opacity: 1;

      transition: opacity .6s ease, transform .6s ease;

    }

    .viewer.hidden {

      opacity: 0;

      transform: scale(.92);

      pointer-events: none;

    }

    .viewer.fade-in { opacity: 1; transform: scale(1); }

    /* Click-to-zoom: the fixed viewer is pointer-events:none so it never blocks the
       page underneath — re-enable hit-testing on the cube itself, but only while the
       viewer is actually on screen (i.e. not .hidden). */
    .viewer:not(.hidden) .scene { pointer-events: auto; }



    .scene {

      width: 560px; height: 460px;

      perspective: 1400px;

      position: relative;

    }

    .product-cube {

      width: 100%; height: 100%;

      position: relative;

      transform-style: preserve-3d;

    }





    /* ─── Zoom overlay ─── */

    .zoom-overlay {

      position: fixed; inset: 0; z-index: 600;

      background: rgba(5,10,20,.88);

      backdrop-filter: blur(8px);

      display: flex; align-items: center; justify-content: center;

      opacity: 0; pointer-events: none;

      transition: opacity .3s;

      cursor: zoom-out;

    }

    .zoom-overlay.open { opacity: 1; pointer-events: all; }

    .zoom-overlay .zoom-inner {

      position: relative;

      max-width: 80vw; max-height: 85vh;

      transform: scale(.9); opacity: 0;

      transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s;

    }

    .zoom-overlay.open .zoom-inner { transform: scale(1); opacity: 1; }

    .zoom-overlay .zoom-inner svg,

    .zoom-overlay .zoom-inner .zoom-content {

      max-width: 600px; max-height: 75vh;

      width: auto; height: auto;

      filter: drop-shadow(0 20px 60px rgba(0,0,0,.5));

    }

    .zoom-close {

      position: absolute; top: -48px; right: 0;

      width: 36px; height: 36px;

      background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);

      border-radius: 8px; color: #fff; font-size: 18px;

      cursor: pointer; display: flex; align-items: center; justify-content: center;

      transition: background .2s;

    }

    .zoom-close:hover { background: rgba(255,255,255,.25); }

    .zoom-caption {

      text-align: center; margin-top: 16px;

      color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600;

      letter-spacing: .04em;

    }

    .zoom-caption-sub { color: rgba(255,255,255,.45); font-size: 12px; margin-top: 4px; font-weight: 400; letter-spacing: 0; }



    /* Faces */

    .face {

      position: absolute;

      width: 290px; height: 440px;

      left: 50%; top: 50%;

      margin-left: -145px; margin-top: -220px;

      border-radius: 18px;

      display: flex; flex-direction: column;

      align-items: center; justify-content: center;

      padding: 0;                   /* the cut-out fills the whole frame */

      overflow: hidden;

      color: var(--white);          /* faces always sit on a dark navy gradient */

      backface-visibility: hidden;

      box-shadow: 0 24px 80px rgba(0,0,0,.3);

      cursor: zoom-in;

      transition: filter .25s, transform .25s;

    }

    .product-cube .face:hover {

      filter: brightness(1.18);

      transform: translateZ(184px);

    }

    .product-cube .face--front:hover { transform: rotateY(0deg)   translateZ(184px); }

    .product-cube .face--right:hover { transform: rotateY(90deg)  translateZ(184px); }

    .product-cube .face--back:hover  { transform: rotateY(180deg) translateZ(184px); }



    .face--front  { transform: rotateY(0deg) translateZ(180px); background: #f3ead8; }

    .face--right  { transform: rotateY(90deg) translateZ(180px); background: #f1e7d2; }

    .face--back   { transform: rotateY(180deg) translateZ(180px); background: #efe4cd; }



    /* Product cut-out only — no caption inside the frame.

       The three sources share one canvas ratio with the machine at an identical

       height, so the product fills the frame and never changes size while the

       cube rotates. */

    .face img {

      display: block;

      width: 100%; height: 100%;

      object-fit: contain;

      filter: drop-shadow(0 18px 30px rgba(90, 65, 30, .22));

    }



    .floor-shadow {

      position: absolute; width: 320px; height: 50px;

      background: radial-gradient(ellipse, rgba(95, 70, 35, .28) 0%, transparent 70%);

      left: 50%; top: 78%; transform: translate(-50%, 0) rotateX(90deg);

      margin-top: 160px;

    }



    /* ─── Info Panels ─── */

    .info-panel {

      position: fixed;

      z-index: 120;

      pointer-events: none;

      opacity: 0;

      transition: opacity .5s ease, transform .5s ease;

      max-width: 320px;

    }

    .info-panel--left  { left: 80px; top: 50%; transform: translateY(-50%) translateX(-24px); }

    .info-panel--right { right: 80px; top: 50%; transform: translateY(-50%) translateX(24px); }

    .info-panel.visible { opacity: 1; transform: translateY(-50%) translateX(0); }

    /* Only the currently visible panel becomes hit-testable, so its copy can be
       selected / copied / right-clicked. The container itself stays pointer-events:none
       so the hidden panels never intercept clicks on the 3D cube behind them. */
    .info-panel.visible .tag,
    .info-panel.visible h2,
    .info-panel.visible p,
    .info-panel.visible .li { pointer-events: auto; user-select: text; -webkit-user-select: text; }

    .info-panel .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); margin-bottom: 12px; }

    .info-panel h2  { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 14px; }

    .info-panel p   { font-size: 14px; line-height: 1.7; color: var(--gray-500); }

    .topbar.dark ~ .info-panel h2,

    .info-panel.dark h2 { color: var(--white); }

    .info-panel.dark .tag { color: var(--accent); }

    .info-panel.dark p    { color: rgba(255,255,255,.55); }

    /* multi-line feature list inside a panel paragraph */

    .info-panel p > .li, .intro-feats .li { display: block; position: relative; padding-inline-start: 16px; margin-bottom: 6px; line-height: 1.5; }

    .info-panel p > .li:last-child, .intro-feats .li:last-child { margin-bottom: 0; }

    .info-panel p > .li::before, .intro-feats .li::before {

      content: ''; position: absolute; inset-inline-start: 0; top: .58em;

      width: 6px; height: 6px; border-radius: 50%; background: var(--primary);

    }

    .info-panel.dark p > .li::before { background: var(--accent); }

    /* panel0 (front) & panel2 (back) — emoji feature lists instead of bullet dots */

    .info-panel .tag:empty { display: none; }

    .info-panel h2:empty, .info-panel p:empty { display: none; }

    #panel0 .li::before, #panel1 .li::before, #panel2 .li::before, #panel0Left .li::before { content: none; }

    #panel0 .li, #panel1 .li, #panel2 .li, #panel0Left .li { padding-inline-start: 0; margin-bottom: 16px; font-size: 14.5px; line-height: 1.62; }

    #panel0 .li:last-child, #panel1 .li:last-child, #panel2 .li:last-child, #panel0Left .li:last-child { margin-bottom: 0; }

    #panel0 .li strong, #panel1 .li strong, #panel2 .li strong, #panel0Left .li strong { color: var(--dark); font-weight: 700; }

    #panel0Left h2:empty { display: none; }

    /* panel0 (front-right) — right-hand copy intentionally removed per request.

       During the front view only the left companion panel #panel0Left shows. */

    #panel0 { display: none; }



    /* ─── Intro Scene (between nav and the 3D viewer) ─── */

    .intro-scene {

      position: relative;

      z-index: 150; /* above bgLayer(50) / viewer(100) / info-panels(120), below header(300) */

      min-height: 100vh;

      display: flex;

      align-items: center;

      padding: 130px 80px 100px;

      overflow: hidden;

      background: #241a0e;

    }

    .intro-media { position: absolute; inset: 0; direction: ltr; }

    .intro-track {

      display: flex; width: 100%; height: 100%;

      transition: transform .65s cubic-bezier(.77, 0, .18, 1);

      will-change: transform;

    }

    .intro-slide { flex: 0 0 100%; position: relative; }

    .intro-media img {

      display: block; width: 100%; height: 100%;

      object-fit: cover; object-position: center 42%;

    }

    .intro-slide--flow img { object-position: center; }

    /* ─── Intro banner carousel controls ─── */

    .intro-nav {

      position: absolute; right: 80px; bottom: 56px; z-index: 3;

      display: flex; align-items: center; gap: 18px; direction: ltr;

    }

    .intro-arrow {

      width: 46px; height: 46px; border-radius: 50%;

      border: 1px solid rgba(255,255,255,.45);

      background: rgba(22,15,7,.35); backdrop-filter: blur(6px);

      color: #fff; cursor: pointer;

      display: flex; align-items: center; justify-content: center;

      transition: background .2s, border-color .2s, opacity .2s, transform .2s;

    }

    .intro-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

    .intro-arrow:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-1px); }

    .intro-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }

    .intro-dots { display: flex; gap: 10px; }

    .intro-dot {

      width: 10px; height: 10px; border-radius: 50%; padding: 0;

      border: 1px solid rgba(255,255,255,.7); background: transparent;

      cursor: pointer; transition: background .2s, transform .2s;

    }

    .intro-dot.active { background: var(--primary); border-color: var(--primary); transform: scale(1.15); }

    @media (max-width: 900px) {

      .intro-nav { right: 24px; bottom: 40px; gap: 12px; }

      .intro-arrow { width: 40px; height: 40px; }

    }

    .intro-scrim {

      position: absolute; inset: 0;

      background:

        linear-gradient(270deg, rgba(22,15,7,.85) 0%, rgba(22,15,7,.62) 40%, rgba(22,15,7,.12) 66%, rgba(22,15,7,0) 84%),

        linear-gradient(180deg, rgba(22,15,7,.50) 0%, rgba(22,15,7,0) 28%, rgba(22,15,7,0) 60%, rgba(22,15,7,.55) 100%);

      transition: opacity .55s ease;

    }

    .intro-scene.on-flow .intro-scrim { opacity: 0; }

    .intro-inner {

      position: relative; z-index: 2;

      width: 100%; max-width: 1280px; margin: 0 auto;

    }

    .intro-copy { max-width: 440px; margin-left: auto; margin-right: min(-72px, calc((1280px - 100vw) / 2 + 48px)); transition: opacity .45s ease; }

    .intro-scene.on-flow .intro-copy { opacity: 0; pointer-events: none; }

    .intro-copy h1 {

      font-size: 44px; font-weight: 800; letter-spacing: -.03em;

      line-height: 1.12; color: #fff; margin-bottom: 28px;

      text-shadow: 0 2px 28px rgba(0,0,0,.35);

      transition: color .45s ease, text-shadow .45s ease;

    }

    .intro-feats { display: flex; flex-direction: column; gap: 14px; font-size: 18px; color: rgba(255,255,255,.95); font-weight: 500; text-shadow: 0 1px 12px rgba(0,0,0,.4); transition: color .45s ease, text-shadow .45s ease; }

    .intro-scene.on-flow .intro-copy h1 { color: #241a0e; text-shadow: 0 1px 10px rgba(255,255,255,.45); }

    .intro-scene.on-flow .intro-feats { color: #43371f; text-shadow: 0 1px 8px rgba(255,255,255,.4); }

    @media (max-width: 900px) {

      .intro-scene { padding: 110px 24px 64px; }

      .intro-copy { max-width: 100%; margin-right: 0; }

      .intro-copy h1 { font-size: 30px; margin-bottom: 18px; }

      .intro-scrim { background: linear-gradient(180deg, rgba(22,15,7,.45) 0%, rgba(22,15,7,.25) 40%, rgba(22,15,7,.72) 100%); }

    }



    /* ─── Scroll Hint ─── */

    .scroll-hint {

      position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%);

      z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 10px;

      transition: opacity .4s;

    }

    .scroll-hint span { font-size: 12px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .15em; }

    .scroll-arrow {

      width: 24px; height: 24px;

      border-right: 2px solid var(--gray-400); border-bottom: 2px solid var(--gray-400);

      transform: rotate(45deg); animation: bounce 1.5s ease infinite;

    }

    @keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0);opacity:1} 50%{transform:rotate(45deg) translateY(6px);opacity:.4} }



    /* ─── Progress ─── */

    .progress-bar {

      position: fixed; right: 28px; top: 50%; transform: translateY(-50%);

      z-index: 200; display: flex; flex-direction: column; gap: 0;

      align-items: center;

    }

    .progress-track {

      width: 3px; height: 200px; background: var(--gray-200); border-radius: 2px;

      position: relative; overflow: hidden;

    }

    .progress-fill {

      position: absolute; top: 0; left: 0; right: 0;

      height: 0%; background: var(--primary); border-radius: 2px; transition: height .08s;

    }

    .progress-label { font-size: 10px; font-weight: 600; color: var(--gray-400); margin-top: 10px; letter-spacing: .08em; }



    /* ─── Background ─── */

    .bg-layer {

      position: fixed; inset: 0; z-index: 50; pointer-events: none;

      transition: background .3s;

      background: linear-gradient(180deg, #faf5ea 0%, #f4ebd9 55%, #efe3cb 100%);

    }



    /* ─── Stage Indicator ─── */

    .stage-indicator {

      position: fixed; top: 80px; left: 50%; transform: translateX(-50%);

      z-index: 200; display: flex; gap: 8px; align-items: center;

      opacity: 0; transition: opacity .4s;

    }

    .stage-indicator.visible { opacity: 1; }

    .stage-dot {

      width: 8px; height: 8px; border-radius: 50%;

      background: var(--gray-300); transition: all .3s;

    }

    .stage-dot.active { background: var(--primary); width: 24px; border-radius: 4px; }

    .stage-text { font-size: 12px; font-weight: 600; color: var(--gray-400); margin-left: 8px; letter-spacing: .08em; }

    .topbar.dark ~ .stage-text { color: rgba(255,255,255,.4); }



    /* ─── Layout container ───

       `.container` is used by the video / resources / partners / footer

       sections but had NO rule at all, so those blocks ran edge-to-edge

       with zero page margin (video cards touched the screen edges and the

       wide video grew to the full viewport width). Match the intro's

       1280px content width: 1344px box - 2x32px padding = 1280px content. */

    .container {

      width: 100%;

      max-width: 1344px;

      margin: 0 auto;

      padding-inline: 32px;

    }



    /* ══════════════════════════════════════

       VIDEO SECTION (after scroll track)

    ══════════════════════════════════════ */

    .video-section {

      position: relative;

      z-index: 200;

      background: linear-gradient(170deg, #f8f1e0 0%, #f1e4c8 55%, #ecd9b3 100%);

      padding: 120px 0 100px;

      opacity: 0;

      transform: translateY(40px);

      transition: opacity .8s ease, transform .8s ease;

    }

    .video-section.visible { opacity: 1; transform: translateY(0); }



    .video-section .section-label { color: var(--primary); }

    .video-section .section-title { color: var(--dark); }

    .video-section .section-subtitle { color: var(--gray-500); }



    .video-grid {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 24px;

      margin-top: 64px;

    }

    .video-card {

      border-radius: var(--radius-lg, 16px);

      overflow: hidden;

      background: #fffdf8;

      border: 1px solid var(--gray-200);

      transition: all .35s ease;

      cursor: pointer;

    }

    .video-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 20px 60px rgba(90,65,30,.16); }

    .video-card--wide { grid-column: span 2; }

    .video-thumb {

      aspect-ratio: 16/9;

      background: linear-gradient(135deg, #efe2c6 0%, #d9c8a6 100%);

      position: relative;

      display: flex; align-items: center; justify-content: center;

      overflow: hidden;

    }

    .video-card--wide .video-thumb { aspect-ratio: 21/9; }

    /* Play button */

    .play-btn {

      width: 72px; height: 72px; border-radius: 50%;

      background: rgba(255,255,255,.92);

      border: 2px solid rgba(255,255,255,.92);

      display: flex; align-items: center; justify-content: center;

      transition: all .3s;

      z-index: 2;

      backdrop-filter: blur(8px);

    }

    .play-btn::after {

      content: ''; display: block;

      border: 12px solid transparent;

      border-left-color: var(--primary);

      margin-left: 4px;

    }

    .video-card:hover .play-btn { background: var(--primary); border-color: var(--primary); transform: scale(1.1); }

    /* Thumbnail placeholder pattern */

    .video-thumb::before {

      content: ''; position: absolute; inset: 0;

      background-image:

        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);

      background-size: 24px 24px;

    }

    .video-thumb::after {

      content: ''; position: absolute;

      width: 120px; height: 120px;

      background: var(--primary);

      border-radius: 50%;

      filter: blur(60px);

      opacity: .25;

      top: 50%; left: 50%;

      transform: translate(-50%,-50%);

    }

    .video-thumb .thumb-label {

      position: absolute; bottom: 16px; left: 16px;

      font-size: 11px; font-weight: 600; color: var(--gray-500);

      text-transform: uppercase; letter-spacing: .1em;

      background: rgba(0,0,0,.06); padding: 4px 10px; border-radius: 4px;

    }

    .video-thumb .thumb-duration {

      position: absolute; bottom: 16px; right: 16px;

      font-size: 12px; font-weight: 600; color: var(--gray-500);

      background: rgba(0,0,0,.06); padding: 4px 10px; border-radius: 4px;

    }

    .video-info { padding: 24px; }

    .video-info h3 { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 8px; letter-spacing: -.01em; }

    .video-info p  { font-size: 13px; color: var(--gray-500); line-height: 1.6; }



    /* ─── Video Section (white bg variant) ─── */

    .video-section--light {

      background: var(--white);

      padding: 100px 0 80px;

    }

    .video-section--light .video-card { background: var(--gray-100); border-color: var(--gray-200); }

    .video-section--light .video-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md, 0 8px 32px rgba(60,45,22,.12)); }

    .video-section--light .video-thumb { background: linear-gradient(135deg, #f2ead9 0%, #d9cdb6 100%); }

    .video-section--light .video-thumb::before { display: none; }

    .video-section--light .play-btn { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); }

    .video-section--light .play-btn::after { border-left-color: var(--primary); }

    .video-section--light .video-thumb .thumb-label { background: rgba(0,0,0,.08); color: var(--gray-500); }

    .video-section--light .video-thumb .thumb-duration { background: rgba(0,0,0,.08); color: var(--gray-600); }

    .video-section--light .video-info h3 { color: var(--dark); }

    .video-section--light .video-info p  { color: var(--gray-500); }

    .video-section--light .section-label { color: var(--primary); }

    .video-section--light .section-title { color: var(--dark); }

    .video-section--light .section-subtitle { color: var(--gray-500); }



    /* ─── Brand promo video (first card, real <video>) ─── */

    .brand-video-card { cursor: default; }

    /* Must beat `.video-card--wide .video-thumb { aspect-ratio: 21/9 }` (2 classes).

       The brand film is natively 1280x720 (16:9), so match it exactly to avoid

       cropping. The card keeps the FULL grid width (grid-column: span 2) so its

       left/right edges line up with the combined width of the two cards in the

       row below. `max-height` only engages on short viewports; on tall screens

       the cap is inactive and the video is a pixel-perfect, uncropped 16:9. */

    .video-card--wide .brand-video-thumb {

      /* width MUST be explicit: with `aspect-ratio` + `max-height` and an auto

         width, the box shrinks its own width to keep the ratio (it collapsed to

         1088px and stuck to the left edge, leaving a gap on the right).

         Pinning width:100% keeps the thumb flush with the card, and the video is

         then centred inside it by object-fit. */

      width: 100%;

      aspect-ratio: 16/9;

      max-height: 75vh;

      padding: 0;

      /* Flat warm matte. The inherited 135deg gradient made the left and right

         side bands visibly different colours, which read as an off-centre video.

         A single flat tone keeps the framing symmetrical. On tall viewports the

         cap is inactive, the box is exactly 16:9 and no matte shows at all. */

      background: #e9dfc9;

    }

    .brand-video-thumb::before, .brand-video-thumb::after { display: none; }

    /* Transparent (not #000) so any letterbox matting shows the thumb gradient. */

    .brand-video { width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }

    /* Moved from bottom-left to top-left: with native `controls` enabled the

       browser draws its control bar across the bottom ~40px, so the label sat

       directly on top of the play button. */

    .brand-thumb-label { position: absolute; top: 16px; left: 16px; z-index: 3; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 4px; }

    /* Loading indicator: the clip is fetched whole before it can be scrubbed, so

       show progress feedback over the poster instead of a dead control bar. */

    .brand-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }

    .brand-loading::after { content: ''; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: bvspin .8s linear infinite; }

    @keyframes bvspin { to { transform: rotate(360deg); } }

    .brand-video-thumb.is-ready .brand-loading { display: none; }

    .brand-info { padding: 24px; }

    .brand-info h3 { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 8px; letter-spacing: -.01em; }

    .brand-info p  { font-size: 13px; color: var(--gray-500); line-height: 1.6; }



    /* ─── Partner programme (certified installer / authorised distributor) ─── */

    /* Higher specificity than the base `.modal` rule (which is defined later

       in this stylesheet), so the wider partner layout actually applies. */

    .modal.partner-modal { width: 720px; }

    .af-commission { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }

    .af-commission h3 { font-size: 13px; font-weight: 700; color: var(--dark); margin: 0 0 8px; }

    .af-commission ul { margin: 0; padding-left: 18px; }

    .af-commission li { font-size: 12.5px; line-height: 1.6; color: var(--gray-700); margin-bottom: 5px; }

    .af-commission li:last-child { margin-bottom: 0; }

    .af-multi-hint { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; margin: 0 0 10px; }

    .pp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-bottom: 6px; }

    .pp-full { grid-column: 1 / -1; }

    .pp-opt { font-size: 11.5px; font-weight: 600; color: var(--gray-400); margin-left: 6px; text-transform: none; letter-spacing: 0; }

    .qual-section { margin-top: 8px; border-top: 1px solid var(--gray-200); padding-top: 18px; }

    .qual-section h3 { font-size: 15.5px; font-weight: 800; color: var(--dark); margin: 0 0 6px; }

    .qual-hint { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; margin: 0 0 14px; }

    .qual-group-label {

      font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;

      color: var(--primary-dark); margin: 16px 0 8px;

    }

    .qual-list { display: flex; flex-direction: column; gap: 8px; }

    .qual-item {

      display: flex; gap: 10px; align-items: flex-start; cursor: pointer;

      padding: 10px 12px; border: 1.5px solid var(--gray-200); border-radius: 10px;

      background: var(--white); transition: border-color .2s, background .2s;

    }

    .qual-item:hover { border-color: var(--primary); }

    .qual-item input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--primary); flex: 0 0 auto; }

    .qual-item > span { font-size: 13.5px; line-height: 1.55; color: var(--gray-700); }

    .qual-item.is-missing { border-color: #e53e3e; background: #fff5f5; }

    .qual-error {

      display: none; margin-top: 12px; padding: 10px 14px; border-radius: 10px;

      background: #fff5f5; border: 1.5px solid #feb2b2; color: #c53030;

      font-size: 13px; line-height: 1.6;

    }

    .qual-error.show { display: block; }

    .qual-consent {

      display: flex; gap: 10px; align-items: flex-start; cursor: pointer;

      margin: 18px 0 4px; font-size: 13px; color: var(--gray-700); line-height: 1.6;

    }

    .qual-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); flex: 0 0 auto; }

    .pp-ref {

      display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 8px;

      font-size: 12.5px; font-weight: 700; color: var(--primary-dark);

      background: rgba(201,127,30,.12);

    }

    @media (max-width: 700px) {

      .pp-grid { grid-template-columns: 1fr; }

      .modal.partner-modal { width: 96vw; }

    }



    /* ─── Internal review console (#partner-review) ─── */

    .pp-review { position: fixed; inset: 0; z-index: 600; background: var(--gray-100); overflow: auto; padding: 32px 20px; direction: ltr; }

    .pp-review__box { max-width: 1100px; margin: 0 auto; background: var(--white); border-radius: 16px; padding: 24px; }

    .pp-review h2 { font-size: 20px; font-weight: 800; color: var(--dark); margin: 0 0 4px; }

    .pp-review table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }

    .pp-review th, .pp-review td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }

    .pp-review th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); }

    .pp-btn { border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--dark); cursor: pointer; margin-right: 6px; }

    .pp-btn:hover { border-color: var(--primary); color: var(--primary-dark); }

    .pp-status { font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }

    .pp-status--pending { background: rgba(201,127,30,.14); color: var(--primary-dark); }

    .pp-status--approved { background: rgba(63,162,111,.16); color: #2c7a52; }

    .pp-status--rejected { background: #fee; color: #c53030; }

    .pp-empty { font-size: 13.5px; color: var(--gray-500); padding: 18px; background: var(--gray-100); border-radius: 10px; line-height: 1.6; }



    /* ─── Footer ─── */

    .footer {

      position: relative;

      z-index: 200; /* above .bg-layer(50) — same convention as video/about/specs sections */

      background: #241a0e; /* warm dusk brown, unified with intro-scene tone */

      color: rgba(255,255,255,.62);

      padding: 64px 0 32px;

      border-top: 1px solid rgba(255,255,255,.06);

    }

    .footer .container { display: block; }

    .footer__top {

      display: grid;

      grid-template-columns: 1.1fr 2fr;

      gap: 48px;

      padding-bottom: 40px;

      border-bottom: 1px solid rgba(255,255,255,.08);

    }

    .footer__brand .logo { color: var(--white); margin-bottom: 18px; }

    .footer__tagline {

      font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78);

      max-width: 320px; margin: 0 0 20px;

    }

    .footer__contact { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; }

    .footer__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.68); line-height: 1.6; }

    .footer__contact li span[data-i18n="footer_address"] { overflow-wrap: anywhere; }

    .footer__ico { width: 18px; text-align: center; opacity: .7; flex: none; line-height: 1.6; }

    .footer__legal-meta { margin: 0 0 20px; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.62); }

    .footer__legal-meta .footer__company-name { color: rgba(255,255,255,.78); }

    .footer__legal-meta p { margin: 0 0 4px; overflow-wrap: anywhere; }

    .footer__legal-meta .footer__sep { margin-right: 2px; }

    .footer__legal-meta .footer__uscc { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; color: rgba(255,255,255,.66); direction: ltr; unicode-bidi: isolate; }

    .footer__contact a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .2s; direction: ltr; unicode-bidi: isolate; }

    .footer__contact a:hover { color: var(--primary-light); }

    .footer__social { display: flex; gap: 12px; }

    .footer__social a {

      width: 36px; height: 36px; border-radius: 50%;

      display: inline-flex; align-items: center; justify-content: center;

      background: rgba(255,255,255,.08); color: rgba(255,255,255,.78);

      transition: background .2s, color .2s;

    }

    .footer__social a:hover { background: var(--primary); color: #16110a; }

    .footer__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

    .footer__cta {

      display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;

      background: var(--primary); color: #16110a;

      font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;

      border: none; border-radius: 10px; padding: 11px 20px; cursor: pointer;

      transition: background .2s, transform .2s;

    }

    .footer__cta:hover { background: var(--primary-light); transform: translateY(-1px); }

    .footer__cta:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; }

    .footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

    .footer__col h4 {

      font-size: 13px; font-weight: 600; letter-spacing: .04em;

      text-transform: uppercase; color: var(--white); margin: 0 0 16px;

    }

    .footer__col a {

      display: block; font-size: 13px; color: rgba(255,255,255,.62);

      text-decoration: none; padding: 6px 0; transition: color .2s;

    }

    .footer__col a:hover { color: var(--primary-light); }

    .footer__bottom {

      display: flex; justify-content: space-between; align-items: center;

      flex-wrap: wrap; gap: 12px; padding-top: 24px;

    }

    .footer-copy { font-size: 12px; color: rgba(255,255,255,.55); }

    .footer__legal { display: flex; gap: 20px; }

    .footer__legal a { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }

    .footer__legal a:hover { color: var(--primary-light); }

    @media (max-width: 820px) {

      .footer__top { grid-template-columns: 1fr; gap: 32px; }

      .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }

      .footer__bottom { flex-direction: column; align-items: flex-start; }

    }

    @media (max-width: 480px) {

      .footer__cols { grid-template-columns: 1fr; }

    }



    /* ─── Partners Section ─── */

    .partners {

      position: relative;

      z-index: 200; /* above .bg-layer(50) — same convention as video/about/specs sections */

      background: var(--gray-100);

      padding: 64px 0;

      border-top: 1px solid var(--gray-200);

    }

    .partners__label {

      text-align: center;

      font-size: 12px;

      font-weight: 600;

      text-transform: uppercase;

      letter-spacing: .12em;

      color: var(--gray-400);

      margin-bottom: 36px;

    }

    .partners__grid {

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 56px;

      flex-wrap: wrap;

    }

    .partner-logo {

      display: flex;

      align-items: center;

      gap: 10px;

      opacity: .4;

      transition: opacity .3s;

      cursor: default;

    }

    .partner-logo:hover { opacity: .8; }

    .partner-logo svg { width: 32px; height: 32px; flex-shrink: 0; }

    .partner-logo span {

      font-size: 15px;

      font-weight: 700;

      color: var(--dark);

      letter-spacing: -.02em;

    }



    /* ─── Inquiry Modal ─── */

    .modal-overlay {

      position: fixed; inset: 0; z-index: 500;

      background: rgba(0,0,0,.6);

      backdrop-filter: blur(4px);

      display: flex; align-items: center; justify-content: center;

      opacity: 0; pointer-events: none;

      transition: opacity .3s;

    }

    .modal-overlay.open { opacity: 1; pointer-events: all; }

    .modal {

      background: var(--white);

      border-radius: 20px;

      width: 520px;

      max-width: 92vw;

      max-height: 90vh;

      overflow-y: auto;

      overflow-x: hidden;

      transform: translateY(24px) scale(.97);

      transition: transform .35s cubic-bezier(.4,0,.2,1);

      box-shadow: 0 32px 80px rgba(0,0,0,.25);

    }

    .modal-overlay.open .modal { transform: translateY(0) scale(1); }

    .modal__header {

      padding: 32px 36px 0;

      display: flex; align-items: flex-start; justify-content: space-between;

    }

    .modal__header h2 {

      font-size: 22px; font-weight: 800; color: var(--dark);

      letter-spacing: -.02em; line-height: 1.2;

    }

    .modal__header p {

      font-size: 14px; color: var(--gray-500); margin-top: 6px;

    }

    .modal__close {

      width: 36px; height: 36px; border-radius: 10px;

      border: 1px solid var(--gray-200); background: var(--white);

      cursor: pointer; display: flex; align-items: center; justify-content: center;

      font-size: 18px; color: var(--gray-500); flex-shrink: 0;

      transition: all .2s;

    }

    .modal__close:hover { border-color: var(--primary); color: var(--primary); }

    .modal__body { padding: 28px 36px 36px; }

    .form-row { display: flex; gap: 16px; margin-bottom: 16px; }

    .form-group { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

    .form-group label {

      font-size: 13px; font-weight: 600; color: var(--gray-700);

    }

    .form-group label .required { color: #e53e3e; margin-left: 2px; }

    .form-group input,

    .form-group select,

    .form-group textarea {

      padding: 12px 14px;

      border: 1.5px solid var(--gray-200);

      border-radius: 10px;

      font-size: 14px;

      font-family: inherit;

      color: var(--dark);

      background: var(--white);

      transition: border-color .2s, box-shadow .2s;

      outline: none;

    }

    .form-group input:focus,

    .form-group select:focus,

    .form-group textarea:focus {

      border-color: var(--primary);

      box-shadow: 0 0 0 3px rgba(10,110,92,.12);

    }

    .form-group textarea { resize: vertical; min-height: 90px; }

    .form-group input::placeholder,

    .form-group textarea::placeholder { color: var(--gray-400); }

    .form-submit {

      margin-top: 8px;

      width: 100%;

      padding: 15px;

      background: var(--primary);

      color: var(--white);

      border: none;

      border-radius: 10px;

      font-size: 15px;

      font-weight: 700;

      cursor: pointer;

      transition: background .2s, transform .15s;

    }

    .form-submit:hover { background: var(--primary-dark); transform: translateY(-1px); }

    .form-submit:active { transform: translateY(0); }

    .form-note {

      text-align: center;

      font-size: 12px;

      color: var(--gray-400);

      margin-top: 14px;

    }

    .form-success {

      display: none;

      text-align: center;

      padding: 40px 36px;

    }

    .form-success.show { display: block; }

    .form-success .check-circle {

      width: 64px; height: 64px;

      border-radius: 50%;

      background: rgba(10,110,92,.1);

      display: flex; align-items: center; justify-content: center;

      margin: 0 auto 20px;

      font-size: 28px;

    }

    .form-success h3 { font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }

    .form-success p { font-size: 14px; color: var(--gray-500); line-height: 1.6; }



    /* ─── Directory modal (Local Installers / Distributors) ─── */

    .dir-ask-title { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }

    .dir-ask-text { font-size: 14px; color: var(--gray-500); line-height: 1.6; margin: 0 0 18px; }

    .dir-choices { display: flex; gap: 14px; flex-wrap: wrap; }

    .dir-choice {

      flex: 1 1 200px; min-width: 0;

      display: flex; flex-direction: column; gap: 4px; align-items: flex-start;

      padding: 16px 18px; border: 1.5px solid var(--gray-200); border-radius: 12px;

      background: var(--white); cursor: pointer; text-align: left;

      transition: border-color .2s, box-shadow .2s, transform .15s;

    }

    .dir-choice:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201,127,30,.12); transform: translateY(-1px); }

    .dir-choice__t { font-size: 15px; font-weight: 700; color: var(--dark); }

    .dir-choice__d { font-size: 12.5px; color: var(--gray-500); }

    .dir-back {

      background: none; border: none; color: var(--primary); cursor: pointer;

      font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 12px;

    }

    .dir-results-title { font-size: 16px; font-weight: 700; color: var(--dark); margin: 4px 0 14px; }

    .dir-list { display: flex; flex-direction: column; gap: 12px; }

    .dir-card {

      border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 16px 18px;

      background: var(--white);

    }

    .dir-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

    .dir-card__name { font-size: 16px; font-weight: 700; color: var(--dark); }

    .dir-badge {

      font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;

      background: rgba(201,127,30,.12); color: var(--primary-dark);

    }

    .dir-card__row { font-size: 13.5px; color: var(--gray-700); margin-top: 6px; display: flex; gap: 8px; }

    .dir-card__row b { color: var(--gray-500); font-weight: 600; min-width: 64px; }

    .dir-none { font-size: 14px; color: var(--gray-500); line-height: 1.6; background: var(--gray-100); border-radius: 12px; padding: 18px; }

    .dir-none a { color: var(--primary); font-weight: 600; cursor: pointer; }



    /* ─── Responsive ─── */

    @media (max-width: 900px) {

      .container { padding-inline: 20px; }

      .scene { width: 300px; height: 400px; }

      .face { width: 200px; height: 320px; margin-left: -100px; margin-top: -160px; padding: 0; }

      .face--front { transform: rotateY(0deg)   translateZ(105px); }

      .face--right { transform: rotateY(90deg)  translateZ(105px); }

      .face--back  { transform: rotateY(180deg) translateZ(105px); }

      .info-panel { display: none; }

      .video-grid { grid-template-columns: 1fr; }

      .video-card--wide { grid-column: span 1; }

      .progress-bar { right: 16px; }

      .stage-indicator { display: none; }

    }



    /* ══════════════════════════════════════

       ABOUT US SECTION (company profile · SEO/GEO/Schema)

       Scoped under .about so it never collides with

       .video-section's .section-label/.section-title i18n hooks.

    ══════════════════════════════════════ */

    .about {

      position: relative;

      z-index: 200;

      background: var(--white);

      padding: 110px 0 90px;

      color: var(--dark);

    }

    .about .about-label { display:inline-block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--primary); margin-bottom:14px; }

    .about .about-title { font-size:clamp(28px,3.4vw,44px); line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--dark); margin-bottom:16px; }

    .about .about-subtitle { font-size:18px; color:var(--gray-500); max-width:780px; line-height:1.7; margin-bottom:16px; }

    .about p { font-size:16px; line-height:1.8; color:var(--gray-700); max-width:840px; margin-bottom:16px; }

    .about h3 { font-size:19px; font-weight:750; color:var(--dark); margin:0 0 8px; letter-spacing:-.01em; line-height:1.35; }

    .about .about-block { margin-top:76px; }

    .about .about-story { background:var(--gray-100); border-inline-start:4px solid var(--accent); border-radius:0 14px 14px 0; padding:28px 30px; margin-top:26px; }

    .about .about-story h3 { color:var(--primary-dark); }

    .about .about-story p:last-child { margin-bottom:0; }



    .about .about-grid { display:grid; gap:22px; margin-top:34px; }

    .about .about-grid--3 { grid-template-columns:repeat(3,1fr); }

    .about .about-grid--2 { grid-template-columns:repeat(2,1fr); }

    .about .about-card { background:#fffdf8; border:1px solid var(--gray-200); border-radius:16px; padding:26px 24px; transition:.22s; }

    .about .about-card:hover { border-color:var(--primary-light); box-shadow:0 10px 30px rgba(201,127,30,.10); transform:translateY(-2px); }

    .about .about-card .tag { display:inline-block; font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-dark); background:var(--gray-100); padding:5px 11px; border-radius:999px; margin-bottom:14px; }

    .about .about-card p { font-size:15px; color:var(--gray-500); margin:0; }

    .about .about-card .ico { font-size:24px; margin-bottom:12px; display:block; }



    .about .about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }

    .about .about-stat { background:var(--gray-100); border:1px solid var(--gray-200); border-radius:16px; padding:28px 20px; text-align:center; }

    .about .about-stat .num { font-size:clamp(28px,3.4vw,40px); font-weight:800; color:var(--primary); line-height:1.05; letter-spacing:-.02em; }

    .about .about-stat .lbl { font-size:13.5px; color:var(--gray-500); margin-top:8px; }



    .about .about-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

    .about .about-pill { background:var(--white); border:1px solid var(--gray-200); border-radius:999px; padding:8px 16px; font-size:14px; color:var(--gray-700); }



    .about .about-tablewrap { overflow-x:auto; margin-top:16px; }

    .about .about-table { width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--gray-200); border-radius:14px; overflow:hidden; }

    .about .about-table th,.about .about-table td { padding:14px 16px; text-align:left; font-size:15px; border-bottom:1px solid var(--gray-200); white-space:nowrap; }

    .about .about-table th { background:var(--gray-100); font-weight:700; color:var(--dark); }

    .about .about-table tr:last-child td { border-bottom:none; }

    .about .about-table td:first-child { font-weight:650; color:var(--dark); }

    .about .about-table td:last-child { color:var(--gray-500); white-space:normal; }



    .about .about-faq { margin-top:20px; max-width:900px; }

    .about .about-faq details { background:var(--white); border:1px solid var(--gray-200); border-radius:12px; margin-bottom:12px; overflow:hidden; }

    .about .about-faq summary { cursor:pointer; padding:16px 20px; font-weight:700; font-size:16px; color:var(--dark); list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }

    .about .about-faq summary::-webkit-details-marker { display:none; }

    .about .about-faq summary::after { content:"+"; font-size:22px; color:var(--primary); font-weight:400; line-height:1; flex-shrink:0; }

    .about .about-faq details[open] summary::after { content:"–"; }

    .about .about-faq .faq-a { padding:0 20px 18px; color:var(--gray-500); font-size:15.5px; line-height:1.75; margin:0; max-width:none; }



    .about .about-cta { background:linear-gradient(135deg,var(--dark-2),var(--primary-dark)); color:#fff; border-radius:18px; padding:44px 40px; text-align:center; margin-top:40px; }

    .about .about-cta h3 { color:#fff; font-size:clamp(22px,2.6vw,30px); margin-bottom:12px; }

    .about .about-cta p { color:rgba(255,255,255,.9); max-width:660px; margin:0 auto 26px; }

    .about .about-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

    .about-btn { display:inline-block; padding:13px 28px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; border:none; font-family:inherit; transition:.2s; }

    .about-btn--primary { background:var(--white); color:var(--primary-dark); }

    .about-btn--primary:hover { background:var(--gray-100); }

    .about-btn--ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }

    .about-btn--ghost:hover { background:rgba(255,255,255,.12); }



    @media(max-width:900px){ .about .about-grid--3,.about .about-grid--2{grid-template-columns:1fr;} }

    @media(max-width:860px){ .about .about-stats{grid-template-columns:repeat(2,1fr);} }

    @media(max-width:560px){ .about{padding:76px 0 60px;} .about .about-cta{padding:34px 22px;} .about .about-block{margin-top:54px;} .about .about-story{padding:22px 20px;} }



    /* ══════════════════════════════════════════════════════════════

       COMPLETE TECHNICAL SPECIFICATIONS (replaces the old

       "Technical & Operations Resources" video module)

       Scoped under .specs — deliberately avoids .section-label /

       .section-title / .section-subtitle so applyTranslations()

       never overwrites it (those indices belong to the video sections).

    ══════════════════════════════════════════════════════════════ */

    .specs {

      position: relative;

      z-index: 200;

      background: var(--gray-100);

      padding: 110px 0 90px;

      color: var(--dark);

    }

    .specs .specs-label { display:inline-block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--primary); margin-bottom:14px; }

    .specs .specs-title { font-size:clamp(28px,3.4vw,44px); line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--dark); margin-bottom:16px; }

    .specs .specs-subtitle { font-size:18px; color:var(--gray-500); max-width:820px; line-height:1.7; margin-bottom:14px; }

    .specs .specs-note { font-size:14px; color:var(--gray-400); max-width:820px; line-height:1.6; margin-bottom:8px; font-style:italic; }



    .specs .specs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }

    .specs .spec-card { background:var(--white); border:1px solid var(--gray-200); border-radius:16px; padding:24px 22px 12px; transition:.22s; }

    .specs .spec-card:hover { border-color:var(--primary-light); box-shadow:0 10px 30px rgba(201,127,30,.10); }

    .specs .spec-card h3 { font-size:17px; font-weight:750; color:var(--primary-dark); margin:0 0 14px; letter-spacing:-.01em; padding-bottom:12px; border-bottom:2px solid var(--gray-200); }

    .specs .spec-table { width:100%; border-collapse:collapse; }

    .specs .spec-table th, .specs .spec-table td { padding:10px 0; font-size:14.5px; line-height:1.55; text-align:left; vertical-align:top; border-bottom:1px solid var(--gray-200); }

    .specs .spec-table tr:last-child th, .specs .spec-table tr:last-child td { border-bottom:none; }

    .specs .spec-table th { width:44%; font-weight:600; color:var(--gray-700); padding-right:14px; }

    .specs .spec-table td { font-weight:650; color:var(--dark); }



    .specs .specs-cta { margin-top:44px; background:linear-gradient(135deg,var(--dark-2),var(--primary-dark)); color:#fff; border-radius:18px; padding:30px 40px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }

    .specs-btn { display:inline-block; padding:14px 30px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; border:none; font-family:inherit; background:var(--white); color:var(--primary-dark); transition:.2s; flex-shrink:0; }

    .specs-btn:hover { background:var(--gray-100); }



    @media(max-width:1000px){ .specs .specs-grid{grid-template-columns:repeat(2,1fr);} }

    @media(max-width:640px){ .specs .specs-grid{grid-template-columns:1fr;} .specs{padding:76px 0 60px;} .specs .specs-cta{padding:28px 22px;} .specs .spec-table th{width:46%;} }

  



    /* ── Price Comparison Calculator ── */

    .price-calc { position: relative; z-index: 200; background: var(--gray-50, #f7f4ee); padding: 92px 24px; }

    .pc-inner { max-width: 1080px; margin: 0 auto; }

    .pc-head { text-align: center; max-width: 740px; margin: 0 auto 34px; }

    .pc-label { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary, #c97f1e); margin-bottom: 12px; }

    .pc-title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--dark, #1c150c); line-height: 1.15; margin-bottom: 14px; }

    .pc-sub { font-size: 16px; color: var(--gray-500, #6b6256); line-height: 1.65; }

    .pc-controls { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

    .pc-region-label { font-size: 14px; font-weight: 600; color: var(--dark, #1c150c); }

    .pc-select { background: #fff; border: 1px solid var(--gray-300, #e3dccd); border-radius: 12px; padding: 11px 38px 11px 16px; font-size: 15px; font-weight: 600; color: var(--dark, #1c150c); cursor: pointer; font-family: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

    .pc-select:focus { outline: 2px solid var(--primary, #c97f1e); outline-offset: 2px; }

    .pc-detected { font-size: 13px; color: var(--primary, #c97f1e); font-weight: 600; }

    .pc-detected { font-size: 13px; color: var(--primary, #c97f1e); font-weight: 600; }

    /* IP location consent — GDPR / PIPL friendly: nothing is sent until the visitor opts in. */

    .pc-consent { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; background: var(--gray-100, #f1ede3); border: 1px solid var(--gray-200, #ece6d8); border-radius: 12px; padding: 12px 18px; margin-bottom: 18px; }

    .pc-consent-text { font-size: 13px; color: var(--gray-500, #6b6256); line-height: 1.5; flex: 1 1 320px; min-width: 0; }

    .pc-consent-btn { background: var(--dark, #1c150c); color: #fff; border: none; border-radius: 999px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s; }

    .pc-consent-btn:hover { background: var(--primary-dark, #a9630f); }

    .pc-consent-dismiss { background: none; border: none; color: var(--gray-500, #6b6256); font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 4px; }

    .pc-consent-dismiss:hover { color: var(--dark, #1c150c); }

    .pc-consent[hidden] { display: none; }

    .pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 26px; }

    .pc-card { background: #fff; border: 1px solid var(--gray-200, #ece6d8); border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(60,45,22,.06); }

    .pc-card-name { display: block; font-size: 17px; font-weight: 800; color: var(--dark, #1c150c); }

    .pc-card-spec { display: block; font-size: 13px; color: var(--gray-500, #6b6256); margin-top: 4px; }

    .pc-card-spec b { color: var(--dark, #1c150c); }

    .pc-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

    .pc-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--gray-500, #6b6256); }

    .pc-row .pc-val { font-weight: 700; color: var(--dark, #1c150c); }

    .pc-row.pc-sub { border-top: 1px dashed var(--gray-200, #ece6d8); padding-top: 8px; font-weight: 700; color: var(--dark, #1c150c); }

    .pc-unit { margin-top: 14px; font-size: 12px; color: var(--gray-400, #9a9183); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

    .pc-totals { background: var(--dark, #1c150c); color: #fff; border-radius: 18px; padding: 42px 28px 24px; display: flex; align-items: stretch; gap: 28px; margin: 0 0 22px; position: relative; }

    .pc-totals-main { flex: 0 0 340px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }

    .pc-tot-row { display: flex; justify-content: space-between; font-size: 15px; }

    .pc-tot-row b { font-weight: 700; }

    .pc-tot-row.pc-grand { border-top: 1px solid rgba(255,255,255,.18); padding-top: 12px; margin-top: 4px; font-size: 19px; }

    .pc-tot-row.pc-grand b { color: var(--primary, #e8a23d); }

    .pc-cur { position: absolute; top: 17px; right: 24px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--primary, #e8a23d); opacity: .9; }

    .pc-compat { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; position: relative; text-align: left; border-radius: 12px; padding: 13px 16px 13px 42px; background: rgba(232,162,61,.12); border: 1px solid rgba(232,162,61,.38); }

    .pc-compat::before { content: "\2714"; position: absolute; left: 15px; top: 13px; font-size: 14px; font-weight: 700; color: var(--primary, #e8a23d); }

    .pc-compat-title { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--primary, #e8a23d); margin-bottom: 5px; }

    .pc-compat-text { display: block; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.84); }

    [dir="rtl"] .pc-compat { padding: 13px 42px 13px 16px; text-align: right; }

    [dir="rtl"] .pc-compat::before { left: auto; right: 15px; }

    .pc-note { text-align: center; font-size: 13px; color: var(--gray-500, #6b6256); max-width: 720px; margin: 0 auto 6px; line-height: 1.6; }

    .pc-scale { text-align: center; font-size: 13px; color: var(--gray-600, #8a8170); max-width: 720px; margin: 0 auto 22px; }

    .pc-cta { display: block; margin: 0 auto; background: var(--primary, #c97f1e); color: #fff; border: none; border-radius: 12px; padding: 14px 32px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: transform .15s, background .15s; }

    .pc-cta:hover { transform: translateY(-2px); background: var(--primary-dark, #a9630f); }

    [dir="rtl"] .pc-row, [dir="rtl"] .pc-tot-row { flex-direction: row-reverse; }

    [dir="rtl"] .pc-cur { right: auto; left: 24px; }

    @media (max-width: 860px){ .pc-grid { grid-template-columns: 1fr; } .pc-title { font-size: 27px; } .price-calc { padding: 64px 18px; } }

    @media (max-width: 860px){ .price-calc .pc-totals, [dir="rtl"] .price-calc .pc-totals { flex-direction: column; gap: 16px; } .pc-totals-main { flex: 1 1 auto; } }

</style>