/* ========================================================
   HIGLASS — one-page site
   Palette: #000 / #FFCB27 / #FFFFFF
   Type: Saira (display) + Space Grotesk (body) + JetBrains Mono
======================================================== */

:root{
  --black:#000;
  --ink:#0c0c0c;
  --ink-2:#161616;
  --ink-3:#1f1f1f;
  --yellow:#FFCB27;
  --yellow-2:#FFD84D;
  --white:#fff;
  --paper:#f4f3ee;
  --paper-2:#ecead9;
  --mute:#9a9a93;
  --line:rgba(255,255,255,.12);
  --line-d:rgba(0,0,0,.14);
  --maxw:1320px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

/* ---------- Typography utilities ---------- */
.kicker{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--yellow);
  text-transform:uppercase;
  display:inline-block;
}
.section-head{ max-width:var(--maxw); margin:0 auto; padding:120px 56px 48px;}
.section-head--center{ text-align:center }
.section-head--center .section-sub{ max-width:640px; margin-inline:auto }
.section-title{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:clamp(36px, 5.4vw, 80px);
  line-height:.96;
  letter-spacing:-.02em;
  margin:14px 0 22px;
  text-transform:uppercase;
}
.section-title .hl{
  background:var(--yellow);
  padding:0 .18em;
  color:var(--ink);
  display:inline-block;
  transform:skewX(-6deg);
}
.section-sub{
  font-size:18px;
  max-width:560px;
  color:#4a4a44;
  line-height:1.5;
}

.slash{color:var(--yellow); display:inline-block; transform:translateY(-.04em)}
.slash-yellow{color:var(--yellow)}
.slash-black{color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-family:"Saira",sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:14px;
  border:1.5px solid transparent;
  white-space:nowrap;
  transition:transform .15s ease, background .2s ease, color .2s ease, border .2s ease;
}
.btn em{font-style:normal;transition:transform .2s ease}
.btn:hover em{transform:translateX(3px)}
.btn--primary{background:var(--yellow); color:#000; border-color:var(--yellow)}
.btn--primary:hover{background:#000; color:var(--yellow); border-color:#000}
.btn--dark{background:#000; color:#fff; border-color:#000}
.btn--dark:hover{background:var(--yellow); color:#000; border-color:var(--yellow)}
.btn--ghost{color:#fff; border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{background:#fff; color:#000; border-color:#fff}
.btn--ghost-light{color:#fff; border-color:rgba(255,255,255,.45)}
.btn--ghost-light:hover{background:#fff; color:#000}
.btn--outline-dark{color:#000; border-color:#000}
.btn--outline-dark:hover{background:#000; color:#fff}
.btn--sm{padding:10px 16px; font-size:12px}
.btn--lg{padding:18px 28px; font-size:16px}

.btn.is-disabled{
  color:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.18);
  cursor:not-allowed;
  position:relative;
}
.btn.is-disabled:hover{
  background:transparent;
  color:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.18);
  transform:none;
}
.btn.is-disabled[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--yellow);
  color:#000;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:5px 10px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
}
.btn.is-disabled[data-tooltip]::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid var(--yellow);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:9999;
}
.btn.is-disabled:hover::after,
.btn.is-disabled:hover::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ============ TICKER ============ */
.ticker{
  background:var(--yellow);
  color:#000;
  overflow:hidden;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  padding:8px 0;
  border-bottom:1px solid #000;
}
.ticker__track{
  display:flex; gap:36px; white-space:nowrap;
  animation:tick 38s linear infinite;
  will-change:transform;
}
.ticker__track .dot{opacity:.6}
@keyframes tick{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:#000;
  color:#fff;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:32px;
  padding:18px 40px;
  border-bottom:1px solid var(--line);
}
.nav__logo{ display:flex; align-items:center; padding:6px 14px 6px 0 }
.logomark{ width:auto; height:34px; display:block }
.logomark--lg{ height:48px; margin-bottom:18px }
.nav__links{ display:flex; gap:28px; justify-content:center}
.nav__links a{
  font-family:"Saira",sans-serif;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.12em;
  font-weight:600;
  opacity:.85;
}
.nav__links a:hover{ color:var(--yellow); opacity:1 }
.nav__cta{ display:flex; align-items:center; gap:18px }
.nav__phone{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
}

/* ============ HERO ============ */
.hero{
  position:relative;
  background:#000;
  color:#fff;
  padding:80px 56px 64px;
  overflow:hidden;
  isolation:isolate;
}
.hero__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/80px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/100% 80px;
  mask-image:radial-gradient(ellipse at center, #000 35%, transparent 78%);
  z-index:-1;
}
.hero__stripe{
  position:absolute;
  background:var(--yellow);
  height:14px;
  transform:skewX(-30deg);
  z-index:-1;
  opacity:.95;
}
.hero__stripe--1{ top:18%; right:-60px; width:280px }
.hero__stripe--2{ top:21%; right:-60px; width:200px; transform:translateX(-180px) skewX(-30deg); height:14px }
.hero__meta{ max-width:var(--maxw); margin:0 auto }
.tag{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  color:rgba(255,255,255,.65);
  letter-spacing:.22em;
}
.hero__title{
  max-width:var(--maxw);
  margin:18px auto 56px;
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:clamp(56px, 11vw, 184px);
  line-height:.86;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.hero__title .line{ display:block }
.hero__title .line--accent{ color:var(--yellow) }
.hero__title .line--outline{
  -webkit-text-stroke:2px #fff;
  color:transparent;
}
.hero__row{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:64px; align-items:end;
}
.hero__copy{ padding-bottom:8px }
.hero__lede{ font-size:19px; line-height:1.55; max-width:520px; color:rgba(255,255,255,.85); margin:0 0 28px }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}
.hero__bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; color:rgba(255,255,255,.7); font-size:14px}
.hero__bullets .check{ color:var(--yellow); margin-right:10px; font-weight:700}
.hero__visual{
  position:relative;
  align-self:end;
}
.hero__visual-frame{
  position:relative;
  border:1.5px solid var(--line);
  background:linear-gradient(180deg, #0a0a0a, #000);
  padding:14px;
  aspect-ratio:5/4;
  overflow:hidden;
}
.hero__visual-frame::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 0 60%, rgba(255,203,39,.12) 70%, transparent 80%);
  pointer-events:none;
}
.hero__visual-frame img{ width:100%; height:100%; object-fit:contain; background:#000 }
.hero__visual-ribbon{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--yellow);
  color:#000;
  padding:8px 0;
  display:flex; gap:14px; align-items:center; justify-content:center;
  font-family:"Saira",sans-serif; font-weight:800; letter-spacing:.16em;
  font-size:12px;
}
.hero__visual-ribbon i{ width:14px; height:8px; background:#000; transform:skewX(-30deg)}
.hero__badge{
  position:absolute; top:-22px; right:-22px;
  background:var(--yellow); color:#000;
  width:140px; height:140px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:50%;
  border:6px solid #000;
  text-align:center;
  font-family:"Saira",sans-serif;
}
.hero__badge-num{ font-size:46px; font-weight:900; line-height:1}
.hero__badge-lbl{ font-size:10px; font-weight:700; letter-spacing:.14em; margin-top:4px}

.hero__bottombar{
  max-width:var(--maxw);
  margin:64px auto 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.hero__bottombar-item{
  padding:24px 18px 4px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.hero__bottombar-item:last-child{ border-right:0 }
.hero__bottombar-item b{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:48px;
  line-height:1;
  letter-spacing:-.02em;
}
.hero__bottombar-item b small{ font-size:18px; color:var(--yellow); font-weight:600; margin-left:2px}
.hero__bottombar-item span{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
}

/* ============ MARQUEE ============ */
.marquee{
  background:#000;
  color:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:22px 0;
}
.marquee__track{
  display:flex; gap:34px; align-items:center; white-space:nowrap;
  animation:tick 28s linear infinite;
  font-family:"Saira",sans-serif;
  font-size:28px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.marquee__track span{ color:#fff }
.marquee__track span:nth-child(4n+1){ color:var(--yellow) }
.marquee__track .dash{
  display:inline-block; width:38px; height:10px; background:var(--yellow);
  transform:skewX(-30deg);
}

/* ============ FEATURES ============ */
.features{ background:var(--white); padding-bottom:96px }
.features__grid{
  max-width:var(--maxw); margin:0 auto; padding:0 56px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.feat{
  position:relative;
  background:#fafaf6;
  border:1.5px solid #eceadd;
  padding:28px 24px 28px;
  min-height:340px;
  display:flex; flex-direction:column;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.feat:hover{ transform:translateY(-4px); border-color:#000 }
.feat__num{
  font-family:"JetBrains Mono",monospace;
  font-size:12px; letter-spacing:.18em;
  color:#9a9a93;
  margin-bottom:32px;
}
.feat__icon{ color:#000; margin-bottom:22px }
.feat__icon svg{ width:48px; height:48px }
.feat h3{
  font-family:"Saira",sans-serif;
  font-weight:800; font-size:24px;
  margin:0 0 10px;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.feat p{ margin:0 0 auto; color:#54534c; font-size:15px; line-height:1.5}
.feat__meta{
  display:flex; justify-content:space-between; align-items:end;
  border-top:1px solid #e2e0d3;
  margin-top:22px; padding-top:14px;
}
.feat__meta span{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.18em; color:#9a9a93 }
.feat__meta b{ font-family:"Saira",sans-serif; font-size:28px; font-weight:800 }
.feat--accent{ background:var(--yellow); border-color:#000 }
.feat--accent .feat__num{ color:#000 }
.feat--accent .feat__meta{ border-top-color:rgba(0,0,0,.2)}
.feat--accent .feat__meta span{ color:#000 }

/* ============ PRODUCT ============ */
.product{
  background:#000; color:#fff;
  padding:120px 56px;
  position:relative;
}
.product__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center;
}
.product__visual{
  position:relative;
  aspect-ratio:1/1;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1.5px solid var(--line);
}
.product__visual-bg{ position:absolute; inset:0; pointer-events:none }
.vstripe{ position:absolute; background:var(--yellow); transform:skewX(-30deg); opacity:.85}
.vstripe--a{ width:80%; height:18px; left:10%; top:18% }
.vstripe--b{ width:14px; height:18px; left:96%; top:18% }
.vstripe--c{ width:40%; height:6px; right:6%; bottom:14%; background:#fff; opacity:.7}
.product__hero-img{
  position:relative; z-index:2;
  width:100%; height:100%; object-fit:contain;
}
.product__sticker{
  position:absolute; top:24px; right:24px; z-index:3;
  width:140px; height:140px;
  background:var(--yellow); color:#000;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation:spin 16s linear infinite;
}
.product__sticker svg{ position:absolute; inset:0; width:100%; height:100% }
.product__sticker-core{
  font-family:"Saira",sans-serif; font-weight:900; font-size:20px;
  letter-spacing:-.01em;
  animation:spin 16s linear infinite reverse;
}
@keyframes spin{ to { transform:rotate(360deg) } }

.product__details{ }
.product__title{
  font-family:"Saira",sans-serif; font-weight:900;
  font-size:clamp(40px, 4.5vw, 64px);
  line-height:.95; letter-spacing:-.02em;
  margin:14px 0 14px; text-transform:uppercase;
}
.product__title .dim{ color:var(--yellow); margin:0 .12em }
.product__lede{ color:rgba(255,255,255,.78); font-size:17px; max-width:520px; margin:0 0 28px }
.product__specs{
  list-style:none; padding:0; margin:0 0 32px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--line);
}
.product__specs li{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.product__specs li:nth-child(odd){ padding-right:18px; border-right:1px solid var(--line) }
.product__specs li:nth-child(even){ padding-left:18px }
.product__specs span{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.5)}
.product__specs b{ font-family:"Saira",sans-serif; font-weight:700; font-size:15px}

.product__configurator{ display:flex; flex-direction:column; gap:18px; margin-bottom:32px }
.cfg__row{ display:grid; grid-template-columns:90px 1fr; align-items:center; gap:18px}
.cfg__label{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.55)}
.cfg__options{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  padding:9px 14px;
  background:transparent;
  border:1px solid var(--line);
  color:rgba(255,255,255,.78);
  font-family:"Saira",sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:all .15s ease;
  display:inline-flex; gap:6px; align-items:center;
}
.chip em{ font-style:normal; color:var(--yellow); font-size:11px}
.chip:hover{ border-color:#fff; color:#fff }
.chip[disabled]{
  color:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.08);
  cursor:not-allowed;
  position:relative;
}
.chip[disabled]:hover{ border-color:rgba(255,255,255,.08); color:rgba(255,255,255,.32) }
.chip[disabled][data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--yellow);
  color:#000;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:5px 10px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
}
.chip[disabled][data-tooltip]::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid var(--yellow);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:9999;
}
.chip[disabled]:hover::after,
.chip[disabled]:hover::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.chip.is-selected{ background:var(--yellow); color:#000; border-color:var(--yellow)}
.chip.is-selected em{ color:#000 }

.cfg__select{
  width:100%;
  padding:11px 38px 11px 14px;
  background:#0c0c0c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23FFCB27' d='M0 0h12L6 8z'/></svg>") no-repeat right 14px center;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-family:"Saira",sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  outline:none;
  transition:border-color .15s ease;
}
.cfg__select:hover{ border-color:#fff }
.cfg__select:focus{ border-color:var(--yellow) }
.cfg__select option{ background:#0c0c0c; color:#fff }

.product__buy{
  display:flex; align-items:center; gap:22px; justify-content:space-between;
  padding:20px 22px;
  background:#0c0c0c;
  border:1.5px solid var(--line);
}
.product__price{ display:flex; flex-direction:column; gap:2px; line-height:1}
.price__currency{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.5)}
.price__amount{
  font-family:"Saira",sans-serif; font-weight:900;
  font-size:48px; line-height:1;
}
.price__amount::after{ content:" zł"; font-size:24px; font-weight:600; color:var(--yellow)}
.price__sub{ font-size:12px; color:rgba(255,255,255,.5); margin-top:6px}

.product__pay{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  color:rgba(255,255,255,.5);
}
.product__pay i{
  font-style:normal;
  padding:6px 10px;
  border:1px solid var(--line);
  background:#0c0c0c;
  color:rgba(255,255,255,.85);
  font-weight:500;
}

/* ============ RIBBON (yellow stats) ============ */
.ribbon{
  background:var(--yellow);
  color:#000;
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  position:relative;
  overflow:hidden;
}
.ribbon__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:48px 56px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  position:relative; z-index:2;
}
.ribbon__stat{ display:flex; flex-direction:column; gap:6px}
.ribbon__stat b{
  font-family:"Saira",sans-serif; font-weight:900;
  font-size:64px; line-height:.95;
  letter-spacing:-.02em;
}
.ribbon__stat b i{ font-style:normal; font-size:32px}
.ribbon__stat span{ font-size:13px; max-width:200px; line-height:1.4}
.ribbon__slash{
  position:absolute; right:-40px; top:50%; transform:translateY(-50%) skewX(-30deg);
  width:120px; height:80%;
  background:#000;
  opacity:.06;
}

/* ============ INSTALL ============ */
.install{ background:#000; color:#fff; padding-bottom:96px}
.install .section-title{ color:#fff }
.install .section-title .hl{ color:#000 }
.install .section-sub{ color:rgba(255,255,255,.7) }
.steps{
  list-style:none;
  max-width:var(--maxw); margin:0 auto; padding:0 56px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.step{
  position:relative;
  background:#0c0c0c;
  border:1.5px solid var(--line);
  padding:22px;
  transition:border-color .2s ease;
}
.step:hover{ border-color:var(--yellow)}
.step__num{
  font-family:"Saira",sans-serif; font-weight:900;
  font-size:56px; line-height:1; color:var(--yellow);
  letter-spacing:-.02em;
}
.step__idx{
  font-family:"JetBrains Mono",monospace;
  font-size:12px; font-weight:700; letter-spacing:.18em;
  color:var(--yellow);
  margin-right:10px;
  vertical-align:middle;
}
.step--accent .step__idx{ color:#000 }
.step__art{
  margin:0 0 16px;
  background:#070707;
  border:1px solid var(--line);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.step__art svg, .step__art img{ width:100%; height:100%; object-fit:cover; display:block }
.step h4{ font-family:"Saira",sans-serif; font-weight:800; text-transform:uppercase; font-size:20px; margin:0 0 6px}
.step p{ color:rgba(255,255,255,.7); font-size:14px; margin:0}
.step--accent{ background:var(--yellow); color:#000; border-color:#000}
.step--accent .step__num{ color:#000}
.step--accent .step__art{ background:#fffae6; border-color:#000}
.step--accent p{ color:rgba(0,0,0,.78)}

.install__cta{
  max-width:var(--maxw); margin:48px auto 0; padding:0 56px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.install__cta h3{ font-family:"Saira",sans-serif; font-weight:800; font-size:28px; margin:0 0 4px; text-transform:uppercase}
.install__cta p{ color:rgba(255,255,255,.7); margin:0; font-size:15px}

/* ============ MASCOT ============ */
.mascot{
  background:var(--white);
  padding:120px 56px;
}
.mascot{
  max-width:var(--maxw);
  margin:0 auto;
  display:block;
}
.mascot__head{
  max-width:var(--maxw);
  margin:0 0 56px;
}
.mascot__head .section-title{ margin:14px 0 0; max-width:1100px}
.mascot__body{
  display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;
}
.mascot__copy p{ font-size:18px; color:#4a4a44; max-width:560px; margin:0 0 28px }
.mascot__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0}
.mascot__list li{
  display:grid; grid-template-columns:64px 1fr; align-items:center;
  border-top:1px solid #e3e1d3; padding:14px 0;
}
.mascot__list li:last-child{ border-bottom:1px solid #e3e1d3}
.mascot__list i{
  font-family:"JetBrains Mono",monospace; font-style:normal;
  font-size:14px; font-weight:700; letter-spacing:.1em;
  color:var(--yellow);
  background:#000;
  padding:6px 10px;
  display:inline-block; width:fit-content;
}
.mascot__list span{ font-family:"Saira",sans-serif; font-weight:600; font-size:18px}
.mascot__art{
  background:#000;
  border:6px solid #000;
  outline:14px solid var(--yellow);
  outline-offset:-14px;
  padding:0;
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
}
.mascot__stage{
  position:absolute; inset:0;
  background:#faf9f4;
}
.mascot__bg{
  position:absolute; inset:0; width:100%; height:100%;
}
.mascot__bot{
  position:absolute;
  bottom:-2%;
  left:50%;
  transform:translateX(-50%);
  width:60%;
  height:auto;
  z-index:3;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.18));
  pointer-events:none;
}

/* readouts */
.mascot__readout{
  position:absolute; z-index:4;
  background:#000;
  color:#fff;
  padding:10px 14px;
  display:flex; flex-direction:column;
  gap:2px;
  border:1.5px solid #000;
  min-width:120px;
}
.ro__label{
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  letter-spacing:.18em;
  color:var(--yellow);
  text-transform:uppercase;
}
.ro__value{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:28px;
  line-height:1;
  color:#fff;
  letter-spacing:-.02em;
}
.ro__value i{
  font-style:normal;
  font-size:14px;
  color:var(--yellow);
  margin-left:2px;
}
.ro__value--dark{ color:var(--yellow) }
.ro__sub{
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}
.mascot__readout--top-left{ top:7%; left:6%; }
.mascot__readout--top-right{ top:7%; right:6%; background:var(--yellow); color:#000; border-color:#000}
.mascot__readout--top-right .ro__label{ color:#000 }
.mascot__readout--top-right .ro__value{ color:#000 }
.mascot__readout--top-right .ro__value i{ color:#000 }
.mascot__readout--top-right .ro__sub{ color:rgba(0,0,0,.55) }
.mascot__readout--bottom-left{ bottom:14%; left:5%; }
.mascot__readout--bottom-right{ bottom:14%; right:5%; }

/* connector lines from readouts to mascot */
.mascot__readout::after{
  content:"";
  position:absolute;
  width:8px; height:8px;
  background:var(--yellow);
  border:1.5px solid #000;
}
.mascot__readout--top-left::after{ right:-22px; top:50%; transform:translateY(-50%)}
.mascot__readout--top-right::after{ left:-22px; top:50%; transform:translateY(-50%)}
.mascot__readout--bottom-left::after{ right:-22px; top:50%; transform:translateY(-50%)}
.mascot__readout--bottom-right::after{ left:-22px; top:50%; transform:translateY(-50%)}

/* HIBOT chip / nametag */
.mascot__chip{
  position:absolute; z-index:4;
  top:5%; left:50%; transform:translateX(-50%);
  background:#000;
  color:var(--yellow);
  padding:8px 16px;
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2em;
  display:flex; align-items:center; gap:10px;
  text-transform:uppercase;
}
.mascot__chip i{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  color:#fff;
  padding:3px 8px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
}

/* corner brackets */
.mascot__corner{
  position:absolute; z-index:4;
  width:24px; height:24px;
  border:2px solid #000;
}
.mascot__corner--tl{ top:14px; left:14px; border-right:0; border-bottom:0 }
.mascot__corner--tr{ top:14px; right:14px; border-left:0; border-bottom:0 }
.mascot__corner--bl{ bottom:14px; left:14px; border-right:0; border-top:0 }
.mascot__corner--br{ bottom:14px; right:14px; border-left:0; border-top:0 }

/* bottom ticker */
.mascot__ticker{
  position:absolute; left:0; right:0; bottom:0;
  z-index:5;
  background:#000;
  color:#fff;
  padding:10px 18px;
  display:flex; align-items:center; gap:14px; justify-content:center;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mascot__ticker span:nth-child(1){ color:var(--yellow) }
.mascot__ticker i{
  font-style:normal;
  display:inline-block;
  width:14px; height:6px; background:var(--yellow);
  transform:skewX(-30deg);
}

/* ============ COMPARE ============ */
.compare{ background:var(--paper); padding-bottom:120px}
.compare .section-head{ padding-bottom:24px }
.compare__table{
  max-width:var(--maxw); margin:0 auto; padding:0 56px;
}
.compare__row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid #d8d6c8;
  font-size:15px;
}
.compare__row > span{ padding:0 14px}
.compare__row > span:first-child{ font-family:"Saira",sans-serif; font-weight:600; text-transform:uppercase; font-size:13px; letter-spacing:.06em; color:#3a3a34}
.compare__row--head > *{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#000;
}
.compare__row--head{ background:#000; color:#fff }
.compare__row--head > span{ padding:14px}
.compare__row--head > span:first-child{ color:#fff; font-size:11px; letter-spacing:.16em}
.col-mark{ background:var(--yellow); color:#000; display:flex; flex-direction:column; line-height:1.2}
.col-mark b{ font-family:"Saira",sans-serif; font-size:14px}
.col-mark i{ font-family:"JetBrains Mono",monospace; font-style:normal; font-size:10px; opacity:.7}
.col-other{ color:rgba(255,255,255,.7) !important}
.compare__row .ok{ color:#000; font-weight:700}
.compare__row .ok b{ font-family:"Saira",sans-serif; font-size:22px; font-weight:800; background:var(--yellow); padding:0 8px; transform:skewX(-6deg); display:inline-block}

/* ============ REVIEWS ============ */
.reviews{ background:var(--white); padding-bottom:120px }
.reviews__grid{
  max-width:var(--maxw); margin:0 auto; padding:0 56px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.review{
  background:#fafaf6;
  border:1.5px solid #eceadd;
  padding:28px;
  display:flex; flex-direction:column;
}
.review__stars{ color:var(--yellow); font-size:20px; letter-spacing:2px; margin-bottom:16px;
  -webkit-text-stroke:0.5px #000;
}
.review h4{ font-family:"Saira",sans-serif; font-weight:800; font-size:22px; margin:0 0 10px; letter-spacing:-.01em}
.review p{ color:#4a4a44; font-size:15px; margin:0 0 24px}
.review footer{ margin-top:auto; padding-top:18px; border-top:1px solid #e3e1d3; font-size:13px}
.review footer b{ font-family:"Saira",sans-serif; font-weight:700 }
.review footer span{ color:#86857d; margin-left:4px}
.review--featured{ background:#000; color:#fff; border-color:#000}
.review--featured h4{ color:#fff }
.review--featured p{ color:rgba(255,255,255,.78)}
.review--featured footer{ border-top-color:var(--line)}
.review--featured footer span{ color:rgba(255,255,255,.55)}
.review--featured .review__stars{ -webkit-text-stroke:0.5px var(--yellow) }

/* ============ FAQ ============ */
.faq{
  background:#000; color:#fff;
  padding:120px 56px;
}
.faq__head{ max-width:var(--maxw); margin:0 auto 40px}
.faq .section-title{ color:#fff }
.faq__list{ max-width:900px; margin:0 auto; border-top:1px solid var(--line)}
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer;
  padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:"Saira",sans-serif; font-weight:700; font-size:20px;
  text-transform:uppercase; letter-spacing:-.01em;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary i{
  font-style:normal; color:var(--yellow);
  font-family:"Saira",sans-serif; font-weight:700; font-size:24px;
  width:36px; height:36px; border:1.5px solid var(--yellow);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .2s ease, color .2s ease;
  flex-shrink:0;
}
.faq details[open] summary i{ background:var(--yellow); color:#000; transform:rotate(45deg)}
.faq details[open] summary{ color:var(--yellow)}
.faq details p{ margin:0 0 22px; color:rgba(255,255,255,.72); font-size:16px; max-width:780px}
.faq details em{ font-style:normal; color:var(--yellow); font-family:"JetBrains Mono",monospace; font-size:14px}

/* ============ CTA ============ */
.cta{
  position:relative;
  background:var(--yellow);
  color:#000;
  padding:120px 56px;
  text-align:center;
  overflow:hidden;
}
.cta__bg{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(60deg, transparent 0 80px, rgba(0,0,0,.04) 80px 88px);
  pointer-events:none;
}
.cta h2{
  position:relative;
  font-family:"Saira",sans-serif; font-weight:900;
  font-size:clamp(40px, 7vw, 112px);
  line-height:.92; letter-spacing:-.02em;
  margin:0 0 36px;
  text-transform:uppercase;
}
.cta__actions{ position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.cta__fine{
  position:relative; margin-top:28px;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.18em;
  color:rgba(0,0,0,.7);
}

/* ============ FOOTER ============ */
.footer{
  background:#000; color:#fff;
  padding:80px 56px 32px;
}
.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.2fr 2fr; gap:64px;
  padding-bottom:48px; border-bottom:1px solid var(--line);
}
.footer__brand p{ color:rgba(255,255,255,.6); font-size:14px; line-height:1.6 }
.footer__mail{ font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.06em; color:var(--yellow) !important}
.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.footer__cols h5{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em;
  color:var(--yellow); margin:0 0 16px; text-transform:uppercase;
}
.footer__cols a{
  display:block; padding:6px 0;
  font-family:"Saira",sans-serif; font-weight:500; font-size:14px;
  color:rgba(255,255,255,.7); letter-spacing:.02em;
}
.footer__cols a:hover{ color:#fff }
.footer__news{ font-size:13px; color:rgba(255,255,255,.6); margin:0 0 12px}
.footer__form{
  display:grid; grid-template-columns:1fr auto; gap:0;
  position:relative;
}
.footer__form input{
  background:transparent;
  border:1px solid var(--line);
  border-right:0;
  padding:10px 12px;
  color:#fff;
  font-family:"Space Grotesk",sans-serif;
  font-size:13px;
  outline:none;
}
.footer__form input:focus{ border-color:var(--yellow)}
.footer__form button{
  background:var(--yellow); color:#000;
  padding:0 14px;
  font-weight:700;
  transition:background .15s ease;
}
.footer__form button:hover{ background:#fff }
.footer__form-ok{
  position:absolute; left:0; top:100%; padding-top:8px;
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--yellow); letter-spacing:.16em;
}
.footer__form.is-disabled{
  cursor:not-allowed;
}
.footer__form.is-disabled input,
.footer__form.is-disabled button{
  pointer-events:none;
  color:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.08);
}
.footer__form.is-disabled input::placeholder{ color:rgba(255,255,255,.25)}
.footer__form.is-disabled button{
  background:rgba(255,203,39,.25);
  color:rgba(0,0,0,.45);
}
.footer__form.is-disabled[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--yellow);
  color:#000;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:5px 10px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
}
.footer__form.is-disabled[data-tooltip]::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid var(--yellow);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:9999;
}
.footer__form.is-disabled:hover::after,
.footer__form.is-disabled:hover::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.footer__bottom{
  max-width:var(--maxw); margin:24px auto 0;
  display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em;
  color:rgba(255,255,255,.5); text-transform:uppercase;
}
.footer__legal{ display:flex; gap:18px; justify-content:center }
.footer__legal a:hover{ color:var(--yellow) }
.footer__made{ text-align:right; color:var(--yellow)}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .hero__row, .product__inner, .footer__top{ grid-template-columns:1fr; gap:48px}
  .mascot__body{ grid-template-columns:1fr; gap:48px }
  .features__grid, .ribbon__inner, .reviews__grid, .footer__cols{ grid-template-columns:repeat(2,1fr)}
  .hero__bottombar{ grid-template-columns:repeat(2,1fr); }
  .hero__bottombar-item:nth-child(2){ border-right:0 }
  .hero__bottombar-item:nth-child(1), .hero__bottombar-item:nth-child(2){ border-bottom:1px solid var(--line)}
  .steps{ grid-template-columns:repeat(2,1fr)}
  .compare__row{ grid-template-columns:1.2fr 1fr 1fr 1fr }
  .footer__bottom{ grid-template-columns:1fr; text-align:center }
  .footer__legal, .footer__made{ justify-content:center; text-align:center }
  .nav__links{ display:none }
}
@media (max-width:720px){
  .section-head, .features__grid, .steps, .install__cta, .ribbon__inner, .reviews__grid, .product, .mascot, .faq, .cta, .footer{
    padding-left:24px; padding-right:24px;
  }
  .hero{ padding:60px 24px 48px }
  .nav{ padding:14px 24px; grid-template-columns:auto 1fr }
  .nav__phone{ display:none }
  .features__grid, .reviews__grid, .footer__cols, .ribbon__inner, .steps{ grid-template-columns:1fr }
  .hero__bottombar{ grid-template-columns:1fr; }
  .hero__bottombar-item{ border-right:0; border-bottom:1px solid var(--line)}
  .compare__row{ grid-template-columns:1fr 1fr; row-gap:6px}
  .compare__row > span:first-child{ grid-column:1/-1; margin-bottom:6px}
  .col-other{ display:none !important }
  .cfg__row{ grid-template-columns:1fr; gap:8px }
  .product__buy{ flex-direction:column; align-items:stretch}
  .hero__badge{ width:108px; height:108px; right:-8px; top:-32px}
  .hero__badge-num{ font-size:34px}
}


/* ====== LEGAL / SUBPAGES ====== */
/* ===== LEGAL / SUBPAGE STYLES ===== */

.legal-hero{
  background:#000;
  color:#fff;
  padding:80px 56px 80px;
  position:relative;
  overflow:hidden;
}
.legal-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/80px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/100% 80px;
  mask-image:radial-gradient(ellipse at left center, #000 30%, transparent 70%);
}
.legal-hero::after{
  content:"";
  position:absolute;
  top:30%;
  right:-60px;
  width:300px;
  height:14px;
  background:var(--yellow);
  transform:skewX(-30deg);
}
.legal-hero__inner{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
}
.legal-hero__title{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:clamp(52px, 8vw, 120px);
  line-height:.92;
  letter-spacing:-.03em;
  margin:14px 0 28px;
  text-transform:uppercase;
}
.legal-hero__title .hl{
  background:var(--yellow);
  color:#000;
  padding:0 .15em;
  display:inline-block;
  transform:skewX(-6deg);
}
.legal-hero__meta{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
  margin:0;
}
.legal-hero__meta .dash{
  display:inline-block;
  width:24px; height:6px;
  background:var(--yellow);
  transform:skewX(-30deg);
}

/* ===== LAYOUT ===== */
.legal{
  background:var(--paper);
  padding:80px 56px 120px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:80px;
  max-width:var(--maxw);
  margin:0 auto;
  align-items:start;
}

/* ===== TOC ===== */
.legal__toc{
  position:sticky;
  top:90px;
  align-self:start;
}
.legal__toc .kicker{ color:#86857d; margin-bottom:18px; display:block }
.legal__toc ol{
  list-style:none;
  padding:0; margin:0;
  border-top:1px solid #d8d6c8;
  counter-reset:tocn;
}
.legal__toc li{
  counter-increment:tocn;
  border-bottom:1px solid #d8d6c8;
}
.legal__toc a{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:12px 0;
  font-family:"Saira",sans-serif;
  font-weight:600;
  font-size:14px;
  color:#3a3a34;
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:color .15s ease, padding .2s ease;
}
.legal__toc a::before{
  content:counter(tocn, decimal-leading-zero);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  font-weight:700;
  color:#86857d;
  letter-spacing:.14em;
  min-width:22px;
}
.legal__toc a:hover{
  color:#000;
  padding-left:6px;
}
.legal__toc a:hover::before{ color:var(--yellow) }

/* ===== DOC ===== */
.legal__doc{
  max-width:780px;
}
.legal__lead{
  border-left:4px solid var(--yellow);
  padding:6px 0 6px 24px;
  margin-bottom:64px;
}
.legal__lead p{
  font-family:"Saira",sans-serif;
  font-weight:500;
  font-size:22px;
  line-height:1.4;
  color:#1a1a1a;
  margin:0;
  letter-spacing:-.005em;
}

.legal__section{
  scroll-margin-top:120px;
  padding:32px 0;
  border-top:1px solid #d8d6c8;
}
.legal__section:first-of-type{ border-top:0; padding-top:0 }
.legal__section h2{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 18px;
  display:flex;
  align-items:baseline;
  gap:18px;
}
.legal__num{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--yellow);
  background:#000;
  padding:6px 10px;
  align-self:center;
}
.legal__section p{
  font-size:16px;
  line-height:1.65;
  color:#3a3a34;
  margin:0 0 16px;
}
.legal__section p:last-child{ margin-bottom:0 }
.legal__section em{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:14px;
  color:#000;
  background:var(--yellow);
  padding:2px 6px;
}

.legal__list{
  list-style:none;
  padding:0; margin:0 0 20px;
}
.legal__list li{
  position:relative;
  padding:10px 0 10px 30px;
  font-size:16px;
  line-height:1.6;
  color:#3a3a34;
  border-bottom:1px dashed #d8d6c8;
}
.legal__list li:last-child{ border-bottom:0 }
.legal__list li::before{
  content:"";
  position:absolute;
  left:0; top:18px;
  width:14px; height:4px;
  background:var(--yellow);
  transform:skewX(-30deg);
}
.legal__list li b{
  font-family:"Saira",sans-serif;
  font-weight:700;
  color:#000;
  letter-spacing:.01em;
}

/* ===== BOX (admin) ===== */
.legal__box{
  background:#000;
  color:#fff;
  padding:24px 28px;
  margin:18px 0 22px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  overflow:hidden;
}
.legal__box::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:60px; height:60px;
  background:var(--yellow);
  transform:skewX(-30deg) translateX(20px);
}
.legal__box b{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:18px;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.legal__box span{
  font-size:15px;
  color:rgba(255,255,255,.75);
}
.legal__box-mail{
  font-family:"JetBrains Mono",monospace;
  font-size:14px;
  color:var(--yellow) !important;
  letter-spacing:.04em;
  margin-top:8px;
}

.legal__note{
  background:#fffae6;
  border:1px solid #f0e08a;
  padding:14px 18px;
  font-size:14px;
  color:#3a3a34;
  margin:18px 0 0;
}

/* ===== TABLE ===== */
.legal__table{
  margin:18px 0 0;
  border:1.5px solid #000;
}
.legal__table-row{
  display:grid;
  grid-template-columns:2.2fr 2fr 1fr;
  gap:0;
  border-bottom:1px solid #d8d6c8;
  font-size:14px;
  line-height:1.4;
}
.legal__table-row:last-child{ border-bottom:0 }
.legal__table-row span{
  padding:12px 14px;
  border-right:1px solid #d8d6c8;
}
.legal__table-row span:last-child{ border-right:0 }
.legal__table-row--head{
  background:#000;
  color:var(--yellow);
}
.legal__table-row--head span{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  border-right-color:rgba(255,255,255,.15);
}

/* ===== RIGHTS GRID ===== */
.legal__rights{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin:24px 0 0;
}
.legal__right{
  background:#fff;
  border:1.5px solid #d8d6c8;
  padding:18px 18px 16px;
  transition:border-color .15s ease, transform .15s ease;
}
.legal__right:hover{
  border-color:#000;
  transform:translateY(-2px);
}
.legal__right .r__num{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:#86857d;
  display:block;
  margin-bottom:10px;
}
.legal__right b{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.01em;
  display:block;
  margin-bottom:6px;
}
.legal__right p{
  font-size:13px;
  line-height:1.5;
  color:#54534c;
  margin:0;
}

/* ===== CONTACT ===== */
.legal__contact{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--yellow);
  padding:24px 28px;
  margin-top:12px;
}
.legal__contact a{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:24px;
  color:#000;
  text-decoration:none;
  letter-spacing:-.01em;
  border-bottom:2px solid #000;
  align-self:start;
  padding-bottom:2px;
}
.legal__contact a:hover{ border-bottom-style:dashed }
.legal__contact span{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.7);
}

/* ===== BACK ===== */
.legal__back{
  display:inline-block;
  margin-top:60px;
  padding:14px 22px;
  background:#000;
  color:#fff;
  font-family:"Saira",sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border:1.5px solid #000;
  transition:background .15s ease, color .15s ease;
}
.legal__back:hover{
  background:var(--yellow);
  color:#000;
}

/* ===== STEPS (numbered card grid, used on Regulamin order flow) ===== */
.legal__steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin:18px 0 22px;
}
.legal__step{
  background:#fff;
  border:1.5px solid #d8d6c8;
  padding:16px 16px 14px;
  transition:border-color .15s ease, transform .15s ease;
}
.legal__step:hover{ border-color:#000; transform:translateY(-2px); }
.legal__step .r__num{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:#86857d;
  display:block;
  margin-bottom:8px;
}
.legal__step b{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:15px;
  text-transform:uppercase;
  display:block;
  margin-bottom:6px;
}
.legal__step p{
  font-size:13px;
  line-height:1.45;
  color:#54534c;
  margin:0;
}
@media (max-width:980px){
  .legal__steps{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:600px){
  .legal__steps{ grid-template-columns:1fr }
}

/* ====================================================
   INSTRUKCJA MONTAŻU — Installation subpage
==================================================== */

.ins-hero{
  position:relative;
  background:#000;
  color:#fff;
  padding:100px 56px 80px;
  overflow:hidden;
  isolation:isolate;
}
.ins-hero__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/80px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/100% 80px;
  mask-image:radial-gradient(ellipse at left center, #000 30%, transparent 80%);
  z-index:-1;
}
.ins-hero__stripe{
  position:absolute;
  background:var(--yellow);
  height:14px;
  transform:skewX(-30deg);
  z-index:-1;
}
.ins-hero__stripe--1{ top:18%; right:-60px; width:280px }
.ins-hero__stripe--2{ top:21%; right:-60px; width:200px; transform:translateX(-180px) skewX(-30deg) }
.ins-hero__inner{ max-width:var(--maxw); margin:0 auto }
.ins-hero__title{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:clamp(40px, 7vw, 112px);
  line-height:.94;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:18px 0 32px;
  max-width:1100px;
}
.ins-hero__title .line{ display:block }
.ins-hero__title .line--accent{ color:var(--yellow) }
.ins-hero__title .line--outline{
  -webkit-text-stroke:2px #fff;
  color:transparent;
}
.ins-hero__lede{
  max-width:680px;
  font-size:18px; line-height:1.55;
  color:rgba(255,255,255,.82);
  margin:0 0 48px;
}
.ins-hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
  margin-top:32px;
}
.ins-hero__stat{
  padding:24px 18px 4px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.ins-hero__stat:last-child{ border-right:0 }
.ins-hero__stat b{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:48px;
  line-height:1;
  letter-spacing:-.02em;
}
.ins-hero__stat b i{
  font-style:normal;
  font-size:18px;
  color:var(--yellow);
  margin-left:2px;
}
.ins-hero__stat span{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}

/* ============ PREP ============ */
.ins-prep{ background:var(--paper); padding:120px 56px }
.ins-prep__inner{ max-width:var(--maxw); margin:0 auto }
.ins-prep .section-title{ margin-top:14px; margin-bottom:48px; max-width:900px }
.ins-prep__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.ins-prep__card{
  background:#fff;
  border:1.5px solid #d8d6c8;
  padding:28px 24px;
  display:flex; flex-direction:column;
  min-height:240px;
  transition:transform .2s ease, border-color .2s ease;
}
.ins-prep__card:hover{
  transform:translateY(-4px);
  border-color:#000;
}
.ins-prep__num{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.2em;
  color:var(--yellow);
  background:#000;
  padding:5px 10px;
  align-self:start;
  margin-bottom:24px;
  font-weight:700;
}
.ins-prep__card h3{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:1.15;
  margin:0 0 10px;
}
.ins-prep__card p{
  font-size:14px;
  line-height:1.55;
  color:#54534c;
  margin:0;
}

/* ============ STEPS ============ */
.ins-steps{ background:#000; color:#fff; padding:120px 56px }
.ins-steps__head{ max-width:var(--maxw); margin:0 auto 64px }
.ins-steps .section-title{ color:#fff; margin-top:14px; max-width:1000px }
.ins-steps .section-title .hl{ color:#000 }
.ins-steps .section-sub{ color:rgba(255,255,255,.7); margin-top:16px }

.ins-steps__list{
  list-style:none; padding:0;
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column;
  gap:0;
  counter-reset:step;
}
.ins-step{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:center;
  padding:48px 0;
  border-bottom:1px solid var(--line);
}
.ins-step:last-child{ border-bottom:0 }
.ins-step:nth-child(even){ grid-template-columns:1.2fr 1fr }
.ins-step:nth-child(even) .ins-step__media{ order:2 }
.ins-step:nth-child(even) .ins-step__body{ order:1 }

.ins-step__media{
  background:#0c0c0c;
  border:1.5px solid var(--line);
  aspect-ratio:1/1;
  overflow:hidden;
  position:relative;
}
.ins-step__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ins-step__head{
  display:flex; align-items:center; gap:16px;
  margin-bottom:14px;
}
.ins-step__num{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:48px;
  line-height:.95;
  color:var(--yellow);
  letter-spacing:-.02em;
}
.ins-step__time{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--yellow);
  background:rgba(255,203,39,.12);
  padding:6px 12px;
  border:1px solid rgba(255,203,39,.4);
  text-transform:uppercase;
  font-weight:700;
}
.ins-step__body h3{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:0 0 16px;
}
.ins-step__body p{
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0 0 20px;
}
.ins-step__body em{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  background:var(--yellow); color:#000;
  padding:1px 8px;
  letter-spacing:.06em;
}
.ins-step__tips{
  list-style:none; padding:0; margin:0;
  border-left:3px solid var(--yellow);
}
.ins-step__tips li{
  padding:8px 0 8px 16px;
  font-size:14px;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}
.ins-step__tips b{
  font-family:"Saira",sans-serif;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:13px;
  margin-right:6px;
}

.ins-step--accent .ins-step__media{
  border-color:var(--yellow);
  outline:3px solid var(--yellow);
  outline-offset:-3px;
}
.ins-step--accent .ins-step__num{ color:var(--yellow) }

.ins-steps__done{
  max-width:var(--maxw); margin:64px auto 0;
  background:var(--yellow);
  color:#000;
  padding:40px 48px;
  display:flex; flex-direction:column;
  align-items:start;
  gap:8px;
  position:relative;
  overflow:hidden;
}
.ins-steps__done::after{
  content:"";
  position:absolute;
  top:0; right:-40px;
  width:120px; height:100%;
  background:repeating-linear-gradient(60deg, transparent 0 16px, rgba(0,0,0,.08) 16px 18px);
}
.ins-steps__done .kicker{ color:#000; background:#000; color:var(--yellow); padding:4px 10px }
.ins-steps__done h3{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:clamp(24px, 3vw, 36px);
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:8px 0 0;
  max-width:780px;
}
.ins-steps__done p{
  font-size:15px; line-height:1.55;
  color:rgba(0,0,0,.75);
  margin:6px 0 0;
  max-width:680px;
}

/* ============ TROUBLE ============ */
.ins-trouble{ background:var(--paper); padding:120px 56px }
.ins-trouble__head{ max-width:var(--maxw); margin:0 auto 48px }
.ins-trouble .section-title{ margin-top:14px; max-width:1000px }
.ins-trouble .section-sub{ margin-top:16px }
.ins-trouble__list{ max-width:980px; margin:0 auto; border-top:1.5px solid #000 }
.ins-trouble details{
  border-bottom:1px solid #d8d6c8;
  background:#fff;
}
.ins-trouble summary{
  list-style:none;
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 26px;
  font-family:"Saira",sans-serif;
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:-.005em;
  transition:background .15s ease;
}
.ins-trouble summary::-webkit-details-marker{ display:none }
.ins-trouble summary i{
  font-style:normal;
  font-family:"Saira",sans-serif;
  font-weight:700;
  font-size:22px;
  width:34px; height:34px;
  border:1.5px solid #000;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .2s ease, color .2s ease;
  flex-shrink:0;
}
.ins-trouble details[open] summary i{ background:var(--yellow); transform:rotate(45deg) }
.ins-trouble details[open] summary{ background:#fffae6 }
.ins-trouble__body{
  padding:0 26px 26px;
}
.ins-trouble__body p{
  font-size:15px; line-height:1.6; color:#3a3a34;
  margin:0 0 12px;
}
.ins-trouble__body p:last-child{ margin-bottom:0 }
.ins-trouble__body b{
  font-family:"Saira",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#000;
  margin-right:6px;
  font-size:14px;
}
.ins-trouble__body em{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  background:#000; color:var(--yellow);
  padding:1px 6px;
}

/* ============ CARE ============ */
.ins-care{ background:#000; color:#fff; padding:120px 56px }
.ins-care__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:64px;
  align-items:center;
}
.ins-care .section-title{ color:#fff; margin-top:14px; max-width:600px }
.ins-care .section-title .hl{ color:#000 }
.ins-care__copy > p{
  font-size:17px; line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:580px;
  margin:14px 0 32px;
}
.ins-care__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0 }
.ins-care__list li{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:18px;
  align-items:start;
  padding:18px 0;
  border-top:1px solid var(--line);
}
.ins-care__list li:last-child{ border-bottom:1px solid var(--line) }
.ins-care__list i{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  color:#000;
  background:var(--yellow);
  padding:6px 10px;
  display:inline-block;
  width:fit-content;
}
.ins-care__list b{
  display:block;
  font-family:"Saira",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:18px;
  letter-spacing:-.005em;
  margin-bottom:4px;
}
.ins-care__list p{
  font-size:14px;
  color:rgba(255,255,255,.7);
  line-height:1.55;
  margin:0;
}

.ins-care__stat{
  display:flex; flex-direction:column;
  gap:16px;
  align-self:start;
  position:sticky;
  top:90px;
}
.ins-care__big{
  background:var(--yellow);
  color:#000;
  padding:36px 36px 32px;
  display:flex; flex-direction:column;
  gap:4px;
  position:relative;
  overflow:hidden;
  border:1.5px solid #000;
}
.ins-care__big::before{
  content:"";
  position:absolute;
  top:0; right:-40px;
  width:120px; height:100%;
  background:repeating-linear-gradient(60deg, transparent 0 16px, rgba(0,0,0,.08) 16px 18px);
}
.ins-care__label{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:#000;
}
.ins-care__big b{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:140px;
  line-height:.85;
  letter-spacing:-.04em;
  color:#000;
}
.ins-care__unit{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ins-care__note{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.65);
  margin:0;
  padding:14px 18px;
  border:1px dashed var(--line);
}

@media (max-width:1100px){
  .ins-hero__stats,
  .ins-prep__grid{ grid-template-columns:repeat(2,1fr); gap:16px }
  .ins-hero__stat:nth-child(2){ border-right:0 }
  .ins-hero__stat:nth-child(1), .ins-hero__stat:nth-child(2){ border-bottom:1px solid var(--line)}
  .ins-step, .ins-step:nth-child(even){
    grid-template-columns:1fr;
    gap:24px;
  }
  .ins-step:nth-child(even) .ins-step__media{ order:0 }
  .ins-step:nth-child(even) .ins-step__body{ order:0 }
  .ins-care__inner{ grid-template-columns:1fr; gap:40px }
  .ins-care__stat{ position:static }
}
@media (max-width:680px){
  .ins-hero, .ins-prep, .ins-steps, .ins-trouble, .ins-care{
    padding-left:24px; padding-right:24px;
  }
  .ins-hero__stats{ grid-template-columns:1fr }
  .ins-hero__stat{ border-right:0; border-bottom:1px solid var(--line)}
  .ins-prep__grid{ grid-template-columns:1fr }
  .ins-step__body h3{ font-size:24px }
  .ins-care__big b{ font-size:96px }
  .ins-steps__done{ padding:32px 24px }
}

/* ============ BRAND COLLAGE ============ */
.abt-collage{
  background:#000;
  color:#fff;
  padding:0;
  position:relative;
  overflow:hidden;
}
.abt-collage__strip{
  background:var(--yellow);
  color:#000;
  padding:14px 0;
  overflow:hidden;
  display:flex;
  gap:36px;
  white-space:nowrap;
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:24px;
  letter-spacing:.04em;
  text-transform:uppercase;
  animation:tick 22s linear infinite;
}
.abt-collage__strip--rev{ animation-direction:reverse }
.abt-collage__strip span{
  display:inline-flex; align-items:center; gap:18px;
}
.abt-collage__strip i{
  font-style:normal;
  display:inline-block;
  width:32px; height:14px;
  background:#000;
  transform:skewX(-30deg);
}
.abt-collage__grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-template-rows:280px 280px;
  gap:0;
}
.abt-tile{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:#0c0c0c;
}
.abt-tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.abt-tile:hover img{ transform:scale(1.04) }
.abt-tile figcaption{
  position:absolute;
  left:18px; bottom:18px; right:18px;
  display:flex; align-items:flex-end; gap:12px;
  pointer-events:none;
}
.abt-tile figcaption span{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:#000;
  background:var(--yellow);
  padding:5px 9px;
  align-self:flex-start;
}
.abt-tile figcaption p{
  font-family:"Saira",sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  color:#fff;
  margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  text-transform:uppercase;
  line-height:1.25;
}

/* tile layout (6 cols x 2 rows) */
.abt-tile--a{ grid-column:1 / span 2; grid-row:1 }
.abt-tile--b{ grid-column:3 / span 2; grid-row:1 }
.abt-tile--c{ grid-column:5 / span 2; grid-row:1; background:var(--yellow); color:#000 }
.abt-tile--d{ grid-column:1 / span 2; grid-row:2 }
.abt-tile--e{ grid-column:3 / span 2; grid-row:2 }
.abt-tile--f{ grid-column:5 / span 2; grid-row:2; background:#FFCB27 }

/* stat tile */
.abt-tile__stat{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:32px 36px;
  gap:8px;
}
.abt-tile__stat b{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:clamp(120px, 14vw, 200px);
  line-height:.85;
  letter-spacing:-.04em;
  color:#000;
}
.abt-tile__stat span{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.2em;
  color:#000;
  font-weight:700;
  line-height:1.4;
}
.abt-tile__stat-line{
  position:absolute;
  right:-30px; top:50%;
  width:90px; height:14px;
  background:#000;
  transform:translateY(-50%) skewX(-30deg);
}

/* quote tile */
.abt-tile--f{ background:#0c0c0c }
.abt-tile__quote{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center;
  padding:32px 36px;
  gap:16px;
}
.abt-tile__quote i{
  font-style:normal;
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:80px;
  line-height:.4;
  color:var(--yellow);
}
.abt-tile__quote p{
  font-family:"Saira",sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  color:#fff;
  margin:0;
  letter-spacing:-.01em;
}
.abt-tile__quote small{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--yellow);
}

@media (max-width:980px){
  .abt-collage__grid{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:auto;
  }
  .abt-tile--a, .abt-tile--b, .abt-tile--c,
  .abt-tile--d, .abt-tile--e, .abt-tile--f{
    grid-column:auto;
    grid-row:auto;
    aspect-ratio:1/1;
  }
}
@media (max-width:600px){
  .abt-collage__grid{ grid-template-columns:1fr }
  .abt-collage__strip{ font-size:18px }
}

.abt-hero{
  position:relative;
  background:#000;
  color:#fff;
  padding:100px 56px 80px;
  overflow:hidden;
  isolation:isolate;
}
.abt-hero__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/80px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/100% 80px;
  mask-image:radial-gradient(ellipse at left center, #000 30%, transparent 80%);
  z-index:-1;
}
.abt-hero__stripe{
  position:absolute;
  background:var(--yellow);
  height:14px;
  transform:skewX(-30deg);
  z-index:-1;
}
.abt-hero__stripe--1{ top:18%; right:-60px; width:280px }
.abt-hero__stripe--2{ top:21%; right:-60px; width:200px; transform:translateX(-180px) skewX(-30deg) }

.abt-hero__inner{
  max-width:var(--maxw);
  margin:0 auto;
}
.abt-hero__title{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:clamp(38px, 6.4vw, 104px);
  line-height:.94;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:18px 0 36px;
  max-width:1100px;
}
.abt-hero__title .line{ display:block }
.abt-hero__title .line--accent{ color:var(--yellow) }
.abt-hero__title .line--outline{
  -webkit-text-stroke:2px #fff;
  color:transparent;
}
.abt-hero__lede{
  max-width:780px;
  font-size:19px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
  margin:0;
}

/* ============ MANIFEST ============ */
.abt-manifest{ background:var(--paper); padding:120px 56px }
.abt-manifest__inner{ max-width:var(--maxw); margin:0 auto }
.abt-manifest .section-title{ max-width:1100px; margin-top:14px; margin-bottom:48px }
.abt-manifest__columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
}
.abt-manifest__columns p{
  font-size:17px;
  line-height:1.65;
  color:#3a3a34;
  margin:0 0 18px;
}
.abt-manifest__columns p:last-child{ margin-bottom:0 }

/* ============ NUMBERS BAND ============ */
.abt-numbers{
  background:#000;
  color:#fff;
  border-top:2px solid var(--yellow);
  border-bottom:2px solid var(--yellow);
}
.abt-numbers__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:48px 56px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.abt-num{
  padding:0 24px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.abt-num:first-child{ padding-left:0 }
.abt-num:last-child{ border-right:0 }
.abt-num__label{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--yellow);
  text-transform:uppercase;
}
.abt-num__value{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:64px;
  line-height:1;
  letter-spacing:-.02em;
}
.abt-num__value i{
  font-style:normal;
  font-size:24px;
  color:var(--yellow);
  margin-left:4px;
}
.abt-num__sub{
  font-size:13px;
  color:rgba(255,255,255,.55);
  margin-top:4px;
}

/* ============ PILLARS ============ */
.abt-pillars{ background:var(--white); padding:120px 56px }
.abt-pillars__head{ max-width:var(--maxw); margin:0 auto 48px }
.abt-pillars .section-title{ margin-top:14px; max-width:1100px }
.abt-pillars__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.abt-pillar{
  background:#fafaf6;
  border:1.5px solid #eceadd;
  padding:32px 26px;
  display:flex; flex-direction:column;
  min-height:340px;
  transition:transform .2s ease, border-color .2s ease;
}
.abt-pillar:hover{ transform:translateY(-4px); border-color:#000 }
.abt-pillar__num{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.2em;
  color:var(--yellow);
  background:#000;
  padding:5px 10px;
  align-self:start;
  margin-bottom:30px;
  font-weight:700;
}
.abt-pillar h3{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:22px;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:0 0 14px;
}
.abt-pillar p{
  font-size:14px;
  line-height:1.55;
  color:#54534c;
  margin:0;
}
.abt-pillar--accent{
  background:var(--yellow);
  border-color:#000;
}
.abt-pillar--accent .abt-pillar__num{ background:#000; color:var(--yellow)}
.abt-pillar--accent p{ color:rgba(0,0,0,.78)}

/* ============ TEAM (HIBOT) ============ */
.abt-team{
  background:var(--paper);
  padding:120px 56px;
}
.abt-team__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:64px;
  align-items:center;
}
.abt-team__copy .section-title{
  margin-top:14px;
  margin-bottom:24px;
  font-size:clamp(30px, 4.2vw, 60px);
}
.abt-team__copy p{
  font-size:17px; line-height:1.65; color:#3a3a34; max-width:580px; margin:0 0 18px;
}
.abt-team__copy p:last-child{ margin-bottom:0 }
.abt-team__copy em{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:14px;
  background:#000; color:var(--yellow);
  padding:2px 8px;
  letter-spacing:.1em;
}
.abt-team__art{
  position:relative;
  background:#faf9f4;
  border:1.5px solid #d8d6c8;
  padding:60px 40px 80px;
  aspect-ratio:1/1;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size:40px 40px;
}
.abt-team__art::before{
  content:"";
  position:absolute; left:50%; bottom:60px;
  transform:translateX(-50%);
  width:64%; height:64%;
  background:radial-gradient(circle, rgba(255,203,39,.55), transparent 60%);
}
.abt-team__art img{
  position:relative;
  width:80%; height:auto;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.18));
  z-index:2;
}
.abt-team__chip{
  position:absolute;
  top:24px; left:50%; transform:translateX(-50%);
  background:#000; color:var(--yellow);
  padding:8px 16px;
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  z-index:3;
}
.abt-team__corner{
  position:absolute; z-index:3;
  width:22px; height:22px;
  border:2px solid #000;
}
.abt-team__corner--tl{ top:14px; left:14px; border-right:0; border-bottom:0 }
.abt-team__corner--tr{ top:14px; right:14px; border-left:0; border-bottom:0 }
.abt-team__corner--bl{ bottom:14px; left:14px; border-right:0; border-top:0 }
.abt-team__corner--br{ bottom:14px; right:14px; border-left:0; border-top:0 }

/* ============ TIMELINE ============ */
.abt-timeline{
  background:#000; color:#fff;
  padding:120px 56px;
}
.abt-timeline__head{ max-width:var(--maxw); margin:0 auto 48px }
.abt-timeline .section-title{ color:#fff; margin-top:14px }
.abt-timeline .section-title .hl{ color:#000 }
.abt-timeline__list{
  max-width:var(--maxw); margin:0 auto;
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.abt-event{
  background:#0c0c0c;
  border:1.5px solid var(--line);
  padding:24px 24px 28px;
  position:relative;
  transition:border-color .2s ease;
}
.abt-event:hover{ border-color:var(--yellow) }
.abt-event__date{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--yellow);
  display:block;
  margin-bottom:18px;
}
.abt-event h4{
  font-family:"Saira",sans-serif;
  font-weight:800;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.05;
  margin:0 0 10px;
}
.abt-event p{ font-size:14px; color:rgba(255,255,255,.7); line-height:1.55; margin:0 }
.abt-event p em{
  font-style:italic;
  color:var(--yellow);
}
.abt-event--highlight{
  background:var(--yellow);
  color:#000;
  border-color:#000;
}
.abt-event--highlight .abt-event__date{ color:#000 }
.abt-event--highlight p{ color:rgba(0,0,0,.78) }
.abt-event--highlight p em{ color:#000; background:#000; color:var(--yellow); padding:1px 6px; font-style:normal; font-family:"JetBrains Mono",monospace; font-size:12px}

/* ============ MADE IN PL ============ */
.abt-made{
  background:var(--yellow);
  color:#000;
  padding:120px 56px;
  position:relative;
  overflow:hidden;
}
.abt-made::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(60deg, transparent 0 80px, rgba(0,0,0,.04) 80px 88px);
  pointer-events:none;
}
.abt-made__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.3fr 1fr; gap:64px;
  align-items:center;
  position:relative;
}
.abt-made__title{
  font-family:"Saira",sans-serif;
  font-weight:900;
  font-size:clamp(56px, 8vw, 128px);
  line-height:.9;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:14px 0 28px;
}
.abt-made__title .hl-y{
  background:#000;
  color:var(--yellow);
  padding:0 .15em;
  display:inline-block;
  transform:skewX(-6deg);
}
.abt-made__title .slash{ color:#000 }
.abt-made__copy p{
  font-size:17px;
  line-height:1.6;
  max-width:580px;
  color:rgba(0,0,0,.8);
  margin:0 0 16px;
}
.abt-made__copy em{
  font-style:normal;
  font-family:"JetBrains Mono",monospace;
  font-size:14px;
  background:#000; color:var(--yellow);
  padding:2px 8px;
  letter-spacing:.1em;
}
.abt-made__seal{
  width:100%; max-width:340px; justify-self:end;
  animation:spin 22s linear infinite;
}
.abt-made__seal svg{ width:100%; height:auto }

/* responsive */
@media (max-width:1100px){
  .abt-manifest__columns,
  .abt-team__inner,
  .abt-made__inner{
    grid-template-columns:1fr; gap:40px;
  }
  .abt-numbers__inner,
  .abt-pillars__grid{ grid-template-columns:repeat(2,1fr); gap:24px}
  .abt-num{ border-right:0; padding:0 }
  .abt-num:nth-child(1), .abt-num:nth-child(2){ border-bottom:1px solid var(--line); padding-bottom:24px}
  .abt-timeline__list{ grid-template-columns:repeat(2,1fr)}
  .abt-made__seal{ justify-self:center }
}
@media (max-width:680px){
  .abt-hero, .abt-manifest, .abt-pillars, .abt-team, .abt-timeline, .abt-made{
    padding-left:24px; padding-right:24px;
  }
  .abt-numbers__inner{ grid-template-columns:1fr; padding:32px 24px }
  .abt-num{ border-bottom:1px solid var(--line); padding:16px 0 }
  .abt-num:last-child{ border-bottom:0 }
  .abt-pillars__grid, .abt-timeline__list{ grid-template-columns:1fr }
}
  display:flex; gap:8px; flex-wrap:wrap;
  margin:14px 0 20px;
}
.legal__pay span{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  letter-spacing:.12em;
  font-weight:600;
  text-transform:uppercase;
  padding:8px 14px;
  background:#000;
  color:#fff;
  border:1.5px solid #000;
}
.legal__pay span:nth-child(odd){
  background:transparent;
  color:#000;
}
  .legal__toc{
    position:static;
    background:#fff;
    border:1.5px solid #d8d6c8;
    padding:20px 24px;
  }
  .legal__rights{
    grid-template-columns:1fr;
  }
  .legal__table-row{
    grid-template-columns:1fr;
  }
  .legal__table-row span{
    border-right:0;
    border-bottom:1px solid #d8d6c8;
  }
  .legal__table-row--head{ display:none }
}
@media (max-width:600px){
  .legal-hero{ padding:60px 24px 60px }
  .legal{ padding:48px 24px 80px }
  .legal__section h2{
    font-size:24px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .legal__lead p{ font-size:18px }
}