/* ═══════════════════════════════════════════════════════════
   Yozef Automations — shared refinement layer
   Loaded AFTER page styles. Handles: layout rhythm, icon system,
   unified motion, centered footer, mobile.
   ═══════════════════════════════════════════════════════════ */

:root {
  --shell:      min(1160px, calc(100% - 48px));
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --enter:      .62s;
  --footer-bg:  #07061A;
  --ink-dim:    #8A90A8;
}

html {
  -webkit-text-size-adjust: 100%;
  /* fixed navbar offset for every in-page anchor */
  scroll-padding-top: 96px;
}

body { -webkit-tap-highlight-color: rgba(20,184,169,.15); }

:focus-visible {
  outline: 2px solid var(--teal, #14B8A9);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ═══ SHELL ALIGNMENT ═══
   The navbar was full-bleed (logo hard against the right edge, CTA against
   the left) while every section below it sits in a centred 1160px column.
   On a 1512px screen that is an ~85px mismatch and it makes the whole page
   read as off-centre. Pad the fixed bar so its contents land on the same
   column as the content, while the bar itself stays full width. */
nav {
  padding-inline: max(6%, calc((100% - var(--max-w, 1160px)) / 2)) !important;
}

/* same column for the marquee strip and any full-bleed band */
.tech-strip { --edge: max(6%, calc((100% - var(--max-w, 1160px)) / 2)); }

/* ═══ ICON SYSTEM — replaces emoji ═══ */
.ico {
  width: 1em; height: 1em;
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.125em;
}

.svc-icon, .svc-ico, .contact-icon, .link-ico, .hub-top {
  color: var(--teal-deep, #0E9488);
}
.svc-icon .ico, .svc-ico .ico { font-size: 26px; }
.contact-icon .ico { font-size: 21px; color: var(--teal-bright, #2EE6D0); }
.link-ico .ico { font-size: 21px; }
.hub-top .ico { font-size: 40px; opacity: .85; }
.link-btn.primary .link-ico .ico { color: #fff; }

/* icons should not spin — calmer than the old emoji rotation */
.svc-card:hover .svc-icon { transform: translateY(-2px) !important; }

/* ═══ MOTION — one easing, one language ═══ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(3px);
  transition: opacity var(--enter) var(--ease),
              transform var(--enter) var(--ease),
              filter var(--enter) var(--ease);
}
.reveal.visible { opacity: 1; transform: none; filter: none; }
.reveal.d1 { transition-delay: .09s; }
.reveal.d2 { transition-delay: .18s; }
.reveal.d3 { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ═══ CENTERED FOOTER ═══ */
.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 72px 24px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: min(520px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,230,208,.55), transparent);
}

.foot-shell { width: var(--shell); margin: 0 auto; }

.foot-brand { display: flex; flex-direction: column; align-items: center; }
.foot-brand img { height: 78px; width: auto; }
.foot-tag {
  max-width: 440px;
  margin: 14px auto 0;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.75;
}

.foot-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px 64px;
  margin: 46px auto 0;
  padding-bottom: 42px;
  text-align: right;
}

.foot-col { display: flex; flex-direction: column; gap: 11px; min-width: 128px; }

.foot-col strong {
  color: #E6E8F2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 3px;
}

.foot-col a, .foot-col span {
  color: #8A90A8;
  font-size: 14.5px;
  text-decoration: none;
  transition: color .2s var(--ease);
  width: max-content;
}
.foot-col a:hover { color: var(--teal-bright, #2EE6D0); }

.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

.foot-bottom span { color: #5F6480; font-size: 13.5px; }

.foot-mark {
  font-family: var(--font-en, 'Montserrat', sans-serif);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 3.4px;
  color: var(--teal-deep, #0E9488) !important;
}

/* neutralise the old footer rules when old markup lingers */
.site-footer .footer-inner { max-width: none; }

/* ═══ MOBILE ═══ */
@media (max-width: 820px) {
  html { scroll-padding-top: 78px; }

  nav { padding: .65rem 5%; }
  .nav-logo img { height: 46px; }
  nav.scrolled .nav-logo img { height: 42px; }

  /* mobile menu: contained, scrollable, animated */
  .nav-links {
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    border-top: 1px solid rgba(20,184,169,.14);
    padding: .35rem 0 .8rem !important;
  }
  .nav-links a { font-size: 16.5px; padding: 1rem !important; }

  .burger span { transition: transform .3s var(--ease), opacity .2s; }
  .burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* hero breathes instead of forcing a full viewport */
  #hero { min-height: auto !important; padding: 108px 6% 68px !important; }
  .hero-title { font-size: clamp(2.05rem, 8.4vw, 2.9rem) !important; }
  .hero-desc { font-size: 17px !important; }
  .hero-actions { gap: .7rem; }
  .btn-main, .btn-ghost, .btn-ghost-light {
    padding: 14px 26px !important;
    font-size: 16px !important;
    justify-content: center;
  }
  .hero-actions .btn-main, .hero-actions .btn-ghost { flex: 1 1 100%; }

  .hero-logo-wrap { min-height: 260px !important; }
  .hero-logo-img { width: min(190px, 52vw) !important; }
  .logo-halo { width: 265px !important; height: 265px !important; }
  .logo-ring.r1 { width: 215px !important; height: 215px !important; }
  .logo-ring.r2 { width: 272px !important; height: 272px !important; }
  .logo-ring .orb { width: 38px !important; height: 38px !important; font-size: 16px !important; }

  .sec-title, .art-title, .chk-title { letter-spacing: -.3px; }
  .art-head { padding: 108px 6% 56px !important; }
  .facts { margin-top: -26px; }

  /* comfortable tap targets everywhere */
  .chip { padding: 11px 18px !important; font-size: 15px !important; }
  .faq-q { padding: 1.15rem 1.2rem !important; font-size: 16px !important; }
  .prep-item { padding: 13px 0 !important; }
  .foot-col a, .foot-col span { padding: 3px 0; }

  .foot-nav { gap: 32px 44px; margin-top: 36px; }
  .foot-brand img { height: 64px; }
}

@media (max-width: 560px) {
  .site-footer { padding: 56px 20px 24px; }
  .foot-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    text-align: right;
  }
  .foot-col { min-width: 0; }
  .foot-col a, .foot-col span { font-size: 14px; width: auto; }
  .foot-tag { font-size: 14.5px; }

  .hero-trust { gap: 1.1rem !important; }
  .trust-num { font-size: 1.6rem !important; }
  .trust-label { font-size: 13px !important; }

  .wa-btn { width: 52px !important; height: 52px !important; }
  .wa-btn svg { width: 26px !important; height: 26px !important; }
}

/* very small phones */
@media (max-width: 380px) {
  .facts { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .fact { padding: .9rem .6rem; }
  .fact-num { font-size: 1.3rem; }
  .fact-label { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════
   CALM PASS — fewer competing effects, one visual language.
   The old page had 3 drifting blobs + dot grid + animated
   gradient text + 2 spinning rings + a floating logo, all at
   once. That stacking is what read as "generic AI template".
   ═══════════════════════════════════════════════════════════ */

/* hero: keep one soft light source, drop the disco */
.hero-blob.b2, .hero-blob.b3 { display: none; }
.hero-blob.b1 {
  width: 560px; height: 560px;
  background: rgba(46,230,208,.24);
  animation-duration: 26s;
  filter: blur(110px);
}

/* static gradient headline instead of a looping shimmer */
.grad-text { animation: none !important; background-position: 0 0 !important; }

/* rings: slower, quieter, no second spinner fighting the first */
.logo-ring.r1 { animation-duration: 90s !important; border-color: rgba(20,184,169,.22) !important; }
.logo-ring.r2 { animation: none !important; border-color: rgba(20,184,169,.10) !important; }
.hero-logo-img { animation-duration: 8s !important; }
.logo-ring .orb {
  box-shadow: 0 6px 18px rgba(11,10,56,.10);
  color: var(--teal-deep, #0E9488);
}
.logo-ring .orb .ico { font-size: 20px; }

/* one shadow language across every card */
.svc-card, .pf-card, .testi-card, .product-feature,
.hub-card, .link-btn, .fact, .prep, .contact-chip {
  box-shadow: 0 1px 2px rgba(11,10,56,.04), 0 10px 30px rgba(11,10,56,.05);
}
.svc-card:hover, .pf-card:hover, .testi-card:hover,
.hub-card:hover, .link-btn:hover {
  box-shadow: 0 2px 4px rgba(11,10,56,.05), 0 20px 44px rgba(11,10,56,.10);
}

/* icon tiles: square-ish, consistent, no rotation gimmick */
.svc-icon, .svc-ico {
  border-radius: 14px !important;
  transition: transform .3s var(--ease), background .3s var(--ease);
}

/* badges that used emoji now align their icon properly */
.product-badge, .inbox-agent { display: inline-flex; align-items: center; gap: 7px; }
.product-badge .ico { font-size: 15px; }
.inbox-agent .ico { font-size: 14px; }

/* section headings sit on a consistent rhythm */
.sec-label { letter-spacing: .2px; }
.sec-title { text-wrap: balance; }
.sec-sub, .art-lead, .chk-sub { text-wrap: pretty; }

/* links inside prose get a calmer underline */
.prose a { border-bottom-width: 1px; }

/* marquee: slower so it reads as texture, not motion */
.tech-track { animation-duration: 46s !important; }

/* nav: crisper edge once scrolled */
nav.scrolled { border-bottom-color: rgba(11,10,56,.08); }

/* scrollbar (desktop) */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(20,184,169,.45) transparent; }
}

/* verdict icon sits on a dark panel — it must never inherit body ink */
.res-icon { color: rgba(255,255,255,.7); }
.res-verdict.pass  .res-icon { color: #4BE39A; }
.res-verdict.fail  .res-icon { color: #FF8A94; }
.res-verdict.check .res-icon { color: #F7BE5E; }
.res-icon .ico { stroke-width: 1.55; }

/* group headings in the prep checklist */
.prep-gh .ico { font-size: 17px; color: var(--teal-deep, #0E9488); }
.prep-group.ours .prep-gh .ico { color: var(--teal-deep, #0E9488); }

/* The footer's link block is NOT the site navbar. The page stylesheet styles
   the bare `nav` element as a fixed top bar, so any <nav> inside the footer
   gets hijacked to the top of the screen. Belt-and-braces reset. */
.site-footer .foot-nav,
footer nav {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* ═══ MOBILE HERO ORDER ═══
   The original layout put the logo showcase first on phones (order:-1), so a
   visitor met a 330px-tall repeat of the logo that already sits in the navbar,
   and the actual value proposition started below the fold. Lead with the
   message; the visual follows it. */
@media (max-width: 820px) {
  .hero-logo-wrap {
    order: 1 !important;
    min-height: 210px !important;
    margin-top: 2rem;
  }
  .hero-inner { gap: 0 !important; }
  .hero-logo-img { width: min(158px, 44vw) !important; }
  .logo-halo    { width: 215px !important; height: 215px !important; }
  .logo-ring.r1 { width: 176px !important; height: 176px !important; }
  .logo-ring.r2 { width: 222px !important; height: 222px !important; }
  .logo-ring .orb { width: 34px !important; height: 34px !important; }
  .logo-ring .orb .ico { font-size: 16px; }
  .hero-trust { margin-bottom: 0; }
  .hero-actions { margin-bottom: 2.2rem !important; }
}

/* ═══ FOOTER CONTRAST + FLOATING BUTTON ═══ */
/* the wordmark is near-black; on the near-black footer it disappeared */
.site-footer .foot-brand img {
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* the WhatsApp bubble was sitting on top of the footer's email address */
.wa-btn { transition: transform .3s var(--ease), opacity .3s var(--ease), box-shadow .2s; }
.wa-btn.tucked { opacity: 0; transform: scale(.75); pointer-events: none; }
.site-footer { padding-bottom: 34px; }

/* ═══ GRID SHRINK GUARD ═══
   Grid and flex items default to min-width:auto, so a wide child (the
   comparison tables carry min-width:460px) forces its whole track wider than
   the screen. On a phone that makes the browser zoom the entire page out —
   the article laid out at 485px instead of 390px. Let tracks shrink and keep
   the wide content scrolling inside its own wrapper. */
.art-cols, .art-cols > *, .prose,
.chk-grid, .chk-grid > *,
.svc-grid > *, .hub-grid > *, .link-grid > *,
.prep-cols, .prep-cols > *, .prep-txt,
.foot-col { min-width: 0; }

.tbl-wrap { max-width: 100%; }
.prose pre, .prose table { max-width: 100%; }

/* long unbroken strings (emails, URLs) must not stretch a column */
.foot-col a, .prep-link, .res-why, .link-s { overflow-wrap: anywhere; }