/* ==========================================================================
   OtivaXAI — Design System
   Tokens · reset · typography · primitives
   Section/component styles are appended below in page order.
   ========================================================================== */

/* ---------- Fonts (self-hosted) — Plus Jakarta Sans variable, 200–800 ---------- */
/* Single-family type system: hierarchy comes from weight + size, not from a
   contrasting display face. Latin subset only — other ranges fall back to system UI. */
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Italic face is only fetched when italic text actually renders on the page. */
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans-var-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --accent:#FD3A25; --accent-2:#ff6a4d; --accent-soft:#ffe9e5;
  /* --surface is deliberately off pure white: the soft shadows below are only
     legible against a light-grey family, never against #fff. */
  --bg:#f7f7f8; --surface:#fafafa; --dark:#0a0a0a; --dark-2:#141414;
  /* --muted-2 is the on-dark secondary tone (7.3:1 on --dark). On light surfaces
     it only hits 2.4:1, so light-background secondary text uses --muted instead. */
  --text:#0b0b0b; --muted:#6a6a6a; --muted-2:#9a9a9a; --line:#e6e6e6; --line-dark:#242424;
  --radius:20px; --radius-sm:14px; --radius-lg:28px; --radius-pill:999px;
  --shadow:0 20px 60px rgba(0,0,0,.08); --shadow-sm:0 8px 24px rgba(0,0,0,.06);
  --container:1200px; --gap:24px;

  /* ---- Spacing scale (the one shared rhythm) ----
     Four steps, by the size of the things being separated. Every repeated row or
     grid picks the step that matches its members — never a one-off number, which
     is how this file drifted to six different gaps (8/10/12/14/16/20px) for the
     same visual pattern. Anything new should reuse a token, not invent a value.
       --gap-pill  small capsules: tags, chips, meta, breadcrumb, icon circles
       --gap-ctrl  full-size controls: buttons, marquee pills, 60px tiles
       --gap-card  grids of cards
       --gap-stack a two-column split after it has collapsed to one column
       --gap-split major two-column section splits
     Gaps *inside* a component (an icon next to its label, 7–10px) are a different
     concern and deliberately stay local — this scale is for separating siblings. */
  --gap-pill:12px; --gap-ctrl:16px; --gap-card:24px; --gap-stack:32px; --gap-split:48px;

  /* ---- Soft neumorphic shadow scale (the one shared elevation system) ----
     Every raised element sitewide draws from this scale — never a hand-rolled
     box-shadow, never a 1px border. One dual-tone family throughout: a light
     top-left highlight reading as a lit edge, a soft grey bottom-right drop.
     Depth encodes hierarchy: capsules sit shallowest, the primary CTA deepest. */
  --shadow-soft-xs:-2px -2px 6px rgba(255,255,255,.9), 3px 4px 10px rgba(174,174,182,.4);
  --shadow-soft-sm:-3px -3px 8px rgba(255,255,255,.92), 5px 6px 14px rgba(174,174,182,.44);
  --shadow-soft-sm-hover:-3px -3px 8px rgba(255,255,255,.92), 7px 9px 20px rgba(174,174,182,.52);
  --shadow-soft:-8px -8px 18px rgba(255,255,255,.95), 8px 10px 24px rgba(174,174,182,.42);
  --shadow-soft-lg:-8px -8px 18px rgba(255,255,255,.95), 12px 16px 32px rgba(174,174,182,.52);
  /* The dark pill is the one element that casts a true drop shadow rather than a
     same-tone emboss — it sits above the surface, not in it. */
  --shadow-btn:0 10px 24px -6px rgba(10,10,10,.42), -2px -2px 6px rgba(255,255,255,.5);
  --shadow-btn-hover:0 14px 30px -6px rgba(10,10,10,.48), -2px -2px 6px rgba(255,255,255,.5);

  /* ---- Neumorphic card system ----
     One raised-surface language for every card sitewide. The dual shadow (light
     top-left, darker bottom-right) does all the edge work, so cards carry no border.
     --card-bg sits just below --bg so the light shadow reads as a lit top edge.
     The two --card-shadow names are kept as aliases so the ~15 existing card rules
     that consume them pick up the shared scale without being rewritten. */
  --card-bg:#f0f0f1; --card-radius:26px; --card-pad:36px; --inner-radius:14px;
  --card-shadow:var(--shadow-soft);
  --card-shadow-hover:var(--shadow-soft-lg);
  /* Hairline divider tone — used for input underlines and intra-card rules, the
     only strokes this system permits. Never a full border box. */
  --rule:rgba(24,24,27,.14);
  /* Inset variant — the faux field/well shapes inside a card's visual area */
  --field-bg:#e9e9ec;
  --field-shadow:inset 2px 2px 5px rgba(174,174,182,.5), inset -2px -2px 5px rgba(255,255,255,.85);
  /* Monochrome ink scale for card visuals — no brand colour inside cards */
  --ink:#18181b; --ink-2:#3f3f46; --ink-3:#71717a;
  /* One family for both roles. The two tokens are kept so existing rules stay valid;
     hierarchy is carried by weight and size, not by a contrasting face. */
  --h-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --b-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Lenis smooth scroll (vendor/lenis.min.js). Lenis adds .lenis / .lenis-smooth to <html>.
   Disable native scroll-behavior while Lenis is active so the two don't fight. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--b-font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* Tracking is size-dependent: this base value suits h3–h6. The large display
   headings tighten it further in their own rules. */
h1,h2,h3,h4,h5,h6{font-family:var(--h-font);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.container-wide{max-width:1360px;margin-inline:auto;padding-inline:24px}
/* Tighter than the default 1200px container — for sections built from wide, full-bleed
   rows (the services accordion) where the default width runs the cards close to the
   viewport edge. Pairs with .container: `class="container container-tight"`. */
.container-tight{max-width:980px;margin-inline:auto;padding-inline:24px}
.flat-spacing{padding-block:110px}
.pt-0{padding-top:0}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-accent{color:var(--accent)}
@media(max-width:768px){.flat-spacing{padding-block:68px}}

/* ---------- Buttons ----------
   One pill family. .tf-btn is the primary CTA everywhere: solid dark, white bold
   text, and the deepest shadow in the scale so it outranks every capsule and card
   around it. .tf-btn-2 is the soft secondary — same geometry, raised off-white,
   no border. Neither ever carries a stroke. */
.tf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--dark);color:#fff;padding:15px 28px;border:0;border-radius:var(--radius-pill);font-family:var(--b-font);font-weight:600;font-size:1rem;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.tf-btn:hover{transform:translateY(-2px);filter:brightness(1.15);box-shadow:var(--shadow-btn-hover)}
.tf-btn.dark{background:var(--dark)}
/* Referenced by no markup today. Mapped to the dark pill so any future use inherits
   the system rather than reviving the old red-filled button. */
.tf-btn.accent{background:var(--dark)}
.tf-btn.w-100{width:100%}
.tf-btn-2{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;padding:15px 28px;border-radius:var(--radius-pill);font-family:var(--b-font);font-weight:600;font-size:1rem;background:var(--surface);color:var(--text);cursor:pointer;box-shadow:var(--shadow-soft-sm);transition:transform .22s ease,box-shadow .22s ease}
.tf-btn-2:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft-sm-hover)}

/* ---- Inverse pill ----
   A dark pill disappears on a dark or accent surface, so on those the primary CTA
   flips to a light fill with dark text. Same radius, same weight, same lift — only
   the tones invert. Applied by context rather than by an extra class in markup. */
.tf-btn.light,
.globe-cta,
.gradient-banner .tf-btn,
.post-cta .tf-btn,
.price-card.popular .tf-btn{
  background:var(--surface);color:var(--text);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
}
.tf-btn.light:hover,
.globe-cta:hover,
.gradient-banner .tf-btn:hover,
.post-cta .tf-btn:hover,
.price-card.popular .tf-btn:hover{
  filter:none;background:#fff;
  box-shadow:0 14px 32px -8px rgba(0,0,0,.55);
}
.arrow{transition:transform .22s ease}
.tf-btn:hover .arrow,.tf-btn-2:hover .arrow{transform:translate(2px,-2px)}

/* ---------- Headings ---------- */
.heading-section{text-align:center;margin-bottom:56px}
.heading-section.left{text-align:left}
/* ---------- Eyebrow / label capsule (one definition, sitewide) ----------
   Every small tag — section eyebrows (About Us, Benefits, FAQ, Contact…), the hero
   sub, blog categories, standalone pills — is the same raised capsule: off-white
   fill, no border, shallowest shadow in the scale, dark-grey sentence-case text
   with the accent carried solely by the leading dot. */
.heading-sub,.eyebrow,.hero-sub,.blog-cat,.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:0;
  padding:8px 15px;border-radius:var(--radius-pill);
  color:var(--ink-2);font-family:var(--b-font);font-weight:500;font-size:13px;line-height:1.4;
  text-transform:none;letter-spacing:0;
  box-shadow:var(--shadow-soft-xs);
}
.heading-sub::before,.eyebrow::before,.blog-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* .hero-sub, .pill and .globe-badge already open with their own glyph (⚡ / ✦ /
   a live dot), so they take the capsule shell without a second leading mark. */
.heading-sub{margin-bottom:14px}
.heading-title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.02em}
.heading-title.sm{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.lede{font-size:1.12rem;color:var(--muted);max-width:60ch;margin-inline:auto}
.heading-section.left .lede{margin-inline:0}

/* ---------- Gradient text ---------- */
/* Aigocy-style: large titles are dark (subtle gradient), orange stays an accent */
.text-gradient-1{background:linear-gradient(180deg,#171717,#2c2c2c);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-gradient-2{background:linear-gradient(180deg,#171717,#2c2c2c);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-gradient-3{background:linear-gradient(180deg,#171717,#2c2c2c);-webkit-background-clip:text;background-clip:text;color:transparent}
/* opt-in orange emphasis word */
.text-accent-word{color:var(--accent);-webkit-text-fill-color:var(--accent)}

/* ---------- Cards / pills / tags ---------- */
.card{background:var(--surface);border:0;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-soft-sm);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft-lg)}
.list-tags{display:flex;flex-wrap:wrap;gap:var(--gap-pill);margin-top:18px}
.tags-item{display:inline-block;border:0;border-radius:var(--radius-pill);padding:8px 16px;font-size:.86rem;color:var(--ink-2);background:var(--surface);box-shadow:var(--shadow-soft-xs)}
/* .pill's shell comes from the shared eyebrow capsule rule above. */

/* ---------- Reveal animation ---------- */
.effectFade{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.effectFade.is-in{opacity:1;transform:none}
.effectFade[data-delay="1"]{transition-delay:.08s}
.effectFade[data-delay="2"]{transition-delay:.16s}
.effectFade[data-delay="3"]{transition-delay:.24s}
.effectFade[data-delay="4"]{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .effectFade{opacity:1!important;transform:none!important;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ==========================================================================
   Header · sticky pill nav · mobile off-canvas menu
   ========================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--dark);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip-link:focus{left:0}

.tf-header{position:fixed;top:36px;left:0;right:0;z-index:80;padding-inline:24px}
.header-inner{position:relative;max-width:880px;margin-inline:auto;display:flex;align-items:center;gap:14px;background:rgba(250,250,250,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0;border-radius:var(--radius-pill);padding:7px 8px 7px 20px;box-shadow:0 18px 40px -22px rgba(15,15,20,.35);transition:box-shadow .3s ease,background .3s ease}
.tf-header.is-scrolled .header-inner{box-shadow:0 20px 46px -20px rgba(15,15,20,.45);background:rgba(250,250,250,.92)}
.logo-site img{width:132px;height:30px}
.box-navigation{margin-inline:auto}
.nav-menu-main{display:flex;gap:22px}
.nav-menu-main a{font-weight:600;font-size:.95rem;color:#2a2a2a;position:relative;padding-block:4px;transition:color .2s}
.nav-menu-main a:hover{color:var(--accent)}
.nav-menu-main a.active{color:var(--accent)}
.nav-menu-main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px}
.header-cta{padding:11px 22px;font-size:.9rem;position:relative;z-index:2;box-shadow:0 12px 26px -12px rgba(15,15,20,.55)}

.menu-toggle{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

.mobile-menu{position:fixed;inset:0;background:var(--dark);color:#fff;z-index:90;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;transform:translateX(100%);transition:transform .45s cubic-bezier(.7,0,.2,1);visibility:hidden}
body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{transform:none;visibility:visible}
.mobile-nav{text-align:center;display:grid;gap:6px}
.mobile-nav a{font-family:var(--h-font);font-size:2rem;font-weight:600;display:inline-block;opacity:0;transform:translateY(24px);transition:opacity .4s ease,transform .4s ease,color .2s}
.mobile-nav a:hover,.mobile-nav a.active{color:var(--accent)}
body.menu-open .mobile-nav a{opacity:1;transform:none}
body.menu-open .mobile-nav li:nth-child(1) a{transition-delay:.10s}
body.menu-open .mobile-nav li:nth-child(2) a{transition-delay:.15s}
body.menu-open .mobile-nav li:nth-child(3) a{transition-delay:.20s}
body.menu-open .mobile-nav li:nth-child(4) a{transition-delay:.25s}
body.menu-open .mobile-nav li:nth-child(5) a{transition-delay:.30s}
body.menu-open .mobile-nav li:nth-child(6) a{transition-delay:.35s}
.menu-close{position:absolute;top:22px;right:26px;font-size:2.4rem;line-height:1;background:none;border:0;color:#fff;cursor:pointer}

@media(max-width:960px){
  .nav-menu-main,.header-cta{display:none}
  .menu-toggle{display:flex}
  .header-inner{padding:10px 14px}
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */
.cursor-dot{position:fixed;top:0;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:120;mix-blend-mode:normal;transition:width .2s ease,height .2s ease,margin .2s ease,background .2s ease,box-shadow .2s ease}
/* The hover state used to be a FILLED 36px disc of rgba(253,58,37,.22) painted at
   z-index 120 over whatever was underneath. Because the dot also lags the pointer,
   it detached from the cursor and read as a stray reddish glow sitting on top of
   nearby text. A ring carries the same affordance with a transparent centre, so it
   can never wash out content it passes over. */
.cursor-dot.is-hover{width:34px;height:34px;margin:-17px 0 0 -17px;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(253,58,37,.6)}
@media(hover:none),(prefers-reduced-motion:reduce){.cursor-dot{display:none}}

/* ==========================================================================
   Back to top + scroll progress ring
   ========================================================================== */
/* Injected by js/main.js on every page, so it lives here with the other global
   overlay UI rather than in a page section. Sits above the sticky header (80)
   but below the mobile menu (90) — see the body.menu-open rule below. */
/* Geometry: the 56px box is hit area only; the visible disc is the 48px icon
   inside it. */
.to-top{
  position:fixed;right:28px;bottom:28px;z-index:85;
  width:56px;height:56px;padding:0;border:0;background:none;
  display:grid;place-items:center;cursor:pointer;
  /* visibility (not just opacity) so the hidden button leaves the tab order */
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1),visibility .3s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
/* A plain drop shadow, not the --shadow-btn emboss: that token's white
   top-left highlight ringed the disc and read as a second stacked layer. */
.to-top-icon{
  position:relative;width:48px;height:48px;border-radius:50%;
  background:var(--dark);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 16px -6px rgba(10,10,10,.5);
  transition:background .2s ease,box-shadow .25s ease,transform .25s ease;
}
.to-top-icon svg{width:20px;height:20px;display:block}
.to-top:hover .to-top-icon{background:var(--dark-2);box-shadow:0 10px 22px -6px rgba(10,10,10,.55);transform:translateY(-2px)}
.to-top:active .to-top-icon{transform:translateY(0)}
.to-top:focus-visible{outline:none}
.to-top:focus-visible .to-top-icon{outline:2px solid var(--accent);outline-offset:4px}
/* The off-canvas menu is a full-screen plane — nothing floats over it. */
body.menu-open .to-top{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .to-top{transform:none;transition:opacity .2s ease,visibility .2s}
  .to-top-icon{transition:background .2s ease}
  .to-top:hover .to-top-icon{transform:none}
}
@media(max-width:600px){
  .to-top{right:16px;bottom:16px;width:50px;height:50px}
  .to-top-icon{width:42px;height:42px}
  .to-top-icon svg{width:18px;height:18px}
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Light footer. It sits on --card-bg rather than --bg so it reads as its own
   plane beneath the page, and so the neumorphic highlight on the social pills
   inside it lands on the tone that scale was built against. */
.site-footer{background:var(--card-bg);color:var(--text);padding-block:76px 26px}
.footer-top{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:40px}
.footer-brand p{color:var(--muted);margin:18px 0 0;max-width:34ch;font-size:.98rem}
/* Column headers are the quiet layer here and the links are the loud one — the
   inverse of the old dark footer, where the headers were pure white. */
.footer-col h4{font-family:var(--h-font);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
/* Size and weight sit on the ul, not on the anchors, so the one non-link item in
   Get in Touch (the location line) tracks its clickable siblings instead of
   stranding at body size beneath them. */
.footer-col ul{display:grid;gap:var(--gap-pill);font-size:.95rem;font-weight:600}
.footer-col a{color:var(--ink-2);transition:color .18s ease}
.footer-col a:hover{color:var(--accent)}
.footer-col li{color:var(--ink-2)}

/* ---------- Social block ----------
   Centred badge, heading, and the shared icon+label pill row, with the wordmark
   set huge and nearly transparent behind it. The watermark is decorative only:
   aria-hidden in markup, pointer-events:none so it never eats a click, and
   clipped by the block's overflow so a nowrap 15rem word can't widen the page. */
/* The bottom padding is load-bearing: overflow:hidden clips at the padding edge,
   so at 0 it sheared the pills' drop shadow off. 32px clears even the taller
   hover shadow (7px 9px 20px) and leaves visible ground under the row. */
.footer-social{position:relative;overflow:hidden;margin-top:40px;padding-block:48px 32px;text-align:center}
.fs-watermark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-family:var(--h-font);font-weight:800;font-size:clamp(5rem,17vw,15rem);
  line-height:1;letter-spacing:-.04em;white-space:nowrap;
  color:var(--ink);opacity:.06;pointer-events:none;user-select:none;z-index:0;
}
.fs-inner{position:relative;z-index:1}
.fs-badge{width:46px;height:46px;margin:0 auto 16px;border-radius:15px;background:var(--dark);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-btn)}
/* Sized here rather than on the markup's width/height attrs so the 12 copied
   footers don't each need editing; both axes are set because the global
   img,svg rule forces height:auto. */
.fs-badge svg{width:21px;height:21px}
.fs-title{font-size:clamp(1.18rem,2.3vw,1.55rem);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.fs-note{margin-top:8px;color:var(--muted);font-size:.82rem}
/* Reuses the .contact-social pill, but one size down — the Contact page renders
   the same component at full size, so every override here stays footer-scoped. */
.footer-social .contact-social{justify-content:center;margin-top:26px}
.footer-social .contact-social a{min-width:168px;gap:14px;padding:6px 6px 6px 17px;font-size:.86rem}
.footer-social .pill-ico{width:29px;height:29px}
.footer-social .pill-ico svg{width:13px;height:13px}

.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--gap-pill);border-top:1px solid var(--rule);margin-top:48px;padding-top:26px;color:var(--muted);font-size:.92rem}
.to-top{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);transition:color .2s}
.to-top:hover{color:var(--text)}
@media(max-width:960px){.footer-top{grid-template-columns:1fr 1fr;gap:var(--gap-stack)}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}.footer-social{margin-top:24px;padding-block:36px 26px}}

/* ==========================================================================
   Accordion (services image-swap + FAQ)
   ========================================================================== */
.accordion-list{display:grid;gap:var(--gap-ctrl)}
.accordion-list.gap-lg{gap:var(--gap-card)}
.panel-body{display:flex;flex-direction:column;gap:var(--gap-pill)}
.accordion-item{background:var(--surface);border:0;border-radius:var(--radius);overflow:hidden;transition:box-shadow .25s ease}
.accordion-action{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-ctrl);padding:24px 28px;cursor:pointer;user-select:none}
.accordion-title{font-family:var(--h-font);font-weight:600;font-size:1.3rem;display:flex;align-items:center;gap:var(--gap-pill)}
.accordion-title .num{color:var(--muted);font-size:1rem;font-weight:500}
.accordion-action .plus{position:relative;width:22px;height:22px;flex-shrink:0}
.accordion-action .plus::before,.accordion-action .plus::after{content:"";position:absolute;background:var(--text);border-radius:2px;transition:transform .3s ease,background .3s ease}
.accordion-action .plus::before{top:10px;left:0;width:22px;height:2px}
.accordion-action .plus::after{top:0;left:10px;width:2px;height:22px}
.accordion-item.active .plus::before,.accordion-item.active .plus::after{background:var(--accent)}
.accordion-item.active .plus::after{transform:rotate(90deg);opacity:0}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .4s ease}
.accordion-content>div{padding:0 28px 26px}
.accordion-content p{color:var(--muted)}

/* Services split: accordion left, sticky preview image right */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split);align-items:stretch}
.services-intro{display:flex;flex-direction:column}
.services-intro .heading-section{margin-bottom:24px}
@media(max-width:900px){.services-grid{grid-template-columns:1fr;gap:var(--gap-stack)}.section-services .services-image{max-width:100%}}

/* Rich accordion variant (services page): image inside each open panel */
.accordion-item.style-1 .accordion-content>div{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--gap-stack);align-items:center;padding-bottom:32px}
.accordion-item.style-1 .panel-image{border-radius:var(--radius);overflow:hidden}
.accordion-item.style-1 .panel-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.accordion-item.style-1 .panel-num{font-family:var(--h-font);font-size:2.4rem;font-weight:700;color:var(--accent-soft);line-height:1}
.accordion-item.style-1 .accordion-title .icon-arrow{color:var(--accent)}
@media(max-width:720px){.accordion-item.style-1 .accordion-content>div{grid-template-columns:1fr}}

/* ==========================================================================
   Marquee / value strip
   ========================================================================== */
.section-partner{padding-block:0;background:transparent}
.partner-row{display:flex;align-items:center;gap:var(--gap-split);border-top:1px solid var(--line);padding-block:44px}
.partner-label{flex:0 0 auto;max-width:230px;text-align:left;color:var(--muted);font-weight:500;font-size:.95rem;line-height:1.4;margin:0}
/* The strip's own gap. The seamless-loop maths below is derived from it, so the
   two can never drift apart — change this one value and the animation follows. */
.infiniteSlide{--marquee-gap:var(--gap-ctrl)}
/* Edge treatment. The fade must be a real distance, not a percentage: at 6% the
   mask was only ~20px on a 390px viewport — narrower than a single pill, so pills
   hard-cut at the edge instead of fading. clamp() keeps it >=24px everywhere.
   padding-block (cancelled by the matching negative margin, same trick as
   .process-swiper) stops overflow:hidden from shearing the pills' drop shadows. */
