/* ==========================================================================
   RENOVA HEAT PUMP — design system v3
   Palette sampled from the brand logo:
     brand blue   #3a85bc   (wordmark + tagline)
     sky          #51b2e6   (mark highlight)
     amber        #eea740   (mark + "Heat Pump")
   Blue carries structure and trust, amber marks the heating side and the
   single most important action on any screen. Everything else is neutral.
   Spacing follows an 8px scale. Content column is capped for readability.
   ========================================================================== */

:root{
  /* brand */
  --blue:#3a85bc;
  --blue-700:#2b678f;
  --blue-900:#123a57;
  --sky:#51b2e6;
  --blue-50:#eef5fa;
  --amber:#eea740;
  --amber-700:#c67f24;
  --amber-50:#fdf5e8;

  /* neutrals */
  --ink:#12293c;
  --text:#2a3f52;
  --muted:#5f7386;
  --dim:#5f7386;
  --line:#e4eaf0;
  --line-2:#cfd9e3;
  --bg:#ffffff;
  --bg-soft:#f6f9fb;
  --bg-tint:#eef3f7;

  /* type */
  --f-display:"Barlow Semi Condensed","IBM Plex Sans Condensed","Noto Sans SC",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* scale (8px) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --s7:72px; --s8:96px; --s9:128px;
  --wrap:1200px;
  --measure:68ch;
  --sec:clamp(56px,7vw,112px);

  --r-s:6px; --r-m:12px; --r-l:20px;
  --sh-1:0 1px 2px rgba(18,41,60,.06);
  --sh-2:0 12px 28px -18px rgba(18,41,60,.35);
  --sh-3:0 28px 60px -32px rgba(18,41,60,.45);
}

html[lang="zh"]{ --f-display:"Noto Sans SC","Barlow Semi Condensed",system-ui,sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:17px; line-height:1.7; overflow-x:hidden;
}
img,svg,picture{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.14; letter-spacing:-.01em; color:var(--ink); margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.15rem,5vw,3.55rem); letter-spacing:-.02em; }
h2{ font-size:clamp(1.7rem,3.3vw,2.6rem); letter-spacing:-.018em; }
h3{ font-size:clamp(1.1rem,1.7vw,1.3rem); }
h4{ font-size:1rem; }
p{ margin:0 0 var(--s2); max-width:var(--measure); }
strong{ color:var(--ink); font-weight:600; }

:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--sky); color:#062133; }

.wrap{ width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto; }
.skip{ position:absolute; inset-inline-start:-9999px; top:0; z-index:200; background:var(--blue-900); color:#fff; padding:.75rem 1.2rem; font-weight:600; }
.skip:focus{ inset-inline-start:12px; top:12px; }
.vh{ position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important;
     padding:0 !important; border:0 !important; overflow:hidden; clip:rect(0 0 0 0);
     clip-path:inset(50%); white-space:nowrap; inset-inline-start:0; }

/* placeholder token for unverified data (brief §37) */
.req{
  display:inline-block; font-family:var(--f-body); font-size:.72em; font-weight:600; letter-spacing:.04em;
  color:var(--amber-700); background:var(--amber-50); border:1px dashed rgba(198,127,36,.45);
  border-radius:var(--r-s); padding:.08em .5em; white-space:nowrap; vertical-align:middle;
}

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:90; background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.5); border-bottom:1px solid var(--line); }
.hdr.is-solid{ box-shadow:var(--sh-1); }
.hdr__in{ display:flex; align-items:center; gap:12px; min-height:78px; position:relative; }
.logo img{ height:34px; width:auto; }
.logo{ margin-inline-end:auto; }

.nav{ display:flex; gap:2px; }
.nav a{ position:relative; white-space:nowrap; padding:10px 10px; font-size:.9rem; color:var(--muted); transition:color .18s ease; }
.nav a::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background:var(--blue); transform:scaleX(0); transition:transform .22s ease; }
.nav a:hover,.nav a[aria-current]{ color:var(--blue-900); }
.nav a:hover::after,.nav a[aria-current]::after{ transform:scaleX(1); }

