/* Designeria Studio — jeden plik stylów, mobile-first poprawki na dole */
:root{
  --bg:#111111; --bg2:#141414; --s1:#181818; --s2:#1a1a1a; --line:#262626; --line2:#2f2f2f;
  --tx:#F3F1EC; --tx2:#d6d4cf; --mut:#b5b3ae; --mut2:#A3A3A3;
  --a:#FF6A1A; --a-h:#ff8544; --ink:#111;
  --disp:"Archivo","DM Sans",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--a);text-decoration:none}
a:hover{color:var(--a-h)}
h1,h2,h3,h4{font-family:var(--disp);margin:0}
p{margin:0}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.accent{color:var(--a)}
.muted{color:var(--mut)}
.fa{fill:var(--a)}
.svg-d{font-family:var(--disp);font-weight:900}
.svg-b{font-family:var(--body);font-weight:700}

/* ikony liniowe */
.btn svg,.hero__facts svg,.pillar__link svg,.ico svg,.area__i svg,.social svg,.mbar svg{
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;font-weight:700;font-size:15px;padding:14px 20px;border:2px solid transparent;transition:background .15s,border-color .15s,color .15s;cursor:pointer;font-family:inherit}
.btn svg{width:20px;height:20px}
.btn--sm{padding:11px 20px}
.btn--lg{font-size:17px;padding:17px 28px;font-weight:800}
.btn--block{width:100%}
.btn--accent{background:var(--a);color:var(--ink)}
.btn--accent:hover{background:var(--a-h);color:var(--ink)}
.btn--ghost{border-color:#3a3a3a;color:var(--tx)}
.btn--ghost:hover{border-color:var(--a);color:var(--tx)}
.btn--dark{background:var(--ink);color:var(--tx)}
.btn--dark:hover{background:#000;color:var(--a)}
.btn--wa{background:#25D366;color:#0b2915}
.btn--wa:hover{background:#3ee07a;color:#0b2915}
.btn--wa svg{width:24px;height:24px}

/* nawigacja */
.nav{position:sticky;top:0;z-index:30;background:rgba(17,17,17,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #262626;padding-top:env(safe-area-inset-top,0px)}
.nav__in{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;color:var(--tx)}
.logo:hover{color:var(--tx)}
.logo{align-items:baseline;gap:10px}
.logo__word{font-family:var(--disp);font-weight:800;font-size:25px;letter-spacing:-.8px;line-height:1}
.logo__dot{color:var(--a)}
.logo__sub{font-size:10.5px;font-weight:600;letter-spacing:3.5px;color:var(--mut2)}
.nav__links{display:flex;gap:44px;font-size:15px;font-weight:500}
.nav__links a{color:var(--tx2)}
.nav__links a:hover{color:var(--a)}
.nav__cta{display:flex;align-items:center;gap:20px}
.nav__tel{color:var(--tx);font-weight:700;font-size:15px}

/* hero */
.hero{border-bottom:1px solid #232323;overflow:hidden}
.hero__in{min-height:720px;display:flex;align-items:center;gap:48px;padding-block:88px}
.hero__text{flex:1 1 560px;display:flex;flex-direction:column;gap:30px;min-width:0}
.kicker{font-size:13px;font-weight:700;letter-spacing:2.5px;color:var(--a)}
.kicker__bar{width:28px;height:3px;background:var(--a)}
.hero h1{font-size:clamp(36px,4.4vw,62px);line-height:.98;font-weight:800;letter-spacing:-2px;max-width:600px}
.lead{font-size:18px;line-height:1.6;color:var(--mut);max-width:520px}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}
.hero__facts{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14.5px;color:var(--tx2)}
.hero__facts li{display:flex;align-items:center;gap:8px}
.hero__facts svg{width:18px;height:18px;color:var(--a);stroke-width:2.6}

.hero__art{flex:0 0 600px;width:600px;height:auto;display:block}

/* sekcje */
.sec{padding-block:128px}
.sec--alt{background:var(--bg2);border-block:1px solid #232323}
.sec__head{display:flex;flex-direction:column;gap:14px;margin-bottom:56px}
.sec__head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.sec__head--split>div:first-child{display:flex;flex-direction:column;gap:14px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:2.5px;color:var(--a)}
.sec h2,.form__h{font-size:clamp(32px,3.4vw,48px);line-height:1.04;font-weight:800;letter-spacing:-1.2px}
.sec__lead{max-width:460px;font-size:17px;line-height:1.6;color:var(--mut)}

/* filary */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pillar{position:relative;overflow:hidden;border-radius:24px;padding:44px;min-height:560px;display:flex;flex-direction:column;gap:22px;background:var(--s2);border:1px solid #2c2c2c}
.pillar--accent{background:var(--a);color:var(--ink);border-color:var(--a)}
.pillar__no{font-family:var(--disp);font-weight:900;font-size:16px;letter-spacing:2px}
.pillar h3{font-size:40px;line-height:1.02;font-weight:800;letter-spacing:-1px}
.pillar p{font-size:17px;line-height:1.5;max-width:340px;font-weight:500}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:330px;position:relative;z-index:1}
.chips li{border:2px solid var(--ink);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700}
.chips .chip--solid{background:var(--ink);color:var(--a)}
.chips--dark li{border-color:#3a3a3a}
.pillar__link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:16px;border-bottom:2px solid currentColor;padding-bottom:4px;position:relative;z-index:1}
.pillar--accent .pillar__link{color:var(--ink)}
.pillar__link svg{width:18px;height:18px;stroke-width:2.4}
.pillar__art{position:absolute}
.pillar__art--shirt{right:10px;bottom:30px;width:230px;transform:rotate(6deg)}
.pillar__art--phone{right:24px;bottom:36px;width:170px}

/* realizacje */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{background:transparent;color:var(--tx2);border:2px solid var(--line2);border-radius:999px;padding:11px 20px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;min-height:44px}
.filter:hover{border-color:var(--a)}
.filter.is-on{background:var(--a);border-color:var(--a);color:var(--ink);font-weight:800}
.grid-work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.work{background:var(--s1);border:1px solid #262626;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;animation:fadein .25s ease}
.work__art{height:230px;display:flex;align-items:center;justify-content:center;position:relative}
.work__art svg{max-height:170px;width:auto}
.work__tag{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.55);color:var(--tx);font-size:11px;font-weight:700;letter-spacing:1.5px;padding:5px 9px;border-radius:6px}
.work__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.work__cat{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--a);text-transform:uppercase}
.work__title{font-size:17px;font-weight:700;line-height:1.3}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* kroki */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.step{display:flex;flex-direction:column;gap:18px;padding-top:26px;border-top:3px solid var(--line2)}
.step--on{border-top-color:var(--a)}
.step__top{display:flex;justify-content:space-between;align-items:center}
.step__no{font-family:var(--disp);font-weight:800;font-size:40px;color:#2e2e2e}
.step h3{font-size:26px;font-weight:800;font-stretch:100%}
.step p{font-size:16px;line-height:1.55;color:#bdb7ae}
.ico{width:56px;height:56px;border-radius:14px;background:#242424;display:flex;align-items:center;justify-content:center;color:var(--a);flex-shrink:0}
.ico svg{width:28px;height:28px;stroke-width:2}
.ico--accent{width:52px;height:52px;background:rgba(255,106,26,.12);color:var(--a);border-radius:50%}
.ico--accent svg{width:26px;height:26px}
.ico--line{width:52px;height:52px;background:transparent;border:2px solid var(--line2)}
.ico--line svg{width:24px;height:24px}

/* pakiety */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;display:flex;flex-direction:column;gap:20px}
.plan h3{font-size:24px;font-weight:800;font-stretch:100%}
.price{display:flex;align-items:baseline;gap:8px}
.price span{font-size:15px;color:var(--mut2)}
.price b{font-family:var(--disp);font-size:40px;font-weight:900}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--tx2)}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:var(--a);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks--dark{color:var(--ink);font-weight:600}
.ticks--dark li::before{background:var(--ink)}
.plan .btn{margin-top:auto}
.plan--hot{border:2px solid var(--a)}
.plan__badge{position:absolute;top:-14px;left:28px;background:var(--a);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:1.5px;padding:6px 12px;border-radius:999px}

/* dlaczego my */
.why{display:flex;gap:60px}
.why__head{flex:0 0 400px;display:flex;flex-direction:column;gap:18px}
.why__grid{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.why__item{display:flex;gap:18px}
.why__item h3{font-size:22px;font-weight:800;margin-bottom:8px;font-family:var(--body)}
.why__item p{font-size:16px;line-height:1.55;color:#bdb7ae}

/* opinie */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quote{margin:0;background:var(--s1);border:1px dashed #3a3a3a;border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:22px}
.tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--ink);background:var(--tx2);padding:4px 9px;border-radius:6px}
.quote__mark{font-family:var(--disp);font-weight:900;font-size:64px;line-height:.5;height:28px;color:var(--a)}
.quote blockquote{margin:0;font-size:17px;line-height:1.6;color:#e6e1d9}
.quote figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.quote figcaption>span:last-child{display:flex;flex-direction:column}
.quote small{font-size:14px;color:var(--mut2)}
.av{width:44px;height:44px;border-radius:50%;background:#2c2c2c;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--mut2)}

/* kontakt */
.contact{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.form{background:var(--s2);border:1px solid #2c2c2c;border-radius:24px;padding:44px;display:flex;flex-direction:column;gap:22px}
.form__h{font-size:clamp(32px,3.2vw,44px);margin-top:-10px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700;color:var(--tx2)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form input[type=text],.form input[type=tel],.form textarea{width:100%;min-height:52px;background:#141414;border:1px solid #3a3a3a;border-radius:12px;padding:14px 16px;color:var(--tx);font-family:inherit;font-size:16px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--a);outline-offset:1px;border-color:transparent}
.form input.bad{border-color:#ff5a5a}
.form fieldset{margin:0;padding:0;border:0}
.form legend{font-size:14px;font-weight:700;color:var(--tx2);margin-bottom:12px;padding:0}
.form legend span,.opt{font-weight:500;color:var(--mut2)}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.checks label{flex-direction:row;align-items:center;gap:12px;min-height:48px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;font-size:15px;font-weight:500;color:var(--tx);cursor:pointer;transition:border-color .15s,background .15s}
.checks label:has(input:checked){border-color:var(--a);background:rgba(255,107,26,.08)}
.checks input,.consent input{width:20px;height:20px;accent-color:var(--a);flex-shrink:0;margin:0}
.form .consent{flex-direction:row;align-items:flex-start;gap:10px;font-size:13px;font-weight:500;line-height:1.5;color:var(--mut2);cursor:pointer}
.form__err{color:#ff8a8a;font-size:14px;font-weight:600}
.form__note{font-size:13px;color:var(--mut2);text-align:center;margin-top:-8px}
.contact__side{display:flex;flex-direction:column;gap:28px;padding-top:12px}
.cline{display:flex;align-items:center;gap:16px;color:var(--tx)}
.cline:hover{color:var(--tx)}
.cline>span:last-child{display:flex;flex-direction:column}
.cline small{font-size:13px;color:var(--mut2)}
.cline b{font-size:18px}
.cline .big{font-family:var(--disp);font-size:26px;font-weight:900}
.area{border-top:1px solid #2c2c2c;padding-top:24px;display:flex;flex-direction:column;gap:16px}
.area__h{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--mut2)}
.area__i{display:flex;gap:14px;font-size:16px;line-height:1.5}
.area__i svg{width:22px;height:22px;color:var(--a);margin-top:2px}
.area__i small{font-size:15px;color:var(--mut2)}

/* stopka */
.foot{background:#0e0e0e;border-top:1px solid #232323;padding:64px 0 40px}
.foot__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot__brand{display:flex;flex-direction:column;gap:18px;max-width:340px}
.foot__brand p{font-size:15px;line-height:1.55;color:var(--mut2)}
.social{display:flex;gap:10px}
.social a{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--tx)}
.social a:hover{border-color:var(--a);color:var(--a)}
.social svg{width:20px;height:20px;stroke-width:2}
.foot__cols{display:flex;gap:72px;flex-wrap:wrap}
.foot__cols>div{display:flex;flex-direction:column;gap:12px;font-size:15px}
.foot__cols h4{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--mut2);margin-bottom:4px}
.foot__cols a,.foot__cols span{color:var(--tx2)}
.foot__cols a:hover{color:var(--a)}
.foot__bot{margin-top:48px;border-top:1px solid #232323;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#8f8a82}
.foot__bot a{color:#8f8a82}

/* pasek na telefonie */
.mbar{display:none}

/* ——— TABLET ——— */
@media (max-width:1100px){
  .nav__links{display:none}
  .hero__in{flex-direction:column;align-items:flex-start;min-height:0;padding-block:56px 40px}
  .hero__text{flex:none}
  .hero__art{flex:none;align-self:center;width:min(600px,100%)}
  .grid-work,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}
  .why{flex-direction:column;gap:40px}
  .why__head{flex:none}
  .contact{grid-template-columns:1fr}
}

/* ——— TELEFON ——— */
@media (max-width:720px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .wrap{width:calc(100% - 40px)}
  .nav__in{height:64px}
  .nav__tel{display:none}
  .nav .btn--sm{padding:9px 14px;font-size:14px}
  .logo__word{font-size:22px}
  .logo__sub{font-size:9.5px;letter-spacing:3px}
  .hero__in{padding-block:36px 8px;gap:24px}
  .hero__text{gap:22px}
  .kicker{font-size:11px;letter-spacing:1.6px}
  .hero h1{letter-spacing:-1.2px;font-size:clamp(32px,9.6vw,40px)}
  .lead{font-size:17px}
  .hero__btns{flex-direction:column;width:100%}
  .hero__btns .btn{width:100%}
  .hero__facts{flex-direction:column;gap:10px}
  .hero__art{width:calc(100% + 24px);margin-inline:-12px}
  .sec{padding-block:72px}
  .sec__head{margin-bottom:36px}
  .sec__head--split{flex-direction:column;align-items:flex-start;gap:18px}
  .sec__lead{font-size:16px}
  .pillars{grid-template-columns:1fr;gap:16px}
  .pillar{padding:28px 24px;min-height:0;padding-bottom:220px}
  .pillar h3{font-size:30px}
  .pillar__art--shirt{width:190px;bottom:18px;right:-6px}
  .pillar__art--phone{width:100px;bottom:20px;right:24px}
  .filters{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 40px);margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex-shrink:0;padding:9px 16px;font-size:14px}
  .grid-work{gap:12px}
  .work{border-radius:14px}
  .work__art{height:150px}
  .work__art svg{max-height:110px}
  .work__tag{left:8px;top:8px;font-size:9px;padding:4px 6px}
  .work__body{padding:12px 12px 14px}
  .work__cat{font-size:10px}
  .work__title{font-size:14px}
  .steps{grid-template-columns:1fr;gap:28px}
  .step{flex-direction:row;flex-wrap:wrap;gap:6px 16px;padding-top:20px}
  .step__top{width:100%}
  .step__no{font-size:36px}
  .plans{grid-template-columns:1fr;gap:24px}
  .why__grid{grid-template-columns:1fr;gap:28px}
  .quotes{grid-template-columns:1fr;gap:16px}
  .quote{padding:24px}
  .form{padding:26px 20px;border-radius:20px}
  .form__row,.checks{grid-template-columns:1fr}
  .foot__cols{gap:32px;flex-direction:column}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(14,14,14,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid #2a2a2a}
  .mbar a{height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:16px}
  .mbar svg{width:22px;height:22px}
  .mbar__call{background:var(--a);color:var(--ink)}
  .mbar__call:hover{color:var(--ink)}
  .mbar__wa{background:#25D366;color:#0b2915}
  .mbar__wa:hover{color:#0b2915}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work{animation:none}}