.marquee-mask{
  flex:1 1 auto;min-width:0;overflow:hidden;
  --marquee-fade:clamp(24px,6%,56px);
  padding-block:16px;margin-block:-16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--marquee-fade),#000 calc(100% - var(--marquee-fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--marquee-fade),#000 calc(100% - var(--marquee-fade)),transparent 100%);
}
@media(max-width:768px){.partner-row{flex-direction:column;align-items:stretch;gap:var(--gap-card)}.partner-label{text-align:center;max-width:none}}
.infiniteSlide{display:flex;gap:var(--marquee-gap);width:max-content;animation:marquee 32s linear infinite}
.marquee-mask:hover .infiniteSlide{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--h-font);font-weight:600;font-size:1.05rem;color:#3a3a3a;padding:10px 22px;border:0;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-soft-xs)}
.marquee-item .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* marquee.js duplicates the track, so N items become 2N items — but a flex row of
   2N items has 2N-1 gaps, not 2N. Half the track width is therefore one gap SHORT
   of a full copy, and the old translateX(-50%) snapped back 10px every lap, which
   is what read as pills jumping and clipping mid-pill. Shifting by one copy plus
   one gap (-50% - gap/2) lands the clone exactly where the original began. */
@keyframes marquee{to{transform:translateX(calc(-50% - var(--marquee-gap) / 2))}}
@media(prefers-reduced-motion:reduce){.infiniteSlide{animation:none;flex-wrap:wrap;justify-content:center;row-gap:var(--gap-pill)}}

/* ==========================================================================
   Process carousel
   ========================================================================== */
/* Two-column layout: heading + badge + nav on the left (~38%), carousel right.
   The right column's cards bleed/crop off the container edge (body clips x-overflow). */
