/* ============================================================
   BOSCO v2 — flat blue / gold, Anonymous Pro
   ============================================================ */

:root{
  --bg:        #1B1B1D;
  --bg-2:      #232326;
  --bg-3:      #151517;
  --ink:       #EDEDF0;
  --ink-2:     #9A9AA2;
  --ink-3:     #63636B;
  --line:      rgba(237,237,240,.15);
  --line-2:    rgba(237,237,240,.08);
  --acc:       #5B9DFF;
  --acc-dim:   rgba(91,157,255,.5);

  --f: 'Anonymous Pro', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1600px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.01em; line-height:1.05; }
p{ margin:0; }

::selection{ background:var(--acc); color:var(--bg); }

/* ---------- shared ---------- */

.tag{
  font-size:11px;
  letter-spacing:.22em;
  color:var(--acc);
  display:block;
}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 24px;
  border:1px solid var(--line);
  font-size:13px; letter-spacing:.06em;
  color:var(--ink);
  background:rgba(232,237,240,.02);
  transition:border-color .35s, background .35s, color .35s;
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .35s; }
.btn:hover{ border-color:var(--acc); color:var(--acc); background:rgba(212,175,98,.07); }
.btn:hover svg{ transform:translateX(4px); }


/* ============ NAV ============ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  mix-blend-mode:difference;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.nav.is-open{ mix-blend-mode:normal; }
.nav.is-hidden{ transform:translateY(-100%); }

.totop{
  position:fixed; z-index:58;
  right:var(--pad); bottom:26px;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none; border:1px solid currentColor;
  color:var(--ink); cursor:pointer;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .4s, transform .4s;
  mix-blend-mode:difference;
}
.totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ transform:translateY(-3px); }
.totop svg{ width:16px; height:16px; }

.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__logo img{ width:24px; height:auto; }
.nav__logo span{ font-weight:700; font-size:15px; letter-spacing:.28em; }

.nav__toggle{
  display:flex; align-items:center; gap:12px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink); font-family:var(--f);
  font-size:12px; letter-spacing:.2em;
}
.nav__toggle-bars{ display:grid; gap:4px; width:20px; }
.nav__toggle-bars i{
  display:block; height:1px; background:currentColor;
  transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.nav.is-open .nav__toggle-bars i:first-child{ transform:translateY(2.5px) rotate(45deg); }
.nav.is-open .nav__toggle-bars i:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

/* ============ MENU ============ */

.menu{
  position:fixed; inset:0; z-index:55;
  background:var(--bg-3);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.menu[hidden]{ display:flex; }
.menu.is-open{ opacity:1; pointer-events:auto; }

.menu__links{ display:grid; gap:clamp(6px,1.2vw,14px); }
.menu__links a{
  display:flex; align-items:baseline; gap:22px;
  font-size:clamp(1.4rem,4.6vw,3.2rem);
  font-weight:400; letter-spacing:-.01em; line-height:1.15;
  color:var(--ink-3);
  transform:translateY(20px); opacity:0;
  transition:color .3s, transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
.menu.is-open .menu__links a{ transform:none; opacity:1; }
.menu__links a:nth-child(1){ transition-delay:.06s }
.menu__links a:nth-child(2){ transition-delay:.12s }
.menu__links a:nth-child(3){ transition-delay:.18s }
.menu__links a:nth-child(4){ transition-delay:.24s }
.menu__links a:nth-child(5){ transition-delay:.30s }
.menu__links a:hover{ color:var(--ink); }
.menu__links em{ font-style:normal; font-size:12px; color:var(--acc); letter-spacing:.14em; }

.menu__meta{
  position:absolute; left:var(--pad); right:var(--pad); bottom:40px;
  display:flex; gap:32px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.16em; color:var(--ink-2);
}
.menu__meta a:hover{ color:var(--acc); }

/* ============ HERO ============ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad) 48px;
  overflow:hidden;
}

.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:0; transform:scale(.94);
  animation:canvasIn 1.6s .15s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes canvasIn{ to{ opacity:1; transform:none; } }

.hero__grid{
  position:relative; z-index:2;
  flex:1;
  width:100%; max-width:1180px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  pointer-events:none;
}

.hero__title{
  display:grid;
  font-size:clamp(1.5rem, 3.7vw, 3.7rem);
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.12;
}
.hero__title--r{ text-align:right; }
.hero__title span{
  opacity:0; transform:translateY(16px);
  animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__title--l span:nth-child(1){ animation-delay:.15s }
.hero__title--l span:nth-child(2){ animation-delay:.24s }
.hero__title--r span:nth-child(1){ animation-delay:.33s }
.hero__title--r span:nth-child(2){ animation-delay:.42s }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; z-index:2;
  width:1px; height:52px; background:var(--line-2); overflow:hidden;
}
.hero__scroll i{
  position:absolute; inset:0; background:var(--acc);
  animation:scrollDot 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes scrollDot{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ============ INTRO ============ */

.intro{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(80px,12vw,180px) var(--pad);
  display:grid; align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,6vw,100px);
}
.intro__col--r{
  display:grid; justify-items:start;
  gap:clamp(24px,3vw,40px);
}
.intro__lead{
  max-width:26ch;
  font-size:clamp(1.15rem,2.4vw,2.1rem);
  line-height:1.45;
  letter-spacing:-.01em;
}
.intro__sub{
  max-width:56ch;
  font-size:clamp(.85rem,1.1vw,.95rem);
  line-height:1.9;
  color:var(--ink-2);
}

/* ---- akordeon usług ---- */

.exp{
  background:#E9E9EC;
  color:#1B1B1D;
  border-radius:30px 30px 0 0;
  padding:clamp(56px,7vw,110px) var(--pad) 0;
  max-width:var(--maxw); margin-inline:auto;
}

.exp__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  padding-bottom:clamp(36px,5vw,72px);
}
.exp .tag{ color:#5B72FF; }
.exp__title{
  margin-top:18px;
  font-size:clamp(1.3rem,3vw,2.6rem);
  line-height:1.18;
}
.exp__more{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.18em;
}
.exp__more i{
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid rgba(27,27,29,.35);
  font-style:normal; font-size:16px;
  transition:background .3s, color .3s, border-color .3s;
}
.exp__more:hover i{ background:#1B1B1D; color:#E9E9EC; border-color:#1B1B1D; }

.exp__panels{
  display:flex;
  height:min(74vh,660px);
  border-radius:4px 4px 0 0;
  overflow:hidden;
}
.exp__panels[data-reveal]{ transform:translateY(72px); }
.exp__panels[data-reveal].is-in{ transform:none; }

.exp__panel{
  position:relative;
  flex:0 0 clamp(64px,6vw,92px);
  background:var(--c);
  color:#EDEDF0;
  overflow:hidden;
  transition:flex .85s cubic-bezier(.2,.7,.2,1);
}
.exp__panel.is-active{ flex:1 1 auto; }

.exp__tab{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding:22px 0;
  background:none; border:0; cursor:pointer;
  color:inherit; font-family:var(--f);
  opacity:1; transition:opacity .35s;
}
.exp__panel.is-active .exp__tab{ opacity:0; pointer-events:none; }
.exp__tab i{ font-style:normal; font-size:18px; line-height:1; }
.exp__vert{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:12px; letter-spacing:.2em;
  white-space:nowrap;
}

.exp__body{
  position:relative; z-index:1;
  height:100%;
  min-width:min(600px,64vw);
  padding:clamp(28px,3.4vw,52px);
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  opacity:0; transition:opacity .45s .25s;
}
.exp__panel.is-active .exp__body{ opacity:1; }

.exp__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.exp__top h3{ font-size:clamp(1.3rem,2.6vw,2.3rem); line-height:1.2; }
.exp__top em{ font-style:normal; font-size:12px; letter-spacing:.16em; opacity:.5; }

.exp__bot{ display:grid; gap:22px; max-width:52ch; }
.exp__bot p{ font-size:13.5px; line-height:1.85; color:rgba(237,237,240,.72); }
.exp__price{ font-size:12px; letter-spacing:.14em; }
.exp__link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.14em;
  padding:11px 18px; border:1px solid rgba(237,237,240,.28);
  color:var(--ink); width:fit-content;
  transition:background .25s, color .25s, border-color .25s;
}
.exp__link:hover{ background:var(--ink); color:#1B1B1D; border-color:var(--ink); }
.exp__link svg{ width:14px; height:14px; }

/* ---- podejście ---- */

.appr{
  background:#E9E9EC;
  color:#1B1B1D;
  border-radius:0 0 30px 30px;
  padding:clamp(72px,9vw,150px) var(--pad) clamp(72px,9vw,140px);
  max-width:var(--maxw); margin-inline:auto;
}
.appr .tag{ color:#5B72FF; }
.appr__head{ padding-bottom:clamp(32px,4vw,56px); }
.appr__title{
  margin-top:18px;
  font-size:clamp(1.3rem,3vw,2.6rem);
  line-height:1.18;
}

.appr__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid rgba(27,27,29,.16);
}
.appr__cell{
  display:flex; flex-direction:column;
  padding:clamp(26px,3vw,46px);
  border-left:1px solid rgba(27,27,29,.16);
  min-height:clamp(420px,44vw,560px);
}
.appr__cell:first-child{ border-left:0; }

.appr__hd{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; margin-bottom:26px;
}
.appr__hd h3{ font-size:clamp(1.05rem,1.9vw,1.5rem); line-height:1.25; font-weight:700; }
.appr__hd em{ font-style:normal; font-size:12px; letter-spacing:.16em; opacity:.45; }
.appr__cell p{ font-size:13.5px; line-height:1.85; color:rgba(27,27,29,.72); }

.draw{
  width:min(66%,190px);
  height:auto;
  margin-top:auto;
  align-self:center;
  stroke:#1B1B1D;
  stroke-width:1.1;
  stroke-linecap:round;
  overflow:visible;
}

/* ---- dlaczego my ---- */

.why{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(80px,10vw,160px) var(--pad);
  display:grid; align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,5vw,80px);
}
.why__l{ display:grid; justify-items:start; gap:clamp(20px,2.4vw,32px); }
.why__title{
  font-size:clamp(1.5rem,3.4vw,3rem);
  line-height:1.18;
}
.why__lead{
  max-width:46ch;
  font-size:13.5px; line-height:1.9;
  color:var(--ink-2);
}
.why__cta{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.18em;
}
.why__cta i{
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid var(--line);
  font-style:normal; font-size:16px;
  transition:background .3s, color .3s, border-color .3s;
}
.why__cta:hover i{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.why__bars{ list-style:none; margin:0; padding:0; display:grid; }
.why__bar{
  position:relative;
  background:var(--c);
  color:var(--ink);
  padding:clamp(24px,2.6vw,36px) clamp(58px,6vw,80px) clamp(28px,3.4vw,48px) clamp(24px,2.6vw,36px);
  display:grid; gap:clamp(18px,2.4vw,34px);
  align-content:start;
}
.why__bar em{
  font-style:normal; font-size:12px;
  letter-spacing:.16em; opacity:.55;
}
.why__bar h3{
  font-size:clamp(.95rem,1.5vw,1.2rem);
  line-height:1.45; font-weight:700;
  letter-spacing:.06em;
  max-width:26ch;
}
.why__bar p{
  font-size:13px; line-height:1.85;
  color:rgba(237,237,240,.68);
  max-width:40ch;
  margin-top:-10px;
}
.why__ico{
  position:absolute;
  top:clamp(22px,2.4vw,34px); right:clamp(22px,2.4vw,34px);
  width:26px; height:26px;
  stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.6;
}

/* ---- kontakt ---- */

.hello{
  position:relative;
  overflow:hidden;
  padding:clamp(70px,10vw,150px) var(--pad);
  display:grid; place-items:center;
  min-height:min(92vh,860px);
}
.hello__dither{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}

.hello__panel{
  position:relative; z-index:1;
  width:min(100%,860px);
  background:var(--bg);
  padding:clamp(48px,7vw,96px) clamp(28px,5vw,72px);
  text-align:center;
  display:grid; justify-items:center; gap:clamp(20px,2.6vw,34px);
}

.hello__c{
  position:absolute;
  font-style:normal; font-size:17px; line-height:1;
  color:var(--acc);
}
.hello__c--tl{ top:-9px; left:-9px; }
.hello__c--tr{ top:-9px; right:-9px; }
.hello__c--bl{ bottom:-9px; left:-9px; }
.hello__c--br{ bottom:-9px; right:-9px; }

.hello__face{ width:40px; height:22px; fill:var(--acc); }
.hello__title{
  font-size:clamp(1.9rem,5.6vw,4.2rem);
  color:var(--acc);
  line-height:1.05;
}
.hello__lead{
  max-width:50ch;
  font-size:13.5px; line-height:1.9;
  color:var(--ink-2);
}
.hello__cta{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:8px;
  font-size:12px; letter-spacing:.18em;
}
.hello__cta i{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid var(--line);
  font-style:normal; font-size:16px;
  transition:background .3s, color .3s, border-color .3s;
}
.hello__cta:hover i{ background:var(--acc); color:var(--bg); border-color:var(--acc); }

/* ---- nagłówek podstrony ---- */

.ph{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(130px,16vw,220px) var(--pad) clamp(50px,7vw,110px);
}
.ph__title{
  margin-top:20px;
  font-size:clamp(1.7rem,4.4vw,3.8rem);
  line-height:1.14;
  max-width:24ch;
}

/* ---- blok kontaktowy ---- */

.ct{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(70px,9vw,140px);
}
.ct__rule{
  position:relative;
  height:1px;
  margin-bottom:clamp(48px,6vw,96px);
  background:repeating-linear-gradient(to right,
    var(--line) 0 3px, transparent 3px 9px);
}
.ct__rule i{
  position:absolute; top:50%; left:7%;
  transform:translate(-50%,-50%);
  font-style:normal; font-size:18px; line-height:1;
  color:var(--acc);
  background:var(--bg); padding:0 6px;
}

.ct__grid{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px,5vw,80px);
}

.ct__info{
  display:grid;
  grid-template-columns:minmax(86px,124px) minmax(0,1fr) auto;
  border:1px solid var(--line-2);
  align-self:start;
}
.ct__lab,
.ct__val{
  padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--line-2);
  display:flex; align-items:center;
  font-size:12px; letter-spacing:.16em;
}
.ct__lab{ border-right:1px solid var(--line-2); color:var(--ink-3); }
.ct__val{ color:var(--ink); transition:color .3s; letter-spacing:.05em; overflow-wrap:anywhere; }
.ct__val:hover{ color:var(--acc); }
.ct__lab:nth-last-of-type(1),
.ct__val:nth-last-of-type(1){ border-bottom:0; }

