/* =========================================================================
   Acklin Gebäudetechnik — heizung-renovieren.ch
   Design-System: hell / high-end, Akzent Petrol #006871
   Fonts: Lato (Marken-Font Acklin)
   ========================================================================= */

:root{
  /* Surfaces */
  --bg:        #FBFAF8;
  --bg-soft:   #F2F5F4;
  --bg-tint:   #E9F2F1;
  --surface:   #FFFFFF;

  /* Ink */
  --ink:       #15262A;
  --ink-soft:  #45565B;
  --muted:     #6E7C80;

  /* Lines */
  --line:      #E5EAE9;
  --line-2:    #D7DEDD;

  /* Brand */
  --accent:    #006871;
  --accent-700:#004E55;
  --accent-600:#005A62;
  --accent-300:#4E9AA0;
  --accent-tint:#E2F0EF;
  --accent-wash:#F0F7F6;

  /* Support */
  --gold:      #E0A23A;   /* nur Sterne */
  --ok:        #2E8B6B;

  /* Effects */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(21,38,42,.05), 0 2px 6px rgba(21,38,42,.05);
  --shadow:    0 8px 24px -8px rgba(21,38,42,.12), 0 2px 8px rgba(21,38,42,.05);
  --shadow-lg: 0 30px 60px -22px rgba(0,78,85,.30), 0 10px 24px -12px rgba(21,38,42,.12);
  --shadow-accent: 0 14px 30px -10px rgba(0,104,113,.45);

  --container: 1200px;
  --container-wide: 1320px;
  --pad-section: clamp(64px, 9vw, 120px);

  --ff-display: "Lato", Helvetica, Arial, sans-serif;
  --ff-text: "Lato", Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--ff-text);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--accent-300); outline-offset:2px; border-radius:6px; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:700; line-height:1.12; letter-spacing:-.015em; color:var(--ink); }
h1{ font-size:clamp(2.4rem, 1.4rem + 3.6vw, 4.05rem); font-optical-sizing:auto; }
h2{ font-size:clamp(1.95rem, 1.3rem + 2.2vw, 3rem); }
h3{ font-size:clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
.lead{ font-size:clamp(1.06rem, 1rem + .35vw, 1.27rem); color:var(--ink-soft); line-height:1.6; }
p{ color:var(--ink-soft); }
strong{ color:var(--ink); font-weight:700; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--ff-text); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; opacity:.7; }
.eyebrow.center::after{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; opacity:.7; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,32px); }
.container-wide{ max-width:var(--container-wide); }
.section{ padding-block:var(--pad-section); }
.section--soft{ background:var(--bg-soft); }
.section--tint{ background:linear-gradient(180deg,var(--accent-wash),#fff); }
.section-head{ max-width:720px; margin-bottom:clamp(36px,5vw,60px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:18px; }
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--ff-text); font-weight:700; font-size:1rem; line-height:1;
  padding:1rem 1.6rem; border:0; border-radius:var(--r-pill);
  background:var(--bg); color:#fff; cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
  box-shadow:var(--shadow-accent); white-space:nowrap;
}
.btn:hover{ background:var(--accent-700); transform:translateY(-2px); box-shadow:0 18px 34px -10px rgba(0,104,113,.5); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.05em; height:1.05em; }
.btn--lg{ padding:1.15rem 2rem; font-size:1.06rem; }
.btn--block{ width:100%; }
.btn--ghost{ background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover{ background:var(--accent-wash); color:var(--accent-700); box-shadow:inset 0 0 0 1.5px var(--accent-300); transform:translateY(-2px); }
.btn--white{ background:#fff; color:var(--accent); box-shadow:var(--shadow); }
.btn--white:hover{ background:#fff; color:var(--accent-700); }
.btn--light{ background:var(--accent-wash); color:var(--accent-700); box-shadow:none; }
.btn--light:hover{ background:var(--accent-tint); }

.link-arrow{ display:inline-flex; align-items:center; gap:.45em; font-weight:700; color:var(--accent); }
.link-arrow svg{ width:1.05em; height:1.05em; transition:transform .2s ease; }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding-block:16px;
}
.site-header.scrolled{ background:rgba(251,250,248,.86); backdrop-filter:saturate(150%) blur(14px); box-shadow:0 1px 0 var(--line), var(--shadow-sm); padding-block:10px; }
.header-inner{ display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:48px; width:auto; transition:height .3s ease; }
.scrolled .brand img{ height:42px; }
.nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav a{ font-weight:400; font-size:.97rem; color:var(--ink-soft); transition:color .18s ease; position:relative; }
.nav a:hover{ color:var(--ink); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width .22s ease; }
.nav a:hover::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-phone{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); }
.header-phone svg{ width:18px; height:18px; color:var(--accent); }
.header-phone span small{ display:block; font-weight:400; font-size:.72rem; color:var(--muted); letter-spacing:.02em; }
.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line-2); background:#fff; border-radius:12px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle svg{ width:22px; height:22px; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:148px; padding-bottom:clamp(56px,7vw,96px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(251,250,248,.82) 0%, rgba(251,250,248,.55) 40%, rgba(251,250,248,.9) 100%),
    linear-gradient(105deg, rgba(251,250,248,.96) 30%, rgba(251,250,248,.4) 65%, rgba(251,250,248,.15) 100%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; }
.hero-copy{ max-width:600px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px; margin-bottom:24px;
  background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.86rem; font-weight:700; color:var(--ink); box-shadow:var(--shadow-sm); backdrop-filter:blur(6px);
}
.hero-badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(46,139,107,.18); }
.hero h1{ margin-bottom:22px; }
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero .lead{ margin-bottom:28px; }
.hero-usps{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-bottom:30px; }
.hero-usps li{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink); font-size:.98rem; }
.hero-usps svg{ width:21px; height:21px; color:var(--accent); flex-shrink:0; }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-rating{ display:flex; align-items:center; gap:12px; }
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:18px; height:18px; }
.hero-rating small{ color:var(--ink-soft); font-size:.9rem; }
.hero-rating small b{ color:var(--ink); }

