/* Vulindlela Computing — site styles
   Layout: centred SaaS-style hero with grid lines and a light beam, bento services grid, scrolling tech strip.
   Colour: ocean navy + the logo's brand blue (#0072ae), with the logo green as the highlight. */

/* Single committed dark look (Darkfire-inspired): near-black navy, glowing brand blue, green highlight. */
:root {
  --bg: #04080f;
  --bg-alt: #060c17;
  --surface: #0a1322;
  --ink: #eef4ff;
  --ink-soft: #9aabc6;
  --line: rgb(148 180 230 / 13%);
  --blue: #3b9eea;
  --blue-strong: #74bdf3;
  --cyan: #38d5ff;
  --green: #5cc866;
  --deep: #04080f;
  --deep-2: #081226;
  --on-deep: #eef4ff;
  --on-deep-soft: #9aabc6;
  --focus: #38d5ff;
  --glow: rgb(59 158 234 / 35%);
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 24px 60px -24px rgb(0 0 0 / 70%);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 5rem);

  --radius: 16px;
  --radius-sm: 10px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-strong); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100; }
.skip:focus { top: 12px; color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgb(6 17 33 / 94%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--on-deep); text-decoration: none; }
.brand:hover { color: var(--on-deep); }
.brand svg { width: 50px; height: auto; flex: none; }
.wordmark { display: grid; gap: 4px; line-height: 1; font-family: "Jost", "Futura", "Century Gothic", var(--font-body); text-transform: uppercase; }
.wm-top { font-weight: 700; font-size: 1.3rem; letter-spacing: 0.03em; color: #fff; }
.wm-sub { font-weight: 400; font-size: 0.66rem; letter-spacing: 0.5em; color: #5cc866; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  color: var(--on-deep-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  transition: color .2s, background-color .2s;
}
.nav-links a:hover { color: var(--on-deep); background: rgb(255 255 255 / 7%); }
.nav-links a[aria-current="page"] { color: var(--on-deep); background: rgb(46 147 220 / 22%); }
.nav-toggle {
  display: none; background: none; border: 1px solid rgb(255 255 255 / 18%); color: var(--on-deep);
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 20px;
    background: var(--deep); border-bottom: 1px solid rgb(255 255 255 / 10%);
  }
  .nav-links[data-open="false"] { display: none; }
  .nav-links a { padding: 12px 14px; font-size: 1.05rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.98rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .2s, background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #0072ae; color: #fff; box-shadow: 0 8px 24px -8px rgb(0 114 174 / 70%); }
.btn-primary:hover { background: #005f92; color: #fff; transform: translateY(-1px); }
.btn-ghost { background: rgb(255 255 255 / 6%); color: var(--on-deep); border-color: rgb(255 255 255 / 20%); }
.btn-ghost:hover { background: rgb(255 255 255 / 12%); color: var(--on-deep); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgb(56 213 255 / 16%), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgb(37 99 235 / 28%), transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--on-deep);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  align-items: center; padding-block: clamp(56px, 9vw, 120px) clamp(56px, 8vw, 100px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.hero .eyebrow { color: #7fe3ff; }
.hero h1 { font-size: var(--step-4); font-weight: 700; margin-top: 18px; letter-spacing: -0.035em; }
.hero h1 .grad {
  background: linear-gradient(100deg, #5fb4f0 0%, #38d5ff 45%, #6ee08a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { margin-top: 22px; font-size: var(--step-1); color: var(--on-deep-soft); max-width: 34em; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-meaning { margin-top: 28px; font-size: var(--step--1); color: var(--on-deep-soft); }
.hero-meaning em { color: #6ee08a; font-style: normal; font-weight: 600; }

/* App window mock-up */
.window {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #0d1b30; border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 70%), 0 0 0 1px rgb(56 213 255 / 6%), 0 0 60px -20px rgb(56 213 255 / 35%);
  font-size: 0.82rem; color: #cfe0ff; min-width: 0;
}
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #0a1628; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.window-title { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #9fb2d1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window-title i { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #2563eb, #38d5ff); flex: none; }
.window-ctrls { display: flex; gap: 14px; color: #6f83a6; font-size: 0.8rem; flex: none; }
.window-body { min-height: 300px; }
.window-main { padding: 14px 14px 72px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi { background: #10213b; border: 1px solid rgb(255 255 255 / 6%); border-radius: 8px; padding: 9px 10px; }
.kpi b { display: block; font-family: var(--font-mono); font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.kpi small { color: #8ea3c6; font-size: 0.7rem; }
.stock { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stock th { text-align: left; font-weight: 500; color: #6f83a6; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .08em; padding: 6px 6px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.stock td { padding: 7px 6px; border-bottom: 1px solid rgb(255 255 255 / 5%); white-space: nowrap; }
.stock td:first-child { white-space: normal; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
.chip.ok { background: rgb(34 197 94 / 15%); color: #6ee7a0; }
.chip.low { background: rgb(240 199 122 / 16%); color: #f0c77a; }
.chip.out { background: rgb(248 113 113 / 16%); color: #fca5a5; }
.terminal {
  position: absolute; right: -14px; bottom: -26px; width: min(300px, 70%);
  background: #050d19; border: 1px solid rgb(255 255 255 / 12%); border-radius: 10px;
  padding: 12px 14px; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.7; color: #9fb2d1;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 80%);
}
.terminal .ok { color: #6ee7a0; }
.terminal .hl { color: #7fe3ff; }
.hero-visual { position: relative; padding-bottom: 30px; min-width: 0; }

.stats { border-top: 1px solid rgb(255 255 255 / 10%); }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 26px 20px; border-left: 1px solid rgb(255 255 255 / 8%); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { display: block; font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
.stat span { display: block; margin-top: 8px; color: var(--on-deep-soft); font-size: var(--step--1); }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .terminal { right: 8px; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 8%); }
}
@media (max-width: 520px) {
  .stock .hide-sm { display: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section.alt { background: var(--bg-alt); }
.section-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.5; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--ink-soft); }
.card ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--ink-soft); display: grid; gap: 4px; }
.card .more { margin-top: auto; padding-top: 8px; font-weight: 600; text-decoration: none; }
.icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue);
}
.icon svg { width: 24px; height: 24px; }
.card.feature {
  background: linear-gradient(160deg, #0c1f3a, #071426); color: var(--on-deep); border-color: rgb(91 143 255 / 35%);
}
.card.feature p, .card.feature ul { color: var(--on-deep-soft); }
.card.feature .icon { background: rgb(56 213 255 / 14%); color: #7fe3ff; }
.card.feature .more { color: #7fe3ff; }
.badge {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgb(92 200 102 / 16%); color: #7fe08a;
}

/* App dev band */
.apps-band {
  background:
    radial-gradient(700px 400px at 100% 0%, rgb(56 213 255 / 12%), transparent 60%),
    linear-gradient(180deg, var(--deep-2), var(--deep));
  color: var(--on-deep);
}
.apps-band .section-head p { color: var(--on-deep-soft); }
.apps-band .eyebrow { color: #7fe3ff; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; color: var(--on-deep-soft); }
.checks li b { color: var(--on-deep); font-weight: 600; }
.checks svg { width: 22px; height: 22px; color: #38d5ff; margin-top: 2px; }

.code {
  background: #050d19; border: 1px solid rgb(255 255 255 / 10%); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.75; color: #9fb2d1; overflow-x: auto;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 80%);
}
.code-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgb(255 255 255 / 8%); color: #6f83a6; font-size: 0.75rem; }
.code-bar span { padding: 2px 10px; border-radius: 6px; }
.code-bar span.on { background: rgb(255 255 255 / 6%); color: #cfe0ff; }
.code pre { margin: 0; padding: 18px 20px; white-space: pre; }
.k { color: #7fb0ff; } .s { color: #f0c77a; } .c { color: #5c7196; } .t { color: #38d5ff; } .n { color: #c4a7ff; }

/* Process (a real sequence) */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding-top: 22px; border-top: 2px solid var(--line); display: grid; gap: 8px; align-content: start; }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue); letter-spacing: .1em;
}
.steps li:first-child { border-top-color: var(--blue); }
.steps h3 { font-size: var(--step-1); }
.steps p { color: var(--ink-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Work */
.work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 800px) { .work { grid-template-columns: minmax(0, 1fr); } }
.project { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .25s, box-shadow .25s; }
.project:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shot {
  aspect-ratio: 16 / 9; max-width: 100%; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0c1f3a, #050d19); padding: 18px;
  display: flex; align-items: flex-end;
}
.shot .mini { width: 100%; height: 88%; background: #0d1b30; border: 1px solid rgb(255 255 255 / 12%); border-radius: 8px 8px 0 0; display: grid; grid-template-rows: 18px minmax(0, 1fr); overflow: hidden; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 80%); }
.shot .mini-bar { background: #0a1628; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.shot .mini-body { display: grid; gap: 6px; padding: 10px; align-content: start; }
.bar { height: 8px; border-radius: 4px; background: rgb(127 176 255 / 22%); }
.bar.c { background: rgb(56 213 255 / 40%); } .bar.y { background: rgb(240 199 122 / 45%); } .bar.g { background: rgb(110 231 160 / 40%); }
.mini-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mini-cols div { height: 34px; border-radius: 5px; background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 6%); }
.pipeline { display: flex; align-items: center; gap: 6px; }
.pipeline span { flex: 1; height: 22px; border-radius: 5px; background: rgb(110 231 160 / 22%); border: 1px solid rgb(110 231 160 / 35%); }
.pipeline span.run { background: rgb(56 213 255 / 22%); border-color: rgb(56 213 255 / 45%); animation: pulse 1.6s ease-in-out infinite; }
.pipeline span.wait { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 10%); }
@keyframes pulse { 50% { opacity: .45; } }
.shot-label { position: absolute; top: 14px; left: 18px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .12em; text-transform: uppercase; color: #7fe3ff; }
.project-body { padding: 24px 26px 28px; display: grid; gap: 10px; }
.project-body h3 { font-size: var(--step-2); }
.project-body p { color: var(--ink-soft); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tags span { font-family: var(--font-mono); font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }

/* About strip */
.about-visual {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%;
  background: linear-gradient(160deg, #0c1f3a, #050d19); display: grid; place-items: center;
}
/* A still grid, like the hero's, fading out from the top. Nothing in it moves. */
.about-visual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(148 180 230 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(148 180 230 / 9%) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 80%);
}
.about-badge {
  position: relative; background: rgb(5 13 25 / 70%); border: 1px solid rgb(255 255 255 / 14%); backdrop-filter: blur(8px);
  color: #fff; border-radius: 14px; padding: 22px 26px; text-align: center;
}
.about-badge b { display: block; font-family: var(--font-display); font-size: var(--step-4); line-height: 1; letter-spacing: -0.04em; }
.about-badge span { color: #9fb2d1; font-size: var(--step--1); }
.prose { display: grid; gap: 16px; color: var(--ink-soft); max-width: 40rem; }
.prose h2 { color: var(--ink); font-size: var(--step-3); }
.prose h3 { color: var(--ink); font-size: var(--step-1); margin-top: 12px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.prose strong { color: var(--ink); }

/* Brands */
.brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.brands span {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-weight: 600; color: var(--ink-soft); font-size: 0.95rem;
}

/* CTA */
.cta {
  position: relative; overflow: hidden; border-radius: 24px;
  padding: clamp(36px, 6vw, 72px);
  background:
    radial-gradient(600px 300px at 100% 0%, rgb(56 213 255 / 25%), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgb(64 175 73 / 22%), transparent 60%),
    linear-gradient(135deg, #0072ae, #0c1f3a 70%);
  color: #fff; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center;
}
.cta h2 { font-size: var(--step-3); }
.cta p { color: #c9d8f5; margin-top: 12px; font-size: var(--step-1); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn-primary { background: #fff; color: #0b1626; box-shadow: none; }
.cta .btn-primary:hover { background: #e8f0ff; color: #0b1626; }
@media (max-width: 800px) { .cta { grid-template-columns: minmax(0, 1fr); } }

/* Page hero (inner pages) */
.page-hero {
  background:
    radial-gradient(900px 400px at 90% -20%, rgb(56 213 255 / 15%), transparent 60%),
    linear-gradient(180deg, var(--deep), var(--deep-2));
  color: var(--on-deep); padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px);
}
.page-hero h1 { font-size: var(--step-4); margin-top: 16px; max-width: 18ch; }
.page-hero p { margin-top: 18px; color: var(--on-deep-soft); font-size: var(--step-1); max-width: 40rem; }
.page-hero .eyebrow { color: #7fe3ff; }
.crumbs { font-size: var(--step--1); color: var(--on-deep-soft); }
.crumbs a { color: var(--on-deep-soft); }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 52rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 22px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: var(--step-0); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--blue); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 20px; color: var(--ink-soft); }

/* Tech list */
.tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.tech > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
.tech b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.tech span { color: var(--ink-soft); font-size: var(--step--1); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 4vw, 40px); display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 20%, transparent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); color: var(--ink-soft); }
.form-status { padding: 14px 16px; border-radius: 10px; font-weight: 500; }
.form-status.ok { background: rgb(34 197 94 / 12%); color: var(--ink); border: 1px solid rgb(34 197 94 / 40%); }
.form-status.err { background: rgb(248 113 113 / 12%); color: var(--ink); border: 1px solid rgb(248 113 113 / 40%); }
.details { display: grid; gap: 14px; }
.detail { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.detail b { display: block; }
.detail a, .detail span { color: var(--ink-soft); overflow-wrap: anywhere; }

/* Footer */
.site-footer { background: var(--deep); color: var(--on-deep-soft); padding-block: 64px 28px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1060px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; } }
.site-footer h4 { color: var(--on-deep); font-size: 0.8rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--on-deep-soft); text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--on-deep); }
.footer-about p { margin-top: 16px; max-width: 30em; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 8%); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.85rem; }
.footer-bottom nav { display: flex; gap: 18px; }


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

/* ======================================================================
   Darkfire-inspired layer: glass surfaces, grid lines, light beam, bento.
   ====================================================================== */
.site-header { background: rgb(4 8 15 / 72%); border-bottom: 1px solid var(--line); }

/* Grid lines + beam used behind heroes */
.fx-grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgb(148 180 230 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(148 180 230 / 7%) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.fx-beam {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -260px; width: min(1100px, 140vw); height: 620px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgb(59 158 234 / 45%), transparent 70%),
    radial-gradient(40% 50% at 70% 60%, rgb(92 200 102 / 18%), transparent 70%);
  filter: blur(30px);
}
.fx-beam::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgb(116 189 243 / 80%), transparent);
  filter: blur(1px);
}

.hero { background: var(--bg); }
.hero-stack {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-block: clamp(56px, 9vw, 112px) 0;
}
.hero-stack h1 { max-width: 15ch; margin-top: 26px; }
.hero-stack .hero-lead { margin-inline: auto; max-width: 40em; }
.hero-stack .hero-actions { justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgb(255 255 255 / 4%); border: 1px solid var(--line); color: var(--on-deep-soft);
  text-decoration: none; font-size: 0.9rem; transition: border-color .2s, color .2s;
}
.pill:hover { color: var(--on-deep); border-color: rgb(59 158 234 / 50%); }
.pill-tag { padding: 3px 10px; border-radius: 999px; background: linear-gradient(90deg, #0072ae, #2e93dc); color: #fff; font-weight: 600; font-size: 0.78rem; }
.hero-visual.wide { width: 100%; max-width: 1000px; margin-top: clamp(48px, 7vw, 80px); text-align: left; padding-bottom: 0; }
.hero-visual.wide::before {
  content: ""; position: absolute; inset: 10% 5% -10%; z-index: -1;
  background: radial-gradient(closest-side, rgb(59 158 234 / 40%), transparent);
  filter: blur(40px);
}
.hero-visual.wide .window {
  border: 1px solid rgb(116 189 243 / 25%);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 3%), 0 50px 100px -40px rgb(0 0 0 / 90%), 0 0 80px -30px rgb(59 158 234 / 60%);
}
.hero-visual.wide .window-body { min-height: 340px; }
.hero-visual.wide .terminal { right: 24px; bottom: 24px; }
.hero .stats { border-top: 0; margin-top: clamp(40px, 6vw, 72px); }
.hero .stats-row { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero .stat { text-align: center; padding: 28px 16px; border-left-color: var(--line); }
.hero .stat:first-child { padding-left: 16px; }
.hero-meaning { text-align: center; }
@media (max-width: 960px) {
  .hero .stat:nth-child(3) { padding-left: 16px; }
  .hero .stat:nth-child(n+3) { border-top-color: var(--line); }
}
@media (max-width: 640px) {
  .hero-visual.wide .terminal { display: none; }
}

/* Scrolling technology strip */
.marquee { position: relative; padding-block: 34px; border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee-label { text-align: center; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 20px; }
.marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 82s linear infinite; }
.marquee-track ul { display: flex; gap: 56px; padding: 0 28px; margin: 0; list-style: none; }
.marquee-track ul { align-items: center; }
.marquee-track li { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; white-space: nowrap; letter-spacing: -0.01em; }
/* Brand logos: each mark in its official brand colour (.b-*). On the dark theme a few marks
   whose official colour is too dark to read there (Microsoft wordmark, .NET, Apple, Ubiquiti,
   MikroTik, Sophos, TeamViewer) use their light versions; the light theme restores them. */
.brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.marquee-track .logo { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; opacity: .92; transition: opacity .2s, transform .2s; }
.marquee-track .logo:hover { opacity: 1; transform: translateY(-1px); }
.brand-mark { display: block; flex: none; }
.brand-text { font-size: 1.22rem; letter-spacing: -0.015em; }
.b-microsoft, .b-microsoft365, .b-office { color: #f3f3f3; }
:is(.b-microsoft, .b-microsoft365, .b-office) .brand-text { font-weight: 600; }
.b-windows, .b-windows11, .b-azure { color: #0078d4; } .b-sqlserver { color: #cc2927; }
.b-dotnet { color: #9b7bff; } .b-dell { color: #007db8; } .b-hp { color: #0096d6; } .b-lenovo { color: #e2231a; }
.b-acer { color: #83b81a; } .b-apple { color: #f5f5f7; } .b-intel { color: #0071c5; } .b-amd { color: #ed1c24; }
.b-cisco { color: #1ba0d7; } .b-ubiquiti { color: #3d8bff; } .b-mikrotik { color: #e9edf1; } .b-fortinet { color: #ee3124; }
.b-sophos { color: #5a9be6; } .b-eset { color: #0096a1; } .b-teamviewer { color: #0e8ee9; } .b-anydesk { color: #ef443b; }
.b-sage, .b-sagepastel { color: #00d639; } .b-php { color: #8f94cf; } .b-mysql { color: #5d93c9; } .b-git { color: #f03c2e; }
.b-css { color: #8a5cc4; } .b-html5 { color: #e34f26; }
.b-githubcopilot, .b-cursor, .b-vercel, .b-asus, .b-corsair, .b-kingston, .b-westerndigital { color: #f5f5f7; } .b-samsung { color: #5b7cff; } .b-claudecode { color: #d97757; }
.b-fortinet .brand-text { letter-spacing: .04em; font-weight: 800; }
.b-sagepastel { gap: 6px; } .b-sagepastel .brand-text { font-weight: 600; }
.b-intelcorei9 { color: #3d9be9; } .b-ryzen9 { color: #ed1c24; }
:is(.b-intelcorei9, .b-ryzen9) { gap: 8px; } :is(.b-intelcorei9, .b-ryzen9) .brand-text { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) { .marquee-track { zoom: .8; } .marquee-track ul { gap: 44px; } }
/* Pause under a mouse only: on phones and tablets a tap left the strip "hovered" and stopped it. */
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Centred section headings */
.section-head { margin-inline: auto; text-align: center; justify-items: center; }
.eyebrow {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / 3%);
  color: var(--blue-strong); font-size: 0.75rem;
}
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.prose .eyebrow { justify-self: start; }
.section.alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-glow { position: relative; isolation: isolate; overflow: hidden; }
.section-glow::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 70%; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(116 189 243 / 60%), transparent);
}
.section-glow::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -200px; width: 700px; height: 400px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(59 158 234 / 14%), transparent); pointer-events: none;
}

/* Glass cards with a cursor spotlight */
.card, .project, .faq details, .tech > div, .form, .detail {
  background:
    radial-gradient(400px circle at var(--mx, 50%) var(--my, -200px), rgb(59 158 234 / 10%), transparent 45%),
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1.5%));
  border: 1px solid var(--line);
}
.card:hover, .project:hover {
  border-color: rgb(116 189 243 / 35%);
  box-shadow: 0 0 0 1px rgb(116 189 243 / 8%), 0 30px 70px -30px var(--glow);
}
.icon { background: linear-gradient(160deg, rgb(59 158 234 / 22%), rgb(59 158 234 / 6%)); color: var(--blue-strong); border: 1px solid rgb(116 189 243 / 20%); }
.card.feature {
  background:
    radial-gradient(500px circle at var(--mx, 80%) var(--my, 0%), rgb(59 158 234 / 22%), transparent 50%),
    linear-gradient(160deg, #0b1d36, #060d1a);
  border-color: rgb(116 189 243 / 30%);
}

/* Bento services grid */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bento .card { padding: 28px; }
.bento .tile-hero { grid-column: span 2; grid-row: span 2; }
.bento .tile-hero h3 { font-size: var(--step-2); }
.bento .tile-hero .code { margin-top: 10px; box-shadow: none; }
.bento .tile-hero .code pre { padding: 14px 16px; font-size: 0.78rem; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .tile-hero { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .tile-hero { grid-column: auto; }
}

/* Inner page heroes share the grid + beam */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); text-align: center; }
.page-hero h1, .page-hero p { margin-inline: auto; }
.page-hero .hero-actions { justify-content: center; }
.page-hero .eyebrow { margin-top: 18px; }

.apps-band { background: var(--bg-alt); border-block: 1px solid var(--line); position: relative; isolation: isolate; overflow: hidden; }
.apps-band .section-head { text-align: left; justify-items: start; margin-inline: 0; }
.apps-band .eyebrow { color: var(--blue-strong); }
.shot { background: radial-gradient(120% 80% at 50% 0%, rgb(59 158 234 / 25%), transparent 60%), #060d1a; border-bottom: 1px solid var(--line); }
.about-visual { border: 1px solid var(--line); background: radial-gradient(100% 80% at 50% 0%, rgb(59 158 234 / 22%), transparent 60%), #060d1a; }
.split .section-head { text-align: left; justify-items: start; margin-inline: 0; }
.cta { border: 1px solid rgb(116 189 243 / 25%); box-shadow: 0 40px 100px -40px var(--glow); }
.btn-primary { background: linear-gradient(180deg, #1a8ad0, #0072ae); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 10px 30px -10px rgb(46 147 220 / 80%); }
.btn-primary:hover { background: linear-gradient(180deg, #2b97da, #0a7cbb); }
.cta .btn-primary { background: #fff; color: #04080f; box-shadow: none; }
.cta .btn-primary:hover { background: #e6f1fc; color: #04080f; }
.site-footer { border-top: 1px solid var(--line); background: #03060c; }

/* Project timeline (a real sequence) */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, var(--blue), var(--green)); opacity: .6; }
.timeline li {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 18px; padding: 18px 20px 18px 0;
}
.timeline li > div { background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1.5%)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.timeline b { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-deep); }
.timeline p { color: var(--on-deep-soft); margin-top: 4px; }
.tl-dot { width: 23px; height: 23px; border-radius: 50%; margin-top: 18px; background: var(--bg-alt); border: 1px solid rgb(116 189 243 / 50%); box-shadow: 0 0 0 4px rgb(59 158 234 / 10%), 0 0 16px rgb(59 158 234 / 50%); position: relative; }
.tl-dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--blue-strong); }
.timeline li:last-child .tl-dot::after { background: var(--green); }
.hero-visual.wide { padding-bottom: 40px; }
.hero-visual.wide .terminal { right: -28px; bottom: 0; }
@media (max-width: 1100px) { .hero-visual.wide .terminal { right: 12px; } }

/* Project cards with app pictures */
.work { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shot-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); background: #060d1a; }
.project-body h3 { font-size: var(--step-1); }
@media (max-width: 1000px) {
  .work { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .project { flex-direction: row; }
  .project .shot-img { width: 50%; flex: none; border-bottom: 0; border-right: 1px solid var(--line); }
}

/* Hero app window: header with centred tabs, matching the Stock Control picture */
.window-appbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 14px; background: #0f2340; border-bottom: 1px solid rgb(255 255 255 / 6%); }
.wa-name { font-weight: 700; color: #fff; font-size: 0.85rem; white-space: nowrap; }
.wa-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgb(255 255 255 / 7%); min-width: 0; overflow: hidden; }
.wa-tabs span { padding: 5px 11px; border-radius: 7px; color: #a9bcd8; font-size: 0.74rem; white-space: nowrap; }
.wa-tabs span.on { background: #fff; color: #0f2340; font-weight: 600; }
.wa-search { justify-self: end; padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / 10%); color: #a9bcd8; font-size: 0.72rem; white-space: nowrap; }
@media (max-width: 760px) {
  .window-appbar { grid-template-columns: auto minmax(0, 1fr); }
  .wa-tabs { justify-self: end; }
  .wa-search { display: none; }
}
@media (max-width: 520px) { .wa-tabs span:nth-child(n+4) { display: none; } }
@media (max-width: 440px) { .wa-tabs span:nth-child(n+3) { display: none; } }

/* Land anchor links below the sticky header instead of underneath it */
[id] { scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px)); }

/* Services page: in-page links, service blocks and lists */
.subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.subnav a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / 4%);
  color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; transition: color .2s, border-color .2s, background-color .2s;
}
.subnav a:hover { color: var(--ink); border-color: rgb(116 189 243 / 45%); background: rgb(59 158 234 / 10%); }
.svc-top { align-items: start; }
.svc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.svc-tagline { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 5vw, 48px); }
.svc-grid .wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc-subhead { font-size: var(--step-1); margin: clamp(36px, 5vw, 52px) 0 18px; }
.svc-center { justify-content: center; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; color: var(--ink-soft); }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 0.55em; width: 11px; height: 6px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg);
}
.ticks.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 640px) { .ticks.cols-2 { grid-template-columns: minmax(0, 1fr); } }
.card-note { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--step--1); }
.card-note b { color: var(--ink); }
.tuneup { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.tuneup:hover { transform: none; }
.tuneup-head { display: grid; gap: 10px; }
.tuneup-head .badge { justify-self: start; }
@media (max-width: 860px) { .tuneup { grid-template-columns: minmax(0, 1fr); } }
.numbered { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.numbered li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; color: var(--on-deep-soft); }
.numbered li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.78rem; color: #7fe3ff; padding-top: 0.25em; }
@media (max-width: 1000px) { .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .numbered { grid-template-columns: minmax(0, 1fr); } }
.tech.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tech span a { white-space: nowrap; }

/* Home: two wide bento tiles keep every row of the grid full */
.bento .tile-wide { grid-column: span 2; }
@media (max-width: 600px) { .bento .tile-wide { grid-column: auto; } }

/* Phones and tablets: keep the menu button flush right (the full menu bar needs about 1000px) */
@media (max-width: 1080px) {
  .nav > nav { order: 1; }
  .nav-toggle { order: 2; margin-left: auto; }
}

/* TeamViewer download in the menu bar, so a client on the phone can be told exactly where to
   click. Always visible: beside the menu button on phones and tablets, after the links on desktop. */
.nav-remote {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px;
  border-radius: 999px; color: var(--on-deep); font-weight: 600; font-size: 0.92rem; white-space: nowrap; text-decoration: none;
  border: 2px solid transparent; background: var(--tv-fill) padding-box, var(--tv-edge) border-box;
}
/* In the logo's blue and green (Shaun picked the outline, 2026-10-17): the header colour inside a
   blue-to-green outline with a blue TeamViewer mark (Shaun asked for blue), filling with the gradient on hover. */
.nav-remote, .nav-links .menu-remote a {
  --tv-fill: linear-gradient(var(--deep), var(--deep)); --tv-edge: linear-gradient(120deg, #2e93dc, #4cbf55); --tv-mark: #2e93dc;
}
:root[data-vc-theme="light"] :is(.nav-remote, .nav-links .menu-remote a) {
  --tv-edge: linear-gradient(120deg, #0072ae, #40af49); --tv-mark: #0072ae;
}
:root :is(.nav-remote, .nav-links .menu-remote a):hover,
:root[data-vc-theme="light"] :is(.nav-remote, .nav-links .menu-remote a):hover {
  --tv-fill: linear-gradient(120deg, #0072ae, #2a7f37); --tv-edge: linear-gradient(120deg, #0072ae, #2a7f37); --tv-mark: #fff;
  color: #fff; background: var(--tv-fill) padding-box, var(--tv-edge) border-box;
}
.nav-remote .brand-mark { width: 20px; height: 20px; color: var(--tv-mark); }
.nav-remote-more { display: none; }
@media (max-width: 1080px) { .nav { gap: 0; } }
@media (max-width: 1080px) {
  .nav-remote { order: 2; margin-left: auto; min-height: 44px; }
  .nav-toggle { order: 3; margin-left: 10px; }
}
/* Where space is tight (a small laptop with the full menu, or a phone) it shrinks to the round
   TeamViewer logo; the open phone menu also has a labelled download row. */
@media (min-width: 1081px) and (max-width: 1180px), (max-width: 520px) {
  .nav-remote { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; }
  .nav-remote .brand-mark { width: 24px; height: 24px; }
  .nav-remote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menu-remote { display: none; }
@media (max-width: 1080px) {
  .menu-remote { display: block; margin-bottom: 6px; }
  .nav-links .menu-remote a { display: flex; align-items: center; gap: 10px; border-radius: 12px; color: var(--on-deep); font-weight: 600;
    border: 2px solid transparent; background: var(--tv-fill) padding-box, var(--tv-edge) border-box; }
  .menu-remote svg { width: 20px; height: 20px; flex: none; color: var(--tv-mark); }
}

/* Light/dark switch: an icon button on desktop, a labelled row in the mobile menu */
.theme-item { display: flex; margin-left: 6px; }
.theme-toggle {
  width: 40px; height: 40px; padding: 0; border-radius: 999px; display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--on-deep-soft); cursor: pointer;
  font: inherit; transition: color .2s, background-color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--on-deep); background: rgb(255 255 255 / 7%); }
.theme-toggle svg { width: 19px; height: 19px; }
.i-sun, .i-moon { display: grid; place-items: center; }
.i-moon, .theme-label { display: none; }
:root[data-vc-theme="light"] .i-sun { display: none; }
:root[data-vc-theme="light"] .i-moon { display: grid; }
@media (max-width: 1080px) {
  .theme-item { margin: 8px 0 0; }
  .theme-toggle { width: 100%; height: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 500; font-size: 1.05rem; }
  .theme-label { display: inline; }
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Company details: the Blue Sands lockup in the site's own logo and type, no white box */
.legal-mark { margin: 0; position: relative; isolation: isolate; display: grid; justify-items: center; gap: 18px; padding: clamp(28px, 5vw, 48px) 16px; text-align: center; }
.legal-mark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 16%, transparent), transparent); }
.legal-mark svg { width: clamp(96px, 14vw, 132px); height: auto; }
.legal-mark figcaption { display: grid; gap: 6px; font-family: "Jost", "Futura", "Century Gothic", var(--font-body); line-height: 1.1; }
.lm-name { font-weight: 700; font-size: clamp(1.35rem, 0.9rem + 1.8vw, 2.1rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--blue); }
.lm-ta { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); color: var(--green); }

/* ======================================================================
   Light theme: chosen with the switch and saved per visitor. Dark is the
   default for every first visit, whatever the device or host setting.
   App screens, code, the CTA band, feature cards and the about
   panel stay dark in both themes, so they bring back the dark tokens.
   ====================================================================== */
:root[data-vc-theme="light"] {
  --bg: #f5f8fc;
  --bg-alt: #ebf1f8;
  --surface: #ffffff;
  --ink: #0b1626;
  --ink-soft: #4b5d75;
  --line: rgb(15 40 80 / 12%);
  --blue: #0a6db5;
  --blue-strong: #075896;
  --cyan: #0e7490;
  --green: #2a7f37;
  --deep: #f5f8fc;
  --deep-2: #ebf1f8;
  --on-deep: #0b1626;
  --on-deep-soft: #4b5d75;
  --focus: #0a6db5;
  --glow: rgb(10 109 181 / 16%);
  --shadow: 0 1px 2px rgb(15 40 80 / 6%), 0 20px 44px -24px rgb(15 40 80 / 28%);
  color-scheme: light;
}
:root[data-vc-theme="light"] :is(.card.feature, .cta, .about-visual, .window, .terminal, .code) {
  --ink: #eef4ff; --ink-soft: #9aabc6; --on-deep: #eef4ff; --on-deep-soft: #9aabc6;
  --line: rgb(148 180 230 / 13%); --blue: #3b9eea; --blue-strong: #74bdf3; --cyan: #38d5ff; --green: #5cc866;
  color-scheme: dark;
}
:root[data-vc-theme="light"] .site-header { background: rgb(245 248 252 / 86%); }
:root[data-vc-theme="light"] .wm-top { color: var(--ink); }
:root[data-vc-theme="light"] .wm-sub { color: var(--green); }
:root[data-vc-theme="light"] .nav-links a:hover,
:root[data-vc-theme="light"] .theme-toggle:hover { background: rgb(15 40 80 / 6%); }
:root[data-vc-theme="light"] .nav-links a[aria-current="page"] { background: rgb(10 109 181 / 12%); color: var(--blue-strong); }
:root[data-vc-theme="light"] .nav-toggle { border-color: var(--line); }
@media (max-width: 1080px) {
  :root[data-vc-theme="light"] .nav-links { border-bottom-color: var(--line); box-shadow: 0 24px 40px -24px rgb(15 40 80 / 30%); }
}
:root[data-vc-theme="light"] .btn-ghost { background: rgb(15 40 80 / 4%); border-color: rgb(15 40 80 / 16%); color: var(--ink); }
:root[data-vc-theme="light"] .btn-ghost:hover { background: rgb(15 40 80 / 8%); color: var(--ink); }
:root[data-vc-theme="light"] :is(.cta, .card.feature) .btn-ghost { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 24%); color: #eef4ff; }
:root[data-vc-theme="light"] :is(.cta, .card.feature) .btn-ghost:hover { background: rgb(255 255 255 / 14%); color: #fff; }
:root[data-vc-theme="light"] :is(.pill, .eyebrow) { background: rgb(255 255 255 / 70%); }
:root[data-vc-theme="light"] :is(.hero, .page-hero) .eyebrow { color: var(--blue-strong); }
:root[data-vc-theme="light"] .hero h1 .grad { background-image: linear-gradient(100deg, #0a6db5 0%, #0e8fb8 50%, #2a8f3f 100%); }
:root[data-vc-theme="light"] .hero-meaning em { color: var(--green); }
:root[data-vc-theme="light"] .stat b { color: var(--ink); }
:root[data-vc-theme="light"] .fx-grid {
  background-image: linear-gradient(rgb(15 40 80 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(15 40 80 / 6%) 1px, transparent 1px);
}
:root[data-vc-theme="light"] .fx-beam { opacity: .45; }
/* Light theme: the official colours for the marks lifted on the dark theme */
:root[data-vc-theme="light"] :is(.b-microsoft, .b-microsoft365, .b-office) { color: #737373; }
:root[data-vc-theme="light"] .b-dotnet { color: #512bd4; }
:root[data-vc-theme="light"] .b-intelcorei9 { color: #0071c5; }
:root[data-vc-theme="light"] :is(.b-apple, .b-githubcopilot, .b-cursor, .b-vercel, .b-asus, .b-corsair, .b-kingston, .b-westerndigital) { color: #000; }
:root[data-vc-theme="light"] .b-samsung { color: #1428a0; }
:root[data-vc-theme="light"] .b-ubiquiti { color: #0559c9; }
:root[data-vc-theme="light"] .b-mikrotik { color: #293239; }
:root[data-vc-theme="light"] .b-sophos { color: #2066af; }
:root[data-vc-theme="light"] .b-teamviewer { color: #050a52; }
:root[data-vc-theme="light"] .b-php { color: #777bb4; }
:root[data-vc-theme="light"] .b-mysql { color: #4479a1; }
:root[data-vc-theme="light"] .b-css { color: #663399; }
:root[data-vc-theme="light"] :is(.card:not(.feature), .project, .faq details, .tech > div, .form, .detail, .timeline li > div) {
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, -200px), rgb(10 109 181 / 7%), transparent 45%), var(--surface);
  box-shadow: 0 1px 2px rgb(15 40 80 / 5%);
}
:root[data-vc-theme="light"] :is(.card:not(.feature), .project):hover { box-shadow: 0 0 0 1px rgb(10 109 181 / 10%), 0 26px 60px -30px rgb(15 40 80 / 35%); }
:root[data-vc-theme="light"] .checks svg { color: var(--blue); }
:root[data-vc-theme="light"] .subnav a { background: var(--surface); }
:root[data-vc-theme="light"] .hero-visual.wide .window { box-shadow: 0 0 0 6px rgb(15 40 80 / 4%), 0 40px 80px -40px rgb(15 40 80 / 50%), 0 0 70px -30px rgb(10 109 181 / 35%); }
:root[data-vc-theme="light"] .terminal { box-shadow: 0 24px 50px -24px rgb(15 40 80 / 45%); }
:root[data-vc-theme="light"] .site-footer { background: #e9eff7; }
:root[data-vc-theme="light"] .footer-bottom { border-top-color: var(--line); }

/* Brand logo chips: the mark (in its brand colour) and name, with an optional tag */
.plates { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.plate {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%;
  padding: 8px 12px 8px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: rgb(255 255 255 / 4%);
}
.plate-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }
.plate-tag {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
}
.plate.b-eset .plate-tag { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.plates-top { margin: 0 0 14px; }
/* Small marks beside text that already names the brand (tech tiles, cards) */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; opacity: .92; }
.logo-row i { font-style: normal; }
.logo-row .brand-mark { height: 22px; width: auto; }
.tech .logo-row .brand-mark { height: 26px; }
.tech :is(.b-sqlserver, .b-mysql) .brand-mark { height: 32px; margin-block: -3px; }
.tech .b-dotnet .brand-mark { height: 22px; }
.tech .logo-row { margin: 0 0 12px; }
.partner-card .plate { align-self: flex-start; min-height: 56px; }
:root[data-vc-theme="light"] .plate { background: var(--surface); }
:root[data-vc-theme="light"] :is(.card.feature, .cta) .plate { background: rgb(255 255 255 / 4%); }


/* Remote support card, SLA steps and links inside contact details */
.numbered.one { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.remote-card .svc-actions { margin-top: 6px; }
.svc-steps { margin-top: clamp(36px, 5vw, 56px); }
.detail span a { color: var(--blue); text-decoration: underline; overflow-wrap: normal; }

/* ======================================================================
   Phones and tablets: tiny screens, landscape phones and touch targets
   ====================================================================== */
.nav-toggle { flex: none; }
.brand { min-width: 0; }
@media (max-width: 359px) {
  .brand { gap: 9px; }
  .brand svg { width: 40px; }
  .wm-top { font-size: 1.08rem; }
  .wm-sub { font-size: 0.6rem; letter-spacing: 0.42em; }
}
/* Fold-size phones: room for the logo, the TeamViewer button and the menu button side by side */
@media (max-width: 300px) {
  .brand { gap: 7px; }
  .brand svg { width: 34px; }
  .wm-top { font-size: .95rem; }
  .wm-sub { font-size: .56rem; letter-spacing: .36em; }
  .nav-remote, .nav-toggle { margin-left: 6px; }
}
/* The open menu scrolls on its own when it's taller than the screen (landscape phones) */
@media (max-width: 1080px) {
  .nav-links { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
}
/* Finger-sized targets on touch screens */
@media (pointer: coarse) {
  .site-footer ul { gap: 0; }
  .site-footer li a, .footer-bottom nav a, .crumbs a { display: inline-block; padding-block: 10px; }
  .footer-bottom nav { gap: 24px; }
  .card .more { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; }
  .subnav a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (hover: none) {
  .card:hover, .project:hover { transform: none; }
}
@media (pointer: coarse) and (min-width: 1081px) {
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .theme-toggle { width: 44px; height: 44px; }
}
@media (pointer: coarse) { .pill { min-height: 44px; } }
/* CTA on phones: full-width buttons, and the long email address may wrap */
.cta .btn { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .cta { padding: 30px 22px; border-radius: 20px; }
  .cta-actions .btn { flex: 1 1 100%; }
}

/* Phones: tighter cards, and service tiles with the icon beside the title */
@media (max-width: 480px) { .hide-xs { display: none; } }
@media (max-width: 640px) {
  .window-main { padding-bottom: 18px; }
  .hero-visual.wide .window-body { min-height: 0; }
}
@media (max-width: 600px) {
  .card { padding: 22px 20px; }
  .bento .card:not(.tile-hero) { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 22px 20px; }
  .bento .card:not(.tile-hero) > :not(.icon, h3) { grid-column: 1 / -1; }
  .bento .card:not(.tile-hero) .icon { width: 44px; height: 44px; }
  .bento .tile-hero { padding: 24px 20px; }
  .bento .tile-hero .code { display: none; }
  .bento .plate:not(.b-eset) .plate-tag { display: none; }
}
/* Footer on phones: the two service lists side by side, then build links and contact */
@media (max-width: 760px) {
  .footer-grid { grid-template-areas: "about about" "support solutions" "build build"; }
  .footer-about { grid-area: about; }
  .footer-support { grid-area: support; }
  .footer-solutions { grid-area: solutions; }
  .footer-build { grid-area: build; }
  .footer-build ul { display: block; columns: 2; column-gap: 20px; }
  .footer-build li { break-inside: avoid; }
}

/* Back-to-top button */
.to-top {
  position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 46px; height: 46px; padding: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: rgb(10 19 34 / 86%); color: var(--ink); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 60%);
  opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
}
.to-top.show { opacity: 1; transform: none; visibility: visible; }
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { color: var(--blue-strong); border-color: rgb(116 189 243 / 45%); }
/* At the bottom of a page it grows into a clear blue "Back to top" pill */
.to-top { gap: 8px; transition: opacity .25s, transform .25s, visibility .25s, width .3s cubic-bezier(.2, .7, .2, 1), background-color .25s, color .25s; }
.to-top-label { display: none; font: 600 0.92rem/1 var(--font-body); white-space: nowrap; }
.to-top.at-end {
  width: auto; padding: 0 18px 0 14px; display: inline-flex; align-items: center;
  background: linear-gradient(180deg, #1a8ad0, #0072ae); color: #fff; border-color: rgb(255 255 255 / 18%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 12px 30px -10px rgb(46 147 220 / 75%);
}
.to-top.at-end .to-top-label { display: inline; }
.to-top.at-end:hover { color: #fff; background: linear-gradient(180deg, #2b97da, #0a7cbb); }
:root[data-vc-theme="light"] .to-top.at-end { background: linear-gradient(180deg, #1a8ad0, #0072ae); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 12px 30px -10px rgb(10 109 181 / 55%); }
.to-top:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
:root[data-vc-theme="light"] .to-top { background: rgb(255 255 255 / 92%); box-shadow: 0 10px 30px -12px rgb(15 40 80 / 35%); }
@media print { .to-top { display: none; } }
.nowrap { white-space: nowrap; }
/* Leave room under the last footer line for the back-to-top button */
.site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* Email and message links under the footer blurb */
.site-footer .footer-contact { margin-top: 18px; }
.site-footer .footer-contact a { display: inline-flex; align-items: center; gap: 10px; }
.footer-contact svg { width: 18px; height: 18px; flex: none; color: var(--blue-strong); }
/* Tablets and landscape phones: the menu opens as a panel under the button, not a full-width sheet */
@media (min-width: 640px) and (max-width: 1080px) {
  .nav-links {
    left: auto; right: max(var(--gutter), env(safe-area-inset-right)); top: calc(100% + 8px); width: 340px;
    padding: 10px; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 30px 60px -24px rgb(0 0 0 / 70%);
    max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px);
  }
}
.footer-bottom { align-items: center; }
@media (max-width: 359px) {
  .pill { font-size: 0.82rem; }
  .hero h1, .page-hero h1 { font-size: 2.15rem; }
}

/* ======================================================================
   Motion and depth layer (v12): variable type, glass, glow rings,
   smooth accordions, scroll reveals and the bento on App Development.
   ====================================================================== */

/* Variable fonts: the headline face's optical size follows the fluid font size, so big
   headlines get the tighter display cut and small headings the sturdier text cut. */
:root { interpolate-size: allow-keywords; }
h1, h2, h3, h4 { font-optical-sizing: auto; }
.hero h1, .page-hero h1 { font-weight: 760; letter-spacing: -0.04em; }
.section-head h2, .prose h2, .cta h2 { font-weight: 680; }
p, li { text-wrap: pretty; }

/* Glass: frosted, layered surfaces over the glows and dot fields */
.card, .project, .faq details, .form, .detail {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 1px 2px rgb(0 0 0 / 25%);
}
@media (min-width: 700px) {
  .card, .project, .faq details, .form, .detail {
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
  }
}
.section-glow::after { width: min(900px, 120vw); height: 520px; background: radial-gradient(closest-side, rgb(59 158 234 / 18%), transparent); }
.section-glow > .wrap::before {
  content: ""; position: absolute; z-index: -1; right: -8%; top: 30%; width: min(520px, 80vw); height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(92 200 102 / 10%), transparent);
}
.section-glow > .wrap { position: relative; }
:root[data-vc-theme="light"] .card, :root[data-vc-theme="light"] .project,
:root[data-vc-theme="light"] .faq details, :root[data-vc-theme="light"] .form, :root[data-vc-theme="light"] .detail {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(15 40 80 / 8%);
}
:root[data-vc-theme="light"] .card.feature { box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 20px 50px -30px rgb(15 40 80 / 60%); }

/* Glow ring: a light traces the edge of cards and project tiles on hover */
@property --ring-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card, .project { position: relative; }
.card::after, .project::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ring-angle), transparent 0 45%, rgb(56 213 255 / 90%) 66%, rgb(92 200 102 / 90%) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) {
  .card:hover::after, .project:hover::after { opacity: 1; animation: ring-spin 3.2s linear infinite; }
}
@keyframes ring-spin { to { --ring-angle: 360deg; } }

/* Micro-interactions: buttons lift and glow, arrows nudge, presses give */
.btn-primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 14px 36px -10px rgb(56 213 255 / 70%); }
.btn:active { transform: translateY(0) scale(.97); }
.btn svg { transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.card .icon { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
@media (hover: hover) {
  .card:hover .icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 22px -8px var(--glow); }
}
.card .more svg, .project a svg { transition: transform .2s ease; }

/* Smooth accordions: answers slide open where the browser supports it, and open at once elsewhere */
.faq details { transition: border-color .25s, background-color .25s; }
.faq details[open] { border-color: rgb(116 189 243 / 30%); }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .35s cubic-bezier(.2, .7, .2, 1), content-visibility .35s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq summary::after { content: "+"; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq summary:hover { color: var(--blue-strong); }

/* Scroll reveals (site.js adds these classes; without JavaScript nothing is hidden) */
.reveal-on .reveal:not(.in) { opacity: 0; }
.reveal-on .reveal.in { animation: rise .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media print { .reveal-on .reveal { opacity: 1 !important; animation: none !important; } }

/* App Development: "Three ways we can help" as a bento, desktop apps across the top */
.bento-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 761px) {
  .bento-apps .tile-wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 600px) { .bento-apps { grid-template-columns: minmax(0, 1fr); } }

/* Home hero (Shaun's pick, option C): words on the left, the Stock Control app on the right.
   Stacks to words then app below 960px. */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 72px);
  align-items: center; padding-block: clamp(56px, 8vw, 104px) 0;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.hero-split h1 {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.03em;
  margin-top: 22px; max-width: 14ch;
}
.hero-split .hero-lead { font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.12rem); line-height: 1.6; max-width: 40ch; }
.hero-split .hero-meaning { text-align: left; }
.hero-split .hero-visual.wide { margin-top: 0; max-width: none; }
.hero-split .hero-visual.wide .terminal { right: 16px; bottom: 0; }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .hero-split .hero-visual.wide { margin-top: 8px; }
}

/* Free IT health check: a sample report card beside the offer */
.health-split { align-items: center; }
@media (min-width: 901px) { .health-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.health-head { margin-bottom: 0; }
.health-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: hstep; }
.health-steps li {
  counter-increment: hstep; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px;
  padding: 16px 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line);
}
.health-steps li::before {
  content: counter(hstep); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: var(--blue-strong); border: 1px solid var(--line);
}
.health-steps b { color: var(--ink); font-family: var(--font-display); }
.health-steps span { color: var(--ink-soft); font-size: var(--step--1); }

/* Cookie policy table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.policy-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
@media (max-width: 520px) { .policy-table th, .policy-table td { padding: 10px; } }
.policy-table th, .policy-table td { text-align: left; padding: 12px 14px; vertical-align: top; }
.policy-table th { color: var(--ink); font-weight: 600; background: rgb(255 255 255 / 3%); border-bottom: 1px solid var(--line); }
.prose code { font-family: var(--font-mono); font-size: .9em; color: var(--ink); }
.hero-actions .hero-more { align-self: center; padding: 8px 4px; font-weight: 600; text-decoration: none; color: var(--ink-soft); }
.hero-actions .hero-more:hover { color: var(--ink); }

/* ======================================================================
   Motion round (2026-10-10, Shaun's picks from the Magic UI mock-ups):
   plain CSS/JS versions of Magic UI effects. Nothing follows the mouse,
   everything is still with reduced motion, and site.js pauses the
   looping pieces while they are off screen ([data-motion].is-off).
   ====================================================================== */
.is-off, .is-off *, .is-off::before, .is-off::after, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* 1. Home banner: the headline settles in word by word, a light circles the app window,
   and a soft shine passes over "Start your project". */
.hero h1.words .w { display: inline-block; }
@keyframes settle-in { from { opacity: 0; filter: blur(10px); transform: translateY(14px); } to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1.words .w { animation: settle-in .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
  .hero-split .hero-lead { animation: settle-in .8s .62s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-split .hero-actions { animation: settle-in .8s .8s cubic-bezier(.2, .7, .2, 1) both; }
}
/* The build log card sits above the window, so the moving border light passes behind it. */
.hero-visual .terminal { z-index: 5; }
.beam-ring::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ring-angle), transparent 0 72%, #38d5ff 82%, #6ee08a 88%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ring-spin 6s linear infinite;
}
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 40%) 50%, transparent 70%);
  transform: translateX(-120%); animation: shine-sweep 3.4s ease-in-out 1.6s infinite;
}
@keyframes shine-sweep { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }

/* 2. One team, connected: light pulses run between your systems and the Vulindlela hub.
   site.js draws the curves; below 700px the diagram turns on its side. */
.connect {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 24px clamp(40px, 9vw, 130px); max-width: 860px; margin: 0 auto clamp(40px, 6vw, 64px);
}
.connect-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.connect-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; justify-items: start; position: relative; z-index: 1; }
.connect-out { justify-items: end; }
.connect .node {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 0.92rem; line-height: 1.25;
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 60%);
}
.connect .node svg { width: 20px; height: 20px; flex: none; color: var(--blue-strong); }
.hub {
  position: relative; z-index: 1; width: 108px; height: 108px; border-radius: 26px; display: grid; place-items: center; align-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 30%, #12345a, #071426); border: 1px solid rgb(116 189 243 / 35%);
  box-shadow: 0 0 0 8px rgb(59 158 234 / 8%), 0 0 60px -10px rgb(56 213 255 / 60%);
  color: #eef4ff; font: 700 0.78rem/1 var(--font-display); letter-spacing: 0;
}
.hub svg { width: 58px; height: auto; }
.connect-lines .base { fill: none; stroke: var(--line); stroke-width: 2; }
.pulse-dot {
  position: absolute; left: 0; top: 0; z-index: 0; width: 14px; height: 2.5px; border-radius: 2px; pointer-events: none;
  background: #38d5ff; box-shadow: 0 0 6px rgb(56 213 255 / 80%); opacity: 0; will-change: transform, opacity;
}
.pulse-dot.pulse-out { background: #6ee08a; box-shadow: 0 0 6px rgb(110 224 138 / 70%); }
:root[data-vc-theme="light"] .pulse-dot.pulse-in { background: #0e7490; box-shadow: none; }
:root[data-vc-theme="light"] .pulse-dot.pulse-out { background: #2a8f3f; box-shadow: none; }
:root[data-vc-theme="light"] .connect .node { box-shadow: 0 10px 30px -20px rgb(15 40 80 / 40%); }
@media (max-width: 700px) {
  .connect { grid-template-columns: minmax(0, 1fr); gap: 56px; justify-items: center; }
  .connect-col, .connect-out { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; justify-items: stretch; }
  .connect-out { order: 3; }
  .connect .node { flex-direction: column; justify-content: center; text-align: center; font-size: 0.78rem; padding: 10px 6px; gap: 6px; }
}

/* 3. Health check: the sample report "runs" once when it scrolls into view. Tiles wait in grey,
   then light up one by one while the matching slice of the ring fills and the totals count up.
   The finished report is in the page, so nothing is hidden without JavaScript. */
.score {
  --ok: #3fb950; --plan: #e3a008; --fix: #e5534b;
  container-type: inline-size; margin: 0; padding: clamp(16px, 3vw, 26px); border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 18px; min-width: 0;
}
:root[data-vc-theme="light"] .score { --ok: #1f883d; --plan: #b87503; --fix: #cf222e; }
.score .st-ok { --st: var(--ok); } .score .st-plan { --st: var(--plan); } .score .st-fix { --st: var(--fix); }
.score-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 8px 12px; }
.score-head b { display: block; font: 650 1.2rem/1.2 var(--font-display); color: var(--ink); }
.score-head span { color: var(--ink-soft); font-size: var(--step--1); }
.score-status {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ok) !important; font: 500 0.75rem/1 var(--font-mono) !important; white-space: nowrap;
}
.score-status span { color: inherit; font-size: inherit; }
.score-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.score.is-running .score-status { color: var(--cyan) !important; }
.score.is-running .score-status i { animation: pulse 1s ease-in-out infinite; }
.score-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: 16px; background: rgb(127 160 210 / 6%); border: 1px solid var(--line); }
.ring { position: relative; width: 132px; aspect-ratio: 1; }
/* Each slice is its own small picture, turned into place, so it fills in with transform and
   opacity only and the phone never has to repaint the ring while the report runs. */
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring circle { fill: none; stroke-width: 12; }
.ring-track circle { stroke: var(--line); }
.ring .ring-track { transform: rotate(-90deg); }
.ring .ring-seg { transform: rotate(calc(var(--i) * 60deg - 90deg)); transition: opacity .45s ease-out, transform .6s cubic-bezier(.3, .8, .3, 1); }
.ring-seg circle { stroke: var(--st); stroke-dasharray: 92 508; stroke-dashoffset: -4; }
.ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-mid b { font: 700 2.1rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.ring-mid b small { font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
.ring-mid > span { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.score-sum { display: grid; gap: 8px; min-width: 0; }
.score-sum p { font: 600 1.02rem/1.35 var(--font-display); color: var(--ink); }
.score-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.score-legend li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-soft); }
.score-legend b { display: grid; place-items: center; height: 26px; border-radius: 8px; font: 700 0.95rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--st); background: color-mix(in srgb, var(--st) 14%, transparent); }
.score-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: opacity .4s, transform .4s; }
.tile-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--st); background: color-mix(in srgb, var(--st) 15%, transparent); }
.tile-ico svg { width: 20px; height: 20px; }
.tile-top { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.tile-top b { font-weight: 650; font-size: 0.96rem; color: var(--ink); }
.tile-tag { font: 600 0.75rem/1 var(--font-body); letter-spacing: .01em; padding: 4px 8px; border-radius: 999px; color: var(--st); background: color-mix(in srgb, var(--st) 14%, transparent); white-space: nowrap; }
.tile p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.4; }
.tile.st-fix { border-color: color-mix(in srgb, var(--fix) 45%, transparent); }
@container (max-width: 480px) { .tile { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; padding: 10px; } .tile-ico { width: 32px; height: 32px; border-radius: 9px; } .tile-ico svg { width: 18px; height: 18px; } }
@container (max-width: 400px) { .score-tiles { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 380px) {
  .score-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .score-legend li { grid-template-columns: 30px auto; justify-self: center; }
}
.score.is-armed .tile:not(.done) { --st: var(--ink-soft); opacity: .45; transform: translateY(4px); }
.score.is-armed .tile:not(.done) .tile-tag { visibility: hidden; }
.score.is-armed .ring .ring-seg:not(.done) { opacity: 0; transform: rotate(calc(var(--i) * 60deg - 150deg)); }

/* 4. App Development: a build log types itself out and ticks off each step. The terminal
   stays dark in both themes, like the app window on the home page. */
.buildlog {
  margin: clamp(36px, 5vw, 56px) auto 0; max-width: 760px; border-radius: 14px; overflow: hidden;
  background: #060b14; border: 1px solid rgb(148 180 230 / 16%); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 80%);
  color: #eef4ff;
}
.buildlog-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid rgb(148 180 230 / 13%); font: 500 0.75rem/1.2 var(--font-mono); color: #9aabc6; }
.buildlog-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3a52; flex: none; }
.buildlog-bar span { margin-left: 8px; min-width: 0; overflow-wrap: anywhere; }
.buildlog pre { margin: 0; padding: 16px clamp(14px, 3vw, 20px); font: 400 clamp(0.75rem, 0.7rem + 0.3vw, 0.88rem)/1.75 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: #eef4ff; }
.buildlog .p { color: #38d5ff; }
.buildlog .ok { color: #5cc866; }
.buildlog .dim { color: #9aabc6; }
.buildlog .hi { color: #fff; font-weight: 500; }
.buildlog .ch + .caret { margin-right: -.6em; }
.buildlog .caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: #38d5ff; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.buildlog.is-armed .bl-line:not(.on), .buildlog.is-armed .bl-cmd .ch:not(.on) { visibility: hidden; }
.buildlog.is-armed .bl-line:last-child .caret { visibility: hidden; }
:root[data-vc-theme="light"] .buildlog { box-shadow: 0 30px 70px -36px rgb(15 40 80 / 55%); }

/* About: the story as a road with four stops (Shaun picked it, 2026-10-17). Vulindlela means
   "open the way". A vertical road on phones, a horizontal one from 960px. Nothing in it moves. */
.ra { display: grid; gap: clamp(28px, 4vw, 48px); }
.ra-head { display: grid; gap: 18px; align-items: end; }
.ra-title { display: grid; gap: 12px; }
.ra-title .eyebrow { justify-self: start; }
.ra-title h2 { font-size: var(--step-3); max-width: 16ch; }
.ra-lead { margin: 0; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.45; max-width: 36rem; }
.road { list-style: none; margin: 0; padding: 0 0 0 40px; display: grid; gap: 18px; position: relative; }
/* The road itself: a blue-to-green band with a dashed centre line */
.road::before { content: ""; position: absolute; left: 10px; top: 36px; bottom: 14px; width: 8px; border-radius: 8px;
  background: linear-gradient(180deg, var(--blue), var(--green)); opacity: .9; }
.road::after { content: ""; position: absolute; left: 13.5px; top: 22px; bottom: 22px; width: 1px;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 85%) 0 7px, transparent 7px 15px); }
.stop { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
.stop .logo-row { margin-top: 8px; }
.stop-dot { position: absolute; left: -41px; top: 22px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--blue-strong); box-shadow: 0 0 0 5px var(--bg); }
.stop-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--blue-strong); }
.stop.now .stop-dot { border-color: var(--green); box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px rgb(92 200 102 / 22%), 0 0 26px rgb(92 200 102 / 45%); }
.stop.now .stop-dot::after { background: var(--green); }
.stop.now { border-color: rgb(92 200 102 / 40%); }
.stop-when { font: 600 0.75rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.stop.now .stop-when { color: var(--green); }
.stop h3 { font-size: var(--step-1); }
.stop p { margin: 0; color: var(--ink-soft); }
.stop-plate { margin-top: 6px; }
.ra-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  padding: 22px 26px; border-radius: var(--radius); border: 1px dashed rgb(92 200 102 / 45%); background: rgb(92 200 102 / 6%); }
.ra-next p { margin: 0; color: var(--ink-soft); max-width: 46rem; }
.ra-next b { color: var(--ink); }
@media (min-width: 960px) {
  .ra-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .road { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 46px 0 0; gap: 18px; }
  .road::before { left: 35px; right: 0; top: 11px; bottom: auto; width: auto; height: 8px;
    background: linear-gradient(90deg, var(--blue), var(--green)); }
  .road::after { left: 50px; right: 10px; top: 14.5px; bottom: auto; width: auto; height: 1px;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / 85%) 0 7px, transparent 7px 15px); }
  .stop-dot { left: 20px; top: -50px; }
}

/* Our Work: the three apps as an accordion on the left, one framed picture on the right that swaps
   to match the open app (Shaun, 2026-10-17). It only changes when the visitor picks an app. On phones
   and small tablets each app's picture sits inside its own panel. Without JavaScript every panel is
   open with its own picture. The picture opens full size when tapped. */
.case-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.case-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-size: 0.9rem; text-decoration: none; background: rgb(127 160 210 / 6%); min-height: 40px; display: inline-flex; align-items: center; }
.case-nav a:hover { border-color: var(--blue-strong); }
.cd { display: grid; gap: clamp(24px, 4vw, 56px); min-width: 0; }
.cd-list { min-width: 0; border-top: 1px solid var(--line); }
.cd-item { border-bottom: 1px solid var(--line); }
.cd-h { margin: 0; font-size: inherit; }
.cd-btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; align-items: center;
  text-align: left; padding: 20px 4px 20px 18px; background: none; border: 0; border-left: 3px solid transparent; color: var(--ink-soft); cursor: pointer; font: inherit;
  transition: color .2s, border-color .2s; }
.cd-btn:hover { color: var(--ink); }
.cd-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 8px; }
.cd-btn[aria-expanded="true"] { color: var(--ink); border-left-color: var(--blue-strong); }
.cd-who { grid-column: 1; font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.cd-name { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.01em; }
.cd-chev { grid-column: 2; grid-row: 1 / span 2; transition: transform .25s; color: var(--ink-soft); }
.cd-btn[aria-expanded="true"] .cd-chev { transform: rotate(180deg); color: var(--ink); }
.cd-panel { padding: 0 4px 24px 21px; display: grid; gap: 18px; }
.cd-panel[hidden] { display: none; }
.cd.is-ready .cd-panel { animation: cd-in .3s ease-out; }
@keyframes cd-in { from { opacity: 0; transform: translateY(-4px); } }
.cd-lead { margin: 0; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.45; }
.cd-steps { margin: 0; display: grid; gap: 14px; }
.cd-row { --c: var(--blue-strong); display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid var(--c); }
.cd-row.step-problem { --c: #e3a008; }
.cd-row.step-result { --c: var(--green); }
.cd-row dt { font: 600 0.75rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.cd-row dd { margin: 0; color: var(--ink-soft); line-height: 1.55; }
:root[data-vc-theme="light"] .cd-row.step-problem { --c: #b87503; }
:root[data-vc-theme="light"] .cd-row.step-result { --c: #1f883d; }
:root[data-vc-theme="light"] .cd-row.step-built { --c: #0a6db5; }
:root[data-vc-theme="light"] .cd-who { color: #0a6db5; }
/* The frame: a soft glow in the logo blue and green around the picture */
.cd-stage { display: none; min-width: 0; }
.cd-frame { display: grid; padding: clamp(18px, 2.4vw, 30px); border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 0% 0%, rgb(14 142 233 / 26%), transparent 60%),
              radial-gradient(110% 90% at 100% 100%, rgb(92 200 102 / 18%), transparent 60%), var(--surface);
  box-shadow: var(--shadow); }
:root[data-vc-theme="light"] .cd-frame {
  background: radial-gradient(120% 90% at 0% 0%, rgb(14 142 233 / 16%), transparent 60%),
              radial-gradient(110% 90% at 100% 100%, rgb(92 200 102 / 14%), transparent 60%), #fff; }
.cd-slide { display: grid; gap: 18px; min-width: 0; }
.cd-frame .cd-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.cd-frame .cd-slide.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.case-shot { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #060d1a; box-shadow: var(--shadow); min-width: 0; max-width: 100%; }
.cd-frame .case-shot { box-shadow: 0 24px 50px -30px rgb(0 0 0 / 70%); }
.case-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.case-zoom { position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(5 13 25 / 80%); border: 1px solid rgb(255 255 255 / 16%); color: #fff; font-size: 0.78rem; }
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding-inline: 4px; }
.case-facts dt { font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.case-facts dd { margin: 4px 0 0; color: var(--ink); font-size: 0.95rem; }
@media (min-width: 960px) {
  .cd.is-ready { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; }
  .cd.is-ready .cd-stage { display: block; }
  .cd.is-ready .cd-inline { display: none; }
}
@media (max-width: 420px) {
  .case-facts { grid-template-columns: minmax(0, 1fr); }
  .cd-btn { padding-left: 14px; }
  .cd-panel { padding-left: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd.is-ready .cd-panel { animation: none; }
  .cd-frame .cd-slide, .cd-frame .cd-slide.is-on, .cd-chev, .cd-btn { transition: none; }
}

/* Full-size picture viewer */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 94vh; }
.lightbox::backdrop { background: rgb(2 6 12 / 88%); }
.lightbox img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: 12px; }
.lightbox button { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 25%); background: rgb(5 13 25 / 85%); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }