/* ============================================================
   polypropylen-pool.at — "Helles Wasser" v3
   Light ocean theme — airy, luminous, premium.
   Soft blue-gray tones, warm off-white, turquoise accent.
   ============================================================ */
:root{
  --bg:#F2F6F8;
  --bg-2:#E8EEF2;
  --bg-3:#DDE5EA;
  --bg-warm:#FAFBFC;
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.55);
  --glass-3:rgba(240,246,250,.65);
  --line:rgba(0,30,60,.08);
  --line-strong:rgba(0,30,60,.14);
  --line-accent:rgba(20,160,195,.30);
  --text:#0B2A3A;
  --text-2:#1E3D4F;
  --muted:#5E7D8E;
  --accent:#0FA5C8;
  --accent-deep:#0C849F;
  --accent-light:#D6F2FA;
  --accent-glow:rgba(15,165,200,.10);
  --ok:#1A9E6B;
  --radius:18px;
  --radius-sm:12px;
  --font-display:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;
  --section-gap:clamp(80px,12vw,140px);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 2px 8px rgba(0,30,60,.06);
  --shadow-md:0 8px 30px rgba(0,30,60,.08);
  --shadow-lg:0 20px 60px rgba(0,30,60,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ambient background — subtle warm gradient */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 80% 50% at 80% -10%,rgba(15,165,200,.05),transparent 50%),
  radial-gradient(ellipse 60% 40% at 10% 100%,rgba(12,132,159,.04),transparent 50%),
  var(--bg)}

/* ============================================================
   SCROLL-REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

.img-reveal{overflow:hidden}
.img-reveal img{transition:transform 1.2s var(--ease-out-expo);transform:scale(1.08)}
.img-reveal.is-visible img{transform:scale(1)}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

/* ============================================================
   HEADER — light frosted glass
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(242,246,248,.82);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid transparent;transition:background .4s,border-color .4s,box-shadow .4s}
.site-header.scrolled{background:rgba(250,251,252,.95);border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(0,30,60,.06)}
.site-header::after{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(15,165,200,.25) 30%,rgba(15,165,200,.4) 50%,rgba(15,165,200,.25) 70%,transparent 95%);opacity:.5}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 24px;transition:padding .3s}
.site-header.scrolled .nav{padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.logo-mark{flex:0 0 auto;filter:drop-shadow(0 2px 8px rgba(15,165,200,.2));transition:filter .3s}
.brand:hover .logo-mark{filter:drop-shadow(0 2px 14px rgba(15,165,200,.35))}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:-.015em;white-space:nowrap;color:var(--text)}
.brand-sub{font-size:9.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-top:2px}
.nav-center{display:flex;gap:4px;font-size:14px;font-weight:500;color:var(--muted);align-items:center}
.nav-center a{position:relative;text-decoration:none!important;padding:9px 14px;border-radius:10px;transition:color .25s,background .25s}
.nav-center a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out-expo)}
.nav-center a:hover,.nav-center a.is-active{color:var(--text)}
.nav-center a:hover::after,.nav-center a.is-active::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-cta{display:inline-block;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-radius:var(--radius-sm);padding:11px 20px;text-decoration:none!important;box-shadow:0 4px 16px rgba(15,165,200,.25);transition:transform .25s var(--ease-out-expo),box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(15,165,200,.35)}
.nav-cta.block{display:block;text-align:center;margin:14px 20px 18px}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:rgba(0,0,0,.02)}
.burger span{display:block;width:18px;height:2px;margin:0 auto;border-radius:2px;background:var(--text);transition:transform .3s,opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}
@media(max-width:880px){
  .nav-center,.nav-right .nav-cta{display:none}
  .burger{display:flex}
  .mobile-menu{display:block;background:rgba(250,251,252,.98);border-bottom:1px solid var(--line)}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a:not(.nav-cta){display:block;padding:16px 24px;font-size:15.5px;font-weight:500;color:var(--text);text-decoration:none;border-top:1px solid var(--line)}
  .mobile-menu a.is-active{color:var(--accent)}
  body.menu-open{overflow:hidden}
}
@media(max-width:380px){.brand-sub{display:none}}

/* ============================================================
   HERO — cinematic with dark overlay for contrast on photos
   ============================================================ */
