:root{
  --ink:#0E1116; --paper:#EDEDF4; --paper-2:#E4E4EF; --card:#FFFFFF;
  --deep:#0E1116; --deep-2:#171B24;
  --grad-1:#6C7CFF; --grad-2:#B45CFF; --grad-3:#FF5CA8;
  --grad-1-btn:#4E5FE8; --grad-2-btn:#9838E8;
  --accent:#6C5CE0; --accent-dark:#4E3FBF;
  --ok:#1F9D66; --warn:#8A6212; --bad:#C6412B;
  --ink-soft:#5B5F6E; --line:#E2E2EA; --on-deep:#F2F3F7; --on-deep-soft:#9AA0B4;
  --white:#FFFFFF; --bad-bg:#FCEBEA; --ok-bg:#E9F7EF; --red-lt:#FF8B76; --green-lt:#63D9A0;
  --accent-on-dark:#B9AEFF;
  /* Commissioner замість Unbounded: рівніші, спокійніші літери — і, головне, Unbounded не
     мав сабсету latin-ext, тому в польських і чеських заголовках ł ą ę ś ż ź ć ń ě š č ř ů
     підставлялися системним шрифтом просто посеред слова. Commissioner покриває всі 5 мов
     (latin, latin-ext, cyrillic, cyrillic-ext) і трохи вужчий — довгі заголовки на
     мобільному займають менше рядків. */
  --font-display:'Commissioner',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:48px; --s6:96px;
  --f-xs:.82rem; --f-sm:.92rem; --f-base:1.0625rem; --f-md:1.3rem;
  --f-lg:1.7rem; --f-xl:clamp(1.9rem,1.1rem + 2.4vw,2.9rem);
  --f-hero:clamp(2.3rem,1.2rem + 4vw,4rem);
  --header-h:70px; --wrap:1200px; --t:180ms cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
/* Без overflow-x:hidden: будь-який overflow != visible на html/body вимикає
   position:sticky для всіх нащадків, тобто ламає .site-header нижче.
   Перевірено на 320/375/414/768/1280/1920px у WebKit і Chrome — горизонтального
   скролу без цього правила немає, тож страховка була зайвою. */
html,body{max-width:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:var(--f-base);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0 0 var(--s3)}
h1{font-size:var(--f-hero);font-weight:600}
h2{font-size:var(--f-xl)}
h3{font-size:var(--f-md);font-weight:600}
p{margin:0 0 var(--s3)}
a{color:inherit}
/* --header-real-h ставить script.js із реально виміряної висоти хедера (він
   переноситься на вузьких екранах). Фолбек на --header-h — коли JS вимкнено. */
section{padding:var(--s6) 0;scroll-margin-top:calc(var(--header-real-h, var(--header-h)) + 12px)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
.narrow{max-width:760px}
.section-lead{max-width:62ch;color:var(--ink-soft);font-size:var(--f-md);line-height:1.5}
.band .section-lead{color:var(--on-deep-soft)}
.eyebrow{font-family:var(--font-display);font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);margin:0 0 var(--s3)}
.band .eyebrow,.hero .eyebrow{color:var(--accent-on-dark)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;display:inline-flex;align-items:center;min-height:44px;background:var(--accent);color:var(--white);padding:var(--s2) var(--s3);z-index:100}
.skip:focus{left:var(--s3);top:var(--s2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Градієнт-текст: колірна енергія бренду, перегукується з градієнтом логотипа-хребта Beskit */
.grad-text,h1.grad-text{background:linear-gradient(95deg,var(--grad-1) 0%,var(--grad-2) 45%,var(--grad-3) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);
  border:1px solid transparent;border-radius:10px;font-family:var(--font-text);font-size:var(--f-sm);font-weight:600;
  text-decoration:none;cursor:pointer;transition:transform var(--t),background-color var(--t),color var(--t),box-shadow var(--t)}
.btn-sm{min-height:44px;padding:0 var(--s3);font-size:var(--f-xs)}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(95deg,var(--grad-1-btn),var(--grad-2-btn));color:var(--white)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(108,92,224,.35)}
.btn-primary[disabled]{background:var(--line);color:var(--ink-soft);cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary.is-loading{opacity:.85;cursor:progress}
.btn-ghost,.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--accent);color:var(--accent-dark)}
.hero .btn-ghost{color:var(--on-deep);border-color:rgba(242,243,247,.24)}
.hero .btn-ghost:hover{border-color:rgba(242,243,247,.5)}
.band .btn-outline{color:var(--on-deep);border-color:rgba(242,243,247,.24)}
.band .btn-outline:hover{border-color:rgba(242,243,247,.5)}

/* -webkit-sticky першим: страховка для старих iOS, сучасні ігнорують.
   -webkit-backdrop-filter обов'язковий — без нього розмиття не працює в Safari
   і в УСІХ браузерах на iOS (вони всі на WebKit), хедер лишається просто напівпрозорим. */
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:rgba(247,247,250,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* safe-area: на iPhone з вирізом/островом верх хедера інакше ховається під ним */
.header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);min-height:var(--header-h);padding-top:max(var(--s2),env(safe-area-inset-top));padding-bottom:var(--s2)}
.brand{display:flex;align-items:center;gap:var(--s2);min-height:44px;text-decoration:none;color:var(--ink)}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:var(--f-md)}
.nav{display:flex;gap:var(--s4);margin-inline:auto;flex-wrap:wrap}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:var(--f-sm);min-height:44px;display:inline-flex;align-items:center;transition:color var(--t)}
.nav a:hover{color:var(--accent-dark)}

