/* ============================================================
   DOMINIK BELUŠ — dbdesign®
   Spoločný štýl pre index.html aj podstránky projektov.
   Pôvodná dizajnová reč z Figmy (Inter, presný tmavomodrý
   gradient, modrá #044177), pokojnejšia mierka: užší obsahový
   stĺpec, menšie názvy sekcií, jemné tiene, vzdušné rozostupy.
   ============================================================ */

:root{
  --bg:#f7f7f5;
  --surface:#ffffff;
  --ink:#0a0a0b;
  --ink-2:#55595f;
  --ink-3:#8d9197;
  --grey:#e2e2de;
  --line:rgba(10,10,11,.09);

  --blue:#044177;
  --blue-2:#0a5a9e;
  --blue-soft:#7fb2e0;

  /* presné gradienty z Figmy */
  --grad-hero:linear-gradient(130.28deg,rgb(1,9,17) 30.268%,rgb(5,27,46) 51.687%,rgb(46,81,112) 79.227%,rgb(17,75,126) 109.83%);
  --grad-contact:linear-gradient(153.28deg,rgb(1,9,17) 30.268%,rgb(5,27,46) 51.687%,rgb(46,81,112) 79.227%,rgb(17,75,126) 109.83%);

  /* jeden jemný tieň pre všetky obrázky a karty */
  --sh-soft:0 1px 3px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.16);
  --sh-btn:0 4px 14px -4px rgba(0,0,0,.28);
  --sh-nav:0 1px 2px rgba(0,0,0,.04), 0 10px 30px -14px rgba(0,0,0,.2);

  /* obsahový stĺpec max. 1280 px — stránka nepôsobí „nalepená" */
  --pad:max(clamp(20px,5.2vw,80px),calc((100vw - 1280px) / 2));
  --pill:max(12px,calc(var(--pad) - clamp(40px,4.4vw,64px)));
  --nav-pad:var(--pad);
  --nav-h:116px;
  --sec:clamp(84px,9vw,140px);
  --r-card:20px;
  --r-btn:12px;

  --e:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-open{overflow:hidden;}
body.is-leaving{opacity:0;transition:opacity .4s ease .08s;}
/* príchod na podstránku — len opacita, bez transformácie (fixné menu ostane fixné) */
body.page-in{animation:pageIn .5s var(--e2) both;}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
h1,h2,h3{margin:0;font-weight:700;}
button{font:inherit;}
strong{font-weight:600;color:var(--ink);}
::selection{background:var(--blue);color:#fff;}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px;}

.shell{width:100%;padding-inline:var(--pad);}

/* ============================================================
   TYPOGRAFIA
   ============================================================ */
.display{
  font-size:clamp(38px,6.5vw,98px);line-height:1.08;
  letter-spacing:-.035em;font-weight:700;text-wrap:balance;
}

/* hlavička sekcie: orientačný názov + text pod ním */
.sec-head{max-width:860px;margin-bottom:clamp(40px,4vw,56px);}
.sec-label{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 22px 12px 18px;border-radius:999px;
  background:rgba(4,65,119,.09);
  font-size:16px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);line-height:1;
}
.sec-label::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);flex:0 0 auto;
  transform:scale(0);transition:transform .7s var(--e) .25s;
}
[data-r].sec-head.is-in .sec-label::before{transform:scale(1);}
.sec-text{
  margin-top:clamp(30px,3.2vw,44px);max-width:40ch;
  font-size:clamp(21px,2vw,29px);line-height:1.36;letter-spacing:-.022em;
  font-weight:500;color:var(--ink-2);text-wrap:pretty;
}
.sec-text strong{color:var(--ink);font-weight:600;}
.svc__cta p strong,.sec-text strong.cta-hl{color:var(--blue);font-weight:700;}
.contact .sec-text strong.cta-hl{color:var(--blue-soft);}
.sec-text .name{color:var(--blue);font-weight:700;}

/* ============================================================
   NAVIGÁCIA
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;}
.nav__bg{
  position:absolute;inset:0;background:var(--surface);
  border:1px solid transparent;border-radius:0;box-shadow:0 0 0 rgba(0,0,0,0);
  transition:inset .3s var(--e2),border-radius .3s var(--e2),box-shadow .3s var(--e2),border-color .3s var(--e2);
}
.nav.is-stuck .nav__bg{
  inset:12px var(--pill) 12px var(--pill);
  border-radius:999px;border-color:var(--line);box-shadow:var(--sh-nav);
}
.nav__inner{
  position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
}

/* logo presne z Figmy (obrysy písma + ®) */
.brand{display:inline-flex;flex:0 0 auto;}
.brand img{height:clamp(22px,1.8vw,26px);width:auto;}