.section-process .container{display:grid;grid-template-columns:minmax(320px,43%) minmax(0,1fr);align-items:center;gap:var(--gap-split)}
.section-process .process-heading{display:flex;flex-direction:column;align-items:flex-start;gap:30px;margin-bottom:0}
.process-heading .heading-section{text-align:left;margin-bottom:0}
/* Big, friendly, near-black heading that wraps to two lines */
.section-process .heading-title{font-size:clamp(2.4rem,4.6vw,3.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.group-btn-slider{display:flex;gap:var(--gap-pill)}
.slider-prev,.slider-next{width:48px;height:48px;border-radius:50%;border:0;background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-soft-sm);transition:background .2s,color .2s,box-shadow .2s}
.slider-prev:hover,.slider-next:hover{background:var(--dark);color:#fff;box-shadow:var(--shadow-btn)}
.slider-prev.swiper-button-disabled,.slider-next.swiper-button-disabled{opacity:.4;cursor:default}
/* Cards: taller, roomier; card bg/radius/shadow come from the shared card rule below */
.process-card{padding:40px 34px;height:100%;display:flex;flex-direction:column;gap:var(--gap-ctrl);min-height:420px}
/* Icon: solid accent square, white glyph, with a soft blurred radial glow behind it */
.process-card .p-icon{position:relative;width:60px;height:60px;border-radius:18px;background:var(--accent);color:#fff;display:grid;place-items:center;margin-bottom:6px}
.process-card .p-icon svg{position:relative;z-index:1}
.process-card .p-icon::before{content:"";position:absolute;inset:-16px;border-radius:26px;background:radial-gradient(circle at 50% 45%,rgba(253,58,37,.55),rgba(253,58,37,0) 70%);filter:blur(10px);opacity:.75;z-index:0}
.process-card h3{font-size:1.65rem;font-weight:700}
.process-card p{color:var(--muted);flex:1;line-height:1.6}
/* Thin divider + footer row: bordered duration pill (left), oversized step number (right) */
.process-card .bot{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-pill);padding-top:22px;margin-top:6px;border-top:1px solid rgba(24,24,27,.09)}
.process-card .time{font-family:var(--h-font);font-weight:600;color:var(--ink-2);letter-spacing:.05em;font-size:.8rem;border:0;border-radius:var(--radius-pill);padding:7px 15px;white-space:nowrap;background:var(--card-bg);box-shadow:var(--shadow-soft-xs)}
.process-card .number{font-family:var(--h-font);font-weight:300;font-size:2.7rem;line-height:1;letter-spacing:-.02em}
.process-card .number .cur{color:var(--muted)}.process-card .number .tot{color:var(--muted-2)}
/* Clip the crop at the carousel wrapper (not the viewport) so the number of visible
   cards is the same on every screen width — ~1.5 cards, 2nd card cut partway.
   margin-inline:0 overrides vendor Swiper's `margin:auto`, which on a grid item
   disables stretch-sizing and lets the swiper blow out to its content width.
   Vertical padding + canceling negative margin keeps card drop-shadows from clipping. */
.process-swiper{overflow:hidden;min-width:0;margin-inline:0;padding-block:44px;margin-block:-44px}
.process-swiper .swiper-slide{width:min(420px,86vw);height:auto}
/* ---- Reference refinements: warm off-white bg, charcoal heading, clean white cards ---- */
.section-process{background:#f4f4f6}
.section-process .heading-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#3a3a3a;color:#3a3a3a;letter-spacing:-.01em}
.section-process .process-card{background:var(--card-bg);border-radius:var(--card-radius);padding:42px 36px;min-height:452px;box-shadow:var(--card-shadow)}
.section-process .process-card:hover{transform:none;box-shadow:var(--card-shadow-hover)}
@media(max-width:991px){
  .section-process .container{grid-template-columns:1fr;gap:var(--gap-stack)}
  .section-process .process-heading{gap:22px}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.section-hero{position:relative;z-index:0;max-width:calc(100% - 32px);margin:16px auto;border-radius:28px;min-height:min(86vh,800px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:154px 0 90px;overflow:hidden}
.hero-image{position:absolute;inset:0;background:url('/assets/img/hero-banner.jpg') 68% 22%/cover no-repeat;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,244,244,.5) 0%,rgba(244,244,244,.15) 38%,rgba(244,244,244,.9) 100%);z-index:1}
.section-hero .content-wrap{position:relative;z-index:2;max-width:940px}
/* Hero sub is the shared capsule; it only adds the frosted backing it needs to
   stay legible over the hero photograph, plus its own bottom margin. */
.hero-sub{background:rgba(250,250,250,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin-bottom:26px}
.hero-sub .spark{color:var(--accent)}
.hero-title{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:800;line-height:1.1;letter-spacing:-.025em}
.hero-title .line{display:block}
.hero-title .text-gradient-1{padding-bottom:.14em;margin-bottom:-.14em}
.hero-title .line2{display:inline-flex;align-items:center;gap:clamp(20px,2.2vw,32px);justify-content:center;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;justify-content:center;gap:clamp(10px,1vw,14px);width:fit-content;padding:clamp(14px,1.4vw,19px) clamp(24px,2.5vw,38px);background:var(--accent);color:#fff;font-weight:700;font-size:clamp(17px,1.9vw,26px);line-height:1;letter-spacing:.01em;border-radius:var(--radius-pill);box-shadow:0 18px 40px -10px rgba(253,58,37,.55);vertical-align:middle;white-space:nowrap;flex-shrink:0}
.status-pill .dot{width:clamp(10px,1.05vw,15px);height:clamp(10px,1.05vw,15px);border-radius:50%;background:#fff;flex-shrink:0;animation:pillPulse 1.8s ease-in-out infinite}
@keyframes pillPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.status-pill .dot{animation:none}}
/* Compact pill — About & Contact heroes only (smaller v1 headline) */
.status-pill.pill-sm{gap:clamp(8px,.8vw,11px);padding:clamp(11px,1.1vw,15px) clamp(20px,2vw,30px);font-size:clamp(14px,1.45vw,19px)}
.status-pill.pill-sm .dot{width:clamp(9px,.85vw,12px);height:clamp(9px,.85vw,12px)}
.hero-title:has(.pill-sm) .line2{gap:clamp(16px,1.8vw,24px)}
.hero-text{max-width:640px;margin:26px auto 32px;font-size:1.15rem;color:#333}
.bot-btns{display:flex;gap:var(--gap-ctrl);justify-content:center;flex-wrap:wrap}
.scroll-more{position:absolute;z-index:2;bottom:28px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem;color:#444}
.scroll-more svg{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:600px){.section-hero{min-height:auto;padding:128px 0 70px;max-width:calc(100% - 24px);margin:12px auto;border-radius:18px}}

/* Short hero variant (inner pages) */
.section-hero.v1{min-height:auto;padding:174px 0 90px}
.section-hero.v1 .hero-title{font-size:clamp(2.3rem,5.6vw,4.2rem)}
.section-hero.v1 .hero-text{margin-bottom:0}
@media(max-width:600px){.section-hero.v1{padding:138px 0 60px}}

/* Breadcrumb */
.breadcrumb{display:flex;gap:var(--gap-pill);justify-content:center;align-items:center;margin-top:18px;color:var(--muted);font-size:.92rem}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.5}

/* ==========================================================================
   ABOUT INTRO
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--gap-card);align-items:stretch}
.about-grid .heading-section{grid-column:1 / -1;margin-bottom:10px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#27c93f;box-shadow:0 0 0 4px rgba(39,201,63,.18)}

/* Left — large dark globe card */
.about-globe-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:radial-gradient(120% 95% at 50% 0%,#1e1e1e 0%,#0a0a0a 62%);color:#fff;padding:36px 34px 0;min-height:540px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow)}
/* Capsule geometry, dark-surface fill. Leads with its own green .live-dot. */
.globe-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.4;color:#eaeaea;border:0;background:rgba(255,255,255,.07);padding:8px 15px;border-radius:var(--radius-pill)}
.about-globe-card .about-city{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:600;color:#fff;margin-top:22px}
/* Inverse fill comes from the shared rule above; only spacing is local here. */
.globe-cta{margin-top:22px;border:0}
.about-earth{position:absolute;left:50%;bottom:-16%;transform:translateX(-50%);width:120%;max-width:none;opacity:.95;pointer-events:none}

/* Right — two stacked cards */
.about-col-right{display:grid;grid-template-rows:1fr 1fr;gap:var(--gap-card)}

/* Trust / stats card */
.trust-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:var(--gap-card)}
.trust-copy{font-size:1.15rem;line-height:1.5;color:var(--text);max-width:32ch;position:relative;z-index:1}
.trust-copy strong{font-weight:700}
.trust-foot{position:relative;z-index:1}
.trust-rating{display:inline-flex;flex-direction:column;gap:3px}
.trust-stars{color:#00b67a;font-size:1.05rem;letter-spacing:3px}
.trust-name{color:var(--muted);font-size:.85rem}
.trust-stat{position:absolute;right:24px;top:50%;transform:translateY(-42%);font-family:var(--h-font);font-weight:800;font-size:6.2rem;line-height:1;color:rgba(10,10,10,.06);z-index:0;pointer-events:none;letter-spacing:-.03em}

/* Testimonial card */
.testimonial-card{display:grid;grid-template-columns:150px 1fr;gap:var(--gap-card);align-items:stretch;background:var(--surface);border:0;border-radius:var(--radius);padding:16px;transition:transform .25s ease,box-shadow .25s ease}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.testimonial-photo{border-radius:var(--radius-sm);overflow:hidden}
.testimonial-photo img{width:100%;height:100%;object-fit:cover;min-height:180px}
.testimonial-body{display:flex;flex-direction:column;justify-content:center;padding:6px 10px 6px 0}
.testimonial-mark{font-family:var(--h-font);font-size:2.6rem;line-height:.5;color:var(--accent);font-weight:800}
.testimonial-text{font-size:1.08rem;font-weight:500;line-height:1.45;margin-top:12px}
.testimonial-cite{margin-top:16px;color:var(--muted);font-size:.88rem}
.testimonial-cite strong{color:var(--text);font-weight:600}

@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-globe-card{min-height:460px}
  .about-earth{width:82%;bottom:-10%}
}
@media(max-width:480px){
  .testimonial-card{grid-template-columns:1fr}
  .testimonial-photo img{min-height:220px}
  .trust-stat{font-size:5rem}
}

/* ==========================================================================
   SERVICES — redesigned split (intro + icon service cards)
   ========================================================================== */
/* No .heading-title override here on purpose. This section used to carry its own
   clamp(2.2rem,4.8vw,3.4rem) tier — a step above the sitewide clamp(2rem,4.6vw,3.4rem)
   that Benefits, Features and Tools all use — which made Services the one section
   rendering a larger headline than its neighbours at every width below the cap.
   It now inherits the shared tier; keep it that way. */
.section-services .heading-section{margin-bottom:40px}
.section-services .heading-section .heading-sub{margin-bottom:10px}
.section-services .heading-section .lede{margin-top:12px;font-size:.98rem;max-width:52ch}

/* image block */
.services-image{margin-top:auto;max-width:340px;border-radius:var(--radius-lg);overflow:hidden;background:#eee;border:0;box-shadow:var(--shadow-soft-sm)}
.services-image img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:opacity .3s ease}

/* service cards */
.section-services .accordion-list{gap:var(--gap-ctrl)}
.section-services .accordion-item{border-radius:var(--radius-lg);transition:transform .28s ease,border-color .25s ease,box-shadow .28s ease,background .25s ease}
.section-services .accordion-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft-lg)}
/* Open state reads through depth, not an accent stroke. */
.section-services .accordion-item.active{box-shadow:var(--shadow-soft-lg)}
.section-services .accordion-action{align-items:flex-start;gap:var(--gap-ctrl);padding:26px 28px}
.section-services .svc-ico{flex-shrink:0;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--card-bg);color:var(--ink);border:0;box-shadow:var(--shadow-soft-sm);transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.section-services .svc-ico svg{width:24px;height:24px}
.section-services .accordion-item.active .svc-ico,.section-services .accordion-item:hover .svc-ico{background:var(--dark);color:#fff;box-shadow:0 6px 14px rgba(24,24,27,.28)}
.section-services .svc-main{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.section-services .accordion-title{font-size:1.4rem}
.section-services .accordion-title .num{font-size:.95rem}
.section-services .svc-sub{color:var(--muted);font-size:.98rem;line-height:1.45}
.section-services .accordion-action .plus{margin-top:14px}
.section-services .accordion-content>div{padding:4px 28px 26px 96px}
@media(max-width:600px){
  .section-services .accordion-action{gap:var(--gap-pill);padding:22px 22px}
  .section-services .svc-ico{width:44px;height:44px;border-radius:13px}
  .section-services .accordion-title{font-size:1.25rem}
  .section-services .accordion-content>div{padding:4px 22px 24px 22px}
}

/* ---------- Rich services accordion (.style-1): dark expanded card ----------
   Only the open row inverts. Against the light neumorphic stack the dark card is
   the one thing in focus, and the collapsed rows keep the sitewide raised shell.
   Everything inside the open panel re-tones for the dark ground — the soft
   shadow scale is built for light surfaces and reads as nothing here, so the
   active card carries a true drop shadow instead (same logic as the dark pill).
   Scoped to .style-1 so the home page's services accordion is unaffected. */
.section-services .accordion-item.style-1{border-radius:24px}
.section-services .accordion-item.style-1.active{
  /* Flat fill first as the fallback, then the gradient layers over it. Two stops of
     work: a faint white wash off the top edge that keeps the header from reading as
     dead black, and a radial falloff that pulls the corners down to near-black so the
     card has a lit centre. The whole range is #1c1c1c → #0a0a0a — deliberately narrow,
     since a wider spread stops looking like depth and starts looking like a colour. */
  background:#141414;
  background:
    radial-gradient(120% 130% at 50% -12%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(112% 128% at 50% 0%, #1c1c1c 0%, #161616 46%, #0f0f0f 74%, #0a0a0a 100%);
  box-shadow:0 24px 56px -18px rgba(10,10,10,.5), 0 3px 12px rgba(10,10,10,.16);
}
.section-services .accordion-item.style-1.active:hover{
  box-shadow:0 28px 64px -18px rgba(10,10,10,.56), 0 3px 12px rgba(10,10,10,.16);
}

/* Header row: title left, circular arrow badge right, hairline rule beneath when open.
   Row height, title and badge are sized as one set — changing any of the three alone
   throws the row out of proportion. */
.section-services .accordion-list.gap-lg{gap:14px}
.section-services .accordion-item.style-1 .accordion-action{align-items:center;padding:20px 28px}
/* The open row's title steps up a size as it expands — the emphasis is what marks
   which card is active, so the size difference between the two states has to stay
   readable. font-size is transitioned directly: the header sits outside the
   height-animated .accordion-content, so without this it would snap. */
.section-services .accordion-item.style-1 .accordion-title{
  font-size:1.28rem;transition:font-size .26s ease,color .26s ease;
}
.section-services .accordion-item.style-1.active .accordion-action{
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.13);
}
.section-services .accordion-item.style-1.active .accordion-title{font-size:1.6rem;color:#fff;font-weight:700}
.section-services .svc-badge{
  flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule);color:var(--ink);
  transition:border-color .25s ease,color .25s ease;
}
.section-services .svc-badge svg{width:17px;height:17px}
/* One right-arrow glyph in two positions: rotated to a diagonal (↗ "expand") while
   collapsed, level (→ "collapse") once open — so the state change is a movement of
   the same mark rather than a swap between two icons. */
.section-services .svc-badge svg{display:block;transition:transform .35s ease}
/* State rules are deliberately NOT scoped to .style-1 — the home page's services
   accordion uses the same badge, so both pages share one open/closed vocabulary.
   Only the on-dark colour below stays .style-1, since the home cards stay light. */
.section-services .accordion-item:not(.active) .svc-badge svg{transform:rotate(-45deg)}
.section-services .accordion-item:not(.active):hover .svc-badge{border-color:rgba(24,24,27,.3)}
/* Home rows carry a title + subtitle, so the action row is top-aligned; the badge
   opts back out to sit centred against the pair rather than riding the first line. */
.section-services .accordion-item:not(.style-1) .svc-badge{align-self:center}
.section-services .accordion-item.style-1.active .svc-badge{border-color:rgba(255,255,255,.32);color:#fff}

/* Panel: image left, copy right, both clear of the header rule */
.section-services .accordion-item.style-1 .accordion-content>div{
  padding:24px 28px 28px;gap:var(--gap-stack);align-items:start;
}
.section-services .accordion-item.style-1.active .accordion-content p{color:rgba(255,255,255,.72)}
/* Mid-grey, a clear step above the card's #1c1c1c centre so the pills separate from
   the ground without going stark. The slight top-down gradient keeps them consistent
   with the card treatment rather than reading as flat chips on a graded surface. */
.section-services .accordion-item.style-1.active .tags-item{
  background:#343434;
  background:linear-gradient(180deg,#3a3a3a 0%,#2e2e2e 100%);
  color:rgba(255,255,255,.88);box-shadow:none;
}
/* The index number is a background mark, not content: it sits below the pills so it
   never collides with them, at an opacity that reads as texture on the dark card. */
.section-services .accordion-item.style-1 .panel-num{
  margin-top:10px;font-size:2.6rem;color:rgba(255,255,255,.17);
}
@media(max-width:600px){
  .section-services .accordion-item.style-1 .accordion-action{padding:17px 20px}
  .section-services .accordion-item.style-1 .accordion-title{font-size:1.15rem}
  .section-services .accordion-item.style-1.active .accordion-title{font-size:1.35rem}
  .section-services .accordion-item.style-1.active .accordion-action{padding-bottom:15px}
  .section-services .accordion-item.style-1 .accordion-content>div{padding:20px 20px 22px}
  .section-services .svc-badge{width:36px;height:36px}
  .section-services .svc-badge svg{width:16px;height:16px}
}
/* The pop is a size change, which is motion — honour a reduced-motion preference by
   keeping the larger open-state size but removing the animation between the two. */
@media(prefers-reduced-motion:reduce){
  .section-services .accordion-item.style-1 .accordion-title{transition:none}
}

/* ==========================================================================
   BENEFITS
   ========================================================================== */
/* The Process section above ends with .process-swiper, whose margin-block:-44px
   claws back its shadow padding and pulls this section up by the same 44px. Adding
   it back here restores the 110px gap every other pt-0 section gets above its
   eyebrow pill (Tools, Features, FAQ). */
.section-benefits{padding-top:44px}
/* 2x2 on desktop — the visual area sets each card's height, so rows can differ. */
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-card)}
.benefit-box{display:flex;flex-direction:column;gap:0;min-height:0;padding:var(--card-pad)}
/* The visual area absorbs the card's spare height and centres its contents in it,
   so a short visual (a single tile row) doesn't leave one big gap above the copy. */
.benefit-box .card-visual{flex:1 1 auto;margin-bottom:28px}
.benefit-box h3{font-size:1.25rem;color:var(--ink)}
.benefit-box p{color:var(--muted);font-size:.94rem;line-height:1.6;margin-top:8px;max-width:46ch}
@media(max-width:860px){.benefits-grid{gap:var(--gap-ctrl)}}
@media(max-width:720px){.benefits-grid{grid-template-columns:1fr}}

/* ==========================================================================
   CARD VISUALS — monochrome, neumorphic (Benefits + Core Values)
   Four variants: chips-on-fields, check-tile row, big glyph, panel mock.
   All are decorative: aria-hidden in markup, no colour, no text content needed
   beyond the chip labels.
   ========================================================================== */

/* min-width:0 lets grid items shrink below their content's min-content width,
   so a nowrap chip label can never push the grid track wider than the viewport. */
.benefits-grid>*,.values-grid>*{min-width:0}

/* ---- Variant A: chip badges sitting on faux input fields ---- */
.chip-stack{display:flex;flex-direction:column;justify-content:center;gap:var(--gap-pill);min-width:0}
.chip-row{display:flex;align-items:center;gap:var(--gap-pill);min-width:0;flex-wrap:wrap}
.chip-row .field-bar{
  flex:1 1 40px;min-width:0;height:34px;border-radius:var(--inner-radius);
  background:var(--field-bg);box-shadow:var(--field-shadow);
}
/* Alternating bar widths keep the stack from reading as a flat block */
.chip-row:nth-child(2) .field-bar{flex:.82}
.chip-row:nth-child(3) .field-bar{flex:.6}
.chip{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--card-bg);color:var(--ink-2);
  font-family:var(--h-font);font-weight:600;font-size:.8rem;white-space:nowrap;
  box-shadow:var(--shadow-soft-sm);
  max-width:100%;
}
.chip svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-3)}

/* ---- Variant B: row of rounded-square check tiles ---- */
.tile-row{display:flex;gap:var(--gap-ctrl);align-items:center;justify-content:flex-start}
.tile{
  width:60px;height:60px;flex-shrink:0;border-radius:16px;
  background:var(--card-bg);color:var(--ink);display:grid;place-items:center;
  box-shadow:var(--shadow-soft-sm);
}
.tile svg{width:26px;height:26px}
/* Trailing partial tile — hints at more, like the reference */
.tile.ghost{opacity:.45;width:36px}

/* ---- Variant C: single large soft glyph ---- */
.glyph-wrap{display:grid;place-items:center;padding:6px 0}
.glyph-wrap svg{width:104px;height:104px;color:#e4e4e8;filter:drop-shadow(6px 8px 12px rgba(174,174,182,.45)) drop-shadow(-5px -5px 9px rgba(255,255,255,.9))}
.glyph-wrap svg .glyph-mark{color:var(--ink)}

/* Glyph + supporting chip pair */
.glyph-chips{display:flex;flex-direction:column;justify-content:center;gap:var(--gap-ctrl);align-items:center}
.chip-pair{display:flex;gap:var(--gap-pill);flex-wrap:wrap;justify-content:center}

/* ---- Variant D: panel mock (bubble + stacked fields + check) ---- */
.panel-mock{display:flex;gap:var(--gap-pill);align-items:center}
.pm-bubble{
  flex:1;padding:16px;border-radius:var(--inner-radius);
  background:var(--card-bg);
  box-shadow:var(--shadow-soft-sm);
  display:flex;flex-direction:column;gap:8px;
}
.pm-line{height:6px;border-radius:3px;background:var(--ink);opacity:.85}
.pm-line.w-90{width:90%}.pm-line.w-70{width:70%}.pm-line.w-50{width:50%}
.pm-panel{
  width:44%;padding:14px;border-radius:var(--inner-radius);
  background:var(--field-bg);box-shadow:var(--field-shadow);
  display:flex;flex-direction:column;gap:9px;
}
.pm-head{display:flex;align-items:center;gap:8px}
.pm-avatar{width:20px;height:20px;border-radius:50%;background:var(--ink);flex-shrink:0}
.pm-stub{height:5px;border-radius:3px;background:var(--ink-3);opacity:.5;flex:1}
.pm-block{height:38px;border-radius:10px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.pm-check{
  align-self:flex-end;width:34px;height:34px;border-radius:11px;margin-top:2px;
  background:var(--card-bg);color:var(--ink);display:grid;place-items:center;
  box-shadow:var(--shadow-soft-sm);
}
.pm-check svg{width:17px;height:17px}

@media(max-width:520px){
  .benefit-box{padding:28px}
  .chip{font-size:.75rem;padding:7px 12px}
  .tile{width:52px;height:52px;border-radius:14px}
  .glyph-wrap svg{width:86px;height:86px}
}

/* ==========================================================================
   FEATURES (3-col + center)
   ========================================================================== */
/* Hub-and-spoke: 3 cards | glowing brand tile | 3 cards, joined by connectors.
   --fx-col is the computed width of one card column; every connector offset is
   derived from it, so the diagram stays exact at any container width. */
.features-wrap{
  --fx-hub:200px; --fx-gut:110px; --fx-gap:var(--gap-card);
  --fx-col:calc((100% - var(--fx-hub) - 2*var(--fx-gut))/2);
  --fx-line:#e3e3e8;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--fx-hub) minmax(0,1fr);
  column-gap:var(--fx-gut);
  align-items:center;
}
/* repeat(3,1fr) makes all six cards equal height, so both stacks match exactly
   and each card's centreline is at a known fraction of the wrap height. */
.fx-col{display:grid;grid-template-rows:repeat(3,1fr);gap:var(--fx-gap);min-width:0}

.fx-card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--card-bg);border:0;border-radius:16px;padding:22px 24px;
  box-shadow:var(--shadow-soft-sm);
  transition:box-shadow .25s ease;
}
.fx-card:hover{box-shadow:var(--shadow-soft-sm-hover)}
/* Dark badge + white glyph — the one high-contrast accentless element per card */
.fx-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;margin-bottom:14px;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(24,24,27,.22);
}
.fx-card h3{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.3}
.fx-card p{color:var(--muted);font-size:.82rem;line-height:1.55;margin:0}

/* ---- Centre tile ---- */
.fx-hub{
  position:relative;z-index:2;
  aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  background:var(--accent);border-radius:26px;color:#fff;
  box-shadow:0 24px 60px rgba(253,58,37,.45), 0 0 90px rgba(253,58,37,.3), 0 2px 0 rgba(255,255,255,.18) inset;
}
.fx-mark{display:grid;place-items:center;color:#fff}
.fx-word{font-family:var(--h-font);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:#fff}

/* ---- Connectors ----
   Bracket spans card 1's centreline to card 3's centreline: with three 1fr rows
   and gap g, half a card is (100% - 2g)/6 from each end. */
.fx-bracket,.fx-stub,.fx-cross{position:absolute;pointer-events:none;z-index:1}
.fx-bracket{
  top:calc((100% - 2*var(--fx-gap))/6);
  bottom:calc((100% - 2*var(--fx-gap))/6);
  width:calc(var(--fx-gut)/2);
  border:1px solid var(--fx-line);
}
.fx-bracket.fx-l{left:var(--fx-col);border-left:0;border-radius:0 18px 18px 0}
.fx-bracket.fx-r{right:var(--fx-col);border-right:0;border-radius:18px 0 0 18px}
/* Straight stubs: card 2 -> spine, and spine -> hub */
.fx-stub{top:50%;width:calc(var(--fx-gut)/2);border-top:1px solid var(--fx-line)}
.fx-stub-mid.fx-l{left:var(--fx-col)}
.fx-stub-hub.fx-l{left:calc(var(--fx-col) + var(--fx-gut)/2)}
.fx-stub-mid.fx-r{right:var(--fx-col)}
.fx-stub-hub.fx-r{right:calc(var(--fx-col) + var(--fx-gut)/2)}
/* Red crosshair where the hub stub meets the spine */
.fx-cross{top:50%;width:13px;height:13px;transform:translate(-50%,-50%)}
.fx-cross.fx-l{left:calc(var(--fx-col) + var(--fx-gut)/2)}
.fx-cross.fx-r{left:auto;right:calc(var(--fx-col) + var(--fx-gut)/2);transform:translate(50%,-50%)}
.fx-cross::before,.fx-cross::after{content:"";position:absolute;background:var(--accent);border-radius:1px}
.fx-cross::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.fx-cross::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}

/* ---- Signal pulses ----
   Purely additive: 6 absolutely-positioned dots animating left/top in the SAME
   coordinate space (.features-wrap) the connectors are placed in, so they track
   the lines at every width instead of being pinned to hard-coded coordinates.
   Named waypoints below mirror the connector geometry exactly.
     spine  = fx-col + gut/2      hub edge = fx-col + gut      card edge = fx-col
     card1Y = (100% - 2gap)/6     card2Y   = 50%               card3Y    = 100% - card1Y
   An 18px chamfer keyframe rounds each turn so the dot follows the bracket's
   18px corner radius rather than cutting a hard right angle. */
.fx-pulse{
  position:absolute;z-index:1;width:5px;height:5px;border-radius:50%;
  background:#ff5a3d;
  box-shadow:0 0 4px 1px rgba(253,58,37,.45), 0 0 9px rgba(253,58,37,.22);
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  /* Identical duration / easing / delay on all six — they launch in unison. */
  animation-duration:2.2s;animation-iteration-count:infinite;
  animation-timing-function:linear;animation-delay:0s;
}
.pl1{animation-name:fxPulseL1}
.pl2{animation-name:fxPulseL2}
.pl3{animation-name:fxPulseL3}
.pr1{animation-name:fxPulseR1}
.pr2{animation-name:fxPulseR2}
.pr3{animation-name:fxPulseR3}

/* Keyframe stops are distance-proportional, so every dot moves at the SAME speed.
   That keeps the three dots sharing a side's hub->spine run exactly coincident
   (they read as one point) until they split at the crosshair — instead of
   strung out along the spine, which is what read as a "trail" before.
   Shared run 0-15%; outer spokes then climb the spine and turn into their card. */

/* ---- Left side ---- */
@keyframes fxPulseL1{
  0%{left:calc(var(--fx-col) + var(--fx-gut));top:50%;opacity:0}
  15%{left:calc(var(--fx-col) + var(--fx-gut)/2);top:50%;opacity:0}
  17%,86%{opacity:1}
  72%{left:calc(var(--fx-col) + var(--fx-gut)/2);top:calc((100% - 2*var(--fx-gap))/6 + 18px)}
  77%{left:calc(var(--fx-col) + var(--fx-gut)/2 - 18px);top:calc((100% - 2*var(--fx-gap))/6)}
  90%{left:var(--fx-col);top:calc((100% - 2*var(--fx-gap))/6);opacity:0}
  100%{left:var(--fx-col);top:calc((100% - 2*var(--fx-gap))/6);opacity:0}
}
/* Middle spoke is ~1/3 the path length, so at matched speed it lands early
   and then stays fully hidden until the next synchronised launch. */
@keyframes fxPulseL2{
  0%{left:calc(var(--fx-col) + var(--fx-gut));top:50%;opacity:0}
  4%,26%{opacity:1}
  15%{left:calc(var(--fx-col) + var(--fx-gut)/2);top:50%}
  30%{left:var(--fx-col);top:50%;opacity:0}
  100%{left:var(--fx-col);top:50%;opacity:0}
}
@keyframes fxPulseL3{
  0%{left:calc(var(--fx-col) + var(--fx-gut));top:50%;opacity:0}
  15%{left:calc(var(--fx-col) + var(--fx-gut)/2);top:50%;opacity:0}
  17%,86%{opacity:1}
  72%{left:calc(var(--fx-col) + var(--fx-gut)/2);top:calc(100% - (100% - 2*var(--fx-gap))/6 - 18px)}
  77%{left:calc(var(--fx-col) + var(--fx-gut)/2 - 18px);top:calc(100% - (100% - 2*var(--fx-gap))/6)}
  90%{left:var(--fx-col);top:calc(100% - (100% - 2*var(--fx-gap))/6);opacity:0}
  100%{left:var(--fx-col);top:calc(100% - (100% - 2*var(--fx-gap))/6);opacity:0}
}

/* ---- Right side (mirrored, still driven from `left` so the maths stays one system) ---- */
@keyframes fxPulseR1{
  0%{left:calc(100% - var(--fx-col) - var(--fx-gut));top:50%;opacity:0}
  15%{left:calc(100% - var(--fx-col) - var(--fx-gut)/2);top:50%;opacity:0}
  17%,86%{opacity:1}
  72%{left:calc(100% - var(--fx-col) - var(--fx-gut)/2);top:calc((100% - 2*var(--fx-gap))/6 + 18px)}
  77%{left:calc(100% - var(--fx-col) - var(--fx-gut)/2 + 18px);top:calc((100% - 2*var(--fx-gap))/6)}
  90%{left:calc(100% - var(--fx-col));top:calc((100% - 2*var(--fx-gap))/6);opacity:0}
  100%{left:calc(100% - var(--fx-col));top:calc((100% - 2*var(--fx-gap))/6);opacity:0}
}
@keyframes fxPulseR2{
  0%{left:calc(100% - var(--fx-col) - var(--fx-gut));top:50%;opacity:0}
  4%,26%{opacity:1}
  15%{left:calc(100% - var(--fx-col) - var(--fx-gut)/2);top:50%}
  30%{left:calc(100% - var(--fx-col));top:50%;opacity:0}
  100%{left:calc(100% - var(--fx-col));top:50%;opacity:0}
}
@keyframes fxPulseR3{
  0%{left:calc(100% - var(--fx-col) - var(--fx-gut));top:50%;opacity:0}
  15%{left:calc(100% - var(--fx-col) - var(--fx-gut)/2);top:50%;opacity:0}
  17%,86%{opacity:1}
  72%{left:calc(100% - var(--fx-col) - var(--fx-gut)/2);top:calc(100% - (100% - 2*var(--fx-gap))/6 - 18px)}
  77%{left:calc(100% - var(--fx-col) - var(--fx-gut)/2 + 18px);top:calc(100% - (100% - 2*var(--fx-gap))/6)}
  90%{left:calc(100% - var(--fx-col));top:calc(100% - (100% - 2*var(--fx-gap))/6);opacity:0}
  100%{left:calc(100% - var(--fx-col));top:calc(100% - (100% - 2*var(--fx-gap))/6);opacity:0}
}

@keyframes spin{to{transform:rotate(360deg)}}
/* Used by .float-decor .d (Tools section) — the definition had gone missing.
   Carries --tilt through so the per-tile rotation survives the animation. */
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}
  50%{transform:translateY(-6px) rotate(var(--tilt,0deg))}
}

@media(max-width:1100px){.features-wrap{--fx-gut:64px;--fx-hub:172px}}
/* Single column: the diagram becomes a plain stack and connectors are dropped. */
@media(max-width:900px){
  .features-wrap{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-card)}
  .fx-col{grid-template-rows:none}
  .fx-hub{order:-1;width:min(200px,60vw);margin:0 auto 8px}
  .fx-bracket,.fx-stub,.fx-cross,.fx-pulse{display:none}
}
/* No lines to trace once motion is suppressed */
@media(prefers-reduced-motion:reduce){.fx-pulse{display:none}}

/* ==========================================================================
   TOOLS
   ========================================================================== */
.section-tools{position:relative;overflow:hidden}
.tools-wrap{max-width:640px;margin-inline:auto;position:relative;z-index:2}
.tools-wrap .lede{margin-top:18px;margin-bottom:30px}

/* The tiles are absolutely positioned against the SECTION, not the text column,
   so their offsets are measured from the section's centre line and can never
   land on the copy. --tool-x is the gap from that centre line to a tile's inner
   edge: 320px of text half-width + ~100px of clearance is the floor. */
.float-decor{position:absolute;inset:0;z-index:0;pointer-events:none;--tool-x:clamp(420px,33vw,520px)}
.float-decor .d{
  /* 9px padding leaves a 62px content box in an 80px tile — the artwork covers
     ~60% of the tile area. Every source SVG now has a square viewBox trimmed to
     its artwork, so object-fit:contain renders all six at the same 62px. */
  position:absolute;width:80px;height:80px;padding:9px;
  border-radius:16px;background:#fff;object-fit:contain;
  box-shadow:0 12px 28px rgba(16,18,24,.10),0 2px 6px rgba(16,18,24,.06);
  animation:floaty 5s ease-in-out infinite;
}
/* Left column — `right` anchors them so a larger offset pushes further out. */
.float-decor .d1{right:calc(50% + var(--tool-x) + 46px);top:8%;--tilt:-7deg}
.float-decor .d2{right:calc(50% + var(--tool-x));top:42%;--tilt:5deg;animation-delay:.6s}
.float-decor .d3{right:calc(50% + var(--tool-x) + 30px);top:72%;--tilt:-4deg;animation-delay:1s}
/* Right column — mirrored rhythm, opposite tilts. */
.float-decor .d4{left:calc(50% + var(--tool-x) + 46px);top:12%;--tilt:6deg;animation-delay:.3s}
.float-decor .d5{left:calc(50% + var(--tool-x));top:44%;--tilt:-5deg;animation-delay:.9s}
.float-decor .d6{left:calc(50% + var(--tool-x) + 30px);top:74%;--tilt:8deg;animation-delay:1.4s}

/* Below this width the outermost tile (520 + 46 + 80 = 646px from centre at the
   clamp ceiling, 546px at the floor) can no longer clear the copy, so drop the
   absolute layout entirely and run them as a row under the button. */
@media(max-width:1100px){
  .float-decor{position:static;display:flex;flex-wrap:wrap;justify-content:center;
    gap:18px;margin-top:44px;padding-inline:24px}
  .float-decor .d{position:static;animation:none;transform:rotate(var(--tilt,0deg))}
}
@media(max-width:520px){
  .float-decor{gap:14px}
  .float-decor .d{width:64px;height:64px;padding:7px;border-radius:14px}
}

/* ==========================================================================
   WHY OTIVAXAI (dark)
   ========================================================================== */
.box-black{background:var(--dark);color:#eee;padding-block:110px;border-radius:36px;margin:0 16px}
/* Same capsule, tuned for the dark panel. The soft shadow is invisible on dark, so
   a translucent fill does the separating instead; the accent dot still leads. */
.box-black .heading-sub.style-light{color:#e9e9e9;background:rgba(255,255,255,.07);box-shadow:none}
.text-white{color:#fff!important}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split);align-items:center}
.why-h{font-size:1.4rem;margin-bottom:26px;color:#fff}
.how-list{display:grid;gap:var(--gap-card)}
.how-list li{display:flex;gap:var(--gap-ctrl);align-items:flex-start}
.how-list .n{font-family:var(--h-font);font-weight:700;color:var(--accent);font-size:1.1rem;flex-shrink:0;width:34px}
.how-list strong{display:block;color:#fff;font-family:var(--h-font);font-size:1.1rem;margin-bottom:4px}
.how-list p{color:var(--muted-2);font-size:.95rem}
.why-highlights{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-card)}
.why-card{background:var(--dark-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:26px}
.why-card.wide{grid-column:1 / -1}
.wh-num{font-family:var(--h-font);font-size:3rem;font-weight:700;color:var(--accent);line-height:1;margin-bottom:8px}
.why-card p{color:var(--muted-2);font-size:.95rem}
.wh-quote{font-family:var(--h-font);font-size:1.25rem;color:#fff;line-height:1.4}
@media(max-width:820px){.why-grid{grid-template-columns:1fr;gap:var(--gap-stack)}.box-black{border-radius:28px;padding-block:72px}}
@media(max-width:440px){.why-highlights{grid-template-columns:1fr}}

/* ==========================================================================
   PRICING TEASER
   ========================================================================== */
.pt-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap-split);align-items:center}
/* The lede has no bottom margin of its own, so the CTA needs its own clearance.
   30px matches the gap the Tools section puts between its lede and CTA. */
.pt-wrap .heading-section .tf-btn{margin-top:30px}
.pt-mini{display:grid;gap:var(--gap-ctrl)}
.pt-mini li{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:0;border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow-soft-sm)}
.pt-mini li.pop{background:var(--accent);color:#fff;box-shadow:0 14px 30px -10px rgba(253,58,37,.5)}
.pt-name{font-family:var(--h-font);font-weight:600;font-size:1.15rem}
.pt-price{font-weight:600;color:var(--muted)}
.pt-mini li.pop .pt-price{color:#fff}
@media(max-width:820px){.pt-wrap{grid-template-columns:1fr;gap:var(--gap-stack)}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.container-narrow{max-width:820px}
.section-faqs .accordion-content p{color:var(--muted)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split);align-items:start}
.contact-left .lede{margin:0 0 30px}
.contact-info{display:grid;gap:var(--gap-card)}
.contact-info li{display:flex;gap:var(--gap-ctrl);align-items:center}
/* Neutral icon tile — the same monochrome language as the in-card tiles
   (.c-icon / .a-icon / .p-icon further down), but on --surface rather than
   --card-bg because this row sits directly on the page background. */
.ci-icon{width:48px;height:48px;border-radius:var(--inner-radius);background:var(--surface);color:var(--ink);display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-soft-sm)}
.contact-info a,.contact-info div>span{font-family:var(--h-font);font-weight:500;font-size:1.05rem}
/* The label is a div>span too, so it has to out-specify the rule above — at plain
   .ci-label it lost, and silently rendered at the value's 1.05rem/500 instead of
   its own .86rem. Small + tracked is what makes it read as a label, not the colour:
   --muted is already the lightest grey that clears 4.5:1 on --bg (--muted-2 is
   on-dark only, 2.4:1 here), so the weight comes off the size, not the tone. */
.contact-info .ci-label{display:block;font-family:var(--b-font);font-size:.76rem;font-weight:500;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
/* ---------- Form: raised card, unboxed fields ----------
   The card is the same raised surface as every other card sitewide. Inside it the
   fields carry no box at all — a label, plain text, and a hairline rule underneath.
   Depth belongs to the card; the fields sit flat on it. */
.form-contact{background:var(--card-bg);border:0;border-radius:var(--card-radius);padding:40px;box-shadow:var(--shadow-soft)}
.form-heading{font-size:1.35rem;margin-bottom:26px}
/* flow-root establishes a block formatting context so a child's bottom margin stays
   inside the field instead of collapsing into this one. Without it the textarea's
   clearance margin below is silently swallowed (.field has no padding or border to
   stop the collapse) and the field ends up TIGHTER than before, not roomier. */
.field{margin-bottom:22px;display:flow-root}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:10px 2px;font-family:var(--b-font);font-size:.98rem;color:var(--text);
  background:transparent;transition:border-color .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);font-weight:400;opacity:1}
/* The rule itself is the focus indicator, so the global focus ring is suppressed
   here — but it thickens to 2px accent, which stays a visible, non-colour-only cue. */
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent);border-bottom-width:2px;padding-bottom:9px}
/* display:block removes the inline-block baseline descender, which was adding a
   stray 7px of dead space inside .field and making the form's rhythm unpredictable.
   Resize stays vertical-only (an expandable message box is genuinely useful), but
   it is bounded, and the extra margin keeps Chrome's resize grabber — which paints
   flush in the bottom-right corner, right on the hairline rule — clear of the
   attachment row beneath it instead of appearing to sit on top of it. */
.field textarea{resize:vertical;min-height:96px;max-height:340px;display:block;margin-bottom:var(--gap-ctrl)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:var(--gap-stack)}}
@media(max-width:560px){.form-contact{padding:30px 24px}}

/* ---------- File attachment row ----------
   Paperclip + label on one line with the native input inline. Deliberately not a
   button — the only heavy control in the form is the submit pill. */
/* No margin-bottom override: the row used to carry an oversized 26px to fake
   clearance the clipped shadow was eating. The input's own bottom padding now
   holds the shadow, so this row drops back to .field's shared 22px rhythm — which
   still nets a LARGER gap below the pill than before (10px pad + 22px = 32px). */
.field-file{display:flex;align-items:center;flex-wrap:wrap;gap:var(--gap-pill)}
.field-file label{display:inline-flex;align-items:center;gap:8px;margin-bottom:0;white-space:nowrap}
.field-file label svg{width:16px;height:16px;color:var(--ink-3);flex-shrink:0}
/* Sized so label + native control clear one line inside the narrower half-width
   form column; the native "no file chosen" text scales with the input's font-size.
   The padding is what stops the Choose File pill's shadow being sheared off: a
   form control clips to its own box, and --shadow-soft-xs reaches 5px up/left and
   8px right / 9px down past the pill, so the input has to be that much bigger than
   its button. The negative left margin cancels the left pad so the row still lines
   up with the fields above it. overflow:visible is belt-and-braces — Chrome ignores
   it on form controls, but it costs nothing if another engine honours it. */
.field-file input[type=file]{width:auto;flex:1 1 auto;min-width:0;border:0;padding:6px 0 10px 6px;margin-left:-6px;overflow:visible;font-size:.78rem;color:var(--muted)}
/* Must restate the padding, not zero it — the generic .field input:focus rule sets
   padding-bottom:9px, and zeroing it here would re-clip the shadow on focus. */
.field-file input[type=file]:focus{border-bottom-width:0;padding-bottom:10px}
.field-file input[type=file]::file-selector-button{
  border:0;border-radius:var(--radius-pill);padding:6px 12px;margin-right:8px;
  background:var(--surface);color:var(--ink-2);
  font-family:var(--b-font);font-size:.78rem;font-weight:500;cursor:pointer;
  box-shadow:var(--shadow-soft-xs);transition:box-shadow .2s ease;
}
.field-file input[type=file]::file-selector-button:hover{box-shadow:var(--shadow-soft-sm)}

/* ==========================================================================
   PRICING PAGE
   ========================================================================== */
/* The pricing hero now uses the shared .section-hero.v1 banner (same as About,
   Services, Contact and Blog), so the old text-only .pricing-hero rules are gone. */
.affects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.affect-card{padding:30px}
.affect-card .a-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px}
.affect-card h3{font-size:1.1rem;margin-bottom:8px;color:var(--ink)}
.affect-card p{color:var(--muted);font-size:.94rem}
@media(max-width:860px){.affects-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.affects-grid{grid-template-columns:1fr}}

.section-ballpark{background:var(--surface);border-radius:36px;margin:0 16px}
.ballpark-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);align-items:stretch}
.price-card{position:relative;background:var(--bg);border:0;border-radius:var(--radius-lg);padding:32px 28px;display:flex;flex-direction:column}
.price-card.popular{background:var(--accent);color:#fff;border:0;box-shadow:0 24px 60px rgba(253,58,37,.3)}
.price-card .p-label{font-family:var(--h-font);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:.85rem;color:var(--muted)}
.price-card.popular .p-label{color:rgba(255,255,255,.85)}
.badge-off{position:absolute;top:22px;right:22px;background:#eaf7ea;color:#1f9d3f;font-weight:600;font-size:.75rem;padding:5px 11px;border-radius:var(--radius-pill)}
.price-card.popular .badge-off{background:rgba(255,255,255,.2);color:#fff}
.badge-pop{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-weight:600;font-size:.72rem;padding:4px 12px;border-radius:var(--radius-pill);margin-top:12px;text-transform:uppercase;letter-spacing:.06em}
.p-reg{margin-top:18px;color:var(--muted);text-decoration:line-through;font-size:.95rem}
.price-card.popular .p-reg{color:rgba(255,255,255,.7)}
.p-price{font-family:var(--h-font);font-weight:700;font-size:3rem;line-height:1;margin:4px 0}
.p-sub{font-size:.9rem;color:var(--muted)}
.price-card.popular .p-sub{color:rgba(255,255,255,.85)}
.p-save{color:#1f9d3f;font-weight:600}
.price-card.popular .p-save{color:#fff}
.p-desc{margin:16px 0;font-size:.96rem;color:var(--muted)}
.price-card.popular .p-desc{color:rgba(255,255,255,.92)}
.type-check{display:grid;gap:var(--gap-pill);margin:8px 0 24px;flex:1}
.type-check li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.type-check li svg{flex-shrink:0;color:#1f9d3f;margin-top:2px}
.price-card.popular .type-check li svg{color:#fff}
.price-card .tf-btn{width:100%}
/* Standard cards take the primary dark pill; the accent-filled popular card takes
   the inverse pill defined with the button system above. */
.price-card.popular .tf-btn{color:var(--accent)}
.price-note{text-align:center;color:var(--muted);margin-top:34px;font-size:.92rem}
@media(max-width:900px){.ballpark-grid{grid-template-columns:1fr}.section-ballpark{border-radius:26px}}

/* ---------- Neumorphic card surface (sitewide) ----------
   Every card family shares one raised surface: same tone as the page, no border,
   depth carried entirely by the dual shadow. Contents differ per family; the shell
   does not. `.popular` price card and dark cards opt out further down. */
.trust-card,
.accordion-item,
.benefit-box,
.process-card,
.price-card:not(.popular),
.affect-card,
.features-item.style-2,
.blog-card,
.cta-card,
.testimonial-card,
.box-contact-item{
  background:var(--card-bg);
  border:0;
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  transition:box-shadow .25s ease,transform .25s ease;
}
.benefit-box:hover,
.process-card:hover,
.price-card:not(.popular):hover,
.affect-card:hover,
.features-item.style-2:hover,
.cta-card:hover{
  transform:none;
  box-shadow:var(--card-shadow-hover);
}
.accordion-item.active{box-shadow:var(--card-shadow-hover)}

.cta-card{max-width:640px;margin:0 auto;background:var(--card-bg);border:0;border-radius:var(--card-radius);padding:48px 40px;text-align:center;box-shadow:var(--card-shadow)}
.cta-card .eyebrow{margin-bottom:14px}
.cta-card h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px}
.cta-card p{color:var(--muted);margin-bottom:26px}

.gradient-banner{margin:0 16px;border-radius:32px;background:linear-gradient(120deg,var(--accent),#c81e0c);color:#fff;text-align:center;padding:70px 30px}
/* On the accent banner the capsule inverts to a translucent white fill — the soft
   shadow reads as nothing against saturated colour. */
.gradient-banner .pill{background:rgba(255,255,255,.18);color:#fff;box-shadow:none;margin-bottom:20px}
.gradient-banner h2{font-size:clamp(1.9rem,4vw,3rem);color:#fff;margin-bottom:14px}
.gradient-banner p{color:rgba(255,255,255,.9);margin-bottom:28px;max-width:52ch;margin-inline:auto}
/* Inverse fill from the button system; only the accent label colour is local. */
.gradient-banner .tf-btn{color:var(--accent)}
@media(max-width:600px){.gradient-banner{padding:52px 22px;border-radius:24px}}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);margin-bottom:64px}
.box-contact-item{background:var(--card-bg);border:0;border-radius:var(--card-radius);padding:34px 26px;text-align:center;box-shadow:var(--card-shadow)}
.box-contact-item .c-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin:0 auto 16px}
.box-contact-item h3{font-size:1.05rem;margin-bottom:8px}
.box-contact-item a,.box-contact-item p{color:var(--muted)}
.box-contact-item a:hover{color:var(--accent)}
/* ---------- Icon + label pill ----------
   Label left, dark circular icon badge pinned to the right end. The pill is the
   same raised off-white surface as the capsules; the badge is the one dark accent
   inside it. Reusable for any icon+label pill elsewhere on the site. */
.contact-social{display:flex;gap:var(--gap-ctrl);margin-top:26px;flex-wrap:wrap}
.contact-social a{
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  min-width:190px;border:0;border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text);
  padding:7px 7px 7px 20px;font-weight:500;font-size:.95rem;
  box-shadow:var(--shadow-soft-sm);transition:box-shadow .22s ease,transform .22s ease;
}
.contact-social a:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft-sm-hover)}
.pill-ico{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:var(--dark);color:#fff;display:grid;place-items:center;
  box-shadow:0 5px 12px -3px rgba(10,10,10,.45);
}
.pill-ico svg{width:15px;height:15px}
@media(max-width:400px){.contact-social a{min-width:0;flex:1 1 100%}}
.wg-map{margin-top:80px;border-radius:var(--radius-lg);overflow:hidden;border:0;box-shadow:var(--shadow-soft-sm);line-height:0}
.wg-map iframe{width:100%;height:460px;border:0;display:block;filter:grayscale(.2)}
@media(max-width:760px){.contact-strip{grid-template-columns:1fr}.wg-map iframe{height:320px}}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
/* Top card of the home page .about-col-right stack; testimonial sits below it.
   Sized to its copy (auto row) so the pair keeps the home page's rhythm:
   compact card on top, taller card below, one --gap-card between them. */
.about-col-right-mission{grid-template-rows:auto 1fr}
.mission-box{background:var(--dark);color:#fff;border-radius:var(--radius-lg);padding:30px 32px;display:flex;flex-direction:column}
.mission-box h3{font-size:1.35rem;margin-bottom:14px;color:#fff}
.mission-box .line{width:56px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:16px}
.mission-box p{color:var(--muted-2);font-size:.97rem;line-height:1.55}

/* Core values */
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-card)}
/* Shell comes from the shared neumorphic card rule; this sets layout only. */
/* align-items:stretch cancels the base .features-item flex-start, which would
   otherwise shrink-wrap the visual area instead of letting it fill the card. */
.features-item.style-2{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:var(--card-pad);text-align:left}
.features-item.style-2 .card-visual{flex:1 1 auto;margin-bottom:28px}
.features-item.style-2 h3{font-size:1.25rem;margin-bottom:8px;color:var(--ink)}
.features-item.style-2 p{color:var(--muted);font-size:.94rem;line-height:1.6;max-width:46ch}
@media(max-width:720px){.values-grid{grid-template-columns:1fr}}
@media(max-width:520px){.features-item.style-2{padding:28px}}

/* ---------- Monochrome icon tiles (cards) ----------
   Raised same-tone square, dark line glyph, no brand colour — the card-interior
   counterpart to the chip/tile visuals. Selectors carry the parent so they
   override each icon's older accent-soft fill. */
.box-contact-item .c-icon,
.affect-card .a-icon,
.features-item.style-2 .v-icon,
.process-card .p-icon{
  position:relative;
  background:var(--card-bg);
  color:var(--ink);
  box-shadow:var(--shadow-soft-sm);
}
.box-contact-item .c-icon>svg,
.affect-card .a-icon>svg,
.features-item.style-2 .v-icon>svg,
.process-card .p-icon>svg{position:relative;z-index:1}
/* Kill the old accent glow halo */
.box-contact-item .c-icon::before,
.affect-card .a-icon::before,
.features-item.style-2 .v-icon::before,
.process-card .p-icon::before{content:none}

/* ---- Tools v2: orthogonal connector map ----
   One coordinate system for the whole diagram: the SVG viewBox is 880x452 and
   the stage carries that exact aspect ratio, so a viewBox unit is 1/880 of the
   stage width at every size. Tiles, hub and pulses are placed with the same
   numbers expressed as percentages (x% = x/8.8, y% = y/4.52), which keeps each
   line endpoint welded to its tile edge as the stage scales.
     tiles  top/bottom x=90|790  mid x=40|840   rows y=62 / 226 / 386
     hub    200x62 centred on (440,226)   rails y=166 (top) / 290 (bottom)
   Every spoke is drawn *from* (440,226) — the hub's true centre — and the
   opaque pill masks the overlap, so resizing the pill can never leave a gap
   or an overhang at its edges. */
.section-tools.v2{text-align:center}
.section-tools.v2 .tools-wrap{max-width:920px}
.tool-map{
  --tool-line:#e3e3e8;
  position:relative;width:100%;aspect-ratio:880/452;margin:26px auto 0;
  container-type:inline-size;
}
.tool-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* non-scaling-stroke keeps the hairline at 1.2px however far the stage scales */
.tool-lines path{fill:none;stroke:var(--tool-line);stroke-width:1.2;vector-effect:non-scaling-stroke}

/* Copy sits in the open space between the two top tiles. Width is set so the
   paragraph runs 3-4 lines, clearing the top rail (y=166) by ~40px either way. */
.tools-wrap .tool-lede{position:absolute;left:50%;top:4.9%;transform:translateX(-50%);width:min(52%,460px);margin:0;font-size:1rem}

/* Centre hub: dark pill, brand mark + wordmark inline, sized to read as the
   anchor of the diagram — same visual weight as the CTA below it. Contents are
   sized in cqi so they scale with the stage and always clear the pill's ends. */
.tool-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:22.727%;height:13.717%;
  display:flex;align-items:center;justify-content:center;gap:1.15cqi;
  background:var(--dark);border-radius:var(--radius-pill);box-shadow:var(--shadow-btn);
}
.tool-hub-mark{
  display:grid;place-items:center;flex-shrink:0;
  width:3.86cqi;height:3.86cqi;border-radius:28%;
  background:var(--accent);color:#fff;
}
.tool-hub-mark svg{width:64%;height:64%}
.tool-hub-word{
  font-family:var(--h-font);font-weight:700;color:#fff;line-height:1;
  letter-spacing:-.01em;font-size:1.35rem;font-size:2.6cqi;white-space:nowrap;
}
/* Anchored by its top edge so it meets the end of the hub stub exactly */
.tool-cta{position:absolute;left:50%;top:69.912%;transform:translateX(-50%);z-index:2;white-space:nowrap}
.tool-cta:hover{transform:translateX(-50%) translateY(-2px)}

/* Tiles keep their existing look; sized in % of the stage (7.2727% = 64px at
   full width) so they track the connector geometry instead of drifting off it. */
.tool-tile{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  width:7.2727%;aspect-ratio:1;border-radius:16px;
  background:var(--surface);border:0;display:grid;place-items:center;
  box-shadow:var(--shadow-soft-sm);
}
.tool-tile img{width:53%;height:auto}
.tt-tl{left:10.227%;top:13.717%}
.tt-tr{left:89.773%;top:13.717%}
.tt-ml{left:4.545%;top:50%}
.tt-mr{left:95.455%;top:50%}
.tt-bl{left:10.227%;top:85.398%}
.tt-br{left:89.773%;top:85.398%}

/* ---- Pulses ----
   Same dot and same shared timing as the home page hub-and-spoke (.fx-pulse:
   2.2s, linear, zero delay on all of them), only the paths are new. Dots leave
   from the pill's edge, not the hub centre the lines are drawn from, so nothing
   crawls out from under the pill. Stops are distance-proportional against the
   longest run (437 units -> 80% of the timeline), so every dot moves at one
   speed and the short spokes land early and stay hidden until the next
   synchronised launch. Each turn is chamfered 12 units either side to follow
   the 12-unit corner radius in the SVG. */
.tp-tl{animation-name:toolPulseTL}
.tp-tr{animation-name:toolPulseTR}
.tp-ml{animation-name:toolPulseML}
.tp-mr{animation-name:toolPulseMR}
.tp-bl{animation-name:toolPulseBL}
.tp-br{animation-name:toolPulseBR}
.tp-cta{animation-name:toolPulseCTA}

/* Each turn is walked in three steps sampled off the SVG's own quadratic
   (t = 1/3, 2/3) instead of one straight chord across it. A single chord left
   the dot up to 4.2px outside the visible curve at the apex of every corner;
   sampling the curve cuts that to ~0.5px. The corner's start/end stops and
   every other stop are untouched, so duration, speed and sync are unchanged. */
@keyframes toolPulseTL{
  0%{left:50%;top:43.142%;opacity:0}
  3%{opacity:1}
  3.11%{left:50%;top:39.381%}
  4.147%{left:49.849%;top:37.905%}
  5.183%{left:49.394%;top:37.02%}
  6.22%{left:48.636%;top:36.726%}
  65.91%{left:11.591%;top:36.726%}
  66.947%{left:10.833%;top:36.431%}
  67.983%{left:10.379%;top:35.546%}
  69.02%{left:10.227%;top:34.071%}
  76%{opacity:1}
  80%{left:10.227%;top:20.796%;opacity:0}
  100%{left:10.227%;top:20.796%;opacity:0}
}
@keyframes toolPulseTR{
  0%{left:50%;top:43.142%;opacity:0}
  3%{opacity:1}
  3.11%{left:50%;top:39.381%}
  4.147%{left:50.151%;top:37.905%}
  5.183%{left:50.606%;top:37.02%}
  6.22%{left:51.364%;top:36.726%}
  65.91%{left:88.409%;top:36.726%}
  66.947%{left:89.167%;top:36.431%}
  67.983%{left:89.621%;top:35.546%}
  69.02%{left:89.773%;top:34.071%}
  76%{opacity:1}
  80%{left:89.773%;top:20.796%;opacity:0}
  100%{left:89.773%;top:20.796%;opacity:0}
}
@keyframes toolPulseBL{
  0%{left:50%;top:56.858%;opacity:0}
  3%{opacity:1}
  3.84%{left:50%;top:61.504%}
  4.88%{left:49.849%;top:62.98%}
  5.92%{left:49.394%;top:63.865%}
  6.96%{left:48.636%;top:64.159%}
  66.64%{left:11.591%;top:64.159%}
  67.677%{left:10.833%;top:64.454%}
  68.713%{left:10.379%;top:65.339%}
  69.75%{left:10.227%;top:66.814%}
  75%{opacity:1}
  79.27%{left:10.227%;top:78.319%;opacity:0}
  100%{left:10.227%;top:78.319%;opacity:0}
}
@keyframes toolPulseBR{
  0%{left:50%;top:56.858%;opacity:0}
  3%{opacity:1}
  3.84%{left:50%;top:61.504%}
  4.88%{left:50.151%;top:62.98%}
  5.92%{left:50.606%;top:63.865%}
  6.96%{left:51.364%;top:64.159%}
  66.64%{left:88.409%;top:64.159%}
  67.677%{left:89.167%;top:64.454%}
  68.713%{left:89.621%;top:65.339%}
  69.75%{left:89.773%;top:66.814%}
  75%{opacity:1}
  79.27%{left:89.773%;top:78.319%;opacity:0}
  100%{left:89.773%;top:78.319%;opacity:0}
}
@keyframes toolPulseML{
  0%{left:38.636%;top:50%;opacity:0}
  3%,44%{opacity:1}
  49.06%{left:8.182%;top:50%;opacity:0}
  100%{left:8.182%;top:50%;opacity:0}
}
@keyframes toolPulseMR{
  0%{left:61.364%;top:50%;opacity:0}
  3%,44%{opacity:1}
  49.06%{left:91.818%;top:50%;opacity:0}
  100%{left:91.818%;top:50%;opacity:0}
}
@keyframes toolPulseCTA{
  0%{left:50%;top:56.858%;opacity:0}
  2%,8%{opacity:1}
  10.8%{left:50%;top:69.912%;opacity:0}
  100%{left:50%;top:69.912%;opacity:0}
}

/* Stage stops being a diagram and becomes a plain stack; .fx-pulse is already
   hidden below 900px (and under prefers-reduced-motion) by the shared rules. */
@media(max-width:900px){
  .tool-map{
    aspect-ratio:auto;max-width:520px;margin:22px auto 0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px 12px;
    justify-items:center;align-items:center;
  }
  .tool-lines{display:none}
  .tools-wrap .tool-lede,.tool-hub,.tool-cta,.tool-tile{position:static;transform:none}
  /* Copy, hub and CTA are full-width rows; the six tiles flow into 2x3 below. */
  .tools-wrap .tool-lede,.tool-hub,.tool-cta{grid-column:1 / -1}
  .tools-wrap .tool-lede{width:auto;max-width:60ch}
  .tool-hub{width:auto;height:auto;padding:15px 30px;gap:10px;justify-self:center}
  .tool-hub-mark{width:34px;height:34px}
  .tool-hub-word{font-size:1.35rem}
  .tool-cta:hover{transform:translateY(-2px)}
  .tool-tile{width:64px;height:64px}
  .tool-tile img{width:34px}
}

/* ==========================================================================
   BLOG
   ========================================================================== */
/* Text-only page hero. Blog moved to the shared .section-hero.v1 banner; this is
   now only the legal pages (Privacy, Terms), which don't want a photo header. */
.page-hero{text-align:center;padding:190px 0 70px}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:700}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.blog-card{background:var(--card-bg);border:0;border-radius:var(--card-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--card-shadow);transition:transform .25s ease,box-shadow .25s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.blog-card .b-img{aspect-ratio:16/10;overflow:hidden}
.blog-card .b-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.blog-card:hover .b-img img{transform:scale(1.05)}
.blog-card .b-body{padding:26px;display:flex;flex-direction:column;gap:var(--gap-pill);flex:1}
/* Category tag is the shared capsule; only its grid alignment is local. */
.blog-cat{align-self:flex-start}
.blog-card h2,.blog-card h3{font-size:1.25rem;line-height:1.25}
.blog-card p{color:var(--muted);font-size:.95rem;flex:1}
.blog-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent)}
.blog-meta{display:flex;gap:var(--gap-pill);color:var(--muted);font-size:.85rem}
@media(max-width:960px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.blog-grid{grid-template-columns:1fr}}

/* Blog post article */
.post-hero{padding:180px 0 50px;text-align:center}
.post-hero .blog-cat{margin:0 auto 18px}
.post-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:20ch;margin:0 auto}
.post-hero .post-meta{margin-top:22px;color:var(--muted);display:flex;gap:var(--gap-pill);justify-content:center;flex-wrap:wrap;font-size:.92rem}
.post-cover{max-width:1000px;margin:0 auto 10px;border-radius:var(--radius-lg);overflow:hidden}
.post-cover img{width:100%;aspect-ratio:16/8;object-fit:cover}
.article{max-width:760px;margin:0 auto;padding-block:56px}
.article h2{font-size:1.7rem;margin:38px 0 14px}
.article h3{font-size:1.3rem;margin:28px 0 10px}
.article p{margin-bottom:18px;color:#33373a}
.article ul{margin:0 0 18px;padding-left:4px;display:grid;gap:10px}
.article ul li{display:flex;gap:10px;color:#33373a}
.article ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:9px;flex-shrink:0}
.article blockquote{margin:26px 0;padding:20px 26px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 12px 12px 0;font-family:var(--h-font);font-size:1.2rem}
.article .lead{font-size:1.2rem;color:var(--muted)}
.post-cta{background:var(--dark);color:#fff;border-radius:var(--radius-lg);padding:44px;text-align:center;margin:20px auto 0;max-width:760px}
.post-cta h2{color:#fff;font-size:1.6rem;margin-bottom:12px}
.post-cta p{color:var(--muted-2);margin-bottom:22px}
.related{max-width:1100px;margin:0 auto}
.related h2{text-align:center;margin-bottom:36px}

/* ==========================================================================
   LEGAL + 404
   ========================================================================== */
.legal-wrap{max-width:820px;margin:0 auto;padding-block:56px}
.legal-wrap h2{font-size:1.4rem;margin:34px 0 12px}
.legal-wrap p{margin-bottom:16px;color:#33373a}
.legal-wrap ul{margin:0 0 16px;display:grid;gap:8px}
.legal-wrap ul li{display:flex;gap:10px;color:#33373a}
.legal-wrap ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px;flex-shrink:0}
.legal-wrap .updated{color:var(--muted);font-size:.92rem}
.section-404{min-height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:180px 24px 90px}
.section-404 .code{font-family:var(--h-font);font-weight:700;font-size:clamp(5rem,18vw,11rem);line-height:1;background:linear-gradient(92deg,#0b0b0b,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-404 p{color:var(--muted);max-width:44ch;margin:14px 0 28px}