/* =========================================================
   Motion & polish layer (shared by every page)
   - one set of motion tokens for the whole site
   - reveal-on-scroll that always fades + rises, then hands
     control back to each component's own hover transitions
   ========================================================= */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);      /* arriving: fast start, soft landing */
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-reveal: 1.15s;
  --stagger: 130ms;
  --reveal-delay: 150ms;   /* small pause before each block starts moving */
}

/* ---------- Reveal on scroll ---------- */
.reveal:not(.in){ opacity:0; transform:translate3d(0,34px,0); }
/* while revealing, this wins over component transitions (cards, panels…) */
.reveal:not(.revealed){
  transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out) !important;
  transition-delay:calc(var(--reveal-delay) + var(--i,0) * var(--stagger)) !important;
}
@media print{ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---------- Typography polish ---------- */
h1, h2, h3{ text-wrap:balance; }
p, li{ text-wrap:pretty; }
.stat .num, .wp-cell .num, [data-count]{ font-variant-numeric:tabular-nums; }

/* ---------- Live / pulse dots: animate a ring with transform+opacity
   (GPU) instead of an animated box-shadow (repaints every frame) ---------- */
.hero-badge .pulse-dot, .stat-live .pulse-dot, .live-dot{ position:relative; animation:none !important; flex-shrink:0; }
.hero-badge .pulse-dot::after, .stat-live .pulse-dot::after, .live-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:inherit;
  animation:dotRing 2.4s var(--ease-out) infinite;
}
@keyframes dotRing{ 0%{ transform:scale(1); opacity:.6; } 70%,100%{ transform:scale(2.6); opacity:0; } }

/* ---------- Buttons & cards: shared, smoother hover timing ---------- */
.btn{ transition-timing-function:var(--ease-out); transition-duration:.35s; }
.btn:active{ transition-duration:.1s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-badge .pulse-dot::after, .stat-live .pulse-dot::after, .live-dot::after{ animation:none; }
}

/* ---------- Layout polish ---------- */
/* phones: stats in a tidy 2 x 2 grid instead of four stacked rows */
@media (max-width:640px){ .stats-bar .stat{ flex:1 1 40%; } }

/* ---------- Icons fill their frames (tiles, circles, buttons) ---------- */
.icon-tile > svg{ width:62% !important; height:62% !important; }
.footer-social a > svg{ width:58%; height:58%; }
.header-phone svg, .nav-toggle svg{ width:60%; height:60%; }
.wa-float svg{ width:58%; height:58%; }
.back-to-top svg{ width:55%; height:55%; }
.why-callout > svg{ width:34px; height:34px; flex-shrink:0; }
.academy .checks svg, .stack-tags svg{ width:1.15em; height:1.15em; }

/* ---------- Audit fixes (Oct 2026) ---------- */
/* 04 · 13px floor for small labels, badges, ribbons and notes */
.eyebrow, .sys-tag, .sa-badge, .plan-ribbon, .sys-pop, .wp-badge{ font-size:13px; }
.wp-cell .label, .stat .label, .form-note, .demo-note, .plan-audience, .device-url{ font-size:13.5px; }

/* 06 · round call button in the header (dials 01111480017) */
.header-call{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(142,181,198,.35); color:var(--primary-100);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.header-call svg{ width:52%; height:52%; }
.header-call:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }
.header-cta{ display:flex; align-items:center; gap:10px; }

/* 08 · bigger tap targets for phone / email links */
.footer-contact a, .contact-row span a, .why-callout span a{ display:inline-block; padding:4px 0; min-height:24px; }

