/* INDU RAGS - industrial cleaning rags. Dark graphite base, single gold accent. */

:root{
  --bg:#0b0f14;
  --bg-2:#070a0f;
  --surface:#111826;
  --surface-2:#0e1420;
  --ink:#e8eef7;
  --muted:#a8b3c7;
  --silver:#cfd6e2;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --accent:#d6b25e;
  --accent-soft:#ffd98a;
  --accent-dim:rgba(214,178,94,.14);

  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font-body);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --radius-btn:10px;
  --radius-card:14px;
  --max:1120px;
  --shadow:0 12px 28px rgba(0,0,0,.32);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  position:relative;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
}

h1,h2,h3,h4{font-family:var(--font-display); line-height:1.15; margin:0}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3rem); letter-spacing:-.02em; font-weight:800}
h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem); letter-spacing:-.01em; font-weight:800}
h3{font-size:1.05rem; font-weight:750; letter-spacing:-.005em}
p{margin:0}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
address{font-style:normal}
strong{font-weight:750}

:focus-visible{outline:2px solid var(--accent-soft); outline-offset:3px; border-radius:4px}

.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 20px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:20px; top:12px; z-index:100; background:var(--surface); padding:10px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-btn)}

/* ---------- Signature device: short gold rule ---------- */

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--silver);
  margin-bottom:14px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); flex:none}

/* ---------- Header ---------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex; align-items:center; gap:16px; min-height:66px}

.wordmark{font-size:1.4rem; font-weight:800; line-height:1; letter-spacing:-.01em; display:block}
.wordmark .rags{color:var(--accent)}
.wordmark-tag{
  display:block; margin-top:-2px;
  font-family:var(--font-mono); font-weight:700;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.brand{display:flex; align-items:center; gap:12px; padding:8px 0}
.brand-block{display:flex; align-items:center; gap:12px}
.brand-mark{display:block; width:auto; height:38px; flex:none}
.brand-text{display:block}

.site-nav{margin-left:auto}
.site-nav ul{display:flex; align-items:center; gap:4px}
.site-nav a{
  display:block; padding:9px 11px; border-radius:var(--radius-btn);
  font-size:.86rem; font-weight:650; color:var(--muted);
}
.site-nav a:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.site-nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)}

/* Language switcher (flag dropdown) */
.lang-switch{position:relative}
.flag{
  width:22px; height:22px; border-radius:50%; flex:none; display:inline-block;
  background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.flag-sk{background-image:url("../img/flag-sk.svg")}
.flag-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23012169'/%3E%3Cpath d='M0 0l60 60M60 0L0 60' stroke='%23fff' stroke-width='12'/%3E%3Cpath d='M0 0l60 60M60 0L0 60' stroke='%23C8102E' stroke-width='6'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='%23fff' stroke-width='20'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='%23C8102E' stroke-width='12'/%3E%3C/svg%3E")}
.flag-de{background-image:linear-gradient(180deg,#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66% 100%)}

.lang-current{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.02);
  color:var(--ink); font-family:inherit; font-weight:600; font-size:.8rem; letter-spacing:.03em;
  padding:6px 10px 6px 7px; cursor:pointer;
}
.lang-current:hover{border-color:var(--line-strong)}
.lang-current .chev{width:14px; height:14px; stroke:var(--muted); fill:none}
.lang-switch.open .lang-current .chev{transform:rotate(180deg)}

.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:168px; z-index:120;
  background:rgba(11,15,20,.94); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line-strong); border-radius:14px; padding:6px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transform:translateY(-6px);
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:none}
.lang-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-radius:9px; color:var(--muted);
  font-family:inherit; font-size:.92rem; font-weight:500; padding:9px 11px; cursor:pointer;
}
.lang-menu button:hover{background:rgba(214,178,94,.08); color:var(--ink)}
.lang-menu button[aria-selected="true"]{color:var(--accent)}
.lang-menu button .check{display:none; fill:none}
.lang-menu button[aria-selected="true"] .check{display:block; margin-left:auto; width:16px; height:16px; stroke:var(--accent-soft)}
.lang-menu button:focus-visible{outline:2px solid var(--accent-soft); outline-offset:-2px}

.btn.header-cta{display:none}

.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:0 12px; margin-left:auto;
  background:transparent; color:var(--ink); cursor:pointer;
  border:1px solid var(--line-strong); border-radius:var(--radius-btn);
  font:inherit; font-size:.8rem; font-weight:700;
}
.menu-toggle .bars{display:block; width:16px; height:2px; background:var(--accent); position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:""; position:absolute; left:0; width:16px; height:2px; background:var(--accent)}
.menu-toggle .bars::before{top:-5px}
.menu-toggle .bars::after{top:5px}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 18px;
  border-radius:var(--radius-btn); border:1px solid transparent;
  background:var(--accent); color:#0b0f14;
  font-weight:750; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--accent-soft)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