.nav__links{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);}
.nav__links a{font-size:16px;font-weight:500;color:var(--ink);transition:color .25s var(--e2);}
.nav__links a:hover{color:var(--blue);}

/* hamburger — len tri čiarky, po otvorení len krížik (bez krúžkov) */
.burger{
  display:none;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;position:relative;flex:0 0 auto;
}
.burger span{
  position:absolute;left:50%;height:2.5px;width:26px;margin-left:-13px;border-radius:99px;background:var(--ink);
  transition:transform .38s var(--e),opacity .2s var(--e2),background-color .25s var(--e2);
}
.burger span:nth-child(1){top:15px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:29px;}
body.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.is-open .burger span:nth-child(2){opacity:0;}
body.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* rozmazanie pod menu — bez bieleho závoja, farby ostávajú normálne */
.scrim{
  position:fixed;inset:0;z-index:90;background:transparent;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--e2);
}
body.is-open .scrim{opacity:1;pointer-events:auto;}
.panel{
  position:fixed;left:0;right:0;top:calc(var(--nav-h) - 4px);z-index:100;padding-inline:var(--pill);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .3s var(--e2),transform .4s var(--e);
}
body.is-open .panel{opacity:1;pointer-events:auto;transform:none;}
.panel__in{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-soft);padding:12px;}
.panel a.link{display:block;padding:14px 16px;font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--ink);transition:color .25s var(--e2);}
.panel a.link:hover,.panel a.link:active{color:var(--blue);}
.panel .btn{width:100%;margin-top:8px;}

/* ============================================================
   TLAČIDLÁ
   ============================================================ */
