/* =========================================================
   IOschools — site styles
   Brand colours live in :root. Change them here only.
   ========================================================= */
:root {
  /* ===================================================================
     IOSCHOOLS design system — ../../design-system/colors_and_type.css
     Core:   quasar #2764F3 (action/fill) · void #0A0B1F · deep-space #163C8C
             meteor #8A8B8E · stardust #E5E5E5
     Accent: electric-cyan #27F3E6 · neon-magenta #C724F3  (accent role ONLY —
             numerals, underlines, emphasis; never body text or UI fills)
     Quasar is a FILL colour. On void it is 3.89:1 — never use it as text.
     Use --quasar-lift for blue text/icons.
     =================================================================== */
  --void:            #0a0b1f;
  --void-900:        #07081a;
  --void-800:        #141533;
  --void-700:        #1a1b36;
  --void-600:        #242552;

  --quasar:          #2764f3;   /* CTAs, fills, accent lines */
  --quasar-700:      #1e50c9;   /* hover / pressed */
  --quasar-lift:     #8fb8ff;   /* text-safe blue, 8.8:1 on void */
  --quasar-focus:    #5b9bff;   /* focus stroke */
  --quasar-100:      rgba(39, 100, 243, 0.12);
  --quasar-tint:     rgba(39, 100, 243, 0.18);
  --deep-space:      #163c8c;

  --meteor:          #8a8b8e;
  --stardust:        #e5e5e5;
  --fg-3:            #5c5d60;   /* tertiary / disabled only */

  --electric-cyan:   #27f3e6;
  --neon-magenta:    #c724f3;
  --magenta-lift:    #e6a9fa;

  --grad-signature:  linear-gradient(90deg, var(--neon-magenta) 0%, var(--electric-cyan) 100%);
  --hero-grad:       linear-gradient(135deg, var(--deep-space) 0%, var(--quasar) 100%);
  --shadow-glow-blue: 0 0 0 1px rgba(39, 100, 243, .45), 0 8px 24px rgba(39, 100, 243, .30);

  /* ---- template aliases ---- */
  --bg: var(--void);
  --bg-2: var(--void-900);
  --surface: var(--void-800);
  --surface-2: var(--void-600);
  --line: rgba(229, 229, 229, 0.10);
  --line-strong: rgba(229, 229, 229, 0.32);
  --text: var(--stardust);
  --muted: var(--meteor);
  --faint: var(--meteor);   /* system has no 3rd readable tier; fg-3 is disabled-only */
  --accent: var(--quasar);

  --radius: 18px;
  --radius-sm: 12px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--quasar); color: #fff; }
:focus-visible { outline: 2px solid var(--quasar-focus); outline-offset: 3px; border-radius: 6px; }

/* Gutters grow to clear the notch / rounded corners in landscape on phones. */
.container {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Touch behaviour ---------- */
/* Kill the 300ms tap delay and the grey flash on anything tappable. */
a, button, summary, label, input, select, textarea { -webkit-tap-highlight-color: rgba(39, 100, 243, .18); }
.btn, .icon-btn, .nav-toggle, .nav-links a, .faq summary, .link-arrow, .card, .case, .service-row { touch-action: manipulation; }

/* Body scroll lock for the mobile menu and the lightbox. `position: fixed` is
   the only lock iOS Safari honours; JS restores the scroll offset on release.
   Pinning the body breaks the sticky header (it would ride up with the body and
   take the close button off screen), so the header switches to `fixed` and the
   padding replaces the space it vacates — the content underneath does not move. */
body.is-locked { position: fixed; left: 0; width: 100%; overflow: hidden; padding-top: var(--header-h, 72px); }
body.is-locked .site-header { position: fixed; top: 0; left: 0; right: 0; }

/* On touch there is no pointer to leave, so a :hover transform sticks after a
   tap. Keep the colour shifts, drop the movement. */
@media (hover: none) {
  .card:hover, .case:hover, .btn--primary:hover { transform: none; }
  .case:hover .mock, .case:hover .shot, .case:hover .shot-img,
  .case:hover .deck-slide, .case:hover .case-media--photo > img,
  .g-item:hover img, .ui-shot:hover img, .client-img:hover { transform: none; }
  .service-row:hover .arrow { transform: none; }
  /* Inline text links need a 44px target even though the text is 24px tall. */
  .link-arrow { min-height: 44px; }
}
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section--tight { padding: clamp(48px, 7vw, 80px) 0; }
.section--alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--electric-cyan);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
/* one-word heading highlight — system `.hl-cyan` pattern (13.93:1 on void) */
.grad-text { color: var(--electric-cyan); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 640px; }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 { font-size: clamp(32px, 4.6vw, 56px); max-width: 760px; margin-top: 14px; }
/* signature gradient underline — magenta -> cyan, under every section H2 */
.section-head h2::after { content: ""; display: block; width: 200px; height: 3px; border-radius: 999px; background: var(--grad-signature); margin-top: 16px; }
.section-head p { max-width: 440px; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  font-family: var(--font); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--quasar); color: #fff; }
.btn--primary:hover { background: var(--quasar-700); box-shadow: var(--shadow-glow-blue); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: rgba(229, 229, 229, .45); color: var(--stardust); background: rgba(229, 229, 229, .06); }
.btn--sm { padding: 10px 18px; font-size: 14px; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--quasar-lift); font-weight: 600; font-size: 15px; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 31, 0.72);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 48px; width: auto; filter: brightness(1.15); } /* slight lift so the thin tagline reads on dark */
.logo--lg img { height: 56px; }
@media (max-width: 640px) { .logo img { height: 36px; } .logo--lg img { height: 48px; } }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 15px; font-weight: 500; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.nav-links a.is-active { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px; width: 44px; height: 44px; color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s, background .25s; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-links a { white-space: nowrap; }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn { display: none; }
  .nav-links {
    /* --header-h is measured by JS so the panel always meets the real header,
       whatever the logo size works out to. */
    position: fixed; top: var(--header-h, 72px); left: 0; right: 0; bottom: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px max(var(--gutter), env(safe-area-inset-left)) 24px;
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    /* A landscape phone is shorter than this menu: let it scroll instead of
       hiding "Get in touch" off the bottom of the screen. */
    max-height: calc(100vh - var(--header-h, 72px));
    max-height: calc(100dvh - var(--header-h, 72px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav-links a { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 18px; color: var(--text); }
  .nav-links a:hover { background: none; color: var(--quasar-lift); }
  .nav-links .btn { margin-top: 20px; border-bottom: 0; color: #fff; padding: 14px; }
  .nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
}
@media (min-width: 1081px) { .nav-links .btn { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%);
  opacity: .55; pointer-events: none;
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .5; }
.glow--teal { width: 520px; height: 520px; background: rgba(39, 100, 243, .40); top: -160px; right: -120px; }
.glow--sky { width: 380px; height: 380px; background: rgba(22, 60, 140, .55); bottom: -160px; left: -140px; }

.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(44px, 7.4vw, 96px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; margin: 18px 0 24px; }
.hero .lead { margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 70% at 80% 0%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 80% 0%, #000 10%, transparent 70%); opacity: .5; pointer-events: none; }
.page-hero h1 { font-size: clamp(40px, 6.4vw, 80px); font-weight: 800; letter-spacing: -0.035em; margin: 18px 0 22px; max-width: 900px; position: relative; }
.page-hero .lead { position: relative; }

/* Hero visual — realistic phone (CSS-built frame, live HTML screen) */
.hero-visual { position: relative; min-height: 460px; display: grid; place-items: center; perspective: 1800px; }
.phone {
  position: relative; width: min(310px, 76vw); aspect-ratio: 9 / 19.3; border-radius: 56px; padding: 10px;
  /* titanium edge: dark metal with light catching both rims */
  background: linear-gradient(140deg, #8a959c 0%, #3b454c 9%, #1a2125 30%, #12171a 60%, #2c353b 88%, #7f8b92 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    inset 0 0 0 3px #0c1013,
    0 60px 120px -20px rgba(0, 0, 0, .75),
    0 30px 60px rgba(0, 0, 0, .45),
    0 0 140px rgba(39, 100, 243, .28);
  transform: rotateY(-17deg) rotateX(7deg) rotateZ(4deg);
  animation: phoneFloat 9s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%, 100% { transform: rotateY(-17deg) rotateX(7deg) rotateZ(4deg) translateY(0); }
  50% { transform: rotateY(-12deg) rotateX(5deg) rotateZ(3deg) translateY(-12px); }
}
/* glass reflection over the screen */
.phone::after {
  content: ""; position: absolute; inset: 10px; border-radius: 46px; pointer-events: none; z-index: 5;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 26%, transparent 38%, transparent 78%, rgba(255, 255, 255, .05) 100%);
}
.phone-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #6d787f, #2a3237); }
.phone-btn--action { left: -3px; top: 17%; height: 30px; }
.phone-btn--up { left: -3px; top: 25%; height: 52px; }
.phone-btn--down { left: -3px; top: 34%; height: 52px; }
.phone-btn--power { right: -3px; top: 28%; height: 80px; background: linear-gradient(270deg, #6d787f, #2a3237); }
.device {
  position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden;
  border: 3px solid #000;
  background: radial-gradient(120% 60% at 80% 0%, rgba(39, 100, 243, .26), transparent 60%), linear-gradient(170deg, var(--void-700), var(--void) 65%);
  padding: 14px 16px 22px; display: flex; flex-direction: column; gap: 10px;
}
/* Dynamic Island */
.device::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 27px; border-radius: 999px; background: #000; z-index: 2; }
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 14px 0; height: 27px; font-size: 13px; font-weight: 600; color: var(--text); }
.status-icons { display: inline-flex; align-items: center; gap: 5px; }
.status-icons svg { width: 16px; height: 11px; }
.battery { width: 23px; height: 11px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 3px; padding: 1px; position: relative; }
.battery::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .55); }
.battery i { display: block; height: 100%; width: 78%; background: var(--text); border-radius: 1px; }
.device-top { margin-top: 8px; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.device-top b { display: block; font-size: 13px; color: var(--text); }
.device-top small { display: block; font-size: 11px; color: var(--electric-cyan); }
.app-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--quasar); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.device-title { font-family: var(--display); font-size: 21px; line-height: 1.2; margin: 6px 0 2px; color: var(--text); }
.home-bar { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 110px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .6); }
/* chat plays out message by message (fill-mode both keeps them visible when motion is reduced) */
.device .bubble { animation: bubbleIn .5s cubic-bezier(.2, .9, .3, 1.2) both; }
/* children 1–3 are status bar, app header and title; bubbles are 4–7 */
.device .bubble:nth-child(4) { animation-delay: .8s; }
.device .bubble:nth-child(5) { animation-delay: 2.2s; }
.device .bubble:nth-child(6) { animation-delay: 3.4s; }
.device .bubble:nth-child(7) { animation-delay: 4.2s; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.bubble { padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.45; max-width: 88%; }
.bubble--in { background: var(--void-700); color: var(--muted); border-bottom-left-radius: 6px; } /* void-700 not -600: meteor needs 4.5:1 */
.bubble--out { background: var(--quasar); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; font-weight: 500; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.device-input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 10px 10px 16px; font-size: 13px; color: var(--faint); }
.device-input b { width: 30px; height: 30px; border-radius: 50%; background: var(--quasar); display: grid; place-items: center; color: #fff; }

.chip {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(20, 21, 51, .88); border: 1px solid var(--line-strong); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 500; box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  animation: float 6s ease-in-out infinite;
}
.chip small { display: block; color: var(--faint); font-weight: 400; font-size: 12px; }
.chip .dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.chip .dot svg { width: 18px; height: 18px; }
.chip--a { top: -5%; left: -16%; }
.chip--b { bottom: 14%; right: -6%; animation-delay: -3s; }
.chip--c { top: 46%; right: -10%; animation-delay: -1.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Trusted by */
.trusted { position: relative; margin-top: clamp(48px, 6vw, 80px); display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.trusted > span { font-size: 13px; color: var(--faint); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 48px); }
.client-logo { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--muted); opacity: .75; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s, color .2s; }
.client-logo:hover { opacity: 1; color: var(--text); }
.client-logo i { width: 18px; height: 18px; border-radius: 5px; border: 2px solid currentColor; display: inline-block; }
.client-logo i.r { border-radius: 50%; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px); position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s, background .3s;
}
.card:hover { border-color: rgba(39, 100, 243, .50); transform: translateY(-4px); }
.card h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 15px; }
.card .icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; background: var(--quasar-tint); color: var(--quasar-lift); }
.card .icon svg { width: 24px; height: 24px; }
.card .icon--sky { background: rgba(39, 243, 230, .14); color: var(--electric-cyan); }
.card .icon--sage { background: rgba(199, 36, 243, .18); color: var(--magenta-lift); }
.card .icon--steel { background: rgba(229, 229, 229, .08); color: var(--stardust); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Case studies */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .3s, transform .3s; }
.case:hover { border-color: rgba(39, 100, 243, .50); transform: translateY(-4px); }
.case-media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; display: grid; place-items: center; }
.case-media::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; }
.case-media .mock { position: relative; z-index: 1; width: 62%; height: 64%; border-radius: 12px; background: rgba(10, 11, 31, .75); border: 1px solid rgba(255,255,255,.14); padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: transform .5s ease; }
.case:hover .mock { transform: scale(1.05) translateY(-4px); }
.mock i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.mock i.w60 { width: 60%; } .mock i.w40 { width: 40%; } .mock i.w80 { width: 80%; }
.mock i.accent { background: var(--quasar); width: 34%; height: 10px; }
.mock .bars { margin-top: auto; display: flex; align-items: end; gap: 6px; height: 40%; }
.mock .bars b { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(var(--quasar-lift), rgba(39,100,243,.2)); }
.bg-1 { background: radial-gradient(circle at 30% 20%, #1d4fa8, #0b1330 70%); }
.bg-2 { background: radial-gradient(circle at 70% 30%, #163c8c, #0a0f28 70%); }
.bg-3 { background: radial-gradient(circle at 40% 70%, #6d2a8c, #16102b 70%); }
.bg-4 { background: radial-gradient(circle at 60% 20%, #2764f3, #0d1536 70%); }
.bg-5 { background: radial-gradient(circle at 20% 80%, #1f7a8c, #08141f 70%); }
.bg-6 { background: radial-gradient(circle at 80% 70%, #3b3a9a, #101030 70%); }
.case-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tag { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--meteor); }
.case-body h3 { font-size: 20px; line-height: 1.25; }
.case-body p { color: var(--muted); font-size: 15px; }
.case-body .result { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.case-body .result b { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--electric-cyan); white-space: nowrap; }

/* Project-specific screens inside case cards */
.case-media--photo::after { display: none; }
.case-media--photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case:hover .case-media--photo > img { transform: scale(1.05); }
/* Client logo badge on project photos */
.case-logo { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; height: 42px; padding: 6px 12px; border-radius: 10px; background: rgba(10, 11, 31, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.case-logo img { height: 28px; width: auto; display: block; }
.case-logo .client-word { font-size: 13px; letter-spacing: .1em; opacity: 1; color: #c4a374; }
.shot { position: relative; z-index: 1; width: 82%; border-radius: 10px; overflow: hidden; background: #f5f5f5; color: #2f3136; font-size: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); transition: transform .5s ease; }
.case:hover .shot { transform: translateY(-4px) scale(1.03); }
.shot-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: linear-gradient(90deg, #1e50c9, #2764f3); color: #fff; font-weight: 600; }
.shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.shot-bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-app { padding: 4px 0 6px; }
.shot .t-row { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr; padding: 6px 10px; align-items: center; }
.shot .t-row span:first-child { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.av { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: #1e50c9; color: #fff; font-size: 8px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.av2 { background: #7c3aed; } .av3 { background: #5c5d60; }
.aw { font-size: 9px; padding: 2px 6px; border-radius: 999px; background: #5c5d60; color: #fff; }
.aw--g { background: #d9a520; } .aw--b { background: #b07a4f; }
.shot--chat { width: 74%; background: var(--void-800); color: var(--text); border: 1px solid rgba(255, 255, 255, .12); padding: 10px; display: grid; gap: 8px; font-size: 11px; }
.chat-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.chat-head img { width: 26px; height: 26px; object-fit: contain; background: #000; border-radius: 50%; padding: 3px; }
.chat-head b { display: block; font-size: 11px; } .chat-head small { color: #25d366; font-size: 9px; }
.chat-msg { padding: 7px 10px; border-radius: 12px; max-width: 86%; line-height: 1.35; }
.chat-msg--out { background: #1f6f5c; justify-self: end; border-bottom-right-radius: 4px; }
.chat-msg--in { background: var(--void-700); color: var(--muted); border-bottom-left-radius: 4px; }
.chat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-chips span { font-size: 9px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(39, 243, 230, .5); color: var(--electric-cyan); }

/* Deck builder screen (warm advisory-firm palette, sample data) */
.bg-deck { background: radial-gradient(circle at 70% 20%, #6b5536, #1d1710 70%); }
.shot--deck { width: 80%; background: #f5f1ea; color: #3d3428; padding: 10px 12px; display: grid; gap: 8px; font-size: 10px; }
.deck-top { display: flex; justify-content: space-between; align-items: baseline; }
.deck-top b { font-family: var(--display); font-size: 13px; color: #2a2219; }
.deck-top span { font-size: 9px; color: #8a7a63; }
.deck-drop { display: flex; justify-content: space-between; align-items: center; border: 1px dashed #b9a98f; border-radius: 6px; padding: 6px 8px; background: #fff; }
.deck-file { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.deck-file::before { content: ""; width: 9px; height: 11px; border-radius: 2px; border: 1.5px solid #6b5536; }
.deck-drop em { font-style: normal; font-size: 9px; font-weight: 700; color: #4f8a5b; }
.deck-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.deck-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 8.5px; color: #8a7a63; }
.deck-fields i { font-style: normal; font-size: 10px; color: #2a2219; background: #fff; border: 1px solid #ddd2c0; border-radius: 4px; padding: 3px 6px; }
.deck-btn { justify-self: end; background: #6b5536; color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 9px; }

/* Flow layout: form (back, left) → arrow → presentation slide (front, right) */
.deck-flow .shot, .deck-flow .deck-slide { position: absolute; }
.deck-src { left: 4%; top: 19%; width: 41%; padding: 8px 9px; gap: 6px; font-size: 8px; transform: scale(.97); opacity: .92; }
.deck-src .deck-top b { font-size: 10px; }
.deck-src .deck-drop { padding: 4px 6px; }
.deck-src .deck-fields { gap: 4px; }
.deck-src .deck-fields label { font-size: 7px; }
.deck-src .deck-fields i { font-size: 8px; padding: 2px 4px; }
.flow-label { position: absolute; top: 6%; z-index: 3; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e9dcc6; opacity: .85; }
.flow-label--in { left: 6%; } .flow-label--out { right: 6%; }
.deck-arrow { position: absolute; z-index: 4; left: 45.5%; top: 52%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--quasar); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(39, 100, 243, .25), 0 8px 20px rgba(0, 0, 0, .4); }
.deck-arrow svg { width: 15px; height: 15px; }
.deck-slide {
  right: 4%; top: 17%; width: 47%; aspect-ratio: 4 / 3.1; z-index: 2; background: #fbf8f3; color: #2a2219; border-radius: 6px; overflow: hidden;
  padding: 0 9px 7px; display: flex; flex-direction: column; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); transition: transform .5s ease;
}
.case:hover .deck-slide { transform: translateY(-4px) scale(1.04); }
.slide-head { display: flex; justify-content: space-between; align-items: center; margin: 0 -9px 6px; padding: 4px 9px; background: #6b5536; color: #f5ecdc; font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.slide-head em { font-style: normal; opacity: .7; }
.slide-title { font-family: var(--display); font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-sub { font-size: 7px; color: #8a7a63; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-chart { flex: 1 1 0; width: 100%; min-height: 28px; }
.slide-legend { display: flex; gap: 8px; align-items: center; font-size: 7px; color: #5c4f3d; margin-top: 3px; }
.slide-legend span { display: inline-flex; align-items: center; gap: 3px; }
.slide-legend i { width: 8px; height: 2px; border-radius: 1px; }
.slide-legend .l1 { background: #a8875a; } .slide-legend .l2 { background: #3f7d6e; }
.deck-src .deck-file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Service list (Netguru-style expanding rows) */
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 80px 1fr 1.3fr 40px; gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); transition: background .3s; position: relative; }
.service-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--grad-signature); transition: width .5s ease; }
.service-row:hover::before { width: 100%; }
/* system `.mono-num` — tabular cyan markers replace bullets */
.service-row .num { font-family: var(--mono); font-weight: 500; color: var(--electric-cyan); font-size: 15px; font-variant-numeric: tabular-nums; padding-top: 6px; }
.service-row h3 { font-size: clamp(22px, 2.6vw, 32px); transition: color .3s; }
.service-row:hover h3 { color: var(--quasar-lift); }
.service-row p { color: var(--muted); }
.service-row .arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: all .3s; }
.service-row .arrow svg { width: 16px; height: 16px; }
.service-row:hover .arrow { background: var(--quasar); border-color: var(--quasar); color: #fff; transform: rotate(-45deg); }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { padding: clamp(24px, 3vw, 40px); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--display); color: var(--electric-cyan); font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px; }
.stat span { color: var(--muted); font-size: 15px; }

/* Testimonials */
/* overscroll-behavior-x stops a swipe past the last card triggering the
   browser's back gesture on iOS/Android. */
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; scrollbar-color: var(--line-strong) transparent; }
.quote { margin: 0; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 24px; min-height: 280px; }
/* pullquote glyph — system specifies neon-magenta */
.quote svg.q { width: 32px; height: 32px; color: var(--neon-magenta); }
.quote blockquote { margin: 0; font-family: var(--display); font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; }
.quote .who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--quasar); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.quotes::-webkit-scrollbar { display: none; }
.avatar--logo { background: var(--void); border: 1px solid var(--line-strong); padding: 6px; }
.avatar--logo img { width: 100%; height: 100%; object-fit: contain; }
.avatar--word { background: #2a2219; border: 1px solid #6b5536; color: #c4a374; font-size: 13px; letter-spacing: .06em; }
@media (max-width: 900px) { .quotes { grid-auto-columns: calc((100% - 20px) / 2); } }
.who b { display: block; font-size: 15px; }
.who span { font-size: 13px; color: var(--faint); }
.carousel-nav { display: flex; gap: 10px; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: all .2s; }
.icon-btn:hover { border-color: rgba(39, 100, 243, .55); color: var(--quasar-lift); }
.icon-btn svg { width: 18px; height: 18px; }

/* Process */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), transparent); position: relative; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--electric-cyan); display: block; margin-bottom: 40px; }
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15px; }

/* Split block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.check-list { display: grid; gap: 14px; margin-top: 28px; }
.check-list li { display: flex; gap: 12px; color: var(--muted); }
.check-list li svg { width: 20px; height: 20px; color: var(--quasar-lift); flex-shrink: 0; margin-top: 3px; }
.check-list li b { color: var(--text); font-weight: 600; }

.panel { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); padding: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; }
.panel::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(39, 100, 243, .22); filter: blur(70px); top: -120px; right: -100px; }
.panel > * { position: relative; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(40px, 7vw, 88px); background: var(--hero-grad); border: 1px solid rgba(39, 100, 243, .45); }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(32px, 5vw, 60px); max-width: 780px; margin: 14px 0 20px; }
/* On the hero gradient quasar is the background, so the CTA inverts to
   Stardust-on-Void (approved pairing) and the label drops cyan, which only
   reaches 3.75:1 over quasar. */
.cta-band .eyebrow { color: var(--stardust); }
.cta-band .btn--primary { background: var(--stardust); color: var(--void); }
.cta-band .btn--primary:hover { background: #fff; box-shadow: 0 8px 24px rgba(7, 8, 26, .45); }
.cta-band .btn--ghost { border-color: rgba(229, 229, 229, .5); color: var(--stardust); }
.cta-band .btn--ghost:hover { background: rgba(229, 229, 229, .14); border-color: rgba(229, 229, 229, .75); color: #fff; }
.cta-band p { color: rgba(229, 229, 229, .9); max-width: 560px; margin-bottom: 32px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; font-family: var(--display); font-size: 19px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--electric-cyan); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin-top: 14px; max-width: 760px; }

/* Team */
.team-card { text-align: left; }
.team-photo { aspect-ratio: 1; border-radius: var(--radius-sm); margin-bottom: 18px; display: grid; place-items: center; font-family: var(--display); font-size: 40px; font-weight: 700; color: rgba(255,255,255,.85); }
.team-card h3 { font-size: 18px; margin-bottom: 4px; }
.team-card p { font-size: 14px; }

/* Client logo images (transparent PNGs in assets/clients/) */
.client-img { height: 62px; width: auto; max-width: 160px; object-fit: contain; opacity: .85; transition: opacity .2s, transform .2s; }
.client-img:hover { opacity: 1; transform: scale(1.05); }
.logo-wall .client-img { height: 88px; max-width: 72%; }
/* Text wordmark for clients without a logo file yet (Soulwealthy: bold spaced caps in brand brown-gold) */
.client-word { font-family: var(--font); font-weight: 800; font-size: 22px; letter-spacing: .08em; color: #a3845a; white-space: nowrap; opacity: .9; transition: opacity .2s; }
.client-word:hover { opacity: 1; }
.logo-wall .client-word { font-size: 26px; }
@media (max-width: 640px) {
  .client-img { height: 48px; max-width: 120px; }
  .client-word, .logo-wall .client-word { font-size: 16px; letter-spacing: .06em; }
  .logo-wall .client-img { height: 64px; }
  .logo-wall > div:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 4 / 1; }
}

/* Scrolling logo strip (JS duplicates the set so the loop is seamless) */
.marquee { flex: 1 1 300px; min-width: 0; overflow: hidden; flex-wrap: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; align-items: center; gap: clamp(36px, 5vw, 64px); padding-right: clamp(36px, 5vw, 64px); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Logo wall */
.logo-wall { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logo-wall > div { aspect-ratio: 2 / 1; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.logo-wall > div:hover { background: var(--surface); }

/* Featured client (current engagement) */
.client-logo--real { opacity: 1; color: var(--text); }
.featured { border: 1px solid rgba(39, 100, 243, .40); border-radius: 28px; padding: clamp(24px, 4vw, 48px); background: linear-gradient(160deg, rgba(39, 100, 243, .10), transparent 60%), var(--bg-2); }
.featured-head { margin-bottom: clamp(24px, 3vw, 36px); }
.featured h2 { font-size: clamp(36px, 5vw, 60px); margin: 14px 0 8px; }
.featured-meta { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--electric-cyan); padding: 6px 12px; border-radius: 999px; background: rgba(39, 243, 230, .14); border: 1px solid rgba(39, 243, 230, .35); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--electric-cyan); box-shadow: 0 0 0 0 rgba(39, 243, 230, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(39, 243, 230, 0); } 100% { box-shadow: 0 0 0 0 rgba(39, 243, 230, 0); } }
.roadmap { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 14px; }
.roadmap li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.roadmap li:last-child { border-bottom: 0; padding-bottom: 0; }
.roadmap b { font-family: var(--mono); color: var(--quasar-lift); font-weight: 500; }
.roadmap span { color: var(--muted); font-size: 15px; }

.status--done { color: var(--quasar-lift); background: var(--quasar-tint); border-color: rgba(39, 100, 243, .35); }
.status--done i { background: var(--quasar); animation: none; }

/* Real product screenshots in case-study modules (click to enlarge) */
.ui-shot { margin: 0; height: 196px; border-radius: 14px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); border: 1px solid var(--line-strong); }
.ui-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .5s ease; }
.ui-shot:hover img { transform: scale(1.04); }
.shot-img { position: relative; z-index: 1; width: 86%; border-radius: 8px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); transition: transform .5s ease; }
.case:hover .shot-img { transform: translateY(-4px) scale(1.03); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Case-study modules with recreated UI mock-ups (no real data) */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module h3 { font-size: 20px; margin: 20px 0 8px; }
.module p { color: var(--muted); font-size: 15px; }
.ui { background: #f5f5f5; color: #2f3136; border-radius: 14px; overflow: hidden; font-size: 11px; height: 196px; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.ui-bar { background: linear-gradient(90deg, #1e50c9, #2764f3); color: #fff; font-weight: 600; padding: 9px 12px; display: flex; align-items: center; gap: 8px; }
.ui-bar span { width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .8); }
.ui-cal { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 18px repeat(3, 1fr); gap: 4px; padding: 10px 12px; flex: 1; }
.ui-cal i { border-radius: 4px; background: #e7e7ea; }
.ui-cal i.on { background: #1e50c9; }
.ui-cal b { border-radius: 4px; background: #2764f3; }
.ui-cal b.b2 { background: #7c3aed; } .ui-cal b.b3 { background: #5c5d60; }
.ui-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid #e7e7ea; }
.ui-row em { font-style: normal; font-weight: 700; color: #fff; background: #e0533f; border-radius: 4px; padding: 1px 6px; font-size: 10px; }
.ui-row em.g { background: #5c5d60; }
.ui-table { padding-bottom: 8px; }
.t-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr .7fr; padding: 6px 12px; border-bottom: 1px solid #e7e7ea; }
.t-head { font-weight: 700; color: var(--meteor); font-size: 10px; }
.t-row.hi { background: rgba(39, 100, 243, .16); font-weight: 600; }
.ui-award { margin: auto 12px 0 auto; background: #5c5d60; color: #fff; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ui-report { padding-bottom: 12px; }
.ui-report p { padding: 12px; line-height: 1.6; margin: 0; color: #2f3136; font-size: 11px; }
.ui-report mark { background: rgba(39, 100, 243, .2); color: #1e50c9; padding: 0 3px; border-radius: 3px; }
.ui-chips { display: flex; gap: 6px; padding: 0 12px; }
.ui-chips em { font-style: normal; background: #1e50c9; color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 10px; }
.ui-progress { margin: auto 12px 0; height: 8px; border-radius: 4px; background: #e7e7ea; overflow: hidden; }
.ui-progress i { display: block; height: 100%; width: 100%; background: #4caf50; }
@media (max-width: 900px) { .modules { grid-template-columns: 1fr; } .module { max-width: 520px; } }

/* Photos */
.photo-frame { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-badge { position: absolute; left: 16px; bottom: 16px; }
.photo-badge .status { background: rgba(10, 11, 31, .75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mc-hero h1 { font-size: clamp(40px, 5.6vw, 72px); }
.mc-hero .photo-frame { aspect-ratio: 3 / 2; }

/* Masterclass gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; grid-auto-flow: dense; }
.g-item { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; background: var(--surface); }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.g-item:hover img { transform: scale(1.04); }
.g-item figcaption { position: absolute; inset: auto 0 0 0; padding: 36px 14px 12px; font-size: 13px; font-weight: 500; background: linear-gradient(transparent, rgba(7, 8, 26, .85)); }
.g-big { grid-column: span 2; grid-row: span 2; }
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }
.g-2r { grid-row: span 2; }
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}
@media (max-width: 640px) {
  .gallery { grid-auto-rows: 130px; gap: 10px; }
  .g-2r { grid-row: span 1; }
  .g-item figcaption { font-size: 12px; padding: 28px 10px 8px; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(7, 8, 26, .92); display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 14px; cursor: zoom-out;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow-y: auto; overscroll-behavior: contain;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; max-height: 78dvh; border-radius: 12px; object-fit: contain; }
.lightbox p { color: var(--muted); font-size: 14px; text-align: center; }
/* Clear of the notch, and never under the tap zone of the photo itself. */
.lightbox button { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); background: rgba(10, 11, 31, .75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 32px; background: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; margin-bottom: 56px; }
.footer-grid h4 { font-family: var(--font); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: 18px; font-weight: 600; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid li a { color: var(--muted); font-size: 15px; transition: color .2s; }
.footer-grid li a:hover { color: var(--quasar-lift); }
.footer-about p { color: var(--muted); margin: 18px 0 24px; max-width: 340px; font-size: 15px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--muted); transition: all .2s; }
.socials a:hover { color: var(--quasar-lift); border-color: rgba(39, 100, 243, .55); }
.socials svg { width: 17px; height: 17px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }

/* Floating WhatsApp */
/* Clears the home indicator on gesture-nav phones. */
.wa-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }

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

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4, .process { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .chip--c { display: none; }
}
@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-visual { min-height: 420px; }
  .cases, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .service-row { grid-template-columns: 48px 1fr 40px; }
  .service-row > div:nth-child(3) { grid-column: 2 / 3; }
  .service-row .arrow { grid-column: 3; grid-row: 1; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cases { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 85%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .cases::-webkit-scrollbar { display: none; }
  .case { scroll-snap-align: start; }
  .grid-2, .grid-3, .grid-4, .process { grid-template-columns: 1fr; }
  .quotes { grid-auto-columns: 88%; }
  .quote blockquote { font-size: 19px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-row { grid-template-columns: 1fr 40px; gap: 12px; padding: 26px 0; }
  .service-row .num { grid-column: 1; }
  .service-row > div:nth-child(2), .service-row > div:nth-child(3) { grid-column: 1 / -1; }
  .service-row .arrow { grid-column: 2; grid-row: 1; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .chip--a { display: none; } .chip--b { right: 0; }
  .trusted { gap: 16px; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* Landscape phones: the hero stacks to one column below 900px, so the phone
   mock would otherwise fill a whole 360px-tall screen on its own. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-visual { min-height: 300px; }
  .phone { width: min(210px, 34vw); }
  .chip { display: none; }
  .section { padding: clamp(48px, 8vh, 72px) 0; }
}