/* =========================================================
   Power SEO Pro — main stylesheet
   ========================================================= */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #035EEC;
  --brand-700: #0048C2;
  --brand-400: #3D8BFF;
  --brand-100: #D5E5FE;
  --brand-50: #EAF2FE;
  --ink: #23252B;
  --ink-2: #585C67;
  --ink-3: #8C8F99;
  --bg: #F7F6F3;
  --bg-2: #EFEDE8;
  --surface: #FFFFFF;
  --line: #E6E4DE;
  --line-2: #D6D4CD;
  --pink: #E003A4;
  --pink-soft: #F2A6DC;
  --silver: linear-gradient(145deg, #FFFFFF 0%, #D8DAE1 32%, #F6F6F8 55%, #BCC0CA 100%);
  --shadow-sm: 0 1px 2px rgba(20, 22, 40, .05), 0 6px 16px -6px rgba(20, 22, 40, .08);
  --shadow-md: 0 2px 6px rgba(20, 22, 40, .04), 0 22px 44px -18px rgba(20, 22, 50, .2);
  --shadow-lg: 0 40px 80px -30px rgba(20, 24, 70, .32);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 76px;
  --bs-body-font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-700);
  --bs-border-color: var(--line);
}

/* Bootstrap's reboot sets smooth scroll-behavior on :root, which breaks ScrollTrigger
   measurements on refresh — anchors are smoothed in JS instead */
:root, html { scroll-behavior: auto !important; }
body {
  font-family: var(--bs-body-font-family);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html[lang="fa"] body { font-feature-settings: "ss01"; }
html[lang="en"] body { letter-spacing: -.005em; font-feature-settings: normal; }
img { max-width: 100%; }
::selection { background: var(--brand); color: #fff; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; top: 10px; inset-inline-start: 10px; z-index: 2000;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 10px;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; color: #fff; }

/* ---------- Shared type ---------- */
.section { padding-block: clamp(88px, 11vw, 160px); position: relative; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .85rem; font-weight: 600; color: var(--brand); margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.section-title {
  font-size: clamp(1.9rem, 2vw, 3.15rem);
  font-weight: 800; line-height: 1.35; margin: 0; color: var(--ink);
}
html[lang="en"] .section-title { line-height: 1.12; letter-spacing: -.02em; }
.section-title--sm { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: .8rem; }
.section-lead { color: var(--ink-2); font-size: 1.05rem; line-height: 1.9; margin: 0; }

/* masked line reveal (whole line, never per-letter) */
.mask-line { display: block; overflow: hidden; padding-block: .08em .16em; margin-block: -.08em -.16em; }
.mask-line__in { display: inline; will-change: transform; }

/* ---------- Buttons ---------- */
.btn-brand {
  --pad-x: 1.55rem;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .9rem var(--pad-x); border: 0; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none; position: relative; isolation: isolate; overflow: hidden;
  box-shadow: 0 10px 24px -10px rgba(3, 94, 236, .65);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn-brand::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 140% at 50% 120%, rgba(255,255,255,.28), transparent 60%);
  opacity: 0; transition: opacity .2s var(--ease);
}
.btn-brand:hover, .btn-brand:focus-visible { color: #fff; background: var(--brand-700); }
.btn-brand:active { transform: scale(.97); }
.btn-brand__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
html[dir="ltr"] .btn-brand__arrow { transform: scaleX(-1); }
@media (hover: hover) {
  .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(3, 94, 236, .7); }
  .btn-brand:hover::before { opacity: 1; }
  .btn-brand:hover .btn-brand__arrow { transform: translateX(-4px); }
  html[dir="ltr"] .btn-brand:hover .btn-brand__arrow { transform: scaleX(-1) translateX(-4px); }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--brand);
  text-decoration: none; padding-block: .2rem; background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 0 1px; background-position: 100% 100%; transition: background-size .25s var(--ease);
}
html[dir="ltr"] .link-arrow { background-position: 0 100%; }
.link-arrow::after { content: "←"; transition: transform .2s var(--ease); }
html[dir="ltr"] .link-arrow::after { content: "→"; }
.link-arrow:hover { background-size: 100% 1px; color: var(--brand-700); }
.link-arrow:hover::after { transform: translateX(-3px); }
html[dir="ltr"] .link-arrow:hover::after { transform: translateX(3px); }

/* =========================================================
   Header
   ========================================================= */
/* the header is a floating bar inside the container, not an edge-to-edge strip */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1030; padding-top: 10px;
}
.site-header__bar {
  min-height: calc(var(--header-h) - 10px); padding: .5rem .75rem; border-radius: 22px;
  background: rgba(252, 252, 255, .72); border: 1px solid rgba(20, 24, 70, .05);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled .site-header__bar {
  background: rgba(252, 252, 255, .9);
  border-color: rgba(20, 24, 70, .08);
  box-shadow: 0 18px 40px -26px rgba(20, 24, 70, .4);
}
.site-logo img { display: block; height: 38px; width: auto; }

.navbar-nav { gap: .15rem; }
.navbar-nav .nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink-2); font-weight: 600; padding: .5rem 1rem !important; border-radius: 12px;
  background: none; border: 0; font-size: inherit; font-family: inherit;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
/* gradient underline for the section you are in */
.navbar-nav .nav-link::after {
  content: ""; position: absolute; inset-inline: 1rem; bottom: .15rem; height: 2.5px; border-radius: 2px;
  background: var(--logo-grad);
  transform: scaleX(0); transform-origin: var(--origin-start, right); transition: transform .25s var(--ease);
}
html[dir="ltr"] { --origin-start: left; }
html[dir="rtl"] { --origin-start: right; }
/* hover gets a soft pill; the current section keeps the underline */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.show { color: var(--ink); background: rgba(40, 52, 193, .06); }
.navbar-nav .nav-link.is-current { color: var(--ink); }
.navbar-nav .nav-link.is-current::after { transform: scaleX(1); }
.nav-link__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.nav-link--drop.show .nav-link__chev { transform: rotate(180deg); }
.nav-link--drop::after { display: none; }

.nav-drop {
  --bs-dropdown-min-width: 12rem;
  margin-top: .5rem; padding: .4rem; border-radius: 16px;
  border: 1px solid rgba(20, 24, 70, .07); background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 50px -24px rgba(20, 24, 70, .35);
}
.nav-drop .dropdown-item {
  border-radius: 11px; padding: .55rem .85rem; font-weight: 600; color: var(--ink-2);
}
.nav-drop .dropdown-item:hover, .nav-drop .dropdown-item:focus { background: rgba(40, 52, 193, .07); color: var(--ink); }

/* services menu: thumbnail + title + one-line pitch */
.nav-drop:has(.nav-svc) { --bs-dropdown-min-width: 20rem; padding: .45rem; }
.nav-drop .nav-svc { display: flex; align-items: center; gap: .85rem; padding: .5rem; white-space: normal; }
.nav-svc__thumb { width: 64px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; box-shadow: 0 8px 16px -10px rgba(20, 24, 70, .55); transition: transform .25s var(--ease); }
.nav-svc:hover .nav-svc__thumb, .nav-svc:focus-visible .nav-svc__thumb { transform: scale(1.06); }
.nav-svc__txt { display: grid; gap: .1rem; min-width: 0; }
.nav-svc__txt b { font-weight: 700; color: var(--ink); line-height: 1.5; }
.nav-svc__txt small { font-size: .8rem; font-weight: 500; color: var(--ink-3); line-height: 1.5; }