.btn{
  --bh:60px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--bh);padding:0 28px;border:0;border-radius:var(--r-btn);cursor:pointer;
  font-size:15.5px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  transition:background-color .3s var(--e2),color .3s var(--e2),box-shadow .3s var(--e2),transform .35s var(--e);
}
.btn svg{width:13px;height:13px;transition:transform .4s var(--e);}
.btn:hover svg{transform:translate(2px,-2px);}
.btn--ink{background:var(--ink);color:#fff;box-shadow:var(--sh-btn);}
.btn--ink:hover{background:var(--blue);transform:translateY(-2px);}
.btn--light{background:#fff;color:var(--ink);box-shadow:var(--sh-btn);}
.btn--light:hover{background:var(--blue);color:#fff;transform:translateY(-2px);}
.btn--ghost{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);}
.btn--ghost:hover{background:#fff;color:var(--ink);transform:translateY(-2px);}
.btn--soft{background:var(--grey);color:var(--ink);}
.btn--soft:hover{background:var(--ink);color:#fff;}
.btn:active{transform:translateY(0) scale(.99);}
.nav .btn{--bh:60px;padding:0 28px;}

/* veľké výrazné tlačidlo */
.btn--big{
  --bh:72px;padding:0 34px;gap:16px;font-size:18px;border-radius:16px;
  background:var(--blue);color:#fff;box-shadow:0 10px 30px -12px rgba(4,65,119,.55);
}
.btn--big svg{width:16px;height:16px;}
.btn--big:hover{background:var(--ink);transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(0,0,0,.45);}

/* ============================================================
   HERO — presný gradient, text v strede medzi menu a spodkom
   ============================================================ */
.hero{
  --hp:clamp(40px,9vh,110px);
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:var(--grad-hero);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + var(--hp));
  padding-bottom:var(--hp);
}
.hero .display{color:#fff;max-width:none;}
.hero__lead{
  margin-top:clamp(22px,2.4vw,34px);max-width:60ch;
  font-size:clamp(16px,1.25vw,18.5px);line-height:1.65;font-weight:500;color:#cfd3d8;
}
.hero__lead strong{color:#fff;}
.hero__actions{margin-top:clamp(26px,2.8vw,38px);display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.hero__note{font-size:14px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.6);}

/* ============================================================
   PANEL POD HERO — na počítači menší a v strede
   ============================================================ */
.reel-wrap{margin-top:clamp(18px,2vw,28px);}
.reel{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:4/3;box-shadow:var(--sh-soft);background:var(--ink);}
@media (min-width:901px){
  .reel-wrap{margin-top:clamp(28px,3vw,44px);}
  .reel{width:100%;aspect-ratio:16/7.6;}
  #sluzby{padding-top:clamp(64px,6vw,92px);}
}

/* ============================================================
   SEKCIE
   ============================================================ */
.section{padding-block:var(--sec);scroll-margin-top:calc(var(--nav-h) + 8px);}
.section--flush{padding-bottom:0;}
#sluzby{padding-bottom:clamp(48px,5vw,72px);}
#portfolio{padding-top:clamp(20px,2.4vw,40px);}
#portfolio .sec-head{max-width:1080px;}
#portfolio .sec-text{max-width:66ch;}

/* --- Služby --- */
.svc{
  display:grid;grid-template-columns:repeat(3,minmax(0,300px)) minmax(0,1fr);
  column-gap:clamp(14px,1.4vw,20px);align-items:stretch;
}
.card{
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-soft);
  padding:clamp(24px,2.2vw,32px);display:flex;flex-direction:column;
}
.card__icon{
  width:56px;height:56px;border-radius:50%;border:1.6px solid var(--ink);color:var(--ink);
  display:grid;place-items:center;background:transparent;flex:0 0 auto;
}
.card__icon svg{width:26px;height:26px;}
.card h3{margin-top:26px;font-size:clamp(19px,1.5vw,22px);font-weight:600;letter-spacing:-.022em;line-height:1.2;}
.card p{margin-top:14px;font-size:15px;line-height:1.8;color:var(--ink-2);}

.svc__cta{
  align-self:end;justify-self:start;padding-left:clamp(10px,2vw,32px);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
}
.svc__cta p{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:22ch;}

/* --- Portfólio --- */

.pf{margin-top:-20px;}
.pf__viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:var(--pad);scroll-padding-left:var(--pad);
  margin-inline:calc(var(--pad) * -1);
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.pf__viewport::-webkit-scrollbar{display:none;}
.pf__viewport.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
/* dosť miesta hore aj dole, aby sa tieň neorezal */
.pf__track{display:flex;gap:clamp(12px,1.3vw,20px);width:max-content;padding-block:20px 36px;}
.pf__item{
  flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;
  width:min(calc((100vw - var(--pad) * 2) * .88), 900px);
  border-radius:var(--r-card);overflow:hidden;background:var(--ink);box-shadow:var(--sh-soft);
  transform:translateZ(0);
}
.pf__media{aspect-ratio:1.38;overflow:hidden;}
.pf__media img{
  --z:1;--op:50% 50%;
  width:100%;height:100%;object-fit:cover;object-position:var(--op);
  transform:scale(var(--z));transition:transform .9s var(--e);
}
@media (min-width:901px){
  .pf__item{width:min(calc((100vw - var(--pad) * 2) * .64), 860px);}
  .more .pf__item{width:min(calc((100vw - var(--pad) * 2) * .5), 660px);}
}
a.pf__item:hover .pf__media img{transform:scale(calc(var(--z) * 1.03));}
a.pf__item.is-go .pf__media img{transform:scale(calc(var(--z) * 1.14));transition:transform .55s var(--e);}
.pf__badge{
  position:absolute;right:18px;bottom:18px;width:54px;height:54px;border-radius:var(--r-btn);
  background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh-btn);
  transition:background-color .25s var(--e2),color .25s var(--e2),transform .35s var(--e);
}
.pf__badge svg{width:16px;height:16px;}
a.pf__item:hover .pf__badge{background:var(--blue);color:#fff;transform:translateY(-2px);}
/* šípky vpravo */
.pf__ctrl{display:flex;justify-content:flex-end;gap:10px;margin-top:-8px;}
.arrow{
  width:60px;height:60px;border-radius:var(--r-btn);border:1.5px solid rgba(10,10,11,.28);background:var(--grey);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:background-color .25s var(--e2),color .25s var(--e2),opacity .25s var(--e2),transform .3s var(--e);
}
.arrow:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px);}
.arrow:disabled{opacity:.35;cursor:default;}
.arrow svg{width:16px;height:16px;}
.arrow--prev svg{transform:rotate(180deg);}

/* --- O mne --- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:stretch;}
.about__quote{
  font-size:clamp(24px,2.3vw,34px);line-height:1.24;letter-spacing:-.03em;font-weight:700;text-wrap:balance;
}
.about__quote em{font-style:normal;color:var(--blue);}
.about__body{margin-top:22px;max-width:44ch;font-size:16.5px;line-height:1.65;color:var(--ink-2);}
.tags{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.tags li{font-size:14px;font-weight:500;padding:9px 15px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-soft);}
.about__left .btn{margin-top:30px;}

/* Ako pracujem — gradient cez celý panel */
.steps{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--r-card);
  padding:clamp(28px,3vw,44px);box-shadow:var(--sh-soft);
  background:linear-gradient(150deg,rgb(1,9,17) 0%,rgb(5,27,46) 62%,rgb(24,52,78) 100%);
}
.steps__label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-soft);}
.steps ol{margin:20px 0 0;padding:0;list-style:none;}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:6px 16px;padding:22px 0;border-top:1px solid rgba(255,255,255,.14);}
.steps li:last-child{padding-bottom:0;}
.steps .n{grid-row:1 / span 2;font-size:clamp(30px,2.6vw,40px);line-height:.95;font-weight:700;letter-spacing:-.04em;color:var(--blue-soft);}
.steps h3{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.steps p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.74);}
.steps p strong{color:#fff;}

/* --- Kontakt: gradient natiahnutý cez celú šírku stránky --- */
.contact{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:var(--grad-contact);
  padding-block:clamp(88px,9vw,140px);scroll-margin-top:calc(var(--nav-h) + 8px);
}
.contact .sec-label{color:var(--blue-soft);background:rgba(255,255,255,.1);}
.contact .sec-label::before{background:var(--blue-soft);}
.contact .sec-text{color:rgba(255,255,255,.74);}
.contact .sec-text strong{color:#fff;}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:end;}
.mailto{
  display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  font-size:clamp(28px,3.2vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1;
  color:#fff;position:relative;padding-bottom:12px;
}
.mailto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.3);
  transition:background-color .3s var(--e2);
}
.mailto:hover::after{background:#fff;}
.mailto svg{width:.44em;height:.44em;transition:transform .5s var(--e);}
.mailto:hover svg{transform:translate(5px,-5px);}
.contact__actions{margin-top:clamp(28px,3vw,40px);display:flex;gap:12px;flex-wrap:wrap;}
.contact__list{margin:0;padding:0;list-style:none;display:grid;gap:12px;}
.contact__list li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border-radius:18px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color .3s var(--e2);
}
.contact__list li:hover{background:rgba(255,255,255,.11);}
.contact__list span{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.contact__list b,.contact__list a{font-size:16px;font-weight:600;letter-spacing:-.015em;text-align:right;}

/* ============================================================
   PODSTRÁNKA PROJEKTU — rozloženie v duchu lj.studio
   ============================================================ */
.ph{padding-top:calc(var(--nav-h) + clamp(36px,4.4vw,72px));padding-bottom:clamp(64px,7vw,110px);}
.ph__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.7fr);gap:clamp(28px,4.4vw,80px);align-items:start;
}
/* bočný stĺpec ide so stránkou */
.ph__side{position:sticky;top:calc(var(--nav-h) + 28px);}
.back{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:var(--ink-2);transition:color .25s var(--e2);}
.back svg{width:14px;height:14px;transform:rotate(180deg);transition:transform .4s var(--e);}
.back:hover{color:var(--blue);}
.back:hover svg{transform:rotate(180deg) translateX(4px);}
.meta{margin:28px 0 0;display:grid;gap:14px;}
.meta div{padding-bottom:14px;border-bottom:1px solid var(--line);}
.meta dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.meta dd{margin:4px 0 0;font-size:15.5px;font-weight:500;}
.meta dd a{color:var(--ink);display:inline-flex;align-items:center;gap:6px;word-break:break-all;}
.meta dd a svg{width:11px;height:11px;flex:0 0 auto;}
.meta dd a:hover{text-decoration:underline;text-underline-offset:3px;}

.ph__title{font-size:clamp(28px,2.8vw,42px);line-height:1.12;letter-spacing:-.035em;font-weight:700;max-width:22ch;}
.ph__bar{display:block;width:56px;height:4px;margin-top:18px;background:var(--blue);border-radius:2px;}
.ph__text{margin-top:22px;display:grid;gap:12px;max-width:68ch;}
.ph__text p{font-size:16.5px;line-height:1.7;color:var(--ink-2);}

/* vizuály pod sebou, v šírke textového stĺpca */
.gallery{margin-top:clamp(36px,4vw,56px);display:grid;gap:clamp(14px,1.4vw,22px);}
.gallery figure{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--ink);box-shadow:var(--sh-soft);}
.gallery img{width:100%;height:auto;display:block;}

.more{padding-block:clamp(60px,6vw,100px);border-top:1px solid var(--line);}

/* biela lišta úplne dole na každej stránke */
.foot{background:#fff;border-top:1px solid var(--line);padding-block:clamp(28px,3vw,40px);}
.foot__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4vw,72px);}
.foot__copy{font-size:15px;line-height:1.5;color:var(--ink-2);}
.foot__copy small{display:block;margin-top:3px;font-size:13px;color:var(--ink-3);}
.foot__mail{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--ink);transition:color .25s var(--e2);}
.foot__mail svg{width:12px;height:12px;transition:transform .4s var(--e);}
.foot__mail:hover{color:var(--blue);}
.foot__mail:hover svg{transform:translate(2px,-2px);}

