/* ==========================================================================
   BleetzApp — enhancement layer v2
   Loaded after the base <style> block so it can refine it without rewriting it.

   1. Tokens & background      6. App detail pages
   2. Typography               7. Navigation & footer
   3. Motion & focus           8. Home sections
   4. Hero                     9. Responsive
   5. Cards & catalogue       10. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS & BACKGROUND
   -------------------------------------------------------------------------- */
:root {
  /* Layered elevation. Real objects cast both a tight contact shadow and a
     soft ambient one; a single large blur is what makes a page look cheap. */
  --e-1: 0 1px 2px rgba(14,42,59,.04), 0 1px 3px rgba(14,42,59,.05);
  --e-2: 0 2px 4px rgba(14,42,59,.04), 0 6px 16px rgba(14,42,59,.07);
  --e-3: 0 4px 8px rgba(14,42,59,.05), 0 16px 32px rgba(14,42,59,.09);
  --e-4: 0 8px 16px rgba(14,42,59,.06), 0 32px 64px rgba(14,42,59,.13);
  --e-brand: 0 10px 30px rgba(4,117,182,.24), 0 2px 8px rgba(4,117,182,.16);

  --edge: inset 0 1px 0 rgba(255,255,255,.85);

  --dur-1: .18s; --dur-2: .34s; --dur-3: .6s;

  --pad-page: clamp(16px, 5vw, 32px);
  --gap-card: clamp(16px, 2vw, 24px);

  --r-card: 22px;
}

/* A mesh of tinted light instead of flat grey. This is the single biggest
   change to how "expensive" the page reads, and it costs nothing to paint. */
body {
  background-color: #f4f8fa;
  background-image:
    radial-gradient(ellipse 80% 60% at 12% 0%,   rgba(4,117,182,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 8%,   rgba(26,174,143,.09), transparent 62%),
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(5,137,165,.07), transparent 65%);
  background-attachment: fixed;
}

/* Fine grain over the gradients stops them banding on cheap panels and adds
   a paper-like tooth up close. */
/* Sits behind all content via a negative z-index, so nothing else needs its
   own stacking context. Never give this rule a positive z-index and then try
   to lift content above it: overriding `position` on the fixed overlays
   (mobile menu, sticky bar, lightbox) drops them into normal flow. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* Brighter, larger ambient orbs */
.orb-1 { width: 720px; height: 720px; background: radial-gradient(circle, rgba(4,117,182,.13), transparent 70%); }
.orb-2 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(26,174,143,.11), transparent 70%); }

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.hero h1 {
  font-size: clamp(2.75rem, 1.1rem + 6.4vw, 6rem);
  line-height: .93;
  letter-spacing: -.05em;
  font-weight: 600;
}

.hero-c p, .hero-sub {
  font-size: clamp(1.02rem, .93rem + .44vw, 1.3rem);
  line-height: 1.55;
}

.cath h1, .csc h1, .dm h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

h3 { letter-spacing: -.025em; }

/* The gradient headline word gets a richer, longer ramp */
.gt {
  background: linear-gradient(115deg, #7fd4ff 0%, #4fe3c1 46%, #b8f0dd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section eyebrows: a proper glass pill rather than bare text */
.sl {
  font-size: 11px;
  letter-spacing: 2.4px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 100px;
  color: var(--ac1);
  background: linear-gradient(135deg, rgba(4,117,182,.12), rgba(26,174,143,.09));
  border: 1px solid rgba(4,117,182,.16);
  box-shadow: 0 2px 10px rgba(4,117,182,.10), var(--edge);
}

h1, h2, h3, h4, p, .at, .tgl { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   3. MOTION & FOCUS
   -------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [onclick]:focus-visible {
  outline: 2px solid var(--ac1);
  outline-offset: 3px;
  border-radius: 8px;
}

[onclick] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

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

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(104px, 14vh, 150px) var(--pad-page) clamp(52px, 8vh, 76px);
}

.hero-slide { background-size: cover; background-position: center; will-change: opacity; }

.hero-overlay {
  background:
    linear-gradient(180deg, rgba(4,20,32,.62) 0%, rgba(4,20,32,.34) 42%, rgba(4,20,32,.80) 100%),
    radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(4,20,32,.52) 100%);
}

.hero-c { text-shadow: 0 2px 24px rgba(0,0,0,.5); }

/* Hero badge: frosted glass capsule with a live pulse */
.hb {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
  border-radius: 100px;
  padding: 9px 20px 9px 16px;
}

.hbd { box-shadow: 0 0 0 0 rgba(26,174,143,.75); animation: hbPulse 2.4s ease-out infinite; }

@keyframes hbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(26,174,143,.7); }
  70%  { box-shadow: 0 0 0 11px rgba(26,174,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,174,143,0); }
}

/* Trust stats: separated by hairlines like a spec sheet */
.hero .ts, .trust-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 4vw, 44px);
}

/* --------------------------------------------------------------------------
   5. CARDS & CATALOGUE
   -------------------------------------------------------------------------- */

/* Shared surface: frosted white, generous radius, layered depth */
.ac, .fc, .cp-card, .rb, .fqs, .rvw-sec, .vid-sec, .fdc, .dl-stat, .ri {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e-2), var(--edge);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}

.ag {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--gap-card);
  align-items: stretch;
}

.ac {
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
  height: 100%;
  isolation: isolate;
}

/* Gradient hairline that only lights the border, drawn with a mask so it sits
   exactly on the 1px edge rather than bleeding into the card. */
.ac::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(4,117,182,.55), rgba(26,174,143,.35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
  z-index: 2;
}

