/* ============ Yeelance — design tokens ============ */
:root {
  /* Cobalt sampled straight out of the logo PNG (#0046B6) so every blue on
     the site is the same family as the mark. --blue-dark / --blue-accent are
     the same hue and saturation at lower / higher lightness. --blue-rgb is
     the channel triplet for the rgba(...) shadows and tints, so they shift
     with the base colour instead of being hardcoded to the old indigo. */
  --blue: #0046b6;
  --blue-dark: #003994;
  --blue-accent: #0058e6;
  --blue-rgb: 0, 70, 182;
  /* pale cobalt tints */
  --hero-top: #e6ecfa;
  --hero-bottom: #edf1fb;
  --red: #ee1c25;
  --red-dark: #cf131b;
  --ink: #0c0c10;
  --body: #3c4250;
  --muted: #818898;
  --bg: #ffffff;
  --bg-soft: #e8f0fd;
  --bg-card: #ffffff;
  --line: #e6e9f2;
  --radius-lg: 28px;
  --radius-md: 18px;
  --font-display: "Days One", "Trebuchet MS", sans-serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-card: 0 24px 60px -28px rgba(16, 24, 64, 0.25);
  --shadow-soft: 0 10px 30px -12px rgba(16, 24, 64, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
.illus { width: 100%; height: auto; }
.icon-img { display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.center { text-align: center; }

/* ============ type ============ */
.h2 {
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.h2--display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
.h3 {
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }
/* red reads more saturated than blue at the same alpha, so its glow is
   toned down further to keep the two buttons visually even instead of
   the red one "bleeding" into the space around it */
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -10px rgba(var(--blue-rgb), 0.4); }
.btn--blue:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 6px 14px -10px rgba(238, 28, 37, 0.28); }
.btn--red:hover { background: var(--red-dark); transform: translateY(-2px); }
.btn--sm { padding: 10px 22px; font-size: 0.92rem; }
.btn--wide { padding: 15px 44px; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95rem; }

/* ============ reveal animation ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.65, 0.25, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============ navbar ============ */
/* floating translucent glass pill, inset from the top edge rather
   than a full-bleed solid bar */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: 16px;
  /* At rest the nav sits in normal flow ABOVE the hero, so whatever is
     behind it is the plain white page background — which merged with the
     white pill into one solid white band. Every page's hero starts at
     var(--hero-top), so painting that same token here makes the strip
     seamless with the hero directly below it: the pill reads as floating
     on the hero. Sharing the token means the two can never drift apart.
     Once the hero has actually scrolled up behind the nav (see Navbar's
     scroll handler, which compares against the nav's measured height) the
     nav goes transparent so real content passes under the frosted glass. */
  background: var(--hero-top);
  transition: background 0.25s ease;
}
.nav--scrolled { background: transparent; }
.nav__inner {
  /* matches .container exactly so the pill's edges line up with the
     section cards stacked below it */
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 30px -18px rgba(16, 24, 64, 0.35);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.nav--scrolled .nav__inner {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px -16px rgba(16, 24, 64, 0.4);
}
.nav__logo { display: flex; align-items: center; line-height: 0; }
.nav__logo .logo__mark { width: 36px; height: 36px; }
.nav__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 4vw, 56px);
  flex: 1;
}
.nav__links > a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #414a5e;
  padding: 8px 2px;
  position: relative;
  transition: color 0.2s ease;
}
.nav__links > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--blue-accent);
  transition: right 0.25s ease;
}
.nav__links > a:hover, .nav__links > a.is-active { color: var(--blue); }
.nav__links > a:hover::after, .nav__links > a.is-active::after { right: 0; }
.nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 26px; height: 2.6px;
  margin: 5px 0;
  background: var(--blue);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 3px; }
.logo__mark { width: 52px; height: 52px; border-radius: 50%; }
.logo__text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  color: #fff;
  letter-spacing: 0.01em;
}

/* ============ hero ============ */
.hero {
  background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
  padding: 32px 0 56px;
  overflow: hidden;
}
.hero__inner { width: min(900px, calc(100% - 48px)); margin: 0 auto; text-align: center; }
.hero__art { width: min(480px, 82%); margin: 0 auto; }
.hero__title {
  font-size: clamp(2.8rem, 7.5vw, 5.3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 20px 0 14px;
}
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--body); margin: 0 0 26px; }
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* when a paired blue/red button wraps onto its own line (narrow screens),
   give it more vertical breathing room than the horizontal gap alone —
   otherwise the two glow shadows sit close enough to blur together. */
.hero__actions, .cta__actions { row-gap: 22px; }
.hero--contact { padding: 72px 0 54px; }
.hero--contact .hero__sub { max-width: 46ch; margin-inline: auto; margin-bottom: 0; }
.cta--page { padding: 20px 0 100px; }

/* ============ logo marquee ============ */
.marquee {
  background: var(--bg-soft);
  padding: 26px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 16px 30px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.marquee__logo-img { height: 34px; width: auto; object-fit: contain; display: block; }

/* ============ seamless ============ */
.seamless { padding: 110px 0 90px; }
.seamless__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.seamless__art { padding: 12px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step__icon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -12px rgba(var(--blue-rgb), 0.6);
  overflow: hidden;
}
.step__icon svg, .step__icon .icon-img { width: 100%; height: 100%; object-fit: contain; }
.step strong { font-size: 1.06rem; display: block; margin-bottom: 2px; }
.step p { margin: 0; color: var(--body); }

/* ============ services ============ */
.services { padding: 40px 0 110px; }
.services__grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px 28px;
}
.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  transition: transform 0.22s ease;
}
.service:hover { transform: translateY(-6px); }
.service__icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #f4f4f6;
  color: var(--blue);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.service:hover .service__icon { background: #e4edfd; box-shadow: 0 24px 44px -18px rgba(var(--blue-rgb), 0.55); }
.service__icon svg, .service__icon .icon-img { width: 36px; height: 36px; object-fit: contain; }
.service__label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  color: var(--ink);
}

/* services revealed by "View All Services" animate in on their own —
   they mount after the page's scroll-reveal observer has already run,
   so they use a plain CSS animation instead of the .reveal--t/IntersectionObserver
   combo (which would never fire for elements added after mount). */
.service--extra { animation: serviceExtraIn 0.45s cubic-bezier(0.2, 0.65, 0.25, 1) both; }
@keyframes serviceExtraIn {
  from { opacity: 0; transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) {
  .service--extra { animation: none; }
}

/* expand/collapse toggle for the services grid */
.services__more { display: flex; justify-content: center; margin-top: 46px; }
.services__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1.6px solid var(--ink);
  border-radius: 999px;
  padding: 13px 30px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.services__toggle svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.services__toggle:hover { background: var(--ink); color: #fff; }
.services__toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
.services__toggle:not([aria-expanded="true"]) svg { transform: rotate(90deg); }

/* ============ audience cards ============ */
.audience { padding: 80px 0; background: var(--bg-soft); }
.audience + .testimonials { background: #fff; }
.audience__card {
  margin-top: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: 1.05fr 1.1fr 1fr;
  gap: clamp(22px, 3.5vw, 44px);
  align-items: center;
}
.audience__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
/* these items are a single paragraph next to an icon (no separate title
   line like the "How It Works" steps have), so the icon should center
   against the whole text block — flex-start left it pinned to the top,
   which looked wrong whenever the text wrapped to two lines. */
.audience__points li { display: flex; align-items: center; gap: 16px; }
.audience__points p { margin: 0; color: var(--ink); font-size: 1.02rem; }
.point__icon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
}
.point__icon svg, .point__icon .icon-img { width: 30px; height: 30px; object-fit: contain; }
.audience__cta .btn { margin-top: 4px; }

/* ============ testimonials ============ */
.testimonials { padding: 120px 0; position: relative; overflow: hidden; }
.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 60% at 50% 38%, rgba(var(--blue-rgb), 0.08), transparent 72%);
  pointer-events: none;
}
.testimonials__sub { max-width: 460px; margin: 14px auto 0; color: var(--muted); }
.testimonials__stage {
  position: relative;
  max-width: 1160px;
  margin: 64px auto 0;
  padding: 24px 0 48px;
  /* NOT overflow-x:hidden + overflow-y:visible — per spec, if one axis is
     anything other than visible the other computes to auto, so that combo
     silently clipped the cards' bottoms and shadows into a hard flat edge.
     The side cards are scaled down and fit inside the track now, and body
     already has overflow-x:hidden, so nothing here needs clipping. */
  overflow: visible;
}
.testimonials__track {
  --t-shift: 150px;
  --t-card-w: clamp(230px, 52vw, 300px);
  --t-side-scale: 0.84;
  position: relative;
  height: calc(var(--t-card-w) * 4 / 3 + 16px);
}
/* Portrait "stack of cards". The two behind stay upright (no tilt) and sit
   slightly SMALLER than the middle one, so the trio reads as a clean
   1-small / 2-big / 3-small row rather than a fanned-out pile. They're a
   pale cobalt tint — the same family as the section below — so the white
   active card in the middle is clearly the focus. */
