/* =========================================================================
   PIVOT GROWTH — Design System (shared engine)
   Premium minimal. Off-white dominant, navy type, electric-blue accent.
   Used across every page. Edit tokens here to restyle the whole site.
   ========================================================================= */

/* ---------- 1. Design tokens -------------------------------------------- */
:root {
  /* Palette */
  --off-white:     #FCFCFD;   /* dominant background (near-pure white) */
  --off-white-2:   #F4F6F9;   /* alternating surface (subtle cool) */
  --surface:       #FFFFFF;   /* cards */
  --hero-bg:       #0A1020;   /* dark hero panel */
  --hero-bg-2:     #0E1730;   /* hero gradient stop */
  --navy:          #070D1A;   /* headlines + body */
  --navy-70:       #37414F;   /* secondary text */
  --navy-50:       #667085;   /* muted / captions */
  --blue:          #2563EB;   /* primary action + system lines */
  --blue-600:      #1D4FD8;   /* button hover */
  --blue-light:    #3B82F6;   /* highlights / graphics */
  --blue-wash:     #EEF3FE;   /* faint blue fill */
  --line:          #E7E9EE;   /* borders */
  --line-strong:   #D8DCE4;

  /* Type */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Consolas", monospace;

  /* Type scale (fluid) — more editorial at the top end */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.22rem, 1.13rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.95vw, 2.15rem);
  --step-3:  clamp(2.05rem, 1.68rem + 1.85vw, 3.25rem);
  --step-4:  clamp(2.70rem, 2.00rem + 3.30vw, 4.90rem);

  /* Space scale — more generous white space */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2.25rem; --sp-6: 3.5rem;  --sp-7: 5.5rem;  --sp-8: 8rem;

  /* Reading measure (narrower for readability) */
  --measure: 42ch;

  /* Radius + shadow (restrained, soft) */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(7,13,26,.04);
  --shadow-md: 0 14px 40px -20px rgba(7,13,26,.18);
  --shadow-lg: 0 30px 70px -32px rgba(7,13,26,.22);
  --shadow-blue: 0 14px 34px -14px rgba(37,99,235,.30);
  --glow-blue:   0 8px 24px -6px rgba(37,99,235,.55);

  --container: 1200px;
  --nav-h: 74px;
}

/* ---------- 2. Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--navy);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Layout helpers ------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.section { padding-block: clamp(4.5rem, 9vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.surface-alt { background: var(--off-white-2); }
.surface-navy { background: var(--navy); color: #EAECEF; }
.stack > * + * { margin-top: var(--sp-3); }

/* Section heading pattern */
.eyebrow { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .8rem; border-radius: 999px; background: var(--blue-wash); box-shadow: 0 0 0 1px rgba(37,99,235,.14) inset; margin-bottom: var(--sp-3); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.surface-navy .eyebrow { color: var(--blue-light); background: rgba(59,130,246,.14); box-shadow: 0 0 0 1px rgba(96,165,250,.22) inset; }
.surface-navy .eyebrow::before { background: var(--blue-light); }

.h-xl { font-size: var(--step-4); letter-spacing: -0.035em; line-height: 1.02; }
.h-lg { font-size: var(--step-3); letter-spacing: -0.03em; line-height: 1.05; }
.h-md { font-size: var(--step-2); letter-spacing: -0.02em; }
.lede { font-size: var(--step-1); color: var(--navy-70); line-height: 1.55; font-weight: 400; max-width: 54ch; }
.surface-navy .lede { color: #B7BEC9; }
.muted { color: var(--navy-50); }
.section-head { max-width: 54ch; }
.section-head .lede { margin-top: var(--sp-4); }

/* ---------- 4. Buttons -------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: var(--step-0); color: #fff;
  padding: 0.9em 1.6em; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  border: 1px solid rgba(29,79,216,.9);
  box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .2s cubic-bezier(.2,.6,.2,1), box-shadow .25s ease, filter .2s ease;
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform .2s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 30px -8px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn__spark { width: 1.05em; height: 1.05em; flex: none; }
/* Secondary — simpler, same family */
.btn--ghost { background: var(--surface); color: var(--navy); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { background: var(--surface); color: var(--blue); border-color: var(--blue); filter: none; box-shadow: var(--shadow-md); }
/* On dark surfaces (hero / navy sections) */
.btn--on-navy { color: #fff; }
.btn--ghost.btn--on-navy { background: rgba(255,255,255,.04); color: #EAECEF; border-color: rgba(255,255,255,.30); box-shadow: none; }
.btn--ghost.btn--on-navy:hover { background: rgba(255,255,255,.09); color:#fff; border-color: rgba(255,255,255,.6); }
.btn--sm { padding: 0.6em 1.15em; font-size: var(--step--1); box-shadow: 0 5px 16px -8px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---------- 5. Header --------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--off-white) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.16rem; color: var(--navy); }
.brand__star { width: 26px; height: 26px; flex: none; }
.brand__star path { fill: var(--blue); }
.nav__links { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); list-style: none; padding: 0; }
.nav__links a { font-size: var(--step--1); font-weight: 500; color: var(--navy-70); position: relative; padding: .3rem 0; transition: color .18s ease; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background: var(--blue); transition: width .22s ease; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--navy); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width:100%; }
.nav__right { display: flex; align-items: center; gap: var(--sp-3); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content:""; display:block; width:18px; height:2px; background: var(--navy); border-radius:2px; position: relative; transition: transform .25s ease, opacity .2s ease; }
.nav__toggle span::before { position:absolute; top:-6px; } .nav__toggle span::after { position:absolute; top:6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    background: var(--off-white); border-bottom: 1px solid var(--line);
    display: grid; gap: var(--sp-2); padding: var(--sp-4) clamp(1.15rem,4vw,2.5rem) var(--sp-5);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .28s ease, opacity .28s ease;
  }
  .nav__menu.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links li { border-bottom: 1px solid var(--line); }
  .nav__links a { display: block; padding: .85rem 0; font-size: 1.05rem; color: var(--navy); }
  .nav__links a::after { display: none; }
  .nav__menu .btn { justify-content: center; margin-top: var(--sp-2); }
  .nav__right .btn--header { display: none; }
}

/* ---------- 6. Cards ---------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.65rem, 2.6vw, 2.35rem);
  transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
}
.card::after { content:""; position:absolute; left:0; top:0; height:100%; width:3px; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .32s cubic-bezier(.2,.6,.2,1); }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.card--hover:hover::after { transform: scaleY(1); }
.card__k { font-family: var(--font-mono); font-size: var(--step--1); color: var(--navy-50); letter-spacing: .05em; }
.card h3 { font-size: var(--step-1); margin: .5rem 0 .6rem; }
.card p { color: var(--navy-70); font-size: var(--step-0); }
.card .badge { transition: transform .28s cubic-bezier(.2,.6,.2,1), color .2s ease, border-color .2s ease; }
.card--hover:hover .badge { transform: translateX(4px); color: var(--blue); border-color: var(--blue-wash); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px){ .grid-4 { grid-template-columns: repeat(2,1fr);} .grid-3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* Icon chip */
.chip { width: 48px; height: 48px; border-radius: 13px; background: var(--blue-wash); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.chip svg { width: 23px; height: 23px; stroke: var(--blue); fill: none; stroke-width: 1.7; }

/* ---------- 7. System timeline (signature) ------------------------------ */
.system { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); position: relative; }
.system__line { position: absolute; top: 29px; left: 7%; right: 7%; height: 2px; background: var(--line-strong); z-index: 0; }
.system__line span { position:absolute; inset:0; width:100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); }
.system__step { position: relative; z-index: 1; text-align: left; }
.system__num { width: 58px; height: 58px; border-radius: 50%; background: var(--blue-wash); border: 2px solid var(--blue); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; color: var(--blue); transition: border-color .4s ease, color .4s ease, background .4s ease, transform .4s ease; }
.system__step h3 { font-size: var(--step-1); margin: var(--sp-4) 0 .5rem; }
.system__step p { color: var(--navy-70); font-size: var(--step--1); max-width: 30ch; }
/* JS scroll-driven state: start empty, fill + light on scroll */
.system.sys-init .system__line span { width: calc(var(--sys, 0) * 100%); transition: width .12s linear; }
.system.sys-init .system__num { background: var(--surface); border-color: var(--line-strong); color: var(--navy-50); }
.system.sys-init .system__step.is-active .system__num { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); transform: scale(1.06); }
@media (max-width: 780px){
  .system { grid-template-columns: 1fr; gap: var(--sp-5); }
  .system__line { top: 0; bottom: 0; left: 29px; right: auto; width: 2px; height: auto; }
  .system__line span { width: 2px !important; height: 100%; background: linear-gradient(180deg,var(--blue),var(--blue-light)); }
  .system.sys-init .system__line span { height: calc(var(--sys,0) * 100%); width: 2px !important; transition: height .12s linear; }
  .system__step { padding-left: 82px; }
  .system__num { position: absolute; left: 0; top: 0; }
}

/* ---------- 8. FAQ accordion ------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; padding: 1.35rem 3rem 1.35rem 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--navy); position: relative; letter-spacing: -0.01em; }
.faq__q::after { content:"+"; position:absolute; right:.2rem; top:50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 1.5rem; color: var(--blue); transition: transform .25s ease; }
.faq__q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { overflow: hidden; height: 0; transition: height .3s ease; }
.faq__a > div { padding: 0 3rem 1.5rem 0; color: var(--navy-70); }

/* ---------- 9. Forms ---------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: .45rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 620px){ .field-row { grid-template-columns: 1fr; } }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--navy); }
.field .req { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--step-0); color: var(--navy);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  padding: 0.8rem 0.95rem; transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--navy-50); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-wash); }
.field-hint { font-size: var(--step--1); color: var(--navy-50); }
.form__note { font-size: var(--step--1); color: var(--navy-50); }

/* ---------- 10. Footer -------------------------------------------------- */
.site-footer { background: var(--navy); color: #C4CAD4; padding-block: var(--sp-7) var(--sp-5); }
.footer-cta { text-align: center; max-width: 40ch; margin-inline: auto; margin-bottom: var(--sp-7); }
.footer-cta h2 { color: #fff; font-size: var(--step-3); }
.footer-cta p { color: #99A2B0; margin: var(--sp-3) 0 var(--sp-4); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.09); }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4);} }
@media (max-width: 480px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand { color:#fff; margin-bottom: var(--sp-3); }
.footer-brand p { font-size: var(--step--1); color:#8B95A3; max-width: 34ch; }
.footer-col h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing:.12em; text-transform: uppercase; color:#6E7889; margin-bottom: var(--sp-3); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-col a { font-size: var(--step--1); color:#C4CAD4; transition: color .16s ease; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; padding-top: var(--sp-5); margin-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.09); font-size: var(--step--1); color:#6E7889; }

/* ---------- 11. Sticky mobile CTA -------------------------------------- */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: .7rem clamp(1rem,4vw,1.5rem) calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--off-white) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(120%); transition: transform .3s ease; display: none; }
.mobile-cta .btn { width: 100%; justify-content: center; }
.mobile-cta.is-visible { transform: none; }
@media (max-width: 900px){ .mobile-cta { display: block; } body { padding-bottom: 4.5rem; } }

/* ---------- 12. Reveal on scroll --------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.16,.7,.2,1), transform .8s cubic-bezier(.16,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.07s;} .reveal[data-d="2"]{ transition-delay:.14s;}
.reveal[data-d="3"]{ transition-delay:.21s;} .reveal[data-d="4"]{ transition-delay:.28s;}
.reveal[data-d="5"]{ transition-delay:.35s;} .reveal[data-d="6"]{ transition-delay:.42s;}
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; transition: none !important; }
  .system__line span { transition: none !important; }
  .btn, .card, .btn:hover, .card--hover:hover { transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- 13. Misc bits ---------------------------------------------- */
.breadcrumbs { font-size: var(--step--1); color: var(--navy-50); font-family: var(--font-mono); letter-spacing:.02em; padding-top: var(--sp-5); }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs span { margin-inline: .4rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-3); }
.badge { font-family: var(--font-mono); font-size: var(--step--1); color: var(--navy-70); background: var(--off-white-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .3rem .8rem; }
.skip-link { position:absolute; left:-999px; top:0; background: var(--navy); color:#fff; padding:.6rem 1rem; border-radius: var(--r-sm); z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* Placeholder visual frames (case studies / images pending) */
.frame { position: relative; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); background:
  linear-gradient(var(--off-white-2), var(--off-white-2)) padding-box; overflow: hidden; aspect-ratio: 16/10; display: grid; place-items: center; }
.frame::before { content:""; position:absolute; inset:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 26px 26px; opacity:.5; }
.frame__label { position: relative; font-family: var(--font-mono); font-size: var(--step--1); color: var(--navy-50); letter-spacing:.06em; text-align:center; padding: .5rem 1rem; }
.frame__label strong { display:block; color: var(--navy-70); font-weight: 600; letter-spacing:-.01em; font-family: var(--font-display); font-size: var(--step-0); margin-bottom:.2rem; }

/* ---------- 14. Hero v6 (city + phone + tags + support strip) --------- */
.v6hero{ --navy-60:rgba(7,13,26,.6); --navy-45:rgba(7,13,26,.45); --blue-deep:#1D4ED8; --blue-soft:#3B82F6; --border:#E5E7EB; --green:#0E9F6E; --hero-bg:#FCFCFD;
  position:relative; overflow:hidden; background:var(--hero-bg); }
.hero-top{ max-width:1240px; margin:0 auto; padding:12px 24px 0; text-align:center; position:relative; z-index:6; }
.v6hero h1{ font-size:clamp(30px, 4.2vw, 52px); font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--navy); }
.v6hero h1 .h1-br{ display:inline; }
.v6hero h1 .accent{ color:var(--blue); }

.hero-visual{ position:relative; max-width:1300px; margin:-6px auto 0; height:660px; z-index:1; overflow:hidden; }
.glow{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:74%; height:80%; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(37,99,235,.09) 0%, rgba(59,130,246,.04) 45%, transparent 72%); filter:blur(4px); animation:glow-breathe 9s ease-in-out infinite; }
@keyframes glow-breathe{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } }
.hero-img{ position:absolute; z-index:2; }
.hero-img img{ width:100%; height:100%; object-fit:contain; }
.img-city{ left:50%; top:51%; transform:translate(-50%,-50%); width:min(1120px, 94%); height:120%; animation:rise-center .9s cubic-bezier(.22,.9,.3,1) both; }
.ping{ position:absolute; left:var(--x); top:var(--y); width:12px; height:12px; margin:-6px 0 0 -6px; z-index:6; pointer-events:none; }
.ping::before, .ping::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--blue); animation:ping-ring 3.2s cubic-bezier(.2,.7,.4,1) infinite; }
.ping::after{ animation-delay:1.6s; }
.ping-1{ --x:34%; --y:34%; } .ping-2{ --x:47%; --y:29%; } .ping-3{ --x:70%; --y:36%; }
.ping-2::before, .ping-2::after{ animation-duration:3.6s; } .ping-3::before, .ping-3::after{ animation-duration:2.9s; }
@keyframes ping-ring{ 0%{ transform:scale(.35); opacity:.65; } 70%{ opacity:0; } 100%{ transform:scale(2.6); opacity:0; } }
.img-phone{ right:1%; top:6%; width:230px; height:78%; z-index:5; animation:rise .9s cubic-bezier(.22,.9,.3,1) .2s both, drift 8s ease-in-out 1.2s infinite; }
.img-phone img{ transform:rotate(6deg); transform-origin:center; }
@keyframes rise-center{ from{ opacity:0; transform:translate(-50%,-46%); } to{ opacity:1; transform:translate(-50%,-50%); } }
@keyframes rise{ from{ opacity:0; translate:0 18px; } to{ opacity:1; translate:0 0; } }
@keyframes drift{ 0%,100%{ translate:0 0; } 50%{ translate:0 -9px; } }

.hero-tags{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.float-tag{ --d:0s; --fd:0s; position:absolute; pointer-events:auto; display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.87); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(229,231,235,.9); border-radius:12px; padding:7px 11px 7px 8px; box-shadow:0 6px 18px rgba(7,13,26,.06), 0 1px 3px rgba(7,13,26,.04); opacity:0; animation:tag-enter .7s cubic-bezier(.22,.9,.3,1) forwards, tag-float 6s ease-in-out infinite, tag-spotlight 12s ease-in-out infinite; animation-delay:var(--d), calc(.7s + var(--d) + var(--fd)), var(--sd, 0s); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; cursor:default; }
.float-tag:hover{ transform:translateY(-4px) !important; animation-play-state:paused, paused, paused; border-color:rgba(37,99,235,.45); box-shadow:0 14px 32px rgba(37,99,235,.18), 0 0 0 4px rgba(37,99,235,.07); }
@keyframes tag-enter{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes tag-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes tag-spotlight{ 0%, 12%, 100%{ box-shadow:0 6px 18px rgba(7,13,26,.06), 0 1px 3px rgba(7,13,26,.04); border-color:rgba(229,231,235,.9); } 5%{ box-shadow:0 12px 28px rgba(37,99,235,.22), 0 0 0 3px rgba(37,99,235,.09); border-color:rgba(37,99,235,.45); } }
.tag-icon{ width:26px; height:26px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,.09); color:var(--blue); }
.tag-name{ font-size:11px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; color:var(--navy); }
.tag-status{ display:flex; align-items:center; gap:5px; margin-left:6px; font-size:9px; font-weight:700; letter-spacing:.04em; white-space:nowrap; color:var(--blue); background:rgba(37,99,235,.08); padding:4px 9px; border-radius:100px; }
.tag-status .dot{ width:5px; height:5px; border-radius:50%; background:var(--blue); animation:dot-pulse 2.2s ease-in-out infinite; }
.tag-status--live{ color:var(--green); background:rgba(14,159,110,.09); }
.tag-status--live .dot{ background:var(--green); }
@keyframes dot-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,.35); } 50%{ box-shadow:0 0 0 4px rgba(37,99,235,0); } }
.tag-pos-1{ left:6%; top:10%; --d:.15s; --fd:0s; --sd:0s; }
.tag-pos-2{ right:27%; top:3%; --d:.3s; --fd:1.2s; --sd:3s; }
.tag-pos-3{ left:3%; bottom:16%; --d:.45s; --fd:2.1s; --sd:6s; }
.tag-pos-4{ right:24%; bottom:7%; --d:.6s; --fd:.7s; --sd:9s; }

.support-strip{ max-width:1180px; margin:18px auto 0; padding:15px 32px 22px; border-top:1px solid rgba(229,231,235,.7); display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.strip-main{ display:flex; align-items:center; gap:12px; }
.strip-pin{ width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,.08); color:var(--blue); }
.strip-title{ font-size:11.5px; font-weight:700; letter-spacing:-.01em; color:var(--navy); }
.strip-regions{ display:flex; align-items:center; gap:9px; margin-top:2px; font-size:10.5px; font-weight:600; color:var(--navy-60); flex-wrap:wrap; }
.strip-regions .sep{ width:4px; height:4px; border-radius:50%; background:var(--blue); animation:sep-shimmer 3s ease-in-out infinite; }
.strip-regions .sep:nth-of-type(2){ animation-delay:.5s; } .strip-regions .sep:nth-of-type(3){ animation-delay:1s; }
@keyframes sep-shimmer{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.strip-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.v6-chip{ font-size:9.5px; font-weight:600; color:var(--navy-60); background:#fff; border:1px solid rgba(229,231,235,.85); padding:5px 11px; border-radius:100px; transition:color .2s ease, border-color .2s ease; }
.v6-chip:hover{ color:var(--blue); border-color:rgba(37,99,235,.4); }

@media (min-width:768px) and (max-width:1020px){
  .v6hero .hero-visual{ height:520px; }
  .img-city{ width:min(860px, 94%); }
  .img-phone{ width:172px; }
  .tag-pos-4{ display:none; }
  .ping{ display:none; }
}
@media (max-width:767px){
  .hero-top{ padding-top:16px; }
  .v6hero h1 .h1-br{ display:none; }
  /* City is the centerpiece; 2 static proof tags overlay it. No phone, no motion — stable & clean. */
  .hero-visual{ position:relative; height:auto; margin-top:10px; padding:0 12px; overflow:visible; display:block; }
  .glow{ display:none; }
  .ping{ display:none; }
  .img-city{ position:relative; left:auto; top:auto; transform:none; width:100%; height:auto; margin:0 auto; animation:none; }
  .img-city img{ width:100%; height:auto; display:block; }
  .img-phone{ display:none !important; }
  .hero-tags{ position:absolute; inset:0; display:block; overflow:visible; padding:0; }
  .float-tag{ position:absolute; animation:none !important; opacity:1 !important; transform:none !important;
    font-size:10.5px; padding:5px 8px; gap:6px; }
  .float-tag:hover{ transform:none !important; }
  .float-tag .tag-icon{ width:20px; height:20px; }
  .float-tag .tag-status{ font-size:8px; padding:3px 6px; margin-left:4px; }
  .tag-pos-1{ left:2%;  top:7%;    right:auto; bottom:auto; }
  .tag-pos-2{ left:2%;  bottom:9%; top:auto;   right:auto; }
  .tag-pos-3, .tag-pos-4{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .float-tag, .img-city, .img-phone{ animation:none; opacity:1; translate:0 0; }
  .glow{ animation:none; } .ping{ display:none; }
  .img-city{ transform:translate(-50%,-50%); }
  .tag-status .dot, .strip-regions .sep{ animation:none; }
}
@media (prefers-reduced-motion: reduce) and (max-width:767px){ .img-city{ transform:none; } }

/* Signature flow — clean HTML nodes + thin blue connecting line */
.flowcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-lg); }
.flowcard__title { display: flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-50); margin-bottom: var(--sp-5); }
.flowcard__title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-wash); }
.flow { list-style: none; margin: 0; padding: 0; position: relative; }
.flow::before { content: ""; position: absolute; left: 25px; top: 32px; bottom: 32px; width: 2px; background: var(--line); z-index: 0; }
.flow::after  { content: ""; position: absolute; left: 25px; top: 32px; width: 2px; height: calc(100% - 64px); background: linear-gradient(var(--blue), var(--blue-light)); z-index: 0; transform: scaleY(1); transform-origin: top; }
.flow__step { position: relative; z-index: 1; display: flex; gap: var(--sp-4); align-items: center; padding-block: .6rem; }
.flow__node { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-strong); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.flow__node svg { width: 22px; height: 22px; stroke: var(--navy-70); fill: none; stroke-width: 1.75; }
.flow__step:last-child .flow__node { background: var(--blue-wash); border-color: var(--blue); }
.flow__step:last-child .flow__node svg { stroke: var(--blue); }
.flow__txt strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--navy); letter-spacing: -0.01em; }
.flow__txt span { font-size: var(--step--1); color: var(--navy-50); }
.flow__step:last-child .flow__txt strong { color: var(--blue); }

/* Page-load orchestration: line draws, nodes rise in sequence */
@media (prefers-reduced-motion: no-preference){
  .flow::after { animation: pg-draw 1.5s cubic-bezier(.45,0,.15,1) .25s both; }
  .flow__step { opacity: 0; transform: translateY(9px); animation: pg-step .6s cubic-bezier(.16,.7,.2,1) both; }
  .flow__step:nth-child(1){ animation-delay: .18s; }
  .flow__step:nth-child(2){ animation-delay: .34s; }
  .flow__step:nth-child(3){ animation-delay: .50s; }
  .flow__step:nth-child(4){ animation-delay: .66s; }
  .flow__step:nth-child(5){ animation-delay: .82s; }
  .flow__step:nth-child(6){ animation-delay: .98s; }
  .flowcard__title .dot { animation: pg-pulse 2.6s ease-in-out infinite; }
}
@keyframes pg-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pg-step { to { opacity: 1; transform: none; } }
@keyframes pg-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---------- 15. Free Audit CTA band ------------------------------------ */
.audit-cta { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.8rem, 4vw, 3.2rem); box-shadow: var(--shadow-sm); }
@media (max-width: 820px){ .audit-cta { grid-template-columns: 1fr; } }
.audit-cta__list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.audit-cta__list li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; color: var(--navy); border: 1px solid var(--line); background: var(--off-white); border-radius: var(--r-md); padding: .85rem 1rem; }
.audit-cta__list span { font-family: var(--font-mono); font-size: var(--step--1); color: var(--blue); background: var(--blue-wash); border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; flex: none; }

/* ---------- 16. Final CTA + FAQ width ---------------------------------- */
.final-cta { text-align: center; max-width: 46ch; margin-inline: auto; }
.final-cta .lede { margin-top: var(--sp-3); }
.faq-wrap { max-width: 880px; }

/* ---------- 17. Inner page hero (reused) ------------------------------- */
.page-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem,4vw,3rem); }
.page-hero .h-xl { max-width: 20ch; margin: var(--sp-2) 0 var(--sp-4); }
.page-hero .lede { max-width: 58ch; }

/* ---------- 18. Free Audit page ---------------------------------------- */
.audit-layout { display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px){ .audit-layout { grid-template-columns: 1fr; } }
.audit-form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.6rem); box-shadow: var(--shadow-md); }
.audit-success { text-align: center; padding: var(--sp-4) 0; }
.audit-success__mark { width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; background: var(--blue-wash); color: var(--blue); display: grid; place-items: center; }
.audit-success__mark svg { width: 30px; height: 30px; }
.audit-side { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--nav-h) + 1rem); }
@media (max-width: 900px){ .audit-side { position: static; } }
.audit-side__list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); margin-top: var(--sp-3); }
.audit-side__list li { display: flex; gap: var(--sp-3); }
.audit-side__list span { font-family: var(--font-mono); font-size: var(--step--1); color: var(--blue); background: var(--blue-wash); border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.audit-side__list strong { display: block; color: var(--navy); margin-bottom: .15rem; }
.audit-side__list div { font-size: var(--step--1); color: var(--navy-70); }
.audit-side__note p:last-child { color: var(--navy-70); margin-top: .4rem; }

/* ---------- 19. Contact page ------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 820px){ .contact-layout { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem,4vw,2.4rem); box-shadow: var(--shadow-md); }
.contact-detail { display: grid; gap: var(--sp-4); }
.contact-detail__item { display: flex; gap: var(--sp-3); align-items: flex-start; padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }
.contact-detail__item:last-child { border-bottom: none; }
.contact-detail .chip { margin: 0; }
.contact-detail h3 { font-size: var(--step-0); font-family: var(--font-display); }
.contact-detail a, .contact-detail p { color: var(--navy-70); font-size: var(--step-0); }
.contact-detail a:hover { color: var(--blue); }
.contact-aside-cta { margin-top: var(--sp-4); }

/* ---------- 20. Audit page — conversion additions --------------------- */
/* trust chips under hero */
.trust-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.trust-chips .chip-item { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--step--1); font-weight: 600; color: var(--navy-70); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .4rem .9rem; }
.trust-chips svg { width: 15px; height: 15px; stroke: var(--blue); fill: none; stroke-width: 2.4; flex: none; }

/* client trust strip */
.trust-strip { border-block: 1px solid var(--line); background: var(--off-white-2); }
.trust-strip .container { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; padding-block: var(--sp-5); }
.trust-strip__label { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--navy-50); }
.client-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); }
.client-pill { font-weight: 600; color: var(--navy-70); font-size: var(--step-0); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .5rem 1.15rem; }

/* proof cards */
.proof-card { display: flex; flex-direction: column; }
.proof-card .frame { aspect-ratio: 16/9; margin-bottom: var(--sp-4); }
.proof-card__before { margin-top: auto; padding-top: var(--sp-3); font-size: var(--step--1); color: var(--navy-50); border-top: 1px solid var(--line); }
.proof-card__before b { color: var(--navy-70); font-weight: 600; }

/* ---------- 21. Batch 2 — solution/industry/about components ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split--reverse .split__media { order: -1; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

.check-list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.check-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.check-list .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--blue-wash); display: grid; place-items: center; flex: none; margin-top: 1px; }
.check-list .ico svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2.6; }
.check-list strong { display: block; color: var(--navy); }
.check-list p { color: var(--navy-70); font-size: var(--step--1); margin-top: .1rem; }

/* connective note between systems */
.connect-note { display: flex; gap: var(--sp-3); align-items: center; background: var(--off-white-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--step--1); color: var(--navy-70); }
.connect-note svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 2; flex: none; }
.connect-note a { color: var(--blue); font-weight: 600; }

/* labeled problem/solution two-up */
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width: 720px){ .ps-grid { grid-template-columns: 1fr; } }
.ps-card { border-radius: var(--r-lg); padding: clamp(1.3rem,3vw,1.9rem); border: 1px solid var(--line); }
.ps-card--problem { background: var(--surface); }
.ps-card--result  { background: var(--navy); color: #E6E9EF; border-color: var(--navy); }
.ps-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.ps-card--result h3 { color: #fff; }
.ps-card ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.ps-card li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step-0); }
.ps-card li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-top: .55em; flex: none; }
.ps-card--problem li::before { background: var(--line-strong); }
.ps-card--result li::before { background: var(--blue-light); }

/* ---------- 22. Dashboard showcase (below hero) ----------------------- */
.dash-media img { width: 100%; height: auto; display: block; border-radius: var(--r-md);
  filter: drop-shadow(0 32px 54px rgba(7,13,26,.20)); animation: pg-float 7.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .dash-media img { animation: none; } }

/* ---------- 23. Homepage restructure (sections 3 & 4) ----------------- */
/* Section 3 — dashboard stage + floating metric cards */
.dash-stage { position: relative; }
.metric-row { display: contents; }
.metric-card { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem;
  box-shadow: 0 16px 34px -16px rgba(7,13,26,.24); font-size: .8rem; font-weight: 700; color: var(--navy);
  white-space: nowrap; animation: pg-float 6s ease-in-out infinite; }
.metric-card .m-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--blue-wash); display: grid; place-items: center; color: var(--blue); flex: none; }
.metric-card .m-ico svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.metric-card .m-up { color: #16A34A; font-weight: 700; font-size: .72rem; }
.mc-1 { top: 2%;  left: -3%;  animation-delay: 0s; }
.mc-2 { top: 30%; right: -5%; animation-delay: .6s; }
.mc-3 { bottom: 28%; left: -6%; animation-delay: 1.2s; }
.mc-4 { bottom: 3%; right: -1%; animation-delay: 1.8s; }
.mc-5 { top: -4%; right: 20%; animation-delay: 2.4s; }
@media (max-width: 860px){
  .metric-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--sp-4); }
  .metric-card { position: static; animation: none; box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce){ .metric-card { animation: none; } }

/* Section 4 — industry chips + locations */
.ind-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.ind-chip { display: inline-flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: .7rem 1.2rem; font-weight: 600; color: var(--navy); font-size: var(--step-0);
  box-shadow: var(--shadow-sm); transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.ind-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
a.ind-chip:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.ind-locations { margin-top: var(--sp-5); font-size: var(--step-0); color: var(--navy-50); }
.ind-locations strong { color: var(--navy-70); font-weight: 600; }

/* ---------- 24. Case study real media ------------------------------- */
.case-shot { width: 100%; height: auto; display: block; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.case-logo { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem,3vw,1.6rem); display: grid; place-items: center; box-shadow: var(--shadow-sm); aspect-ratio: 16/10; }
.case-logo img { max-width: 92%; max-height: 200px; width: auto; height: auto; object-fit: contain; }
.case-thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top center; border-radius: var(--r-md); border: 1px solid var(--line); display: block; }

/* ---------- 25. Assets integration (tags as links, social, founder) --- */
a.float-tag { text-decoration: none; cursor: pointer; color: var(--navy); }
.founder-img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.footer-social { display: flex; gap: .6rem; margin-top: var(--sp-4); }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #C4CAD4; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.footer-social a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.contact-social { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.contact-social a { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 600; color: var(--navy-70); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .5rem .9rem; transition: color .2s, border-color .2s; }
.contact-social a:hover { color: var(--blue); border-color: var(--blue); }
.contact-social svg { width: 15px; height: 15px; }

/* ---------- 26. Cookie consent banner (brand colors) ------------------ */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80; max-width: 520px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.cookie-banner__text { font-size: var(--step--1); color: var(--navy-70); margin: 0; line-height: 1.5; }
.cookie-banner__text a { color: var(--blue); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: .6rem; }
.cookie-banner__actions .btn { flex: 1; justify-content: center; }
.cookie-banner[hidden] { display: none; }
@media (min-width: 560px){ .cookie-banner { left: auto; right: 1.25rem; bottom: 1.25rem; margin-inline: 0; } .cookie-banner__actions .btn { flex: 0 0 auto; } }
@media (max-width: 900px){ .cookie-banner { bottom: calc(4.9rem + env(safe-area-inset-bottom)); } }

/* ---------- 27. v9 correction pass ------------------------------------ */
/* Official brand logo (header + footer) */
.brand-logo { height: 46px; width: auto; display: block; }
.site-header .brand { gap: 0; }
.footer-brand .brand-logo { height: 40px; margin-bottom: var(--sp-3); }
@media (max-width: 560px){ .site-header .brand-logo { height: 40px; } }

/* Fix duplicate hero CTA — only the top-right header CTA shows on desktop */
@media (min-width: 901px){ .nav__menu > .btn { display: none; } }

/* Image fitting consistency */
.case-logo img { object-fit: contain; }
.case-thumb { object-fit: cover; object-position: top center; }
.case-shot { object-fit: contain; }
.founder-img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; }

/* Hero map message (subtle, under the city) */
.hero-note { max-width: 640px; margin: clamp(1rem, 2.5vw, 1.75rem) auto 0; text-align: center;
  font-size: var(--step--1); color: var(--navy-50); padding-inline: 1rem; line-height: 1.5; }
.hero-note a { color: var(--blue); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.hero-note a:hover { border-color: var(--blue); }

/* Founder caption */
.founder-cap { margin-top: var(--sp-3); font-size: var(--step--1); }
.founder-cap strong { display: block; color: var(--navy); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.founder-cap span { color: var(--navy-50); }
.founder-cap::before { content: ""; display: block; width: 26px; height: 2px; background: var(--blue); margin-bottom: var(--sp-3); }

/* ---------- 28. Final polish (cards, labels) -------------------------- */
.card { display: flex; flex-direction: column; }
.card > .frame, .card > .case-thumb, .card > .case-logo { margin-bottom: var(--sp-3); }
.card .badge { align-self: flex-start; }
/* push case-card CTA to the bottom for uniform alignment */
.card--hover .badge:last-child { margin-top: auto; }

/* ---------- 29. Services & pricing page ------------------------------- */
.reco { margin-top: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem,3vw,1.75rem); box-shadow: var(--shadow-sm); }
.reco__title { font-weight: 700; color: var(--navy); margin-bottom: var(--sp-3); }
.reco__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: var(--step--1); }
.reco__row:first-of-type { border-top: none; }
.reco__sit { color: var(--navy-70); }
.reco__arrow { color: var(--blue); font-weight: 700; }
.reco__svc { color: var(--navy); font-weight: 600; text-align: right; }
.svc-cat { margin-bottom: var(--sp-5); }
.svc-cat p { color: var(--navy-50); margin-top: var(--sp-2); }
.svc-grid { gap: var(--sp-4); }
.svc-card { padding: clamp(1.25rem,2.5vw,1.6rem); }
.svc-card__top { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); }
.svc-card h3 { font-size: var(--step-1); }
.svc-price { color: var(--blue); font-weight: 700; font-family: var(--font-display); margin-top: .35rem; }
.svc-best { font-size: var(--step--1); color: var(--navy-50); margin-bottom: var(--sp-3); }
.svc-outcome { color: var(--navy-70); margin-bottom: var(--sp-3); }
.svc-incl { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin: 0 0 var(--sp-4); }
.svc-incl li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--step--1); color: var(--navy-70); }
.svc-incl .ico { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: 1px; }
.svc-incl .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.svc-time { margin-top: auto; align-self: flex-start; font-size: .72rem; font-weight: 600; color: var(--navy-50); background: var(--off-white-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .3rem .7rem; }
@media (max-width: 560px){ .reco__row { grid-template-columns: 1fr; gap: .15rem; text-align: left; } .reco__svc, .reco__arrow { text-align: left; } .reco__arrow { display: none; } }
.svc-excl { font-size: var(--step--2); color: var(--navy-45, #6b7280); line-height: 1.5; margin: 0 0 var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--line); }
.svc-excl span { font-weight: 600; color: var(--navy-50); }

/* ================= 30. Interactive hero: regions, day/night, cards ===== */
.v6hero{ background: var(--hero-bg); transition: background .55s ease, color .35s ease; }

/* --- Controls (region pills + day/night toggle) --- */
.hero-controls{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:22px; position:relative; z-index:6; }
.region-pills{ display:inline-flex; gap:6px; padding:5px; background:rgba(7,13,26,.04); border:1px solid var(--border,#E5E7EB); border-radius:999px; }
.region-pill{ appearance:none; border:0; background:transparent; cursor:pointer; font:600 13px/1 var(--font-display); letter-spacing:-.01em; color:var(--navy-60,rgba(7,13,26,.6)); padding:9px 15px; border-radius:999px; transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
.region-pill:hover{ color:var(--navy); }
.region-pill.is-active{ background:#fff; color:var(--blue); box-shadow:0 2px 8px rgba(7,13,26,.08); }
.map-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--border,#E5E7EB); background:#fff; color:var(--navy-60,rgba(7,13,26,.6)); border-radius:999px; padding:8px 14px 8px 11px; font:600 12.5px/1 var(--font-display); letter-spacing:.02em; transition:all .25s ease; }
.map-toggle:hover{ color:var(--navy); border-color:rgba(37,99,235,.4); }
.map-toggle__ico{ width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FEF3C7, #FBBF24); box-shadow:0 0 0 2px rgba(251,191,36,.18); transition:all .3s ease; }

/* --- Region-driven markers (desktop) --- */
.hero-markers{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.tag-pos-open{ left:50%; top:40%; transform:translateX(-50%); --d:.15s; --fd:0s; --sd:0s; }
.tag-pos-open:hover{ transform:translateX(-50%) translateY(-4px) !important; }
.float-tag--open{ border-style:dashed; border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.04); }
.float-tag--open .tag-status{ color:var(--blue); }

/* --- Mobile business cards (hidden on desktop) --- */
.hero-cards{ display:none; }
.hero-card{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border,#E5E7EB); border-radius:14px; padding:13px 14px; box-shadow:0 6px 18px rgba(7,13,26,.05); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hero-card:active{ transform:scale(.99); }
.hero-card__ico{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--blue-wash,#EEF3FE); color:var(--blue); }
.hero-card__ico svg{ width:19px; height:19px; }
.hero-card__body{ flex:1; min-width:0; }
.hero-card__name{ font:700 14px/1.2 var(--font-display); color:var(--navy); }
.hero-card__meta{ font-size:12px; color:var(--navy-50,rgba(7,13,26,.5)); margin-top:2px; }
.hero-card__status{ font-size:11px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:5px; margin-top:4px; }
.hero-card__status .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.hero-card__arrow{ flex:none; color:var(--navy-45,rgba(7,13,26,.4)); }
.hero-card--open{ border-style:dashed; border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.03); }

/* --- NIGHT MODE (hero only) --- */
.v6hero[data-map-theme="night"]{ --hero-bg: radial-gradient(120% 90% at 50% 22%, #0E1B36 0%, #070D1A 72%); color:#EAF1FF; }
.v6hero[data-map-theme="night"] h1{ color:#F2F6FF; }
.v6hero[data-map-theme="night"] h1 .accent{ color:#7CB3FF; }
.v6hero[data-map-theme="night"] .region-pills{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.v6hero[data-map-theme="night"] .region-pill{ color:rgba(234,241,255,.65); }
.v6hero[data-map-theme="night"] .region-pill:hover{ color:#fff; }
.v6hero[data-map-theme="night"] .region-pill.is-active{ background:rgba(37,99,235,.9); color:#fff; box-shadow:0 2px 12px rgba(37,99,235,.5); }
.v6hero[data-map-theme="night"] .map-toggle{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(234,241,255,.75); }
.v6hero[data-map-theme="night"] .map-toggle__ico{ background:radial-gradient(circle at 35% 35%, #DBEAFE, #60A5FA); box-shadow:0 0 10px rgba(96,165,250,.6); }
.v6hero[data-map-theme="night"] .img-city img{ filter:brightness(.9) contrast(1.06) saturate(1.05) drop-shadow(0 10px 40px rgba(56,130,246,.28)); }
.v6hero[data-map-theme="night"] .glow{ background:radial-gradient(circle, rgba(56,130,246,.32), transparent 62%); opacity:1; }
.v6hero[data-map-theme="night"] .ping::before, .v6hero[data-map-theme="night"] .ping::after{ border-color:#7CB3FF; }
.v6hero[data-map-theme="night"] .float-tag{ background:rgba(14,24,46,.72); border-color:rgba(124,179,255,.22); color:#EAF1FF; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 8px 26px rgba(3,8,20,.5); }
.v6hero[data-map-theme="night"] .tag-name{ color:#F2F6FF; }
.v6hero[data-map-theme="night"] .hero-note{ color:rgba(234,241,255,.66); }
.v6hero[data-map-theme="night"] .hero-note a{ color:#7CB3FF; }
.v6hero[data-map-theme="night"] .hero-card{ background:rgba(14,24,46,.72); border-color:rgba(124,179,255,.2); color:#EAF1FF; }
.v6hero[data-map-theme="night"] .hero-card__name{ color:#F2F6FF; }
.v6hero[data-map-theme="night"] .hero-card__meta{ color:rgba(234,241,255,.55); }
.v6hero[data-map-theme="night"] .hero-card__ico{ background:rgba(56,130,246,.18); color:#7CB3FF; }

/* --- Mobile: markers become cards under the city --- */
@media (max-width:767px){
  .hero-controls{ margin-top:16px; gap:10px; }
  .region-pills{ max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .region-pills::-webkit-scrollbar{ display:none; }
  .region-pill{ padding:8px 13px; white-space:nowrap; }
  .hero-markers{ display:none !important; }
  .hero-cards{ display:grid; gap:10px; max-width:520px; margin:16px auto 0; padding:0 16px; }
}
@media (prefers-reduced-motion: reduce){
  .v6hero, .region-pill, .map-toggle, .map-toggle__ico, .hero-card{ transition:none; }
}

/* ================= 31. Find your starting point selector ============== */
.finder{ margin-top:var(--sp-6); background:var(--surface,#fff); border:1px solid var(--line,#E5E7EB); border-radius:var(--r-lg); padding:clamp(1.25rem,3vw,2rem); box-shadow:var(--shadow-sm); max-width:900px; margin-inline:auto; }
.finder__options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.finder__opt{ appearance:none; text-align:left; cursor:pointer; background:var(--off-white-2,#F4F6F9); border:1px solid var(--line,#E5E7EB); border-radius:12px; padding:14px 16px; font:600 14.5px/1.35 var(--font-display); color:var(--navy); transition:border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease; }
.finder__opt:hover{ border-color:rgba(37,99,235,.45); background:#fff; box-shadow:0 6px 18px rgba(37,99,235,.08); }
.finder__opt.is-active{ border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.finder__result{ margin-top:var(--sp-4); border-top:1px solid var(--line,#E5E7EB); padding-top:var(--sp-4); }
.finder__result[hidden]{ display:none; }
.finder__rec-label{ font:600 12px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.finder__rec-name{ font:700 clamp(1.15rem,2.4vw,1.5rem)/1.15 var(--font-display); color:var(--navy); margin-top:.4rem; letter-spacing:-.02em; }
.finder__rec-price{ color:var(--blue); font-weight:700; font-family:var(--font-display); margin-top:.25rem; }
.finder__rec-why{ color:var(--navy-70,rgba(7,13,26,.7)); margin-top:.6rem; max-width:60ch; }
.finder__rec-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--sp-4); }
@media (max-width:560px){ .finder__options{ grid-template-columns:1fr; } }

/* ================= 32. Depth polish (subtle) ========================== */
.card{ box-shadow: var(--shadow-sm); }
.surface-alt{ border-top:1px solid rgba(7,13,26,.05); border-bottom:1px solid rgba(7,13,26,.05); }
.case-thumb, .case-shot{ transition: transform .4s cubic-bezier(.2,.6,.2,1); }
.card--hover:hover .case-thumb{ transform: scale(1.03); }

/* ================= 33. Commercial redesign (v18) ====================== */
/* Brand: blue gradient icon + wordmark */
.brand-icon{ width:40px; height:40px; flex:none; display:block; }
.brand-word{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.025em; color:var(--navy); }
.site-header .brand{ gap:.55rem; }
.footer-brand .brand-word{ color:#fff; }
@media (max-width:560px){ .brand-icon{ width:38px; height:38px; } .brand-word{ font-size:1.22rem; } }

.h-sm{ font-size:var(--step-1); letter-spacing:-.02em; line-height:1.2; }
.btn--lg{ padding:.95rem 1.55rem; font-size:1.02rem; }

/* --- Commercial hero --- */
.hero{ position:relative; overflow:hidden; padding:clamp(2.4rem,6vw,4.75rem) 0 clamp(3rem,7vw,5.25rem);
  background:
    radial-gradient(130% 95% at 88% -10%, rgba(37,99,235,.12), transparent 55%),
    radial-gradient(90% 70% at -5% 15%, rgba(59,130,246,.08), transparent 52%),
    var(--off-white); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__text .eyebrow{ margin-bottom:var(--sp-3); }
.hero h1{ font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.035em; line-height:1.08; color:var(--navy); }
.hero h1 .accent{ color:var(--blue); }
.hero .lede{ margin-top:var(--sp-4); max-width:46ch; }
.hero .btn-row{ margin-top:var(--sp-5); flex-wrap:wrap; }
.hero__trust{ list-style:none; padding:0; margin:var(--sp-5) 0 0; display:flex; flex-wrap:wrap; gap:.55rem 1.25rem; }
.hero__trust li{ display:flex; align-items:center; gap:.5rem; font-size:var(--step--1); color:var(--navy-70); font-weight:600; }
.hero__trust li svg{ width:16px; height:16px; color:var(--blue); flex:none; }

.hero-stage{ position:relative; aspect-ratio:1/.86; }
.hero-stage__aura{ position:absolute; inset:4% 2%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 60% 42%, rgba(37,99,235,.20), transparent 62%); filter:blur(14px); }
.mock-browser{ position:absolute; left:0; top:5%; width:86%; margin:0; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); z-index:2; }
.mock-browser__bar{ height:30px; background:var(--off-white-2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 13px; }
.mock-browser__bar span{ width:9px; height:9px; border-radius:50%; background:#D5D9E0; }
.mock-browser img{ display:block; width:100%; height:auto; }
.mock-phone{ position:absolute; right:-1%; bottom:-2%; width:29%; margin:0; z-index:3; filter:drop-shadow(0 18px 30px rgba(7,13,26,.2)); }
.mock-phone img{ width:100%; height:auto; transform:rotate(4deg); }
.hero-metric{ position:absolute; z-index:4; display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; padding:8px 12px 8px 9px; box-shadow:0 8px 22px rgba(7,13,26,.09); animation:floaty 6s ease-in-out infinite; }
.hero-metric__ico{ width:30px; height:30px; border-radius:8px; background:var(--blue-wash); color:var(--blue); display:grid; place-items:center; flex:none; }
.hero-metric__ico svg{ width:16px; height:16px; }
.hero-metric__t{ display:flex; flex-direction:column; line-height:1.15; }
.hero-metric__t strong{ font:700 12.5px/1.1 var(--font-display); color:var(--navy); }
.hero-metric__t em{ font-style:normal; font-size:10.5px; color:var(--navy-50); margin-top:1px; }
.hm-1{ left:-4%; top:0; } .hm-2{ right:-3%; top:18%; animation-delay:1s; }
.hm-3{ right:4%; top:52%; animation-delay:2s; } .hm-4{ left:-6%; top:50%; animation-delay:1.4s; }
.hm-5{ left:8%; bottom:-2%; animation-delay:.6s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:clamp(2rem,6vw,3rem); }
  .hero__text{ text-align:center; }
  .hero .lede{ margin-inline:auto; }
  .hero .btn-row, .hero__trust{ justify-content:center; }
  .hero-stage{ max-width:440px; margin:0 auto; aspect-ratio:1/.9; }
  .hm-2,.hm-4{ display:none; }
}
@media (max-width:560px){
  .mock-phone,.hm-3{ display:none; }
  .hm-1{ left:0; top:-2%; } .hm-5{ left:2%; bottom:0; }
}
@media (prefers-reduced-motion: reduce){ .hero-metric{ animation:none; } }

/* --- Meet the founder --- */
.founder-block{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,5vw,3.5rem); align-items:center; }
.founder-block__media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); background:var(--off-white-2); }
.founder-block__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center top; display:block; }
@media (max-width:820px){ .founder-block{ grid-template-columns:1fr; text-align:center; } .founder-block__media{ max-width:340px; margin-inline:auto; } .founder-block .btn-row,.founder-block .founder-cap{ justify-content:center; } .founder-block .founder-cap::before{ margin-inline:auto; } }

/* --- Pricing starting points --- */
.price-grid{ align-items:stretch; }
.price-card{ display:flex; flex-direction:column; position:relative; }
.price-card__name{ font:700 1.2rem/1.2 var(--font-display); color:var(--navy); letter-spacing:-.02em; }
.price-card__price{ color:var(--blue); font-weight:800; font-family:var(--font-display); font-size:1.15rem; margin-top:.3rem; }
.price-card__note{ color:var(--navy-70); margin:.6rem 0 var(--sp-3); font-size:var(--step--1); }
.price-card__incl{ list-style:none; padding:0; margin:0 0 var(--sp-4); display:flex; flex-direction:column; gap:.5rem; }
.price-card__incl li{ display:flex; gap:.5rem; align-items:flex-start; font-size:var(--step--1); color:var(--navy-70); }
.price-card__incl .ico{ width:16px; height:16px; color:var(--blue); flex:none; margin-top:2px; }
.price-card__incl .ico svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
.price-card__cta{ margin-top:auto; justify-content:center; }
.price-card--feat{ border-color:var(--blue); box-shadow:0 20px 50px -24px rgba(37,99,235,.45); }
.price-card__badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff; font:700 11px/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px; white-space:nowrap; }

/* --- Navy audit CTA variant --- */
.surface-navy .audit-cta{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); box-shadow:none; }
.surface-navy .audit-cta__list li{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#EAECEF; }
.surface-navy .audit-cta__list li span{ color:var(--blue-light); }
.hero__visual{ position:relative; }

/* ================= 34. Hero brand watermark (v19) ===================== */
.hero__grid{ position:relative; z-index:2; }
.hero__mark{ position:absolute; z-index:0; top:50%; left:55%; transform:translate(-50%,-50%);
  width:min(700px,58%); height:auto; opacity:.08; pointer-events:none; user-select:none;
  filter:drop-shadow(0 24px 70px rgba(37,99,235,.45)); animation:mark-float 12s ease-in-out infinite; }
@keyframes mark-float{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,calc(-50% - 10px)) } }
@media (max-width:900px){
  .hero__mark{ left:50%; top:46%; width:min(360px,70%); opacity:.06; }
}
@media (max-width:560px){
  .hero__mark{ width:min(240px,62%); opacity:.05; top:44%; }
}
@media (prefers-reduced-motion: reduce){ .hero__mark{ animation:none; } }

/* ================= 35. v20 polish ===================================== */
.price-card__badge--soft{ background:var(--blue-wash); color:var(--blue); box-shadow:0 0 0 1px rgba(37,99,235,.18) inset; }
.ind-chip{ display:inline-flex; align-items:center; gap:.5rem; }
.ind-chip svg{ width:18px; height:18px; color:var(--blue); flex:none; }
.case-card{ display:flex; flex-direction:column; }
.case-card__media{ display:block; border-radius:12px; overflow:hidden; }
.case-card__ind{ margin-top:var(--sp-3); font-size:12.5px; font-weight:600; color:var(--blue); }
.case-card__name{ margin-top:.2rem; font-size:var(--step-1); letter-spacing:-.02em; }
.case-card__name a{ color:var(--navy); }
.case-card__svc{ margin:.4rem 0 var(--sp-3); font-size:var(--step--1); color:var(--navy-70); }
.case-card__links{ margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.case-card__read{ font-size:14px; font-weight:700; color:var(--navy); }
.case-card__read:hover{ color:var(--blue); }
.case-card__ext{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:600; color:var(--blue); }
.case-card__ext svg{ width:14px; height:14px; }
.audit-cta__meta{ margin-top:var(--sp-3); font-size:var(--step--1); color:var(--navy-70); }
.surface-navy .audit-cta__meta{ color:#B7BEC9; }

/* ================= 36. v20 QA fixes =================================== */
.price-card{ overflow:visible; }
@media (max-width:560px){
  .hero__trust{ display:none; }
  .hero .lede{ font-size:1.05rem; }
  .ind-cloud{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ind-cloud .ind-chip{ justify-content:flex-start; min-width:0; white-space:normal; }
}
@media (min-width:901px){ .hm-3{ right:22%; top:60%; } }
.founder-block__text{ min-width:0; }

/* ================= 37. Hero: growth systems (v21) ===================== */
.hero--sys{ background:#FAFBFD; padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,6rem); }
.hero--sys::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 60% at 0% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%); }
.hero__diag-soft, .hero__diag{ position:absolute; inset:0; pointer-events:none; }
.hero__diag-soft{ clip-path:polygon(100% 4%, 100% 100%, 34% 100%);
  background:linear-gradient(160deg, rgba(56,189,248,.22), rgba(37,99,235,.08)); }
.hero__diag{ clip-path:polygon(100% 22%, 100% 100%, 52% 100%);
  background:linear-gradient(155deg, #38BDF8 0%, #3B82F6 26%, #1D4ED8 68%, #0B2A8A 100%); }
.hero__diag::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.2), rgba(255,255,255,0) 40%); }
.hero--sys .hero__mark{ left:70%; top:42%; width:min(540px,42%); opacity:.09; z-index:1; }
.hero--sys h1{ font-size:clamp(36px,4.7vw,64px); line-height:1.02; letter-spacing:-.045em; font-weight:800; color:var(--navy); }
.hero--sys .lede{ margin-top:var(--sp-4); max-width:38ch; font-size:clamp(1.02rem,1.25vw,1.16rem); color:#4A5468; }
.hero__cta{ margin-top:var(--sp-5); }
.hero__proof{ list-style:none; padding:0; margin:var(--sp-5) 0 0; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.hero__proof li{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.92rem; color:var(--navy); }
.hero__proof svg{ width:18px; height:18px; padding:3px; border-radius:50%; background:var(--blue); color:#fff; flex:none; }
.hero--sys .hero__visual{ min-height:470px; }

/* coded UI: dashboard card */
.ui-dash{ background:#fff; border:1px solid #E3E8F1; border-radius:18px; padding:18px 20px 20px;
  box-shadow:0 30px 60px -28px rgba(11,26,74,.38), 0 2px 6px rgba(7,13,26,.04); }
.hero--sys .ui-dash{ position:absolute; left:0; top:4%; width:72%; z-index:2; }
.ui-dash__head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ui-dash__title{ font:700 14px/1 var(--font-display); color:var(--navy); letter-spacing:-.01em; }
.ui-dash__tag{ font-size:11px; font-weight:600; color:var(--blue); background:var(--blue-wash); padding:4px 9px; border-radius:999px; }
.ui-dash__chart{ display:block; width:100%; height:120px; margin:14px 0 8px; }
.ui-dash__rows{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ui-dash__rows li{ display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:12px; font-size:12.5px; font-weight:600; color:#4A5468; }
.ui-dash__rows i{ display:block; height:8px; border-radius:999px; background:#EEF2F9; position:relative; overflow:hidden; }
.ui-dash__rows i::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:var(--w); border-radius:inherit; background:linear-gradient(90deg,#3B82F6,#1D4ED8); }
.ui-dash--lg{ padding:24px 26px 26px; }
.ui-dash--lg .ui-dash__chart{ height:190px; }
.dash-media--ui{ position:relative; z-index:1; }

/* coded UI: phone */
.ui-phone{ position:absolute; right:2%; bottom:-4%; width:200px; aspect-ratio:178/372; border-radius:36px; background:#0B1222; padding:7px;
  transform:rotate(-6deg); z-index:3; box-shadow:0 34px 60px -20px rgba(7,13,26,.6), 0 0 0 1px rgba(255,255,255,.08) inset; }
.ui-phone__screen{ height:100%; border-radius:30px; background:#F6F8FC; overflow:hidden; position:relative; }
.ui-phone__island{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:58px; height:17px; border-radius:10px; background:#0B1222; }
.ui-phone__search{ margin:34px 11px 0; height:29px; border-radius:15px; background:#fff; border:1px solid #E3E8F1; display:flex; align-items:center; gap:7px; padding:0 10px; font-size:9.5px; font-weight:500; color:#6B7488; }
.ui-phone__search b{ width:9px; height:9px; border-radius:50%; border:1.5px solid #9AA3B5; }
.ui-phone__listing{ margin:10px 11px 0; background:#fff; border:1px solid #E3E8F1; border-radius:13px; padding:11px; }
.ui-phone__map{ height:52px; border-radius:9px; margin-bottom:9px; background:linear-gradient(135deg,#E7EEFB,#DCE6F8); position:relative; }
.ui-phone__map::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-9px 0 0 -5px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--blue); }
.ui-phone__name{ font:800 12.5px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--navy); }
.ui-phone__meta{ font-size:9px; font-weight:500; color:#6B7488; margin-top:2px; }
.ui-phone__acts{ display:flex; gap:5px; margin-top:9px; }
.ui-phone__acts span{ flex:1; height:22px; border-radius:11px; border:1px solid #E3E8F1; display:grid; place-items:center; font-size:8px; font-weight:700; color:#1D4ED8; }
.ui-phone__acts span:first-child{ background:var(--blue); border-color:var(--blue); color:#fff; }
.ui-phone__toast{ margin:10px 11px 0; background:var(--navy); color:#fff; border-radius:12px; padding:10px 11px; display:flex; gap:8px; align-items:center; }
.ui-phone__toast i{ width:8px; height:8px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,.2); flex:none; }
.ui-phone__toast b{ display:block; font-size:9.5px; font-weight:700; }
.ui-phone__toast em{ font-style:normal; font-size:8.5px; color:#AAB3C5; }

@media (max-width:900px){
  .hero--sys .hero__text{ text-align:left; }
  .hero--sys .lede{ margin-inline:0; }
  .hero--sys .hero__visual{ min-height:420px; margin-top:var(--sp-5); }
  .hero--sys .ui-dash{ width:68%; }
  .hero__diag{ clip-path:polygon(100% 52%, 100% 100%, 20% 100%); }
  .hero__diag-soft{ clip-path:polygon(100% 42%, 100% 100%, 0 100%); }
  .hero--sys .hero__mark{ left:68%; top:44%; width:min(380px,64%); opacity:.08; }
}
@media (max-width:560px){
  .hero--sys{ padding-bottom:0; }
  .hero--sys .lede{ font-size:1rem; }
  .hero--sys .hero__visual{ min-height:300px; margin-top:var(--sp-4); }
  .hero--sys .ui-dash{ display:none; }
  .ui-phone{ right:8%; bottom:-70px; width:190px; transform:rotate(-7deg); }
  .hero__diag{ clip-path:polygon(100% 60%, 100% 100%, 14% 100%); }
  .hero__diag-soft{ clip-path:polygon(100% 50%, 100% 100%, 0 100%); }
  .hero--sys .hero__mark{ left:64%; top:40%; width:300px; opacity:.08; }
}

/* ================= 38. Built for real local businesses ================ */
.logos{ padding:clamp(2.25rem,4vw,3.25rem) 0; background:#fff; border-bottom:1px solid var(--line); }
.logos__inner{ display:grid; gap:var(--sp-4); }
.logos__title{ font:700 1.05rem/1.3 var(--font-display); color:var(--navy); text-align:center; letter-spacing:-.015em; }
.logos__row{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.logo-tile{ position:relative; display:block; aspect-ratio:2/1; background:var(--tile); border:1px solid var(--line); border-radius:14px; overflow:hidden; padding:6px;
  transition:transform .25s ease, box-shadow .25s ease; }
.logo-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(7,13,26,.35); }
.logo-tile:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.logo-tile img{ position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; display:block; }
@media (max-width:620px){ .logos__row{ grid-template-columns:1fr 1fr; gap:10px; } }
@media (prefers-reduced-motion: reduce){ .logo-tile{ transition:none; } }

/* ================= 39. Brand blocks & visual system (v22) ============= */
/* reusable: diagonal + watermark inside any .sec-brand section */
.sec-brand{ position:relative; overflow:hidden; isolation:isolate; }
.sec-brand > .container{ position:relative; z-index:2; }
.sec-diag{ position:absolute; inset:0; z-index:0; pointer-events:none;
  clip-path:polygon(100% 0, 100% 100%, 58% 100%);
  background:linear-gradient(165deg, rgba(59,130,246,.30) 0%, rgba(37,99,235,.06) 70%); }
.sec-mark{ position:absolute; z-index:1; pointer-events:none; user-select:none;
  width:min(460px,55vw); right:-4%; top:50%; transform:translateY(-50%); opacity:.07; }
@media (max-width:620px){ .sec-diag{ clip-path:polygon(100% 30%, 100% 100%, 30% 100%); } .sec-mark{ width:260px; right:-18%; opacity:.06; } }

/* electric blue block */
.surface-blue{ background:linear-gradient(140deg,#1D4ED8 0%,#2563EB 48%,#3B82F6 100%); color:#fff; }
.surface-blue .sec-diag{ background:linear-gradient(165deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 72%); }
.surface-blue h2{ color:#fff; }
.surface-blue .lede{ color:rgba(255,255,255,.86); }
.surface-blue .eyebrow{ color:#fff; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.surface-blue .eyebrow::before{ background:#fff; }
.surface-blue .btn:not(.btn--ghost){ background:#fff; color:#1D4ED8; border-color:#fff; box-shadow:0 14px 30px -12px rgba(7,13,26,.5); }
.surface-blue .btn:not(.btn--ghost):hover{ box-shadow:0 18px 36px -12px rgba(7,13,26,.6); }

/* soft blue tint block */
.surface-tint{ background:linear-gradient(180deg,#F3F7FF 0%,#EAF1FD 100%); }
.surface-tint .sec-diag{ background:linear-gradient(165deg, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 70%); }

/* navy: stronger heading contrast */
.surface-navy h2, .card--glass h3{ color:#fff; }

/* problem: glass cards on navy */
.card--glass{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow:none; color:#C9D1DE; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.card--glass p{ color:#B7BEC9; }
.card--glass .chip{ background:linear-gradient(135deg,#3B82F6,#1D4ED8); box-shadow:0 10px 24px -10px rgba(59,130,246,.7); }
.card--glass .chip svg, .chip--solid svg{ stroke:#fff; }

/* what we build: pillar cards */
.chip--solid{ background:linear-gradient(135deg,#3B82F6,#1D4ED8); box-shadow:0 10px 22px -10px rgba(37,99,235,.65); }
.pillar{ border-color:#DCE6F8; }
.pillar::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#1D4ED8,#38BDF8); }
.pillar h3{ font-size:var(--step-1); letter-spacing:-.02em; }

/* finder: app-like panel */
.finder{ border:1px solid transparent; border-radius:20px;
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#BFD4FB,#2563EB) border-box;
  box-shadow:0 30px 60px -32px rgba(37,99,235,.45); }
.finder__opt{ display:flex; align-items:center; gap:12px; background:#F6F9FF; }
.finder__ico{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px; background:var(--blue-wash); color:var(--blue); transition:background .2s ease, color .2s ease; }
.finder__ico svg{ width:20px; height:20px; }
.finder__opt.is-active .finder__ico{ background:var(--blue); color:#fff; }
.finder__result{ border-top:0; margin-top:var(--sp-4); padding:clamp(1.1rem,2.5vw,1.6rem); border-radius:16px;
  background:linear-gradient(135deg,#EEF3FE 0%,#F8FAFF 100%); border:1px solid #D6E2FB; }

/* industries: polished chips */
.ind-chip{ border:1px solid #DCE6F8; border-radius:14px; padding:.7rem 1rem .7rem .7rem; font-weight:600; box-shadow:0 6px 16px -12px rgba(11,26,74,.35); }
.ind-chip::before{ display:none; }
.ind-chip svg{ width:30px; height:30px; padding:6px; border-radius:9px; background:var(--blue-wash); }

/* case studies: client logo badge on screenshot */
.case-card__media{ position:relative; }
.case-card__logo{ position:absolute; left:12px; bottom:12px; width:86px; height:44px; border-radius:10px; background:var(--tile);
  border:2px solid #fff; box-shadow:0 8px 18px -8px rgba(7,13,26,.5); overflow:hidden; }
.case-card__logo img{ position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; }

/* founder: framed photo + commitments card */
.founder-block__media{ box-shadow:14px 14px 0 0 var(--blue), var(--shadow-lg); }
.founder-points{ list-style:none; margin:var(--sp-4) 0; padding:clamp(1rem,2.4vw,1.4rem); border-radius:16px; background:var(--navy);
  display:grid; gap:.7rem; text-align:left; }
.founder-points li{ display:flex; gap:.6rem; align-items:flex-start; color:#E6EBF3; font-weight:600; font-size:var(--step--1); }
.founder-points svg{ width:18px; height:18px; padding:3px; border-radius:50%; background:var(--blue); color:#fff; flex:none; margin-top:1px; }
@media (max-width:820px){ .founder-block__media{ box-shadow:10px 10px 0 0 var(--blue), var(--shadow-lg); } }

/* pricing on navy */
#pricing-highlight .price-card{ border-color:rgba(255,255,255,.14); }
#pricing-highlight .price-card--feat{ border-color:#60A5FA; box-shadow:0 0 0 1px #60A5FA, 0 30px 60px -28px rgba(59,130,246,.8); }

/* audit on electric blue */
.surface-blue .audit-cta{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); box-shadow:none; }
.surface-blue .audit-cta__list li{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); color:#fff; }
.surface-blue .audit-cta__list li span{ color:#1D4ED8; background:#fff; }
.surface-blue .audit-cta__meta{ color:rgba(255,255,255,.82); }

/* footer: branded, complete */
.site-footer{ border-top:4px solid transparent; border-image:linear-gradient(90deg,#1D4ED8,#38BDF8) 1; }
.footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; }
.footer-col h4{ font-family:var(--font-display); font-weight:700; letter-spacing:.08em; color:#8E99AD; }
.footer-areas{ font-size:var(--step--1); color:#8E99AD; line-height:1.5; }
@media (max-width:1020px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } .footer-brand{ grid-column:1 / -1; } }
@media (max-width:620px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:380px){ .footer-grid{ grid-template-columns:1fr; } }

/* hero: bolder diagonal on desktop */
@media (min-width:901px){ .hero__diag{ clip-path:polygon(100% 12%, 100% 100%, 46% 100%); } }
/* system section: metric labels as a clean row under the dashboard */
#system .metric-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
#system .metric-card{ position:static; animation:none; box-shadow:0 10px 22px -14px rgba(7,13,26,.55); }
#system h2 + .lede{ margin-top:var(--sp-4); }

/* ================= 40. v23 homepage components ======================== */
/* shared photo treatment */
.ph{ display:block; width:100%; height:auto; object-fit:cover; }

/* hero with photo */
.hero__photo{ margin:0; position:relative; z-index:2; }
.hero__photo img{ display:block; width:100%; aspect-ratio:5/4; height:auto; object-fit:cover; object-position:60% center; border-radius:22px;
  box-shadow:0 40px 80px -36px rgba(11,26,74,.55), 0 0 0 1px rgba(255,255,255,.6); }
.hero--photo .hero__mark{ left:44%; top:62%; width:min(520px,40%); opacity:.08; }
@media (max-width:900px){
  .hero--photo .hero__photo{ margin-top:var(--sp-5); }
  .hero--photo .hero__mark{ left:70%; top:40%; width:min(360px,60%); }
}
@media (max-width:560px){
  .hero--photo{ padding-bottom:2.5rem; }
  .hero__photo img{ aspect-ratio:16/11; border-radius:18px; }
}

/* home services split */
.hs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,5vw,4rem); align-items:center; }
.hs__media{ margin:0; border-radius:20px; box-shadow:14px 14px 0 0 var(--blue), var(--shadow-lg); }
.hs__media img{ display:block; width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; object-position:center 35%; border-radius:20px; }
.hs__text .ind-cloud{ margin-top:var(--sp-4); }
.hs__text .ind-locations{ margin-top:var(--sp-4); }
@media (max-width:900px){ .hs{ grid-template-columns:1fr; } .hs__media{ box-shadow:10px 10px 0 0 var(--blue), var(--shadow-lg); margin-right:10px; } .hs__media img{ aspect-ratio:16/10; } }

/* choose what you need most */
.need-grid{ margin-top:var(--sp-6); display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.need-card{ position:relative; display:flex; flex-direction:column; padding:clamp(1.25rem,2.4vw,1.6rem); border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F9FF 100%); border:1px solid #DCE6F8; box-shadow:0 18px 40px -30px rgba(11,26,74,.45);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.need-card:hover{ transform:translateY(-6px); border-color:#93B4F5; box-shadow:0 28px 50px -28px rgba(37,99,235,.55); }
.need-card__ico{ width:46px; height:46px; display:grid; place-items:center; border-radius:13px; color:#fff;
  background:linear-gradient(135deg,#3B82F6,#1D4ED8); box-shadow:0 12px 24px -12px rgba(37,99,235,.75); }
.need-card__ico svg{ width:22px; height:22px; }
.need-card__title{ margin-top:var(--sp-4); font-size:var(--step-1); letter-spacing:-.02em; }
.need-card__msg{ margin-top:.45rem; font-size:var(--step--1); color:#64748B; }
.need-card__svc{ list-style:none; padding:0; margin:var(--sp-4) 0 var(--sp-4); display:flex; flex-wrap:wrap; gap:6px; }
.need-card__svc li{ font-size:12px; font-weight:600; color:#1D4ED8; background:var(--blue-wash); border:1px solid #D6E2FB; padding:5px 9px; border-radius:999px; }
.need-card__link{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--navy); }
.need-card__link svg{ width:16px; height:16px; transition:transform .2s ease; }
.need-card:hover .need-card__link{ color:var(--blue); } .need-card:hover .need-card__link svg{ transform:translateX(3px); }
@media (max-width:1020px){ .need-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .need-grid{ grid-template-columns:1fr; } }

/* core services preview */
.svc-grid{ margin-top:var(--sp-6); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-tile{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 40px -32px rgba(11,26,74,.5); transition:transform .25s ease, box-shadow .25s ease; }
.svc-tile:hover{ transform:translateY(-5px); box-shadow:0 28px 50px -30px rgba(37,99,235,.5); }
.svc-tile__media{ display:block; overflow:hidden; }
.svc-tile__media img{ display:block; width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; transition:transform .5s ease; }
.svc-tile:hover .svc-tile__media img{ transform:scale(1.04); }
.svc-tile__body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.svc-tile__name{ font-size:var(--step-1); letter-spacing:-.02em; }
.svc-tile__name a{ color:var(--navy); }
.svc-tile__name a:hover{ color:var(--blue); }
.svc-tile__desc{ margin-top:.4rem; font-size:var(--step--1); color:#64748B; }
.svc-tile__price{ margin-top:auto; padding-top:var(--sp-3); font-weight:800; font-family:var(--font-display); color:var(--blue); font-size:.95rem; }
@media (max-width:1020px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .svc-grid{ grid-template-columns:1fr; } }

/* the system (navy) */
.sys{ display:grid; gap:var(--sp-5); }
.sys__head{ max-width:62ch; }
.sys__head .lede{ margin-top:var(--sp-3); }
.sys__media{ margin:0; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.sys__media img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.sys-steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:none; }
.sys-step{ display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.sys-step__num{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%; font-weight:800; color:#fff; background:linear-gradient(135deg,#3B82F6,#1D4ED8); }
.sys-step h3{ color:#fff; font-size:1.02rem; letter-spacing:-.01em; }
.sys-step p{ margin-top:.3rem; font-size:var(--step--1); color:#B7BEC9; }
@media (max-width:1020px){ .sys-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .sys-steps{ grid-template-columns:1fr; } .sys__media img{ aspect-ratio:16/10; } }

/* case studies: result line */
.case-card__result{ margin:0 0 var(--sp-3); font-size:var(--step--1); color:var(--navy); background:var(--blue-wash); border-left:3px solid var(--blue); padding:.55rem .7rem; border-radius:0 10px 10px 0; }
.case-card__result strong{ color:var(--blue); }

/* shopify (secondary) */
.shop{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; padding:clamp(1.5rem,4vw,2.75rem);
  border-radius:24px; background:linear-gradient(135deg,#F3F7FF 0%,#FFFFFF 60%); border:1px solid #DCE6F8; }
.shop__text p{ margin:var(--sp-3) 0 var(--sp-4); color:#64748B; }
.shop__media{ margin:0; }
.shop__media img{ display:block; width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border-radius:16px; box-shadow:0 24px 50px -30px rgba(11,26,74,.5); }
@media (max-width:900px){ .shop{ grid-template-columns:1fr; } .shop__media{ order:-1; } }

/* founder: main photo + inset */
.founder-media{ position:relative; overflow:visible; background:none; border:0; }
.founder-media > img{ border-radius:var(--r-lg); }
.founder-media__inset{ position:absolute; right:-22px; bottom:-26px; width:150px; border-radius:14px; border:5px solid #fff; overflow:hidden; box-shadow:0 18px 40px -18px rgba(7,13,26,.55); }
.founder-block__media .founder-media__inset img{ aspect-ratio:4/5; }
@media (max-width:820px){ .founder-media__inset{ width:110px; right:-10px; bottom:-18px; } }
/* fixes: let aspect-ratio win over the height attribute */
.founder-block__media img{ height:auto; }
/* case studies: 2 columns on desktop for bigger proof visuals */
@media (min-width:621px){ #case-studies .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } }
#case-studies .case-thumb{ aspect-ratio:16/9; height:auto; }

/* ================= 41. Inner page visuals (v23) ======================= */
.page-visual{ margin:0; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -34px rgba(11,26,74,.5); border:1px solid var(--line); }
.page-visual img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.page-banner{ margin:var(--sp-5) 0 0; border-radius:22px; overflow:hidden; box-shadow:0 30px 60px -34px rgba(11,26,74,.5); }
.page-banner img{ display:block; width:100%; height:auto; aspect-ratio:21/8; object-fit:cover; object-position:center 55%; }
@media (max-width:620px){ .page-banner img{ aspect-ratio:16/10; } }
.proof-mini{ display:block; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 24px 50px -32px rgba(11,26,74,.5); transition:transform .25s ease, box-shadow .25s ease; }
.proof-mini:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -30px rgba(37,99,235,.5); }
.proof-mini img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.proof-mini__cap{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; }
.proof-mini__cap strong{ color:var(--navy); font-size:.98rem; }
.proof-mini__cap span{ color:#64748B; font-size:var(--step--1); }
.founder-img--portrait{ aspect-ratio:3/4 !important; height:auto; object-position:center 20%; }
.contact-founder{ display:flex; align-items:center; gap:14px; padding-bottom:var(--sp-4); margin-bottom:var(--sp-4); border-bottom:1px solid var(--line); }
.contact-founder img{ width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.contact-founder p{ display:flex; flex-direction:column; gap:2px; margin:0; }
.contact-founder strong{ color:var(--navy); font-size:.98rem; }
.contact-founder span{ color:#64748B; font-size:var(--step--1); }

/* ================= 42. Pricing polish (v23) =========================== */
.price-note{ margin-top:var(--sp-3); font-size:var(--step--1); color:#64748B; max-width:60ch; }
.finder__title{ font:800 1.15rem/1.2 var(--font-display); color:var(--navy); letter-spacing:-.02em; }
.finder__sub{ margin:.3rem 0 var(--sp-4); color:#64748B; font-size:var(--step--1); }
.cat-filter{ position:sticky; top:var(--nav-h); z-index:20; background:rgba(252,252,253,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-block:1px solid var(--line); }
.cat-filter__inner{ display:flex; gap:8px; overflow-x:auto; padding-block:12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cat-filter__inner::-webkit-scrollbar{ display:none; }
.cat-filter__btn{ flex:none; appearance:none; cursor:pointer; border:1px solid #DCE6F8; background:#fff; color:var(--navy); font:600 13px/1 var(--font-display); padding:10px 14px; border-radius:999px; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.cat-filter__btn:hover{ border-color:#93B4F5; color:var(--blue); }
.cat-filter__btn.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 18px -10px rgba(37,99,235,.7); }
.svc-section[hidden], .svc-card[hidden]{ display:none !important; }
.cat-cta{ margin-top:var(--sp-5); padding:14px 18px; border-radius:14px; background:var(--blue-wash); border:1px solid #D6E2FB; color:var(--navy); font-size:var(--step--1); }
.cat-cta a{ color:var(--blue); font-weight:700; }
.svc-best{ font-weight:600; color:var(--navy); }
.svc-card{ scroll-margin-top:150px; transition:box-shadow .4s ease, border-color .4s ease; }
.svc-card.is-flash{ border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.18), 0 24px 50px -28px rgba(37,99,235,.6); }

/* ================= 43. Form states (v23) ============================== */
.field--error input, .field--error select, .field--error textarea{ border-color:#DC2626; box-shadow:0 0 0 4px rgba(220,38,38,.10); }
.field-error{ font-size:12.5px; font-weight:600; color:#B91C1C; }
.form-status{ margin:0; padding:12px 14px; border-radius:12px; font-size:var(--step--1); font-weight:600; }
.form-status--error{ background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; }
.form-status--error a{ color:#991B1B; text-decoration:underline; }
.form [type="submit"][disabled]{ opacity:.7; cursor:progress; transform:none; }
.contact-founder p{ min-width:0; }
.contact-layout > *{ min-width:0; }

/* 44 · Concept designs (v25) */
.concept-grid{ display:grid; gap:var(--sp-5); margin-top:var(--sp-6); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .concept-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .concept-grid{ grid-template-columns:minmax(0,1fr); } }
.concept-card{ margin:0; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 24px 50px -36px rgba(11,26,74,.45); display:flex; flex-direction:column; }
.concept-card__media{ position:relative; }
.concept-card__media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.concept-tag{ position:absolute; left:12px; top:12px; background:rgba(7,13,26,.82); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.35rem .65rem; border-radius:999px; }
.concept-card figcaption{ padding:var(--sp-4); display:grid; gap:.35rem; }
.concept-card figcaption strong{ font-size:1.08rem; color:var(--navy,#070D1A); }
.concept-card figcaption span:last-child{ color:var(--navy-70,#4A5468); line-height:1.5; }
.concept-row{ margin-top:var(--sp-6); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4); align-items:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:var(--sp-4); }
.concept-row__text p{ margin-top:.35rem; color:var(--navy-70,#4A5468); line-height:1.55; }
.concept-row__text strong{ color:var(--navy,#070D1A); }
.concept-row__thumb{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); transition:transform .2s ease; }
.concept-row__thumb:hover{ transform:translateY(-2px); }
.concept-row__thumb img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:760px){ .concept-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .concept-row__text{ grid-column:1 / -1; } }
.page-visual--wide img{ aspect-ratio:16/9; }
.concept-cap{ padding:.7rem 1rem; font-size:.85rem; color:var(--navy-70,#4A5468); background:#fff; border-top:1px solid var(--line); }

/* =========================================================================
   45 · Decision paths: "Choose what you need most" (v26)
   ========================================================================= */
.paths{ background:
  radial-gradient(70% 60% at 100% 0%, rgba(37,99,235,.10), transparent 60%),
  radial-gradient(60% 50% at 0% 100%, rgba(56,189,248,.10), transparent 60%),
  var(--off-white); padding-top:clamp(3rem,6vw,5rem); }
.paths__head{ text-align:center; max-width:60ch; margin-inline:auto; }
.paths__head .eyebrow{ justify-content:center; }
.paths__head .lede{ margin-inline:auto; }
.path-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); margin-top:var(--sp-6); }
.path-card{ grid-column:span 2; position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #DCE5F5; border-radius:22px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -32px rgba(11,26,74,.45);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.path-card:nth-child(4), .path-card:nth-child(5){ grid-column:span 3; }
.path-card:hover{ transform:translateY(-6px); border-color:#9DB9F6; box-shadow:0 34px 60px -30px rgba(37,99,235,.5); }
.path-card:active{ transform:translateY(-2px) scale(.995); }
.path-card__body{ display:flex; flex-direction:column; flex:1; padding:clamp(1.15rem,2.2vw,1.5rem); }
.path-card__num{ font:700 12px/1 var(--font-display); letter-spacing:.14em; color:var(--blue); }
.path-card__title{ margin-top:.45rem; font-size:var(--step-2); letter-spacing:-.03em; line-height:1.1; }
.path-card__desc{ margin-top:.5rem; color:var(--navy-70); font-size:var(--step--1); line-height:1.55; }
.path-card__label{ margin-top:var(--sp-4); font:700 11px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--navy-50); }
.path-card__svc{ list-style:none; margin:.6rem 0 var(--sp-4); padding:0; display:grid; gap:6px; }
.path-card__svc li{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 11px; border-radius:10px; background:#F3F7FF; border:1px solid #E1E9FA; }
.path-card__svc span{ font-weight:650; font-size:13.5px; color:var(--navy); min-width:0; }
.path-card__svc em{ font-style:normal; font-size:12px; font-weight:600; color:var(--blue); white-space:nowrap; }
.path-card__cta{ margin-top:auto; align-self:stretch; justify-content:center; }
.paths__foot{ text-align:center; margin-top:var(--sp-5); color:var(--navy-70); }
.paths__foot a{ color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.path-jump{ display:none; }

/* mini visual previews (pure HTML/CSS, no stock images) */
.pv{ position:relative; height:168px; overflow:hidden; padding:18px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(90% 120% at 85% 0%, rgba(56,189,248,.35), transparent 55%), linear-gradient(150deg,#0B1A3A 0%,#070D1A 70%); }
.pv::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(180deg,#000,transparent 85%); pointer-events:none; }
.pv > *{ position:relative; z-index:1; }
.pv b{ font-weight:800; }
.pv em{ font-style:normal; }
/* found */
.pv--found{ flex-direction:column; align-items:stretch; gap:7px; }
.pv-search{ display:flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:13px; background:#fff; font-size:11px; font-weight:600; color:#4A5468; }
.pv-search i{ width:9px; height:9px; border-radius:50%; border:1.6px solid #94A3B8; }
.pv-map{ position:relative; height:44px; border-radius:10px; background:linear-gradient(135deg,#DCE7FB,#C7D8F7); overflow:hidden; }
.pv-map::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 45%,rgba(255,255,255,.7) 46%,rgba(255,255,255,.7) 49%,transparent 50%),linear-gradient(20deg,transparent 60%,rgba(255,255,255,.6) 61%,rgba(255,255,255,.6) 64%,transparent 65%); }
.pv-pin{ position:absolute; top:12px; width:12px; height:12px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#94A3B8; }
.pv-pin:nth-child(1){ left:22%; } .pv-pin:nth-child(3){ left:74%; top:18px; }
.pv-pin--you{ left:48%; top:8px; width:16px; height:16px; background:var(--blue); box-shadow:0 0 0 5px rgba(37,99,235,.25); }
.pv-listing{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 8px; padding:9px 11px; border-radius:11px; background:#fff; font-size:12px; color:var(--navy); }
.pv-stars{ color:#F5B301; font-size:11px; letter-spacing:1px; }
.pv-acts{ grid-column:1 / -1; display:flex; gap:5px; }
.pv-acts em{ flex:1; text-align:center; font-size:9.5px; font-weight:700; padding:4px 0; border-radius:999px; border:1px solid #DCE5F5; color:var(--blue); }
.pv-acts em:first-child{ background:var(--blue); border-color:var(--blue); color:#fff; }
/* leads */
.pv--leads{ justify-content:flex-start; }
.pv-form{ width:58%; display:grid; gap:6px; padding:11px; border-radius:12px; background:#fff; font-size:11.5px; color:var(--navy); }
.pv-field{ height:20px; border-radius:6px; border:1px solid #DCE5F5; background:#F8FAFF; font-size:9.5px; color:#94A3B8; padding:3px 7px; }
.pv-submit{ text-align:center; padding:5px; border-radius:999px; background:var(--blue); color:#fff; font-size:10px; font-weight:700; }
.pv-toast{ position:absolute; right:14px; bottom:22px; display:flex; gap:8px; align-items:center; max-width:52%; padding:9px 11px; border-radius:12px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22); color:#fff; box-shadow:0 14px 30px -12px rgba(0,0,0,.6); }
.pv-toast i{ width:8px; height:8px; flex:none; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,.22); }
.pv-toast b{ display:block; font-size:11px; } .pv-toast em{ display:block; font-size:9.5px; color:#BFD0F0; }
/* follow-up */
.pv--follow{ flex-direction:column; align-items:stretch; gap:10px; }
.pv-chat{ display:grid; gap:6px; }
.pv-chat span{ max-width:80%; padding:7px 10px; border-radius:12px; font-size:11px; line-height:1.35; }
.pv-in{ background:rgba(255,255,255,.14); color:#E7EEFB; border-bottom-left-radius:4px; justify-self:start; }
.pv-out{ background:var(--blue); color:#fff; border-bottom-right-radius:4px; justify-self:end; }
.pv-pipe{ display:flex; gap:6px; }
.pv-pipe span{ flex:1; text-align:center; font-size:10px; font-weight:700; padding:5px 0; border-radius:8px; background:rgba(255,255,255,.08); color:#BFD0F0; border:1px solid rgba(255,255,255,.12); }
.pv-pipe .is-on{ background:#16A34A; border-color:#16A34A; color:#fff; }
/* website */
.pv-browser{ width:88%; border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 18px 34px -16px rgba(0,0,0,.6); }
.pv-bar{ display:flex; align-items:center; gap:4px; padding:6px 9px; background:#EEF2F9; }
.pv-bar i{ width:6px; height:6px; border-radius:50%; background:#CBD5E1; }
.pv-bar span{ margin-left:8px; flex:1; font-size:9px; color:#64748B; background:#fff; border-radius:6px; padding:2px 7px; }
.pv-page{ padding:11px 12px 12px; display:grid; gap:6px; background:linear-gradient(135deg,#F5F8FF,#fff); }
.pv-h{ height:9px; width:78%; border-radius:4px; background:var(--navy); }
.pv-h--short{ width:52%; background:var(--blue); }
.pv-cta{ justify-self:start; font-size:9.5px; font-weight:700; color:#fff; background:var(--blue); padding:4px 11px; border-radius:999px; }
.pv-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.pv-tiles i{ height:20px; border-radius:6px; background:#E6EDFB; }
/* shop */
.pv-store{ width:88%; padding:10px; border-radius:12px; background:#fff; display:grid; gap:8px; color:var(--navy); box-shadow:0 18px 34px -16px rgba(0,0,0,.6); }
.pv-store__top{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; }
.pv-cart{ width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:10px; font-weight:800; }
.pv-products{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pv-products span{ display:grid; gap:4px; }
.pv-products i{ height:36px; border-radius:8px; background:linear-gradient(160deg,#FDE7D3,#F5C7A9); }
.pv-products span:nth-child(2) i{ background:linear-gradient(160deg,#DCE7FB,#B9CEF5); }
.pv-products span:nth-child(3) i{ background:linear-gradient(160deg,#E6F6EC,#BFE7CD); }
.pv-products em{ height:5px; width:70%; border-radius:3px; background:#CBD5E1; }
.pv-checkout{ text-align:center; font-size:10px; font-weight:700; color:#fff; background:var(--navy); padding:5px; border-radius:999px; }

@media (max-width:1020px){
  .path-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .path-card, .path-card:nth-child(4), .path-card:nth-child(5){ grid-column:auto; }
  .path-card:nth-child(5){ grid-column:1 / -1; }
}
/* mobile: goal chips + swipeable cards with a peek of the next one */
@media (max-width:760px){
  .path-jump{ display:flex; gap:8px; overflow-x:auto; margin:var(--sp-4) calc(-1 * var(--gutter,16px)) 0; padding:2px var(--gutter,16px) 6px; scrollbar-width:none; }
  .path-jump::-webkit-scrollbar{ display:none; }
  .path-jump__btn{ flex:none; appearance:none; cursor:pointer; min-height:40px; padding:0 15px; border-radius:999px; border:1px solid #D6E2FB; background:#fff; font:700 13px/1 var(--font-display); color:var(--navy); transition:background .2s ease,color .2s ease,border-color .2s ease; }
  .path-jump__btn.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 18px -10px rgba(37,99,235,.8); }
  .path-grid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:var(--sp-4) calc(-1 * var(--gutter,16px)) 0; padding:4px var(--gutter,16px) 14px; scroll-padding-inline:var(--gutter,16px); scrollbar-width:none; }
  .path-grid::-webkit-scrollbar{ display:none; }
  .path-card, .path-card:nth-child(5){ flex:0 0 86%; scroll-snap-align:start; }
  .path-card:hover{ transform:none; }
  .path-card:active{ transform:scale(.985); }
  .pv{ height:132px; padding:14px; }
  .path-card__title{ font-size:var(--step-1); }
  .path-card__label{ margin-top:var(--sp-3); }
  .path-card__svc{ margin-bottom:var(--sp-3); }
}
@media (prefers-reduced-motion:reduce){ .path-card, .path-card:hover{ transition:none; transform:none; } }
.paths{ --gutter:clamp(1.15rem, 4vw, 2.5rem); }

/* =========================================================================
   46 · Pricing: Start by need + Most common starting points (v26)
   ========================================================================= */
.need-select{ margin-top:var(--sp-6); position:relative; border-radius:24px; padding:clamp(1.1rem,3vw,2rem); color:#fff; overflow:hidden;
  background:radial-gradient(70% 90% at 100% 0%, rgba(56,189,248,.28), transparent 55%), linear-gradient(150deg,#0B1A3A 0%,#070D1A 75%);
  box-shadow:0 40px 80px -40px rgba(7,13,26,.7); }
.need-select::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(180deg,#000,transparent 70%); }
.need-select > *{ position:relative; z-index:1; }
.need-select__title{ font:800 var(--step-2)/1.1 var(--font-display); letter-spacing:-.03em; }
.need-select__sub{ margin-top:.4rem; color:#BFD0F0; max-width:60ch; }
.need-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-4); }
.need-tab{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 16px 0 7px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#E7EEFB; font:700 14px/1 var(--font-display);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease; }
.need-tab__ico{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1); }
.need-tab__ico svg{ width:16px; height:16px; }
.need-tab:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); }
.need-tab:active{ transform:scale(.97); }
.need-tab.is-active{ background:#fff; color:var(--navy); border-color:#fff; box-shadow:0 10px 24px -12px rgba(56,189,248,.8); }
.need-tab.is-active .need-tab__ico{ background:var(--blue); color:#fff; }
.need-tab:focus-visible{ outline:3px solid var(--sky,#38BDF8); outline-offset:2px; }
.need-panel{ margin-top:var(--sp-5); }
.need-panel.is-anim{ animation:needIn .35s ease both; }
@keyframes needIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.need-panel__title{ font:800 var(--step-1)/1.2 var(--font-display); letter-spacing:-.02em; }
.need-panel__desc{ color:#BFD0F0; margin-top:.25rem; font-size:var(--step--1); }
.need-recs{ display:grid; gap:12px; margin-top:var(--sp-4); grid-template-columns:repeat(3,minmax(0,1fr)); }
.need-recs--1{ grid-template-columns:minmax(0,420px); }
.need-rec{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:16px; background:#fff; color:var(--navy); border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease; }
.need-rec:first-child{ box-shadow:0 0 0 2px var(--blue), 0 18px 40px -20px rgba(37,99,235,.9); }
.need-rec:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -22px rgba(56,189,248,.9); }
.need-rec:active{ transform:scale(.985); }
.need-rec__rank{ align-self:flex-start; font:700 10.5px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--blue); background:var(--blue-wash); padding:5px 8px; border-radius:999px; }
.need-rec strong{ font:800 var(--step-0)/1.25 var(--font-display); letter-spacing:-.015em; }
.need-rec__price{ font-weight:700; color:var(--blue); font-size:13.5px; }
.need-rec__out{ color:var(--navy-70); font-size:13.5px; line-height:1.5; }
.need-rec__more{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; }
.need-rec__more svg{ width:15px; height:15px; transition:transform .2s ease; }
.need-rec:hover .need-rec__more svg{ transform:translateX(3px); }
@media (max-width:900px){ .need-recs{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:620px){
  .need-tabs{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * clamp(1.1rem,3vw,2rem)); padding-inline:clamp(1.1rem,3vw,2rem); padding-bottom:4px; scrollbar-width:none; }
  .need-tabs::-webkit-scrollbar{ display:none; }
  .need-tab{ flex:none; }
  .need-rec{ padding:14px 15px; }
  .need-rec:not(:first-child) .need-rec__out{ display:none; }
}

.sp-section{ padding-top:clamp(2.5rem,5vw,4rem); }
.sp-grid{ display:grid; gap:14px; margin-top:var(--sp-5); grid-template-columns:repeat(5,minmax(0,1fr)); }
.sp-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; color:var(--navy);
  box-shadow:0 18px 40px -30px rgba(11,26,74,.45); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.sp-card:hover{ transform:translateY(-5px); border-color:#9DB9F6; box-shadow:0 30px 56px -30px rgba(37,99,235,.5); }
.sp-card:active{ transform:scale(.985); }
.sp-card__media{ position:relative; display:block; background:#E6EDFB; }
.sp-card__media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.sp-card__badge{ position:absolute; left:10px; top:10px; font:700 10.5px/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--blue); padding:6px 9px; border-radius:999px; box-shadow:0 8px 18px -8px rgba(37,99,235,.9); }
.sp-card:first-child .sp-card__badge{ background:var(--navy); }
.sp-card__body{ display:flex; flex-direction:column; gap:5px; flex:1; padding:14px 15px 16px; }
.sp-card__body strong{ font:800 15.5px/1.25 var(--font-display); letter-spacing:-.015em; }
.sp-card__price{ font-weight:700; color:var(--blue); font-size:13px; }
.sp-card__out{ color:var(--navy-70); font-size:13px; line-height:1.5; }
.sp-card__more{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; }
.sp-card__more svg{ width:14px; height:14px; transition:transform .2s ease; }
.sp-card:hover .sp-card__more svg{ transform:translateX(3px); }
@media (max-width:1100px){ .sp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){
  .sp-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(-1 * clamp(1.15rem,4vw,2.5rem)); padding:4px clamp(1.15rem,4vw,2.5rem) 12px; scroll-padding-inline:clamp(1.15rem,4vw,2.5rem); scrollbar-width:none; }
  .sp-grid::-webkit-scrollbar{ display:none; }
  .sp-card{ flex:0 0 68%; scroll-snap-align:start; }
  .sp-card:hover{ transform:none; }
}
@media (prefers-reduced-motion:reduce){ .need-panel.is-anim{ animation:none; } .sp-card,.need-rec{ transition:none; } }

/* =========================================================================
   47 · Industries hub cards, case-study cards, hero mosaic (v26)
   ========================================================================= */
.page-hero--split .container{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.hero-mosaic{ display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr 1fr; gap:10px; }
.hero-mosaic img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:16px; box-shadow:0 24px 48px -30px rgba(11,26,74,.6); }
.hero-mosaic img:first-child{ grid-row:span 2; aspect-ratio:3/4; }
.hero-mosaic img:not(:first-child){ aspect-ratio:4/3; }
@media (max-width:900px){ .page-hero--split .container{ grid-template-columns:minmax(0,1fr); } .hero-mosaic{ max-width:520px; } .hero-mosaic img:first-child{ aspect-ratio:auto; } }
@media (max-width:560px){ .hero-mosaic{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto; } .hero-mosaic img, .hero-mosaic img:first-child{ grid-row:auto; aspect-ratio:1/1; border-radius:12px; } }

.ind-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:var(--sp-5); }
.ind-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; color:var(--navy);
  box-shadow:0 18px 40px -32px rgba(11,26,74,.5); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ind-card:hover{ transform:translateY(-5px); border-color:#9DB9F6; box-shadow:0 30px 56px -30px rgba(37,99,235,.5); }
.ind-card:active{ transform:scale(.985); }
.industry-image{ display:block; aspect-ratio:16/10; overflow:hidden; background:#E6EDFB; }
.industry-image img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s ease; }
.ind-card:hover .industry-image img{ transform:scale(1.04); }
.industry-image--placeholder{ display:grid; place-items:center; color:#fff;
  background:radial-gradient(80% 100% at 80% 0%, rgba(56,189,248,.45), transparent 60%), linear-gradient(150deg,#1D4ED8,#0B1A3A); }
.industry-image--placeholder svg{ width:44px; height:44px; opacity:.9; }
.ind-card__body{ display:flex; flex-direction:column; gap:6px; flex:1; padding:15px 16px 17px; }
.ind-card__body strong{ font:800 var(--step-1)/1.15 var(--font-display); letter-spacing:-.02em; }
.ind-card__body > span{ color:var(--navy-70); font-size:13.5px; line-height:1.5; }
.ind-card__body em{ font-style:normal; margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color:var(--blue); }
.ind-card__body em svg{ width:14px; height:14px; transition:transform .2s ease; }
.ind-card:hover em svg{ transform:translateX(3px); }
@media (max-width:1020px){ .ind-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .ind-grid{ gap:10px; } .ind-card__body{ padding:12px; } .ind-card__body > span{ display:none; } .ind-card__body strong{ font-size:var(--step-0); } }

.cs-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:var(--sp-2); }
.cs-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 22px 46px -34px rgba(11,26,74,.5); transition:transform .22s ease, box-shadow .22s ease; }
.cs-card:hover{ transform:translateY(-4px); box-shadow:0 32px 60px -32px rgba(37,99,235,.45); }
.cs-card__media{ position:relative; display:block; background:#E6EDFB; }
.case-study-image{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top center; }
.cs-card__body{ display:flex; flex-direction:column; flex:1; padding:clamp(1rem,2.2vw,1.4rem); }
.cs-card__ind{ font:700 11.5px/1.3 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.cs-card__name{ margin-top:.35rem; font-size:var(--step-1); letter-spacing:-.02em; }
.cs-card__name a{ color:inherit; }
.cs-card__facts{ margin:var(--sp-3) 0 var(--sp-3); display:grid; gap:10px; }
.cs-card__facts dt{ font:700 11px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--navy-50); }
.cs-card__facts dd{ margin:.3rem 0 0; color:var(--navy-70); font-size:14px; line-height:1.5; }
.cs-card__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:5px; }
.cs-card__chips li{ font-size:12px; font-weight:600; color:#1D4ED8; background:var(--blue-wash); border:1px solid #D6E2FB; padding:4px 9px; border-radius:999px; }
.cs-card__result{ padding:10px 12px; border-radius:12px; background:#F1F6FF; border-left:3px solid var(--blue); }
.cs-card__result dd{ color:var(--navy); font-weight:600; }
@media (max-width:820px){ .cs-grid{ grid-template-columns:minmax(0,1fr); } }

/* =========================================================================
   48 · About trust band, Contact ways (v26)
   ========================================================================= */
.trust-band{ background:linear-gradient(180deg,var(--off-white),#fff); }
.trust-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.trust-grid li{ display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 36px -30px rgba(11,26,74,.45); }
.trust-grid strong{ font:800 var(--step-0)/1.25 var(--font-display); letter-spacing:-.015em; margin-top:6px; color:var(--navy); }
.trust-grid span:not(.tb-ico){ color:var(--navy-70); font-size:13.5px; line-height:1.5; }
.tb-ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--blue); background:var(--blue-wash); border:1px solid #D6E2FB; }
.tb-ico svg{ width:21px; height:21px; }
@media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .trust-grid li{ padding:14px; } }

.ways-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.way-card{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 36px -30px rgba(11,26,74,.45); }
.way-card p{ color:var(--navy-70); font-size:14px; line-height:1.55; }
.way-card .btn{ margin-top:auto; align-self:flex-start; }
.way-card__num{ font:700 12px/1 var(--font-display); letter-spacing:.14em; color:var(--blue); }
.way-card__title{ font-size:var(--step-1); letter-spacing:-.02em; line-height:1.15; }
.way-card--primary{ color:#fff; border-color:transparent; background:radial-gradient(80% 100% at 100% 0%, rgba(56,189,248,.35), transparent 60%), linear-gradient(150deg,#0B1A3A,#070D1A 75%); box-shadow:0 30px 60px -34px rgba(7,13,26,.8); }
.way-card--primary .way-card__title{ color:#fff; }
.way-card--primary p{ color:#BFD0F0; }
.way-card--primary .way-card__num{ color:#7DD3FC; }
@media (max-width:860px){ .ways-grid{ grid-template-columns:minmax(0,1fr); } .way-card{ padding:16px; } }
#contact-form{ scroll-margin-top:110px; }
/* honeypot stays invisible even if [hidden] styling is overridden */
p[hidden]:has(input[name="bot-field"]){ display:none !important; }
.sol-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sol-card__k{ font:700 11px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--blue) !important; }
.sol-card .industry-image{ aspect-ratio:4/3; }
@media (max-width:900px){ .sol-grid{ grid-template-columns:minmax(0,1fr); } .sol-card .industry-image{ aspect-ratio:16/9; } }
@media (max-width:480px){ .sol-card .ind-card__body > span:not(.sol-card__k){ display:block; } }
.full-band{ margin-top:16px; display:grid; gap:6px; padding:clamp(1.2rem,3vw,2rem); border-radius:20px; color:#fff;
  background:radial-gradient(60% 120% at 100% 0%, rgba(56,189,248,.35), transparent 60%), linear-gradient(150deg,#1D4ED8 0%,#0B1A3A 60%,#070D1A 100%);
  box-shadow:0 34px 70px -40px rgba(7,13,26,.8); transition:transform .22s ease; }
.full-band:hover{ transform:translateY(-3px); }
.full-band__k{ font:700 11px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:#7DD3FC; }
.full-band strong{ font:800 var(--step-2)/1.1 var(--font-display); letter-spacing:-.03em; }
.full-band > span:not(.full-band__k){ color:#D6E2FB; max-width:62ch; }
.full-band em{ font-style:normal; font-weight:700; display:inline-flex; gap:6px; align-items:center; margin-top:6px; }
.full-band em svg{ width:16px; height:16px; }
.page-hero-visual--system{ margin:0; border-radius:20px; overflow:hidden; box-shadow:0 34px 70px -40px rgba(7,13,26,.8); }
.page-hero-visual--system img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.path-card__note{ margin:-.4rem 0 var(--sp-4); font-size:13px; color:var(--navy-70); line-height:1.5; }
.path-card__cta{ font-size:15px; padding-block:.8em; }
@media (max-width:760px){
  .pv{ height:118px; }
  .pv--found .pv-map{ display:none; }
  .pv--found{ justify-content:center; }
  .pv-chat span{ font-size:10.5px; padding:6px 9px; }
  .pv--follow{ gap:7px; }
  .path-card__desc{ font-size:13.5px; }
  .path-card__svc li{ padding:7px 10px; }
  .path-card__svc span{ font-size:13px; }
}
@media (max-width:620px){
  .need-tabs{ flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; }
  .need-tab{ min-height:42px; padding:0 13px 0 5px; font-size:13px; gap:7px; }
  .need-tab__ico{ width:30px; height:30px; }
}

/* =========================================================================
   49 · Website Demo Gallery (v27)
   ========================================================================= */
.demo-hero__sub{ font-weight:600; color:var(--navy); }
.demo-hero__intro{ margin-top:var(--sp-3); color:var(--navy-70); max-width:64ch; line-height:1.65; }
.work-tabs{ display:inline-flex; gap:6px; margin-top:var(--sp-5); padding:6px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px -24px rgba(11,26,74,.5); max-width:100%; }
.work-tab{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:transparent; font:700 14.5px/1 var(--font-display); color:var(--navy-70); transition:background .2s ease,color .2s ease; }
.work-tab span{ font-size:11.5px; padding:3px 7px; border-radius:999px; background:var(--off-white-2,#F4F6F9); color:var(--navy-60); }
.work-tab:hover{ color:var(--navy); }
.work-tab.is-active{ background:var(--navy); color:#fff; }
.work-tab.is-active span{ background:rgba(255,255,255,.14); color:#fff; }
.work-tab:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.work-panel[hidden]{ display:none; }
.demo-toolbar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; }
.demo-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.demo-filter__btn{ appearance:none; cursor:pointer; min-height:40px; padding:0 15px; border-radius:999px; border:1px solid #D6E2FB; background:#fff; font:700 13.5px/1 var(--font-display); color:var(--navy); transition:background .2s ease,color .2s ease,border-color .2s ease; }
.demo-filter__btn:hover{ border-color:var(--blue); }
.demo-filter__btn.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 18px -10px rgba(37,99,235,.8); }
.demo-note{ display:flex; gap:12px; align-items:flex-start; margin-top:var(--sp-4); padding:14px 16px; border-radius:14px; background:#EEF4FF; border:1px solid #D6E2FB; color:var(--navy-70); font-size:14px; line-height:1.55; }
.demo-note svg{ width:20px; height:20px; flex:none; color:var(--blue); margin-top:1px; }
.demo-note strong{ color:var(--navy); }
.demo-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:var(--sp-5); }
.demo-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 22px 46px -34px rgba(11,26,74,.5); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.demo-card[hidden]{ display:none; }
.demo-card:hover{ transform:translateY(-5px); border-color:#9DB9F6; box-shadow:0 34px 64px -32px rgba(37,99,235,.45); }
.demo-card__media{ position:relative; display:block; aspect-ratio:16/11; overflow:hidden;
  background:radial-gradient(80% 90% at 85% 0%, rgba(56,189,248,.35), transparent 60%), linear-gradient(150deg,#0B1A3A 0%,#070D1A 75%); }
.demo-card__media::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(180deg,#000,transparent 80%); }
.demo-frame{ position:absolute; left:7%; top:12%; width:80%; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 30px 50px -20px rgba(0,0,0,.7); transition:transform .4s ease; z-index:1; }
.demo-frame__bar{ display:flex; gap:4px; padding:6px 8px; background:#E8EDF5; }
.demo-frame__bar i{ width:6px; height:6px; border-radius:50%; background:#C3CCDA; }
.demo-frame img{ display:block; width:100%; height:auto; }
.demo-phone{ position:absolute; right:6%; bottom:-14%; width:24%; border-radius:16px; padding:4px; background:#0B1222; box-shadow:0 24px 40px -14px rgba(0,0,0,.8); transition:transform .4s ease; z-index:2; }
.demo-phone img{ display:block; width:100%; height:auto; border-radius:12px; }
.demo-card:hover .demo-frame{ transform:translateY(-4px); }
.demo-card:hover .demo-phone{ transform:translateY(-8px); }
.demo-card__full{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.demo-card:hover .demo-card__full{ transform:scale(1.03); }
.demo-label{ position:absolute; left:12px; top:12px; z-index:3; font:700 10.5px/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(7,13,26,.78); border:1px solid rgba(255,255,255,.2); padding:6px 9px; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.demo-card__body{ display:flex; flex-direction:column; flex:1; padding:clamp(1rem,2.2vw,1.35rem); }
.demo-card__ind{ display:flex; justify-content:space-between; gap:8px; align-items:center; font:700 11.5px/1.2 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.demo-card__ind span{ font-size:10.5px; letter-spacing:.04em; color:#166534; background:#DCFCE7; padding:4px 8px; border-radius:999px; white-space:nowrap; }
.demo-card__name{ margin-top:.45rem; font-size:var(--step-1); letter-spacing:-.02em; line-height:1.2; }
.demo-card__name a{ color:inherit; }
.demo-card__desc{ margin-top:.45rem; color:var(--navy-70); font-size:14px; line-height:1.55; }
.demo-card__facts{ margin:var(--sp-3) 0 0; display:grid; gap:9px; padding-top:var(--sp-3); border-top:1px solid var(--line); }
.demo-card__facts dt{ font:700 10.5px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--navy-50); }
.demo-card__facts dd{ margin:.3rem 0 0; font-size:13.5px; color:var(--navy-70); line-height:1.5; }
.demo-card__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:auto; padding-top:var(--sp-4); }
.demo-card__alt{ font-weight:700; font-size:14px; color:var(--navy); text-decoration:underline; text-decoration-color:#B9CCF3; text-underline-offset:4px; }
.demo-card__alt:hover{ color:var(--blue); }
@media (max-width:1100px){ .demo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){ .demo-grid{ grid-template-columns:minmax(0,1fr); } .demo-card:hover{ transform:none; } .demo-card:active{ transform:scale(.99); } }

.real-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:var(--sp-5); }
.real-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 22px 46px -34px rgba(11,26,74,.5); }
.real-card__media{ position:relative; display:block; background:#E6EDFB; }
.real-card__media > img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top center; }
.real-label{ position:absolute; right:12px; top:12px; font:700 10.5px/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--blue); padding:6px 9px; border-radius:999px; }
.real-card__body{ padding:clamp(1rem,2.2vw,1.35rem); display:flex; flex-direction:column; gap:6px; }
.real-card__res{ color:var(--navy-70); font-size:14px; line-height:1.55; }
.real-card__res strong{ color:var(--navy); }
.real-card .case-card__read{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; }
.real-card .case-card__read svg{ width:15px; height:15px; }
@media (max-width:820px){ .real-grid{ grid-template-columns:minmax(0,1fr); } }

/* home preview */
.demo-preview{ background:linear-gradient(180deg,#fff 0%, var(--off-white) 100%); }
.demo-preview__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--sp-4); }
.demo-preview__note{ margin-top:var(--sp-4); text-align:center; font-size:14px; color:var(--navy-60); }
@media (max-width:1100px){ .demo-grid--3 .demo-card:nth-child(3){ grid-column:1 / -1; } }
@media (max-width:1100px) and (min-width:701px){ .demo-grid--3 .demo-card:nth-child(3){ flex-direction:row; } .demo-grid--3 .demo-card:nth-child(3) .demo-card__media{ flex:0 0 52%; aspect-ratio:auto; min-height:260px; } }
@media (max-width:700px){
  .demo-grid--3{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(-1 * clamp(1.15rem,4vw,2.5rem)); padding:4px clamp(1.15rem,4vw,2.5rem) 14px; scroll-padding-inline:clamp(1.15rem,4vw,2.5rem); scrollbar-width:none; }
  .demo-grid--3::-webkit-scrollbar{ display:none; }
  .demo-grid--3 .demo-card{ flex:0 0 84%; scroll-snap-align:start; }
}

/* case studies → gallery band */
.gallery-band{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1rem,3vw,2.5rem); align-items:center; padding:clamp(1.1rem,3vw,2rem); border-radius:22px; color:#fff; overflow:hidden;
  background:radial-gradient(70% 100% at 100% 0%, rgba(56,189,248,.3), transparent 60%), linear-gradient(150deg,#0B1A3A,#070D1A 75%); box-shadow:0 34px 70px -40px rgba(7,13,26,.8); transition:transform .22s ease; }
.gallery-band:hover{ transform:translateY(-3px); }
.gallery-band__thumbs{ position:relative; display:block; aspect-ratio:16/10; }
.gallery-band__thumbs img{ position:absolute; width:62%; border-radius:10px; box-shadow:0 20px 40px -16px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.15); }
.gallery-band__thumbs img:nth-child(1){ left:0; top:6%; }
.gallery-band__thumbs img:nth-child(2){ left:19%; top:22%; }
.gallery-band__thumbs img:nth-child(3){ left:38%; top:38%; }
.gallery-band__text{ display:grid; gap:8px; }
.gallery-band__k{ font:700 11px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:#7DD3FC; }
.gallery-band strong{ font:800 var(--step-2)/1.1 var(--font-display); letter-spacing:-.03em; }
.gallery-band__text > span:not(.gallery-band__k){ color:#D6E2FB; }
.gallery-band em{ font-style:normal; font-weight:700; display:inline-flex; gap:6px; align-items:center; }
.gallery-band em svg{ width:16px; height:16px; }
@media (max-width:760px){ .gallery-band{ grid-template-columns:minmax(0,1fr); } }
.work-tab b{ font-weight:inherit; }
@media (max-width:520px){
  .wt-long{ display:none; }
  .work-tabs{ display:flex; width:100%; }
  .work-tab{ flex:1; justify-content:center; padding:0 10px; font-size:14px; white-space:nowrap; }
  .demo-card__facts > div:nth-child(2){ display:none; }
  .demo-filter{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * clamp(1.15rem,4vw,2.5rem)); padding:2px clamp(1.15rem,4vw,2.5rem) 6px; scrollbar-width:none; }
  .demo-filter::-webkit-scrollbar{ display:none; }
  .demo-filter__btn{ flex:none; }
}
@media (max-width:360px){ .work-tab{ font-size:13px; padding:0 6px; gap:5px; } .work-tab span{ padding:2px 5px; } }

/* =========================================================================
   50 · Premium component refresh (v28)
   Eyebrows · number badges · icon cards · process timeline · demo previews
   ========================================================================= */

/* No monospace anywhere: numbers and labels use the brand face */
:root{ --font-mono: var(--font-display); }
.card__k, .badge, .breadcrumbs, .footer-col h4, .trust-strip__label, .frame__label, .flowcard__title{ font-variant-numeric:tabular-nums; font-weight:600; }

/* --- Eyebrows: editorial label with gradient rule + brand spark --------- */
.eyebrow{ position:relative; display:inline-flex; align-items:center; gap:.7rem; padding:0; background:none; box-shadow:none; border-radius:0;
  font-size:.74rem; font-weight:700; letter-spacing:.2em; color:var(--blue-600,#2563EB); }
.eyebrow::before{ content:""; width:28px; height:2px; border-radius:2px; flex:none; background:linear-gradient(90deg,#38BDF8,#2563EB); }
.eyebrow::after{ content:""; width:7px; height:7px; flex:none; order:-1; margin-right:-.35rem; transform:rotate(45deg); border-radius:1.5px;
  background:linear-gradient(135deg,#38BDF8,#1D4ED8); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.surface-navy .eyebrow, .sec-brand.surface-navy .eyebrow{ background:none; box-shadow:none; color:#7DD3FC; }
.surface-navy .eyebrow::before{ background:linear-gradient(90deg,#7DD3FC,#3B82F6); }
.surface-navy .eyebrow::after{ background:linear-gradient(135deg,#7DD3FC,#3B82F6); box-shadow:0 0 0 3px rgba(125,211,252,.15), 0 0 14px rgba(56,189,248,.6); }
.surface-blue .eyebrow{ background:none; box-shadow:none; color:#fff; }
.surface-blue .eyebrow::before{ background:linear-gradient(90deg,rgba(255,255,255,.4),#fff); }
.surface-blue .eyebrow::after{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18); }
/* centered headings get a rule on both sides */
[style*="text-align:center"] > .eyebrow, .paths__head .eyebrow, .section-head.center .eyebrow{ justify-content:center; }

/* --- Number badges (01, 02...) ------------------------------------------ */
.audit-cta__list span, .audit-side__list span, .path-card__num, .way-card__num{
  display:inline-grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px;
  font:800 12.5px/1 var(--font-display); letter-spacing:.02em; color:#fff; font-variant-numeric:tabular-nums;
  background:linear-gradient(145deg,#3B82F6 0%,#2563EB 55%,#1D4ED8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px rgba(37,99,235,.75); }
.path-card__num, .way-card__num{ margin-bottom:.15rem; }
.surface-navy .audit-cta__list li span, .way-card--primary .way-card__num{ color:#1D4ED8; background:linear-gradient(145deg,#fff,#DCE8FF); box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 8px 22px -8px rgba(56,189,248,.8); }
.surface-blue .audit-cta__list li span{ color:#1D4ED8; background:#fff; }
.audit-cta__list li, .audit-side__list li{ gap:14px; padding:.8rem 1rem; border-radius:14px; background:#fff; border:1px solid #E3EAF6;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 12px 28px -24px rgba(11,26,74,.55); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.audit-cta__list li:hover{ transform:translateX(4px); border-color:#B9CCF3; box-shadow:0 18px 34px -24px rgba(37,99,235,.55); }

/* --- Icon tiles: solid brand gradient with white icon ------------------- */
.chip, .tb-ico, .d-svc__ico{ background:linear-gradient(145deg,#3B82F6 0%,#2563EB 55%,#1D4ED8 100%) !important; border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -12px rgba(37,99,235,.8); color:#fff !important; }
.chip svg, .tb-ico svg{ stroke:#fff !important; color:#fff; }
.card--glass .chip{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 6px rgba(59,130,246,.12), 0 12px 30px -10px rgba(56,189,248,.7); }

/* --- Cards: layered surface, gradient hairline, hover glow -------------- */
.trust-grid li, .about-principles .card, section .grid > .card:not(.card--glass):not(.card--hover):not(.price-card):not(.svc-card){
  position:relative; border-radius:20px; border:1px solid #E3EAF6; overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFF 100%);
  box-shadow:0 1px 0 #fff inset, 0 24px 48px -36px rgba(11,26,74,.55); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.trust-grid li::before, section .grid > .card:not(.card--glass):not(.card--hover):not(.price-card):not(.svc-card)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#38BDF8,#2563EB 55%,#1D4ED8); opacity:.9; }
.trust-grid li::after, section .grid > .card:not(.card--glass):not(.card--hover):not(.price-card):not(.svc-card)::after{
  content:""; position:absolute; right:-60px; top:-60px; width:160px; height:160px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(59,130,246,.10), transparent 70%); }
.trust-grid li:hover, section .grid > .card:not(.card--glass):not(.card--hover):not(.price-card):not(.svc-card):hover{
  transform:translateY(-5px); border-color:#B9CCF3; box-shadow:0 34px 60px -34px rgba(37,99,235,.45); }
.trust-grid li{ padding:22px 20px 22px; gap:8px; }
.trust-grid strong{ margin-top:10px; font-size:1.05rem; }

/* --- Process timeline: connected step cards ---------------------------- */
.system{ gap:18px; }
.system__line{ top:47px; left:6%; right:6%; height:2px; background:linear-gradient(90deg,rgba(37,99,235,.14),rgba(56,189,248,.25)); border-radius:2px; }
.system__line span{ background:linear-gradient(90deg,#1D4ED8,#3B82F6 50%,#38BDF8); box-shadow:0 0 12px rgba(56,189,248,.7); border-radius:2px; }
.system__step{ padding:22px 22px 24px; border-radius:20px; background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFF 100%); border:1px solid #E3EAF6;
  box-shadow:0 1px 0 #fff inset, 0 24px 48px -36px rgba(11,26,74,.55); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.system__step::after{ content:attr(data-step); position:absolute; right:14px; bottom:-18px; font:800 6rem/1 var(--font-display); letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px rgba(37,99,235,.10); pointer-events:none; }
.system__num{ width:50px; height:50px; border:0; border-radius:15px; font:800 15px/1 var(--font-display); letter-spacing:.02em; color:#fff;
  background:linear-gradient(145deg,#3B82F6 0%,#2563EB 55%,#1D4ED8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 6px rgba(59,130,246,.10), 0 14px 26px -12px rgba(37,99,235,.85); transition:transform .3s ease, box-shadow .3s ease, background .3s ease; }
.system__step h3{ margin:18px 0 .45rem; font-size:1.18rem; letter-spacing:-.02em; }
.system__step p{ max-width:none; line-height:1.6; }
.system.sys-init .system__num{ background:#fff; color:#94A3B8; box-shadow:inset 0 0 0 1.5px #DCE5F5; }
.system.sys-init .system__step.is-active .system__num{ color:#fff; background:linear-gradient(145deg,#3B82F6 0%,#2563EB 55%,#1D4ED8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 6px rgba(59,130,246,.12), 0 14px 26px -12px rgba(37,99,235,.85); transform:none; }
.system.sys-init .system__step.is-active{ border-color:#B9CCF3; box-shadow:0 30px 60px -36px rgba(37,99,235,.55); }
.system__step:hover{ transform:translateY(-4px); }
@media (max-width:900px){
  .system{ gap:14px; }
  .system__line{ top:24px; bottom:24px; left:47px; right:auto; width:2px; height:auto; }
  .system__step{ padding:20px 18px 20px 86px; }
  .system__num{ position:absolute; left:20px; top:20px; }
  .system__step h3{ margin-top:2px; }
  .system__step::after{ font-size:4.5rem; bottom:-12px; }
}
.surface-navy .system__step{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); box-shadow:none; }

/* --- Trust chips: clean pills, no mono --------------------------------- */
.trust-chips .chip-item, .badge{ font-family:var(--font-display); }
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.82rem; color:var(--blue); background:var(--blue-wash); border-color:#D6E2FB; }

/* --- Footer column titles ----------------------------------------------- */
.footer-col h4{ font-weight:700; font-size:.72rem; letter-spacing:.18em; color:#8FA0BA; }

/* --- Demo live previews ------------------------------------------------- */
.demo-frame{ left:5%; top:9%; width:90%; bottom:-6%; display:flex; flex-direction:column; }
.demo-frame__bar{ align-items:center; }
.demo-frame__bar em{ font-style:normal; margin-left:8px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:600; color:#64748B; background:#fff; border-radius:6px; padding:2px 8px; }
.demo-live{ position:relative; display:block; flex:1; overflow:hidden; background:#F1F5FB; --live-scale:.3; }
.demo-live iframe{ position:absolute; left:0; top:0; width:1280px; height:2000px; border:0; transform:scale(var(--live-scale)); transform-origin:0 0; pointer-events:none; opacity:0; transition:opacity .5s ease; background:#fff; }
.demo-live.is-live iframe{ opacity:1; }
.demo-live__fallback{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:6px; text-align:center; padding:16px; color:var(--navy);
  background:radial-gradient(70% 90% at 80% 0%, rgba(56,189,248,.18), transparent 60%), linear-gradient(160deg,#F5F8FF,#E8EFFC); transition:opacity .4s ease; }
.demo-live__fallback b{ width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:#fff; font:800 15px/1 var(--font-display);
  background:linear-gradient(145deg,#3B82F6,#1D4ED8); box-shadow:0 12px 24px -12px rgba(37,99,235,.8); }
.demo-live__fallback span{ font:800 14px/1.25 var(--font-display); }
.demo-live__fallback small{ font-size:11px; color:var(--navy-60); }
.demo-live.is-live .demo-live__fallback{ opacity:0; }
.demo-card__loc{ display:flex; align-items:center; gap:6px; margin-top:.35rem; font-size:13px; font-weight:600; color:var(--navy-60); }
.demo-card__loc svg{ width:14px; height:14px; color:var(--blue); }
.demo-card__feats{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.demo-card__feats li{ font-size:12px; font-weight:700; color:#1D4ED8; background:#EEF4FF; border:1px solid #D6E2FB; padding:4px 9px; border-radius:999px; }
.gallery-band__thumbs--names{ display:grid; gap:10px; aspect-ratio:auto; }
.gallery-band__thumbs--names span{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); font-weight:800; }
.gallery-band__thumbs--names span:nth-child(2){ margin-left:8%; }
.gallery-band__thumbs--names span:nth-child(3){ margin-left:16%; }
.gallery-band__thumbs--names small{ font-weight:600; font-size:12px; color:#9FB6DC; }
@media (prefers-reduced-motion:reduce){ .system__step, .trust-grid li, .audit-cta__list li{ transition:none; } }
[id^="ind-"]{ scroll-margin-top:110px; }
.demo-label{ top:auto; bottom:12px; left:12px; }
.demo-frame{ bottom:-8%; }
.demo-card__ind{ display:block; }

/* =========================================================================
   51 · Pricing architecture cleanup (v29)
   ========================================================================= */
/* industry chips: one consistent style, no stray dots */
.ind-chip::before{ content:none !important; display:none !important; }
.ind-chip{ gap:.55rem; padding:.62rem 1rem .62rem .7rem; border-radius:999px; background:#fff; border:1px solid #DCE5F5; color:var(--navy); font-weight:600; font-size:.92rem;
  box-shadow:0 8px 20px -18px rgba(11,26,74,.6); transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.ind-chip svg{ width:28px; height:28px; padding:6px; border-radius:50%; color:#fff !important; background:linear-gradient(145deg,#3B82F6,#1D4ED8); box-shadow:0 6px 14px -8px rgba(37,99,235,.9); }
a.ind-chip:hover{ border-color:#9DB9F6; color:var(--blue); transform:translateY(-2px); box-shadow:0 14px 28px -18px rgba(37,99,235,.55); }

/* pricing catalog */
.svc-cat{ display:flex; align-items:flex-start; gap:16px; }
.svc-cat__num{ display:inline-grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; font:800 14px/1 var(--font-display); color:#fff;
  background:linear-gradient(145deg,#3B82F6,#2563EB 55%,#1D4ED8); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -10px rgba(37,99,235,.8); }
.svc-price span{ font-weight:600; color:var(--navy-60); font-size:.88em; }
.svc-tag{ display:inline-flex; align-self:flex-start; margin-bottom:.45rem; font:700 10.5px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--navy); padding:6px 9px; border-radius:999px; }
.svc-card__top{ display:flex; flex-direction:column; }
.svc-section--premium{ background:linear-gradient(180deg,var(--off-white) 0%, #EEF3FC 100%); }
.svc-card--premium{ border-color:#C9D7F3 !important; }
.svc-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3); font-weight:700; font-size:14px; color:var(--blue); }
.svc-cta svg{ width:15px; height:15px; transition:transform .2s ease; }
.svc-cta:hover svg{ transform:translateX(3px); }

/* =========================================================================
   52 · Final QA polish (v30)
   ========================================================================= */
/* Website Services has 4 cards: no orphan */
@media (min-width:1100px){ #cat-websites .svc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:700px) and (max-width:1099px){ #cat-websites .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Pricing cards on mobile: inclusions behind a clean toggle */
.svc-toggle{ display:none; }
@media (max-width:620px){
  .svc-card.has-toggle .svc-more{ display:none; }
  .svc-card.has-toggle.is-open .svc-more{ display:block; }
  .svc-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:var(--sp-3); padding:.75rem 1rem; border-radius:12px;
    border:1px solid #D6E2FB; background:#F3F7FF; font:700 14px/1 var(--font-display); color:var(--navy); cursor:pointer; }
  .svc-toggle svg{ width:16px; height:16px; color:var(--blue); transition:transform .25s ease; }
  .svc-card.is-open .svc-toggle svg{ transform:rotate(180deg); }
  .svc-card{ padding:20px 18px; }
}

/* About trust cards: one clean column on phones */
@media (max-width:520px){
  .trust-grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .trust-grid li{ display:grid; grid-template-columns:42px 1fr; column-gap:14px; row-gap:2px; align-items:start; padding:16px; }
  .trust-grid li .tb-ico{ grid-row:span 2; }
  .trust-grid strong{ margin-top:0; }
}

/* Industry hub links: keep label + arrow together */
.ind-card__body em{ flex-wrap:nowrap; white-space:nowrap; }

/* Consistent tap targets */
@media (max-width:620px){
  .btn--sm{ min-height:44px; }
  .demo-card__alt, .case-card__read, .case-card__ext{ display:inline-flex; align-items:center; min-height:40px; }
}
/* pricing card text hierarchy */
.svc-best{ font-size:15px !important; line-height:1.5 !important; }
.svc-outcome{ font-size:15px !important; line-height:1.55 !important; color:var(--navy-70) !important; }
.svc-incl li{ font-size:14px !important; }
.svc-excl{ font-size:13.5px !important; line-height:1.55 !important; color:var(--navy-60) !important; }
.svc-excl span{ color:var(--navy) !important; font-weight:700; }
.svc-incl{ padding-left:0 !important; margin-left:0 !important; list-style:none; }
:root{ --sky:#38BDF8; --step--2: clamp(.74rem, .72rem + .1vw, .8rem); }

/* =========================================================================
   53 · v31 · Top bar, hero, pillars, founder
   ========================================================================= */
.topbar{ background:#070D1A; color:#C9D6EE; font-size:13px; font-weight:500; position:relative; z-index:61; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; }
.topbar p{ display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
.topbar__pos{ color:#fff; font-weight:600; }
.topbar__dot{ width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(135deg,#38BDF8,#2563EB); box-shadow:0 0 10px rgba(56,189,248,.7); }
.topbar__sep{ color:#55627A; }
.topbar__sub{ color:#9FB0CC; font-weight:500; }
.topbar__links{ gap:18px !important; }
.topbar__links a{ display:inline-flex; align-items:center; gap:6px; color:#E7EEFB; font-weight:600; transition:color .2s ease; }
.topbar__links a:hover{ color:#7DD3FC; }
.topbar__links svg{ width:14px; height:14px; color:#7DD3FC; }
@media (max-width:900px){ .topbar__sub, .topbar__sep, .topbar__links a[href="/blog/"]{ display:none; } }
@media (max-width:620px){ .topbar{ display:none; } }
.nav__phone{ display:none; }
@media (max-width:900px){ .nav__phone{ display:flex; align-items:center; justify-content:center; min-height:46px; margin-top:var(--sp-2); border-radius:999px; border:1.5px solid #D6E2FB; font-weight:700; color:var(--navy); } }

/* hero */
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-5); }
.hero__ctas .hero__cta{ margin-top:0; }
.hero--sys h1{ max-width:13ch; }
.hero--sys .lede{ max-width:46ch; }
.hero__proof li{ font-size:.9rem; }
@media (max-width:900px){
  .hero--sys{ padding-top:2rem; }
  .hero--sys h1{ font-size:clamp(32px,8.6vw,44px); max-width:none; }
  .hero__ctas{ margin-top:var(--sp-4); }
  .hero__ctas .btn{ flex:1 1 100%; justify-content:center; }
  .hero__proof{ margin-top:var(--sp-4); gap:.5rem 1rem; }
  .hero--photo .hero__photo{ margin-top:var(--sp-5); }
  .hero__photo img{ aspect-ratio:16/10; max-height:260px; object-position:55% 40%; }
}
@media (max-width:420px){ .hero__ctas .btn--lg{ padding-block:.95em; font-size:1rem; } .hero__proof li{ font-size:.84rem; } }

/* What Pivot Growth actually builds */
.pillars__head{ text-align:center; max-width:66ch; margin-inline:auto; }
.pillars__head .lede{ margin-inline:auto; }
.pillars{ list-style:none; margin:var(--sp-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:none; position:relative; }
.pillars::before{ content:""; position:absolute; left:8%; right:8%; top:48px; height:2px; background:linear-gradient(90deg,rgba(56,189,248,.0),rgba(56,189,248,.55),rgba(56,189,248,0)); }
.pillar{ position:relative; padding:22px 20px 22px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.pillar:hover{ transform:translateY(-5px); border-color:rgba(125,211,252,.45); background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); }
.pillar__top{ display:flex; align-items:center; justify-content:space-between; }
.pillar__ico{ width:52px; height:52px; display:grid; place-items:center; border-radius:16px; color:#fff; background:linear-gradient(145deg,#3B82F6,#2563EB 55%,#1D4ED8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 6px rgba(59,130,246,.14), 0 14px 30px -10px rgba(56,189,248,.7); }
.pillar__ico svg{ width:24px; height:24px; }
.pillar__num{ font:800 13px/1 var(--font-display); letter-spacing:.12em; color:#7DD3FC; }
.pillar h3{ margin-top:18px; color:#fff; font-size:1.2rem; letter-spacing:-.02em; }
.pillar p{ margin-top:.4rem; color:#B9C6DD; font-size:14.5px; line-height:1.55; }
.pillar ul{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:7px; }
.pillar ul li{ display:flex; align-items:center; gap:8px; color:#E7EEFB; font-size:13.5px; font-weight:600; }
.pillar ul li::before{ content:""; width:6px; height:6px; flex:none; border-radius:2px; transform:rotate(45deg); background:#38BDF8; }
@media (max-width:1020px){ .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pillars::before{ display:none; } }
@media (max-width:560px){ .pillars{ grid-template-columns:minmax(0,1fr); gap:12px; } .pillar{ padding:18px; display:grid; grid-template-columns:52px 1fr; column-gap:14px; } .pillar__top{ grid-row:span 3; flex-direction:column; align-items:flex-start; gap:8px; } .pillar h3{ margin-top:2px; } .pillar ul{ grid-column:2; } }

/* founder: one strong photo */
.founder-media__inset{ display:none !important; }
.founder-block__media img{ border-radius:24px; }

/* =========================================================================
   54 · v31 · Case studies
   ========================================================================= */
.case-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:var(--sp-5) 0 0; max-width:900px; }
.case-facts div{ padding:12px 14px; border-radius:14px; background:#fff; border:1px solid #E3EAF6; box-shadow:0 12px 26px -22px rgba(11,26,74,.5); }
.case-facts dt{ font:700 10.5px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.case-facts dd{ margin:.4rem 0 0; font-weight:600; color:var(--navy); font-size:14px; line-height:1.4; }
.case-placeholder{ display:grid; place-content:center; justify-items:center; gap:6px; text-align:center; padding:24px; min-height:220px; width:100%; height:100%; border-radius:var(--r-lg); color:#fff;
  background:radial-gradient(70% 90% at 80% 0%, rgba(56,189,248,.4), transparent 60%), linear-gradient(150deg,#1D4ED8,#0B1A3A 70%); position:relative; overflow:hidden; }
.case-placeholder::before{ content:""; position:absolute; inset:12px; border:1.5px dashed rgba(255,255,255,.3); border-radius:calc(var(--r-lg) - 6px); }
.case-placeholder svg{ width:42px; height:42px; position:relative; }
.case-placeholder strong{ position:relative; font:800 15px/1.2 var(--font-display); }
.case-placeholder span{ position:relative; font-size:12px; color:#C9D6EE; }
.cs-card__media .case-placeholder, .real-card__media .case-placeholder{ border-radius:0; aspect-ratio:16/9; min-height:0; }
.cs-card__media .case-placeholder::before, .real-card__media .case-placeholder::before{ border-radius:10px; }
.case-shot-wrap{ margin:0; }
.case-shot-wrap figcaption{ margin-top:8px; font-size:13px; color:var(--navy-60); }
.cs-card__badges{ position:absolute; right:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; z-index:2; }
.cs-badge{ font:700 10.5px/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:#fff; padding:6px 9px; border-radius:999px; box-shadow:0 6px 16px -8px rgba(7,13,26,.5); }
.cs-badge--active{ background:#FEF3C7; color:#92400E; }
.real-label--active{ background:#F59E0B; }
.case-card__rel{ font-size:14px; font-weight:600; color:var(--navy-60); text-decoration:underline; text-decoration-color:#C9D7F3; text-underline-offset:4px; }
.case-card__rel:hover{ color:var(--blue); }
.cs-card__media{ aspect-ratio:16/9; overflow:hidden; }
.cs-card__media > img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* =========================================================================
   55 · v31 · Blog
   ========================================================================= */
.blog-hero__grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.blog-hero-placeholder{ position:relative; min-height:230px; border-radius:24px; overflow:hidden;
  background:radial-gradient(70% 90% at 85% 0%, rgba(56,189,248,.4), transparent 60%), linear-gradient(150deg,#1D4ED8,#0B1A3A 70%); }
.bh-card{ position:absolute; display:grid; gap:7px; width:58%; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 20px 40px -18px rgba(0,0,0,.6); }
.bh-card b{ font:800 13px/1 var(--font-display); color:var(--blue); letter-spacing:.06em; text-transform:uppercase; }
.bh-card i{ height:8px; border-radius:4px; background:#E3EAF6; } .bh-card i:last-child{ width:70%; }
.bh-card--a{ left:8%; top:12%; } .bh-card--b{ left:22%; top:40%; } .bh-card--c{ left:36%; top:68%; }
@media (max-width:820px){ .blog-hero__grid{ grid-template-columns:minmax(0,1fr); } .blog-hero-placeholder{ min-height:180px; } }
.blog-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.blog-filter__btn{ appearance:none; cursor:pointer; min-height:42px; padding:0 16px; border-radius:999px; border:1.5px solid #D6E2FB; background:#fff; font:700 13.5px/1 var(--font-display); color:var(--navy); transition:background .2s ease,color .2s ease,border-color .2s ease, box-shadow .2s ease; }
.blog-filter__btn:hover{ border-color:var(--blue); color:var(--blue); }
.blog-filter__btn.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 10px 22px -10px rgba(37,99,235,.8); }
@media (max-width:620px){ .blog-filter{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * clamp(1.15rem,4vw,2.5rem)); padding:2px clamp(1.15rem,4vw,2.5rem) 6px; scrollbar-width:none; } .blog-filter::-webkit-scrollbar{ display:none; } .blog-filter__btn{ flex:none; } }
.blog-note{ margin-top:var(--sp-3); color:var(--navy-60); font-size:14px; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); margin-top:var(--sp-5); }
.blog-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 20px 44px -34px rgba(11,26,74,.5); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.blog-card[hidden]{ display:none; }
.blog-card:hover{ transform:translateY(-4px); border-color:#B9CCF3; box-shadow:0 30px 56px -32px rgba(37,99,235,.45); }
.blog-card__visual{ display:grid; place-items:center; aspect-ratio:16/8; color:#fff;
  background:radial-gradient(70% 100% at 80% 0%, rgba(56,189,248,.35), transparent 60%), linear-gradient(150deg,#2563EB,#0B1A3A 75%); }
.blog-card__visual svg{ width:46px; height:46px; padding:10px; border-radius:16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); box-sizing:content-box; }
.blog-card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; flex:1; }
.blog-card__meta{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--navy-60); font-weight:600; }
.blog-card__cat{ color:var(--blue); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:800; }
.blog-card__title{ font-size:1.12rem; line-height:1.3; letter-spacing:-.015em; }
.blog-card__excerpt{ color:var(--navy-70); font-size:14px; line-height:1.55; }
.blog-card__soon{ margin-top:auto; align-self:flex-start; font:700 11px/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:#92400E; background:#FEF3C7; padding:6px 10px; border-radius:999px; }
@media (max-width:1020px){ .blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .blog-grid{ grid-template-columns:minmax(0,1fr); } }
.blog-empty{ margin-top:var(--sp-4); padding:16px 18px; border-radius:14px; background:#EEF4FF; border:1px solid #D6E2FB; color:var(--navy-70); } .blog-empty a{ color:var(--blue); font-weight:700; text-decoration:underline; }
.svc-note{ margin:0 0 var(--sp-3); padding:10px 12px; border-radius:10px; background:#FFF8E6; border:1px solid #FCE3A6; color:#7A5A12; font-size:13px; line-height:1.5; }
/* honeypot: never visible to people */
.hp-field{ position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }

/* =========================================================================
   56 · v31 · Buttons, tabs, focus: one consistent system
   ========================================================================= */
.btn{ overflow:hidden; }
.btn:not(.btn--ghost)::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .6s ease; pointer-events:none; }
.btn:not(.btn--ghost):hover::after{ left:120%; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible, .cat-filter__btn:focus-visible, .need-tab:focus-visible, .work-tab:focus-visible, .demo-filter__btn:focus-visible, .blog-filter__btn:focus-visible, .path-jump__btn:focus-visible{
  outline:3px solid rgba(56,189,248,.9); outline-offset:3px; }
.btn--ghost{ border-color:#C9D7F3; }
.btn--ghost:hover{ background:#F3F7FF; }
.btn--ghost:hover svg:last-child{ transform:translateX(3px); }
/* tabs/filters: same active look everywhere (blue pill, white text, soft glow) */
.cat-filter__btn.is-active, .work-tab.is-active, .demo-filter__btn.is-active, .blog-filter__btn.is-active, .path-jump__btn.is-active{
  background:linear-gradient(180deg,#3B82F6,#2563EB) !important; border-color:#2563EB !important; color:#fff !important; box-shadow:0 10px 22px -10px rgba(37,99,235,.85) !important; }
.work-tab.is-active span{ background:rgba(255,255,255,.2); color:#fff; }
@media (prefers-reduced-motion:reduce){ .btn::after{ display:none; } }
.hp-field{ display:none !important; }
@media (max-width:560px){ .pillar__num{ display:none; } }
.hero-growth-system-visual img{ object-position:50% 35% !important; } @media (max-width:900px){ .hero-growth-system-visual img{ object-position:55% 30% !important; } }
.case-shot--square{ aspect-ratio:1/1; object-fit:cover; max-width:420px; margin-inline:auto; display:block; border-radius:var(--r-lg); }
.case-study-image--logo{ object-fit:contain !important; object-position:center !important; background:#0B0F1A; padding:6%; }
.real-card__media .case-study-image--logo{ display:block; width:100%; aspect-ratio:16/9; }
/* demo cards: small client logo badge */
.demo-logo{ position:absolute; left:12px; top:12px; z-index:4; width:74px; height:40px; display:grid; place-items:center; border-radius:10px; background:var(--tile,#fff);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.18); overflow:hidden; }
.demo-logo img{ max-width:calc(100% - 10px); max-height:calc(100% - 8px); object-fit:contain; display:block; }
.demo-logo b{ font:800 13px/1 var(--font-display); letter-spacing:.04em; color:#fff; }
.demo-logo--text{ width:40px; }
.demo-frame{ top:16%; }

/* =========================================================================
   57 · v33 · Hero v2 (navy split, blended photo), outcomes, simplified home
   ========================================================================= */
.hero-v2{ position:relative; overflow:hidden; background:#070D1A; color:#fff; isolation:isolate; }
.hero-v2__media{ position:absolute; top:0; right:0; bottom:0; width:64%; z-index:-1; }
.hero-v2__media img{ width:100%; height:100%; object-fit:cover; object-position:70% 35%; display:block; }
.hero-v2__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#070D1A 0%, rgba(7,13,26,.88) 18%, rgba(7,13,26,.35) 48%, rgba(7,13,26,0) 72%),
             linear-gradient(0deg, rgba(7,13,26,.55) 0%, rgba(7,13,26,0) 30%); }
.hero-v2::before{ content:""; position:absolute; left:-10%; top:-30%; width:60%; height:120%; z-index:-1;
  background:radial-gradient(closest-side, rgba(37,99,235,.35), transparent 70%); }
.hero-v2::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,#1D4ED8,#38BDF8 50%,#1D4ED8); }
.hero-v2__inner{ display:flex; align-items:center; min-height:clamp(540px,72vh,680px); padding-block:clamp(3rem,7vw,5rem); }
.hero-v2__text{ max-width:600px; }
.hero-v2 h1{ font-size:clamp(2.4rem,5vw,4.1rem); line-height:1.02; letter-spacing:-.045em; font-weight:800; color:#fff; }
.hero-v2__sub{ margin-top:var(--sp-4); font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.55; color:#C9D6EE; max-width:48ch; }
.hero-v2__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-5); }
.hero-v2__trust{ margin-top:var(--sp-5); display:flex; gap:10px; align-items:flex-start; max-width:52ch; font-size:.92rem; font-weight:600; color:#9FB6DC; }
.hero-v2__trust::before{ content:""; flex:none; width:8px; height:8px; margin-top:.45em; border-radius:2px; transform:rotate(45deg); background:linear-gradient(135deg,#38BDF8,#2563EB); box-shadow:0 0 10px rgba(56,189,248,.7); }
@media (max-width:900px){
  .hero-v2__media{ width:100%; }
  .hero-v2__media img{ object-position:78% 30%; }
  .hero-v2__media::after{ background:linear-gradient(90deg, rgba(7,13,26,.94) 0%, rgba(7,13,26,.78) 55%, rgba(7,13,26,.45) 100%), linear-gradient(0deg, #070D1A 0%, rgba(7,13,26,0) 40%); }
  .hero-v2__inner{ min-height:0; padding-block:2.6rem 2.8rem; }
  .hero-v2 h1{ font-size:clamp(2.05rem,8.4vw,2.8rem); }
  .hero-v2__ctas .btn{ flex:1 1 100%; justify-content:center; }
  .hero-v2__trust{ font-size:.86rem; }
}

/* outcomes */
.outcomes__head{ text-align:center; max-width:60ch; margin-inline:auto; }
.outcomes__head .eyebrow{ justify-content:center; }
.outcomes__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:var(--sp-6); }
.outcome{ position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 24px; border-radius:22px; background:linear-gradient(180deg,#fff,#F7FAFF); border:1px solid #E3EAF6;
  box-shadow:0 26px 50px -38px rgba(11,26,74,.55); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden; }
.outcome::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#38BDF8,#2563EB 60%,#1D4ED8); }
.outcome:hover{ transform:translateY(-5px); border-color:#B9CCF3; box-shadow:0 34px 60px -34px rgba(37,99,235,.5); }
.outcome__ico{ width:54px; height:54px; display:grid; place-items:center; border-radius:16px; color:#fff; background:linear-gradient(145deg,#3B82F6,#2563EB 55%,#1D4ED8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 6px rgba(59,130,246,.10), 0 14px 26px -12px rgba(37,99,235,.85); }
.outcome__ico svg{ width:25px; height:25px; }
.outcome h3{ margin-top:8px; font-size:1.45rem; letter-spacing:-.025em; }
.outcome p{ color:var(--navy-70); line-height:1.55; }
.outcome__cta{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--blue); }
.outcome__cta svg{ width:16px; height:16px; transition:transform .2s ease; }
.outcome:hover .outcome__cta svg{ transform:translateX(3px); }
.outcomes__more{ margin-top:var(--sp-5); text-align:center; color:var(--navy-60); }
.outcomes__more a{ color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; margin-inline:4px; }
@media (max-width:900px){ .outcomes__grid{ grid-template-columns:minmax(0,1fr); gap:12px; } .outcome{ padding:20px; } }

/* proof on home: lighter cards (no long facts) */
#case-studies .cs-card__facts > div:not(.cs-card__result){ display:none; }
#case-studies .cs-card__facts{ margin-top:var(--sp-2); }
.hero-v2 h1 span{ display:block; }

/* =========================================================================
   58 · v33 · Solutions: fit guide, pricing preview, mini proof
   ========================================================================= */
.fit-list{ display:grid; gap:12px; margin-top:var(--sp-5); }
.fit-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:18px 22px; border-radius:18px; background:#fff; border:1px solid #E3EAF6;
  box-shadow:0 18px 40px -34px rgba(11,26,74,.55); color:var(--navy); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.fit-row:hover{ transform:translateX(4px); border-color:#9DB9F6; box-shadow:0 24px 46px -30px rgba(37,99,235,.45); }
.fit-row__if{ font:800 12px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(145deg,#3B82F6,#1D4ED8); padding:8px 11px; border-radius:10px; }
.fit-row__case{ font-weight:600; font-size:1.05rem; }
.fit-row__then{ display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--blue); white-space:nowrap; }
.fit-row__then svg{ width:16px; height:16px; }
@media (max-width:760px){ .fit-row{ grid-template-columns:auto 1fr; gap:10px 14px; padding:16px; } .fit-row__then{ grid-column:2; white-space:normal; } }
.pp-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:var(--sp-5); }
.pp-card{ display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:18px; background:linear-gradient(180deg,#fff,#F7FAFF); border:1px solid #E3EAF6; color:var(--navy);
  box-shadow:0 18px 40px -34px rgba(11,26,74,.55); transition:transform .2s ease, border-color .2s ease; }
.pp-card:hover{ transform:translateY(-4px); border-color:#9DB9F6; }
.pp-card strong{ font:800 1.05rem/1.25 var(--font-display); }
.pp-card__price{ font-weight:800; color:var(--blue); }
.pp-card__term{ font-size:13px; color:var(--navy-60); }
.pp-card__more{ margin-top:auto; padding-top:10px; display:inline-flex; gap:6px; align-items:center; font-weight:700; font-size:14px; }
.pp-card__more svg{ width:15px; height:15px; }
@media (max-width:1020px){ .pp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .pp-grid{ grid-template-columns:minmax(0,1fr); } }
.mini-proof-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:var(--sp-5); }
.mini-proof{ display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#fff; border:1px solid #E3EAF6; box-shadow:0 18px 40px -34px rgba(11,26,74,.55); color:var(--navy); transition:transform .2s ease; }
.mini-proof:hover{ transform:translateY(-4px); }
.mini-proof__media{ position:relative; display:block; aspect-ratio:16/9; background:#E6EDFB; }
.mini-proof__media > img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.mini-proof__body{ display:flex; flex-direction:column; gap:6px; padding:16px; flex:1; }
.mini-proof__body strong{ font:800 1.05rem/1.25 var(--font-display); }
.mini-proof__body span{ color:var(--navy-70); font-size:14px; line-height:1.5; }
.mini-proof__body em{ font-style:normal; margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--blue); font-size:14px; }
.mini-proof__body em svg{ width:15px; height:15px; }
@media (max-width:900px){ .mini-proof-grid{ grid-template-columns:minmax(0,1fr); } }

/* =========================================================================
   59 · v33 · Blog article
   ========================================================================= */
.article__wrap{ max-width:760px; }
.article__meta{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:13.5px; font-weight:600; color:var(--navy-60); margin-bottom:var(--sp-3); }
.article__body{ margin-top:var(--sp-5); font-size:1.08rem; line-height:1.75; color:#2B3445; }
.article__body p{ margin-top:1rem; }
.article__lead{ font-size:1.2rem; color:var(--navy); }
.article__body h2{ margin-top:2.2rem; font-size:1.45rem; letter-spacing:-.02em; line-height:1.25; color:var(--navy); }
.article__checks{ margin-top:1rem; list-style:none; padding:0; display:grid; gap:10px; }
.article__checks li{ position:relative; padding:12px 14px 12px 44px; border-radius:12px; background:#F3F7FF; border:1px solid #DCE5F5; font-weight:600; font-size:1rem; }
.article__checks li::before{ content:""; position:absolute; left:14px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:6px; background:linear-gradient(145deg,#3B82F6,#1D4ED8); }
.article__cta{ margin-top:var(--sp-6); padding:clamp(1.3rem,3vw,2rem); border-radius:22px; color:#fff; background:radial-gradient(70% 100% at 100% 0%, rgba(56,189,248,.35), transparent 60%), linear-gradient(150deg,#1D4ED8,#0B1A3A 70%); }
.article__cta h2{ color:#fff; font-size:1.4rem; }
.article__cta p{ color:#D6E2FB; margin:.5rem 0 1.2rem; }
.article__back{ margin-top:var(--sp-5); }
.article__back a{ color:var(--blue); font-weight:700; }
.blog-card__title a{ color:inherit; }
.blog-card__read{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--blue); font-size:14px; }
.blog-card__read svg{ width:15px; height:15px; }
.demo-version{ display:inline-block; vertical-align:middle; margin-left:4px; font:700 10.5px/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:#1D4ED8; background:#EEF4FF; border:1px solid #D6E2FB; padding:5px 8px; border-radius:999px; }

/* =========================================================================
   60 · v34 · Hero chips, Which one fits you, demo preview (static)
   ========================================================================= */
.hero-v2__chips{ position:absolute; right:clamp(16px,4vw,64px); top:50%; transform:translateY(-50%); z-index:0; display:grid; gap:12px; width:250px; pointer-events:none; }
.hv-chip{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:14px; background:rgba(255,255,255,.94); color:#070D1A;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.7); backdrop-filter:blur(6px); }
.hv-chip b{ display:block; font:800 13px/1.2 var(--font-display); }
.hv-chip small{ display:block; font-size:11.5px; color:#5B6474; margin-top:1px; }
.hv-chip--a{ margin-right:40px; } .hv-chip--b{ margin-left:30px; } .hv-chip--c{ margin-right:10px; }
.hv-ico{ width:32px; height:32px; flex:none; border-radius:10px; background:linear-gradient(145deg,#3B82F6,#1D4ED8) center/16px no-repeat; }
.hv-ico--map{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"), linear-gradient(145deg,#3B82F6,#1D4ED8); }
.hv-ico--quote{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H5.2L4 17.2z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"), linear-gradient(145deg,#3B82F6,#1D4ED8); }
.hv-ico--reply{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"), linear-gradient(145deg,#22C55E,#15803D); }
.hero-v2__mark{ position:absolute; left:34%; bottom:-80px; width:340px; opacity:.06; z-index:-1; pointer-events:none; }
@media (max-width:1180px){ .hero-v2__chips{ display:none; } }
@media (max-width:900px){ .hero-v2__mark{ display:none; } }

.fit-paths{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:var(--sp-5); }
.fit-path{ display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:18px; background:#fff; border:1px solid #E3EAF6; color:var(--navy);
  box-shadow:0 18px 40px -34px rgba(11,26,74,.55); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.fit-path:hover{ transform:translateY(-4px); border-color:#9DB9F6; box-shadow:0 26px 50px -30px rgba(37,99,235,.45); }
.fit-path:active{ transform:scale(.99); }
.fit-path__say{ font:800 1.1rem/1.3 var(--font-display); letter-spacing:-.015em; }
.fit-path__svc{ display:flex; flex-wrap:wrap; gap:6px; }
.fit-path__svc em{ font-style:normal; font-size:12.5px; font-weight:600; color:#1D4ED8; background:#EEF4FF; border:1px solid #D6E2FB; padding:5px 9px; border-radius:999px; }
.fit-path__cta{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--blue); font-size:14.5px; }
.fit-path__cta svg{ width:15px; height:15px; }
.fit-path:last-child{ background:linear-gradient(150deg,#1D4ED8,#0B1A3A 75%); border-color:transparent; color:#fff; }
.fit-path:last-child .fit-path__svc em{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; }
.fit-path:last-child .fit-path__cta{ color:#7DD3FC; }
@media (max-width:1020px){ .fit-paths{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .fit-paths{ grid-template-columns:minmax(0,1fr); gap:10px; } .fit-path{ padding:16px; } }

.demo-mini-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:var(--sp-5); }
.demo-mini{ position:relative; display:flex; flex-direction:column; gap:6px; padding:22px; border-radius:20px; overflow:hidden; color:#fff;
  background:radial-gradient(80% 90% at 90% 0%, rgba(56,189,248,.3), transparent 60%), linear-gradient(150deg,#0B1A3A,#070D1A 75%); box-shadow:0 26px 50px -34px rgba(7,13,26,.8); }
.demo-mini__logo{ position:relative; width:84px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--tile,#fff); margin-bottom:8px; overflow:hidden; }
.demo-mini__logo img{ max-width:calc(100% - 12px); max-height:calc(100% - 10px); object-fit:contain; }
.demo-mini__logo b{ font:800 15px/1 var(--font-display); color:#fff; }
.demo-mini__logo.demo-logo--text{ width:46px; }
.demo-mini__tag{ font:700 10.5px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:#7DD3FC; }
.demo-mini h3{ color:#fff; font-size:1.15rem; letter-spacing:-.015em; }
.demo-mini p{ color:#B9C6DD; font-size:14px; }
.demo-mini__cta{ margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#fff; }
.demo-mini__cta svg{ width:14px; height:14px; }
@media (max-width:900px){ .demo-mini-grid{ grid-template-columns:minmax(0,1fr); gap:10px; } .demo-mini{ padding:18px; display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; } .demo-mini__logo{ grid-row:span 4; margin:0; } }
.hv-ico{ background-size:16px 16px, 100% 100% !important; background-repeat:no-repeat !important; background-position:center !important; }

/* ===== 61 · v35 demo screenshot covers ===== */
.demo-shot{ display:block; width:100%; flex:1 1 auto; min-height:0; height:100%; object-fit:cover; background:#0B1220; }
.demo-frame .demo-shot{ height:100%; }
.btn--soon{ background:#E2E8F0; color:#475569; box-shadow:none; cursor:default; pointer-events:none; }
.demo-mini--shot{ padding-top:0; }
.demo-mini__media{ display:block; margin:0 -22px 14px; aspect-ratio:16/8; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1); }
.demo-mini__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.demo-mini--shot:hover .demo-mini__media img{ transform:scale(1.03); }
.demo-mini--shot .demo-mini__logo{ margin-top:-38px; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); border:2px solid rgba(255,255,255,.9); }
@media (max-width:900px){
  .demo-mini--shot{ display:flex; padding:0 18px 18px; }
  .demo-mini--shot .demo-mini__media{ margin:0 -18px 12px; }
  .demo-mini--shot .demo-mini__logo{ grid-row:auto; margin:-34px 0 6px; }
}

/* ===== 62 · v36 logo marquee, compact cards, sliders, watermark fix ===== */
/* watermark logos: never stretch */
.sec-mark, .hero-v2__mark{ height:auto !important; aspect-ratio:1/1; object-fit:contain; max-height:none; }

/* client logo marquee (grayscale, moving left) */
.logo-marquee{ position:relative; display:flex; overflow:hidden; gap:14px; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logo-marquee__track{ list-style:none; margin:0; padding:0; display:flex; gap:14px; flex:none; min-width:max-content; animation:pg-marquee 32s linear infinite; }
.logo-marquee:hover .logo-marquee__track, .logo-marquee:focus-within .logo-marquee__track{ animation-play-state:paused; }
.logo-marquee .logo-tile{ width:176px; filter:grayscale(1); opacity:.78; transition:filter .3s ease, opacity .3s ease, transform .22s ease; }
.logo-marquee .logo-tile:hover, .logo-marquee .logo-tile:focus-visible{ filter:grayscale(0); opacity:1; }
@keyframes pg-marquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-100% - 14px)); } }
@media (max-width:620px){ .logo-marquee .logo-tile{ width:138px; } .logo-marquee__track{ animation-duration:26s; } }
@media (prefers-reduced-motion: reduce){
  .logo-marquee{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none; }
  .logo-marquee__track{ animation:none; } .logo-marquee__track[aria-hidden]{ display:none; }
  .logo-marquee .logo-tile{ scroll-snap-align:start; }
}

/* compact starting-point cards */
#pricing-highlight .price-card{ padding:22px 22px 20px; }
#pricing-highlight .price-card__note{ margin:.4rem 0 .8rem; }
#pricing-highlight .price-card__incl{ gap:.35rem; margin-bottom:1rem; }
.price-card__link{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--blue); font-size:14.5px; }
.price-card__link::after{ content:"→"; transition:transform .2s ease; }
.price-card__link:hover::after{ transform:translateX(3px); }
#pricing-highlight .btn.price-card__cta{ align-self:flex-start; }

/* sliders */
.slider-ui{ display:none; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.slider-ui.is-on{ display:flex; }
.slider-dots{ display:flex; gap:6px; flex-wrap:wrap; }
.slider-dots button{ width:8px; height:8px; padding:0; border-radius:999px; border:0; background:#C7D3EA; cursor:pointer; transition:width .25s ease, background .25s ease; }
.slider-dots button.is-active{ width:22px; background:var(--blue); }
.slider-arrows{ display:flex; gap:8px; }
.slider-arrows button{ width:40px; height:40px; border-radius:50%; border:1px solid #D6E2FB; background:#fff; color:var(--navy); display:grid; place-items:center; cursor:pointer; transition:background .2s, opacity .2s; }
.slider-arrows button:hover{ background:#EEF4FF; }
.slider-arrows button:disabled{ opacity:.35; cursor:default; }
.slider-arrows svg{ width:16px; height:16px; }
.surface-navy .slider-dots button{ background:rgba(255,255,255,.25); }
.surface-navy .slider-dots button.is-active{ background:#60A5FA; }
.surface-navy .slider-arrows button{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff; }

/* fit paths: horizontal slider at every width */
.fit-paths[data-slider]{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:2px; padding:4px 2px 18px; margin-bottom:-18px; scrollbar-width:none; }
.fit-paths[data-slider]::-webkit-scrollbar{ display:none; }
.fit-paths[data-slider] .fit-path{ flex:0 0 clamp(250px,30%,340px); scroll-snap-align:start; }
.fit-paths[data-slider] .fit-path:hover{ transform:translateY(-2px); }

/* mobile: cards become swipeable rows */
@media (max-width:900px){
  .price-grid[data-slider], .pillars[data-slider], .outcomes__grid[data-slider]{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:14px 2px 18px; margin-bottom:-18px; scrollbar-width:none; }
  .price-grid[data-slider]::-webkit-scrollbar, .pillars[data-slider]::-webkit-scrollbar, .outcomes__grid[data-slider]::-webkit-scrollbar{ display:none; }
  .price-grid[data-slider] > *, .pillars[data-slider] > *, .outcomes__grid[data-slider] > *{ flex:0 0 82%; max-width:340px; scroll-snap-align:start; }
  .pillars[data-slider] .pillar{ display:block; }
  .fit-paths[data-slider] .fit-path{ flex-basis:80%; }
}
#pricing-highlight .price-card__link{ align-self:flex-start; justify-content:flex-start; }

/* ===== 63 · v37 niche industry pages, blog covers ===== */
.niche-hero__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.niche-hero__media{ margin:0; border-radius:24px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 34px 70px -36px rgba(11,26,74,.55); background:#E6EDFB; }
.niche-hero__media img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .niche-hero__grid{ grid-template-columns:minmax(0,1fr); } .niche-hero__media{ aspect-ratio:16/11; } }
.niche-help{ list-style:none; margin:var(--sp-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.niche-help__item{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:16px; background:#fff; border:1px solid #E3EAF6; box-shadow:0 18px 40px -34px rgba(11,26,74,.45); }
.niche-help__ico{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#EEF4FF; color:var(--blue); }
.niche-help__ico svg{ width:17px; height:17px; }
.niche-help__item h3{ font-size:1.02rem; letter-spacing:-.01em; }
.niche-help__item p{ margin-top:4px; color:var(--navy-70); font-size:14.5px; line-height:1.5; }
@media (max-width:700px){ .niche-help{ grid-template-columns:minmax(0,1fr); gap:10px; } }
.pp-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .pp-grid--3{ grid-template-columns:minmax(0,1fr); } }
.blog-card__visual--img{ padding:0; display:block; background:#0B1A4A; }
.blog-card__visual--img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card__visual--img img{ transform:scale(1.04); }
.article__cover{ margin:var(--sp-4) 0 var(--sp-5); border-radius:20px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 30px 60px -36px rgba(11,26,74,.5); }
.article__cover img{ display:block; width:100%; height:100%; object-fit:cover; }
.blog-card__visual--img{ aspect-ratio:16/10; }

/* ===== 64 · v37 simplified homepage ===== */
.price-grid--lean .price-card__note{ margin-bottom:1rem; }
/* compact path buttons */
.path-btns{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:var(--sp-4); }
.path-btn{ display:flex; align-items:center; gap:10px; padding:14px 14px; border-radius:14px; background:#fff; border:1px solid #E3EAF6; color:var(--navy); font:700 14.5px/1.25 var(--font-display); letter-spacing:-.01em; transition:border-color .2s, transform .2s, box-shadow .2s; }
.path-btn > span:nth-child(2){ flex:1; }
.path-btn > svg{ width:15px; height:15px; color:var(--blue); flex:none; transition:transform .2s; }
.path-btn:hover{ border-color:#9DB9F6; transform:translateY(-2px); box-shadow:0 18px 36px -26px rgba(37,99,235,.5); }
.path-btn:hover > svg{ transform:translateX(3px); }
.path-btn__ico{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#EEF4FF; color:var(--blue); }
.path-btn__ico svg{ width:17px; height:17px; }
@media (max-width:1100px){ .path-btns{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .path-btns{ grid-template-columns:minmax(0,1fr); gap:8px; } .path-btn{ padding:12px 14px; } }
/* proof cards */
.proof-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:var(--sp-5); }
.proof-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 20px 44px -34px rgba(11,26,74,.5); transition:transform .22s, box-shadow .22s; }
.proof-card:hover{ transform:translateY(-3px); box-shadow:0 30px 56px -32px rgba(37,99,235,.4); }
.proof-card__media{ display:block; aspect-ratio:16/9; overflow:hidden; background:#E6EDFB; }
.proof-card__media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.proof-card__body{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; flex:1; }
.proof-card__ind{ font:700 11px/1.3 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.proof-card h3{ font-size:1.12rem; letter-spacing:-.015em; } .proof-card h3 a{ color:inherit; }
.proof-card p:not(.proof-card__ind){ color:var(--navy-70); font-size:14.5px; line-height:1.5; }
.proof-card__links{ margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; gap:6px 16px; }
.proof-card__links a{ display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:14px; color:var(--blue); }
.proof-card__links svg{ width:13px; height:13px; }
@media (max-width:900px){
  .proof-grid[data-slider], .demo-mini-grid[data-slider]{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:4px 2px 18px; margin-bottom:-18px; scrollbar-width:none; }
  .proof-grid[data-slider]::-webkit-scrollbar, .demo-mini-grid[data-slider]::-webkit-scrollbar{ display:none; }
  .proof-grid[data-slider] > *, .demo-mini-grid[data-slider] > *{ flex:0 0 82%; max-width:340px; scroll-snap-align:start; }
}
/* shopify strip */
.shop-strip{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:20px; align-items:center; padding:16px 20px 16px 16px; border-radius:20px; background:#F4F7FD; border:1px solid #E3EAF6; }
.shop-strip__img{ width:120px; height:90px; object-fit:cover; border-radius:12px; display:block; }
.shop-strip h2{ font-size:1.15rem; letter-spacing:-.015em; }
.shop-strip p{ margin-top:4px; color:var(--navy-70); font-size:14.5px; line-height:1.5; }
@media (max-width:760px){ .shop-strip{ grid-template-columns:72px minmax(0,1fr); padding:14px; gap:14px; } .shop-strip__img{ width:72px; height:72px; } .shop-strip .btn{ grid-column:1 / -1; justify-content:center; } }
/* founder trust points */
.founder-trust{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:8px; }
.founder-trust li{ display:flex; gap:10px; align-items:center; font-weight:600; color:var(--navy); }
.founder-trust li::before{ content:""; flex:none; width:20px; height:20px; border-radius:50%; background:#EEF4FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.founder-trust{ width:fit-content; max-width:100%; } .founder-trust li{ text-align:left; } @media (max-width:820px){ .founder-trust{ margin-inline:auto; } }

/* ===== 65 · v38 light hero, editorial sections, industry tiles ===== */
.hero-v3{ position:relative; overflow:hidden; isolation:isolate; color:var(--navy);
  background:radial-gradient(60% 80% at 85% 10%, rgba(147,197,253,.35), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(191,219,254,.45), transparent 60%), linear-gradient(180deg,#FFFFFF 0%,#F4F8FF 60%,#EAF2FF 100%);
  border-bottom:1px solid #E3EAF6; }
.hero-v3__mark{ position:absolute; z-index:-1; left:-6%; top:50%; transform:translateY(-50%) rotate(-8deg); width:min(760px,70vw); height:auto; aspect-ratio:1/1; opacity:.055; filter:blur(1px); pointer-events:none; user-select:none; }
.hero-v3__grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding-block:clamp(2.5rem,6vw,4.75rem); }
.hero-v3 h1{ font-size:clamp(2.35rem,4.8vw,4rem); line-height:1.03; letter-spacing:-.045em; font-weight:800; color:#07112A; }
.hero-v3 h1 span{ display:block; }
.hero-v3 h1 span:nth-child(3){ color:var(--blue); }
.hero-v3__sub{ margin-top:var(--sp-4); font-size:clamp(1.05rem,1.35vw,1.22rem); line-height:1.55; color:#33415C; max-width:34em; }
.hero-v3__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-5); }
.hero-v3__trust{ margin-top:var(--sp-4); font-size:14.5px; font-weight:600; color:#4B5B78; max-width:36em; }
.hero-v3__media{ position:relative; margin:0; border-radius:26px; overflow:hidden; aspect-ratio:5/4; box-shadow:0 40px 80px -40px rgba(11,26,74,.55), 0 0 0 1px rgba(11,26,74,.06); background:#DCE6F7; }
.hero-v3__media img{ width:100%; height:100%; object-fit:cover; object-position:68% 40%; display:block; }
.hero-v3__badge{ position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--navy); font:700 13px/1 var(--font-display); box-shadow:0 12px 26px -12px rgba(11,26,74,.45); }
.hero-v3__dot{ width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.18); }
@media (max-width:900px){
  .hero-v3__grid{ grid-template-columns:minmax(0,1fr); padding-block:1.75rem 2rem; gap:1.25rem; }
  .hero-v3__media{ aspect-ratio:16/9; border-radius:20px; }
  .hero-v3__mark{ left:auto; right:-30%; top:8%; transform:rotate(-8deg); width:420px; }
  .hero-v3__ctas .btn{ flex:1 1 auto; justify-content:center; }
}

/* problem: editorial columns on navy */
.prob-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid rgba(255,255,255,.14); }
.prob-col{ padding:26px 26px 6px 0; color:#C9D1DE; }
.prob-col + .prob-col{ padding-left:26px; border-left:1px solid rgba(255,255,255,.12); }
.prob-col .chip{ width:42px; height:42px; border-radius:12px; margin-bottom:14px; background:linear-gradient(135deg,#3B82F6,#1D4ED8); color:#fff; }
.prob-col .chip svg{ width:20px; height:20px; }
.prob-col h3{ color:#fff; font-size:1.2rem; }
.prob-col p{ margin-top:6px; line-height:1.55; }
@media (max-width:760px){ .prob-cols{ grid-template-columns:minmax(0,1fr); } .prob-col, .prob-col + .prob-col{ padding:18px 0; border-left:0; border-bottom:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:42px 1fr; column-gap:14px; } .prob-col .chip{ grid-row:span 2; margin:0; } }

/* outcomes: light rows, no boxes */
.outcomes__rows{ gap:0; border-top:1px solid var(--line); }
.outcomes__rows .outcome{ background:none; border:0; border-radius:0; box-shadow:none; padding:28px 28px 8px 0; overflow:visible; }
.outcomes__rows .outcome + .outcome{ padding-left:28px; border-left:1px solid var(--line); }
.outcomes__rows .outcome::before{ display:none; }
.outcomes__rows .outcome:hover{ transform:none; box-shadow:none; }
.outcomes__rows .outcome__ico{ width:46px; height:46px; border-radius:14px; }
.outcomes__rows .outcome h3{ font-size:1.3rem; margin-top:4px; }
@media (max-width:900px){ .outcomes__rows{ grid-template-columns:minmax(0,1fr); } .outcomes__rows .outcome, .outcomes__rows .outcome + .outcome{ padding:20px 0; border-left:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:46px 1fr; column-gap:16px; row-gap:4px; } .outcomes__rows .outcome__ico{ grid-row:span 3; } .outcomes__rows .outcome h3{ margin:0; } }

/* industry tiles */
.ind-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:var(--sp-5); }
.ind-tile{ position:relative; display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:#0B1A3A; isolation:isolate; }
.ind-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; z-index:-2; }
.ind-tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 45%,rgba(7,13,26,.82)); }
.ind-tile span{ position:absolute; left:14px; right:14px; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#fff; font:800 1.05rem/1.2 var(--font-display); letter-spacing:-.01em; }
.ind-tile span svg{ width:16px; height:16px; flex:none; transition:transform .2s; }
.ind-tile:hover img{ transform:scale(1.05); }
.ind-tile:hover span svg{ transform:translateX(3px); }
@media (max-width:900px){ .ind-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .ind-tile{ border-radius:14px; } .ind-tile span{ font-size:.95rem; left:11px; right:11px; bottom:9px; } }

/* audit: one banner */
.audit-cta--banner{ grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; }
.audit-cta--banner .audit-cta__text{ max-width:62ch; }
.audit-cta--banner .eyebrow{ justify-content:center; }
.audit-cta--banner .btn-row{ justify-content:center; }
.hero-v3__grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
.hero-v3 h1{ font-size:clamp(2.3rem,4.4vw,3.7rem); }
.nav__call{ display:none; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--navy); font:700 14px/1 var(--font-display); }
.nav__call svg{ width:16px; height:16px; color:var(--blue); }
@media (max-width:900px){ .nav__call{ display:inline-flex; } .nav__right{ gap:8px; } }
@media (max-width:360px){ .nav__call span{ display:none; } .nav__call{ padding:0 11px; } }

/* ===== 66 · v38 visual page heroes ===== */
.vhero{ position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(55% 80% at 90% 0%, rgba(147,197,253,.30), transparent 60%), linear-gradient(180deg,#FFFFFF 0%,#F5F8FF 100%); border-bottom:1px solid #E8EEF8; }
.vhero::before{ content:""; position:absolute; z-index:-1; left:-8%; top:-20%; width:560px; height:560px; background:url("/assets/img/brand-icon-512.png?v=21") center/contain no-repeat; opacity:.04; transform:rotate(-8deg); pointer-events:none; }
.vhero__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.vhero__text{ max-width:62ch !important; }
.vhero__media{ margin:0; position:relative; }
.vhero__media > img{ display:block; width:100%; height:auto; border-radius:22px; }
.vhero__media:not(.vhero__media--stack):not(.vhero__media--photo):not(.vhero__feature) > img{ mix-blend-mode:multiply; -webkit-mask-image:radial-gradient(120% 100% at 70% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(120% 100% at 70% 50%, #000 62%, transparent 100%); }
/* photo */
.vhero__media--photo{ max-width:460px; justify-self:end; width:100%; }
.vhero__media--photo > img{ aspect-ratio:1/1; object-fit:cover; box-shadow:0 36px 70px -38px rgba(11,26,74,.55); }
.vhero__media--photo figcaption{ position:absolute; left:16px; bottom:16px; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.95); box-shadow:0 12px 26px -12px rgba(11,26,74,.45); font-size:13px; }
.vhero__media--photo figcaption strong{ display:block; color:var(--navy); font-family:var(--font-display); }
.vhero__media--photo figcaption span{ color:var(--navy-60); }
/* stacked client screenshots */
.vhero__media--stack{ aspect-ratio:5/4; }
.vhero__media--stack .st{ position:absolute; width:78%; aspect-ratio:16/10; object-fit:cover; object-position:top center; border-radius:14px; border:1px solid rgba(11,26,74,.08); box-shadow:0 30px 60px -30px rgba(11,26,74,.55); background:#fff; }
.vhero__media--stack .st--1{ left:0; top:4%; transform:rotate(-3deg); }
.vhero__media--stack .st--2{ right:0; top:22%; transform:rotate(2deg); }
.vhero__media--stack .st--3{ left:10%; bottom:2%; z-index:2; }
/* blog featured */
.vhero__feature{ display:block; border-radius:22px; overflow:hidden; background:#0B1A4A; box-shadow:0 36px 70px -38px rgba(11,26,74,.55); color:#fff; }
.vhero__feature > img{ border-radius:0; aspect-ratio:16/10; object-fit:cover; transition:transform .5s ease; }
.vhero__feature:hover > img{ transform:scale(1.03); }
.vhero__feature-cap{ display:grid; gap:6px; padding:18px 20px 20px; background:linear-gradient(180deg,#0B1A4A,#07112A); }
.vhero__feature-cap em{ font-style:normal; font:700 11px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:#7DD3FC; }
.vhero__feature-cap strong{ font:800 1.15rem/1.3 var(--font-display); letter-spacing:-.015em; }
.vhero__feature-cap b{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#BFDBFE; }
.vhero__feature-cap b svg{ width:14px; height:14px; }
@media (max-width:900px){
  .vhero__grid{ grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .vhero__media:not(.vhero__media--stack):not(.vhero__media--photo):not(.vhero__feature){ max-width:520px; margin-inline:auto; }
  .vhero__media--photo{ justify-self:start; max-width:340px; }
  .vhero__media--stack{ aspect-ratio:16/12; max-width:520px; }
}

/* ===== 67 · v38 bigger demo + case images ===== */
@media (min-width:1101px){ .demo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } }
.demo-card__media{ aspect-ratio:16/10; }
.demo-frame{ left:4%; width:92%; top:13%; bottom:-4%; border-radius:12px; }
.demo-frame__bar{ padding:7px 10px; }
.demo-shot{ object-position:left top; }
.demo-logo{ width:84px; height:44px; }
.demo-live__fallback small{ display:none; }
.cs-card__media{ aspect-ratio:2/1; }
.cs-card__media > img{ object-position:top center; }
.real-card__media > img{ aspect-ratio:2/1; }
.proof-card__media{ aspect-ratio:2/1; }
.vhero h1.h-xl{ font-size:clamp(2.2rem,3.9vw,3.4rem); }

/* ===== 68 · v38 blog layout with sidebar ===== */
.blog-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
.blog-layout .blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.blog-side{ position:sticky; top:calc(var(--nav-h, 72px) + 16px); display:grid; gap:14px; }
.side-box{ padding:18px; border-radius:16px; background:#fff; border:1px solid var(--line); }
.side-box h2{ font:800 1rem/1.25 var(--font-display); letter-spacing:-.01em; color:var(--navy); }
.side-box p{ margin-top:6px; color:var(--navy-70); font-size:14px; line-height:1.5; }
.side-box .btn{ margin-top:12px; width:100%; justify-content:center; }
.side-box--start{ background:linear-gradient(180deg,#F4F8FF,#fff); border-color:#D6E2FB; }
.side-box--navy{ background:linear-gradient(150deg,#1D4ED8,#0B1A3A 80%); border:0; }
.side-box--navy h2{ color:#fff; } .side-box--navy p{ color:#C9D6EE; }
.side-link{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:700; font-size:14px; color:var(--blue); }
.side-link svg{ width:14px; height:14px; }
.side-checks{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.side-checks li{ position:relative; padding-left:24px; font-size:14px; line-height:1.45; color:var(--navy-70); }
.side-checks li::before{ content:""; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:5px; border:1.5px solid #9DB9F6; background:#fff; }
.side-topics{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.side-topics button{ appearance:none; cursor:pointer; padding:6px 11px; border-radius:999px; border:1px solid #D6E2FB; background:#EEF4FF; color:#1D4ED8; font:600 13px/1.2 var(--font-body, inherit); }
.side-topics button:hover{ background:#fff; border-color:var(--blue); }
.side-res{ list-style:none; margin:8px 0 0; padding:0; display:grid; }
.side-res li + li{ border-top:1px solid var(--line); }
.side-res a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; font-size:14px; font-weight:600; color:var(--navy); }
.side-res a:hover{ color:var(--blue); }
.side-res svg{ width:13px; height:13px; color:var(--navy-50); flex:none; }
@media (max-width:1020px){ .blog-layout{ grid-template-columns:minmax(0,1fr); } .blog-side{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .blog-layout .blog-grid{ grid-template-columns:minmax(0,1fr); } .blog-side{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){ .vhero__media:not(.vhero__media--stack):not(.vhero__media--photo):not(.vhero__feature){ max-width:400px; } .vhero__media--photo{ max-width:300px; } }

/* ===== 69 · v39 hero (photo behind text, white), industry cards, section images ===== */
.hero-v4{ position:relative; overflow:hidden; isolation:isolate; background:#fff; color:#05070D; border-bottom:1px solid #E8EEF8; }
.hero-v4__media{ position:absolute; inset:0 0 0 auto; width:66%; z-index:-2; }
.hero-v4__media img{ width:100%; height:100%; object-fit:cover; object-position:70% 35%; display:block; }
.hero-v4__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 14%,rgba(255,255,255,.72) 34%,rgba(255,255,255,.18) 62%,rgba(255,255,255,0) 80%), linear-gradient(0deg,rgba(255,255,255,.55),transparent 30%); }
.hero-v4__mark{ position:absolute; z-index:-1; left:-7%; top:50%; transform:translateY(-50%) rotate(-8deg); width:min(700px,62vw); height:auto; aspect-ratio:1/1; opacity:.05; pointer-events:none; user-select:none; }
.hero-v4__inner{ display:flex; align-items:center; min-height:clamp(520px,70vh,660px); padding-block:clamp(2.75rem,6vw,4.5rem); }
.hero-v4__text{ max-width:600px; }
.hero-v4 h1{ font-size:clamp(2.4rem,5vw,4.1rem); line-height:1.02; letter-spacing:-.045em; font-weight:800; color:#05070D; }
.hero-v4 h1 span{ display:block; }
.hero-v4__sub{ margin-top:var(--sp-4); font-size:clamp(1.05rem,1.35vw,1.22rem); line-height:1.55; color:#1F2937; max-width:34em; }
.hero-v4__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-5); }
.hero-v4__ctas .btn--ghost{ background:rgba(255,255,255,.9); }
.hero-v4__trust{ margin-top:var(--sp-4); font-size:14.5px; font-weight:600; color:#374151; max-width:34em; }
@media (max-width:900px){
  .hero-v4__media{ width:100%; inset:auto 0 0 0; height:58%; }
  .hero-v4__media img{ object-position:72% 30%; }
  .hero-v4__media::after{ background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.85) 22%,rgba(255,255,255,.25) 60%,rgba(255,255,255,.1) 100%); }
  .hero-v4__inner{ min-height:0; align-items:flex-start; padding-block:1.75rem 15rem; }
  .hero-v4__ctas .btn{ flex:1 1 auto; justify-content:center; }
  .hero-v4__mark{ left:auto; right:-30%; top:4%; transform:rotate(-8deg); width:420px; }
}
@media (max-width:420px){ .hero-v4__inner{ padding-bottom:12.5rem; } }

/* industry cards (images include titles) */
.ind-cards2{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:var(--sp-5); }
.ind-card2{ display:block; aspect-ratio:2.06/1; border-radius:14px; overflow:hidden; background:#EEF3FB; box-shadow:0 14px 30px -22px rgba(11,26,74,.45), 0 0 0 1px rgba(11,26,74,.06); transition:transform .22s ease, box-shadow .22s ease; }
.ind-card2 img{ width:100%; height:100%; object-fit:cover; display:block; }
.ind-card2:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -22px rgba(37,99,235,.5), 0 0 0 1px rgba(37,99,235,.2); }
@media (max-width:1020px){ .ind-cards2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .ind-cards2{ gap:8px; } .ind-card2{ border-radius:10px; } }

/* outcomes with images */
.outcomes--img .outcome__img{ display:block; border-radius:14px; overflow:hidden; aspect-ratio:2.06/1; margin-bottom:8px; box-shadow:0 14px 30px -22px rgba(11,26,74,.45), 0 0 0 1px rgba(11,26,74,.06); }
.outcomes--img .outcome__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.outcomes--img .outcome{ padding-top:24px; }
@media (max-width:900px){ .outcomes--img .outcome, .outcomes--img .outcome + .outcome{ display:flex; flex-direction:column; gap:6px; } }

/* starting points with images */
.price-card__img{ display:block; margin:6px 0 14px; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#EEF3FB; }
.price-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
#pricing-highlight .price-card__img{ aspect-ratio:2.06/1; }
.outcomes--img .outcome:last-child .outcome__img{ background:#F5F8FF; }
.outcomes--img .outcome:last-child .outcome__img img{ object-position:center 55%; }
@media (max-width:900px){
  .hero-v4__media{ height:44%; }
  .hero-v4__media::after{ background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 18%,rgba(255,255,255,.1) 55%,transparent 100%); }
  .hero-v4__inner{ padding-bottom:16.5rem; }
}
@media (max-width:420px){ .hero-v4__inner{ padding-bottom:14.5rem; } }

/* ===== 70 · v40 pricing hub: featured packages + collapsible catalog ===== */
.feat-pkgs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:var(--sp-5); }
.feat-pkg{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 22px 46px -36px rgba(11,26,74,.5); }
.feat-pkg:nth-child(3){ border-color:#93B4F5; box-shadow:0 0 0 1px #93B4F5, 0 28px 56px -34px rgba(37,99,235,.55); }
.feat-pkg__media{ display:block; aspect-ratio:2.06/1; background:#EEF3FB; overflow:hidden; }
.feat-pkg__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.feat-pkg:hover .feat-pkg__media img{ transform:scale(1.03); }
.feat-pkg__body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.feat-pkg__tag{ align-self:flex-start; font:700 10.5px/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:#EEF4FF; padding:6px 9px; border-radius:999px; }
.feat-pkg h3{ font-size:1.25rem; letter-spacing:-.02em; } .feat-pkg h3 a{ color:inherit; }
.feat-pkg__price{ font:800 1.08rem/1.3 var(--font-display); color:var(--blue); } .feat-pkg__price span{ font-weight:600; color:var(--navy-60); font-size:.9rem; }
.feat-pkg__desc{ color:var(--navy-70); line-height:1.55; }
.feat-pkg__best{ font-size:14px; color:var(--navy-70); padding-top:8px; border-top:1px solid var(--line); }
.feat-pkg__best strong{ color:var(--navy); }
.feat-pkg__cta{ margin-top:auto; justify-content:center; }
.also-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:var(--sp-4); }
.also-row__label{ font-weight:700; color:var(--navy-60); font-size:14px; margin-right:4px; }
.also-chip{ display:inline-flex; align-items:baseline; gap:8px; padding:8px 13px; border-radius:999px; background:#fff; border:1px solid #D6E2FB; color:var(--navy); font-size:14px; }
.also-chip strong{ font-weight:700; } .also-chip span{ color:var(--navy-60); font-size:13px; }
.also-chip:hover{ border-color:var(--blue); }
@media (max-width:900px){ .feat-pkgs{ grid-template-columns:minmax(0,1fr); gap:14px; } .feat-pkg{ display:grid; grid-template-columns:minmax(0,1fr); } }
.catalog-intro{ padding-bottom:0 !important; }
.svc-section{ padding-block:clamp(.6rem,1.5vw,1rem) !important; }
.svc-cat--toggle{ cursor:pointer; align-items:center; margin:0; padding:18px 20px; border-radius:16px; background:#fff; border:1px solid var(--line); transition:border-color .2s, box-shadow .2s; }
.svc-cat--toggle:hover{ border-color:#9DB9F6; }
.svc-cat--toggle > div{ flex:1; min-width:0; }
.svc-cat--toggle.is-open{ border-color:#9DB9F6; box-shadow:0 18px 40px -30px rgba(37,99,235,.5); margin-bottom:var(--sp-4); }
.svc-cat__btn{ flex:none; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid #D6E2FB; background:#EEF4FF; color:#1D4ED8; font:700 14px/1 var(--font-display); cursor:pointer; }
.svc-cat__btn svg{ width:16px; height:16px; transition:transform .25s; }
.svc-cat--toggle.is-open .svc-cat__btn svg{ transform:rotate(180deg); }
@media (max-width:620px){ .svc-cat--toggle{ flex-wrap:wrap; padding:14px 16px; } .svc-cat__btn{ width:100%; justify-content:center; } }

/* ===== 71 · v40 package detail pages ===== */
.vhero__media--card > img{ border-radius:20px; box-shadow:0 34px 70px -40px rgba(11,26,74,.5); -webkit-mask-image:none !important; mask-image:none !important; mix-blend-mode:normal !important; aspect-ratio:2.06/1; object-fit:cover; }
.pkg-price{ margin-top:var(--sp-3); font:800 1.35rem/1.3 var(--font-display); color:var(--blue); }
.pkg-price span{ font-weight:600; font-size:1rem; color:var(--navy-60); }
.pkg-split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.75rem,5vw,4rem); align-items:start; }
.pkg-split h2{ margin-top:6px; }
@media (max-width:820px){ .pkg-split{ grid-template-columns:minmax(0,1fr); } }
.pkg-who{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:0; }
.pkg-who li{ padding:12px 0 12px 30px; border-bottom:1px solid var(--line); position:relative; color:var(--navy); font-weight:600; line-height:1.45; }
.pkg-who li::before{ content:"→"; position:absolute; left:2px; top:12px; color:var(--blue); font-weight:800; }
.pkg-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:10px; }
.pkg-list li{ display:flex; gap:12px; align-items:flex-start; line-height:1.45; color:var(--navy); }
.pkg-ico{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.pkg-ico svg{ width:12px; height:12px; }
.pkg-ico--yes{ background:#E7F0FF; color:var(--blue); }
.pkg-ico--no{ background:#F1F3F7; color:#64748B; }
.pkg-list--no li{ color:var(--navy-70); }
.pkg-time{ margin-top:var(--sp-4); padding:14px 16px; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--navy-70); }
.pkg-time strong{ color:var(--navy); }
.pkg-steps{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.pkg-steps li{ display:flex; gap:14px; padding:22px 22px 6px 0; }
.pkg-steps li + li{ padding-left:22px; border-left:1px solid var(--line); }
.pkg-steps li > span{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; font:800 15px/1 var(--font-display); }
.pkg-steps h3{ font-size:1.1rem; } .pkg-steps p{ margin-top:4px; color:var(--navy-70); line-height:1.5; }
@media (max-width:820px){ .pkg-steps{ grid-template-columns:minmax(0,1fr); } .pkg-steps li, .pkg-steps li + li{ padding:16px 0; border-left:0; border-bottom:1px solid var(--line); } }

/* ===== 72 · v40 compact mobile hero ===== */
@media (max-width:900px){
  .hero-v4{ background:linear-gradient(180deg,#FFFFFF 0%,#F4F8FF 100%); }
  .hero-v4__inner{ padding-block:1.4rem 11.5rem; }
  .hero-v4 h1{ font-size:clamp(2rem,9vw,2.6rem); line-height:1.04; }
  .hero-v4__sub{ margin-top:.75rem; font-size:1rem; line-height:1.5; }
  .hero-v4__ctas{ margin-top:1.1rem; gap:6px 16px; align-items:center; }
  .hero-v4__ctas .btn:not(.btn--ghost){ flex:1 1 100%; min-height:50px; padding-block:.8rem; font-size:1rem; }
  .hero-v4__ctas .btn--ghost{ flex:0 0 auto; background:none !important; border:0 !important; box-shadow:none !important; padding:.4rem 0; min-height:0; color:var(--blue); font-size:.98rem; text-decoration:underline; text-underline-offset:4px; }
  .hero-v4__trust{ margin-top:.6rem; font-size:13px; line-height:1.45; }
  .hero-v4__media{ height:40%; }
  .hero-v4__media img{ object-position:74% 28%; }
  .hero-v4__media::after{ background:linear-gradient(180deg,#F4F8FF 0%,rgba(244,248,255,.55) 22%,rgba(255,255,255,0) 50%); }
}
@media (max-width:420px){ .hero-v4__inner{ padding-bottom:10rem; } }
@media (max-width:360px){ .hero-v4__inner{ padding-bottom:8.5rem; } .hero-v4__trust{ display:none; } }
@media (max-width:900px){
  .ind-cards2[data-slider]{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding:4px 2px 16px; margin-bottom:-16px; scrollbar-width:none; }
  .ind-cards2[data-slider]::-webkit-scrollbar{ display:none; }
  .ind-cards2[data-slider] > .ind-card2{ flex:0 0 80%; max-width:360px; scroll-snap-align:start; }
}
@media (max-width:620px){ #industries .demo-preview__head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:12px; } #industries .demo-preview__head .btn{ padding:.6rem .9rem; font-size:.9rem; flex:none; } }
.audit-cta--banner{ background:none !important; border:0 !important; box-shadow:none !important; padding-block:0; }
.demo-thumbs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:var(--sp-5); }
.demo-thumb{ display:block; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; color:var(--navy); transition:transform .2s, box-shadow .2s; }
.demo-thumb:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -30px rgba(11,26,74,.5); }
.demo-thumb img{ display:block; width:100%; aspect-ratio:2/1; object-fit:cover; object-position:left top; }
.demo-thumb span{ display:grid; gap:2px; padding:12px 14px; } .demo-thumb strong{ font-family:var(--font-display); } .demo-thumb small{ color:var(--navy-60); }
@media (max-width:760px){ .demo-thumbs{ grid-template-columns:minmax(0,1fr); } }
.demo-live__fallback{ display:grid; place-items:center; text-align:center; }

/* ===== 73 · v40 blog: featured article, upcoming topics, article sidebar ===== */
.blog-feature{ display:grid; grid-template-columns:minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 24px 50px -38px rgba(11,26,74,.5); margin-top:var(--sp-3); }
.blog-feature__media{ display:block; aspect-ratio:16/8; overflow:hidden; background:#0B1A4A; }
.blog-feature__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-feature__body{ padding:22px 24px 24px; display:grid; gap:10px; justify-items:start; }
.blog-feature__title{ font-size:clamp(1.35rem,2.2vw,1.7rem); letter-spacing:-.02em; line-height:1.2; } .blog-feature__title a{ color:var(--navy); }
.blog-feature__body > p:not(.blog-card__meta){ color:var(--navy-70); line-height:1.6; }
.blog-feature__list{ margin:0 0 6px; padding-left:1.1rem; color:var(--navy); display:grid; gap:4px; }
.blog-card__meta{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:13px; color:var(--navy-60); }
.side-up{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px; }
.side-up li{ display:flex; gap:10px; align-items:center; }
.side-up img{ width:64px; height:48px; border-radius:8px; object-fit:cover; flex:none; opacity:.9; }
.side-up strong{ display:block; font-size:13.5px; line-height:1.3; color:var(--navy); font-weight:700; }
.side-up small{ font-size:12px; color:var(--navy-60); }
.side-topics a{ display:inline-block; padding:6px 11px; border-radius:999px; border:1px solid #D6E2FB; background:#EEF4FF; color:#1D4ED8; font-weight:600; font-size:13px; }
.side-topics a:hover{ background:#fff; border-color:var(--blue); }
.side-toc ol{ margin:10px 0 0; padding-left:1.1rem; display:grid; gap:6px; font-size:14px; }
.side-toc a{ color:var(--navy-70); } .side-toc a:hover{ color:var(--blue); }
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.article-layout .article__wrap{ max-width:760px; }
.article__body h2{ scroll-margin-top:calc(var(--nav-h, 72px) + 16px); }
.article__faq{ margin-top:var(--sp-3); font-size:1rem; }
.article__related{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.article__related h2{ font-size:1.3rem; }
.article__related ul{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.article__related li{ display:grid; gap:8px; }
.article__related img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.article__related strong{ font-size:14px; line-height:1.35; color:var(--navy); display:block; } .article__related small{ color:var(--navy-60); font-size:12.5px; }
.article__related-links{ margin-top:var(--sp-4); color:var(--navy-70); font-size:15px; } .article__related-links a{ color:var(--blue); font-weight:700; }
@media (max-width:1020px){ .article-layout{ grid-template-columns:minmax(0,1fr); } .article-layout .blog-side{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } .side-toc{ display:none; } }
@media (max-width:620px){ .article-layout .blog-side{ grid-template-columns:minmax(0,1fr); } .article__related ul{ grid-template-columns:minmax(0,1fr); } .article__related li{ grid-template-columns:96px 1fr; align-items:center; } }
.svc-grid[hidden]{ display:none !important; }

/* ===== 74 · v41 mobile header: no squeezed brand ===== */
.brand-word{ white-space:nowrap; }
.site-header .brand{ min-width:0; flex-shrink:0; }
@media (max-width:900px){
  .nav__right{ gap:8px; flex:none; }
  .nav__call{ height:40px; width:40px; padding:0; justify-content:center; border-radius:12px; }
  .nav__call span{ display:none; }
  .nav__toggle{ width:40px; height:40px; }
}
@media (max-width:400px){ .brand-icon{ width:34px; height:34px; } .brand-word{ font-size:1.12rem; } .site-header .brand{ gap:.45rem; } }
@media (max-width:340px){ .brand-word{ font-size:1.02rem; } }

/* ===== 75 · v41 mobile hero: photo as full background, dark text ===== */
@media (max-width:900px){
  .hero-v4{ background:#fff; }
  .hero-v4__media{ inset:0; width:100%; height:100%; }
  .hero-v4__media img{ object-position:72% 30%; }
  .hero-v4__media::after{ background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.90) 45%,rgba(255,255,255,.80) 75%,rgba(255,255,255,.70) 100%), linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 70%); }
  .hero-v4__inner{ padding-block:2.25rem 2.5rem !important; min-height:0; }
  .hero-v4 h1{ color:#05070D; }
  .hero-v4__sub{ color:#111827; font-weight:500; }
  .hero-v4__trust{ display:block !important; color:#1F2937; }
  .hero-v4__mark{ display:none; }
}
@media (max-width:900px){
  .hero-v4__media img{ object-position:78% 22%; }
  .hero-v4__media::after{ background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.84) 40%,rgba(255,255,255,.62) 72%,rgba(255,255,255,.28) 100%), linear-gradient(90deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.15) 60%,rgba(255,255,255,0) 100%); }
  .hero-v4__inner{ padding-bottom:5.5rem !important; }
  .hero-v4__trust{ text-shadow:0 0 12px rgba(255,255,255,.9); }
}

/* ===== 76 · v42 floating WhatsApp ===== */
.wa-float{ position:fixed; right:24px; bottom:24px; z-index:999; display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 18px 0 14px; border-radius:999px; background:#25D366; color:#fff; font:700 15px/1 var(--font-display); box-shadow:0 14px 30px -10px rgba(16,94,49,.55); transition:transform .2s ease, box-shadow .2s ease; }
.wa-float svg{ width:26px; height:26px; }
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(16,94,49,.6); color:#fff; }
@media (max-width:900px){ .wa-float{ width:52px; padding:0; justify-content:center; right:16px; bottom:88px; } .wa-float span{ display:none; } }
@media print{ .wa-float{ display:none; } }
body:has(#cookie-banner:not([hidden])) .wa-float{ display:none; }

/* ===== 77 · v44 mobile hero: clean text area + crisp photo at the bottom ===== */
@media (max-width:900px){
  .hero-v4{ background:linear-gradient(180deg,#FFFFFF 0%,#F3F7FF 100%); }
  .hero-v4__media{ inset:auto 0 0 0 !important; width:100%; height:330px !important; }
  .hero-v4__media img{ object-position:74% 18% !important; filter:none; }
  .hero-v4__media::after{ background:linear-gradient(180deg,#F3F7FF 0%,rgba(243,247,255,.85) 14%,rgba(243,247,255,0) 42%) !important; }
  .hero-v4__inner{ padding-block:1.75rem 290px !important; }
  .hero-v4 h1{ font-size:clamp(2.15rem,9.6vw,2.7rem); letter-spacing:-.04em; }
  .hero-v4__sub{ font-size:1.02rem; color:#1F2937; font-weight:400; }
  .hero-v4__ctas{ margin-top:1.1rem; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
  .hero-v4__ctas .btn--ghost{ text-decoration:none !important; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
  .hero-v4__ctas .btn--ghost::after{ content:"→"; }
  .hero-v4__trust{ margin-top:.7rem; font-size:12.5px; color:#4B5563; text-shadow:none; }
  .hero-v4__mark{ display:block !important; left:auto; right:-38%; top:-4%; width:380px; opacity:.05; transform:rotate(-8deg); }
}
@media (max-width:380px){ .hero-v4__media{ height:290px !important; } .hero-v4__inner{ padding-bottom:250px !important; } }

/* ===== 78 · v45 mobile hero: photo in the middle as background, CTA on glass card ===== */
@media (max-width:900px){
  .hero-v4{ background:#fff; }
  .hero-v4__media{ inset:190px 0 0 0 !important; height:auto !important; width:100%; }
  .hero-v4__media img{ object-position:72% 22% !important; }
  .hero-v4__media::after{ background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 16%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(255,255,255,.15) 100%) !important; }
  .hero-v4__inner{ padding-block:1.5rem 1.25rem !important; }
  .hero-v4__text{ display:flex; flex-direction:column; width:100%; }
  .hero-v4__sub{ max-width:21em; text-shadow:0 0 18px #fff, 0 0 6px #fff; }
  .hero-v4__action{ margin-top:clamp(190px,52vw,240px); padding:16px; border-radius:20px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 18px 40px -20px rgba(11,26,74,.45); border:1px solid rgba(255,255,255,.7); }
  .hero-v4__action .hero-v4__ctas{ margin-top:0; }
  .hero-v4__action .hero-v4__trust{ margin-top:.6rem; color:#374151; }
}
.wa-float{ transition:opacity .25s ease, transform .25s ease; } .wa-float--hide{ opacity:0; pointer-events:none; transform:translateY(12px); }

/* ===== 79 · v47 mobile hero: option A (full photo, navy overlay, white text) ===== */
@media (max-width:900px){
 .hero-v4{background:#fff!important}
 .hero-v4__media{inset:0!important;height:100%!important;width:100%!important}
 .hero-v4__media::after{background:none!important}
 .hero-v4__inner{padding:0 1.15rem!important;min-height:0!important;display:block!important}
 .hero-v4__text{display:block!important;max-width:none!important}
 .hero-v4__action{margin:0!important;padding:0!important;background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .hero-v4__sub,.hero-v4__trust,.hero-v4 h1{text-shadow:none!important;max-width:none!important}
 .hero-v4__mark{display:none!important}
}
/* A: full photo, navy overlay, white text */
@media (max-width:900px){
 .hero-v4{background:#0B1530!important}
 .hero-v4__media img{object-position:72% 25%!important}
 .hero-v4__media::after{background:linear-gradient(180deg,rgba(7,17,42,.82) 0%,rgba(7,17,42,.62) 45%,rgba(7,17,42,.35) 70%,rgba(7,17,42,.85) 100%)!important}
 .hero-v4__inner{padding:2.2rem 1.15rem 2.2rem!important;min-height:640px!important}
 .hero-v4 h1{color:#fff!important}
 .hero-v4 h1 span:nth-child(3){color:#7DB4FF!important}
 .hero-v4__sub{color:#E2E8F5!important;margin-top:.9rem!important}
 .hero-v4__ctas{margin-top:1.4rem!important}
 .hero-v4__ctas .btn--ghost{color:#fff!important}
 .hero-v4__trust{color:#C7D2E6!important;margin-top:.8rem!important}
 .hero-v4__action{margin-top:13rem!important}
}