/* Cursor spotlight — coordinates come from assets/enhance.js */
.ac::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(4,117,182,.13), rgba(26,174,143,.07) 38%, transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
  z-index: 1;
}

.ac > * { position: relative; z-index: 3; }

@media (hover: hover) {
  .ac:hover {
    transform: translateY(-6px);
    box-shadow: var(--e-4), var(--edge);
  }
  .ac:hover::before, .ac:hover::after { opacity: 1; }
  .ac:hover .ac-mockup img { transform: scale(1.06); }
  .ac:hover .ca { gap: 12px; color: var(--ac1l); }
}

.ac-mockup { overflow: hidden; border-radius: 16px; }
.ac-mockup img { transition: transform var(--dur-3) var(--ease); will-change: transform; }

.ca { transition: gap var(--dur-1) var(--ease), color var(--dur-1) var(--ease); font-weight: 600; }

/* Tag chips */
.tg {
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2px;
  padding: 5px 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(4,117,182,.14);
  color: var(--text-2);
  box-shadow: 0 1px 3px rgba(14,42,59,.05);
}

/* Status badges */
.bdg {
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: .6px;
  font-size: 10.5px;
  padding: 6px 13px;
}
.bdg-l {
  background: linear-gradient(135deg, rgba(26,174,143,.16), rgba(26,171,128,.1));
  border: 1px solid rgba(26,174,143,.3);
  box-shadow: 0 2px 10px rgba(26,174,143,.16);
}
.bdg-s {
  background: linear-gradient(135deg, rgba(4,117,182,.13), rgba(5,137,165,.09));
  border: 1px solid rgba(4,117,182,.26);
  box-shadow: 0 2px 10px rgba(4,117,182,.14);
}

/* App icon tiles: gradient ring, white face, real depth */
.ai, .dtic, .csic {
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(4,117,182,.12),
    0 6px 18px rgba(14,42,59,.12),
    var(--edge);
  transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease);
}

.ac:hover .ai { transform: scale(1.06) rotate(-2.5deg); box-shadow: 0 0 0 1px rgba(4,117,182,.2), 0 10px 26px rgba(4,117,182,.2), var(--edge); }

.app-icon-img, .ai img, .dtic img, .csic img {
  object-fit: contain !important;
  padding: 14%;
  background: transparent;
}

/* --------------------------------------------------------------------------
   6. APP DETAIL PAGES
   -------------------------------------------------------------------------- */
.din { padding-inline: var(--pad-page); }

/* Primary CTA: gradient face, brand glow, and a shine that sweeps on hover */
.bdl {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  box-shadow: var(--e-brand);
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform var(--dur-1) var(--spring),
              box-shadow var(--dur-2) var(--ease),
              filter var(--dur-1) ease;
}

.bdl::after {
  content: '';
  position: absolute;
  top: 0; left: -85%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--ease);
  pointer-events: none;
}

@media (hover: hover) {
  .bdl:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(4,117,182,.32), 0 4px 10px rgba(4,117,182,.2);
    filter: saturate(1.1);
  }
  .bdl:hover::after { left: 130%; }
}

.bdl:active { transform: translateY(1px) scale(.985); }

.bwa {
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur-1) var(--spring), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.bwa:hover { transform: translateY(-3px); border-color: rgba(4,117,182,.35); box-shadow: var(--e-2); }

/* Stat tiles with gradient numerals */
.dl-stats { gap: clamp(10px, 1.6vw, 18px); padding: 20px 0 6px; }

.dl-stat {
  flex: 1 1 160px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 18px;
}

.dl-stat-num {
  font-family: var(--f-d);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, #0475B6, #058da5 55%, #1aae8f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dl-stat-lbl { letter-spacing: .8px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; }

.dl-stat-icon {
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(4,117,182,.1), rgba(26,174,143,.08));
  box-shadow: inset 0 0 0 1px rgba(4,117,182,.1);
}

/* Requirements grid */
.rg { gap: clamp(10px, 1.6vw, 16px); }
.ri { border-radius: 16px; padding: 14px 16px; }
.ric { border-radius: 10px; background: linear-gradient(135deg, rgba(4,117,182,.09), rgba(26,174,143,.07)); }

/* Feature cards */
.fdc { border-radius: 18px; }
@media (hover: hover) {
  .fdc:hover {
    transform: translateY(-4px);
    box-shadow: var(--e-3), var(--edge);
    border-color: rgba(4,117,182,.22);
  }
}

.fdi {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(14,42,59,.16));
}

/* FAQ rows */
.fqi { border-radius: 16px; overflow: hidden; }
.fqq { transition: background var(--dur-1) ease; font-weight: 600; }
.fqq:hover { background: rgba(4,117,182,.05); }
.fqc { transition: transform var(--dur-2) var(--ease); }
.fqi.open .fqc { transform: rotate(180deg); }

/* Screenshot carousel: snap, hidden bar, and a clear affordance that these
   phones are tappable */
.pm {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 6px;
}
.pm::-webkit-scrollbar { display: none; }

.pf {
  scroll-snap-align: center;
  box-shadow: var(--e-3);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  cursor: zoom-in;
}

@media (hover: hover) {
  .pf:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--e-4); }
}

.pf:active { transform: scale(.985); }

.pm-hint { color: var(--text-3); font-size: 12.5px; }

/* Lightbox: dim harder and blur what's behind it */
#lbox, .lbox {
  background: rgba(4,20,32,.9) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lb-nav {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-1) ease, transform var(--dur-1) var(--spring);
}
.lb-nav:hover { background: rgba(255,255,255,.26); transform: scale(1.08); }

/* Sticky mobile bar */
.stk {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(247,249,250,.82);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 -8px 32px rgba(14,42,59,.1);
}

/* --------------------------------------------------------------------------
   7. NAVIGATION & FOOTER
   -------------------------------------------------------------------------- */
.nav { transition: transform var(--dur-3) var(--ease), background var(--dur-2) ease, box-shadow var(--dur-2) ease; }

.nav.scrolled {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e-3);
}

.nl { gap: 2px; flex-wrap: nowrap; }
.nk, .nc { white-space: nowrap; }
.nav .nk { padding: 8px 12px; font-size: 13.5px; font-weight: 500; border-radius: 9px; }
.nav .nk:hover { background: rgba(4,117,182,.07); }

/* The base sheet styles this as `.nav.scrolled .nc`, which outranks a plain
   `.nav .nc`, so both states are named here. */
.nav .nc,
.nav.scrolled .nc {
  padding: 9px 18px;
  margin-left: 8px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  border: 1px solid transparent;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(4,117,182,.28);
  transition: transform var(--dur-1) var(--spring), box-shadow var(--dur-2) var(--ease);
}
.nav .nc:hover,
.nav.scrolled .nc:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(4,117,182,.36); }

.mm-inner .nk { font-size: clamp(19px, 4.4vw, 24px); padding: 11px 24px; }
.mm-inner { padding-block: 24px; }
.mm { padding-top: env(safe-area-inset-top); }

.ftb p { max-width: 42ch; }

/* --------------------------------------------------------------------------
   8. HOME SECTIONS
   -------------------------------------------------------------------------- */

/* Numbered "How it works" markers get the brand gradient */
.hn {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--f-d);
  font-weight: 600;
}

.fc, .cp-card { border-radius: 18px; }

@media (hover: hover) {
  .fc:hover, .cp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--e-3), var(--edge);
    border-color: rgba(4,117,182,.22);
  }
}

/* Floating WhatsApp button */
.wf {
  box-shadow: 0 8px 28px rgba(37,211,102,.42), 0 2px 8px rgba(0,0,0,.14);
  transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease);
}
.wf:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 14px 36px rgba(37,211,102,.5); }

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   The base stylesheet jumped straight from desktop to 768px, leaving tablets
   and small laptops on the desktop layout.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .din { max-width: 100%; }
  .fdg { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .ag { grid-template-columns: 1fr; }
  .dl-stat { flex-basis: calc(50% - 9px); }
  .dt { gap: 18px; }
}

@media (max-width: 768px) {
  .ac { padding: 20px; gap: 16px; }
  .dt { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dact { flex-direction: column; align-items: stretch; }
  .dact .bdl, .dact .bwa { width: 100%; justify-content: center; }
  .rg { grid-template-columns: repeat(2, 1fr); }
  .cath { padding-top: 110px; }
  .din { padding-bottom: 96px; }
  body { background-attachment: scroll; }   /* fixed attachment janks on mobile */
}

@media (max-width: 480px) {
  .dl-stat { flex-basis: 100%; padding: 14px 16px; }
  .rg { grid-template-columns: 1fr; }
  .mr { flex-wrap: wrap; gap: 8px; }
  .tr { gap: 6px; }
  .tg { font-size: 10.5px; padding: 4px 10px; }
  .sl { font-size: 10px; letter-spacing: 2px; padding: 6px 13px; }
}

@media (max-width: 380px) {
  .ac { flex-direction: column; }
  .ac-phone { width: 100%; min-width: 0; }
  .ac-mockup { height: 200px; }
  .bdl { padding: 14px 20px; font-size: 15px; }
}

/* Touch devices never fire hover, so make the targets comfortable instead */
@media (hover: none) {
  .nl a, .ca, .fqq, .rvw-write-btn, .lb-nav, .mt {
    min-height: 44px; display: flex; align-items: center;
  }
  .ac:active { transform: scale(.99); transition: transform .1s ease; }
  .ac::before { opacity: .55; }   /* show the gradient edge without hover */
}

@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 96px; padding-bottom: 48px; }
}

@media (min-width: 1600px) {
  .din, .catb { max-width: 1180px; }
}

/* --------------------------------------------------------------------------
   10. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .nav, .stk, .wf, .atmo, .mm, body::before { display: none !important; }
  .pg { display: block !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   11. SERVICES PAGE
   -------------------------------------------------------------------------- */
.svc-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--pad-page) clamp(64px, 10vh, 110px);
}

.svc-h {
  font-family: var(--f-d);
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.035em;
  margin: 6px 0 28px;
}

/* ── Company credentials plaque ───────────────────────────────────────────── */
.svc-co {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3.5vw, 40px);
  margin-bottom: clamp(48px, 7vh, 80px);
  border-radius: var(--r-card);
  background:
    linear-gradient(135deg, rgba(4,117,182,.07), rgba(26,174,143,.05)),
    rgba(255,255,255,.8);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e-3), var(--edge);
}

.svc-co-name {
  font-family: var(--f-d);
  font-size: clamp(1.25rem, .95rem + 1.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.03em;
  margin-bottom: 10px;
  background: linear-gradient(120deg, #0475B6, #058da5 55%, #1aae8f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svc-co-main p { color: var(--text-2); max-width: 58ch; line-height: 1.6; }

.svc-co-rc {
  text-align: center;
  padding: 18px 26px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(4,117,182,.18);
  box-shadow: var(--e-1), var(--edge);
  min-width: 190px;
}

.svc-co-rc-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}

.svc-co-rc-val {
  font-family: var(--f-d);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ac1);
  font-variant-numeric: tabular-nums;
}

.svc-co-rc-note {
  font-size: 11px; color: var(--text-3); margin-top: 8px;
  max-width: 20ch; margin-inline: auto; line-height: 1.4;
}

/* ── Capability grid ──────────────────────────────────────────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap-card);
  margin-bottom: clamp(56px, 8vh, 96px);
}

.svc-card {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e-2), var(--edge);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}

/* Brand rail down the left edge that fills in on hover */
.svc-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .svc-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--e-4), var(--edge);
    border-color: rgba(4,117,182,.22);
  }
  .svc-card:hover::before { transform: scaleY(1); }
  .svc-card:hover .svc-ic { transform: scale(1.1) rotate(-4deg); }
}