.tools{ display:flex; align-items:center; gap:var(--s1); }
.lang{ position:relative; }
.lang__btn{ display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--line-2); border-radius:999px; padding:8px 14px; font-size:.86rem; color:var(--text); cursor:pointer; transition:border-color .18s ease; }
.lang__btn:hover{ border-color:var(--blue); }
.lang__btn svg{ width:15px; height:15px; opacity:.65; }
.lang__menu{ position:absolute; inset-inline-end:0; top:calc(100% + 10px); min-width:170px; background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:6px; box-shadow:var(--sh-3); display:none; z-index:99; }
.lang__menu.open{ display:block; }
.lang__menu a{ display:block; padding:9px 12px; border-radius:var(--r-s); font-size:.92rem; color:var(--muted); }
.lang__menu a:hover,.lang__menu a[aria-current="true"]{ background:var(--blue-50); color:var(--blue-700); }
.burger{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line-2); border-radius:var(--r-s); background:none; cursor:pointer; color:var(--ink); }
.burger svg{ width:22px; height:22px; }
.progress{ position:absolute; inset-inline-start:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--blue),var(--sky)); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border-radius:999px; font-weight:600; font-size:.95rem; border:1px solid transparent; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease; }
.btn svg{ width:18px; height:18px; }
.btn--amber{ background:var(--amber); color:#3a2405; }
.btn--amber:hover{ background:var(--amber-700); color:#fff; box-shadow:var(--sh-2); }
.btn--blue{ background:var(--blue); color:#fff; }
.btn--blue:hover{ background:var(--blue-700); box-shadow:var(--sh-2); }
.btn--ghost{ border-color:var(--line-2); color:var(--blue-900); background:#fff; }
.btn--ghost:hover{ border-color:var(--blue); background:var(--blue-50); }
.btn--wa{ background:#25d366; color:#042812; }
.btn--wa:hover{ background:#1eb857; }
.btn--sm{ min-height:40px; padding:8px 18px; font-size:.88rem; }
.btn--wide{ width:100%; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(40px,5.5vw,80px) 0 clamp(40px,5vw,72px); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(760px 460px at 84% -6%,var(--blue-50),transparent 68%),linear-gradient(180deg,var(--bg-soft),#fff 70%); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-700); font-weight:600; margin-bottom:var(--s2); }
.eyebrow i{ width:22px; height:2px; background:var(--amber); flex:none; }
.hero p.lead{ font-size:clamp(1.02rem,1.25vw,1.16rem); color:var(--muted); }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:var(--s4) 0 var(--s4); }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); border-top:1px solid var(--line); padding-top:var(--s3); }
.pillars div b{ display:block; font-family:var(--f-display); font-size:1.05rem; color:var(--ink); }
.pillars div small{ color:var(--dim); font-size:.82rem; line-height:1.45; display:block; }

.hero__visual{ position:relative; }
.hero__visual img{ width:100%; height:auto; }
.callout{ position:absolute; inset-block-end:-20px; inset-inline-start:-24px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:var(--r-m); padding:14px 18px; box-shadow:var(--sh-3); max-width:238px; }
.callout b{ display:block; font-family:var(--f-display); font-size:1rem; color:var(--ink); }
.callout small{ color:var(--dim); font-size:.78rem; line-height:1.4; }

/* ---------- strip ---------- */
.strip{ border-block:1px solid var(--line); background:var(--bg-soft); }
.strip__in{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); padding:var(--s3) 0; align-items:center; justify-content:space-between; }
.strip span{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--muted); }
.strip svg{ width:18px; height:18px; color:var(--blue); flex:none; }

/* ---------- sections ---------- */
section{ padding-block:var(--sec); }
.alt{ background:var(--bg-soft); border-block:1px solid var(--line); }
.head{ max-width:60ch; margin-bottom:clamp(28px,4vw,var(--s6)); }
.head .kicker{ display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); font-weight:600; margin-bottom:10px; }
.head p{ color:var(--muted); }
.head--center{ margin-inline:auto; text-align:center; }
.head--center p{ margin-inline:auto; }

/* ---------- how it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); counter-reset:step; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:var(--s3); position:relative; }
.step::before{ counter-increment:step; content:"0" counter(step); font-family:var(--f-display); font-size:.95rem; color:var(--amber-700); background:var(--amber-50); border-radius:999px; padding:2px 10px; display:inline-block; margin-bottom:12px; }
.step h3{ font-size:1.05rem; margin-bottom:6px; }
.step p{ font-size:.92rem; color:var(--muted); margin:0; }
.flow{ margin-top:var(--s4); border:1px solid var(--line); border-radius:var(--r-l); background:#fff; padding:clamp(16px,3vw,var(--s4)); }

/* ---------- product ---------- */
.models{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.model{ background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:var(--s3); display:flex; flex-direction:column; transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease; }
.model:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px); }
.model figure{ margin:0 0 var(--s3); background:linear-gradient(165deg,var(--bg-tint),var(--bg-soft)); border-radius:var(--r-m); padding:var(--s2); }
.model h3{ margin-bottom:2px; }
.model .use{ color:var(--dim); font-size:.85rem; margin-bottom:var(--s2); }
.model dl{ display:grid; grid-template-columns:auto 1fr; gap:6px var(--s2); margin:0 0 var(--s3); font-size:.9rem; }
.model dt{ color:var(--muted); }
.model dd{ margin:0; text-align:end; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.model .btn{ margin-top:auto; }

/* ---------- selector ---------- */
.selector{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,var(--s6)); align-items:start; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(20px,3vw,var(--s4)); box-shadow:var(--sh-2); }
.q{ margin-bottom:var(--s3); }
.q > span{ display:block; font-size:.88rem; color:var(--muted); margin-bottom:10px; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opts label{ position:relative; }
.opts input{ position:absolute; opacity:0; width:1px; height:1px; }
.opts span{ display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:1px solid var(--line-2); border-radius:999px; font-size:.9rem; color:var(--text); cursor:pointer; transition:all .18s ease; }
.opts input:checked + span{ background:var(--blue-900); border-color:var(--blue-900); color:#fff; }
.opts input:focus-visible + span{ outline:3px solid var(--sky); outline-offset:2px; }
.range-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.range-row output{ font-family:var(--f-display); font-size:1.3rem; color:var(--ink); font-weight:600; }
input[type="range"]{ width:100%; appearance:none; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--blue) var(--pct,30%),var(--bg-tint) var(--pct,30%)); }
input[type="range"]::-webkit-slider-thumb{ appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:6px solid var(--blue); cursor:pointer; box-shadow:var(--sh-2); }
input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:6px solid var(--blue); cursor:pointer; }