.lang-switch{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-family:var(--font-text);font-size:var(--f-xs);font-weight:600;letter-spacing:.02em;cursor:pointer;transition:border-color var(--t),color var(--t)}
.lang-btn:hover{border-color:var(--accent)}
.lang-btn svg{color:var(--ink-soft);transition:transform var(--t)}
.lang-switch.is-open .lang-btn svg{transform:rotate(180deg)}
.lang-menu{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 28px rgba(14,17,22,.12);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--t),transform var(--t),visibility var(--t);z-index:60}
.lang-switch.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu li{padding:9px 12px;min-height:44px;display:flex;align-items:center;border-radius:8px;font-size:var(--f-sm);color:var(--ink);cursor:pointer;transition:background var(--t)}
.lang-menu li:hover,.lang-menu li:focus-visible{background:var(--paper-2)}
.lang-menu li[aria-selected="true"]{color:var(--accent-dark);font-weight:600}
@media (max-width:639px){
  .header-inner{justify-content:space-between}
  .brand{order:1}
  .lang-switch{order:2}
  .nav{order:3}
  .header-inner > .btn{order:4}
}

.hero{background:radial-gradient(120% 100% at 15% 0%,#1B2030 0%,var(--deep) 55%);color:var(--on-deep);
  padding-top:var(--s6);padding-bottom:var(--s6);overflow:hidden}
.hero-grid{display:grid;gap:var(--s5);align-items:center}
.hero h1{color:var(--white)}
.lead{font-size:var(--f-md);color:var(--on-deep-soft);max-width:48ch;line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 var(--s4)}
.facts{display:flex;gap:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(242,243,247,.14);flex-wrap:wrap}
.facts b{font-family:var(--font-display);font-size:var(--f-lg);display:block;line-height:1;
  background:linear-gradient(95deg,var(--grad-1),var(--grad-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.facts span{font-size:var(--f-xs);color:var(--on-deep-soft)}
.hero-visual{width:100%}
.hero-visual svg{width:100%;height:auto;display:block}

.cards{display:grid;gap:var(--s4);margin-top:var(--s5)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:var(--s4);
  display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,17,22,.08);border-color:#D7D7E8}
.icon{width:30px;height:30px;color:var(--accent-dark);margin-bottom:var(--s3)}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--ink-soft);font-size:var(--f-sm);line-height:1.55;max-width:44ch;margin:0}

.band{background:var(--deep-2);color:var(--on-deep)}
.band h2{color:var(--white)}
.band .card{background:rgba(242,243,247,.05);border-color:rgba(242,243,247,.12);color:var(--on-deep)}
.band .card h3{color:var(--white)}
.band .card p{color:var(--on-deep-soft)}
.cards-why{grid-template-columns:1fr}

.testimonial-grid{margin-top:var(--s5)}
.testimonial-card{background:rgba(242,243,247,.05);border:1px solid rgba(242,243,247,.12);border-radius:16px;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.testimonial-quote{color:var(--on-deep);font-size:var(--f-base);line-height:1.55;margin:0;font-style:italic}
.testimonial-who{color:var(--on-deep-soft);font-size:var(--f-xs);margin:0}

.pricing-grid{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:900px){ .addons-grid{grid-template-columns:repeat(4,1fr)} }
.audit-intro{max-width:72ch;color:var(--on-deep-soft);font-size:var(--f-base);line-height:1.6;margin-top:var(--s3)}
.audit-grid{display:grid;gap:var(--s4);margin-top:var(--s5)}
.audit-item{background:rgba(242,243,247,.05);border:1px solid rgba(242,243,247,.12);border-radius:16px;padding:var(--s4)}
.audit-item h3{color:var(--white);font-size:var(--f-md);margin-bottom:var(--s2)}
.audit-item p{color:var(--on-deep-soft);font-size:var(--f-sm);line-height:1.55;margin:0}
.audit-outcome{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid rgba(242,243,247,.14)}
.audit-outcome h3{color:var(--white);margin-bottom:var(--s2)}
.audit-outcome p{color:var(--on-deep-soft);max-width:64ch;margin-bottom:var(--s4)}
@media (min-width:640px){ .audit-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .audit-grid{grid-template-columns:repeat(3,1fr)} }

.adv-grid{margin-top:var(--s5)}
.adv-example{margin-top:var(--s5);padding:var(--s4) var(--s4);border-radius:16px;background:linear-gradient(135deg,rgba(108,124,255,.08),rgba(255,92,168,.08));border:1px solid rgba(108,92,224,.18)}
.adv-example-label{font-size:var(--f-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-dark);margin-bottom:var(--s2)}
.adv-example-text{color:var(--ink-soft);font-size:var(--f-sm);line-height:1.6;margin:0;max-width:72ch}
@media (min-width:900px){ .adv-grid{grid-template-columns:repeat(3,1fr)} }

.tech-stack{padding-top:var(--s5);padding-bottom:var(--s5);text-align:center}
.tech-heading{max-width:44ch;margin-left:auto;margin-right:auto}
.tech-badges{list-style:none;margin:var(--s5) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);max-width:640px}
.tech-badges li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--s4);border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:var(--f-sm);font-weight:600;color:var(--ink)}
.tech-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--grad-1),var(--grad-2));color:var(--white);font-size:.68rem;font-weight:700;font-family:var(--font-text)}
.tech-guarantee{margin:var(--s4) auto 0;max-width:52ch;color:var(--ink-soft);font-size:var(--f-sm)}
.tier{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:var(--s5) var(--s4);
  display:flex;flex-direction:column;position:relative}