.svc-ic {
  font-size: 27px;
  line-height: 1;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(4,117,182,.11), rgba(26,174,143,.08));
  box-shadow: inset 0 0 0 1px rgba(4,117,182,.12), 0 3px 10px rgba(14,42,59,.07);
  filter: drop-shadow(0 2px 4px rgba(14,42,59,.14));
  transition: transform var(--dur-2) var(--spring);
}

.svc-card h4 {
  font-family: var(--f-d);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  color: var(--text-1);
}

.svc-card > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 16px;
}

.svc-pts { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }

.svc-pts li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}

/* Custom tick, so the list reads as capability rather than filler */
.svc-pts li::before {
  content: '';
  position: absolute;
  left: 2px; top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 3px rgba(4,117,182,.1);
}

/* ── Process ──────────────────────────────────────────────────────────────── */
.svc-proc {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(56px, 8vh, 96px);
  position: relative;
}

.svc-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e-1), var(--edge);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .svc-step:hover { transform: translateX(5px); box-shadow: var(--e-2), var(--edge); }
}

.svc-step-n {
  font-family: var(--f-d);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, rgba(4,117,182,.85), rgba(26,174,143,.6));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  min-width: 58px;
}

.svc-step-b h4 {
  font-family: var(--f-d);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 5px;
}

.svc-step-b p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.svc-cta {
  text-align: center;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 4vw, 48px);
  border-radius: var(--r-card);
  background:
    linear-gradient(135deg, rgba(4,117,182,.1), rgba(26,174,143,.07)),
    rgba(255,255,255,.75);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e-3), var(--edge);
}

.svc-cta h3 {
  font-family: var(--f-d);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.035em;
  margin-bottom: 12px;
}

.svc-cta p {
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.svc-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .svc-co { grid-template-columns: 1fr; text-align: left; }
  .svc-co-rc { justify-self: stretch; }
  .svc-co-rc-note { max-width: none; }
  .svc-step { grid-template-columns: 1fr; gap: 8px; }
  .svc-cta-btns { flex-direction: column; }
  .svc-cta-btns .bdl, .svc-cta-btns .bwa { width: 100%; justify-content: center; }
}

/* Registered-company line in the footer */
.ft-rc {
  font-size: 12px !important;
  color: var(--text-3);
  margin-top: 10px !important;
  letter-spacing: .2px;
  padding-top: 10px;
  border-top: 1px solid var(--border-s);
  max-width: 280px;
}

/* --------------------------------------------------------------------------
   12. SELECTED WORK
   Each project sits in a browser chrome so it reads as a shipped site rather
   than a stock image.
   -------------------------------------------------------------------------- */
.svc-sub {
  color: var(--text-2);
  max-width: 66ch;
  margin: -14px 0 28px;
  line-height: 1.6;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--gap-card);
  margin-bottom: clamp(56px, 8vh, 96px);
}

.work-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e-2), var(--edge);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .work-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--e-4), var(--edge);
    border-color: rgba(4,117,182,.24);
  }
  .work-card:hover .work-shot img { transform: scale(1.04); }
  .work-card:hover .work-visit { gap: 12px; color: var(--ac1l); }
}

/* Browser chrome */
.work-shot {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #dfe9ee, #eef4f6);
  border-bottom: 1px solid var(--border-s);
}

.work-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(240,246,248,.96);
  border-bottom: 1px solid rgba(14,42,59,.07);
}

.work-chrome span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #d6dfe4;
  flex: none;
}
.work-chrome span:nth-child(1) { background: #ff6058; }
.work-chrome span:nth-child(2) { background: #ffbd2e; }
.work-chrome span:nth-child(3) { background: #28ca42; }

.work-url {
  flex: 1;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(14,42,59,.07);
  font-size: 11.5px;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-3) var(--ease);
  will-change: transform;
}

/* Body */
.work-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.work-sector {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ac1);
}

.work-body h4 {
  font-family: var(--f-d);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0;
}

.work-body > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

.work-stats {
  display: flex;
  gap: 10px;
  margin: 4px 0 2px;
  flex-wrap: wrap;
}

.work-stat {
  flex: 1 1 120px;
  padding: 11px 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(4,117,182,.07), rgba(26,174,143,.05));
  border: 1px solid rgba(4,117,182,.12);
}

.work-stat-n {
  font-family: var(--f-d);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #0475B6, #1aae8f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.work-stat-l {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
}

.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.work-visit {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ac1);
  transition: gap var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