/* ---------- Multistep form card ---------- */
.form-card{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.6); overflow:hidden; position:relative;
}
.form-card__head{ padding:24px 28px 0; }
.form-card__head h2{ font-size:1.4rem; letter-spacing:-.01em; }
.form-card__head p{ font-size:.92rem; margin-top:4px; }
.form-progress{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.form-progress .bar{ flex:1; height:6px; border-radius:99px; background:var(--bg-soft); overflow:hidden; }
.form-progress .bar i{ display:block; height:100%; width:25%; background:linear-gradient(90deg,var(--accent),var(--accent-300)); border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1); }
.form-progress .count{ font-size:.8rem; font-weight:700; color:var(--muted); white-space:nowrap; }

.msform{ padding:20px 28px 28px; }
.fstep{ display:none; animation:fadeStep .35s ease; }
.fstep.active{ display:block; }
@keyframes fadeStep{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:translateX(0);} }
.fstep__title{ font-family:var(--ff-text); font-weight:700; font-size:1.02rem; color:var(--ink); margin-bottom:4px; }
.fstep__hint{ font-size:.86rem; color:var(--muted); margin-bottom:16px; }

/* option tiles */
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt label{
  display:flex; align-items:center; gap:12px; height:100%; padding:14px 16px; cursor:pointer;
  border:1.5px solid var(--line-2); border-radius:var(--r-sm); background:#fff;
  font-weight:700; font-size:.95rem; transition:.18s ease; line-height:1.25;
}
.opt label .ic{ width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:var(--accent-wash); color:var(--accent); }
.opt label .ic svg{ width:21px; height:21px; }
.opt input:hover + label{ border-color:var(--accent-300); }
.opt input:checked + label{ border-color:var(--accent); background:var(--accent-wash); box-shadow:0 0 0 3px rgba(0,104,113,.12); }
.opt input:checked + label .ic{ background:var(--accent); color:#fff; }
.opt input:focus-visible + label{ outline:3px solid var(--accent-300); outline-offset:2px; }
.opt--wide{ grid-column:1 / -1; }

/* fields */
.field{ margin-bottom:14px; }
.field label.lbl{ display:block; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.field .req{ color:var(--accent); }
.input, .select, textarea.input{
  width:100%; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  background:#fff; font-size:1rem; transition:.16s ease;
}
.input::placeholder{ color:#9aa6a8; }
.input:focus, .select:focus, textarea.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,104,113,.13); }
.input.ok{ border-color:var(--ok); }
.input.err{ border-color:#d4584f; box-shadow:0 0 0 3px rgba(212,88,79,.12); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row-plz{ display:grid; grid-template-columns:120px 1fr; gap:12px; }
.field .hint{ font-size:.78rem; color:var(--muted); margin-top:5px; }
.field .hint.live{ color:var(--accent); font-weight:700; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2345565B' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:42px; }

.consent{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 4px; }
.consent input{ width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex-shrink:0; }
.consent label{ font-size:.82rem; color:var(--muted); line-height:1.5; }
.consent a{ color:var(--accent); text-decoration:underline; }

.form-nav{ display:flex; gap:12px; margin-top:20px; }
.form-nav .btn{ flex:1; }
.btn-back{ flex:0 0 auto !important; width:52px; padding:0; background:var(--bg-soft); color:var(--ink); box-shadow:none; }
.btn-back:hover{ background:var(--line); transform:translateY(-2px); }
.form-foot{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; font-size:.8rem; color:var(--muted); }
.form-foot svg{ width:15px; height:15px; color:var(--ok); }

/* honeypot */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* success */
.form-success{ display:none; padding:40px 30px; text-align:center; }
.form-success.show{ display:block; animation:fadeStep .4s ease; }
.form-success .check{ width:74px; height:74px; margin:0 auto 18px; border-radius:50%; background:var(--accent-wash); display:grid; place-items:center; color:var(--accent); }
.form-success .check svg{ width:38px; height:38px; }
.form-success h3{ margin-bottom:10px; }
.form-success p{ margin-bottom:6px; }

/* ---------- Trust / stats bar ---------- */
.trustbar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.trustbar .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-block:34px; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--ff-display); font-size:clamp(1.9rem,1.4rem+1.4vw,2.7rem); font-weight:900; color:var(--accent); line-height:1; }
.stat .lbl{ font-size:.9rem; color:var(--ink-soft); margin-top:8px; font-weight:400; }

/* ---------- Solutions ---------- */
.sol-grid{ grid-template-columns:repeat(3,1fr); }
.sol-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column;
}
.sol-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.sol-card__img{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.sol-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.sol-card:hover .sol-card__img img{ transform:scale(1.05); }
.sol-card__tag{ position:absolute; top:14px; left:14px; padding:6px 13px; border-radius:99px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); font-size:.78rem; font-weight:700; color:var(--accent); box-shadow:var(--shadow-sm); }
.sol-card__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.sol-card__body h3{ margin-bottom:10px; }
.sol-card__body p{ font-size:.96rem; margin-bottom:16px; }
.sol-list{ display:grid; gap:9px; margin-bottom:22px; }
.sol-list li{ display:flex; gap:9px; align-items:flex-start; font-size:.92rem; color:var(--ink); }
.sol-list svg{ width:19px; height:19px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.sol-card .link-arrow{ margin-top:auto; }

/* ---------- Why / Förderung ---------- */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px,5vw,72px); }
.why-media{ position:relative; }
.why-media img{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
.why-badge{
  position:absolute; left:-22px; bottom:32px; background:#fff; border-radius:var(--r); padding:18px 22px;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:14px; max-width:260px;
}
.why-badge .ic{ width:48px; height:48px; flex-shrink:0; border-radius:12px; background:var(--accent); color:#fff; display:grid; place-items:center; }
.why-badge .ic svg{ width:26px; height:26px; }
.why-badge .t{ font-family:var(--ff-display); font-size:1.5rem; color:var(--ink); line-height:1; }
.why-badge .s{ font-size:.82rem; color:var(--muted); }
.benefit-list{ display:grid; gap:18px; margin-top:30px; }
.benefit{ display:flex; gap:16px; }
.benefit .ic{ width:50px; height:50px; flex-shrink:0; border-radius:14px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; }
.benefit .ic svg{ width:25px; height:25px; }
.benefit h3{ font-family:var(--ff-text); font-size:1.08rem; font-weight:700; margin-bottom:3px; }
.benefit p{ font-size:.95rem; }
.foerder-note{ display:flex; align-items:center; gap:11px; margin-top:26px; padding:16px 20px; background:var(--accent-wash); border-left:3px solid var(--accent); border-radius:var(--r-sm); font-size:.92rem; color:var(--ink); }
.foerder-note svg{ width:22px; height:22px; flex:none; color:var(--accent); }

/* ---------- Process ---------- */
.steps{ grid-template-columns:repeat(4,1fr); counter-reset:step; position:relative; }
.step{ position:relative; }
.step__num{
  width:56px; height:56px; border-radius:50%; background:#fff; border:1.5px solid var(--accent-tint);
  color:var(--accent); font-family:var(--ff-display); font-size:1.4rem; display:grid; place-items:center;
  margin-bottom:18px; box-shadow:var(--shadow-sm); position:relative; z-index:2;
}
.step h3{ font-family:var(--ff-text); font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.step p{ font-size:.94rem; }
.steps .step:not(:last-child)::after{
  content:""; position:absolute; top:28px; left:56px; right:-12px; height:2px;
  background:repeating-linear-gradient(90deg,var(--accent-tint) 0 8px, transparent 8px 16px); z-index:1;
}

/* ---------- Gallery ---------- */
.gallery{ columns:4; column-gap:16px; }
.gallery figure{ break-inside:avoid; margin-bottom:16px; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); position:relative; cursor:pointer; }
.gallery img{ width:100%; transition:transform .5s ease; }
.gallery figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,78,85,.45)); opacity:0; transition:opacity .3s ease; }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figure:hover::after{ opacity:1; }
.gallery figcaption{ position:absolute; left:14px; bottom:12px; color:#fff; font-size:.85rem; font-weight:700; z-index:2; opacity:0; transform:translateY(6px); transition:.3s ease; }
.gallery figure:hover figcaption{ opacity:1; transform:translateY(0); }

/* ---------- Before / After ---------- */
.ba-grid{ display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(36px,5vw,64px); }
.ba-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid #fff; }
.ba-media img{ width:100%; }
.ba-points{ display:grid; gap:16px; margin-top:24px; }
.ba-points li{ display:flex; gap:12px; align-items:flex-start; }
.ba-points .ic{ width:30px; height:30px; flex-shrink:0; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; }
.ba-points .ic svg{ width:17px; height:17px; }
.ba-points b{ display:block; }
.ba-points span{ font-size:.93rem; color:var(--ink-soft); }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.about-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.about-media img{ width:100%; aspect-ratio:5/6; object-fit:cover; }
.about-sig{ display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.about-sig .ava{ width:54px; height:54px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--ff-display); font-size:1.3rem; }
.about-sig b{ display:block; }
.about-sig span{ font-size:.88rem; color:var(--muted); }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.about-tags span{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:99px; background:#fff; border:1px solid var(--line); font-size:.88rem; font-weight:700; box-shadow:var(--shadow-sm); }
.about-tags span svg{ width:16px; height:16px; flex:none; color:var(--accent); }

/* ---------- Testimonials ---------- */
.tst-grid{ grid-template-columns:repeat(3,1fr); }
.tst{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.tst .stars{ margin-bottom:14px; }
.tst p{ color:var(--ink); font-size:1rem; line-height:1.6; margin-bottom:20px; flex:1; }
.tst__who{ display:flex; align-items:center; gap:12px; }
.tst__who .ava{ width:44px; height:44px; border-radius:50%; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; font-weight:700; }
.tst__who b{ display:block; font-size:.95rem; }
.tst__who span{ font-size:.82rem; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 50px 22px 0; position:relative; font-family:var(--ff-text); font-weight:700; font-size:1.08rem; color:var(--ink); }
.faq-q::after{ content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; transform:translateY(-50%) rotate(0); transition:transform .25s ease;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23006871' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; }
.faq-item.open .faq-q::after{ transform:translateY(-50%) rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 40px 22px 0; font-size:.97rem; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-lg); }
.cta-band__bg{ position:absolute; inset:0; z-index:-2; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(0,60,66,.93), rgba(0,78,85,.78) 55%, rgba(0,104,113,.55)); }
.cta-band__inner{ padding:clamp(44px,6vw,76px); color:#fff; max-width:640px; }
.cta-band h2{ color:#fff; margin-bottom:16px; }
.cta-band p{ color:rgba(255,255,255,.88); font-size:1.1rem; margin-bottom:28px; }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.cta-phone{ display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:700; }
.cta-phone svg{ width:20px; height:20px; }

/* ---------- Footer ---------- */
.site-footer{ background:#102124; color:#cdd8d8; padding-block:64px 30px; }
.site-footer a{ color:#cdd8d8; transition:color .18s ease; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand img{ height:46px; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.95; }
.footer-brand p{ color:#9fb0b0; font-size:.94rem; max-width:280px; }
.footer-col h4{ font-family:var(--ff-text); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:#7e9293; margin-bottom:16px; font-weight:700; }
.footer-col ul{ display:grid; gap:11px; }
.footer-col li{ font-size:.95rem; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; }
.footer-contact svg{ width:18px; height:18px; color:var(--accent-300); flex-shrink:0; margin-top:3px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:24px; font-size:.85rem; color:#7e9293; }
.footer-bottom a{ color:#9fb0b0; }
.footer-credit a{ color:var(--accent-300); font-weight:700; }

/* ---------- Cookie banner ---------- */
.cookie{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(140%); z-index:80; width:min(660px,calc(100% - 32px));
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:20px 22px;
  display:flex; gap:18px; align-items:center; transition:transform .4s cubic-bezier(.4,0,.2,1); }
.cookie.show{ transform:translateX(-50%) translateY(0); }
.cookie p{ font-size:.88rem; flex:1; }
.cookie p a{ color:var(--accent); text-decoration:underline; }
.cookie-btns{ display:flex; gap:10px; flex-shrink:0; }
.cookie .btn{ padding:.7rem 1.1rem; font-size:.9rem; box-shadow:none; }

/* ---------- Floating mobile CTA ---------- */
.mobile-cta{ display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:55; gap:10px; }
.mobile-cta .btn{ flex:1; box-shadow:var(--shadow-lg); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } *{ scroll-behavior:auto; } }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:100; background:rgba(8,20,22,.92); display:none; align-items:center; justify-content:center; padding:28px; }
.lb.show{ display:flex; }
.lb img{ max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:var(--shadow-lg); }
.lb__close{ position:absolute; top:22px; right:26px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer; display:grid; place-items:center; }
.lb__close svg{ width:24px; height:24px; }

/* ---------- Legal pages ---------- */
.legal{ max-width:820px; padding-top:150px; }
.legal h1{ font-size:clamp(2rem,1.4rem+2vw,2.8rem); margin-bottom:10px; }
.legal .updated{ color:var(--muted); font-size:.9rem; margin-bottom:36px; }
.legal h2{ font-size:1.4rem; margin:36px 0 12px; }
.legal h3{ font-size:1.1rem; font-family:var(--ff-text); font-weight:700; margin:24px 0 8px; }
.legal p, .legal li{ color:var(--ink-soft); font-size:1rem; line-height:1.7; }
.legal p{ margin-bottom:14px; }
.legal ul{ list-style:disc; padding-left:22px; margin-bottom:14px; display:grid; gap:6px; }
.legal a{ color:var(--accent); text-decoration:underline; }
.legal .box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin-bottom:14px; }
.legal strong{ color:var(--ink); }

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-copy{ max-width:680px; }
  .why-grid, .ba-grid, .about-grid{ grid-template-columns:1fr; }
  .why-media img, .about-media img{ aspect-ratio:16/10; }
  .why-badge{ left:16px; }
  .sol-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; gap:32px; }
  .steps .step::after{ display:none; }
  .gallery{ columns:3; }
  .tst-grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .nav, .header-phone span{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav.open{ display:flex; position:absolute; top:calc(100% + 8px); left:16px; right:16px; flex-direction:column; align-items:stretch; gap:4px;
    background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px; box-shadow:var(--shadow-lg); }
  .nav.open a{ padding:12px 14px; border-radius:10px; }
  .nav.open a:hover{ background:var(--bg-soft); }
  .nav.open a::after{ display:none; }
  .header-cta .btn{ display:none; }
  .hero{ padding-top:120px; }
  .trustbar .container{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .sol-grid{ grid-template-columns:1fr; }
  .gallery{ columns:2; column-gap:12px; }
  .gallery figure{ margin-bottom:12px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand{ grid-column:1 / -1; }
  .opt-grid{ grid-template-columns:1fr; }
  .cookie{ flex-direction:column; align-items:stretch; }
  .cookie-btns{ justify-content:stretch; } .cookie-btns .btn{ flex:1; }
  .mobile-cta{ display:flex; }
  .why-badge{ position:static; margin-top:16px; max-width:none; }
  .form-card{ box-shadow:var(--shadow); }
}
@media (max-width:430px){
  .row-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
}