.hero{position:relative;min-height:62svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero.tall{min-height:90svh}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);animation:heroZoom 20s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.04)}to{transform:scale(1.1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,24,36,.40) 0%,rgba(8,24,36,.08) 30%,rgba(8,24,36,.55) 75%,rgba(8,24,36,.80) 100%)}
.hero-in{max-width:1200px;margin:0 auto;width:100%;padding:0 24px 56px;animation:fadeInUp .8s var(--ease-out-expo) both .2s;color:#fff}
.crumb{font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:12px}
.crumb a{text-decoration:none;color:rgba(255,255,255,.7)}
.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8DE4F7;margin-bottom:12px;padding:6px 14px;border:1px solid rgba(141,228,247,.3);border-radius:100px;background:rgba(141,228,247,.08)}
h1{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,5.6vw,56px);letter-spacing:-.035em;line-height:1.1;text-wrap:balance;max-width:780px;color:#fff}
.lead{max-width:620px;color:rgba(255,255,255,.85);font-size:clamp(15px,2.2vw,17.5px);margin-top:16px;line-height:1.65}
.hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:#fff;font-weight:700;font-size:15px;border-radius:var(--radius-sm);padding:16px 30px;text-decoration:none;box-shadow:0 6px 24px rgba(15,165,200,.35);transition:transform .25s var(--ease-out-expo),box-shadow .25s,filter .25s}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(15,165,200,.45);filter:brightness(1.08)}
.hero-stats{display:flex;gap:32px;margin-top:32px;flex-wrap:wrap}
.hero-stats div{font-size:13px;color:rgba(255,255,255,.65);line-height:1.4}
.hero-stats b{display:block;font-family:var(--font-display);font-size:20px;color:#fff;letter-spacing:-.01em;margin-bottom:2px}

/* ============================================================
   LAYOUT / SECTIONS
   ============================================================ */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sect{padding-top:var(--section-gap)}
.section-title{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3.6vw,36px);letter-spacing:-.025em;line-height:1.15;position:relative;color:var(--text)}
.section-title::before{content:"";display:block;width:32px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));margin-bottom:16px}
.section-sub{color:var(--muted);font-size:15.5px;margin-top:12px;max-width:640px;line-height:1.65}

/* Glass panels — light frosted */
.panel{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);transition:border-color .3s,box-shadow .3s}
.panel:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lg)}

/* ============================================================
   SIZE CARDS (homepage) — per-size photos
   ============================================================ */
.size-grid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:640px){.size-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.size-grid{grid-template-columns:repeat(4,1fr)}}
.size-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;text-decoration:none;border:1px solid rgba(0,0,0,.06);aspect-ratio:3/4;isolation:isolate;transition:transform .4s var(--ease-out-expo),border-color .4s,box-shadow .4s;box-shadow:var(--shadow-md)}
.size-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease-out-expo)}
.size-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,24,36,0) 25%,rgba(8,24,36,.80) 100%);transition:background .4s}
.size-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,30,60,.14),0 0 0 1px var(--line-accent)}
.size-card:hover img{transform:scale(1.06)}
.size-card .in{position:absolute;left:20px;right:20px;bottom:20px;color:#fff}
.size-card .dim{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.02em;color:#fff}
.size-card .from{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px}
.size-card .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;color:#8DE4F7;transition:gap .3s}
.size-card:hover .go{gap:10px}

/* ============================================================
   FEATURE VISUAL — text + large image side by side
   ============================================================ */
.feature-visual{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-top:40px}
@media(min-width:860px){.feature-visual{grid-template-columns:1fr 1fr;gap:60px}}
.feature-visual.reverse .feature-img{order:-1}
@media(max-width:859px){.feature-visual.reverse .feature-img{order:0}}
.feature-text .section-title{margin-bottom:0}
.feature-text .section-title::before{margin-bottom:14px}
.feature-text p{color:var(--muted);font-size:15px;margin-top:14px;line-height:1.7}
.feature-text .feature-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-weight:600;font-size:14px;color:var(--accent);text-decoration:none;transition:gap .3s}
.feature-text .feature-link:hover{gap:12px}
.feature-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.feature-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out-expo)}
.feature-img:hover img{transform:scale(1.03)}

/* ============================================================
   USP GRID — "Warum Polypropylen" cards
   ============================================================ */
.usp-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:700px){.usp-grid{grid-template-columns:1fr 1fr 1fr}}
.usp{padding:28px 24px;background:var(--glass);transition:border-color .3s,transform .3s,box-shadow .3s}
.usp:hover{border-color:var(--line-accent);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.usp .ic{font-size:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--accent-light);border:1px solid var(--line-accent);margin-bottom:16px}
.usp h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:8px;color:var(--text)}
.usp p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ============================================================
   IMAGE SHOWCASE — horizontal scroll gallery
   ============================================================ */
.showcase-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:32px 24px;margin:0 -24px;scrollbar-width:none}
.showcase-scroll::-webkit-scrollbar{display:none}
.showcase-scroll figure{flex:0 0 clamp(280px,40vw,380px);scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;position:relative;box-shadow:var(--shadow-md);transition:transform .3s,box-shadow .3s}
.showcase-scroll figure:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.showcase-scroll figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out-expo)}
.showcase-scroll figure:hover img{transform:scale(1.05)}
.showcase-scroll figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px;font-size:12px;color:#fff;background:linear-gradient(180deg,transparent,rgba(8,24,36,.80))}

/* ============================================================
   CONFIGURATOR STEPS
   ============================================================ */
.step{padding:28px 24px;margin-bottom:18px}
@media(min-width:700px){.step{padding:32px 32px 28px}}
.step h2{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--text)}
.step h2 .tag{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:3px 10px;border-radius:6px;background:var(--accent-light);border:1px solid rgba(15,165,200,.15)}
.step .hint{font-size:13.5px;color:var(--muted);margin:6px 0 18px}
.choices{display:grid;gap:12px}
.choices.cols2{grid-template-columns:1fr}
@media(min-width:640px){.choices.cols2{grid-template-columns:1fr 1fr}}
.choice{position:relative;display:flex;gap:14px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--bg-warm);transition:border-color .25s,background .25s,transform .2s,box-shadow .2s}
.choice:hover{border-color:var(--line-strong);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.choice[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 1px var(--accent),0 4px 16px rgba(15,165,200,.1)}
.choice .thumb{flex:0 0 56px;width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--bg-2);border:1px solid var(--line)}
.choice .dot{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid var(--muted);transition:.25s}
.choice[aria-pressed="true"] .dot{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 45%,transparent 50%)}
.choice .info{flex:1;min-width:0}
.choice .t{font-weight:600;font-size:14.5px;color:var(--text)}
.choice .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.choice .p{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent)}
.choice .p.incl{color:var(--ok)}

/* swatches */
.swatches{display:flex;gap:18px;flex-wrap:wrap}
.swatch{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted);transition:color .25s}
.swatch .chip{width:54px;height:54px;border-radius:50%;border:2.5px solid var(--line);box-shadow:0 4px 12px rgba(0,30,60,.1);transition:border-color .25s,box-shadow .25s,transform .25s}
.swatch[aria-pressed="true"] .chip{border-color:var(--accent);box-shadow:0 0 0 4px rgba(15,165,200,.15),0 4px 12px rgba(0,30,60,.1);transform:scale(1.08)}
.swatch[aria-pressed="true"]{color:var(--text)}