@media (min-width: 992px) {
  .navbar-nav .nav-drop, .navbar-nav .nav-drop[data-bs-popper] { top: 100%; left: 50%; right: auto; transform: translateX(-50%); }
  /* invisible bridge over the gap so the pointer can travel into the menu */
  .nav-drop::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: .8rem; }
}
/* open on hover where there is a real pointer; click/keyboard still toggle .show */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .navbar-nav .nav-drop { display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
  .navbar-nav .dropdown:hover > .nav-drop, .navbar-nav .nav-drop.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
  .navbar-nav .dropdown:hover > .nav-link--drop { color: var(--ink); background: rgba(40, 52, 193, .06); }
  .navbar-nav .dropdown:hover > .nav-link--drop .nav-link__chev { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .navbar-nav .nav-drop, .nav-svc__thumb { transition: none !important; }
}

.header-tools { display: flex; align-items: center; gap: .5rem; }
/* header CTA: squarer than the hero pill, with a small accent dot */
.btn-brand--head {
  padding: .7rem 1.1rem; border-radius: 14px; font-size: .95rem;
  background: var(--brand) !important; overflow: visible;
}
.btn-brand--head::after {
  content: ""; position: absolute; top: -3px; inset-inline-end: -3px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 0 2.5px rgba(252, 252, 255, .9);
}
.btn-brand--head:hover, .btn-brand--head:focus-visible { background: var(--brand-700) !important; }
.btn-brand--head .btn-brand__arrow { width: 16px; height: 16px; }
html[dir="ltr"] .btn-brand--head .btn-brand__arrow { transform: none; }
@media (hover: hover) {
  .btn-brand--head:hover { transform: translateY(-1px); }
  .btn-brand--head:hover .btn-brand__arrow,
  html[dir="ltr"] .btn-brand--head:hover .btn-brand__arrow { transform: translate(2px, -2px); }
}

/* one pill showing the language you would switch to */
.lang-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem; border-radius: 14px; background: var(--surface);
  border: 1px solid rgba(20, 24, 70, .08); font-size: .82rem; font-weight: 700; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lang-toggle__globe { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.7; }
.lang-toggle span { line-height: 1; }
html[lang="fa"] .lang-toggle [data-lang="fa"], html[lang="en"] .lang-toggle [data-lang="en"] { display: none; }
.lang-toggle:hover { border-color: rgba(20, 24, 70, .16); box-shadow: var(--shadow-sm); }

.burger { width: 44px; height: 44px; border: 1px solid var(--line) !important; border-radius: 50%; background: var(--surface); position: relative; padding: 0; box-shadow: none !important; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease); }
.burger i:first-child { top: 17px; }
.burger i:last-child { top: 25px; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 991.98px) {
  :root { --header-h: 64px; }
  .site-header { padding-top: 8px; }
  .site-header__bar { min-height: calc(var(--header-h) - 8px); border-radius: 18px; padding: .4rem .5rem; }
  .site-logo img { height: 32px; }
  /* a backdrop-filter would become the containing block of the fixed drawer inside the bar */
  .site-header__bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(252, 252, 255, .94); }
  /* while the drawer is open the header must sit above Bootstrap's backdrop (1040) */
  .site-header.menu-open { z-index: 1046; }
  .site-header.menu-open .site-header__bar { background: transparent; border-color: transparent; box-shadow: none; }
  .site-header.menu-open .site-header__bar > :not(#mainNav) { opacity: 0; pointer-events: none; }

  /* drawer: slides in from the reading-start side (right in Persian, left in English) */
  .nav-drawer {
    --bs-offcanvas-width: min(340px, 86vw);
    --bs-offcanvas-bg: #fff;
    border: 0 !important; box-shadow: 0 0 60px -10px rgba(20, 24, 70, .35);
  }
  html[dir="rtl"] .nav-drawer { border-radius: 26px 0 0 26px; }
  html[dir="ltr"] .nav-drawer { border-radius: 0 26px 26px 0; }
  .nav-drawer__head { padding: 1rem 1.1rem; border-bottom: 1px solid #EEF0F6; }
  .nav-drawer__head .site-logo img { height: 30px; }
  .nav-drawer__close {
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
  }
  .nav-drawer__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .nav-drawer__body { display: flex; flex-direction: column; padding: .8rem .8rem 1rem; }
  .nav-drawer .navbar-nav { gap: .2rem; }
  .navbar-nav .nav-link { width: 100%; justify-content: space-between; padding: .8rem 1rem !important; font-size: 1rem; }
  .navbar-nav .nav-link::after { display: none; }
  .navbar-nav .nav-link.is-current { color: var(--brand); background: rgba(40, 52, 193, .07); }
  /* services submenu: opens inline under its toggle */
  .nav-drop {
    position: static !important; transform: none !important; float: none;
    margin: .2rem 0 .4rem; padding: .3rem; border: 0; border-radius: 16px; background: #F5F6FC; box-shadow: none;
  }
  .nav-drop.show { animation: navDropIn .25s var(--ease) both; }
  .nav-drop .dropdown-item { padding: .6rem .7rem; }
  .nav-drop .nav-svc { gap: .75rem; }
  .nav-svc__thumb { width: 48px; height: 36px; border-radius: 9px; }
  .nav-svc__txt b { font-size: .95rem; }
  .nav-drawer__foot { margin-top: auto; padding-top: 1.2rem; }
  .nav-drawer__cta { width: 100%; justify-content: center; padding-block: 1rem; border-radius: 14px; background: var(--logo-grad); }
  .offcanvas-backdrop.show { opacity: .4; }
}
@keyframes navDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 992px) {
  /* desktop: the drawer is just the inline nav; its body must still stretch so the list can centre */
  .nav-drawer__body { flex-grow: 1; }
  .nav-drawer__foot { display: none; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .nav-drop.show { animation: none; }
}

/* =========================================================
   Hero + 3D scroll scene
   ========================================================= */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 45% at 22% 40%, rgba(3, 94, 236, .07), transparent 70%),
    radial-gradient(30% 30% at 12% 70%, rgba(242, 166, 220, .10), transparent 70%);
}
html[dir="ltr"] .hero::before { transform: scaleX(-1); }
.hero__pin {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 8px); padding-bottom: 24px;
  overflow-x: clip;
}
.hero__pin > .container { width: 100%; }
/* a touch more breathing room than the default Bootstrap gutter, on desktop
   only (mobile stacks the columns, where gy- already handles the gap). Most
   of the copy/scene spacing comes from the column split itself (col-lg-6/
   col-xl-5 vs col-lg-6/col-xl-7) rather than from padding here, so widening
   this doesn't eat into the copy column's own width. */
@media (min-width: 992px) {
  .hero__row { --bs-gutter-x: 2rem; }
}
.hero__title {
  font-size: clamp(2.35rem, 5.1vw, 4.7rem);
  font-weight: 850; line-height: 1.3; margin: 0 0 1.1rem; color: var(--ink);
}
html[lang="en"] .hero__title { line-height: 1.04; letter-spacing: -.035em; font-weight: 800; font-size: clamp(2.2rem, 4.3vw, 4.1rem); }
.hero__accent { color: var(--brand); }
.hero__sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--ink-2); margin-bottom: 2rem; }
.hero__eyebrow { color: var(--ink-3); }
.hero__eyebrow::before { background: var(--brand); opacity: 1; }

.scene-steps { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 300px; }
.scene-steps__list { display: flex; align-items: center; gap: .55rem; }
.scene-step {
  background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--ink-3); transition: color .25s var(--ease); cursor: pointer;
}
.scene-step:hover { color: var(--ink-2); }
.scene-step.is-active { color: var(--ink); }
.scene-steps__sep { color: var(--line-2); }
.scene-steps__track { position: relative; height: 2px; background: var(--line); border-radius: 2px; margin-top: .5rem; overflow: hidden; }
.scene-steps__fill { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: var(--origin-start); }

.scene {
  position: relative;
  /* the hero column is the real limit on desktop, so let the scene fill it */
  width: min(100%, calc(min(88vh, 900px) * 1.1));
  aspect-ratio: 11 / 10;
  margin-inline: auto;
  /* a flatter perspective: the deeper one magnified and resampled the
     screenshots, which is most of why their text looked soft */
  perspective: 2800px;
  perspective-origin: 50% 35%;
  container-type: inline-size;
  pointer-events: none;
}
.scene__tilt, .scene__rig { position: absolute; inset: 0; transform-style: preserve-3d; }
.scene__shadow {
  position: absolute; inset-inline: 12%; bottom: 4%; height: 12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 24, 70, .22), transparent 70%);
  transform: translateZ(-120px); filter: blur(6px);
}

/* Website — real screenshots stacked in 3D */
/* beat 1 shows this alone — no search bar over it — so it runs near full width.
   The box matches the shot's own 3:2, so `contain` neither crops nor letterboxes. */
/* No fixed height on either shot: the image itself sets it, so the box can never
   disagree with the file's aspect ratio and letterbox it smaller than it should be. */
.site3d { position: absolute; top: 10%; inset-inline-start: -4%; width: 108%; transform-style: preserve-3d; }
.ly { position: absolute; }
/* no shadow here: the screenshot brings its own, and a wrapper shadow showed
   through as a faint rectangle behind it */
.ly-shot { position: relative; border-radius: 1.6cqw; overflow: hidden; }
.ly-shot img { width: 100%; height: auto; display: block; }
.ly-scan { inset: 0; overflow: hidden; border-radius: 1.6cqw; pointer-events: none; }
.scan-beam { position: absolute; inset-inline: 0; top: 0; height: 22%; background: linear-gradient(to bottom, transparent, rgba(3, 94, 236, .16) 70%, rgba(3, 94, 236, .55) 98%, transparent); opacity: 0; }

/* Everything that GSAP brings in later starts hidden here too. Without this the
   browser paints one frame of the raw markup — the search bar and the marketing
   cards all stacked on beat 1 — before the script runs and sets autoAlpha: 0. */
.seo-search, .seo-panel, .mk-cam, .mk-reel, .mk-camp, .mk-pop { opacity: 0; }

/* SEO layers — the query bar above the panels */
.seo-search {
  position: absolute; top: 3%; inset-inline-start: 15%; width: 70%; height: 11%;
  display: flex; align-items: center; gap: 1.6cqw; padding-inline: 2.6cqw; overflow: hidden;
  background: #fff; border-radius: 6cqw; border: 1px solid rgba(40, 52, 193, .1);
  box-shadow: 0 26px 46px -26px rgba(20, 24, 70, .3);
  font-size: max(11px, 1.95cqw); font-weight: 600; color: var(--ink);
}
/* the icon sits on the inline-start edge, with a hairline divider facing the text */
.seo-search__icon {
  width: 2.6cqw; height: 2.6cqw; flex: none; box-sizing: content-box;
  fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round;
  padding-inline-end: 1.6cqw; border-inline-end: 1px solid rgba(40, 52, 193, .14);
}
.seo-search__q { display: inline-block; white-space: nowrap; }
.seo-search__caret { width: 2px; height: 2.4cqw; background: var(--brand); flex: none; }

/* ---------- stage 1b: the PowerCMS panels ----------
   It sits clear below the search bar — `top` starts well under the bar's 17%
   bottom edge, so the two never touch. Five real screenshots (not one flattened
   composite) are pinned inside this box: the dashboard toward the panel's end
   edge, three floating widget cards stacked toward its start edge (away from
   the hero copy, which sits at the start side), and a small glass search badge
   tucked between the stack and the dashboard. The box keeps the same 3:2
   proportions the original composite used, so every percentage below maps
   straight onto it; each image is then nudged/scaled with its own inset/top/
   width so only its card (plus glow) shows, cropping out the transparent
   margin baked around it. `max-width: none` overrides the site-wide
   `img { max-width: 100% }`, since several cards need to render past 100%
   of their own crop box before the crop hides the excess.
   These use `inset-inline-start` like the rest of the scene, so the whole
   arrangement mirrors along with everything else between rtl/ltr — the
   numbers are each card's *end*-edge offset (100 - left% - width%) rather
   than its left%, since `inset-inline-start` reads as the physical right
   edge in this site's default rtl. The dashboard's end edge (the one facing
   the hero copy) is kept just inside the panel rather than bleeding past it —
   that edge is the one with the least room to spare, next to the text. */
.seo-panel { position: absolute; top: 19%; inset-inline-start: 0; width: 100%; aspect-ratio: 3 / 2; }
.seo-panel__img { position: absolute; display: block; height: auto; max-width: none; }
.seo-panel__dash    { inset-inline-start: 4%;     top: 5.01%;  width: 84.38%; z-index: 1; }
.seo-panel__card--1 { inset-inline-start: 66.71%; top: 5.16%;  width: 30.46%; z-index: 2; }
.seo-panel__card--2 { inset-inline-start: 63.41%; top: 30.52%; width: 40.71%; z-index: 3; }
.seo-panel__card--3 { inset-inline-start: 73.24%; top: 64.78%; width: 25.77%; z-index: 4; }
.seo-panel__glass   { inset-inline-start: 65.10%; top: 58.96%; width: 12.66%; z-index: 5; }

/* Marketing layers — both cards are single photos that carry their own UI */
.mk-reel {
  position: absolute; top: 1%; inset-inline-end: 8%; height: 88%; aspect-ratio: 2 / 3;
  overflow: hidden;
}
.mk-reel__video { position: absolute; inset: 0; }

.mk-camp {
  position: absolute; bottom: 4%; inset-inline-start: 14%; width: 42%; aspect-ratio: 3 / 2;
  border-radius: 2cqw; overflow: hidden; background: #0d0f1c;
  box-shadow: 0 34px 60px -26px rgba(20, 24, 70, .42), 0 0 0 .4cqw #fff;
}

.mk-pop { position: absolute; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(20,24,70,.4); }
.mk-pop svg { width: 50%; height: 50%; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.mk-pop--1 { top: 20%; inset-inline-end: 34%; }
.mk-pop--1 svg { fill: var(--pink); stroke: var(--pink); }
.mk-pop--2 { top: 50%; inset-inline-end: 3%; }

@media (max-width: 991.98px) {
  .hero__pin { align-items: flex-start; padding-top: calc(var(--header-h) + 18px); }
  .hero__title { font-size: clamp(2.1rem, 9vw, 3.3rem); margin-bottom: .6rem; }
  .hero__sub { margin-bottom: 1.2rem; }
  .scene-steps { margin-top: 1.3rem; }
  .scene { width: min(100%, calc(44svh * 1.1)); }
  /* the query bar runs the full width; the panel shot keeps its gap below it */
  .seo-search { inset-inline-start: 0; width: 100%; padding-inline: 2.2cqw; }
  .seo-panel { inset-inline-start: 0; width: 100%; top: 21%; }
}
@media (max-width: 991.98px) and (max-height: 700px) {
  .hero__eyebrow { display: none; }
  .scene { width: min(100%, calc(38svh * 1.1)); }
}

/* =========================================================
   Services
   ========================================================= */
.services { background: linear-gradient(to bottom, var(--bg), #F3F2EE); }

/* Three glass cards in a row. The selected one takes the space the other two
   give up — `flex-grow` animates, so nothing jumps. */
.svc-options { display: flex; align-items: stretch; gap: clamp(.6rem, 1.4vw, 1.4rem); }
.svc-col { flex: 1 1 0; min-width: 0; transition: flex-grow .9s var(--ease-out); }
.svc-col.is-open { flex-grow: 2.3; }

.svc-opt {
  --lift: 0px;
  position: relative; width: 100%; height: 100%; text-align: start; font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 28px; padding: clamp(1.2rem, 2vw, 2rem); cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  /* real frosted glass: strong blur + a saturation boost so the gradient
     backdrop reads as tinted glass rather than plain milky white, plus a
     bright hairline along the top edge for the light-catching glass sheen */
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: 0 24px 50px -28px rgba(20, 24, 70, .38), inset 0 1px 0 rgba(255, 255, 255, .75);
  transform: translateY(var(--lift));
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease), background-color .3s var(--ease);
}
/* gradient rim, only on the open card */
.svc-opt::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: var(--logo-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}

.svc-opt__icon {
  display: grid; place-items: center; width: clamp(48px, 4.4vw, 64px); aspect-ratio: 1;
  border-radius: 18px; background: rgba(255, 255, 255, .55); color: var(--brand);
  box-shadow: 0 8px 18px -14px rgba(20, 24, 70, .45), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .25s var(--ease), transform .35s var(--ease-out);
}
.svc-opt__icon svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-opt__title { font-size: clamp(1.15rem, 1.7vw, 1.6rem); font-weight: 800; line-height: 1.35; margin-top: .7rem; }
.svc-opt__sub { font-size: clamp(.82rem, 1vw, .95rem); font-weight: 500; color: var(--ink-3); line-height: 1.7; }

/* tags belong to the open card only */
.svc-opt__tags {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease-out), opacity .3s var(--ease), margin-top .4s var(--ease-out);
}
.svc-opt__tags i {
  font-style: normal; font-size: .82rem; font-weight: 600; color: var(--ink-2);
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(40, 52, 193, .12);
}
.svc-opt__toggle {
  position: relative; width: 44px; height: 44px; flex: none; margin-top: auto; align-self: flex-start;
  border-radius: 50%; background: rgba(255, 255, 255, .8); border: 1px solid rgba(40, 52, 193, .14);
  box-shadow: 0 8px 18px -12px rgba(20, 24, 70, .5);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease-out);
}
.svc-opt__toggle i {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  background: var(--brand); border-radius: 2px;
  transition: background-color .25s var(--ease), transform .35s var(--ease-out), opacity .25s var(--ease);
}
/* the second bar is the vertical half of the plus; it fades for the minus */
.svc-opt__toggle i:last-child { transform: rotate(90deg); }

@media (hover: hover) {
  /* stays translucent on hover — a touch more opaque, never opaque-white, so it still reads as glass */
  .svc-opt:hover { --lift: -4px; background: rgba(255, 255, 255, .5); box-shadow: 0 26px 50px -28px rgba(20, 24, 70, .45), inset 0 1px 0 rgba(255, 255, 255, .8); }
  .svc-opt:hover .svc-opt__icon { background: rgba(255, 255, 255, .7); transform: translateY(-2px); }
  .svc-opt:hover .svc-opt__toggle { border-color: rgba(40, 52, 193, .3); }
}
.svc-opt[aria-expanded="true"] { background: rgba(255, 255, 255, .5); box-shadow: 0 30px 60px -32px rgba(20, 24, 70, .45), inset 0 1px 0 rgba(255, 255, 255, .8); }
.svc-opt[aria-expanded="true"]::before { opacity: 1; }
.svc-opt[aria-expanded="true"] .svc-opt__tags { max-height: 6rem; opacity: 1; }
.svc-opt[aria-expanded="true"] .svc-opt__toggle { background: var(--logo-grad); border-color: transparent; }
.svc-opt[aria-expanded="true"] .svc-opt__toggle i { background: #fff; }
.svc-opt[aria-expanded="true"] .svc-opt__toggle i:last-child { opacity: 0; transform: rotate(0deg); }

@media (max-width: 767.98px) {
  .svc-options { flex-direction: column; }
  .svc-col, .svc-col.is-open { flex: none; }
  .svc-opt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: 1rem 1.1rem; }
  .svc-opt__title { margin-top: 0; flex: 1; }
  .svc-opt__sub { flex-basis: 100%; }
  .svc-opt__toggle { margin-top: 0; width: 38px; height: 38px; }
}

.svc-stage { position: relative; height: 0; overflow: hidden; }
.svc-stage.is-settled { overflow: visible; }
.svc-comp { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: 1rem; }
.svc-comp[hidden] { display: none !important; }

.svc-text__title { font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 800; line-height: 1.5; margin-bottom: 1rem; }
html[lang="en"] .svc-text__title { line-height: 1.2; letter-spacing: -.015em; }
.svc-text__title--lg { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 0; }
.svc-text p { color: var(--ink-2); line-height: 1.95; }
.svc-list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .55rem; }
.svc-list li { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.svc-list li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); transform: rotate(45deg); flex: none; }
.svc-list--inline { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 0; }
.svc-list--inline li { padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .92rem; }
.svc-list--inline li::before { width: 6px; height: 6px; }
.svc-text--row p { margin-bottom: 0; }

/* ----- clusters (shared) ----- */
.cluster [data-a] { rotate: calc(var(--rot, 0) * 1deg); }
.cluster { position: relative; width: 100%; container-type: inline-size; }
.mock {
  position: absolute; background: var(--surface); border: 1px solid var(--line);
  border-radius: 1.5cqw; box-shadow: var(--shadow-md); padding: 1.5cqw;
  font-size: max(9px, 1.3cqw); color: var(--ink); overflow: hidden; line-height: 1.5;
}
.mock__head { display: flex; align-items: center; gap: 1cqw; padding-bottom: 1cqw; margin-bottom: 1.2cqw; border-bottom: 1px solid var(--line); }
.dots { display: inline-flex; gap: .45cqw; }
.dots i { width: .8cqw; height: .8cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: var(--line-2); }
.mock__label { font-weight: 700; display: block; font-size: max(9px, 1.35cqw); }
.demo { font-style: normal; margin-inline-start: auto; font-size: max(8px, 1.05cqw); font-weight: 600; color: var(--ink-3); padding: .15cqw .8cqw; border: 1px dashed var(--line-2); border-radius: 2cqw; white-space: nowrap; }
.demo-note { display: block; color: var(--ink-3); font-size: max(8px, 1.05cqw); margin-top: .8cqw; }

/* ----- web design cluster ----- */
.cluster--web { aspect-ratio: 16 / 11.5; }
.w-shot { position: absolute; }
.w-shot img { display: block; width: 100%; height: auto; max-width: none; }
.w-resp { top: 0; inset-inline-end: 0; width: 58%; z-index: 1; border-radius: 1.6cqw; overflow: hidden; box-shadow: var(--shadow-lg); }
.w-shop { top: 0; inset-inline-start: 0; width: 54%; z-index: 2; }
.w-arch { bottom: 0; inset-inline-start: 18%; width: 58%; z-index: 3; }