.t-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--t-card-w);
  aspect-ratio: 3 / 4;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px -22px rgba(var(--blue-rgb), 0.35);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.28, 1), opacity 0.5s ease, background 0.4s ease 0.05s, box-shadow 0.4s ease;
}
.t-card blockquote,
.t-card__meta {
  margin: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.t-card blockquote {
  margin: 0 0 20px;
  font-size: clamp(0.96rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink);
}
.t-card__meta { display: flex; align-items: center; justify-content: center; gap: 12px; }
.t-card__meta span:last-child { text-align: left; }
.t-card strong { display: block; }
.t-card em { font-style: normal; color: var(--muted); font-size: 0.88rem; }
.t-card--active {
  background: #fff;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  box-shadow: 0 30px 70px -28px rgba(16, 24, 64, 0.32);
}
.t-card--active blockquote,
.t-card--active .t-card__meta { opacity: 1; transition-delay: 0.2s; }
/* upright and scaled down — --t-side-scale keeps the two side cards
   visibly smaller than the middle one without changing their box, so the
   layout height stays driven by the active card alone */
.t-card--prev, .t-card--next {
  opacity: 1;
  z-index: 2;
  cursor: pointer;
}
.t-card--prev { transform: translate(calc(-50% - var(--t-shift)), -50%) scale(var(--t-side-scale)); }
.t-card--next { transform: translate(calc(-50% + var(--t-shift)), -50%) scale(var(--t-side-scale)); }
.t-card--prev:hover { transform: translate(calc(-50% - var(--t-shift)), -50%) scale(calc(var(--t-side-scale) + 0.03)); }
.t-card--next:hover { transform: translate(calc(-50% + var(--t-shift)), -50%) scale(calc(var(--t-side-scale) + 0.03)); }
.t-card--far {
  transform: translate(-50%, -50%) scale(var(--t-side-scale));
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--bg-soft);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.15rem;
}
.t-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.t-arrow svg { width: 22px; height: 22px; }
.t-arrow--prev { left: clamp(4px, 1vw, 16px); }
.t-arrow--prev svg { transform: rotate(180deg); }
.t-arrow--next { right: clamp(4px, 1vw, 16px); }
.t-arrow:hover { background: var(--blue); color: #fff; transform: translateY(-50%) scale(1.06); }
.t-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; gap: 10px; justify-content: center; }
.t-dots button {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 10px; height: 10px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 0;
  background: #bfd0ee;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.t-dots button.is-active { background: var(--blue); transform: scale(1.25); }

/* ============ blogs ============ */
.blogs { padding: 110px 0 70px; }
.blogs__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.blog {
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease;
}
.blog:hover { transform: translateY(-6px); }
.blog__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.blog__scene { width: 100%; height: auto; transition: transform 0.4s ease; }
.blog:hover .blog__scene { transform: scale(1.04); }
.blog__tag {
  position: absolute;
  left: 14px; bottom: 14px;
  background: #c32cd6;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  padding: 7px 14px;
  border-radius: 999px;
}
.blog h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 20px 0 10px;
}
.blog p { margin: 0 0 18px; color: var(--muted); }
.blog__more {
  width: 56px; height: 34px;
  border: 1.6px solid var(--ink);
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.blog__more svg { width: 18px; height: 18px; }
.blog__more:hover { background: var(--ink); color: #fff; }

/* ============ CTA ============ */
.cta { padding: 60px 0 120px; }
.cta__card {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(30px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
}
.cta__content p { color: var(--body); font-size: 1.08rem; margin: 0 0 30px; max-width: 46ch; }
.cta__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============ footer ============ */
.footer { background: #040405; color: #fff; padding: 72px 0 40px; }
.footer__inner { display: grid; justify-items: center; gap: 30px; text-align: center; }
.footer .logo__mark { width: 56px; height: 56px; }
.footer__social { display: flex; gap: 20px; }
.footer__social a {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  color: #0c0c10;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.footer__social a svg { width: 24px; height: 24px; }
.footer__social a:hover { transform: translateY(-4px); background: var(--blue-accent); color: #fff; }
.footer__links, .footer__legal { display: flex; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; justify-content: center; }
.footer__links a, .footer__legal a { color: #c9cbd4; transition: color 0.2s ease; }
.footer__links a:hover, .footer__legal a:hover { color: #fff; }
.footer__copy {
  margin: 26px 0 0;
  color: #8e909c;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============ scroll-to-top ============ */
.scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--blue);
  color: var(--red);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -10px rgba(var(--blue-rgb), 0.55);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  z-index: 60;
}
.scroll-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top:hover { background: var(--blue-dark); transform: translateY(-3px); }
.scroll-top svg { width: 22px; height: 22px; }
@media (max-width: 480px) {
  .scroll-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: opacity 0.2s ease; }
}

/* ============ responsive ============ */
@media (max-width: 1020px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .audience__card { grid-template-columns: 1fr 1fr; }
  .audience__cta { grid-column: 1 / -1; text-align: center; }
  .audience__cta .h3 { margin-bottom: 18px; }
}
@media (max-width: 880px) {
  .seamless__grid { grid-template-columns: 1fr; }
  .seamless__art { max-width: 420px; margin: 0 auto; }
  .blogs__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .cta__card { grid-template-columns: 1fr; text-align: center; }
  .cta__art { max-width: 380px; margin: 0 auto; }
  .cta__content p { margin-inline: auto; }
  .cta__actions { justify-content: center; }
}
@media (max-width: 780px) {
  .nav__links {
    position: fixed;
    inset: 74px 16px auto 16px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 0 26px;
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 28px 48px -22px rgba(16, 24, 64, 0.45);
  }
  .nav__links.is-open { transform: none; opacity: 1; }
  .nav__links { justify-content: center; }
  .nav__links > a { padding: 12px; }
  .nav__burger { display: block; }

  /* Sections keep their generous desktop padding by default, which
     reads as a huge dead-space wall on short phone viewports. Scale
     every section's vertical rhythm down for <=780px instead. */
  .seamless { padding: 56px 0 48px; }
  .seamless--stack { padding: 48px 0 56px; }
  .seamless--stack .seamless__grid { margin-top: 32px; }
  .seamless--stack .seamless__grid + .seamless__grid { margin-top: 40px; }
  .services { padding: 32px 0 56px; }
  .services__grid { margin-top: 32px; }
  .audience { padding: 48px 0; }
  .testimonials { padding: 56px 0; }
  .testimonials__stage { margin: 32px auto 0; padding: 16px 0 48px; }
  .testimonials__track { --t-shift: 100px; }
  .blogs { padding: 56px 0 40px; }
  .blogs__grid { margin-top: 36px; }
  .cta { padding: 40px 0 56px; }
  .footer { padding: 48px 0 28px; }
  .about-story { padding: 36px 0 48px; }
  .legal { padding: 36px 0 56px; }
  .hero--about { padding: 44px 0 24px; }
  .hero--legal { padding: 40px 0 8px; }
  .hero--contact { padding: 44px 0 32px; }
  .cta--page { padding: 20px 0 48px; }

  /* On phones the hero + marquee should read as "one screen" — the
     marquee peeking in at the bottom is the cue to keep scrolling.
     Without this, a naturally-short hero lets the next section's
     heading start bleeding into the first view on taller phones.
     min-height only ever ADDS space (never clips), so shorter/older
     phones that need to scroll a bit sooner are unaffected. Nav here
     is ~52px tall and the marquee strip is ~118px tall. */
  .hero { min-height: calc(100svh - 190px); display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 620px) {
  .audience__card { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr 1fr; gap: 40px 18px; }
  .service__icon { width: 64px; height: 64px; }
  .service__icon svg, .service__icon .icon-img { width: 30px; height: 30px; }
  .t-arrow { display: none; }
  .testimonials__track { --t-shift: 82px; }
}
@media (max-width: 480px) {
  .nav__inner { padding: 8px 16px; gap: 24px; }
  .nav__logo .logo__mark { width: 30px; height: 30px; }
  /* trim the empty space around the hero on small screens without
     shrinking the illustration or heading themselves */
  .hero { padding: 22px 0 36px; min-height: calc(100svh - 180px); }
  .hero__title { margin: 14px 0 10px; }
  .hero__sub { margin: 0 0 20px; }
  .h2, .audience h2 { font-size: 1.5rem; margin-bottom: 20px; }
  .testimonials__track { --t-card-w: clamp(190px, 58vw, 250px); --t-shift: 64px; }
}

/* ============================================================
   ENHANCEMENTS: stagger, tilt, stats, hero draw, contact form
   ============================================================ */

/* tilt-aware reveal variant: uses `translate` for entrance so
   `transform` stays free for the cursor tilt (they compose) */
.reveal--t {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.reveal--t.is-visible { opacity: 1; translate: 0 0; }

.tilt {
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
  transform-style: preserve-3d;
}
/* tilt replaces the old translateY hover on these cards */
.service.tilt:hover { transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.service.tilt .service__icon { transition: box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.25s ease; transform: translateZ(28px); }
.blog.tilt:hover { transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.blog.tilt .blog__media { transform: translateZ(22px); }

/* ---- hero illustration materializes out of nothing (Raycast-style) ---- */
.hero__art--draw {
  animation: heroMaterialize 1.5s cubic-bezier(0.16, 0.8, 0.2, 1) both;
}
@keyframes heroMaterialize {
  0%   { opacity: 0; filter: blur(26px); transform: scale(0.82) translateY(14px); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
}

/* ---- contact form ---- */
.cform { margin-top: 26px; display: grid; gap: 14px; position: relative; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform__field { display: grid; gap: 6px; }
.cform__field > span { font-size: 0.82rem; font-weight: 600; color: var(--body); }
.cform input, .cform select, .cform textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cform textarea { resize: vertical; min-height: 88px; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(var(--blue-rgb), 0.12);
}
.cform input[aria-invalid="true"], .cform textarea[aria-invalid="true"] { border-color: var(--red); }
.cform__err { color: var(--red); font-size: 0.78rem; font-style: normal; }
.cform__submit { margin-top: 4px; width: 100%; }
.cform__toast {
  position: absolute;
  left: 0; right: 0; bottom: -54px;
  background: #0c7a44;
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cform__toast.is-shown { opacity: 1; transform: none; }

/* CTA content alignment with form */
.cta__content { display: flex; flex-direction: column; }

/* focus-visible polish across interactive elements */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 700px) {
  .cform__row { grid-template-columns: 1fr; }
}

/* respect reduced motion for all new effects */
@media (prefers-reduced-motion: reduce) {
  .reveal--t { opacity: 1; translate: none; transition: none; }
  .tilt { transform: none !important; }
  .hero__art--draw { animation: none; opacity: 1; filter: none; transform: none; }
  .nav__progress { transition: none; }
  .cform__toast { transition: none; }
}

/* ============================================================
   NEW LOGO + RAYCAST TRAVELLING-LIGHT EFFECTS
   ============================================================ */

/* --- logo: plain tile, no animation --- */
.logo__badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
}
.logo__mark { display: block; border-radius: 14px; }

/* --- buttons: travelling light around the border (Raycast style) ---
   A CSS-only sweep (conic-gradient by angle, or offset-path: border-box)
   either moves unevenly on a pill shape (angle isn't proportional to
   arc length once the button gets wide) or depends on browser support
   that isn't universal. Instead, JS (useBorderLights() in Shared.jsx)
   measures each .btn's real box every frame and walks a dot around its
   exact outline at constant arc-length speed, writing the result into
   the --lx/--ly custom properties below. That makes the motion equally
   smooth on every button size and every browser, with no fallback
   branch needed. */
.btn { position: relative; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.5) 50%, transparent 75%);
  filter: blur(0.4px);
  transform: translate(var(--lx, 0px), var(--ly, 0px));
  pointer-events: none;
  z-index: 2;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.btn:hover::before { opacity: 0.95; }

@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
}

/* ============================================================
   HERO — flat background matching Figma (no animated color beams)
   ============================================================ */
.hero { position: relative; }
.hero__inner { position: relative; z-index: 2; }
.hero > * { position: relative; z-index: 2; }

/* ============================================================
   SECONDARY-PAGE HERO MODIFIERS (About / Contact / Legal)
   ============================================================ */
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.hero__title--md { font-size: clamp(2.1rem, 5vw, 3.3rem); margin-top: 0; }
.hero__art--sm { width: min(320px, 60%); }
.hero--about { padding: 68px 0 36px; }
.hero--legal { padding: 60px 0 8px; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-story { padding: 50px 0 90px; }
.about-story__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.about-story__inner p { color: var(--body); font-size: 1.08rem; margin: 0 0 20px; }
.about-story__inner p:last-child { margin-bottom: 0; }

.seamless--stack { padding: 90px 0 100px; background: var(--bg-soft); }
.seamless--stack .seamless__grid { margin-top: 50px; }
.seamless--stack .seamless__grid + .seamless__grid { margin-top: 70px; }
/* .seamless__grid's track sizes (1fr / 1.05fr) are tied to column
   POSITION, not to which child lands there — so reordering the art/content
   children with `order` alone would leave the art sitting in the wider
   column and the text squeezed into the narrower one. Swap the track
   sizes too so the flipped row keeps the same proportions, just mirrored. */
.seamless__grid--flip { grid-template-columns: 1.05fr 1fr; }
.seamless__grid--flip .seamless__art { order: 2; }
.seamless__grid--flip .seamless__content { order: 1; }

@media (max-width: 880px) {
  .seamless--stack .seamless__grid--flip .seamless__art { order: 0; }
  .seamless--stack .seamless__grid--flip .seamless__content { order: 0; }
}

/* ============================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
   ============================================================ */
.legal { padding: 50px 0 120px; }
.legal__inner { max-width: 820px; margin: 0 auto; color: var(--body); font-size: 1rem; line-height: 1.75; }
.legal__inner h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}
.legal__inner h2:first-child { margin-top: 0; }
.legal__inner h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.legal__inner p { margin: 0 0 16px; }
.legal__inner ul { margin: 0 0 16px; padding-left: 22px; }
.legal__inner li { margin-bottom: 8px; }
.legal__inner a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }