@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --page-bg: #f2f2f2;
  --hero-bg: #7c7a75;
  --dark-bg: #000000;
  --ink: #111111;
  --muted: #6e6e6a;
  --muted-2: #9a9a96;
  --accent: #ff1a05;
  --card: #ffffff;
  --line: rgba(0, 0, 0, 0.09);
  --line-dark: rgba(255, 255, 255, 0.10);
  --radius: 16px;
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ---- Home page scroll ----
   Previously this page used a nested scroll container with native CSS
   scroll-snap (scroll-snap-type: y proximity). That fought with the
   scroll-linked JS animations (workstack scale/dim, services parallax)
   and caused visible jank — worse than the plain window-scroll + Lenis
   setup every other page uses. The home page now scrolls exactly like
   work.html / blog.html / contact.html: normal document scroll, smoothed
   by Lenis. These wrapper elements/classes are kept in the markup (so
   nothing else has to be restructured) but no longer do anything special.
*/
.snap-container { /* no longer a scroll container — flows with the document */ }
.snap-section { position: relative; }
.snap-footer .footer { width: 100%; }

/* Pause continuously-running decorative animations while their section is
   scrolled out of view — purely animation-play-state, never touches layout. */
.snap-offscreen .logorow__track,
.snap-offscreen .tst2__track {
  animation-play-state: paused;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
.section { padding: 92px 0; position: relative; }
.section--tight { padding: 64px 0; }

/* Framer-like guide lines */
.frame { position: relative; }
.frame::before, .frame::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
  z-index: 0;
}
.frame::before { left: 32px; }
.frame::after { right: 32px; }
@media (max-width: 1360px) {
  .frame::before, .frame::after { display: none; }
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
p { margin: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}
.eyebrow svg { color: var(--accent); }
.eyebrow--light { color: #fff; }

.section-head { text-align: center; margin-bottom: 56px; }
.section-title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  margin-top: 18px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; border-radius: 999px;
  padding: 13px 22px; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: #0d0d0d; color: #fff; }
.btn-dark:hover { background: #262626; }
.btn-light { background: transparent; color: var(--ink); border-color: rgba(0,0,0,.18); }
.btn-light:hover { background: rgba(0,0,0,.05); }
.btn-white { background: #fff; color: var(--ink); }
.btn-dot::after { content:""; width:6px; height:6px; border-radius:50%; background: var(--accent); }
.btn-icon {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: #0d0d0d; color: #fff; margin-left: 4px;
}
.btn-white .btn-icon { background: #0d0d0d; }
.btn-dark .btn-icon { background: #fff; color: #0d0d0d; }
.btn-arrowcircle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#0d0d0d; color:#fff; }

/* on hero (light text) */
.on-hero .btn-light { color: #fff; border-color: rgba(255,255,255,.35); }
.on-hero .btn-light:hover { background: rgba(255,255,255,.12); }
.on-hero .btn-white { background:#fff; color:#111; }

/* ---------- Navbar ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 22px 0; transition: color .45s ease; }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-radius: 999px;
  background: transparent;
  transition: background .45s cubic-bezier(.16,1,.3,1), gap .45s cubic-bezier(.16,1,.3,1),
              padding .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, max-width .45s cubic-bezier(.16,1,.3,1);
}
.nav__logo { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; display: inline-flex; align-items: center; }
.nav__logo img { height: 32px; width: auto; display: block; }
.nav__logo sup { font-size: 11px; top: -0.7em; }
.nav__pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: none;
  padding: 7px 10px; border-radius: 999px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); opacity: .89;
  transition: background .45s ease, color .45s ease;
}
.nav__link { font-size: 15px; font-weight: 500; padding: 6px 14px; border-radius: 999px; transition: background .2s; }
.nav__link:hover { background: rgba(255,255,255,.14); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.08);
  border: none; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); opacity: .89;
  transition: transform .25s, background .45s ease, color .45s ease;
}
.nav__cta:hover { transform: translateY(-2px); }
.nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nav__burger { display: none; background: transparent; border: 0; cursor: pointer; }
.nav__mobile { display: none; }

.nav--dark { color: #fff; }
.nav--light .nav__pill, .nav--light .nav__cta {
  background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.08); color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.nav--light .nav__link:hover { background: rgba(0,0,0,.06); }
.nav--light { color: var(--ink); }

/* ---- Split -> merge on scroll ----
   At rest: logo, link-pill, and CTA sit as three separate floating islands
   with gaps between them (the markup/rules above). Once scrolled past the
   hero, they visually merge into one continuous bar: the gap between them
   closes, .nav__inner grows its own shared blurred/solid background, and
   the individual .nav__pill background fades away since it's now sitting
   on the shared backdrop instead of its own. Because the merged bar always
   supplies its own dark background, nav text can just always be white here
   — no need to track which section is scrolled underneath it.
   Selectors are chained as .nav.nav--scrolled (not just .nav--scrolled) so
   this always wins over .nav--light/.nav--dark regardless of class order. */
.nav.nav--scrolled { color: #fff; }
.nav.nav--scrolled .nav__inner {
  gap: 2px;
  max-width: 640px;
  justify-content: center;
  background: rgba(13,13,13,.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.nav.nav--scrolled .nav__pill, .nav.nav--scrolled .nav__cta { border: none; }
.nav.nav--scrolled .nav__pill { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; box-shadow: none; color: #fff; }
.nav.nav--scrolled .nav__link:hover { background: rgba(255,255,255,.14); }
.nav.nav--scrolled .nav__cta { background: #fff; color: #0d0d0d; opacity: 1; box-shadow: none; }

@media (max-width: 900px) {
  .nav__pill, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; color: inherit; }
  .nav__mobile {
    display: flex; flex-direction: column; gap: 4px; margin: 16px 32px 0;
    background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.18);
  }
  .nav__mobile[hidden] { display: none; }
  .nav__mlink { color: #111; padding: 12px 14px; border-radius: 10px; font-weight: 500; }
  .nav__mlink:hover { background: #f2f2f2; }
}

/* ---------- Hero ---------- */
.hero { background: var(--hero-bg); color: #fff; min-height: 100vh; position: relative; display: flex; align-items: flex-end; padding-bottom: 64px; overflow: hidden; }
.hero__anim { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--hero-bg); }
.hero__bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bgtint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55) 78%, rgba(0,0,0,.7)); }
.hero .container { position: relative; z-index: 2; }
.hero__eyebrow { color: #fff; margin-bottom: 14px; }
.hero__title { font-weight: 800; letter-spacing: -0.05em; line-height: .86; }
.hero__title img { height: clamp(48px, 10vw, 150px); width: auto; display: block; max-width: 100%; }
.hero__title sup { font-size: 0.3em; top: -1.1em; font-weight: 700; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-top: 110px; }
.hero__desc { max-width: 380px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.92); }
.hero__btns { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.hero__slider { position: relative; }
.hero__track { display: flex; gap: 16px; align-items: center; }
.hero__card {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; aspect-ratio: 1.54839;
  border-top-left-radius: 12px; border-bottom-right-radius: 12px;
  background: rgba(255,255,255,.08);
}
.hero__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__cardoverlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.hero__cardlabel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; text-align: center; padding: 0 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hero__progress { display: flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 13px; color: #fff; }
.hero__bar { flex: 1; height: 1px; background: rgba(255,255,255,.2); position: relative; }
.hero__bar::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: #fff; }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.about__title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; max-width: 820px; }
.about__title-muted { color: #b7b6b2; }
.about__cta { margin-top: 26px; }
.about__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; margin-left: 28%; }
.muted-title { color: #b7b6b2; }
.tcard { background: #fff; border-radius: var(--radius); padding: 20px; }
.tcard__stars { display: flex; gap: 4px; color: var(--accent); margin-bottom: 18px; }
.tcard__quote { font-size: 16px; line-height: 1.5; color: #333; margin-bottom: 26px; }
.tcard__person { display: flex; align-items: center; gap: 12px; }
.tcard__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.tcard__name { font-weight: 700; font-size: 15px; }
.tcard__role { font-size: 13px; color: var(--muted); }
.statcard { background: #fff; border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; min-height: 220px; }
.statcard__top { display: flex; align-items: baseline; gap: 12px; }
.statcard__num { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; }
.statcard__label { font-size: 15px; color: var(--muted); }
.statcard__img { position: absolute; right: 24px; top: 24px; width: 110px; height: 130px; object-fit: cover; border-radius: 14px; }

/* ---------- Section label block (left aligned intro) ---------- */
.introblock { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; margin-bottom: 56px; }

/* ---------- Work (home + page) ---------- */
.work__list { display: flex; flex-direction: column; gap: 20px; }
.workstack { display: flex; flex-direction: column; gap: 46px; padding-bottom: 80px; }
.workstack__item { position: sticky; will-change: transform; }
.workstack__inner { transition: transform .05s linear, filter .05s linear; will-change: transform, filter; }
.js-parallax-img { will-change: transform; }
.workstack__item .projcard { box-shadow: 0 -18px 50px rgba(0,0,0,.22); }
.projcard { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; display: block; }
.projcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.projcard:hover img { transform: scale(1.05); }
.projcard__num { position: absolute; top: 24px; left: 28px; font-size: 44px; font-weight: 800; color: rgba(255,255,255,.6); z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.projcard__body { position: absolute; left: 32px; bottom: 30px; right: 32px; color: #fff; z-index: 2; }
.projcard__title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.projcard__desc { max-width: 460px; margin-top: 8px; font-size: 15px; color: rgb(240,240,240); line-height: 1.5; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.projcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%); z-index: 1; }

/* ---------- Case study page ---------- */
.casehero { padding: 160px 0 90px; background: var(--dark-bg); color: #fff; }
.casehero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.casehero__title { font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.casehero__desc { font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.6; margin-top: 24px; max-width: 480px; }
.casemeta { display: flex; flex-direction: column; gap: 14px; margin-top: 44px; }
.casemeta__item { display: flex; align-items: baseline; gap: 24px; }
.casemeta__item .lbl { width: 110px; flex: none; font-size: 16px; font-weight: 700; }
.casemeta__item .val { font-size: 15px; color: rgba(255,255,255,.62); }
.caseback { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-top: 32px; }
.casehero__stackwrap { height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.casehero__stack { display: flex; flex-direction: column; gap: 20px; width: 100%; animation: caseStackScroll 26s linear infinite; }
.casehero__stack img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); display: block; flex: none; }
@keyframes caseStackScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (max-width: 900px) { .casehero__stackwrap { height: 480px; } }
@media (max-width: 900px) {
  .casehero__grid { grid-template-columns: 1fr; }
}
.workgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.workgrid .projcard { aspect-ratio: 4/3; }
@media (max-width: 820px) { .workgrid { grid-template-columns: 1fr; } }

/* marquee */
.marquee { overflow: hidden; width: 100%; }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track img { height: 260px; width: auto; border-radius: 16px; object-fit: cover; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee--slow .marquee__track { animation-duration: 60s; }

/* logos marquee (footer of why) */
.logos { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; opacity: .55; }
.logoitem { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #111; }

/* ---------- Services ---------- */
.svc { border-top: 1px solid var(--line); }
.svc__row { display: grid; grid-template-columns: 80px 1fr auto; gap: 30px; align-items: center; padding: 30px 4px; border-bottom: 1px solid var(--line); cursor: default; transition: padding .3s; }
.svc__row:hover { padding-left: 14px; }
.svc__num { font-size: 15px; color: var(--muted); font-weight: 500; }
.svc__title { font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
.svc__tags { display: flex; gap: 10px; flex-wrap: wrap; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: #333; background: #fff; }
.svc__feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: #fff; border-radius: var(--radius); overflow: hidden; margin: 22px 0; }
.svc__feature img { width: 100%; height: 100%; object-fit: cover; }
.svc__featurebody { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.svc__featuretitle { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }

.svcbanner { width: 100%; border-radius: var(--radius); overflow: hidden; margin-top: 30px; }
.svcbanner img { width: 100%; height: auto; }

/* ---------- Process ---------- */
.proc-sec { overflow: visible; }
.proc__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.proc__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.proc-sec .container { position: relative; z-index: 1; }
/* ---- Process — static grid, cards fan/skew with scroll velocity ---- */
.proc__grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; justify-content: center; }
.proccard {
  background: #fff;
  color: #0d0d0d;
  border-radius: 16px;
  padding: 20px;
  min-height: 138px;
  width: 202px;
  flex: 0 0 202px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  --r: 0deg;
  transform-origin: top center;
  transform: rotate(var(--r));
  transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  will-change: transform;
}
.proccard:hover {
  transform: rotate(var(--r)) scale(1.22) translateY(4%);
  z-index: 5;
  box-shadow: 0 34px 64px rgba(0,0,0,.24);
}
.proccard--dark { background: #0d0d0d; color: #fff; }
.proccard__icon { width: 36px; height: 36px; object-fit: contain; display: block; margin-bottom: 34px; }
.proccard__title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 9px; }
.proccard__desc { font-size: 13px; line-height: 1.5; color: var(--muted); }
.proccard--dark .proccard__desc { color: rgba(255,255,255,.65); }

@media (max-width: 900px) {
  .proccard { width: 36vw; flex-basis: 36vw; }
}
@media (max-width: 560px) {
  .proccard { width: 65vw; flex-basis: 65vw; }
}
.proc__intro { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.proc__introtitle { font-size: clamp(30px, 4vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; margin: 18px 0 26px; }

/* ---------- Why choose ---------- */
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.why__title { font-size: clamp(30px, 4vw, 54px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin: 18px 0; }
.why__text { font-size: 17px; color: var(--muted); line-height: 1.5; max-width: 460px; }
.why__badge { display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 10px 18px 10px 10px; margin-bottom: 24px; font-size: 14px; font-weight: 600; }
.why__badge img { width: 34px; height: 34px; }
.whycard { background: #fff; border-radius: var(--radius); overflow: hidden; }
.whycard img { width: 100%; height: 220px; object-fit: cover; }
.whycard__body { padding: 26px 28px 30px; }
.whycard__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.whycard__text { font-size: 15px; color: var(--muted); margin-top: 8px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.statbig { background: #fff; border-radius: var(--radius); overflow: hidden; }
.statbig img { width: 100%; height: 180px; object-fit: cover; }
.statbig__body { padding: 24px; }
.statbig__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.statbig__num { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; margin: 14px 0 8px; }
.statbig__desc { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* ---------- Pricing ---------- */
.price__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; max-width: 85%; margin: 0 auto; }
.pricecard { background: #fff; border-radius: var(--radius); padding: 34px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pricecard--dark { background: #0d0d0d; color: #fff; }
.price__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 25px; }
.price__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.price__title { font-size: clamp(26px, 3.1vw, 39px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.price__title span { display: block; }
.price__desc { color: var(--muted); font-size: 15px; margin: 19px 0 26px; line-height: 1.5; max-width: 272px; }
.pricecard--dark .price__desc { color: rgba(255,255,255,.7); }
.price__pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; border-radius: 70px; padding: 15px 26px; margin-top: 3px; width: fit-content;
}
.price__from { font-size: 13px; color: rgb(231,231,231); }
.price__amountrow { display: flex; align-items: baseline; gap: 6px; }
.price__value { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: #fff; line-height: 1.15; }
.price__per { font-size: 13px; color: rgb(231,231,231); }
.price__foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 29px; padding-top: 20px; border-top: 1px solid var(--line); }
.pricecard--dark .price__foot { border-color: var(--line-dark); }
.price__note { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.price__note img { width: 29px; height: 29px; }

/* ---------- Testimonials ---------- */
.tst__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tstcard { border-radius: var(--radius); overflow: hidden; background: #fff; min-height: 360px; display: flex; flex-direction: column; }
.tstcard--image { position: relative; color: #fff; }
.tstcard--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tstcard--image::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6)); }
.tstcard__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; position: relative; z-index: 2; }
.tstcard__who .n { font-weight: 700; font-size: 15px; }
.tstcard__who .r { font-size: 13px; opacity: .75; }
.tstcard__x { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; }
.tstcard--quote .tstcard__x { background: #f1f0ee; color: #111; }
.tstcard__body { padding: 0 24px 24px; position: relative; z-index: 2; margin-top: auto; }
.tstcard__quote { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.tstcard--quote .tstcard__quote { color: #111; }
.tstcard__foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; position: relative; z-index: 2; border-top: 1px solid var(--line); }
.tstcard--image .tstcard__foot { border-color: rgba(255,255,255,.2); }
.tstcard__stars { display: flex; gap: 4px; color: var(--accent); }
.tstcard__date { font-size: 13px; opacity: .8; }

/* ---------- FAQ (dark) ---------- */
.faq { background: var(--dark-bg); color: #fff; padding: 120px 0; }
.faq .eyebrow { color: #fff; }
.faq__outro { background: #f2f1ee; }
.faq__logomarquee { overflow: hidden; width: 100%; margin-top: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; }
.faq__logotrack { display: flex; gap: 56px; width: max-content; align-items: center; animation: faqlogomarq 60s linear infinite; }
.faq__word { font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 76px; font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; color: rgba(13,13,13,.4); flex: none; }
.faq__word b { font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; color: #0d0d0d; }
.faq__word sup { font-size: .62em; top: -0.62em; }
@media (max-width: 700px) { .faq__word { font-size: 42px; } }
@keyframes faqlogomarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.faq__list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faqitem { background: rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; }
.faqitem__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; cursor: pointer; font-size: 20px; font-weight: 500; }
.faqitem__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(245,245,245,.1); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.faqitem__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faqitem__a > div { padding: 0 20px 20px; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.6; max-width: 92%; }
.faqitem--open .faqitem__a { max-height: 260px; }

/* ---------- Footer ---------- */
.footer { background: var(--page-bg); padding-top: 0; }
.footer__marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; overflow: hidden; }
.footer__mtrack { display: flex; gap: 40px; width: max-content; animation: marquee 30s linear infinite; align-items: center; }
.footer__word { font-size: 58px; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.footer__word:nth-child(even) { color: rgba(0,0,0,.25); }
.footer__word sup { font-size: .35em; top: -1em; }
.footer__main { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 0 20px; }
.footer__img { border-radius: var(--radius); overflow: hidden; max-width: 320px; }
.footer__img img { width: 100%; height: 180px; object-fit: cover; }
.footer__buildrow { display: flex; align-items: center; gap: 30px; margin-top: 22px; font-weight: 600; }
.footer__buildrow .lbl { display: inline-flex; align-items: center; gap: 8px; }
.footer__buildrow .lbl svg { color: var(--accent); }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.footer__coltitle { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.footer__links { display: flex; flex-direction: column; gap: 16px; }
.footer__links a { font-weight: 700; font-size: 18px; transition: color .2s; }
.footer__links a:hover { color: var(--accent); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.footer__legal { display: flex; gap: 40px; }
.footer__legal a:hover { color: var(--ink); }
.footer__wordmark { width: 100%; aspect-ratio: 2.938; height: auto; overflow: hidden; margin-top: 56px; position: relative; }
.footer__wordmark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

/* ---------- Blog ---------- */
.blog__intro { font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.18; max-width: 960px; }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog__hero { display: flex; justify-content: center; gap: 18px; padding-top: 20px; }
.blog__heroimg { width: 220px; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.14); flex: none; }
.blog__heroimg img { width: 100%; height: 280px; object-fit: cover; display: block; }
.blog__heroimg:nth-child(2) { margin-top: -24px; width: 240px; }
@media (max-width: 700px) {
  .blog__hero { flex-wrap: wrap; }
  .blog__heroimg { width: 140px; }
  .blog__heroimg img { height: 180px; }
  .blog__heroimg:nth-child(2) { margin-top: 0; width: 140px; }
}
.blogcard { display: block; }
.blogcard__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.blogcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.blogcard:hover .blogcard__img img { transform: scale(1.05); }
.blogcard__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-top: 20px; line-height: 1.2; }
.blogcard__excerpt { font-size: 15px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.blogcard__date { font-size: 13px; color: var(--muted-2); letter-spacing: .06em; margin-top: 14px; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }
.contact__block { margin-bottom: 34px; }
.contact__label { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.contact__value { font-size: 17px; }
.contact__value a:hover { color: var(--accent); }
.contact__socials { display: flex; gap: 12px; margin-top: 10px; }
.contact__soc { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s, background .2s; }
.contact__soc:hover { transform: translateY(-2px); background: #0d0d0d; color: #fff; }
.contactform { background: #fff; border-radius: var(--radius); padding: 44px; }
.contactform h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 30px; letter-spacing: -0.03em; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px;
  font-family: inherit; font-size: 15px; background: #fafafa; color: var(--ink); outline: none;
  transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus { border-color: #0d0d0d; background: #fff; }
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- Contact (dark, exact clone) ---------- */
.contact-dark { background: var(--dark-bg); color: #fff; padding-top: 150px; padding-bottom: 90px; }
.contact-dark .nav { color: #fff; }
.contact__wrap { display: grid; grid-template-columns: 0.62fr 1fr; gap: 66px; }
.contact__card {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 560px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 34px;
  isolation: isolate;
}
.contact__card > * { position: relative; z-index: 2; }
.contact__cardbg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.contact__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.75) 100%);
}
.contact__cardname { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.contact__cardaddr { font-size: 15px; line-height: 1.5; max-width: 220px; margin-top: 14px; color: rgba(255,255,255,.9); }
.contact__cardrows { display: flex; flex-direction: column; }
.contact__cardrow { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; }
.contact__cardrow .lbl { font-weight: 600; }
.contact__cardrow .val { color: rgba(255,255,255,.95); }
.contact__cardrow .val a:hover { color: var(--accent); }
.contact__socrow { display: flex; gap: 14px; }
.contact__socrow a { color: #fff; opacity: .95; transition: opacity .2s, transform .2s; }
.contact__socrow a:hover { opacity: 1; transform: translateY(-2px); }

.contact__form { padding: 8px 0; }
.contact__form h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin-bottom: 34px; }
.form-errors { background: rgba(255,26,5,.12); border: 1px solid rgba(255,26,5,.35); border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; }
.form-errors p { color: #ff8c7a; font-size: 14px; margin: 4px 0; }
.form-success { background: rgba(80,220,140,.12); border: 1px solid rgba(80,220,140,.35); border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; color: #7de6a8; font-size: 14px; }
.dfield { margin-bottom: 22px; }
.dfield label { display: block; font-size: 15px; color: rgba(255,255,255,.8); margin-bottom: 12px; }
.dfield input, .dfield textarea {
  width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 15px 16px;
  font-family: inherit; font-size: 15px; background: #171717; color: #fff; outline: none;
  transition: border-color .2s, background .2s;
}
.dfield input::placeholder, .dfield textarea::placeholder { color: rgba(255,255,255,.35); }
.dfield input:focus, .dfield textarea:focus { border-color: rgba(255,255,255,.4); background: #1c1c1c; }
.dfield textarea { min-height: 120px; resize: vertical; }
.contact__form .btn-white .btn-icon { background: #0d0d0d; color: #fff; }

.footer__marquee--dark { background: var(--dark-bg); border-color: rgba(255,255,255,.08); }
.footer__marquee--dark .footer__word { color: #fff; }
.footer__marquee--dark .footer__word:nth-child(even) { color: rgba(255,255,255,.28); }

@media (max-width: 900px) {
  .contact__wrap { grid-template-columns: 1fr; gap: 24px; }
  .contact__form { padding: 8px 0; }
  .contact__card { min-height: 440px; }
}

/* ---------- WHY CHOOSE US (redesigned) ---------- */
.why2grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 30px; align-items: stretch; }
/* The teacher's real site renders this as a <canvas> (Three.js, WebGL) at
   451x572 internal resolution / 482x612 CSS px — not a static photo. We
   can't reproduce arbitrary WebGL content without knowing what it draws,
   so this stays an <img>, but sized to match that exact 482x612 footprint. */
.why2img { border-radius: 22px; overflow: hidden; width: 482px; height: 612px; }
.why2img img { width: 100%; height: 100%; object-fit: cover; }
.why2right { display: flex; flex-direction: column; height: 612px; }
.why2text { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.32; }
.why2badgerow { display: flex; align-items: center; justify-content: space-between; margin: 24px 0; padding-top: 22px; border-top: 1px solid var(--line); }
.why__badge { display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 10px 20px 10px 10px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.why__badge-ic { width: 36px; height: 36px; border-radius: 50%; background: #f1f0ee; display: inline-flex; align-items: center; justify-content: center; }
.why__badge-sub { color: var(--muted); font-weight: 500; }
.why2avatars { display: flex; align-items: center; padding-left: 10px; }
.why2avatars img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--page-bg); margin-left: -10px; }
.why2avatars .more { width: 40px; height: 40px; border-radius: 50%; background: #0d0d0d; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; border: 2px solid var(--page-bg); margin-left: -10px; }
.why2cards { display: grid; grid-template-columns: 275px 275px; gap: 16px; margin-top: auto; min-width: 0; align-items: stretch; justify-content: start; }
.why2cards > * { min-width: 0; }
.whiteinfo { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; overflow: hidden; width: 275px; height: 272px; box-sizing: border-box; }
.whiteinfo__title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.whiteinfo__text { font-size: 14px; color: var(--muted); margin-top: 8px; }
.logogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; margin: 24px 0; }
.logoit { display: flex; align-items: center; justify-content: center; flex: none; background: #fff; border-radius: 7px; box-shadow: 0 0 3px rgba(0,0,0,.06); padding: 4px 7px; }
.logoit img { height: 20px; width: auto; max-width: 84px; object-fit: contain; display: block; }
.darkstat { background: #0d0d0d; color: #fff; border-radius: 16px; padding: 16px; position: relative; overflow: hidden; width: 275px; height: 272px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; }
.darkstat__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: 0; transition: opacity .45s ease; }
.darkstat__top, .darkstat > div { position: relative; z-index: 1; }
.darkstat__top { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.85); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.25); }
.darkstat__num { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.darkstat__desc { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.45; margin-top: 6px; max-width: 90%; }

/* ---------- Testimonials slider ---------- */
.tst2__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 44px; }
.tst2__slider { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tst2__track { display: flex; gap: 20px; width: max-content; animation: tstmarq 38s linear infinite; }
.tst2__slide { flex: none; width: 380px; }
@keyframes tstmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tcard2 { position: relative; border-radius: 16px; overflow: hidden; background: #fff; min-height: 360px; display: flex; flex-direction: column; }
.tcard2--image { color: #fff; }
.tcard2--image .tcard2__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tcard2--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index: 1; }
.tcard2 > * { position: relative; z-index: 2; }
.tcard2__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 0; }
.tcard2__who { display: flex; align-items: center; gap: 12px; }
.tcard2__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tcard2__who .n { font-weight: 700; font-size: 15px; }
.tcard2__who .r { font-size: 13px; opacity: .7; }
.tcard2__x { width: 36px; height: 36px; border-radius: 4px; background: rgb(245,245,245); color: #111; display: inline-flex; align-items: center; justify-content: center; }
.tcard2__body { padding: 26px 22px 0; }
.tcard2__quote { font-size: 16px; line-height: 1.5; color: #000; }
.tcard2__foot { display: flex; align-items: center; justify-content: space-between; padding: 22px; margin-top: auto; }
.tcard2__stars { display: flex; gap: 3px; }
.tcard2__stars img { width: 15px; height: 15px; object-fit: contain; }
.tcard2__date { font-size: 13px; opacity: .75; }

@media (max-width: 980px) {
  .why2grid { grid-template-columns: 1fr; }
  .why2right { height: auto; }
  .why2img { width: 100%; height: 220px; }
  .about__cards { margin-left: 0; }
  .tst2__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 620px) {
  .why2cards { grid-template-columns: 1fr; }
  .tst2__slide { width: 300px; }
}

/* ---------- Services (dark accordion) ---------- */
.svcx-sec { background: var(--dark-bg); color: #fff; }
.svcx-sec .eyebrow { color: #fff; }
.muted-title-d { color: #6c6c6c; }
.svcx-list { display: flex; flex-direction: column; gap: 14px; max-width: 980px; margin: 0 auto; }
.svcx { background: #141414; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; transition: background .3s; }
.svcx--open { background: #161616; }
.svcx__head { width: 100%; display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 20px; padding: 26px 28px; background: transparent; border: 0; cursor: pointer; text-align: left; color: #fff; }
.svcx__num { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,.22); transition: color .3s; }
.svcx--open .svcx__num { color: rgba(255,255,255,.4); }
.svcx__mid { display: flex; flex-direction: column; gap: 12px; }
.svcx__title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.025em; }
.svcx__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tagx { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: rgba(255,255,255,.75); }
.svcx__icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.svcx__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.svcx--open .svcx__panel { grid-template-rows: 1fr; }
.svcx__panel > .svcx__panelinner { overflow: hidden; min-height: 0; }
.svcx__panelinner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center; padding: 0 28px; }
.svcx--open .svcx__panelinner { padding: 4px 28px 30px; }
.svcx__img { border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; margin-left: 100px; }
.svcx__img img { width: 100%; height: 100%; object-fit: cover; }
.svcx__detail { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.svcx__caption { font-size: 17px; color: rgba(255,255,255,.82); line-height: 1.5; }
@media (max-width: 820px) {
  .svcx__head { grid-template-columns: 70px 1fr auto; gap: 14px; padding: 20px; }
  .svcx__num { font-size: 32px; }
  .svcx__panelinner { grid-template-columns: 1fr; }
  .svcx__img { margin-left: 0; }
}

/* ---------- Logo sliders (why choose) ---------- */
.logoslider { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; min-width: 0; max-width: 100%; }
.logorow { overflow: hidden; min-width: 0; }
.logorow__track { display: flex; gap: 6px; width: max-content; }
.logorow__track--left { animation: lmarq 13s linear infinite; }
.logorow__track--right { animation: rmarq 13s linear infinite; }
@keyframes lmarq { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes rmarq { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }

/* page hero band for inner pages */
.pagehero__title { font-size: clamp(34px, 5.5vw, 74px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; text-align: center; }

/* ---------- Legal pages (Privacy Policy, Terms of Use) ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal__updated { color: var(--muted); font-size: 15px; margin-bottom: 48px; }
.legal h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 48px 0 16px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: 16px; line-height: 1.7; color: var(--ink); margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.7; color: var(--ink); margin-bottom: 6px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal--in { opacity: 1; transform: none; }
/* Heavier, slower entrance for the footer block — matches the real site's
   locomotive-style slide-up (200px) into the last section, instead of the
   site's usual subtle 26px reveal used everywhere else. */
.reveal--big.reveal { transform: translateY(90px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__grid, .about__grid, .why__grid, .contact__grid, .footer__main, .introblock { grid-template-columns: 1fr; }
  .price__grid { grid-template-columns: 1fr; max-width: 100%; }
  .about__cards, .stats, .tst__grid, .blog__grid, .svc__feature { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .svc__row { grid-template-columns: 1fr; gap: 12px; }
  .svc__tags { justify-content: flex-start; }
  .section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .stats, .tst__grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__word { font-size: 40px; }
}