.tier-featured{border:2px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(135deg,var(--grad-1),var(--grad-2),var(--grad-3)) border-box;
  box-shadow:0 20px 50px rgba(108,92,224,.16)}
.tier-badge{position:absolute;top:-13px;left:var(--s4);background:linear-gradient(95deg,var(--grad-1-btn),var(--grad-2-btn));
  color:var(--white);font-size:var(--f-xs);font-weight:700;padding:4px 14px;border-radius:999px}
.tier h3{margin-bottom:var(--s2)}
.tier-price{font-family:var(--font-display);font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s2)}
.tier-desc{color:var(--ink-soft);font-size:var(--f-sm);margin:0 0 var(--s4)}
.tier-list{list-style:none;margin:0 0 var(--s5);padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.tier-list li{font-size:var(--f-sm);padding-left:26px;position:relative;color:var(--ink)}
.tier-list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.tier .btn{margin-top:auto}
.pricing-note{margin-top:var(--s4);font-size:var(--f-sm);color:var(--ink-soft)}

/* каруселі: work-grid — рядок карток фіксованої ширини, не сітка.
   Кількість карток необмежена — контейнер лише росте вбік, верстка не ламається. */
.work-grid{display:flex;gap:var(--s4);width:max-content}
.work-carousel{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scroll-padding-left:0;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(242,243,247,.25) transparent;
  padding:0 0 var(--s2);max-width:100%}
.work-carousel:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}
.work-card{flex:0 0 min(300px,80vw);scroll-snap-align:start}
.work-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.work-head h2{margin-bottom:0}
.work-nav{display:flex;gap:var(--s2)}
.work-arrow{width:44px;height:44px;border-radius:999px;border:1px solid rgba(242,243,247,.24);
  background:transparent;color:var(--on-deep);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color var(--t),background-color var(--t)}