.link-more{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:.9rem; color:var(--accent);
  padding:6px 0;
}
.link-more::after{content:""; width:18px; height:2px; background:currentColor}
.link-more:hover{color:var(--accent-soft)}

/* ---------- Sections ---------- */

main{display:block}
section{padding:64px 0}
section[id],:target{scroll-margin-top:5rem}
.section-line{border-top:1px solid var(--line)}
.section-head{max-width:62ch; margin-bottom:30px}
.section-head p{color:var(--muted); margin-top:12px}
.lead{color:var(--silver); font-size:1.05rem; max-width:64ch}

/* ---------- Hero ---------- */

.hero{
  position:relative; overflow:hidden;
  padding:74px 0 20px; background:linear-gradient(180deg,var(--bg-2),var(--bg));
}
.hero > .container{position:relative; z-index:1}

/* Gold particle field, after the brand postcard. The SVG carries
   preserveAspectRatio="none", so the artwork maps straight onto this box and
   the box shape alone decides how it sits: the left glow stays welded to the
   left edge and the right glow to the right edge however wide the monitor is,
   instead of being uniformly scaled up until the lower half is sliced off.
   width:auto + aspect-ratio sizes the box from the hero's height at the
   artwork's own 1440:700, and min-width:100% then widens it to fill. So a
   short wide hero (any desktop) stretches edge to edge, while a tall narrow
   one (phones, and the stacked layout under 960) keeps the artwork's ratio,
   scaling uniformly and overflowing sideways into the hero's overflow:hidden.
   No breakpoint needed - the hero's own proportions pick the behaviour. */
.hero-dust{
  position:absolute; top:0; left:50%; right:auto; transform:translateX(-50%);
  width:auto; min-width:100%; height:100%; aspect-ratio:1440/700;
  pointer-events:none;
}
.dust-2{opacity:.8}

.hero h1{max-width:16ch}
.hero .lead{margin-top:18px}
.hero .btn-row{margin-top:28px}
.page-hero{
  position:relative; overflow:hidden;
  padding:56px 0 40px; background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-bottom:1px solid var(--line);
}
.page-hero > .container{position:relative; z-index:1}
.page-hero .lead{margin-top:16px}

/* Twirling continuation of the hero field - one tile, repeated vertically down
   the rest of the page (same motif every time, not procedurally unique).
   Sized via top:0;bottom:0 against body (position:relative above), so it
   always covers the page's actual content height, short or long. Index page
   only. The animation lives inside dust-swirl.svg itself, since page-level
   CSS can't reach into a background-image. */
.dust-swirl-bg{
  position:absolute; top:0; bottom:0; left:0; width:100%; z-index:-1; pointer-events:none;
  background-image:url("../img/dust-swirl.svg");
  background-repeat:repeat-y;
  background-position:top center;
  /* auto height keeps the tile's own 1440x900 ratio, so the swirls stay
     circular at any width instead of squashing on narrow screens */
  background-size:100% auto;
  opacity:.9;
}

/* Wide screens: stretch the tile edge to edge but hold its height at the
   authored 900px, so the curls stay pinned near the left and right walls at
   any width while the vertical rhythm never stretches with the viewport.
   This needs preserveAspectRatio="none" on dust-swirl.svg itself: without it
   the file defaults to xMidYMid meet, which fits the art at its native 1440
   and centres it in the tile, leaving transparent gutters on an ultrawide.
   Below 1440 the base 100%/auto keeps the swirls from squashing on phones;
   at exactly 1440 the two values are identical, so nothing jumps. */
@media (min-width:1440px){
  .dust-swirl-bg{background-size:100% 900px}
}


@media (prefers-reduced-motion:no-preference){
  .dust-1{animation:dustTwinkle1 7s ease-in-out infinite}
  .dust-2{animation:dustTwinkle2 9.5s ease-in-out infinite}
}
@keyframes dustTwinkle1{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes dustTwinkle2{0%,100%{opacity:.8}50%{opacity:.46}}

.crumb{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.crumb a:hover{color:var(--ink)}

/* Plain-language summary of the business, in short declarative sentences.
   Search engines and AI assistants quote text shaped like this; the same facts
   buried in marketing copy do not get extracted. Every number here also appears
   in the spec strip, the cennik cards and the footer, so there is one source of
   truth for all of them. Quiet band, not a feature section. */
.facts{padding:30px 0; border-bottom:1px solid var(--line)}
.facts p{max-width:82ch; color:var(--muted); font-size:.92rem; line-height:1.75}

/* ---------- Media ---------- */

.hero-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center}
.hero-grid .hero-copy h1{max-width:15ch}
.hero-media{margin:0}
.hero-media img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; max-height:520px; object-fit:cover;
  border-radius:var(--radius-card); border:1px solid var(--line);
}

.card-media{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; border:1px solid var(--line); margin-bottom:18px;
}
.price-media{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; border:1px solid var(--line); margin-bottom:20px;
}

.media-band img{
  display:block; width:100%; height:auto; aspect-ratio:21/9; object-fit:cover;
  border-radius:var(--radius-card); border:1px solid var(--line);
}
.media-caption{
  display:block; margin-top:12px; color:var(--muted);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}

.split-media{margin:0}
.split-media img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-card); border:1px solid var(--line);
}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gallery img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-card); border:1px solid var(--line);
}

/* ---------- Spec strip ---------- */

.spec-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--radius-card);
  background:var(--surface-2); overflow:hidden; margin-top:44px;
}
.spec-strip > div{padding:20px; border-right:1px solid var(--line)}
.spec-strip > div:last-child{border-right:0}
.spec-strip dt{
  font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.spec-strip dd{margin:8px 0 0; font-size:1.5rem; font-weight:800; letter-spacing:-.02em}
.spec-strip dd small{display:block; font-size:.8rem; font-weight:650; color:var(--muted); letter-spacing:0; margin-top:4px}

/* ---------- Cards ---------- */

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

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:24px;
}
.card h3{margin-bottom:10px}
.card p{color:var(--muted)}
.card .num{
  font-family:var(--font-mono); font-size:.75rem; font-weight:700;
  letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:12px;
}

.marked li{position:relative; padding-left:26px; color:var(--muted); margin-top:12px}
.marked li:first-child{margin-top:0}
.marked li::before{content:""; position:absolute; left:0; top:.62em; width:14px; height:2px; background:var(--accent)}

/* ---------- Spec table ---------- */

.spec-table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden}
.spec-table th,.spec-table td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{
  width:40%; background:var(--surface-2); font-weight:650; color:var(--muted);
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
}
.spec-table td{background:var(--surface); font-weight:650}

/* ---------- Pricing ---------- */

.price-card{position:relative; padding-top:26px}
.price-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; opacity:0;
  background:var(--accent); border-radius:var(--radius-card) var(--radius-card) 0 0;
}
.price-card:hover,.price-card:focus-within{border-color:rgba(214,178,94,.4)}
.price-card:hover::before,.price-card:focus-within::before{opacity:1}
.price-tag{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  padding:6px 10px; border:1px solid rgba(214,178,94,.3); border-radius:6px; margin-bottom:16px;
}
.price-value{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:6px 0 18px}
.price-value b{font-size:2.4rem; font-weight:800; letter-spacing:-.03em; line-height:1}
.price-value span{color:var(--muted); font-size:.9rem; font-weight:650}
.note{color:var(--muted); font-size:.85rem; margin-top:18px}

/* ---------- Calculator ---------- */

.calc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:26px}
.calc-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start}

.seg{display:flex; gap:8px; margin:14px 0 26px; flex-wrap:wrap}
.seg button{
  flex:1 1 180px; min-height:46px; padding:11px 14px; cursor:pointer;
  background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--radius-btn);
  font:inherit; font-size:.9rem; font-weight:700;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent-dim); border-color:rgba(214,178,94,.45); color:var(--ink)}

.field-label{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.field-label output{font-size:1rem; letter-spacing:0; color:var(--ink); font-weight:750}

input[type="range"]{
  width:100%; height:34px; margin:0; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
input[type="range"]::-webkit-slider-runnable-track{height:4px; background:var(--line-strong); border-radius:2px}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-9px;
  background:var(--accent); border:0; border-radius:50%;
}
input[type="range"]::-moz-range-track{height:4px; background:var(--line-strong); border-radius:2px}
input[type="range"]::-moz-range-thumb{width:22px; height:22px; background:var(--accent); border:0; border-radius:50%}

.calc-out{background:var(--surface-2); border:1px solid rgba(214,178,94,.28); border-radius:var(--radius-card); padding:22px}
.calc-out .k{font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.calc-out .v{font-size:2.2rem; font-weight:800; letter-spacing:-.03em; margin:10px 0 4px; color:var(--accent-soft)}
.calc-out dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line)}
.calc-out dt{color:var(--muted); font-size:.88rem}
.calc-out dd{margin:0; font-weight:700; font-size:.88rem; text-align:right}
.calc-out .s{color:var(--muted); font-size:.82rem; margin-top:16px}