/* ----- SEO cluster ----- */
.cluster--seo { aspect-ratio: 16 / 10.6; }
.s-chart { top: 23%; inset-inline-start: 27%; width: 52%; height: 53%; padding: 2cqw; display: flex; flex-direction: column; z-index: 1; box-shadow: var(--shadow-lg); }
.s-chart__head { display: flex; align-items: flex-start; gap: 1cqw; }
.s-chart__head small { display: block; color: var(--ink-3); font-size: max(8px, 1.1cqw); }
.s-chart__legend { display: flex; gap: 2cqw; margin-block: 1.2cqw .4cqw; font-size: max(8px, 1.1cqw); color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: .6cqw; }
.lg::before { content: ""; width: 2cqw; height: 2px; background: var(--brand); border-radius: 2px; }
.lg--b::before { background: repeating-linear-gradient(to right, #B9BCC8 0 4px, transparent 4px 7px); }
.s-chart__svg { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.s-grid path { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-area { fill: rgba(3, 94, 236, .08); }
.s-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.s-line2 { fill: none; stroke: #B9BCC8; stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.s-points circle { fill: #fff; stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.s-chart__axis { display: flex; justify-content: space-between; color: var(--ink-3); font-size: max(8px, 1.05cqw); padding-top: .8cqw; border-top: 1px solid var(--line); }

.s-kw { top: 0; inset-inline-start: 0; width: 24.5%; height: 60%; --rot: -1; z-index: 2; padding: 1.8cqw; }
.kw { list-style: none; margin: 1.6cqw 0 0; padding: 0; display: grid; gap: 1.5cqw; }
.kw li { display: grid; gap: .6cqw; font-size: max(9px, 1.2cqw); color: var(--ink-2); }
.kw i { height: 1cqw; min-height: 5px; border-radius: 1cqw; background: var(--bg-2); position: relative; overflow: hidden; }
.kw i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: var(--brand); border-radius: inherit; transform-origin: var(--origin-start); transform: scaleX(var(--fill, 1)); }
.kw li:nth-child(n+3) i::after { background: var(--brand-400); opacity: .7; }

.s-serp { top: 0; inset-inline-end: 3%; width: 30%; z-index: 2; --rot: -1.5; padding: 1.8cqw; }
.serp { margin-top: 1.2cqw; display: grid; gap: .4cqw; }
.serp__url { direction: ltr; text-align: end; color: #1f7a4a; font-size: max(8px, 1.05cqw); }
html[dir="ltr"] .serp__url { text-align: start; }
.serp__title { color: var(--brand); font-size: max(10px, 1.45cqw); font-weight: 700; line-height: 1.4; }
.serp__desc { color: var(--ink-2); font-size: max(8px, 1.1cqw); line-height: 1.6; }

.s-health { top: 33%; inset-inline-end: 0; width: 18%; z-index: 2; --rot: 2.5; text-align: center; padding: 1.8cqw; }
.gauge { position: relative; width: 78%; margin: 1.2cqw auto 0; aspect-ratio: 1; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; }
.gauge__bg { stroke: var(--bg-2); }
.gauge__val { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--val)); }
.gauge b { position: absolute; inset: 0; display: grid; place-items: center; font-size: max(14px, 3cqw); font-weight: 800; }

.s-speed { bottom: 0; inset-inline-end: 6%; width: 37%; z-index: 3; --rot: -1.5; padding: 1.8cqw; }
.speed { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2cqw; margin-top: 1.2cqw; align-items: center; }
.speed__bars { display: grid; gap: 1cqw; }
.speed__bars div { display: grid; grid-template-columns: 4cqw 1fr; align-items: center; gap: 1cqw; }
.speed__bars small { font-size: max(8px, 1cqw); color: var(--ink-3); direction: ltr; }
.speed__bars i { height: 1cqw; min-height: 5px; border-radius: 1cqw; background: var(--bg-2); position: relative; overflow: hidden; }
.speed__bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: #2f9e6a; border-radius: inherit; transform-origin: var(--origin-start); transform: scaleX(var(--fill, 1)); }
.tree { display: grid; justify-items: center; gap: .6cqw; }
.tree__root { width: 5cqw; height: 2.4cqw; border-radius: .6cqw; background: var(--ink); }
.tree__l { width: 1px; height: 1.6cqw; background: var(--line-2); }
.tree__kids { display: flex; gap: .8cqw; padding-top: .8cqw; border-top: 1px solid var(--line-2); }
.tree__kids i { width: 3cqw; height: 2cqw; border-radius: .5cqw; background: var(--brand-100); }
.tree__kids i:nth-child(2) { background: var(--brand); }

/* ----- marketing cluster ----- */
.cluster--mkt { aspect-ratio: 21 / 10; }
.m-camera { position: absolute; top: 12%; inset-inline-start: 0; width: 30%; --rot: -5; z-index: 2; }
.camera { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 30px 30px rgba(15, 18, 50, .28)); }

.m-tag { position: absolute; top: 94%; inset-inline-start: 26%; font-size: max(10px, 1.2cqw); font-weight: 600; background: #fff; border: 1px solid var(--line); padding: .5cqw 1.3cqw; border-radius: 2cqw; box-shadow: var(--shadow-sm); white-space: nowrap; }
.m-reel { position: absolute; top: 0; inset-inline-start: 31%; height: 100%; aspect-ratio: 2 / 3; z-index: 3; }
.m-reel__frame { position: absolute; inset: 0; border-radius: 2.2cqw; overflow: hidden; background: #0d0f2c; box-shadow: 0 50px 80px -30px rgba(15, 18, 60, .6), 0 0 0 .5cqw #15161C; }
.m-reel__frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, #1F7BFF 0%, #003C9E 45%, #0b0d2b 100%); }
.m-reel__glow { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; top: -30%; inset-inline-start: -40%; background: radial-gradient(circle, rgba(243,166,196,.6), transparent 62%); }
.m-reel__person { position: absolute; left: 50%; bottom: 0; width: 76%; height: 60%; transform: translateX(-50%); }
.m-reel__person::before { content: ""; position: absolute; left: 50%; top: 0; width: 36%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: linear-gradient(160deg, #eed9cc, #b3907f); }
.m-reel__person::after { content: ""; position: absolute; inset: 34% 0 0; border-radius: 46% 46% 0 0; background: linear-gradient(160deg, #F7F6F3, #c5c4d3); }

.m-engage { top: 5%; inset-inline-start: 62%; width: 19%; --rot: 3; z-index: 4; padding: 1.6cqw; }
.engage { list-style: none; padding: 0; margin: 1.2cqw 0 0; display: grid; gap: 1cqw; }
.engage li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .8cqw; }
.engage svg { width: max(14px, 2cqw); height: max(14px, 2cqw); fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.engage__like svg { fill: var(--pink); stroke: var(--pink); }
.engage b { font-weight: 800; font-size: max(11px, 1.6cqw); }
.engage small { color: var(--ink-3); font-size: max(8px, 1.05cqw); }

.m-growth { bottom: 3%; inset-inline-end: 0; width: 32%; height: 46%; z-index: 2; display: flex; flex-direction: column; padding: 1.8cqw; }
.m-growth__head { display: flex; align-items: center; gap: 1cqw; }
.growth { flex: 1; display: flex; align-items: flex-end; gap: .9cqw; margin-top: 1.4cqw; border-bottom: 1px solid var(--line); min-height: 0; }
.growth i { flex: 1; height: var(--h); border-radius: .6cqw .6cqw 0 0; background: var(--brand-100); transform-origin: bottom; }
.growth i:nth-last-child(-n+3) { background: var(--brand); }
.growth i:last-child { background: linear-gradient(to top, var(--brand), var(--pink-soft)); }

.m-camp { bottom: 0; inset-inline-start: 3%; width: 28%; --rot: -2; z-index: 4; padding: 1.6cqw; }
.camp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.4cqw; margin-top: 1.2cqw; }
.camp__visual { position: relative; aspect-ratio: 1; border-radius: 1.2cqw; overflow: hidden; background: linear-gradient(145deg, #F9DDF0, #C6DCFD); }
.camp__obj { position: absolute; width: 38%; height: 70%; left: 31%; bottom: 10%; border-radius: 30% 30% 12% 12%; background: linear-gradient(90deg, #003C9E, #1F7BFF 45%, #003C9E); }
.camp__badge { position: absolute; top: .8cqw; inset-inline-start: .8cqw; font-size: max(8px, .95cqw); font-weight: 700; background: #fff; padding: .2cqw .8cqw; border-radius: 2cqw; }
.camp__txt { display: flex; flex-direction: column; gap: .8cqw; align-items: flex-start; justify-content: center; }
.camp__txt b { font-size: max(11px, 1.6cqw); font-weight: 800; line-height: 1.35; }
.camp__txt i { height: .7cqw; width: 80%; border-radius: 1cqw; background: var(--line-2); }
.camp__cta { font-size: max(9px, 1.05cqw); font-weight: 700; color: #fff; background: var(--brand); border-radius: 2cqw; padding: .5cqw 1.1cqw; white-space: nowrap; }

/* live media motion (only while marketing is open) */
.svc-comp--mkt.is-live .m-reel__glow { animation: reelGlow 6s ease-in-out infinite alternate; }
.svc-comp--mkt.is-live .camera__rec { animation: recBlink 1.4s steps(2, jump-none) infinite; }
@keyframes reelGlow { to { transform: translate(35%, 25%) scale(1.15); } }
@keyframes recBlink { 50% { opacity: .25; } }

/* ----- Services: mobile compositions (dedicated, not just scaled) ----- */
@media (max-width: 991.98px) {
  .svc-opt { padding: .9rem 1rem; border-radius: 18px; }
  .svc-opt__title { font-size: clamp(1rem, 3.4vw, 1.25rem); line-height: 1.5; }

  .mock { border-radius: 10px; padding: 8px; }
  .mock__head { gap: 6px; padding-bottom: 6px; margin-bottom: 8px; }

  .cluster--web { aspect-ratio: 3 / 4.3; }
  .w-resp { width: 86%; border-radius: 12px; }
  .w-shop { top: 36%; width: 76%; }
  .w-arch { inset-inline-start: auto; inset-inline-end: 0; width: 80%; }

  .cluster--seo { aspect-ratio: 3 / 5.5; }
  .s-chart { top: 0; inset-inline-start: 0; width: 100%; height: 35%; padding: 12px; }
  .s-kw { top: 37.5%; width: 55%; height: auto; padding: 10px; --rot: 0; }
  .s-health { top: 38.5%; inset-inline-end: 0; width: 40%; padding: 10px; }
  .gauge { width: 58%; }
  .s-serp { top: 65%; inset-inline-end: 0; width: 60%; padding: 10px; }
  .s-speed { top: auto; bottom: 0; inset-inline-end: auto; inset-inline-start: 0; width: 62%; padding: 10px; }
  .speed { grid-template-columns: 1fr; }
  .speed__bars div { grid-template-columns: 28px 1fr; }
  .tree { display: none; }

  .cluster--mkt { aspect-ratio: 3 / 5.6; }
  .m-reel { top: 0; inset-inline-start: auto; inset-inline-end: 2%; height: 52%; }
  .m-camera { top: 3%; inset-inline-start: 0; width: 40%; }
  .m-tag { top: 100%; inset-inline-start: 4%; }
  .m-engage { top: 27%; inset-inline-start: 0; width: 38%; padding: 10px; --rot: -2; }
  .m-growth { bottom: 0; inset-inline-end: 0; width: 50%; height: 27%; padding: 10px; }
  .m-camp { bottom: 1%; inset-inline-start: 0; width: 48%; padding: 10px; }
  .camp { grid-template-columns: 1fr; }
  .camp__visual { aspect-ratio: 16 / 9; }}

/* =========================================================
   Dark gallery popup skin (used by the web-design / marketing popups)
   ========================================================= */
/* ----- work gallery popups ----- */
.gallery-modal .modal-content {
  background: #0B1530; color: #fff; border: 1px solid rgba(141, 188, 255, .16); border-radius: 28px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
}
.gallery-modal .modal-header { align-items: flex-start; gap: 1rem; border: 0; padding: 1.6rem 1.8rem .6rem; }
.gallery-modal .eyebrow { color: #3D8BFF; }
.gallery-modal .modal-title { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; color: #fff; }
.gallery-modal__close {
  flex: none; margin-inline-start: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff; transition: background-color .2s var(--ease);
}
.gallery-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gallery-modal__close:hover { background: rgba(255, 255, 255, .16); }
.gallery-modal .modal-body { padding: 1rem 1.8rem; }
.gallery-modal .modal-footer { justify-content: center; border: 0; padding: .8rem 1.8rem 1.8rem; }
.gallery-modal :focus-visible { outline: 2px solid #8DBCFF; outline-offset: 3px; }

/* first shot is the hero tile; the rest fill a 3-column grid around it */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(120px, min(12vw, 19vh), 180px); gap: 14px; }
.gallery__item { margin: 0; border-radius: 16px; overflow: hidden; background: #111A38; border: 1px solid rgba(141, 188, 255, .12); }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.04); }
/* website samples: a browser frame whose screenshot scrolls to the bottom while hovered.
   main.js measures each image and sets --scroll-y (distance) and --scroll-dur (speed). */
.gallery-modal__hint { margin: .45rem 0 0; color: rgba(255, 255, 255, .6); font-size: .9rem; }
.site-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.site-shot { margin: 0; }
.site-shot__bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  background: #16214A; border: 1px solid rgba(141, 188, 255, .14); border-bottom: 0; border-radius: 14px 14px 0 0;
}
.site-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; flex: none; }
.site-shot__bar i:nth-child(2) { background: #FEBC2E; }
.site-shot__bar i:nth-child(3) { background: #28C840; }
.site-shot__bar span { flex: 1; height: 18px; margin-inline-start: 10px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.site-shot__view {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111A38;
  border: 1px solid rgba(141, 188, 255, .14); border-top: 0; border-radius: 0 0 14px 14px;
}
.site-shot__view img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform .9s var(--ease); will-change: transform; }
.site-shot__view:hover img, .site-shot__view:focus-visible img {
  transform: translateY(var(--scroll-y, 0px)); transition-duration: var(--scroll-dur, 3s); transition-timing-function: cubic-bezier(.45, .05, .55, .95);
}
/* "scroll" chip + fade, only on screenshots that are actually taller than the frame */
.site-shot__view::before, .site-shot__view::after { pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.site-shot__view::before { content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: 1; background: linear-gradient(to top, rgba(11, 21, 48, .75), transparent); }
.site-shot__view::after {
  content: "↓"; position: absolute; bottom: 12px; left: 50%; translate: -50% 0; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: #0B1530; font-weight: 800; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5);
}
.site-shot__view.is-long::before, .site-shot__view.is-long::after { opacity: 1; }
.site-shot__view.is-long:hover::before, .site-shot__view.is-long:hover::after,
.site-shot__view.is-long:focus-visible::before, .site-shot__view.is-long:focus-visible::after { opacity: 0; }
.site-shot figcaption { margin-top: .75rem; font-weight: 700; font-size: .98rem; color: rgba(255, 255, 255, .85); }
/* touch screens and reduced motion: no hover, so let the frame scroll by finger/wheel instead */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .site-shot__view { overflow-y: auto; overscroll-behavior: contain; }
  .site-shot__view img { transform: none !important; transition: none; }
  .site-shot__view::before, .site-shot__view::after { display: none; }
}

@media (max-width: 767.98px) {
  .site-grid { grid-template-columns: 1fr; gap: 18px; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: 10px; }
  .gallery__item:last-child { grid-column: span 2; }
  .gallery-modal .modal-header, .gallery-modal .modal-body { padding-inline: 1.1rem; }
}
/* =========================================================
   Magazine — latest news
   ========================================================= */
.news { padding-top: clamp(40px, 5vw, 80px); background: linear-gradient(to bottom, #E7EAF9 0%, #EFF1F9 100%); padding-bottom: clamp(60px, 7vw, 100px); }
.news__shell {
  position: relative; border-radius: 40px; padding: clamp(24px, 4.5vw, 64px);
  background: linear-gradient(150deg, #FFFFFF 0%, #F6F7FD 55%, #F8EFF7 100%);
  box-shadow: 0 40px 90px -50px rgba(20, 24, 70, .35), inset 0 1px 0 #fff;
}
.news__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.news__head .section-title { font-size: clamp(1.7rem, 3vw, 2.6rem); }

/* outlined button with the logo gradient as its border */
.btn-outline {
  display: inline-flex; align-items: center; gap: .8rem; padding: .95rem 1.7rem; border-radius: 16px;
  border: 1.5px solid transparent; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap;
  background: linear-gradient(#fff, #fff) padding-box, var(--logo-grad) border-box;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-outline:hover { color: var(--brand-700); transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(91, 69, 242, .55); }
@media (hover: hover) { .btn-outline:hover .btn-brand__arrow { transform: translateX(-4px); } html[dir="ltr"] .btn-outline:hover .btn-brand__arrow { transform: scaleX(-1) translateX(-4px); } }

/* grid: featured post spans the three rows of the side list */
.news-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; }
.news-card.is-featured { grid-column: 1; grid-row: 1 / span 3; }
.news-card:not(.is-featured) { grid-column: 2; }
.news-grid[data-shown="1"] { grid-template-columns: minmax(0, 1fr); }
.news-grid[data-shown="1"] .news-card.is-featured { grid-row: auto; }

.news-card__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.news-card__media { display: block; overflow: hidden; }
.news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.news-card__link:hover .news-card__media img, .news-card__link:focus-visible .news-card__media img { transform: scale(1.04); }
.news-card__body { display: flex; flex-direction: column; align-items: flex-start; }
.news-card__cat { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 700; color: var(--brand); }
.news-card__cat::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--logo-grad); }
.news-card__title { font-size: clamp(1rem, 1.35vw, 1.15rem); font-weight: 800; line-height: 1.6; color: var(--ink); margin: .45rem 0 .35rem; }
.news-card__meta { display: flex; align-items: center; gap: 1rem; color: var(--ink-3); font-size: .88rem; }
.news-card__read { display: none; }

/* side list: thumbnail + text */
.news-card:not(.is-featured) .news-card__link {
  display: flex; align-items: center; gap: 1.25rem; padding: .75rem; border-radius: 22px;
  background: #fff; border: 1px solid #ECEEF6; box-shadow: 0 14px 30px -24px rgba(20, 24, 70, .35);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.news-card:not(.is-featured) .news-card__link:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -22px rgba(20, 24, 70, .4); }
.news-card:not(.is-featured) .news-card__media { flex: 0 0 40%; aspect-ratio: 16 / 10; border-radius: 16px; }
.news-card:not(.is-featured) .news-card__body { flex: 1; min-width: 0; }

/* featured: full-bleed photo with the text over a dark fade */
.news-card.is-featured .news-card__link { position: relative; min-height: 420px; border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; }
.news-card.is-featured .news-card__media { position: absolute; inset: 0; z-index: -1; }
.news-card.is-featured .news-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 12, 40, .92) 0%, rgba(10, 12, 40, .45) 45%, rgba(10, 12, 40, .1) 100%); }
.news-card.is-featured .news-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(1.4rem, 3vw, 2.2rem); }
.news-card.is-featured .news-card__cat { color: #fff; background: var(--logo-grad); padding: .5rem 1.3rem; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(91, 69, 242, .7); }
.news-card.is-featured .news-card__cat::after { display: none; }
.news-card.is-featured .news-card__title { color: #fff; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.5; margin: 1rem 0 .7rem; }
.news-card.is-featured .news-card__meta { color: rgba(255, 255, 255, .82); font-size: .95rem; }
.news-card.is-featured .news-card__read { display: inline; padding-inline-start: 1rem; border-inline-start: 1px solid rgba(255, 255, 255, .4); }

.news-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.news-chip {
  padding: .6rem 1.6rem; border-radius: 999px; border: 1px solid #E1E4EF; background: #fff;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.news-chip:hover { color: var(--brand); border-color: #C9D3F2; }
.news-chip.is-active { color: #fff; border-color: transparent; background: var(--logo-grad); box-shadow: 0 12px 24px -12px rgba(91, 69, 242, .7); }

@media (max-width: 991.98px) {
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .news-card.is-featured, .news-card:not(.is-featured) { grid-column: 1; grid-row: auto; }
  .news-card.is-featured .news-card__link { min-height: 340px; }
}
@media (max-width: 575.98px) {
  .news-card:not(.is-featured) .news-card__link { gap: .9rem; padding: .6rem; }
  .news-card:not(.is-featured) .news-card__media { flex-basis: 36%; aspect-ratio: 1; }
  .news-card.is-featured .news-card__link { min-height: 300px; }
}

/* =========================================================
   Brands — endless logo ticker
   Items carry a trailing margin (not flex gap) so the two copies of the list
   are exactly equal and translating by -50% loops with no seam.
   ========================================================= */
.brands { background: #EFF1F9; padding-block: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 40px); overflow: hidden; }
.brands__head { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.brands__head .eyebrow { justify-content: center; }
.brands__title { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; color: var(--ink); margin: 0; }

.brands__viewport {
  --gap: clamp(14px, 2vw, 24px);
  direction: ltr; overflow: hidden; padding-block: 10px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands__track {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
}
/* starts only after JS has measured the settled logos and cloned enough copies */
.brands__track.is-ready { animation: brandsMarquee var(--dur, 40s) linear infinite; }
html[dir="rtl"] .brands__track { animation-direction: reverse; }
.brands__viewport:hover .brands__track, .brands__track:focus-within { animation-play-state: paused; }
@keyframes brandsMarquee { to { transform: translateX(-50%); } }

.brand-logo {
  flex: 0 0 auto; display: grid; place-items: center; margin-right: var(--gap);
  height: clamp(76px, 8vw, 96px); min-width: clamp(140px, 14vw, 190px); padding-inline: 1.8rem;
  background: #fff; border: 1px solid #E3E6F2; border-radius: 20px;
  box-shadow: 0 14px 30px -24px rgba(20, 24, 70, .35);
}
.brand-logo img {
  display: block; max-height: clamp(32px, 3.6vw, 44px); max-width: 150px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .6; transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.brand-logo:hover img { filter: none; opacity: 1; }
/* no logo file yet: show an honest placeholder with the brand name */
.brand-logo.is-missing { border-style: dashed; border-color: #CDD3E6; background: rgba(255, 255, 255, .55); box-shadow: none; }
.brand-logo.is-missing img { display: none; }
.brand-logo.is-missing::before { content: attr(data-label); font-size: .9rem; font-weight: 600; color: var(--ink-3); }

/* reduced motion: a still, centered wall of logos */
.brands__track.is-static { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: var(--gap); padding-inline: 16px; }
@media (prefers-reduced-motion: reduce) { .brands__viewport { -webkit-mask-image: none; mask-image: none; } }

/* =========================================================
   Start a conversation
   ========================================================= */
/* the footer gradient is horizontal only, so the strip behind the card's
   curved bottom and the footer below it meet without a seam */
:root { --footer-grad: linear-gradient(90deg, #1A2161 0%, #1D2570 45%, #2A2A8C 72%, #4A2DC0 100%); }
.contact {
  position: relative; padding-top: clamp(40px, 6vw, 80px);
  background: linear-gradient(#EFF1F9, #EFF1F9) top / 100% 50% no-repeat, var(--footer-grad);
}
.contact__card {
  position: relative; z-index: 1;
  padding-block: clamp(48px, 5.5vw, 84px) clamp(90px, 8.5vw, 130px);
  background: radial-gradient(60% 90% at 30% 40%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F8F8FD 0%, #F1F1F9 100%);
  /* asymmetric sweep: the dark rises higher on the far side from the copy */
  border-radius: 72px 72px 43% 57% / 72px 72px 18% 32%;
}
html[dir="ltr"] .contact__card { border-radius: 72px 72px 57% 43% / 72px 72px 32% 18%; }
.contact .section-title { font-size: clamp(2rem, 3.4vw, 3.3rem); font-weight: 900; color: #141A55; }
.contact__text { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: #4A4F6E; margin: 1rem 0 2.2rem; line-height: 1.9; }
.contact__btn { --pad-x: 2rem; padding-block: 1.05rem; font-size: 1.12rem; font-weight: 800; box-shadow: 0 18px 34px -14px rgba(91, 69, 242, .65); }

.bubbles { position: relative; height: clamp(220px, 24vw, 330px); max-width: 480px; margin-inline: auto; }
.bubble { position: absolute; border-radius: 42% 42% 42% 10% / 50% 50% 50% 12%; will-change: transform; }
.bubble--blue {
  width: 62%; height: 64%; top: 6%; inset-inline-start: 10%; z-index: 1;
  background: radial-gradient(120% 130% at 28% 18%, #6FB0FF 0%, #1F7BFF 34%, #0A5CF0 58%, #0838B8 100%);
  box-shadow: inset -16px -20px 36px rgba(5, 8, 60, .35), inset 12px 14px 26px rgba(255,255,255,.35), 0 40px 60px -24px rgba(10, 92, 240, .7);
  display: grid; place-items: center;
  animation: floatA 7s ease-in-out infinite alternate;
}
html[dir="rtl"] .bubble--blue { border-radius: 42% 42% 10% 42% / 50% 50% 12% 50%; }
.bubble--orb {
  width: 16%; aspect-ratio: 1; height: auto; top: 50%; inset-inline-end: 12%; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFE0F7 0%, #F865D8 26%, #DA1FB6 60%, #8C0A7C 100%);
  box-shadow: inset -6px -8px 14px rgba(90, 0, 80, .3), 0 20px 30px -12px rgba(224, 3, 164, .55);
  animation: floatB 6s ease-in-out infinite alternate;
}
.bubble__shine { position: absolute; top: 10%; inset-inline-start: 14%; width: 34%; height: 16%; border-radius: 50%; background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,0)); filter: blur(1px); }.typing { display: flex; gap: 10px; }
@media (max-width: 991.98px) {
  .contact__card { border-radius: 40px 40px 50% 50% / 40px 40px 56px 56px !important; padding-bottom: 96px; text-align: center; }
  .bubbles { height: 200px; max-width: 340px; }
}
.typing i { width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: .5; animation: typing 1.3s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes floatA { from { transform: translate3d(0, 0, 0) rotate(-1deg); } to { transform: translate3d(0, -12px, 0) rotate(1deg); } }
@keyframes floatB { from { transform: translate3d(0, -6px, 0) rotate(1deg); } to { transform: translate3d(0, 8px, 0) rotate(-1deg); } }

/* Contact modal */
.contact-modal { border: 0; border-radius: 28px; padding: .5rem; box-shadow: var(--shadow-lg); }
.contact-modal .modal-title { font-weight: 800; font-size: 1.5rem; }
.modal-backdrop.show { opacity: .35; }
.contact-form .form-label { font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.contact-form .form-control { border-radius: 14px; border-color: var(--line); padding: .8rem 1rem; background: #FCFBFA; }
.contact-form .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(3, 94, 236, .12); background: #fff; }
html[dir="rtl"] .contact-form #cfContact { text-align: right; }
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 500; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); user-select: none; }
.chip:hover { border-color: var(--line-2); }
.btn-check:checked + .chip { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-check:focus-visible + .chip { outline: 2px solid var(--brand); outline-offset: 2px; }
.form-status { margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: 14px; font-size: .95rem; line-height: 1.8; }
.form-status.is-warn { background: #FFF7E8; border: 1px solid #F1DCB0; color: #6A4D12; }
.form-status.is-error { background: #FDEEF3; border: 1px solid #F3C4D5; color: #8A2346; }
.form-status.is-ok { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  color: rgba(255, 255, 255, .74); padding: clamp(40px, 5vw, 64px) 0 28px;
  /* the violet glow stays low so the top edge still matches the strip above */
  background: radial-gradient(40% 70% at 100% 100%, rgba(122, 64, 235, .45), transparent 70%), var(--footer-grad);
}
.site-footer__logo { display: inline-flex; margin-bottom: 1.2rem; }
.site-footer__logo img { height: 46px; width: auto; display: block; }
.site-footer__about { max-width: 34ch; font-size: 1.05rem; line-height: 1.95; margin: 0; }
.site-footer__h { color: #fff; font-size: 1.1rem; font-weight: 800; margin-bottom: 1.3rem; }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.site-footer__links a { color: rgba(255, 255, 255, .8); text-decoration: none; transition: color .2s var(--ease); }
.site-footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.site-footer :focus-visible { outline-color: #fff; }

.social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .9rem; }
.social__btn {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.social__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.social__btn:hover, .social__btn:focus-visible { color: #fff; background: var(--logo-grad); border-color: transparent; transform: translateY(-3px); }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; color: rgba(255, 255, 255, .62);
}
.site-footer__legal { display: inline-flex; align-items: center; gap: 1.2rem; }
.site-footer__legal a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .2s var(--ease); }
.site-footer__legal a + a { border-inline-start: 1px solid rgba(255, 255, 255, .22); padding-inline-start: 1.2rem; }
.site-footer__legal a:hover { color: #fff; }

/* =========================================================
   Floating: back-to-top (left) + contact dock (right)
   Physical sides on purpose — they stay put when the language flips.
   ========================================================= */
.to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 1040;
  width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; color: var(--ink); background: #fff;
  box-shadow: 0 16px 32px -14px rgba(20, 24, 70, .5), 0 0 0 1px rgba(20, 24, 70, .06);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s, background-color .2s var(--ease), color .2s var(--ease);
}
.to-top.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* ring fills with page progress (--p: 0 → 1, set in main.js) */
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 3; }
.to-top__track { stroke: rgba(91, 69, 242, .14); }
/* px (not a unitless calc) so every browser accepts it; pathLength=100 makes 1px = 1% of the ring */
.to-top__bar { stroke: #5B45F2; stroke-linecap: round; stroke-dasharray: 100px; stroke-dashoffset: calc((1 - var(--p, 0)) * 100px); }
.to-top__arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.to-top:hover, .to-top:focus-visible { background: var(--logo-grad); color: #fff; }
.to-top:hover .to-top__track, .to-top:focus-visible .to-top__track { stroke: rgba(255, 255, 255, .25); }
.to-top:hover .to-top__bar, .to-top:focus-visible .to-top__bar { stroke: #fff; }
.to-top:hover .to-top__arrow { transform: translateY(-2px); }

.dock { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dock__btn {
  width: 64px; height: 64px; border-radius: 20px; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: inherit; font-size: .72rem; font-weight: 700; line-height: 1.2;
  box-shadow: 0 16px 32px -14px rgba(20, 24, 70, .55);
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.dock__btn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dock__btn:hover { transform: translateY(-2px); }
.dock__btn--call { background: #fff; color: var(--ink); box-shadow: 0 16px 32px -14px rgba(20, 24, 70, .5), 0 0 0 1px rgba(20, 24, 70, .06); }
.dock__btn--call svg { color: #5B45F2; }
.dock__btn--call[aria-expanded="true"] { background: var(--ink); color: #fff; }
.dock__btn--call[aria-expanded="true"] svg { color: #fff; }
.dock__btn--form { background: var(--logo-grad); color: #fff; box-shadow: 0 16px 32px -12px rgba(91, 69, 242, .7); }

/* social list slides out to the left of the call button */
.dock__menu {
  position: absolute; right: calc(100% + 12px); bottom: 74px;
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.dock__menu:not([hidden]) { animation: dockIn .22s var(--ease) both; }
.dock__menu li:nth-child(2) { animation-delay: .03s; }
.dock__link {
  display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; padding-inline-end: 1rem;
  background: #fff; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .9rem; white-space: nowrap; text-decoration: none;
  box-shadow: 0 14px 28px -14px rgba(20, 24, 70, .5), 0 0 0 1px rgba(20, 24, 70, .06);
  transition: transform .2s var(--ease);
}
.dock__link:hover { color: var(--ink); transform: translateX(-3px); }
.dock__link svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; flex: none; color: #fff; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dock__link--wa svg { background: #25D366; }
.dock__link--tg svg { background: #229ED9; }
.dock__link--ig svg { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%); }
@keyframes dockIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.to-top:focus-visible, .dock__btn:focus-visible, .dock__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 575.98px) {
  .to-top { left: 14px; bottom: 14px; width: 48px; height: 48px; }
  .dock { right: 12px; gap: 8px; }
  .dock__btn { width: 56px; height: 56px; border-radius: 18px; font-size: .68rem; }
  .dock__menu { bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .dock__btn, .dock__link { transition: none; }
  .dock__menu:not([hidden]) { animation: none; }
}

/* Toast */
.toast-lite {
  position: fixed; left: 50%; bottom: 24px; z-index: 1090; max-width: calc(100% - 32px);
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 16px; font-size: .92rem;
  box-shadow: var(--shadow-lg); transform: translate(-50%, 16px); opacity: 0;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast-lite.is-in { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   Real photography inside mockups
   ========================================================= */
.mk-reel__video img, .mk-camp img,
.custom__art img, .phone__hero img, .prod__img img, .camp__visual img, .m-photo img, .m-reel__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.prod__img, .phone__hero, .custom__art, .camp__visual { position: relative; overflow: hidden; }
.prod__img { background: var(--bg-2); }
.phone__hero { background: var(--bg-2); }
.custom__art { background: var(--bg-2); }
.camp__visual { background: var(--bg-2); }
.m-reel__frame::before { display: none; }
.m-reel__img { object-fit: cover; }

.m-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 1.6cqw; overflow: hidden; background: #111; box-shadow: 0 34px 60px -26px rgba(15, 18, 50, .45); }
.m-photo__rec { position: absolute; top: 1.4cqw; inset-inline-start: 1.4cqw; display: inline-flex; align-items: center; gap: .6cqw; direction: ltr; font-size: max(9px, 1.05cqw); font-weight: 700; color: #fff; background: rgba(0,0,0,.45); padding: .35cqw .9cqw; border-radius: 2cqw; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.m-photo__rec i { width: .8cqw; height: .8cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: #FF3DAE; }
.m-camera .m-tag { top: calc(100% - 1.4cqw); }
.svc-comp--mkt.is-live .m-photo__rec i { animation: recBlink 1.4s steps(2, jump-none) infinite; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================
   Scroll-down arrow (skips the pinned scene)
   ========================================================= */
.hero__pin { position: relative; }
.hero-next {
  position: absolute; left: 50%; bottom: clamp(14px, 3vh, 30px); z-index: 5;
  transform: translateX(-50%); display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; text-decoration: none;
}
.hero-next__ring {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(3, 94, 236, .22); color: var(--brand);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -14px rgba(3, 94, 236, .55);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  animation: nextNudge 2.4s ease-in-out infinite;
}
.hero-next svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-next:hover .hero-next__ring, .hero-next:focus-visible .hero-next__ring { background: var(--brand); color: #fff; }
.hero-next:active .hero-next__ring { transform: scale(.94); }
@keyframes nextNudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@media (max-width: 991.98px) { .hero-next { width: 44px; height: 44px; bottom: 10px; } }

/* =========================================================
   Color pass — less white, more brand tint
   ========================================================= */
:root { --bg: #EFF1F9; --bg-2: #E6E9F5; --line: #DFE2EE; --line-2: #CDD1E2; --bs-body-bg: #EFF1F9; }
body { background: var(--bg); }

.hero { background: linear-gradient(160deg, #E1ECFD 0%, #EFF1F9 45%, #F9EAF5 100%); }
.hero::before {
  background:
    radial-gradient(45% 50% at 25% 45%, rgba(3, 94, 236, .16), transparent 70%),
    radial-gradient(30% 35% at 10% 85%, rgba(224, 3, 164, .16), transparent 70%),
    radial-gradient(35% 40% at 90% 10%, rgba(61, 139, 255, .10), transparent 70%);
}
.site-header.is-scrolled .site-header__bar { background: rgba(240, 242, 252, .92); }

.services { background: linear-gradient(to bottom, #EFF1F9 0%, #E4E8FA 100%); }
.svc-opt { border-color: #D9DDF0; }
.mock { border-color: #E1E4F1; }

/* projects: dark navy section so the mock-ups stand out */



/* ----- hero scene: filming card ----- */
.mk-cam {
  position: absolute; top: 5%; inset-inline-start: 3%; width: 46%; aspect-ratio: 4 / 3;
  border-radius: 2cqw; overflow: hidden; background: #0d0f1c;
  box-shadow: 0 40px 70px -30px rgba(15, 18, 60, .55), 0 0 0 .4cqw #fff;
}
.mk-cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-cam__rec { position: absolute; top: 1.6cqw; inset-inline-start: 1.6cqw; display: inline-flex; align-items: center; gap: .7cqw; direction: ltr; font-size: 1.5cqw; font-weight: 700; color: #fff; background: rgba(0,0,0,.5); padding: .4cqw 1.1cqw; border-radius: 2cqw; }
.mk-cam__rec i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #FF3DAE; animation: recBlink 1.4s steps(2, jump-none) infinite; }
.scene-steps { max-width: 380px; }

/* =========================================================
   Services — open state fits one screen (desktop)
   ========================================================= */
@media (min-width: 992px) {
  /* open: the row flattens so the composition below still fits one screen.
     The selected card keeps its icon and tags; the other two compress. */
  .services.is-open .svc-opt {
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: .35rem .9rem; padding: .8rem 1.1rem; border-radius: 22px;
  }
  .services.is-open .svc-opt__icon { width: 40px; border-radius: 13px; }
  .services.is-open .svc-opt__title { margin-top: 0; font-size: 1.2rem; }
  .services.is-open .svc-opt__sub { display: none; }
  .services.is-open .svc-opt__tags { margin-top: 0; flex-basis: 100%; }
  .services.is-open .svc-opt[aria-expanded="true"] .svc-opt__tags { max-height: 3rem; }
  .services.is-open .svc-opt__toggle { margin-top: 0; margin-inline-start: auto; width: 36px; height: 36px; }
  .services.is-open .svc-comp { padding-top: 1.3rem; padding-bottom: 0; }
  .services.is-open .svc-text__title { font-size: clamp(1.3rem, 1.8vw, 1.7rem); margin-bottom: .7rem; }
  .services.is-open .svc-text p { line-height: 1.85; margin-bottom: .6rem; }
  .services.is-open .svc-list { margin: .8rem 0 1rem; gap: .4rem; }

  .svc-comp--web .cluster { max-width: calc(var(--svc-h, 9999px) * 16 / 11.5); margin-inline: auto; }
  .svc-comp--seo .cluster { max-width: calc(var(--svc-h, 9999px) * 16 / 10.6); margin-inline: auto; }
  .svc-comp--mkt .cluster { max-width: calc((var(--svc-h, 9999px) - 205px) * 2.1); margin-inline: auto; }
  .services.is-open .svc-comp--mkt > .row { margin-bottom: 1rem !important; }
  .services.is-open .svc-comp--mkt > .mt-4 { margin-top: .5rem !important; }

  /* hard guarantee: the description never grows past the space measured for it */
  .services.is-open .svc-comp { max-height: var(--svc-max, none); }
}

/* the three cards now share one glass treatment, so no per-card tints here */
/* =========================================================
   Logo-based accents (blue → violet → magenta gradient)
   ========================================================= */
:root { --logo-grad: linear-gradient(100deg, #0E7EFE 0%, #5B45F2 52%, #E003A4 100%); --magenta: #E003A4; }
.site-logo img { height: 38px; width: auto; }
.btn-brand { background: var(--logo-grad); background-size: 160% 100%; background-position: 0% 50%; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-position .35s var(--ease); box-shadow: 0 12px 26px -12px rgba(91, 69, 242, .6); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--logo-grad); background-size: 160% 100%; background-position: 100% 50%; }
.hero__accent { background: var(--logo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .06em; }
.scene-steps__fill { background: var(--logo-grad); }
.svc-opt::before { background: var(--logo-grad); }
.eyebrow::before { background: var(--logo-grad); opacity: 1; height: 2px; }

/* =========================================================
   Hero scene — the filming card is a slider
   (gear → editing → social)
   ========================================================= */
.mk-cam__shot { position: absolute; inset: 0; }
/* beats `.mk-cam img`, which pins a single cover photo */
.mk-cam .mk-slide { opacity: 0; transition: opacity .6s var(--ease); }
.mk-cam .mk-slide.is-on { opacity: 1; }
/* product shots with transparent / portrait framing must not be cropped */
.mk-cam .mk-slide.is-contain { object-fit: contain; background: #0d0f1c; }

.mk-cam__rec { z-index: 2; }
.mk-cam__caps {
  position: absolute; z-index: 2; inset-inline: 0; bottom: 0; display: grid;
  padding: 3.4cqw 1.6cqw 1.5cqw;
  background: linear-gradient(to top, rgba(8, 10, 24, .88), transparent);
}
.mk-cap {
  grid-area: 1 / 1; font-size: 1.6cqw; font-weight: 700; color: #fff; line-height: 1.5;
  opacity: 0; transition: opacity .45s var(--ease);
}
.mk-cap.is-on { opacity: 1; }

.mk-cam__dots {
  position: absolute; z-index: 3; bottom: 1.4cqw; inset-inline-end: 1.4cqw;
  display: flex; align-items: center; gap: .55cqw;
  padding: .55cqw .75cqw; border-radius: 2cqw; background: rgba(8, 10, 24, .55);
}
.mk-cam__dots i {
  width: .75cqw; height: .75cqw; border-radius: 50%; background: rgba(255, 255, 255, .45);
  transition: background .35s var(--ease), width .35s var(--ease);
}
.mk-cam__dots i.is-on { width: 2.2cqw; border-radius: 1cqw; background: #fff; }

/* =========================================================
   Responsive pass — phones & tablets (kept last so it wins)
   ========================================================= */
@media (max-width: 991.98px) {
  .site-logo img { height: 32px; }
  .section { padding-block: clamp(64px, 9vw, 96px); }
  .section-title { font-size: clamp(1.55rem, 3.6vw, 2.1rem); line-height: 1.5; }
  .section-title--sm { font-size: clamp(1.45rem, 3.2vw, 1.9rem); }
  .contact .section-title { font-size: clamp(1.6rem, 4vw, 2.3rem); }
  .contact__text { font-size: 1rem; margin: .8rem 0 1.6rem; }
}
@media (max-width: 991.98px) {
  /* phones/tablets in Persian: logo on the left, menu + language on the right (burger at the edge) */
  html[dir="rtl"] .site-header__bar { flex-direction: row-reverse; }
  html[dir="rtl"] .header-tools { flex-direction: row-reverse; }
  /* drawer head: logo at one end, close button at the other */
  .nav-drawer__head { justify-content: space-between; }
}
@media (max-width: 1199.98px) {
  /* contact dock: below 1200px the container reaches the screen edge, so the dock
     leaves the reading area and sits in the bottom corner as two compact round buttons */
  .dock { top: auto; bottom: 16px; right: 16px; transform: none; flex-direction: row; align-items: center; gap: 8px; }
  .dock__btn { width: 52px; height: 52px; border-radius: 50%; }
  .dock__btn svg { width: 22px; height: 22px; }
  .dock__btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dock__menu { right: 0; bottom: calc(100% + 10px); }
  .to-top { left: 16px; bottom: 16px; }
  .toast-lite { bottom: 82px; }
  .site-footer { padding-bottom: 88px; }
}
@media (max-width: 767.98px) {
  /* phones: call above chat, stacked in the corner */
  .dock { bottom: 14px; right: 14px; flex-direction: column; }
  .dock { transition: opacity .25s var(--ease), visibility 0s linear 0s; }
  /* home hero on phones: the stacked dock would sit on the hero button, so it waits until you scroll */
  .dock.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
  .dock__btn { width: 48px; height: 48px; }
  .dock__btn svg { width: 21px; height: 21px; }
  .dock__link { font-size: .85rem; }
  .to-top { left: 14px; bottom: 14px; width: 46px; height: 46px; }
  .toast-lite { bottom: 76px; }
  .site-footer { padding-bottom: 84px; }
  /* the decorative bubbles under "start a conversation" only add scroll on phones */
  .contact .bubbles { display: none; }
  .contact__card { padding-bottom: 72px; }
  .hero__title { font-size: clamp(1.75rem, 7.6vw, 2.6rem); }
  .hero__sub { font-size: .95rem; }

  /* home hero on phones: copy first (centred, no eyebrow), the picture below it; no "next" arrow */
  .hero__eyebrow { display: none; }
  .hero__copy { text-align: center; }
  .hero-next { display: none; }
  .hero__actions { display: flex; justify-content: center; }
  /* phones: title + subline, then the pictures, then the button and the step bar under them.
     The copy column dissolves so its parts can sit around the picture column. */
  .hero__copy { display: contents; }
  .hero__row > * { margin-top: 0; }
  .hero__title, .hero__sub, .hero__actions, .hero .scene-steps { width: 100%; text-align: center; }
  .hero__title { order: 1; font-size: clamp(1.35rem, 6.4vw, 2rem); margin: 3.4rem 0 .35rem; }
  .hero__title .mask-line { display: inline-block; }
  .hero__sub { order: 2; margin-bottom: 0; }
  .hero__row > :not(.hero__copy) { order: 3; margin-top: 2rem; }
  /* step bar and button share one start edge, inset a little from the side */
  .hero .scene-steps { order: 4; max-width: none; margin-top: 1rem; padding-inline: 1rem; text-align: start; }
  .hero .scene-steps__list { justify-content: flex-start; }
  .hero__actions { order: 5; margin-top: 1.4rem; justify-content: flex-start; padding-inline: 1rem; }
  .hero__actions .btn-brand { width: 100%; justify-content: center; padding-block: 1rem; }

  /* home services on phones: centred head; every card keeps its +/− at the end of the title row */
  .services .section-head { text-align: center; }
  .services .section-head .eyebrow { justify-content: center; }
  .svc-opt__icon { order: 0; }
  .svc-opt__title { order: 1; }
  /* pinned to the very end (left in Persian) of every card, level with the icon row */
  .svc-opt { padding-inline-end: 4rem; }
  .svc-opt__toggle { position: absolute; inset-inline-end: 1rem; top: calc(1rem + 5px); margin: 0; }
  .svc-opt__sub { order: 3; }
  .svc-opt__tags { order: 4; flex-basis: 100%; }
  .svc-opt[aria-expanded="true"] .svc-opt__tags { margin-top: .2rem; }

  /* home magazine on phones: centred head, archive button after the posts */
  .news__shell { display: flex; flex-direction: column; }
  .news__head { display: contents; }
  .news__head > div { order: 1; text-align: center; margin-bottom: 1.4rem; }
  .news__head .eyebrow { justify-content: center; }
  .news-grid { order: 2; }
  .news__head > .btn-outline { order: 3; align-self: center; margin-top: 1.5rem; }
}
@media (max-width: 767.98px) and (max-height: 700px) {
  /* short phones: a smaller picture keeps the hero compact */
  .scene { width: min(100%, calc(33svh * 1.1)); }
  .hero__title { margin-top: 2.6rem; }
  .hero__row > :not(.hero__copy) { margin-top: 1.4rem; }
}
@media (max-width: 575.98px) {
  html { -webkit-text-size-adjust: 100%; }
  .site-logo img { height: 28px; }
  .lang-toggle { padding: .5rem .7rem; }
  .burger { width: 40px; height: 40px; }
  .burger i { left: 11px; right: 11px; }
  .burger i:first-child { top: 15px; }
  .burger i:last-child { top: 23px; }
  .section { padding-block: 56px; }
  .section-title { font-size: 1.4rem; line-height: 1.6; }
  .section-title--sm, .news__head .section-title { font-size: 1.35rem; }
  .svc-text__title--lg { font-size: 1.35rem; }
  html[lang="en"] .section-title { line-height: 1.25; }
  .section-lead { font-size: .95rem; line-height: 1.85; }
  .eyebrow { font-size: .8rem; margin-bottom: .6rem; }
  .btn-brand { font-size: .95rem; }
  .contact .section-title { font-size: 1.5rem; }
  .contact__btn { --pad-x: 1.5rem; font-size: 1rem; padding-block: .9rem; }
  .contact__card { padding-block: 44px 76px; }
  .site-footer { font-size: .92rem; }
  .site-footer__logo img { height: 38px; }
  .site-footer__about { font-size: .95rem; }
  .site-footer__h { font-size: 1rem; margin-bottom: .9rem; }
  .site-footer__links { gap: .6rem; }
  .social__btn { width: 48px; height: 48px; }
  .social__btn svg { width: 21px; height: 21px; }
  .site-footer__bottom { margin-top: 32px; flex-direction: column; align-items: flex-start; }
  .contact-modal .modal-title { font-size: 1.25rem; }
  .modal-dialog { margin: .75rem; }
}
@media (max-width: 374.98px) {
  .site-logo img { height: 25px; }
  .header-tools { gap: .35rem; }
}