.ct__face{
  grid-column:3; grid-row:1 / span 3;
  display:grid; place-items:center;
  padding:0 clamp(14px,1.6vw,22px);
  border-left:1px solid var(--line-2);
}
.ct__face svg{ width:34px; height:19px; fill:var(--acc); }

.ct__form{
  display:grid; gap:clamp(18px,2.2vw,28px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.fld{ display:grid; gap:10px; margin:0; }
.fld--full{ grid-column:1 / -1; }
.fld label{ font-size:12px; color:var(--ink-2); letter-spacing:.06em; }

.fld input,
.fld textarea,
.fld select{
  width:100%;
  font-family:var(--f); font-size:14px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line-2);
  padding:14px 16px;
  border-radius:0;
  transition:border-color .3s, background .3s;
  -webkit-appearance:none; appearance:none;
}
.fld textarea{ resize:vertical; min-height:150px; line-height:1.7; }
.fld input:focus,
.fld textarea:focus,
.fld select:focus{
  outline:none;
  border-color:var(--acc);
  background:rgba(91,157,255,.04);
}
.fld ::placeholder{ color:var(--ink-3); }

.sel{ position:relative; display:block; }
.sel svg{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  width:16px; height:16px; color:var(--acc);
  pointer-events:none;
}
.sel select option{ background:var(--bg-2); color:var(--ink); }

.ct__send{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.ct__btn{
  display:inline-flex; align-items:center; gap:14px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink); font-family:var(--f);
  font-size:12px; letter-spacing:.18em;
}
.ct__btn i{
  display:grid; place-items:center;
  width:44px; height:44px;
  border:1px solid var(--line);
  font-style:normal; font-size:16px;
  transition:background .3s, color .3s, border-color .3s;
}
.ct__btn:hover i{ background:var(--acc); color:var(--bg); border-color:var(--acc); }
.ct__note{ font-size:12px; color:var(--acc); }

/* ---- stopka ---- */

.ft{
  border-top:1px solid var(--line-2);
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(52px,7vw,100px) var(--pad) 0;
}
.ft__grid{
  display:grid; gap:clamp(32px,4vw,56px);
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  align-items:start;
  padding-bottom:clamp(48px,6vw,86px);
}
.ft__col{ display:grid; gap:10px; align-content:start; }
.ft__k{
  font-size:11px; letter-spacing:.22em;
  color:var(--acc); margin-bottom:4px;
}
.ft__k--sp{ margin-top:clamp(24px,3vw,44px); }
.ft__big{
  font-size:clamp(.95rem,1.5vw,1.15rem);
  color:var(--ink);
  transition:color .3s;
}
.ft__big:hover{ color:var(--acc); }
.ft__p{ font-size:13px; line-height:1.8; color:var(--ink-2); max-width:34ch; }

.ft__nav a{
  font-size:clamp(.95rem,1.4vw,1.1rem);
  color:var(--ink);
  padding:5px 0;
  transition:color .3s;
}
.ft__nav a:hover{ color:var(--acc); }

.ft__word{
  writing-mode:vertical-rl;
  font-size:clamp(2.4rem,5vw,4.4rem);
  font-weight:700; letter-spacing:.04em;
  color:var(--acc);
  line-height:1;
  justify-self:end;
}

.ft__bar{
  display:flex; align-items:stretch;
  border-top:1px solid var(--line-2);
  font-size:11px; letter-spacing:.16em; color:var(--ink-3);
}
.ft__cell{
  display:flex; align-items:center;
  padding:20px clamp(16px,2.4vw,34px);
  border-left:1px solid var(--line-2);
  white-space:nowrap;
}
.ft__cell:first-child{ border-left:0; }
.ft__cell--grow{ flex:1; padding:0; }
.ft__cell--face svg{ width:26px; height:15px; fill:var(--ink-3); }
.ft__bar a:hover{ color:var(--acc); }

/* ---- reveal ---- */

[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */

@media (max-width:860px){
  .hero{ padding:96px var(--pad) 64px; }
  .hero__grid{
    flex-direction:column;
    align-items:stretch;
    justify-content:space-between;
    gap:0;
  }
  .hero__title{ font-size:clamp(1.5rem,7.4vw,2.5rem); }
  .hero__title--l{ text-align:left; }
  .hero__title--r{ text-align:right; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:24px; }
  .hero__scroll{ display:none; }
  .intro{ grid-template-columns:1fr; }

  .exp{ border-radius:20px 20px 0 0; }
  .exp__head{ align-items:flex-start; }
  .exp__panels{ flex-direction:column; height:auto; }
  .exp__panel{ flex:0 0 auto; min-height:62px; transition:none; }
  .exp__tab{
    position:relative; inset:auto;
    flex-direction:row; justify-content:flex-start; align-items:center;
    gap:16px; padding:0 22px; height:62px; width:100%;
  }
  .exp__vert{ writing-mode:horizontal-tb; transform:none; }
  .exp__panel.is-active .exp__tab{ display:none; }
  .exp__body{ min-width:0; opacity:1; display:none; }
  .exp__panel.is-active .exp__body{ display:flex; }
  .exp__top{ flex-direction:column; gap:10px; }
  .ct__grid{ grid-template-columns:1fr; }
  .ct__form{ grid-template-columns:1fr; }
  .ct__info{ grid-template-columns:minmax(84px,110px) minmax(0,1fr); }
  .ct__face{ display:none; }

  .ft__grid{ grid-template-columns:1fr; }
  .ft__word{ writing-mode:horizontal-tb; justify-self:start; }
  .ft__bar{ flex-wrap:wrap; }
  .ft__cell{ border-left:0; padding:14px 0; }
  .ft__cell--grow{ display:none; }
  .hello__panel{ padding-inline:22px; }

  .why{ grid-template-columns:1fr; }
  .why__bar{ padding-right:58px; }

  .appr__grid{ grid-template-columns:1fr; }
  .appr__cell{
    border-left:0;
    border-top:1px solid rgba(27,27,29,.16);
    min-height:auto;
  }
  .appr__cell:first-child{ border-top:0; }
  .draw{ width:min(58%,170px); margin-top:36px; }

  .step{ grid-template-columns:1fr; gap:10px; }
  .step em{ padding-top:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ============================================================
   LANDING USŁUGI (pentesty)
   ============================================================ */

.phero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-start;
  padding:clamp(110px,15vh,170px) var(--pad) 60px;
  overflow:hidden;
}
.phero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.phero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(27,27,29,.92) 0%, rgba(27,27,29,.72) 26%,
    rgba(27,27,29,.20) 44%, rgba(27,27,29,0) 60%);
}
.phero__head{
  position:relative; z-index:2;
  width:100%;
  pointer-events:none;
}
/* na landingach z grafiką po prawej trzymamy tekst w lewej połowie */
.phero--split .phero__head{ max-width:52%; }
.phero--split::before{
  background:linear-gradient(100deg,
    rgba(27,27,29,.92) 0%, rgba(27,27,29,.78) 32%,
    rgba(27,27,29,.25) 52%, rgba(27,27,29,0) 68%);
}
.phero__tag{
  display:block; margin-bottom:20px;
  font-size:12px; letter-spacing:.22em; color:var(--acc);
  opacity:0; animation:heroIn .9s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
.phero__title{
  display:grid;
  max-width:22ch;
  font-size:clamp(1.7rem,5.2vw,4.4rem);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.08;
}
.phero__title span{
  opacity:0; transform:translateY(16px);
  animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.phero__title span:nth-child(1){ animation-delay:.2s }
.phero__title span:nth-child(2){ animation-delay:.32s }
.phero__scroll{
  position:absolute; left:50%; bottom:26px; z-index:2;
  width:1px; height:52px; background:var(--line-2); overflow:hidden;
}
.phero__scroll i{ position:absolute; inset:0; background:var(--acc); animation:scrollDot 2.4s cubic-bezier(.7,0,.3,1) infinite; }

.sect{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(70px,9vw,150px) var(--pad);
  border-top:1px solid var(--line-2);
}
.sect--alt{ background:var(--bg-2); }
.sect__head{ margin-bottom:clamp(40px,6vw,72px); }
.sect__title{ margin-top:18px; font-size:clamp(1.5rem,3.4vw,3rem); line-height:1.14; }

.feat{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  background:var(--line-2); border:1px solid var(--line-2);
}
.feat__i{
  background:var(--bg);
  padding:clamp(26px,3vw,40px);
  display:grid; gap:16px; align-content:start;
  min-height:220px;
}
.feat__i em{ font-style:normal; font-size:12px; letter-spacing:.22em; color:var(--acc); }
.feat__i p{ font-size:13.5px; line-height:1.8; color:var(--ink-2); }

.flow{ list-style:none; margin:0; padding:0; display:grid; }
.flow__i{
  display:grid; grid-template-columns:minmax(50px,90px) minmax(120px,220px) 1fr;
  gap:clamp(18px,3vw,50px); align-items:baseline;
  padding:clamp(24px,3vw,40px) 0;
  border-top:1px solid var(--line-2);
}
.flow__i:last-child{ border-bottom:1px solid var(--line-2); }
.flow__i em{ font-style:normal; font-size:12px; letter-spacing:.18em; color:var(--acc); }
.flow__i h3{ font-size:clamp(1rem,1.8vw,1.4rem); font-weight:700; letter-spacing:.04em; }
.flow__i p{ font-size:13.5px; line-height:1.85; color:var(--ink-2); max-width:60ch; }

@media (max-width:860px){
  .phero{ padding:104px var(--pad) 64px; align-items:flex-start; }
  .phero__title{ font-size:clamp(1.5rem,7.6vw,2.6rem); max-width:none; }
  .phero__tag{ margin-bottom:14px; font-size:11px; }
  .phero::before{
    background:linear-gradient(180deg,
      rgba(27,27,29,.94) 0%, rgba(27,27,29,.7) 30%,
      rgba(27,27,29,.15) 52%, rgba(27,27,29,0) 68%);
  }
  .phero__scroll{ display:none; }
  .flow__i{ grid-template-columns:1fr; gap:10px; }
}