.work-arrow:hover{border-color:rgba(242,243,247,.5);background:rgba(242,243,247,.06)}
.work-arrow:disabled{opacity:.35;cursor:default;pointer-events:none}
.work-card{background:rgba(242,243,247,.05);border:1px solid rgba(242,243,247,.12);border-radius:16px;overflow:hidden;padding:0}
.work-thumb{aspect-ratio:16/9;display:block;width:100%;height:auto;object-fit:cover}
/* кольори мініатюр натякають на палітру реального проєкту, не довільні */
.work-thumb-1{background:linear-gradient(155deg,#B5843A,#254E37)}   /* Тяга: латунь + графіт-зелень */
.work-thumb-2{background:linear-gradient(155deg,#5FC9D6,#0E3B44)}   /* Криниця: вода */
.work-thumb-3{background:linear-gradient(155deg,#3A3F47,#171B24)}   /* Автосервіс Болехів: індустріальний графіт */
.work-thumb-4{background:linear-gradient(155deg,#3A2A47,#171B24)}   /* Арка: приглушений медичний */
.work-thumb-5{background:linear-gradient(155deg,#B5654A,#2A1810)}   /* Долоні: теплий теракот, тактильність, не лавандовий кліше */
.work-thumb-6{background:linear-gradient(155deg,#C0392B,#1A0E0C)}   /* Тонус: енергійний червоний, спорт/реабілітація */
.work-thumb-7{background:linear-gradient(155deg,#D9C9A8,#0E3B44)}   /* Емаль: кремовий + бірюзовий, не біло-блакитний кліше */
.work-thumb-8{background:linear-gradient(155deg,#8A5A44,#1E1B1A)}   /* Абрис: графіт + теракот, не рожево-золотий кліше */
/* шаблони — палітри взяті з реальних дизайн-систем самих шаблонів */
.work-thumb-9{background:linear-gradient(155deg,#41573B,#B5622C)}   /* Портфоліо фахівця: мох + глина */
.work-thumb-10{background:linear-gradient(155deg,#E8B23D,#2B211B)}  /* Візитівка: золото + еспресо */
.work-thumb-11{background:linear-gradient(155deg,#2A5FE0,#151B26)}  /* Сторінка послуг: синій + сланець */
.work-template-badge{display:inline-block;margin:var(--s4) var(--s4) 0;padding:4px 10px;border-radius:999px;background:rgba(108,124,255,.16);border:1px solid rgba(108,124,255,.35);color:var(--accent-on-dark);font-size:.72rem;font-weight:600;letter-spacing:.02em}
.work-card h3,.work-card p{padding-left:var(--s4);padding-right:var(--s4)}
.work-card h3{margin-top:var(--s4)}
.work-template-badge + h3{margin-top:var(--s3)}
.work-card h3{margin-top:var(--s4)}
.work-card p{color:var(--on-deep-soft);font-size:var(--f-sm);padding-bottom:var(--s4);margin:0}

.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:var(--s3)}
.qa summary{cursor:pointer;padding:var(--s4);font-weight:600;font-size:var(--f-base);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:56px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--font-display);font-size:var(--f-lg);color:var(--accent);flex:none}
.qa[open] summary::after{content:"–"}
.qa p{padding:0 var(--s4) var(--s4);margin:0;color:var(--ink-soft);max-width:62ch}

.lead-grid{display:grid;gap:var(--s5)}
.contact-links{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.contact-links a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--on-deep);text-decoration:none;font-size:var(--f-sm);transition:color var(--t)}
.contact-links a:hover{color:var(--accent-on-dark)}
.contact-links svg{color:var(--accent-on-dark);flex-shrink:0}
@media (min-width:640px){ .contact-links{flex-direction:row;flex-wrap:wrap;gap:var(--s4)} }
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--f-sm);font-weight:600;margin-bottom:var(--s2);color:var(--on-deep)}
input[type=text],select,textarea{width:100%;min-height:48px;padding:var(--s2) var(--s3);background:var(--white);
  border:1px solid transparent;border-radius:10px;font-family:inherit;font-size:var(--f-base);color:var(--ink);
  transition:box-shadow var(--t)}
textarea{min-height:104px;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{box-shadow:0 0 0 2px rgba(242,243,247,.3)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(108,92,224,.5)}
input[aria-invalid=true],textarea[aria-invalid=true]{box-shadow:0 0 0 2px var(--bad)}
.err{display:block;min-height:0;margin-top:var(--s1);font-size:var(--f-xs);color:var(--red-lt)}
.err:empty{margin:0}
.check{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);align-items:start}
.check input{width:22px;height:22px;min-height:22px;margin-top:2px;accent-color:var(--accent)}
.check label{font-weight:400;font-size:var(--f-xs);color:var(--on-deep-soft);line-height:1.5;margin:0}
.check .err{grid-column:1 / -1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-bottom:var(--s3);font-size:var(--f-sm);border-radius:10px}
.form-status:not(:empty){padding:var(--s3);background:rgba(99,217,160,.15);color:var(--green-lt);border:1px solid rgba(99,217,160,.4)}
.form-status.is-error:not(:empty){background:rgba(255,139,118,.15);color:var(--red-lt);border-color:rgba(255,139,118,.4)}

.site-footer{background:var(--ink);color:var(--on-deep-soft);padding:var(--s5) 0 var(--s4);font-size:var(--f-sm)}
.footer-grid{display:grid;gap:var(--s4)}
.site-footer h3{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--s2);color:var(--on-deep)}
.site-footer .brand-text{display:block;margin-bottom:var(--s2);color:var(--white)}
.site-footer p{margin:0 0 var(--s2)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--white)}
.footer-bottom{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(242,243,247,.12);font-size:var(--f-xs)}
.footer-bottom p{margin:0}

.js .reveal{opacity:0;transform:translateY(16px);transition:opacity 320ms ease-out,transform 320ms ease-out}
.js .reveal.is-in{opacity:1;transform:none}

@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} .work-card{flex-basis:340px} }
@media (min-width:900px){ .work-card{flex-basis:360px} }
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards-why{grid-template-columns:repeat(4,1fr)}
  .testimonial-grid{grid-template-columns:repeat(3,1fr)}
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  .lead-grid{grid-template-columns:1fr 1.1fr}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
}
@media (min-width:1440px){ :root{--wrap:1320px;--s6:112px} }
@media (min-width:1920px){ :root{--wrap:1440px} }
@media (max-width:899px){ .cards-why{grid-template-columns:1fr} .tier-featured{order:-1} }
@media (max-width:639px){
  section{padding:var(--s5) 0} .wrap{padding:0 var(--s3)}
  .nav{order:3;width:100%;gap:var(--s3);justify-content:space-between;margin:0}
  .btn{width:100%} .hero-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
  .work-carousel{scroll-behavior:auto}
}