.result{ border:1px solid var(--line); border-radius:var(--r-l); background:var(--bg-soft); padding:clamp(20px,3vw,var(--s4)); }
.result__num{ font-family:var(--f-display); font-size:clamp(2.4rem,6vw,3.4rem); line-height:1; color:var(--blue-900); font-variant-numeric:tabular-nums; }
.result__num span:last-child{ font-size:.38em; color:var(--muted); margin-inline-start:8px; letter-spacing:.02em; }
.result dl{ display:grid; grid-template-columns:1fr auto; gap:8px var(--s2); margin:var(--s3) 0; font-size:.9rem; border-top:1px solid var(--line); padding-top:var(--s2); }
.result dt{ color:var(--muted); }
.result dd{ margin:0; text-align:end; color:var(--ink); font-weight:600; }
.note{ font-size:.82rem; color:var(--dim); border-inline-start:3px solid var(--line-2); padding-inline-start:12px; margin-top:var(--s2); }

/* ---------- applications ---------- */
.apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.app{ background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:var(--s3); transition:border-color .2s ease,transform .2s ease; }
.app:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.app svg{ width:26px; height:26px; color:var(--blue); margin-bottom:14px; }
.app:nth-child(3n+2) svg{ color:var(--amber); }
.app b{ display:block; font-family:var(--f-display); font-size:1.05rem; color:var(--ink); margin-bottom:4px; }
.app small{ display:block; font-size:.88rem; color:var(--muted); line-height:1.6; }