/* PLZ */
.plzrow{display:flex;gap:10px;flex-wrap:wrap}
.plzrow input{flex:1;min-width:150px;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;font:inherit;font-size:16px;background:var(--bg-warm);color:var(--text);transition:border-color .25s,box-shadow .25s}
.plzrow input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(15,165,200,.12)}
.plzrow input::placeholder{color:#9AB0BC}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-radius:var(--radius-sm);padding:14px 22px;font-weight:700;font-size:14.5px;transition:transform .2s,filter .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(15,165,200,.2)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 22px rgba(15,165,200,.3)}
.region-ok{display:none;margin-top:14px;font-size:13.5px;color:var(--ok);font-weight:500}
.region-ok.show{display:block}

/* ============================================================
   DESKTOP SUMMARY
   ============================================================ */
.cfg-grid{display:grid;grid-template-columns:1fr;gap:34px;padding-bottom:170px}
@media(min-width:1000px){.cfg-grid{grid-template-columns:minmax(0,1fr) 370px;padding-bottom:120px}}
aside.sumcol{display:none}
@media(min-width:1000px){aside.sumcol{display:block;position:sticky;top:86px;align-self:start}}
.summary h3{font-family:var(--font-display);font-size:16px;font-weight:600;padding:20px 24px 0;color:var(--text)}
.summary ul{list-style:none;padding:14px 24px;display:grid;gap:10px;font-size:13.5px}
.summary li{display:flex;justify-content:space-between;gap:14px;color:var(--muted)}
.summary li span:last-child{font-variant-numeric:tabular-nums;color:var(--text);font-weight:500;white-space:nowrap}
.summary .total{border-top:1px solid var(--line);padding:18px 24px;display:flex;justify-content:space-between;align-items:baseline}
.summary .total b{font-family:var(--font-display);font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.summary .vat{font-size:11.5px;color:var(--muted);padding:0 24px 18px}
.summary .cta{display:block;width:calc(100% - 48px);margin:0 24px 24px;text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-radius:var(--radius-sm);padding:15px;font-weight:700;font-size:15px;box-shadow:0 4px 18px rgba(15,165,200,.2);transition:transform .2s,box-shadow .2s}
.summary .cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(15,165,200,.35)}

/* ============================================================
   PRICE DOCK — light with accent waterline
   ============================================================ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(250,251,252,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line)}
.dock::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-deep),var(--accent),var(--accent-deep));background-size:300% 100%;animation:waterline 9s linear infinite}
@keyframes waterline{to{background-position:300% 0}}
.dock-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px}
.dock .lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dock .val{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,5vw,24px);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text)}
.dock .cta{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-radius:var(--radius-sm);padding:13px 20px;font-weight:700;font-size:14px;color:#fff;white-space:nowrap;box-shadow:0 4px 16px rgba(15,165,200,.2)}
.dock .cta:hover{filter:brightness(1.08)}
@media(min-width:1000px){.dock .cta{display:none}.dock-in{padding:8px 24px}.dock .val{font-size:17px}}

/* ============================================================
   MODAL
   ============================================================ */
dialog{border:0;border-radius:var(--radius);max-width:480px;width:calc(100% - 28px);padding:0;background:var(--bg-warm);color:var(--text);box-shadow:0 40px 100px rgba(0,30,60,.15);border:1px solid var(--line);position:fixed;inset:0;margin:auto;max-height:calc(100svh - 36px);overflow:auto}
dialog::backdrop{background:rgba(8,24,36,.4);backdrop-filter:blur(6px)}
dialog .modal{text-align:left}
.modal{padding:32px;position:relative}
.modal h3{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em;padding-right:36px;color:var(--text)}
.modal p{font-size:13.5px;color:var(--muted);margin:8px 0 18px}
.modal label{display:block;font-size:12.5px;font-weight:600;margin:14px 0 6px;color:var(--text-2)}
.modal input,.modal textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;font:inherit;font-size:16px;background:var(--bg);color:var(--text);transition:border-color .25s,box-shadow .25s}
.modal input:focus,.modal textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(15,165,200,.1)}
.modal .send{width:100%;margin-top:20px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-radius:var(--radius-sm);padding:16px;font-weight:700;font-size:15px;box-shadow:0 4px 18px rgba(15,165,200,.2);transition:transform .2s,box-shadow .2s}
.modal .send:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(15,165,200,.35)}
.modal .close{position:absolute;top:14px;right:16px;font-size:24px;color:var(--muted);width:38px;height:38px;transition:color .2s}
.modal .close:hover{color:var(--text)}
.modal .legal{font-size:11px;color:var(--muted);margin-top:12px}
.modal .legal a{color:var(--accent)}
.modal .success{display:none;text-align:center;padding:26px 0 8px}
.modal .success .big{font-size:42px}
.modal .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ============================================================
   SPECS BAR
   ============================================================ */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:22px;box-shadow:var(--shadow-sm)}
@media(min-width:760px){.specs{grid-template-columns:repeat(5,1fr)}}
.spec{background:var(--bg-warm);padding:20px 18px}
.spec b{display:block;font-family:var(--font-display);font-size:20px;letter-spacing:-.01em;color:var(--text)}
.spec span{font-size:11.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:2px;display:block}

/* ============================================================
   PROSE (editorial content)
   ============================================================ */
.prose{max-width:760px;color:var(--text-2);font-size:15.5px;line-height:1.7}
.prose p{margin-top:16px}
.prose strong{color:var(--text)}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(15,165,200,.3);text-underline-offset:3px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--accent)}
.prose h2{font-family:var(--font-display);font-size:clamp(18px,2.5vw,22px);font-weight:600;color:var(--text);margin-top:32px;letter-spacing:-.01em}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.acc{display:grid;gap:12px;margin-top:26px}
.acc details{background:var(--glass);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.acc details[open]{border-color:var(--line-accent);box-shadow:var(--shadow-sm)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px;font-weight:600;font-size:15px;color:var(--text);transition:color .2s}
.acc summary:hover{color:var(--accent)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--font-display);font-size:20px;color:var(--accent);transition:transform .3s var(--ease-out-expo);flex:0 0 auto}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .a{padding:0 22px 20px;color:var(--muted);font-size:14px;max-width:720px;line-height:1.65}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:26px}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1;transition:border-color .3s,transform .3s,box-shadow .3s;box-shadow:var(--shadow-sm)}
.gallery figure:hover{border-color:var(--line-accent);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out-expo)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font-size:11.5px;color:#fff;background:linear-gradient(180deg,transparent,rgba(8,24,36,.80))}

/* ============================================================
   CTA BANNER SECTION
   ============================================================ */
.cta-banner{padding:48px 32px;text-align:center;background:linear-gradient(135deg,rgba(15,165,200,.06),rgba(12,132,159,.04));border:1px solid var(--line-accent);position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(15,165,200,.03),transparent 50%);animation:rotateSlow 30s linear infinite}
@keyframes rotateSlow{to{transform:rotate(360deg)}}
.cta-banner .section-title{margin:0 auto}
.cta-banner .section-title::before{margin:0 auto 16px}
.cta-banner .section-sub{margin:12px auto 24px;text-align:center}

/* ============================================================
   REGION / STATUS MESSAGES
   ============================================================ */
.region-ok.warn{color:#C69820}
.region-ok.err{color:#D14545}
.btn:disabled{opacity:.55;cursor:wait}

/* ============================================================
   FOOTER — light
   ============================================================ */
.site-footer{border-top:1px solid var(--line);margin-top:var(--section-gap);padding:48px 0 36px;color:var(--muted);font-size:13px;background:linear-gradient(180deg,transparent,rgba(220,230,238,.4))}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line)}
.foot-nav{display:flex;gap:8px 24px;flex-wrap:wrap}
.foot-nav a{text-decoration:none!important;transition:color .2s}
.foot-nav a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px}
.foot-bottom a{text-decoration:none!important;transition:color .2s}
.foot-bottom a:hover{color:var(--text)}

/* ============================================================
   SCROLL-REVEAL STAGGER
   ============================================================ */
.stagger-children > *{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.stagger-children.is-visible > *{opacity:1;transform:translateY(0)}
.stagger-children.is-visible > *:nth-child(1){transition-delay:.05s}
.stagger-children.is-visible > *:nth-child(2){transition-delay:.1s}
.stagger-children.is-visible > *:nth-child(3){transition-delay:.15s}
.stagger-children.is-visible > *:nth-child(4){transition-delay:.2s}
.stagger-children.is-visible > *:nth-child(5){transition-delay:.25s}
.stagger-children.is-visible > *:nth-child(6){transition-delay:.3s}

/* ============================================================
   PROSE — extended (h3, lists, code)
   ============================================================ */
.prose h3{font-family:var(--font-display);font-size:clamp(14px,1.8vw,16px);font-weight:600;color:var(--text);margin-top:20px;letter-spacing:-.008em}
.prose ul,.prose ol{padding-left:18px;margin-top:10px;color:var(--text-2)}
.prose li{margin-top:5px;font-size:15px;line-height:1.65}
.prose code{font-family:monospace;font-size:.88em;background:var(--bg-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--text-2)}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;padding:14px 24px;padding-bottom:calc(14px + env(safe-area-inset-bottom));background:rgba(250,251,252,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line);box-shadow:0 -6px 28px rgba(0,30,60,.07);transition:transform .4s var(--ease-out-expo)}
.cookie-bar[hidden]{display:none}
.cookie-bar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-bar p{flex:1;min-width:220px;font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.cookie-bar p a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(15,165,200,.3)}
.cookie-btns{display:flex;gap:10px;flex-shrink:0}
.cookie-accept{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-radius:var(--radius-sm);padding:10px 20px;font-weight:700;font-size:13px;box-shadow:0 4px 14px rgba(15,165,200,.2);transition:transform .2s,box-shadow .2s;border:0;cursor:pointer;font-family:inherit}
.cookie-accept:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(15,165,200,.3)}
.cookie-decline{display:inline-block;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:10px 18px;font-weight:600;font-size:13px;color:var(--muted);transition:border-color .2s,color .2s;background:none;cursor:pointer;font-family:inherit}
.cookie-decline:hover{border-color:var(--line-strong);color:var(--text)}
@media(max-width:560px){
  .cookie-btns{width:100%}
  .cookie-accept,.cookie-decline{flex:1;text-align:center}
}