/* ---------- Steps ---------- */

.steps{counter-reset:step; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden}
.steps li{display:grid; grid-template-columns:74px 1fr; gap:20px; padding:22px 24px; border-bottom:1px solid var(--line); background:var(--surface)}
.steps li:last-child{border-bottom:0}
.steps li::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-mono); font-size:.95rem; font-weight:700; color:var(--accent);
  padding-top:2px;
}
.steps h3{margin-bottom:6px}
.steps p{color:var(--muted)}

/* ---------- FAQ ---------- */

.faq-list{display:grid; gap:12px; max-width:80ch}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:20px 22px}
details[open]{border-color:var(--line-strong)}
summary{cursor:pointer; font-weight:750; list-style:none; display:flex; gap:14px; align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::before{content:""; width:14px; height:2px; background:var(--accent); flex:none; transform:translateY(-4px)}
details[open] summary{color:var(--accent-soft)}
details p{color:var(--muted); margin-top:12px; padding-left:28px}

/* ---------- Contact ---------- */

.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:24px}
.contact-card .k{font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.contact-card .v{display:block; font-size:1.1rem; font-weight:750; margin-top:10px; word-break:break-word}
.contact-card a.v:hover{color:var(--accent-soft)}
.contact-card address{font-style:normal; color:var(--muted); margin-top:10px; line-height:1.7}

/* Sister brand panel */
.sister{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:28px 30px;
}
.sister-body{max-width:58ch}
.sister h2{font-size:1.25rem}
.sister p{color:var(--muted); margin-top:10px}
.sister .domain{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--accent); display:block; margin-top:12px}
@media (max-width:620px){
  .sister{padding:24px 22px}
  .sister .btn{width:100%}
}

.cta-band{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:56px 0}
.cta-band .inner{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.cta-band p{color:var(--muted); margin-top:10px; max-width:52ch}

/* ---------- Footer ---------- */

.site-footer{background:var(--bg-2); border-top:1px solid var(--line); padding:52px 0 28px; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:32px}
.site-footer .wordmark-tag{color:var(--accent-soft)}
.site-footer h4{
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--silver); margin-bottom:14px;
}
.site-footer li{margin-top:8px}
.site-footer a:hover{color:var(--ink)}
.site-footer .tagline{margin-top:16px; max-width:34ch; font-size:.9rem}
.footer-bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.82rem;
}
.footer-bottom a{color:var(--ink)}
.footer-bottom a:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------- Responsive ---------- */

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .hero-media img{aspect-ratio:16/9}
  .media-band img{aspect-ratio:16/9}
  .grid-3{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .calc-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .spec-strip{grid-template-columns:1fr 1fr}
  .spec-strip > div:nth-child(2){border-right:0}
  .spec-strip > div:nth-child(1),.spec-strip > div:nth-child(2){border-bottom:1px solid var(--line)}
}

@media (max-width:820px){

  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--bg-2); border-bottom:1px solid var(--line); padding:10px 0 18px;
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column; align-items:stretch; gap:2px; max-width:var(--max); margin:0 auto; padding:0 20px}
  .site-nav a{padding:13px 12px; font-size:1rem}
  .site-header .container{position:relative}
  .header-row{flex-wrap:wrap}
}

@media (max-width:620px){
  .header-row{gap:10px}
  .brand-mark{height:32px}
  .wordmark{font-size:1.15rem}
  .wordmark-tag{font-size:.56rem}
  .menu-toggle{padding:0 10px}
  .lang-current{padding:5px 9px 5px 6px}
  section{padding:48px 0}
  .hero{padding:52px 0 44px}
  .grid-3,.grid-2,.contact-grid,.footer-grid,.spec-strip,.gallery{grid-template-columns:1fr}
  .spec-strip > div{border-right:0; border-bottom:1px solid var(--line)}
  .spec-strip > div:last-child{border-bottom:0}
  .steps li{grid-template-columns:1fr; gap:8px}
  .btn-row .btn{width:100%}
}

@media (min-width:821px){
  .menu-toggle{display:none}
  .btn.header-cta{display:inline-flex}
}

@media (prefers-reduced-motion:no-preference){
  .btn,.site-nav a,.link-more,.seg button{transition:background-color .18s ease,color .18s ease}
  .price-card{transition:border-color .2s ease}
  .price-card::before{transition:opacity .2s ease}
  .lang-current{transition:border-color .2s ease,background-color .2s ease}
  .lang-current .chev{transition:transform .25s ease}
  .lang-menu{transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .lang-menu button{transition:background-color .18s ease,color .18s ease}
}