/* ---------- technology ---------- */
.tech{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
.tech article{ background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:var(--s3); display:flex; gap:var(--s2); }
.tech svg{ width:26px; height:26px; color:var(--blue); flex:none; margin-top:4px; }
.tech article:nth-child(even) svg{ color:var(--amber); }
.tech h3{ font-size:1.05rem; margin-bottom:4px; }
.tech p{ font-size:.92rem; color:var(--muted); margin:0; }

/* ---------- specifications ---------- */
.tabs{ display:flex; gap:8px; margin-bottom:var(--s2); flex-wrap:wrap; }
.tab{ border:1px solid var(--line-2); background:#fff; border-radius:999px; min-height:44px; padding:8px 20px; font-size:.9rem; color:var(--muted); cursor:pointer; transition:all .18s ease; }
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ background:var(--blue-900); border-color:var(--blue-900); color:#fff; font-weight:600; }
.spec{ border:1px solid var(--line); border-radius:var(--r-m); background:#fff; overflow:hidden; }
.spec table{ width:100%; border-collapse:collapse; font-size:.93rem; }
.spec caption{ text-align:start; padding:14px 20px; background:var(--bg-soft); color:var(--muted); font-size:.85rem; border-bottom:1px solid var(--line); }
.spec th,.spec td{ padding:12px 20px; text-align:start; border-top:1px solid var(--line); }
.spec th{ color:var(--muted); font-weight:400; width:56%; }
.spec td{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.spec tbody tr:first-child th,.spec tbody tr:first-child td{ border-top:0; }
.spec tbody tr:nth-child(even){ background:var(--bg-soft); }
.downloads{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s3); }

/* ---------- faq ---------- */
.faq{ max-width:860px; }
details{ border:1px solid var(--line); border-radius:var(--r-m); margin-bottom:10px; background:#fff; }
details[open]{ border-color:var(--line-2); box-shadow:var(--sh-1); }
summary{ cursor:pointer; padding:16px 20px; font-weight:600; font-size:1rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--s2); min-height:56px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:""; width:12px; height:12px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg); flex:none; margin-top:-4px; transition:transform .2s ease; }
details[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
details p{ padding:0 20px 20px; margin:0; color:var(--muted); font-size:.94rem; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,var(--s6)); align-items:start; }
.cinfo{ display:grid; gap:var(--s3); }
.cinfo b{ display:block; font-family:var(--f-display); color:var(--ink); font-size:1rem; margin-bottom:2px; }
.cinfo a,.cinfo p{ color:var(--muted); font-size:.94rem; margin:0; }
.cinfo a:hover{ color:var(--blue-700); }
form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(20px,3vw,var(--s4)); box-shadow:var(--sh-2); }
.field{ margin-bottom:var(--s2); }
.field label{ display:block; font-size:.86rem; color:var(--muted); margin-bottom:6px; }
input[type="text"],input[type="email"],input[type="tel"],select,textarea{
  width:100%; min-height:48px; padding:12px 14px; border-radius:var(--r-s); background:#fff;
  border:1px solid var(--line-2); color:var(--text); font-size:.95rem;
  transition:border-color .18s ease,box-shadow .18s ease;
}
textarea{ min-height:112px; resize:vertical; }
input:focus,select:focus,textarea:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px var(--blue-50); }
input[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:#c0392b; }
.err{ display:none; font-size:.8rem; color:#c0392b; margin-top:4px; }
input[aria-invalid="true"] ~ .err,textarea[aria-invalid="true"] ~ .err{ display:block; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--dim); margin-bottom:var(--s2); }
.consent input{ width:24px; height:24px; min-height:0; margin-top:2px; flex:none; }
.form-ok{ display:none; margin-top:var(--s2); padding:14px 16px; border-radius:var(--r-s); background:var(--blue-50); border:1px solid rgba(58,133,188,.3); font-size:.92rem; color:var(--blue-700); }
.form-ok.show{ display:block; }

/* ---------- final band ---------- */
.band{ background:var(--blue-900); color:#dbe7f0; border-radius:var(--r-l); padding:clamp(28px,5vw,var(--s7)); text-align:center; }
.band h2{ color:#fff; }
.band p{ margin-inline:auto; color:rgba(219,231,240,.8); }
.band .cta-row{ justify-content:center; margin-bottom:0; }
.band .btn--ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.band .btn--ghost:hover{ background:rgba(255,255,255,.1); }

/* ---------- footer ---------- */
.ftr{ background:var(--bg-soft); border-top:1px solid var(--line); padding-block:var(--s6) var(--s3); }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s4); }
.ftr img{ height:36px; width:auto; margin-bottom:var(--s2); }
.ftr h4{ font-size:.92rem; color:var(--ink); margin-bottom:12px; }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.ftr ul a{ display:inline-block; padding:5px 0; }
.ftr a,.ftr p{ color:var(--muted); font-size:.9rem; }
.ftr p a{ display:inline-block; padding:4px 0; }
.ftr a:hover{ color:var(--blue-700); }
.ftr__base a{ display:inline-block; padding:5px 0; }
.ftr__base{ border-top:1px solid var(--line); margin-top:var(--s5); padding-top:var(--s3); display:flex; flex-wrap:wrap; gap:10px var(--s3); justify-content:space-between; font-size:.82rem; color:var(--dim); }

/* ---------- floating whatsapp + mobile bar ---------- */
.wa-float{
  position:fixed; inset-inline-end:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:80;
  display:inline-flex; align-items:center; gap:10px; background:#25d366; color:#042812;
  border-radius:999px; padding:12px 18px; font-weight:600; font-size:.9rem; box-shadow:var(--sh-3);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:translateY(-2px); }
.wa-float svg{ width:20px; height:20px; }
.mbar{ display:none; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1); }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav a{ padding:10px 7px; font-size:.86rem; }
}
@media (max-width:1080px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .models,.apps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .hero__grid,.selector,.contact,.tech{ grid-template-columns:1fr; }
  .hero__visual{ max-width:440px; margin:var(--s3) auto 0; }
  .callout{ inset-inline-start:-8px; inset-block-end:-16px; }
  .cases{ grid-template-columns:1fr; }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
  .nav{
    position:fixed; inset:80px 0 auto; flex-direction:column; gap:0; padding:8px 20px 20px;
    background:#fff; border-bottom:1px solid var(--line); transform:translateY(-140%);
    transition:transform .3s cubic-bezier(.22,.7,.3,1); max-height:calc(100dvh - 80px); overflow:auto; box-shadow:var(--sh-2);
  }
  .nav.open{ transform:none; }
  .nav a{ padding:16px 2px; font-size:1.05rem; border-bottom:1px solid var(--line); color:var(--ink); }
  .nav a::after{ display:none; }
  .burger{ display:inline-flex; }
  .hdr .btn--amber{ display:none; }
  .wa-float{ display:none; }
  .mbar{
    display:grid; grid-template-columns:auto 1fr 1.2fr; gap:8px; position:fixed; inset-inline:0; bottom:0; z-index:95;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(12px);
  }
  .mbar .btn{ width:100%; padding:12px 10px; font-size:.9rem; }
  body{ padding-bottom:72px; }
}
@media (max-width:620px){
  .pillars,.steps,.models,.apps,.two{ grid-template-columns:1fr; }
  .ftr__grid{ grid-template-columns:1fr; }
  .strip__in{ gap:12px var(--s3); }
  /* specification tables become stacked labelled rows */
  .spec table,.spec tbody,.spec tr,.spec th,.spec td{ display:block; width:auto; }
  .spec tr{ border-top:1px solid var(--line); padding:12px 16px; }
  .spec tbody tr:first-child{ border-top:0; }
  .spec th{ padding:0; font-size:.82rem; color:var(--dim); }
  .spec td{ padding:2px 0 0; font-size:1rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}
@media print{ .hdr,.mbar,.wa-float,form{ display:none; } body{ background:#fff; } }

/* ---------- process chain (how it works) ---------- */
.flowline{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 6px;
}
.flowline li{ display:flex; align-items:center; gap:6px; }
.flowline li span{
  display:inline-flex; align-items:center; min-height:40px; padding:6px 16px; border-radius:999px;
  background:var(--bg-tint); color:var(--ink); font-size:.9rem; font-weight:500; white-space:nowrap;
}
.flowline li:nth-child(3) span{ background:var(--amber-50); color:var(--amber-700); }
.flowline li:last-child span{ background:var(--blue-50); color:var(--blue-700); }
.flowline li:not(:last-child)::after{
  content:""; width:22px; height:8px; flex:none;
  background:linear-gradient(90deg,var(--line-2) 0 14px,transparent 14px);
  clip-path:polygon(0 3px,14px 3px,14px 0,22px 4px,14px 8px,14px 5px,0 5px);
  background:var(--line-2);
}
.flow .note{ margin-top:var(--s3); }

/* ---------- indoor terminals (fan coils) ---------- */
.fcu{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,var(--s6));
  align-items:center; margin-bottom:var(--s6);
}
.fcu:last-of-type{ margin-bottom:0; }
.fcu__media img{ width:100%; height:auto; border-radius:var(--r-l); box-shadow:var(--sh-2); }
.fcu__body h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-bottom:4px; }
.fcu__sub{ color:var(--blue-700); font-size:.9rem; margin-bottom:var(--s2); }
.ticks{ list-style:none; padding:0; margin:0 0 var(--s3); display:grid; gap:10px; }
.ticks li{ position:relative; padding-inline-start:26px; font-size:.94rem; color:var(--muted); }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.42em; width:7px; height:12px;
  border-right:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(42deg);
}
.fcu__models{ display:grid; gap:10px; }
.fcu__models.mini-3{ grid-template-columns:repeat(3,1fr); }
.fcu__models.mini-2{ grid-template-columns:repeat(2,1fr); }
.mini{ border:1px solid var(--line); border-radius:var(--r-m); background:#fff; padding:14px; }
.mini b{ display:block; font-family:var(--f-display); font-size:1.05rem; color:var(--ink);
  padding-bottom:8px; border-bottom:1px solid var(--line); }
.mini dl{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:10px 0 0; font-size:.8rem; }
.mini dt{ color:var(--dim); }
.mini dd{ margin:0; text-align:end; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.fcu__note{ margin-top:var(--s4); max-width:var(--measure); }

@media (max-width:900px){
  .fcu{ grid-template-columns:1fr; }
  .fcu__media{ order:-1; }
}
@media (max-width:620px){
  .fcu__models.mini-3,.fcu__models.mini-2{ grid-template-columns:1fr; }
  .mini dl{ font-size:.85rem; }
}

/* hero photograph */
.hero__visual picture img{ border-radius:var(--r-l); box-shadow:var(--sh-3); }

/* ---------- shared spec blocks for product families ---------- */
.common{ margin-top:var(--s3); border:1px solid var(--line); border-radius:var(--r-m); background:#fff; padding:var(--s3); }
.common h4{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:var(--s2); }
.common__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px var(--s4); }
.common__grid div{ display:flex; justify-content:space-between; gap:var(--s2); border-bottom:1px solid var(--line); padding-bottom:8px; font-size:.9rem; }
.common__grid dt{ color:var(--muted); }
.common__grid dd{ margin:0; color:var(--ink); font-weight:600; text-align:end; }

.modes{ margin-top:var(--s3); border-inline-start:3px solid var(--amber); padding-inline-start:var(--s2); }
.modes h4{ font-size:.95rem; margin-bottom:8px; }
.modes ol{ margin:0; padding-inline-start:1.2rem; color:var(--muted); font-size:.92rem; display:grid; gap:4px; }


/* ---------- certification marks ---------- */
.certband{ border-block:1px solid var(--line); background:#fff; }
.certrow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(24px,5vw,var(--s7)); padding:var(--s4) 0; }
.cmark{ color:var(--muted); opacity:.72; transition:opacity .2s ease,color .2s ease; }
.cmark:hover{ opacity:1; color:var(--blue-900); }
.cmark svg{ height:46px; width:auto; }
.cmark span{ font-family:var(--f-display); font-size:1.28rem; font-weight:600; letter-spacing:.06em; white-space:nowrap; }

/* ---------- contact channels ---------- */
.chan__h{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin:var(--s3) 0 var(--s2); }
.chans{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chan{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-m);
  background:#fff; padding:14px 16px; transition:border-color .2s ease,transform .2s ease; }
a.chan:hover{ border-color:var(--blue); transform:translateY(-2px); }
.chan svg{ width:20px; height:20px; color:var(--blue); flex:none; margin-top:2px; }
.chan__t{ display:block; min-width:0; }
.chan__t b{ display:block; font-family:var(--f-display); font-size:1rem; color:var(--ink); }
.chan__t span{ display:block; font-size:.86rem; color:var(--muted); overflow-wrap:anywhere; }
.chan__note{ margin-top:var(--s2); }

@media (max-width:900px){
  .common__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .common__grid,.chans{ grid-template-columns:1fr; }
  .fcu__media--pair{ grid-template-columns:1fr 1fr; }
  .cmark svg{ height:26px; }
  .cmark span{ font-size:1.1rem; }
}

/* ---------- company origins ---------- */
.origins{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.origin{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--s3); transition:border-color .2s ease,transform .2s ease; }
.origin:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.origin__flag{ display:inline-block; font-family:var(--f-display); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; color:var(--blue-700); background:var(--blue-50); border-radius:999px;
  padding:3px 12px; margin-bottom:14px; }
.origin:nth-child(2) .origin__flag{ color:var(--amber-700); background:var(--amber-50); }
.origin h3{ font-size:1.08rem; margin-bottom:6px; }
.origin p{ font-size:.92rem; color:var(--muted); margin:0; }
@media (max-width:900px){ .origins{ grid-template-columns:1fr; } }

/* ---------- WeChat QR ---------- */
.wechat{ display:flex; align-items:center; gap:var(--s3); margin-top:10px; border:1px solid var(--line);
  border-radius:var(--r-m); background:#fff; padding:14px 16px; }
.wechat img{ width:132px; height:132px; border-radius:var(--r-s); flex:none; }
.wechat b{ display:block; font-family:var(--f-display); font-size:1.05rem; color:var(--ink); }
.wechat span{ display:block; font-size:.88rem; color:var(--muted); }
@media (max-width:620px){ .wechat img{ width:112px; height:112px; } }
.wechat__id{ margin-top:8px; font-size:.84rem; color:var(--muted); }
.wechat__id code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; color:var(--ink);
  background:var(--bg-tint); border-radius:var(--r-s); padding:2px 7px; user-select:all; overflow-wrap:anywhere; }