/* =========================================================
   Flowform Studio — Design System v3 (Studiora-style)
   Dark · Editorial · Bold sans + italic-serif accents · Blue glow
   Inter + Instrument Serif · 8px spacing · Spacious · Pill buttons
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Accent (blue) */
  --primary:      #146EF5;
  --primary-2:    #5B9BFF;   /* lighter blue for text/accents on dark */
  --primary-ink:  #3B82F6;
  --glow:         rgba(20,110,245,.45);
  --success:      #34D399;

  /* Dark neutrals */
  --bg:        #08090B;   /* page background, near-black */
  --surface:   #0F1115;   /* cards */
  --surface-2: #121419;   /* elevated / alt sections */
  --surface-3: #171A20;   /* hover / inputs */
  --ink:       #F6F7F9;   /* headings, near-white */
  --ink-2:     #B9BEC7;   /* body text */
  --muted:     #82878F;   /* secondary text */
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.055);
  --dark:      #08090B;

  /* Compatibility aliases */
  --accent:    var(--primary-2);
  --secondary: var(--muted);
  --grad-soft: var(--surface-2);
  --primary-tint: rgba(20,110,245,.14);
  --sh-glow:   0 0 60px rgba(20,110,245,.25);

  /* Shadows (soft, on dark) */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 10px 30px rgba(0,0,0,.5);
  --sh-lg: 0 30px 70px rgba(0,0,0,.6);

  /* Spacing (8px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:80px; --s-9:120px; --s-10:160px;

  /* Radius */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --maxw: 1440px;
  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* scroll-behavior intentionally NOT smooth here — GSAP ScrollTrigger (used for the
   pinned Services cards) fights with native smooth-scroll and causes jank; anchor
   links get their smooth scroll via JS (main.js) instead, scoped per-click. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(20,110,245,.35); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.h-72 { font-size: clamp(44px, 7vw, 92px); letter-spacing: -.04em; line-height: 1.02; font-weight: 600; }
.h-60 { font-size: clamp(38px, 5.4vw, 72px); letter-spacing: -.035em; line-height: 1.04; font-weight: 600; }
.h-48 { font-size: clamp(30px, 4.2vw, 54px); letter-spacing: -.03em; }
.h-36 { font-size: clamp(24px, 2.8vw, 38px); letter-spacing: -.02em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: var(--muted);
}
.eyebrow .ic { color: var(--primary-2); }
.lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--muted); }
/* Italic-serif accent (Studiora signature) — reuses existing .grad-text markup */
.grad-text {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--primary-2); background: none; -webkit-text-fill-color: currentColor;
  letter-spacing: 0; padding-right: .04em;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }

/* ---------- Bootstrap grid (row / col-*) — 1440 container, aligned to our spacing scale ---------- */
.row { --bs-gutter-x: var(--s-6); }
.container-xxl { max-width: var(--maxw); }
@media (min-width: 1400px) {
  .container, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { max-width: var(--maxw); }
}
.section { padding-block: var(--s-9); position: relative; }
.section--tight { padding-block: var(--s-8); }
.section-head { max-width: 720px; margin-bottom: var(--s-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--s-4); }
.section-head h2 { margin-bottom: var(--s-4); }
.grid { display: grid; gap: var(--s-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); }
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }

/* Grid items default to min-width:auto, which lets their content's
   intrinsic width force tracks wider than the container on narrow
   viewports. Zero-specificity reset so grid children can shrink below
   their content size and wrap instead of overflowing horizontally. */
:where(.grid, .split, .form-row, .approach, .contact-grid, .why__grid,
  .pricing-cta__grid, .metrics, .stats-band__grid, .ind-grid,
  .about-intro, .about-pillars, .about-stats, .about-team, .about-logos,
  .svc-grid, .svc-process, .detail-hero, .ps-grid, .numbers-grid,
  .testi-grid, .logos-bento, .logos-bento__grid, .footer__cols, .footer__top,
  .mega__cols, .svc-card__inner, .svc-spotlight, .work__head, .showcase__row,
  .proc-grid, .tl-step, .story, .hiw, .quote-modal__panel,
  .case-detail, .case-related) > * { min-width: 0; }

/* ---------- Icons ---------- */
.ic { width: 20px; height: 20px; flex: none; }
.ic--sm { width: 15px; height: 15px; }
.ic--xs { width: 13px; height: 13px; }

/* ---------- Buttons (pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 13px 24px; border-radius: var(--r-pill);
  font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s, opacity .2s;
}
.btn .ic { width: 17px; height: 17px; }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 0 0 1px rgba(20,110,245,.4), 0 10px 30px rgba(20,110,245,.28); }
.btn--primary:hover { background: var(--primary-ink); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(20,110,245,.5), 0 14px 40px rgba(20,110,245,.4); }
.btn--ghost { background: rgba(255,255,255,.03); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); transform: translateY(-1px); }
/* .btn--dark becomes a light pill on the dark theme (Studiora style) */
.btn--dark { background: #fff; color: #0A0A0A; }
.btn--dark:hover { background: #e9eaec; transform: translateY(-1px); }
.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--primary); box-shadow: 0 0 10px var(--glow); z-index: 1000; transition: width .1s linear; }

/* ---------- Announcement bar ---------- */
.announce { background: #050608; color: rgba(255,255,255,.72); font-size: 13.5px; border-bottom: 1px solid var(--line-2); }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding-block: 9px; position: relative; }
.announce__pill { background: var(--primary); color: #fff; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; margin-right: 4px; }
.announce__link { color: #fff; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; border-bottom: 1px solid rgba(255,255,255,.3); }
.announce__close { position: absolute; right: var(--s-5); color: rgba(255,255,255,.5); font-size: 18px; }
.announce.is-hidden { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(8,9,11,.7);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s;
}
.site-header.is-scrolled { border-color: var(--line-2); background: rgba(8,9,11,.85); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand__logo { height: 45px; width: auto; display: block; }
.brand--footer .brand__logo { height: 34px; }

.mainnav__list { display: flex; align-items: center; gap: 2px; }
.mainnav__link { display: inline-flex; align-items: center; gap: 4px; padding: 9px 13px; border-radius: var(--r-pill); font-weight: 400; font-size: 14.5px; color: var(--ink-2); transition: color .2s, background .2s; }
.mainnav__link:hover, .mainnav__link.is-active { color: var(--ink); background: rgba(255,255,255,.06); }
.caret { font-size: 9px; opacity: .5; }

/* Mega menu */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(720px, 92vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s-4);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 950;
}
.has-mega:hover .mega, .has-mega.is-open .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.mega__col + .mega__col { border-left: 1px solid var(--line-2); padding-left: var(--s-2); }
.mega__col-label { padding: var(--s-2) var(--s-3) 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mega__item { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); transition: background .2s; }
.mega__item:hover { background: var(--surface-3); }
.mega__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--primary-tint); color: var(--primary-2); }
.mega__icon .ic { width: 19px; height: 19px; }
.mega__text strong { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }
.mega__text small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.mega__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-2); }
.mega__cta strong { font-size: 14.5px; color: var(--ink); }
.mega__cta p { font-size: 13px; color: var(--muted); }

.site-header__actions { display: flex; align-items: center; gap: var(--s-3); }
.header-call { display: flex; align-items: center; gap: var(--s-2); font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.header-call .ic { width: 17px; height: 17px; color: var(--primary); }
.header-call:hover { color: var(--primary); }
.drawer .header-call { font-size: 17px; margin: var(--s-2) 0 var(--s-4); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.hamburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(360px,86vw); background: var(--surface); z-index: 999; transform: translateX(100%); transition: transform .35s var(--ease); padding: calc(var(--header-h) + var(--s-5)) var(--s-5) var(--s-5); box-shadow: var(--sh-lg); overflow-y: auto; border-left: 1px solid var(--line); }
.drawer.is-open { transform: translateX(0); }
.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__link { padding: var(--s-3) var(--s-2); font-size: 18px; font-weight: 400; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.drawer__cta { margin-top: var(--s-4); }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 998; opacity: 0; transition: opacity .3s; }
.drawer-overlay.is-open { opacity: 1; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s; }
.card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); background: var(--surface-2); }
.card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line); color: var(--primary-2); margin-bottom: var(--s-5); }
.card__icon .ic { width: 22px; height: 22px; }
.card h3 { font-size: 20px; margin-bottom: var(--s-2); font-weight: 500; }
.card p { color: var(--muted); font-size: 15px; }
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-weight: 500; color: var(--primary-2); font-size: 14px; }
.card__link .ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.card:hover .card__link .ic { transform: translateX(4px); }
.glass { background: var(--surface); border: 1px solid var(--line); }

/* ---------- Process cards (Studiora-style bento) ---------- */
.proc-grid { grid-column-gap: var(--s-6); grid-row-gap: var(--s-6); grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2,1fr); grid-auto-columns: 1fr; align-items: stretch; }
.proc-card--glow { grid-row: 1 / 3; }
.proc-card { position: relative; overflow: hidden; min-height: 210px; height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.proc-card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); }
.proc-card__icon { position: relative; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2); margin-bottom: var(--s-5); }
.proc-card__icon .ic { width: 22px; height: 22px; }
.proc-card h3 { position: relative; z-index: 2; font-size: 20px; margin-bottom: var(--s-2); font-weight: 500; color: var(--ink); }
.proc-card p { position: relative; z-index: 2; color: var(--muted); font-size: 15px; max-width: 26ch; }
.proc-card__cta { position: relative; z-index: 2; margin-top: auto; align-self: flex-start; }

/* Card 1 — brand-blue glow blob rising from the corner */
.proc-card--glow::after {
  content: ""; position: absolute; right: -25%; bottom: -35%; width: 95%; height: 95%;
  background: radial-gradient(circle at 55% 55%, var(--primary-2) 0%, var(--primary) 26%, var(--primary-ink) 46%, transparent 68%);
  filter: blur(4px); opacity: .9; z-index: 1; pointer-events: none;
}

img.proc-card__img {
    position: absolute;
    width: 65%;
    z-index: 2;
    bottom: -60px;
    right: -70px;
}

/* Cards 2 & 3 — a mock UI corner panel and floating icon badge, tucked bottom-right so copy never collides */
.proc-card__peek { position: absolute; right: -10px; bottom: -10px; width: 120px; height: 64px; border-radius: var(--r-md) 0 var(--r-lg) 0; background: var(--surface-3); border: 1px solid var(--line); z-index: 1; opacity: .8; }
.proc-card__peek span { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin: 10px 14px; }
.proc-card__peek span:nth-child(2) { width: 55%; }
.proc-card__badge { position: absolute; right: 54px; bottom: 30px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--sh-md); }
.proc-card__badge .ic { width: 17px; height: 17px; }

/* Card 3 — brand-blue glow + a peeking "Launch" pill with cursor */
.proc-card--launch::after {
  content: ""; position: absolute; right: -15%; bottom: -35%; width: 65%; height: 100%;
  background: radial-gradient(circle at 60% 45%, var(--primary-2) 0%, var(--primary) 32%, transparent 70%);
  filter: blur(8px); opacity: .5; z-index: 1; pointer-events: none;
}
.proc-card__launch-pill { position: absolute; z-index: 2; right: var(--s-5); bottom: 16px; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--r-pill); background: rgba(28,28,30,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 500; box-shadow: var(--sh-md); }
.proc-card__cursor { position: absolute; z-index: 2; right: calc(var(--s-5) - 6px); bottom: 0px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 2px solid transparent; border-top: 11px solid var(--primary-2); transform: rotate(-14deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

@media (max-width: 860px) {
  .proc-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .proc-card--glow { grid-row: auto; }
  .proc-card { min-height: 320px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--s-9) var(--s-8); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg::before { content: ""; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(circle, var(--glow), transparent 65%); opacity: .5; filter: blur(20px); }
.hero__orb { display: none; }
.hero > .container { position: relative; z-index: 1; }
/* Centered hero variant */
.hero--center { text-align: center; }
.hero--center .hero__inner { max-width: 900px; margin-inline: auto; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8); align-items: center; position: relative; z-index: 1; }
.hero__badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 13px; font-weight: 400; color: var(--ink-2); margin-bottom: var(--s-5); }
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(52,211,153,.6); }
.hero h1 { margin-bottom: var(--s-5); color: var(--ink); }
.hero__sub { max-width: 560px; margin-bottom: var(--s-7); color: var(--ink-2); }
.hero--center .hero__sub { margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }
.hero--center .hero__actions { justify-content: center; }
.hero__stats { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.hero--center .hero__stats { justify-content: center; }
.hero__stat .num { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.hero__stat .lbl { font-size: 13px; color: var(--muted); margin-top: 2px; }
.hero__visual { position: relative; }
.hero__mock { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--line); background: var(--surface); }
.hero__float { position: absolute; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-lg); border: 1px solid var(--line); padding: var(--s-3) var(--s-4); display: flex; align-items: center; gap: var(--s-3); font-size: 13px; font-weight: 400; color: var(--ink); }
.hero__float--1 { top: 7%; left: -5%; }
.hero__float--2 { bottom: 9%; right: -5%; }
.hero__float .chip { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--primary-tint); color: var(--primary-2); }
.hero__float .chip .ic { width: 17px; height: 17px; }

/* ---------- Placeholder media ---------- */
.ph {
  position: relative; width: 100%; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
  font-size: 13px; font-weight: 400; text-align: center; padding: var(--s-4);
  aspect-ratio: 16 / 9;
}
.ph::after { content: attr(data-dim); position: absolute; bottom: 8px; right: 10px; font-size: 11px; opacity: .5; }
.ph--soft { background: var(--primary-tint); color: var(--primary-2); border-color: transparent; }
.ph--dark { background: #050608; color: rgba(255,255,255,.5); }
.ph--square { aspect-ratio: 1/1; }
.ph--portrait { aspect-ratio: 3/4; }
.ph--wide { aspect-ratio: 21/9; }
.case-cover-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); }

/* ---------- Logo marquee ---------- */
.trusted { padding-block: var(--s-7); border-block: 1px solid var(--line-2); background: var(--bg); }
.trusted__label { text-align: center; font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: var(--s-5); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: var(--s-8); width: max-content; animation: scroll-x 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__logo { flex: none; height: 90px; width: auto; opacity: .5; filter: grayscale(1) brightness(2.2); transition: opacity .2s, filter .2s; }
.marquee__logo:hover { opacity: 1; filter: grayscale(0) brightness(1); }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- Alt section ---------- */
.why { background: var(--surface); border-block: 1px solid var(--line-2); }
.why__grid { grid-template-columns: repeat(3,1fr); }
.why .card { background: var(--surface-2); }
.why .card:hover { background: var(--surface-3); }

/* ---------- Stats ---------- */
.stats-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-8); position: relative; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: .3; }
.stats-band__grid { grid-template-columns: repeat(4,1fr); text-align: center; position: relative; }
.stats-band__grid > * { position: relative; }
.stats-band__grid > * + *::before { content: ""; position: absolute; left: calc(var(--s-5) * -1); top: 50%; transform: translateY(-50%); width: 1px; height: 44px; background: var(--line); }
.stats-band .num { font-size: clamp(36px,4.6vw,54px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.stats-band .lbl { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- Numbers (Studiora-style 3-up: spotlight / stacked stats / roadmap) ---------- */
.eyebrow--sm { font-size: 12px; margin-bottom: var(--s-4); }
.eyebrow--sm .ic { width: 14px; height: 14px; }
.numbers-grid { display: grid; grid-template-columns: 1.05fr .85fr 1.1fr; gap: var(--s-5); align-items: stretch; }

.numbers-spot { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-7); }
.numbers-spot__title { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); margin: var(--s-3) 0 var(--s-2); }
.numbers-spot__desc { color: var(--muted); font-size: 15px; }
.numbers-spot__author { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line-2); }

.numbers-stack { display: flex; flex-direction: column; gap: var(--s-5); }
.numbers-stat { flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); text-align: center; }
.numbers-stat__num .num { font-size: clamp(40px,4.4vw,56px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.numbers-stat__lbl { color: var(--muted); font-size: 14px; margin-top: var(--s-2); }
.numbers-stat--cta { text-align: left; }
.numbers-stat--cta .numbers-stat__num { margin-top: var(--s-2); }
.numbers-stat--cta .numbers-stat__lbl { margin-bottom: var(--s-5); }
.numbers-stat--cta .numbers-stat__cta { align-self: flex-start; }

.numbers-road { display: flex; flex-direction: column; }
.numbers-road__title { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); margin-bottom: var(--s-5); }
.numbers-road__media { position: relative; flex: 1; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); min-height: 260px; }
.numbers-road__media .ph, .numbers-road__media > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; border: none; margin: 0; object-fit: contain; }
.numbers-road__ticker { position: absolute; left: 0; right: 0; bottom: 52px; overflow: hidden; background: rgba(8,9,11,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding-block: 10px; }
.numbers-road__ticker-track { display: flex; gap: var(--s-6); width: max-content; animation: scroll-x 22s linear infinite; }
.numbers-road__ticker-track span { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.numbers-road__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); }
.numbers-road__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #0A0A0A; transform: rotate(135deg); transition: transform .25s var(--ease); }
.numbers-road__icon:hover { transform: rotate(135deg) scale(1.08); }
.numbers-road__year { font-size: 12px; color: rgba(255,255,255,.6); }
@media (max-width: 960px) {
  .numbers-grid { grid-template-columns: 1fr; }
}

/* ---------- Projects ---------- */
.project { border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--surface); border: 1px solid var(--line); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.project:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); }
.project .ph { border-radius: 0; border: none; border-bottom: 1px solid var(--line); }
.project__body { padding: var(--s-5); }
.project__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; padding: 4px 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.05); color: var(--ink-2); border: 1px solid var(--line); }
.tag__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; flex: 0 0 auto; }
.project h3 { font-size: 21px; margin-bottom: var(--s-2); font-weight: 500; }
.project__metric { display: flex; gap: var(--s-6); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-2); }
.project__metric .num { font-size: 20px; font-weight: 600; color: var(--primary-2); }
.project__metric .lbl { font-size: 12px; color: var(--muted); }

/* Portfolio gallery — masonry grid of raw screenshots */
.portfolio-gallery { columns: 4 240px; column-gap: var(--s-4); }
.portfolio-gallery__btn { display: block; width: 100%; margin-bottom: var(--s-4); break-inside: avoid; padding: 0; border: none; background: none; cursor: zoom-in; }
.portfolio-gallery img { display: block; width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.portfolio-gallery__btn:hover img { transform: translateY(-3px) scale(1.01); border-color: rgba(255,255,255,.25); }
@media (max-width: 860px) { .portfolio-gallery { columns: 2 200px; } }
@media (max-width: 480px) { .portfolio-gallery { columns: 1; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(4,5,6,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--ease); }
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox__img { max-width: min(90vw, 1100px); max-height: 88vh; width: auto; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--sh-lg); opacity: 0; transform: scale(.97); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.lightbox.is-open .lightbox__img { opacity: 1; transform: scale(1); }
.lightbox__close { position: absolute; top: var(--s-5); right: var(--s-5); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); font-size: 24px; line-height: 1; transition: background .2s, border-color .2s; }
.lightbox__close:hover { background: #fff; color: #0A0A0A; border-color: #fff; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); font-size: 20px; transition: background .2s, border-color .2s; }
.lightbox__nav:hover { background: #fff; color: #0A0A0A; border-color: #fff; }
.lightbox__nav--prev { left: var(--s-5); }
.lightbox__nav--next { right: var(--s-5); }
@media (max-width: 640px) {
  .lightbox__close { top: var(--s-3); right: var(--s-3); width: 38px; height: 38px; font-size: 20px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: var(--s-3); }
  .lightbox__nav--next { right: var(--s-3); }
}

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-bottom: var(--s-8); }
.filter { padding: 8px 18px; border-radius: var(--r-pill); font-weight: 400; font-size: 14px; color: var(--ink-2); background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: all .2s; }
.filter.is-active, .filter:hover { background: #fff; color: #0A0A0A; border-color: #fff; }

/* ---------- Process timeline ---------- */
.timeline { display: grid; gap: var(--s-3); }
.tl-step { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-5); align-items: start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.tl-step:hover { border-color: rgba(255,255,255,.2); transform: translateX(4px); }
.tl-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line); color: var(--primary-2); font-size: 16px; font-weight: 600; }
.tl-step h3 { font-size: 19px; margin-bottom: 4px; font-weight: 500; }
.tl-step p { color: var(--muted); }

/* ---------- Before/After ---------- */
.ba { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); user-select: none; aspect-ratio: 16/9; }
.ba__layer { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 500; }
.ba__before { background: var(--surface-2); color: var(--muted); }
.ba__after { background: var(--primary); color: #fff; clip-path: inset(0 50% 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; cursor: ew-resize; z-index: 3; }
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: var(--sh-md); display: grid; place-items: center; color: var(--primary); }
.ba__range { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: ew-resize; z-index: 4; }
.ba__badge { position: absolute; top: 14px; padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: rgba(8,9,11,.8); color: #fff; z-index: 2; border: 1px solid var(--line); }
.ba__badge--l { left: 14px; } .ba__badge--r { right: 14px; }

/* ---------- Testimonials ---------- */
.testi-slider { overflow: hidden; }
.testi-track { display: flex; gap: var(--s-5); transition: transform .5s var(--ease); }
.testi { flex: 0 0 calc((100% - var(--s-5) * 2) / 3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.testi__stars { color: var(--ink); display: flex; gap: 2px; margin-bottom: var(--s-4); }
.testi__stars .ic { width: 16px; height: 16px; fill: var(--ink); stroke: var(--ink); }
.testi__quote { font-size: 16px; color: var(--ink); line-height: 1.55; margin-bottom: var(--s-5); }
.testi__person { display: flex; align-items: center; gap: var(--s-3); }
.testi__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-tint); display: grid; place-items: center; color: var(--primary-2); font-weight: 600; font-size: 14px; overflow: hidden; flex: none; }
.testi__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi__name { font-weight: 500; font-size: 15px; color: var(--ink); }
.testi__role { font-size: 13px; color: var(--muted); }

/* ---------- Testimonials grid (Studiora-style, with attached project bar) ---------- */
.testi-grid { grid-template-columns: 1fr 1fr; align-items: start; }
.testi-block { display: flex; flex-direction: column; gap: var(--s-3); }
.testi-grid .testi { flex-basis: auto; background: var(--surface-2); padding: var(--s-7); }
.testi__headline { font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin-bottom: var(--s-4); }
.testi__project { display: flex; align-items: center; gap: var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3); }
.testi__project-thumb { width: 64px; height: 64px; flex: 0 0 auto; aspect-ratio: 1/1; border-radius: var(--r-md); margin: 0; overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); }
.testi__project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.testi__project-meta { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.testi__project-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.testi__project-status .ic { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line); box-sizing: content-box; }
.testi__project-name { font-size: 17px; font-weight: 500; color: var(--ink); }
.testi__project-cta { flex: 0 0 auto; }
@media (max-width: 860px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi__project { flex-wrap: wrap; }
}
.slider-nav { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-7); }
.slider-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.03); transition: all .2s; }
.slider-nav button:hover { background: #fff; color: #0A0A0A; border-color: #fff; }

/* ---------- Mid CTA (design-canvas, centered, full-bleed) ---------- */
.mid-cta { position: relative; overflow: hidden; width: 100%; min-height: 40vh; display: flex; align-items: center; justify-content: center; background: #050608; text-align: center; isolation: isolate; }

/* blueprint grid, like a design-tool canvas, faded toward the edges */
.mid-cta__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 65% 85% at 50% 50%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 65% 85% at 50% 50%, #000 35%, transparent 85%);
}
.mid-cta__glow {
  position: absolute; top: 50%; left: 50%; width: min(900px, 150%); aspect-ratio: 1;
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(59,107,255,.55), transparent 60%),
    radial-gradient(circle at 50% 78%, rgba(34,211,238,.4), transparent 62%);
  filter: blur(70px);
  opacity: .8;
  animation: mid-cta-pulse 10s ease-in-out infinite;
}
@keyframes mid-cta-pulse { 0%,100% { opacity:.7; } 50% { opacity:.95; } }
@media (prefers-reduced-motion: reduce) { .mid-cta__glow { animation: none; } }

/* corner frame brackets, like a selection handle in a design tool */
.mid-cta__frame { position: absolute; inset: var(--s-6); z-index: 1; pointer-events: none; }
.mid-cta__frame i { position: absolute; width: 22px; height: 22px; border: 1.5px solid rgba(255,255,255,.3); opacity: .8; }
.mid-cta__frame i:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.mid-cta__frame i:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.mid-cta__frame i:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.mid-cta__frame i:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }
@media (max-width: 640px) { .mid-cta__frame { display: none; } }

.mid-cta__inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; padding: var(--s-9) var(--s-6); width: 100%; }
.mid-cta .eyebrow { justify-content: center; color: var(--primary-2); margin-bottom: var(--s-4); }
.mid-cta__title { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; line-height: 1.16; letter-spacing: -.02em; margin-bottom: var(--s-6); }
.mid-cta__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--primary-2); }
.mid-cta__actions { display: flex; justify-content: center; }
.btn--glass {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff;
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 30px rgba(0,0,0,.45);
}
.btn--glass:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
@media (max-width: 640px) { .mid-cta__inner { padding: var(--s-7) var(--s-4); } }

/* ---------- Pricing band ---------- */
.pricing-cta { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-xl); overflow: hidden; position: relative; }
.pricing-cta::before { content: ""; position: absolute; top: -30%; left: 20%; width: 600px; height: 400px; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: .25; }
.pricing-cta .eyebrow { color: var(--muted); }
.pricing-cta__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); position: relative; }
.price-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); transition: transform .25s var(--ease), border-color .2s; }
.price-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.price-card--featured { background: var(--primary); color: #fff; border-color: transparent; box-shadow: 0 20px 60px rgba(20,110,245,.35); }
.price-card__badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); color: #fff; margin-bottom: var(--s-3); }
.price-card h3 { font-size: 20px; margin-bottom: var(--s-2); color: var(--ink); font-weight: 500; }
.price-card--featured h3 { color: #fff; }
.price-card .amt { font-size: 40px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.price-card--featured .amt { color: #fff; }
.price-card .amt small { font-size: 15px; font-weight: 400; opacity: .6; }
.price-card ul { margin: var(--s-5) 0; display: grid; gap: var(--s-2); }
.price-card li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.price-card--featured li { color: rgba(255,255,255,.92); }
.price-card li .ic { width: 18px; height: 18px; color: var(--primary-2); flex: none; margin-top: 1px; }
.price-card--featured li .ic { color: #fff; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--s-2); background: var(--surface); overflow: hidden; transition: border-color .2s, background .2s; }
.faq-item.is-open { border-color: rgba(255,255,255,.2); background: var(--surface-2); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5); font-weight: 500; font-size: 17px; text-align: left; color: var(--ink); }
.faq-q .ic { width: 20px; height: 20px; color: var(--primary-2); transition: transform .3s var(--ease); flex: none; }
.faq-item.is-open .faq-q .ic { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a__inner { padding: 0 var(--s-5) var(--s-5); color: var(--muted); }

/* ---------- Blog cards ---------- */
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.post:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); }
.post .ph { border-radius: 0; border: none; border-bottom: 1px solid var(--line); }
.post__body { padding: var(--s-5); }
.post__cat { font-size: 12px; font-weight: 500; color: var(--primary-2); text-transform: uppercase; letter-spacing: .04em; }
.post h3 { font-size: 18px; margin: var(--s-2) 0; font-weight: 500; }
.post__meta { font-size: 13px; color: var(--muted); display: flex; gap: var(--s-3); margin-top: var(--s-4); }

/* ---------- Industries ---------- */
.ind-grid { grid-template-columns: repeat(6,1fr); gap: var(--s-3); }
.ind { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: center; transition: border-color .25s var(--ease), transform .25s var(--ease), background .2s; }
.ind:hover { border-color: rgba(255,255,255,.2); transform: translateY(-3px); background: var(--surface-2); }
.ind__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line); color: var(--primary-2); }
.ind__icon .ic { width: 22px; height: 22px; }
.ind span { font-size: 14px; font-weight: 400; color: var(--ink); }

/* ---------- Final CTA ---------- */
.cta-final { padding-block: var(--s-8); }
.cta-final__card { position: relative; border-radius: var(--r-xl); padding: var(--s-9) var(--s-6); text-align: center; overflow: hidden; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.cta-final__grad { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--glow), transparent 60%); opacity: .5; }
.cta-final__content { position: relative; max-width: 720px; margin-inline: auto; }
.cta-final__title { margin-bottom: var(--s-4); color: var(--ink); }
.cta-final__title .grad-text { color: var(--primary-2); }
.cta-final__sub { color: var(--ink-2); font-size: 18px; margin-bottom: var(--s-6); }
.cta-final__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s-5); }
.cta-final__trust { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cta-final__trust .ic { width: 16px; height: 16px; color: var(--primary-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg); color: var(--muted); padding-block: var(--s-8) var(--s-6); border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 1.1fr 2.4fr; gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--line); }
.brand--footer { color: var(--ink); margin-bottom: var(--s-4); }
.footer__blurb { font-size: 14.5px; max-width: 320px; margin-bottom: var(--s-5); color: var(--muted); }
.footer__nl-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: var(--s-2); }
.nl-form { display: flex; gap: var(--s-2); }
.nl-form input { flex: 1; padding: 12px 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); }
.nl-form input::placeholder { color: var(--muted); }
.footer__cols { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--s-5); }
.footer__col h3 { color: var(--ink); font-size: 13px; margin-bottom: var(--s-4); font-weight: 500; }
.footer__col li { margin-bottom: var(--s-2); }
.footer__col a { font-size: 14px; color: var(--muted); transition: color .2s; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-5); font-size: 13.5px; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--ink); }
.footer__disclaimer { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-2); font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 900px; }

/* Back to top */
.to-top { position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-lg); z-index: 700; opacity: 0; transform: translateY(16px) rotate(-90deg); pointer-events: none; transition: opacity .3s, transform .3s; }
.to-top.is-visible { opacity: 1; transform: translateY(0) rotate(-90deg); pointer-events: auto; }
.to-top .ic { width: 19px; height: 19px; }

/* ---------- Live chat widget ---------- */
.chat-widget { position: fixed; bottom: 88px; right: 24px; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); z-index: 750; opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; transition: opacity .25s, transform .25s; overflow: hidden; }
.chat-widget.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-widget__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); background: var(--grad-soft); }
.chat-widget__head strong { display: block; font-size: 14.5px; color: var(--ink); }
.chat-widget__head span { display: block; font-size: 12px; color: var(--muted); }
.chat-widget__close { color: var(--muted); font-size: 22px; line-height: 1; }
.chat-widget__close:hover { color: var(--ink); }
.chat-widget__body { padding: var(--s-4); }
.chat-widget__msg { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.chat-widget__form { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
.chat-widget__form input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: var(--s-3) var(--s-4); font-size: 13.5px; color: var(--ink); }
.chat-widget__form input:focus { outline: none; border-color: var(--primary); }
.chat-widget__form .btn { border-radius: 50%; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; flex-shrink: 0; }

/* ---------- Reveal animations ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.97); }
[data-reveal="blur"] { filter: blur(8px); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
[data-reveal-delay="1"] { transition-delay: .06s; }
[data-reveal-delay="2"] { transition-delay: .12s; }
[data-reveal-delay="3"] { transition-delay: .18s; }
[data-reveal-delay="4"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- Forms ---------- */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: 14px; font-weight: 400; margin-bottom: var(--s-2); color: var(--ink); }
.field input, .field textarea, .field select { width: 100%; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20,110,245,.2); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field select option { background: var(--surface); color: var(--ink); }

/* =========================================================
   Inner-page components
   ========================================================= */
.page-hero { position: relative; padding-block: var(--s-9) var(--s-7); background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-hero::before { content: ""; position: absolute; top: -40%; right: 0; width: 700px; height: 500px; background: radial-gradient(circle, var(--glow), transparent 65%); opacity: .3; }
.page-hero__orb { display: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__inner { max-width: 760px; }
.page-hero--center .page-hero__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.page-hero h1 { margin: var(--s-4) 0; color: var(--ink); }
.page-hero__sub { font-size: clamp(17px,1.6vw,20px); color: var(--ink-2); }
.page-hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.page-hero--center .page-hero__actions { justify-content: center; }

.crumbs { display: flex; gap: var(--s-2); align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { opacity: .4; }
.page-hero--center .crumbs { justify-content: center; }

/* ---------- About page (Altrum-style) ---------- */
.hero-banner { position: relative; height: 46vh; min-height: 340px; max-height: 560px; overflow: hidden; }
.hero-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-banner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.35) 40%, var(--bg) 100%); }
.hero-banner__inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--s-7); }
.hero-banner__crumbs { color: rgba(255,255,255,.7); margin-bottom: var(--s-4); }
.hero-banner__crumbs a { color: #fff; }
.hero-banner__title { font-size: clamp(48px, 8vw, 96px); font-weight: 500; letter-spacing: -.03em; color: #fff; }
.hero-banner__title--sm { font-size: clamp(28px, 3.6vw, 44px); max-width: 820px; }

.about-intro { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--s-8); align-items: start; margin-bottom: var(--s-8); }
.about-intro__lead { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); margin: var(--s-4) 0 var(--s-5); }
.about-intro__portrait { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/5; }
.about-intro__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-stats { grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); padding-top: var(--s-6); }
.about-stats .num { font-size: clamp(30px,3.6vw,44px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.about-stats .num .unit { color: var(--primary-2); }
.about-stats .lbl { color: var(--muted); font-size: 14px; margin-top: 4px; }

.about-pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-4); }
.about-pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.about-pillar:hover { border-color: rgba(255,255,255,.2); transform: translateY(-3px); }
.about-pillar__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line); color: var(--primary-2); margin-bottom: var(--s-5); }
.about-pillar h3 { font-size: 17px; font-weight: 500; margin-bottom: var(--s-2); }
.about-pillar p { color: var(--muted); font-size: 14px; }
.about-pillar--cta { position: relative; overflow: hidden; padding: 0; display: flex; align-items: flex-end; min-height: 220px; }
.about-pillar__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.about-pillar__cta-content { position: relative; z-index: 1; padding: var(--s-6); background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); width: 100%; }
.about-pillar__cta-content h3 { color: #fff; margin-bottom: var(--s-4); }

.about-team { grid-template-columns: repeat(3,1fr); }
.team-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r-lg); margin-bottom: var(--s-4); }

/* Logos bento — stat spotlight beside a hover-lit logo grid */
.logos-bento { position: relative; display: grid; grid-template-columns: .8fr 1.6fr; gap: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-7); overflow: hidden; }
.logos-bento__glow { position: absolute; top: -30%; left: -10%; width: 480px; height: 320px; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: .35; pointer-events: none; }
.logos-bento__stat { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding-right: var(--s-6); border-right: 1px solid var(--line-2); }
.logos-bento__num { font-size: clamp(44px, 5vw, 68px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.logos-bento__num span { color: var(--primary-2); }
.logos-bento__stat p { color: var(--muted); font-size: 15px; margin: var(--s-4) 0 var(--s-5); max-width: 32ch; }
.logos-bento__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); align-content: center; }
.logos-bento__item { display: grid; place-items: center; aspect-ratio: 2/1; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); opacity: 0; animation: logos-bento-in .5s var(--ease) forwards; animation-delay: calc(var(--d) * 60ms); transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.logos-bento__item:hover { border-color: rgba(91,155,255,.4); background: var(--surface-3); transform: translateY(-3px); }
.logos-bento__item img { max-width: 72%; max-height: 30px; filter: grayscale(1) brightness(2.2); opacity: .55; transition: filter .25s, opacity .25s; }
.logos-bento__item:hover img { filter: grayscale(0) brightness(1); opacity: 1; }
@keyframes logos-bento-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .logos-bento { grid-template-columns: 1fr; }
  .logos-bento__stat { border-right: none; border-bottom: 1px solid var(--line-2); padding: 0 0 var(--s-6); }
  .logos-bento__grid { grid-template-columns: repeat(3, 1fr); }
}

/* How It Works — click-to-swap tab list + visual panel */
.hiw { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-6); align-items: center; }
.hiw__tabs { display: flex; flex-direction: column; gap: var(--s-3); }
.hiw__tab { display: flex; align-items: center; gap: var(--s-4); text-align: left; padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid transparent; background: transparent; transition: background .25s var(--ease), border-color .25s var(--ease); }
.hiw__tab.is-active { align-items: flex-start; }
.hiw__tab:hover { background: var(--surface); }
.hiw__tab.is-active { background: var(--surface); border-color: var(--line); }
.hiw__tab-icon { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 16px; background: var(--surface-3); border: 1px solid var(--line); color: var(--muted); transition: color .25s, background .25s; }
.hiw__tab-icon .ic { width: 60px; height: 60px; }
.hiw__tab.is-active .hiw__tab-icon { color: var(--primary-2); background: var(--primary-tint); border-color: transparent; }
/* Lottie-style icon: the accent piece (__b) sits in place normally (muted,
   matching the inactive rows), but replays a rotate + slide "connect" motion
   every time its tab becomes active. */
.hiw-icon__a, .hiw-icon__b { transform-box: fill-box; transform-origin: center; }
.hiw__tab.is-active .hiw-icon__b { color: var(--primary-2); animation: hiw-icon-connect .65s cubic-bezier(.22,.61,.36,1); }
@keyframes hiw-icon-connect {
  0%   { opacity: 0; transform: translate(6px,-6px) rotate(-90deg); }
  55%  { opacity: 1; transform: translate(-1px,1px) rotate(8deg); }
  100% { opacity: 1; transform: translate(0,0) rotate(0deg); }
}
.hiw__tab-body { display: flex; flex-direction: column; gap: 6px; }
.hiw__tab-title { font-size: 18px; font-weight: 500; color: var(--muted); transition: color .25s; }
.hiw__tab.is-active .hiw__tab-title { color: var(--ink); }
.hiw__tab-desc { display: none; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 42ch; }
.hiw__tab.is-active .hiw__tab-desc { display: block; }
.hiw__visual { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; background: var(--surface); }
.hiw__visual img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: hiw-fade .4s var(--ease) forwards; }
.hiw__visual::after {
    content: "";
    position: absolute;
    right: -25%;
    bottom: -35%;
    width: 95%;
    height: 95%;
    background: radial-gradient(circle at 55% 55%, var(--primary-2) 0%, var(--primary) 26%, var(--primary-ink) 46%, transparent 68%);
    filter: blur(4px);
    opacity: .9;
    z-index: 1;
    pointer-events: none;
}
@keyframes hiw-fade { to { opacity: 1; } }

@media (max-width: 860px) {
  .hiw { grid-template-columns: 1fr; }
  .hiw__tab-desc { max-width: none; }
}

/* Our Approach — sticky intro + tall stacked feature cards */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.approach__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.approach__cards { display: flex; flex-direction: column; gap: var(--s-4); }
.approach-card { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.approach-card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-3px); }
.approach-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: auto; color: var(--primary-2); }
.approach-card__icon .ic { width: 32px; height: 32px; }
.approach-card h3 { font-size: 19px; font-weight: 500; margin-bottom: var(--s-2); }
.approach-card p { color: var(--muted); font-size: 14.5px; }

/* Our Story — intro next to a connected vertical milestone rail */
.story { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-9); align-items: start; }
.story__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.story__intro p + p { margin-top: var(--s-4); }
.story__rail { position: relative; padding-left: var(--s-7); }
.story__rail::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.story__item { position: relative; padding-bottom: var(--s-8); }
.story__item:last-child { padding-bottom: 0; }
.story__year { position: absolute; left: calc(var(--s-7) * -1); top: -2px; width: var(--s-7); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-align: right; padding-right: var(--s-4); }
.story__dot { position: absolute; left: 1px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--primary-2); }
.story__content { margin-left: var(--s-5); }
.story__content h3 { font-size: 20px; font-weight: 500; margin-bottom: var(--s-2); color: var(--ink); }
.story__content p { color: var(--muted); font-size: 15px; max-width: 46ch; }

@media (max-width: 960px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro__portrait { max-width: 320px; }
  .about-pillars { grid-template-columns: repeat(2,1fr); }
  .about-team { grid-template-columns: repeat(2,1fr); }
  .about-logos { grid-template-columns: repeat(2,1fr); }
  .approach { grid-template-columns: 1fr; }
  .approach__intro { position: static; }
  .story { grid-template-columns: 1fr; gap: var(--s-6); }
  .story__intro { position: static; }
  .story__year { position: static; text-align: left; width: auto; padding-right: 0; display: block; margin-bottom: var(--s-2); }
  .story__rail { padding-left: var(--s-5); }
  .story__dot { left: -1px; }
}
@media (max-width: 560px) {
  .about-stats { grid-template-columns: 1fr; gap: var(--s-4); }
  .about-pillars { grid-template-columns: 1fr; }
  .about-team { grid-template-columns: 1fr; }
}

.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: 26px; margin: var(--s-7) 0 var(--s-3); }
.prose h3 { font-size: 20px; margin: var(--s-5) 0 var(--s-2); }
.prose p, .prose li { color: var(--ink-2); font-size: 16px; }
.prose p { margin-bottom: var(--s-4); }
.prose ul { list-style: disc; padding-left: var(--s-5); margin-bottom: var(--s-4); display: grid; gap: var(--s-2); }
.prose a { color: var(--primary-2); font-weight: 400; }
.prose__meta { color: var(--muted); font-size: 14px; margin-bottom: var(--s-6); }

/* ---------- Case study detail: sticky facts sidebar ---------- */
.case-detail { display: grid; grid-template-columns: minmax(260px, 300px) 1fr; gap: var(--s-8); align-items: start; }
.case-detail__sidebar { position: sticky; top: calc(var(--header-h) + var(--s-6)); display: flex; flex-direction: column; gap: var(--s-5); }
.case-detail__content.prose { max-width: 720px; margin-inline: 0; }
.case-facts { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.case-facts__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.case-facts__row--tags { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.case-facts__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.case-facts__label .ic { width: 15px; height: 15px; color: var(--primary-2); flex: none; }
.case-facts__value { font-size: 14.5px; font-weight: 500; color: var(--ink); text-align: right; }
.case-facts__tags { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 860px) {
  .case-detail { grid-template-columns: 1fr; }
  .case-detail__sidebar { position: static; }
  .case-detail__content.prose { max-width: none; }
}

/* ---------- Related case studies gallery ---------- */
.case-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.case-related__card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.case-related__card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); }
.case-related__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.case-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.case-related__card:hover .case-related__media img { transform: scale(1.05); }
.case-related__tag { position: absolute; top: var(--s-3); left: var(--s-3); padding: 5px 12px; border-radius: var(--r-pill); background: rgba(8,9,11,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 12px; font-weight: 500; }
.case-related__body { padding: var(--s-5); }
.case-related__body h3 { font-size: 19px; margin-bottom: 4px; }
.case-related__body p { color: var(--muted); font-size: 14px; margin-bottom: var(--s-3); }
.case-related__metric { font-size: 20px; font-weight: 700; color: var(--primary-2); margin-bottom: var(--s-2); }
.case-related__metric span { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 4px; }
@media (max-width: 760px) { .case-related { grid-template-columns: 1fr; } }

.value { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.value:hover { border-color: rgba(255,255,255,.2); transform: translateY(-3px); }
.value__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line); color: var(--primary-2); }
.value h3 { font-size: 18px; margin-bottom: 4px; font-weight: 500; }
.value p { color: var(--muted); font-size: 14.5px; }

.team-card { text-align: center; }
.team-card .ph { border-radius: var(--r-lg); margin-bottom: var(--s-4); }
.team-card h3 { font-size: 18px; font-weight: 500; }
.team-card .role { color: var(--primary-2); font-size: 14px; font-weight: 400; }
.team-card p { color: var(--muted); font-size: 14px; margin-top: var(--s-2); }

.checklist { display: grid; gap: var(--s-3); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.checklist .ic { width: 20px; height: 20px; color: var(--primary-2); flex: none; }

.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-7); align-items: start; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.contact-info { display: grid; gap: var(--s-4); }
.contact-info__item { display: flex; gap: var(--s-3); align-items: flex-start; }
.contact-info__item .ic { color: var(--primary-2); }
.contact-info__item strong { display: block; font-size: 15px; color: var(--ink); }
.contact-info__item span { color: var(--muted); font-size: 14px; }
.map-embed, .calendly-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.compare { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.compare th, .compare td { padding: var(--s-4); text-align: left; border-bottom: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
.compare thead th { background: var(--surface-2); font-size: 14px; color: var(--ink); }
.compare td .ic { width: 20px; height: 20px; color: var(--primary-2); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.split--reverse .split__media { order: 2; }

.metrics { grid-template-columns: repeat(4,1fr); gap: var(--s-4); }
.metric-card { text-align: center; padding: var(--s-6) var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.metric-card .num { font-size: clamp(32px,3.8vw,46px); font-weight: 600; letter-spacing: -.03em; color: var(--primary-2); }
.metric-card .lbl { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__visual { order: -1; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .ind-grid { grid-template-columns: repeat(4,1fr); }
  .footer__top { grid-template-columns: 1fr; gap: var(--s-6); }
  .stats-band__grid { grid-template-columns: repeat(2,1fr); gap: var(--s-6); }
  .stats-band__grid > * + *::before { display: none; }
  .testi { flex-basis: calc((100% - var(--s-5)) / 2); }
  .contact-grid, .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .mainnav, .site-header__actions .btn, .site-header__actions .header-call { display: none; }
  .hamburger { display: flex; }
  .grid-3, .why__grid, .pricing-cta__grid, .grid-2 { grid-template-columns: 1fr; }
  .mega__cols { grid-template-columns: 1fr; }
  .section { padding-block: var(--s-8); }
  .testi { flex-basis: 100%; }
  .footer__cols { grid-template-columns: repeat(2,1fr); }
  .announce { display: none; }
}
@media (max-width: 560px) {
  .grid-4, .ind-grid, .metrics, .stats-band__grid { grid-template-columns: repeat(2,1fr); }
  .hero__stats { gap: var(--s-6); }
  .container { padding-inline: var(--s-4); }
  .stats-band, .cta-final__card { padding: var(--s-7) var(--s-4); }
  .tl-step { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Studiora-style signature components
   ========================================================= */

/* Hero curved framing lines */
.hero-frame { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-frame::before, .hero-frame::after {
  content: ""; position: absolute; top: -60%; width: 120%; height: 140%;
  border: 1px solid var(--line-2); border-radius: 50%;
}
.hero-frame::before { left: -60%; }
.hero-frame::after { right: -60%; }

/* Full-bleed scrolling screenshot columns */
.showcase { padding-block: var(--s-7); overflow: hidden; position: relative; }
.showcase::before, .showcase::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; }
.showcase::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.showcase::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.showcase__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); height: 78vh; max-height: 760px; }
.showcase__col { display: flex; flex-direction: column; gap: var(--s-4); animation: col-scroll 32s linear infinite; }
.showcase__col--rev { animation-direction: reverse; }
.showcase__col:hover { animation-play-state: paused; }
.showcase__shot { flex: none; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; background: var(--surface-2); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.showcase__shot img { width: 100%; height: 100%; object-fit: cover; }
@keyframes col-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (max-width: 860px) { .showcase__row { grid-template-columns: repeat(2, 1fr); height: 60vh; } }

/* Selected work (image strips) */
.work__item { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.work__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; margin-bottom: var(--s-6); }
.work__title { font-size: clamp(26px, 3vw, 40px); font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.work__tags { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.work__desc { color: var(--muted); font-size: 16px; padding-top: var(--s-2); }

/* Horizontal, unequal-width filmstrip with a hover-reveal CTA */
.work__strip {
  position: relative; display: flex; align-items: stretch; gap: var(--s-4);
  overflow-x: auto; padding-bottom: 2px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.work__strip::-webkit-scrollbar { display: none; }
.work__strip .work__shot, .work__teaser { flex: 0 0 auto; margin: 0; }
.work__shot { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); transition: filter .3s var(--ease); }
.work__shot img { width: 100%; height: 100%; object-fit: cover; }
.work__shot--lg { width: clamp(300px, 32vw, 460px); aspect-ratio: 4/3; }
.work__shot--sm { width: clamp(220px, 22vw, 330px); aspect-ratio: 4/3; }
.work__strip:hover .work__shot { filter: brightness(.35); }

/* Branded teaser tile — leads each filmstrip like a case-study cover */
.work__teaser {
  width: 170px; aspect-ratio: 4/3; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(155deg, var(--primary-ink) 0%, #0c1220 55%, #05060a 100%);
  position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: var(--s-4);
}
.work__teaser-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; font-weight: 500; color: #fff; letter-spacing: -.01em; }
.work__teaser-meta { position: absolute; top: var(--s-3); left: var(--s-3); writing-mode: vertical-rl; font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; }

/* Centered "Check This Project" pill, revealed on strip hover */
.work__cta {
  position: absolute; top: 50%; left: 50%; z-index: 5; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; padding: 16px 30px;
  border-radius: var(--r-pill); background: #fff; color: #0A0A0A; font-weight: 500; font-size: 16px;
  box-shadow: var(--sh-lg); opacity: 0; pointer-events: none;
  transform: translate(-50%,-50%) scale(.92);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.work__strip:hover .work__cta { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.work__cta:hover { background: #e9eaec; }

@media (max-width: 860px) {
  .work__head { grid-template-columns: 1fr; gap: var(--s-3); }
  .work__teaser { width: 130px; }
  .work__shot--lg { width: 78vw; }
  .work__shot--sm { width: 60vw; }
  .work__cta { position: static; transform: none; opacity: 1; pointer-events: auto; margin-top: var(--s-4); box-shadow: none; }
}

/* ---------- Numbered Services: pinned stacking cards ---------- */
/* Each wrapper is taller than its card; main.js pins the card (GSAP
   ScrollTrigger) for that extra scroll distance — during the hold, the
   next (later-in-DOM, higher z-index) card slides up and covers it.
   The `position:sticky` here is a no-JS fallback only. */
.svc-stack { display: flex; flex-direction: column; }
/* min-height matches .svc-card__inner's min-height below — the wrap must
   reserve this space itself, because once its child is pinned to
   position:fixed it no longer contributes any height to the wrap's own
   auto-height, and the wrap would otherwise collapse and pull everything
   after it (e.g. the stats band) up underneath the still-pinned card. */
.svc-card-wrap { position: relative; min-height: 640px; padding-bottom: 110px; }
.svc-card-wrap:last-child { padding-bottom: 0; }
.svc-card { position: sticky; top: calc(var(--header-h) + 24px); }
.svc-card__inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 -40px 60px -20px rgba(0,0,0,.65), 0 30px 70px rgba(0,0,0,.5); }
.svc-card__text { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-7); }
.svc-card__top { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.svc-card__top b { color: var(--ink); font-weight: 500; }
.svc-card__title { font-size: clamp(32px, 4.2vw, 60px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); margin: var(--s-5) 0 var(--s-4); }
.svc-card__desc { color: var(--muted); font-size: 16px; max-width: 44ch; }
.svc-card__cta { margin-top: var(--s-5); }
.svc-card__media { position: relative; }
.svc-card__media .ph, .svc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; border: none; border-left: 1px solid var(--line); margin: 0; object-fit: cover; }
@media (max-width: 860px) {
  .svc-card-wrap { padding-bottom: var(--s-4); }
  .svc-card { position: static; }
  .svc-card__inner { grid-template-columns: 1fr; box-shadow: none; }
  .svc-card__text { padding: var(--s-6); }
  .svc-card__media { aspect-ratio: 16/10; }
  .svc-card__media .ph, .svc-card__media img { position: static; width: 100%; height: 100%; border-left: none; }
}

/* Giant text marquee */
.text-marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--s-6); background: var(--surface); }
.text-marquee__track { display: flex; align-items: center; gap: var(--s-7); width: max-content; animation: scroll-x 28s linear infinite; }
.text-marquee__item { font-size: clamp(30px, 5vw, 68px); font-weight: 500; letter-spacing: -.03em; color: var(--ink); display: inline-flex; align-items: center; gap: var(--s-7); white-space: nowrap; }
.text-marquee__item .grad-text { font-size: 1em; }
.text-marquee__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 16px var(--glow); flex: none; }

/* Awards list */
.awards__list { border-top: 1px solid var(--line); }
.awards__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--line); transition: padding-left .3s var(--ease), color .2s; }
.awards__item:hover { padding-left: var(--s-4); }
.awards__name { font-size: clamp(20px, 2.6vw, 32px); font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.awards__meta { display: flex; align-items: center; gap: var(--s-6); }
.awards__year { color: var(--muted); font-size: 14px; }
.awards__view { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; transition: color .2s; }
.awards__item:hover .awards__view, .awards__item:hover .awards__name { color: var(--primary-2); }
@media (max-width: 560px) { .awards__year { display: none; } }

/* Hero animated curve lines — GPU-composited (transform rotation, zero per-frame repaint) */
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; contain: layout paint size; }
.hl-disc   { fill: none; stroke: none; }
.hl-base   { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1.1; }
/* Static short dash = the moving streak; a wide translucent one = the glow (no filters) */
.hl-glow   { fill: none; stroke: rgba(91,155,255,.28); stroke-width: 8;   stroke-linecap: round; stroke-dasharray: 30 6000; }
.hl-streak { fill: none; stroke: #c2daff;              stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 24 6000; }
/* Rotate the whole group around the circle's centre — one composited transform, buttery smooth */
.hl-spin   { transform-box: view-box; will-change: transform; }
.hl-spin--r { transform-origin: 2146px 540px; animation: hl-spin-ccw 11s linear infinite; }
.hl-spin--l { transform-origin: -706px 540px; animation: hl-spin-cw  11s linear infinite; animation-delay: -5.5s; }
@keyframes hl-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes hl-spin-cw  { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hl-spin { animation: none; } .hl-glow, .hl-streak { display: none; } }

/* Showcase width lines up with where the hero curves land */
.showcase__wrap { width: min(82%, 1340px); margin-inline: auto; }
@media (max-width: 860px) { .showcase__wrap { width: 92%; } }

/* =========================================================
   Services — listing + detail pages
   ========================================================= */

/* Hero trust row */
.svc-hero-trust { display: flex; align-items: center; justify-content: center; gap: var(--s-6); margin-top: var(--s-7); flex-wrap: wrap; }
.svc-hero-trust__item { text-align: center; }
.svc-hero-trust__item .num { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.svc-hero-trust__item .lbl { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.svc-hero-trust__sep { width: 1px; height: 28px; background: var(--line); }

/* Spotlight card — the featured/primary service */
.svc-spotlight { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s-5); transition: border-color .25s var(--ease); }
.svc-spotlight:hover { border-color: rgba(255,255,255,.2); }
.svc-spotlight__media { position: relative; min-height: 320px; background: var(--surface-2); }
.svc-spotlight__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.svc-spotlight__badge { position: absolute; top: var(--s-5); left: var(--s-5); z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(8,9,11,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 12.5px; font-weight: 500; }
.svc-spotlight__body { padding: var(--s-8); display: flex; flex-direction: column; justify-content: center; }
.svc-spotlight__num { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .06em; margin-bottom: var(--s-4); }
.svc-spotlight__body h3 { font-size: clamp(24px,2.6vw,32px); font-weight: 500; letter-spacing: -.02em; margin-bottom: var(--s-3); color: var(--ink); }
.svc-spotlight__body p { color: var(--muted); font-size: 16px; margin-bottom: var(--s-5); max-width: 46ch; }

/* Standard tile grid — remaining services in a group */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); }
.svc-tile { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.svc-tile:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); }
.svc-tile__media { position: relative; aspect-ratio: 16/10; background: var(--surface-2); }
.svc-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-tile__media .svc-tile__icon-only { width: 100%; height: 100%; display: grid; place-items: center; color: var(--primary-2); background: radial-gradient(circle at 30% 20%, var(--primary-tint), transparent 60%); }
.svc-tile__media .svc-tile__icon-only .ic { width: 40px; height: 40px; }
.svc-tile__num { position: absolute; top: var(--s-4); right: var(--s-4); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); background: rgba(8,9,11,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.12); }
.svc-tile__body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.svc-tile__body h3 { font-size: 18px; font-weight: 500; margin-bottom: var(--s-2); color: var(--ink); }
.svc-tile__body p { color: var(--muted); font-size: 14.5px; margin-bottom: var(--s-4); flex: 1; }
.svc-tile__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--primary-2); font-size: 14px; }
.svc-tile__link .ic { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.svc-tile:hover .svc-tile__link .ic { transform: translateX(4px); }

/* Directory rows — compact list style for the secondary group */
.svc-directory { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.svc-row { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6); transition: background .2s; }
.svc-row + .svc-row { border-top: 1px solid var(--line-2); }
.svc-row:hover { background: var(--surface-2); }
.svc-row__icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--line); color: var(--primary-2); }
.svc-row__icon .ic { width: 24px; height: 24px; }
.svc-row__body { flex: 1; min-width: 0; }
.svc-row__body h3 { font-size: 17px; font-weight: 500; margin-bottom: 3px; color: var(--ink); }
.svc-row__body p { color: var(--muted); font-size: 14px; }
.svc-row__num { flex: none; font-size: 13px; color: var(--muted); font-weight: 600; }
.svc-row__arrow { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); transition: all .25s var(--ease); }
.svc-row:hover .svc-row__arrow { background: #fff; color: #0A0A0A; border-color: #fff; transform: rotate(45deg); }

/* Horizontal numbered process strip */
.svc-process { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--s-4); position: relative; }
.svc-process::before { content: ""; position: absolute; top: 23px; left: 6%; right: 6%; height: 1px; background: var(--line); z-index: 0; }
.svc-process__step { position: relative; z-index: 1; text-align: center; }
.svc-process__num { width: 46px; height: 46px; margin: 0 auto var(--s-5); display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 15px; }
.svc-process__step:hover .svc-process__num { border-color: var(--primary-2); color: var(--primary-2); }
.svc-process__step h3 { font-size: 16px; font-weight: 500; margin-bottom: var(--s-2); color: var(--ink); }
.svc-process__step p { color: var(--muted); font-size: 13.5px; }

/* Detail hero — split with a real visual */
.detail-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8); align-items: center; }
.detail-hero__visual { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--surface); }
.detail-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__visual .detail-hero__icon-only { width: 100%; height: 100%; display: grid; place-items: center; color: var(--primary-2); background: radial-gradient(circle at 65% 30%, var(--primary-tint), transparent 60%); }
.detail-hero__visual .detail-hero__icon-only .ic { width: 72px; height: 72px; }

/* Problem / Solution — unified before/after comparison card */
.ps-compare {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); overflow: hidden;
}
.ps-compare__side { position: relative; padding: var(--s-8) var(--s-7); text-align: left; }
.ps-compare__side--before {
  background: radial-gradient(circle at 100% 0%, rgba(248,113,113,.1), transparent 60%);
}
.ps-compare__side--after {
  background: radial-gradient(circle at 0% 100%, var(--primary-tint), transparent 60%);
  border-left: 1px solid var(--line);
}
.ps-compare__side--before h2 { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(248,113,113,.5); text-decoration-thickness: 1.5px; }
.ps-compare__tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; margin-bottom: var(--s-5);
}
.ps-compare__side--before .ps-compare__tag { background: rgba(248,113,113,.12); color: #F87171; }
.ps-compare__side--after .ps-compare__tag { background: var(--primary-tint); color: var(--primary-2); }
.ps-compare__side h2 { font-size: 22px; line-height: 1.3; margin-bottom: var(--s-3); }
.ps-compare__side p { color: var(--muted); }
.ps-compare__badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--primary); color: #fff; box-shadow: 0 0 0 6px var(--surface), 0 10px 30px rgba(20,110,245,.4);
}
@media (max-width: 780px) {
  .ps-compare { grid-template-columns: 1fr; }
  .ps-compare__side--after { border-left: none; border-top: 1px solid var(--line); }
  .ps-compare__badge {
    position: relative; inset: auto; z-index: 2; justify-self: center;
    margin-block: -30px; transform: none;
  }
  .ps-compare__badge .ic { transform: rotate(90deg); }
}

/* Features panel */
.feat-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-7); }
.feat-panel .checklist { gap: var(--s-4); }

@media (max-width: 960px) {
  .svc-spotlight { grid-template-columns: 1fr; }
  .svc-spotlight__media { min-height: 240px; }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .svc-process { grid-template-columns: repeat(2,1fr); gap: var(--s-6); }
  .svc-process::before { display: none; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero__visual { order: -1; aspect-ratio: 16/9; }
  .ps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-process { grid-template-columns: 1fr; }
  .svc-row { flex-wrap: wrap; }
}

/* ---------- Quote / Consultation modal ---------- */
.quote-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: var(--s-5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.quote-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.quote-modal__backdrop { position: absolute; inset: 0; background: rgba(4,5,6,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.quote-modal__panel { position: relative; width: min(920px, 100%); max-height: min(720px, 90vh); overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); transform: scale(.94) translateY(10px); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.quote-modal.is-open .quote-modal__panel { transform: scale(1) translateY(0); }
.quote-modal__close { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--ink); font-size: 22px; line-height: 1; transition: background .2s, border-color .2s, transform .2s; }
.quote-modal__close:hover { background: #fff; color: #0A0A0A; border-color: #fff; transform: rotate(90deg); }

.quote-modal__visual { position: relative; overflow: hidden; padding: var(--s-7) var(--s-6); display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); background: linear-gradient(160deg, var(--surface-2), var(--surface)); border-right: 1px solid var(--line); }
.quote-modal__orb { position: absolute; top: -80px; left: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: .35; pointer-events: none; }
.quote-modal__badge { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--primary-tint); color: var(--primary-2); font-size: 12.5px; font-weight: 500; }
.quote-modal__badge .ic { width: 14px; height: 14px; }
.quote-modal__visual-title { position: relative; font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.quote-modal__visual-sub { position: relative; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.quote-modal__points { position: relative; display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.quote-modal__points li { display: flex; align-items: center; gap: var(--s-2); font-size: 14px; color: var(--ink-2); }
.quote-modal__points .ic { width: 16px; height: 16px; color: var(--primary-2); flex: none; }

.quote-modal__form { padding: var(--s-7) var(--s-6); overflow-y: auto; }
.quote-modal__form .field { margin-bottom: var(--s-3); }
.quote-modal__form .form-row { margin-bottom: 0; }

.quote-modal__package { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); background: var(--surface-2); border: 1px solid var(--primary-tint); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.quote-modal__package[hidden] { display: none; }
.quote-modal__package-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.quote-modal__package-row { display: flex; align-items: baseline; gap: var(--s-2); }
.quote-modal__package-row strong { font-size: 16px; color: var(--ink); font-weight: 600; }
.quote-modal__package-row span { font-size: 13px; color: var(--primary-2); font-weight: 500; }

@media (max-width: 760px) {
  .quote-modal__panel { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .quote-modal__visual { border-right: none; border-bottom: 1px solid var(--line); padding: var(--s-6) var(--s-5); }
  .quote-modal__form { padding: var(--s-6) var(--s-5); overflow-y: visible; }
}