/* ============================================================
   POHYB — pokojný nábeh; vizuály s jemným zväčšením (lj.studio)
   ============================================================ */
[data-r]{opacity:0;transform:translateY(20px);transition:opacity .85s var(--e2) var(--d,0s),transform 1s var(--e) var(--d,0s);}
[data-r].is-in{opacity:1;transform:none;}
[data-r="fade"]{transform:none;}
[data-r="img"]{transform:translateY(46px) scale(.975);transition:opacity 1s var(--e2) var(--d,0s),transform 1.25s var(--e) var(--d,0s);}
[data-r="img"].is-in{transform:none;}
[data-r="img"] img{transform:scale(1.06);transition:transform 1.6s var(--e) var(--d,0s);}
[data-r="img"].is-in img{transform:none;}
html:not(.js) [data-r],html:not(.js) [data-r] img{opacity:1;transform:none;}
html:not(.js) .sec-label::before{transform:none !important;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important;}
  [data-r],[data-r] img{opacity:1;transform:none;}
  .sec-label::before{transform:none !important;}
}

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width:1180px){
  .svc{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(20px,2vw,28px);}
  .svc__cta{grid-column:1 / -1;padding-left:0;flex-direction:row;align-items:center;justify-content:space-between;width:100%;}
  .svc__cta p{max-width:none;}
  .about{grid-template-columns:1fr;}
  .contact__grid{grid-template-columns:1fr;align-items:start;}
}
@media (max-width:900px){
  :root{--nav-h:92px;}
  .nav.is-stuck .nav__bg{inset:10px var(--pill) 10px var(--pill);}
  .nav__inner{transition:padding .3s var(--e2);}
  .nav.is-stuck .nav__inner{padding-inline:34px;}
  .nav__links,.nav .btn{display:none;}
  .burger{display:block;}
  .brand img{height:22px;}
  .hero{background:linear-gradient(112.47deg,rgb(1,9,17) 30.268%,rgb(5,27,46) 51.687%,rgb(46,81,112) 79.227%,rgb(17,75,126) 109.83%);}
  .hero .display{font-size:clamp(36px,10vw,54px);}
  .contact{background:linear-gradient(124.84deg,rgb(1,9,17) 30.268%,rgb(5,27,46) 51.687%,rgb(46,81,112) 79.227%,rgb(17,75,126) 109.83%);}
  .pf__media{aspect-ratio:.8;}
  .ph__grid{grid-template-columns:1fr;}
  .pf__media{aspect-ratio:.8;}
  .ph__side{position:static;}
  .meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
}
@media (max-width:760px){
  .svc{display:flex;flex-direction:column;gap:14px;}
  .svc__cta{flex-direction:column;align-items:flex-start;margin-top:10px;}
  .meta{grid-template-columns:1fr;}
  .contact__list li{padding:16px 18px;}
  .foot__in{grid-template-columns:1fr;gap:16px;}
}
@media (max-width:420px){
  .brand img{height:22px;}
  .btn--big{--bh:64px;font-size:17px;}
  .contact__list b,.contact__list a{font-size:15px;}
}