@media (max-width: 520px) {
  .work-body { padding: 18px; }
  .work-stat { flex-basis: 100%; }
  .work-url { font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   13. CATALOGUE CARD RATING
   -------------------------------------------------------------------------- */
.ach-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ac-rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(230,149,0,.24);
  box-shadow: 0 1px 4px rgba(14,42,59,.06);
  white-space: nowrap;
}

.ac-rate-stars { display: inline-flex; gap: 1px; font-size: 11px; line-height: 1; color: var(--ac-amber); }
.ac-rate-stars .empty { color: rgba(14,42,59,.18); }

.ac-rate-n {
  font-family: var(--f-d);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

@media (max-width: 420px) {
  .ach-r { gap: 7px; }
  .ac-rate { padding: 4px 9px; }
  .ac-rate-n { font-size: 11.5px; }
}

/* --------------------------------------------------------------------------
   14. HOME SHOWCASE — featured panel + selector rail
   Replaces the old three-slot pyramid, which stacked every app past the third
   into the same position. Sits over the hero image, so it is glass on dark.
   -------------------------------------------------------------------------- */
.sh { max-width: 720px; margin: 0 auto; }

/* All slides occupy one grid cell, so the panel is as tall as the tallest
   slide and never jumps height when it changes. */
.sh-panel {
  display: grid;
  position: relative;
  padding: clamp(22px, 3.4vw, 32px);
  border-radius: 24px;
  text-align: left;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
  overflow: hidden;
}

.sh-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
  min-width: 0;
}

.sh-slide.active { opacity: 1; transform: none; pointer-events: auto; }

/* Head: icon + name + meta */
.sh-head { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }

.sh-ic {
  width: 58px; height: 58px;
  flex: none;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.sh-ic img { width: 100%; height: 100%; object-fit: contain; padding: 13%; }
.sh-ic .br-logo { width: 60%; height: 60%; display: flex; }
.sh-ic .br-logo svg { width: 100%; height: 100%; }

.sh-title { min-width: 0; }

.sh-title h3 {
  font-family: var(--f-d);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 7px;
  line-height: 1.05;
}

.sh-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.sh-st, .sh-rate, .sh-plat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}

.sh-st i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.sh-st.is-live i { background: #2ee6a8; box-shadow: 0 0 0 0 rgba(46, 230, 168, .7); animation: shPulse 2.4s ease-out infinite; }
.sh-st.is-soon i { background: var(--ac-amber); }

@keyframes shPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 230, 168, .65); }
  70%  { box-shadow: 0 0 0 8px rgba(46, 230, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 230, 168, 0); }
}

.sh-rate { color: #ffd66b; border-color: rgba(255, 214, 107, .32); background: rgba(255, 214, 107, .12); }

.sh-tag {
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .95);
  margin: 0 0 10px;
  font-weight: 500;
}

.sh-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 16px;
}

/* Stats */
.sh-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  margin-bottom: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.sh-stat { flex: 1 1 90px; min-width: 0; }

.sh-stat-n {
  display: block;
  font-family: var(--f-d);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sh-stat-l {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-top: 3px;
}

/* Panel CTA */
.sh-go {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-family: var(--f-b);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-1) ease, transform var(--dur-1) var(--spring), gap var(--dur-1) ease;
}
.sh-go:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); gap: 11px; }
.sh-go:active { transform: translateY(1px) scale(.985); }

/* ── Selector rail ────────────────────────────────────────────────────────── */
.sh-rail {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.sh-rail::-webkit-scrollbar { display: none; }

.sh-chip {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  padding: 10px 6px 12px;
  border-radius: 15px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  font-family: var(--f-b);
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-2) var(--spring);
}

.sh-chip:hover { background: rgba(255, 255, 255, .15); transform: translateY(-3px); }

.sh-chip.active {
  background: rgba(255, 255, 255, .19);
  border-color: rgba(255, 255, 255, .3);
}

.sh-chip-ic {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
  transition: transform var(--dur-2) var(--spring);
}
.sh-chip-ic img { width: 100%; height: 100%; object-fit: contain; padding: 13%; }
.sh-chip-ic .br-logo { width: 62%; height: 62%; display: flex; }
.sh-chip-ic .br-logo svg { width: 100%; height: 100%; }

.sh-chip.active .sh-chip-ic { transform: scale(1.1); }

.sh-chip-n {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .68);
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-chip.active .sh-chip-n { color: #fff; }

/* Progress bar that fills while the slide dwells */
.sh-chip-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.sh-chip.active .sh-chip-bar { opacity: 1; }
.sh-chip.active .sh-chip-bar::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fd4ff, #4fe3c1);
  transform-origin: left;
  animation: shFill 5.2s linear forwards;
}

@keyframes shFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .sh-chip.active .sh-chip-bar::after { animation: none; transform: scaleX(1); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sh-panel { padding: 20px; border-radius: 20px; }
  .sh-head { gap: 12px; margin-bottom: 12px; }
  .sh-ic { width: 50px; height: 50px; border-radius: 14px; font-size: 23px; }
  .sh-desc { display: none; }
  .sh-stats { gap: 8px; }
  .sh-stat { flex-basis: 72px; }
  .sh-go { width: 100%; justify-content: center; }
  .sh-rail { justify-content: flex-start; padding-inline: 2px; }
  .sh-chip { width: 74px; }
}

@media (max-width: 380px) {
  .sh-chip { width: 66px; padding: 8px 4px 11px; }
  .sh-chip-ic { width: 32px; height: 32px; }
  .sh-chip-n { font-size: 9.5px; }
}

/* .hero is a flex container, so .hero-c is a flex item and defaults to
   min-width:auto. Any wide child can then push it out to its 860px cap on a
   narrow screen, where body{overflow-x:hidden} silently clips it. */
.hero-c { min-width: 0; max-width: min(860px, 100%); }
.sc-wrap { min-width: 0; max-width: 100%; }

/* --------------------------------------------------------------------------
   15. LUCIDE ICONS
   Inline SVG inheriting currentColor, so an icon always matches its context.
   -------------------------------------------------------------------------- */
.ico { display: block; flex: none; stroke: currentColor; }