/* 09 · footer headings are h2 now (correct outline), same look as before */
.site-footer h2.footer-h{ color:#fff; font-size:1rem; margin:0 0 16px; letter-spacing:0; }
select{ cursor:pointer; }
.tm-person span{ font-size:13.5px; }
.sys-standalone li, .sys-standalone ul li{ font-size:max(13px, .8rem); }
.sys-divider span, .ls-badge{ font-size:13px; }
.sys-standalone li span, .ls-section .for{ font-size:13.5px; }
.container .ls-badge{ font-size:13px; } .ls-section .ls-ed .for{ font-size:13.5px; }

/* ---------- Icons maxed inside their frames (round 2) ---------- */
.icon-tile > svg{ width:72% !important; height:72% !important; }
.stack-node > svg{ width:68% !important; height:68% !important; }
.stack-hub svg{ width:58% !important; height:58% !important; }
.header-call svg{ width:64%; height:64%; }
.footer-social a > svg{ width:66%; height:66%; }
.wa-float svg{ width:64%; height:64%; }
.back-to-top svg{ width:62%; height:62%; }
.why-callout > svg{ width:40px; height:40px; }
/* checkmarks in lists */
.academy-perks svg, .check-list svg, .sys-feats svg, .footer-contact svg{ width:20px; height:20px; flex-shrink:0; }

/* ---------- Whole site at 90% (like browser zoom 90%) ----------
   Only the page content is scaled; the background photo / circuit layer
   stays at 100% so its measurements line up with what you see. */
:root{ --site-zoom:.9; }
.site-header, main, .site-footer, .mobile-nav, .wa-float, .back-to-top, .skip-link{ zoom:var(--site-zoom); }
/* keep the small text exactly as readable as before (13px / 13.5px on screen) */
.eyebrow, .sys-tag, .sa-badge, .plan-ribbon, .sys-pop, .wp-badge, .sys-divider span,
.container .ls-badge{ font-size:14.5px; }
.wp-cell .label, .stat .label, .form-note, .demo-note, .plan-audience, .device-url,
.tm-person span, .sys-standalone li span, .ls-section .ls-ed .for{ font-size:15px; }
/* text that was 13–14px stays 13px+ on screen after the 90% scale */
.hero-badge, .hero-chips span, .stack-tag, .hub-label, .sys-family-chip, .sa-meta li, .sa-shot-bar span{ font-size:14.5px !important; }
.stack-hint, .node-label, .stack-tags li, .sys-family-note, .tier-level, .service-more, .academy-perks li,
.field label, .footer-bottom p, .robot-text, .robot-state, .contact-row span, .footer-contact li, .footer-links a{ font-size:15px !important; }
.btn, .btn-sm{ font-size:max(15px, 1em) !important; }

/* footer "Get In Touch" rows light up on hover like the other footer lists */
.footer-contact li{ transition:color .25s var(--ease-out); cursor:default; }
.footer-contact li svg{ transition:stroke .25s var(--ease-out), transform .25s var(--ease-out); }
.footer-contact li:hover, .footer-contact li:hover a{ color:#fff; }
.footer-contact li:hover svg{ stroke:#fff; transform:scale(1.1); }
.footer-contact li a{ color:inherit; transition:color .25s var(--ease-out); }

/* ---------- Inner pages: former light sections now dark navy (same as homepage) ---------- */
section.dk.dk-auto{ background:var(--dark) !important; }
/* white cards / panels keep their dark text */
.dk-auto :is(.service-card, .plan, .plan-row, .plan-card, .faq-item, details, .compare-table, .ls-card, .ls-ed, .ls-spec, .proof-quote, .team-card, .course-card, .app-card, .work-card, .step, .req-card)
  :is(h2, h3, h4, strong, b, summary, th){ color:var(--dark); }
.dk-auto :is(.service-card, .plan, .plan-row, .plan-card, .faq-item, details, .compare-table, .ls-card, .ls-ed, .ls-spec, .proof-quote, .team-card, .course-card, .app-card, .work-card, .step, .req-card)
  :is(p, li, td, span, small, figcaption){ color:var(--muted); }
.dk-auto :is(.plan-ribbon, .compare-table thead th, .step b, .app-meta strong){ color:#fff; }

/* ---------- Section headings site-wide: heading left, intro right, tighter ---------- */
.section-head.center:has(> p){
  max-width:none; text-align:left; margin:0 0 28px;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:48px; align-items:end;
}
.section-head.center:has(> p) > :not(h2):not(p){ grid-column:1 / -1; margin-bottom:8px; justify-self:start; }
.section-head.center:has(> p) > h2{ margin:0; grid-column:1; }
.section-head.center:has(> p) > p{ margin:0; padding-bottom:4px; grid-column:2; }
.section-head.center:not(:has(> p)){ margin-bottom:30px; }
@media (max-width:860px){
  .section-head.center:has(> p){ grid-template-columns:1fr; row-gap:12px; }
  .section-head.center:has(> p) > h2, .section-head.center:has(> p) > p{ grid-column:1; }
}
main > section:not(.hero):not(.page-hero):not(.proof-strip){ padding-top:52px; }
/* headings without an intro line follow the same left alignment */
.section-head.center:not(:has(> p)){ max-width:none; text-align:left; margin-inline:0; }