/* Feature tiles: give the glyph a tinted plate instead of a bare emoji */
.fdi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  color: var(--ac1);
  background: linear-gradient(135deg, rgba(4,117,182,.11), rgba(26,174,143,.08));
  box-shadow: inset 0 0 0 1px rgba(4,117,182,.12);
  filter: none;
  font-size: 0;
}

.dl-stat-icon, .ric {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac1);
  font-size: 0;
}

/* Emoji that were never mapped keep working, just sized sensibly */
.ico-fallback { font-size: 20px; line-height: 1; font-style: normal; }

.rvw-write-btn { display: inline-flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   16. HERO DENSITY
   The whole hero, including the product panel and its rail, has to land
   inside one viewport. Every value below is chosen to buy vertical space.
   -------------------------------------------------------------------------- */
.hero {
  padding: clamp(84px, 10vh, 108px) var(--pad-page) clamp(24px, 3vh, 36px);
  justify-content: flex-start;
}

.hero-c { display: flex; flex-direction: column; }

/* Two lines instead of three is the single biggest saving */
.hero h1 {
  font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: 10px;
}

.hero-c p, .hero-sub {
  font-size: clamp(.9rem, .86rem + .22vw, 1.02rem);
  line-height: 1.45;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 18px;
}

.hero-c .bp, .hero-c .bs { padding: 12px 24px; font-size: 14.5px; }

/* Pull the showcase up under the buttons */
.sc-wrap { margin-top: clamp(16px, 2.4vh, 28px) !important; }

/* Panel: trimmed padding and type, description dropped (the tagline carries it) */
.sh-panel { padding: clamp(16px, 2vw, 22px); border-radius: 20px; }
.sh-head { gap: 12px; margin-bottom: 10px; }
.sh-ic { width: 46px; height: 46px; border-radius: 13px; font-size: 21px; }
.sh-title h3 { font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); margin-bottom: 5px; }
.sh-st, .sh-rate, .sh-plat { padding: 3px 9px; font-size: 10px; }
.sh-tag { font-size: clamp(.85rem, .82rem + .18vw, .95rem); line-height: 1.4; margin-bottom: 10px; }
.sh-desc { display: none; }
.sh-stats { padding-top: 10px; margin-bottom: 12px; gap: 8px; }
.sh-stat-n { font-size: clamp(1rem, .85rem + .6vw, 1.3rem); }
.sh-stat-l { font-size: 8.5px; letter-spacing: .9px; }
.sh-go { padding: 9px 17px; font-size: 13px; border-radius: 10px; }

/* Rail */
.sh-rail { margin-top: 11px; gap: 6px; padding: 3px; }
.sh-chip { width: 74px; padding: 8px 5px 10px; border-radius: 13px; }
.sh-chip-ic { width: 31px; height: 31px; border-radius: 9px; font-size: 15px; }
.sh-chip-n { font-size: 9.5px; }
.sh-chip-bar { left: 10px; right: 10px; bottom: 4px; }

/* Short laptop screens need one more squeeze */
@media (max-height: 820px) and (min-width: 761px) {
  .hero { padding-top: 78px; padding-bottom: 18px; }
  .hero h1 { font-size: clamp(1.9rem, 1rem + 2.6vw, 2.7rem); margin-bottom: 8px; }
  .hero-c p, .hero-sub { font-size: .92rem; margin-bottom: 13px; }
  .sc-wrap { margin-top: 14px !important; }
  .sh-panel { padding: 15px 17px; }
  .sh-ic { width: 40px; height: 40px; }
  .sh-stats { padding-top: 8px; margin-bottom: 10px; }
  .sh-rail { margin-top: 9px; }
  .sh-chip { width: 68px; padding: 6px 4px 9px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 76px; padding-bottom: 20px; }
  .hero h1 { margin-bottom: 8px; }
  .hero-c p, .hero-sub { margin-bottom: 14px; font-size: .88rem; }
  .sh-rail { margin-top: 9px; }
  .sh-chip { width: 64px; }
  .sh-chip-n { font-size: 9px; }
}

/* Icon plates on the services page, home feature grid, about list and the
   coming-soon list. Fixed box, centred glyph, so nothing can spill out. */
.svc-ic, .fi, .abi, .csfic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 0;
  line-height: 0;
  color: var(--ac1);
  overflow: hidden;
}
.svc-ic { width: 54px; height: 54px; border-radius: 15px; }
.fi     { width: 44px; height: 44px; border-radius: 13px; }
.abi    { width: 40px; height: 40px; border-radius: 12px; }
.csfic  { width: 36px; height: 36px; border-radius: 11px; }

.svc-ic .ico, .fi .ico, .abi .ico, .csfic .ico, .fdi .ico { display: block; }

/* --------------------------------------------------------------------------
   17. HERO PANEL LEGIBILITY
   The glass panel stays translucent, but the photograph behind it is dimmed
   by a soft scrim so white text always has something dark to sit on.
   A gradient costs nothing to paint; no blur filter is used here.
   -------------------------------------------------------------------------- */
.sc-wrap { position: relative; }

.sc-wrap::before {
  content: '';
  position: absolute;
  inset: -56px -10vw -72px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 92% at 50% 50%,
      rgba(3, 16, 26, .68) 0%,
      rgba(3, 16, 26, .46) 46%,
      rgba(3, 16, 26, .18) 70%,
      transparent 84%);
}

.sh { position: relative; z-index: 1; }

/* Slightly deeper tint in the glass itself, and a brighter rim so the edge
   still reads as a panel rather than a smudge. */
.sh-panel {
  background: rgba(8, 26, 38, .34);
  border-color: rgba(255, 255, 255, .34);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .34);
}

.sh-title h3 { text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.sh-tag { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.sh-stat-n { text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.sh-stat-l { color: rgba(255, 255, 255, .72); }

.sh-chip { background: rgba(8, 26, 38, .34); }
.sh-chip:hover { background: rgba(8, 26, 38, .5); }
.sh-chip.active { background: rgba(255, 255, 255, .2); }
.sh-chip-n { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   18. APPS MENU
   The catalogue is listed again, but inside a dropdown (desktop) and an
   indented sub-list (mobile). Both scroll, so adding apps never lengthens
   the bar itself.
   -------------------------------------------------------------------------- */
.nk-wrap { position: relative; display: flex; }

.nk-has { display: inline-flex; align-items: center; gap: 5px; }
.nk-has svg { transition: transform var(--dur-2) var(--ease); opacity: .6; }
.nk-wrap:hover .nk-has svg,
.nk-wrap:focus-within .nk-has svg { transform: rotate(180deg); opacity: 1; }

.nk-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--e-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
  z-index: 60;
  scrollbar-width: thin;
}

.nk-wrap:hover .nk-drop,
.nk-wrap:focus-within .nk-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* A little bridge so the pointer can cross the gap without the menu closing */
.nk-wrap::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 12px;
}

.nk-drop-i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-family: var(--f-b);
  text-align: left;
  transition: background var(--dur-1) ease;
}
.nk-drop-i:hover { background: rgba(4, 117, 182, .08); }

.nk-drop-n { font-size: 13.5px; font-weight: 600; color: var(--text-1); }

.nk-drop-s {
  flex: none;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.nk-drop-s.is-live { color: #0d8f6f; background: rgba(26, 174, 143, .14); }
.nk-drop-s.is-soon { color: #a86b00; background: rgba(230, 149, 0, .14); }

.nk-drop-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 5px;
  padding: 9px;
  border: none;
  border-top: 1px solid var(--border-s);
  border-radius: 0 0 9px 9px;
  background: none;
  cursor: pointer;
  font-family: var(--f-b);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ac1);
  transition: gap var(--dur-1) ease;
}
.nk-drop-all:hover { gap: 9px; }

/* Touch devices get no hover, and the mobile sheet covers this anyway */
@media (hover: none) { .nk-drop { display: none; } }

/* --------------------------------------------------------------------------
   Mobile sub-list
   -------------------------------------------------------------------------- */
.mm-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: min(300px, 78vw);
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 2px auto 6px;
  padding: 5px;
  border-radius: 13px;
  background: rgba(4, 117, 182, .05);
  border: 1px solid var(--border-s);
  scrollbar-width: thin;
}

.mm-sub-i {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: none;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  font-family: var(--f-b);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
}
.mm-sub-i:active { background: rgba(4, 117, 182, .1); }

.mm-sub-s {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
}
.mm-sub-s.is-live { background: #1aae8f; }
.mm-sub-s.is-soon { background: var(--ac-amber); }

/* ==========================================================================
   19. PERFORMANCE
   Profiling found 100 elements using backdrop-filter. Each one makes the
   browser re-sample and re-blur everything behind it, every frame it moves,
   which is what the scroll jank was. Glass is kept only where something
   genuinely sits over a photograph; everywhere else an opaque surface looks
   identical because the background behind those cards is flat anyway.
   ========================================================================== */

/* ── Drop the glass from the 90-odd content cards ─────────────────────────── */
.ac, .fc, .cp-card, .rb, .fqs, .rvw-sec, .vid-sec, .fdc, .dl-stat, .ri, .svc-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #fff;
  border-color: rgba(14, 42, 59, .08);
}

/* One shadow instead of two on the elements that repeat most (24 x .fdc,
   16 x .ri). Layered shadows are lovely on a hero card and wasteful on forty. */
.fdc, .ri, .dl-stat, .svc-card {
  box-shadow: 0 1px 2px rgba(14, 42, 59, .05), 0 4px 12px rgba(14, 42, 59, .06);
}

/* Hover lift only needs to promote the one card being hovered */
.ac:hover, .fdc:hover, .fc:hover, .cp-card:hover, .svc-card:hover,
.work-card:hover, .shs-card:hover { will-change: transform; }

/* ── The atmosphere orbs ──────────────────────────────────────────────────── */
/* blur(100px) across a 720px box, animated for 25s, is one of the most
   expensive things a browser can be asked to paint. A radial gradient is
   already soft, so the filter buys nothing. */
.orb { filter: none !important; }

/* ── Hero slides ──────────────────────────────────────────────────────────── */
/* A 1px blur over a full-viewport background image forces the whole slide onto
   its own filtered layer. Imperceptible, so it goes. */
.hero-slide { filter: none !important; }

/* will-change is a promise to the compositor, not a speed switch. Left on
   permanently it just holds layers in memory. */
.hero-slide, .ac-mockup img, .work-shot img, .shs-card img { will-change: auto; }

/* ── Keep the glass where it is actually doing visual work ────────────────── */
/* These sit over the hero photograph, so the blur is the effect itself. */
.nav.scrolled,
.sh-panel,
.stk,
.mm,
.nk-drop,
.lp-nav {
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

/* Chips are small and numerous; a translucent background reads the same as a
   blurred one at that size. */
.sh-chip { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── Landing page ─────────────────────────────────────────────────────────── */
.lp-card, .lp-addon, .lp-step, .lp-svc, .lp-faq {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Cheap containment: the browser can skip layout and paint for cards that are
   scrolled out of view. */
.ac, .fdc, .svc-card, .work-card, .lp-card, .lp-svc, .lp-step {
  contain: layout style paint;
}

/* Long pages: let the browser skip offscreen sections entirely. */
.pg > section, .lp-sec {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
}

/* These sit on flat backgrounds, so the blur has nothing meaningful to sample */
.bwa, .work-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.92); }

/* --------------------------------------------------------------------------
   20. PERFORMANCE, MEASURED
   Frame-timing a 90-frame scroll at 1440x900 isolated the real costs:
     baseline              median 30.9ms, 40 stutters
     without the grain     median 16.8ms,  5 stutters   <- dominant
     without shadows       median 16.9ms,  4 stutters
     without content-vis   median 20.8ms, 17 stutters   <- my own rule, hurting
   So the grain goes, content-visibility goes, and the shadow work is cut back.
   -------------------------------------------------------------------------- */

/* The fixed full-viewport noise layer had to be re-blended every frame for a
   texture nobody consciously notices. Removed outright. */
body::before { content: none !important; }

/* content-visibility made it worse, not better: sections entering the viewport
   forced a relayout each time because the intrinsic-size guess was wrong. */
.pg > section, .lp-sec {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* Two background gradients instead of three, and none of them animate. */
body {
  background-image:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(4,117,182,.10), transparent 60%),
    radial-gradient(ellipse 85% 55% at 88% 100%, rgba(26,174,143,.08), transparent 64%);
}

/* Single-pass shadows across the repeated card classes. The layered pair is
   kept only for the few hero-level surfaces where it actually reads. */
.ac, .fc, .cp-card, .rb, .fqs, .rvw-sec, .vid-sec, .fdc, .dl-stat, .ri,
.svc-card, .svc-step, .work-card, .lp-card, .lp-step, .lp-svc, .lp-addon {
  box-shadow: 0 2px 8px rgba(14, 42, 59, .07);
}

.ac:hover, .fdc:hover, .fc:hover, .cp-card:hover,
.svc-card:hover, .work-card:hover {
  box-shadow: 0 6px 22px rgba(14, 42, 59, .12);
}

/* Small chrome does not need a shadow at all */
.tg, .bdg, .sh-chip, .ac-rate, .lp-facts span, .shs-st { box-shadow: none; }

/* Orbs: keep the drift, halve the work by moving fewer, smaller layers */
.orb-2 { display: none; }
.orb-1 { width: 620px; height: 620px; }

/* --------------------------------------------------------------------------
   21. SCROLL REVEAL, MADE CHEAP
   Isolated as the sole remaining cause of dropped frames:
     with reveal as written   worst frame 230.6ms, 10 stutters
     with reveal disabled     worst frame  30.9ms,  0 stutters
   The cost is dozens of elements transitioning opacity AND transform together
   during a fast scroll; each one is promoted to its own compositor layer for
   the duration, and creating/destroying that many layers is what spikes.
   Fading only, over a shorter window, keeps the effect and removes the spike.
   -------------------------------------------------------------------------- */
.rv {
  opacity: 0;
  transform: none;                     /* the translate is what forced layers */
  transition: opacity .4s ease-out;
}

.rv.vis { opacity: 1; transform: none; }

/* Staggering multiplied the number of overlapping transitions */
.rvd1, .rvd2, .rvd3 { transition-delay: 0s; }

/* The hero is above the fold and never scroll-revealed, so it can keep the
   richer entrance without costing anything during scrolling. */
.hero-c .rv { transition: opacity .5s ease-out, transform .5s var(--ease); }

/* --------------------------------------------------------------------------
   22. HERO PANEL, DECLUTTERED
   The panel was carrying an icon, a name, three pills, a tagline, three
   statistics and a button, in a box the size of a postcard. Its job is to
   introduce one product and send you to its page, not to summarise it.
   Everything that duplicates the app page is removed.
   -------------------------------------------------------------------------- */

/* Gone: the rating and platform pills (both repeat on the app page and in the
   catalogue) and the three-figure stat row, which was the busiest element. */
.sh-rate, .sh-plat, .sh-stats { display: none !important; }

/* One line of state, set as a quiet dot rather than a filled capsule */
.sh-st {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, .72);
  gap: 7px;
}

/* Room to breathe now that there is less in the box */
.sh-panel { padding: clamp(22px, 2.6vw, 30px); }

.sh-head { gap: 16px; margin-bottom: 14px; align-items: center; }

.sh-ic {
  width: 62px; height: 62px;
  border-radius: 17px;
  font-size: 28px;
}

.sh-title h3 {
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem);
  margin-bottom: 6px;
  line-height: 1.02;
}

/* The tagline is the only prose left, so give it space and cap it at two
   lines: every card then occupies the same height. */
.sh-tag {
  font-size: clamp(.92rem, .87rem + .25vw, 1.05rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The button becomes a quiet text link; the panel is the thing you look at,
   not the control. */
.sh-go {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: #fff;
  gap: 8px;
  opacity: .92;
}
.sh-go:hover { background: none; transform: none; gap: 12px; opacity: 1; }
.sh-go:active { transform: translateX(1px); }

/* A hairline above the link keeps it anchored without a box around it */
.sh-go::before {
  content: '';
  position: absolute;
  left: clamp(22px, 2.6vw, 30px);
  right: clamp(22px, 2.6vw, 30px);
  margin-top: -14px;
  height: 1px;
  background: rgba(255, 255, 255, .16);
}
.sh-slide { position: relative; }

@media (max-width: 640px) {
  .sh-panel { padding: 20px; }
  .sh-ic { width: 52px; height: 52px; border-radius: 15px; font-size: 24px; }
  .sh-head { gap: 13px; margin-bottom: 12px; }
  .sh-tag { margin-bottom: 15px; }
  .sh-go::before { left: 20px; right: 20px; margin-top: -11px; }
}