/* ==========================================================================
   MicroClouds IT Consulting Services Inc. — Global Stylesheet
   --------------------------------------------------------------------------
   Table of contents
     1.  Design tokens (custom properties)
     2.  Reset & base elements
     3.  Typography
     4.  Layout primitives (container, section, grid)
     5.  Accessibility helpers (skip link, focus, sr-only)
     6.  Buttons
     7.  Header / navigation / dropdown / mobile menu
     8.  Hero
     9.  Cards (service, product, feature, tech)
     10. Process / steps
     11. Device frames (phone) & image placeholders
     12. Forms (contact)
     13. Footer
     14. Utility & decorative elements
     15. Page-specific helpers
     16. Responsive breakpoints
     17. Reduced motion
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */
:root {
  /* Brand palette */
  --navy-900: #0b1120;   /* primary dark background */
  --navy-800: #0f172a;
  --navy-700: #131c31;
  --navy-600: #1c2942;
  --line-dark: rgba(148, 173, 214, 0.16);

  --ink-900: #0b1220;    /* darkest text on light */
  --ink-700: #273449;
  --ink-500: #566076;    /* muted body on light */
  --ink-300: #8a93a6;

  --paper: #ffffff;
  --paper-alt: #f5f8fc;  /* light neutral section */
  --paper-line: #e5ebf4;

  /* Accents */
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --violet: #8b5cf6;
  --accent-grad: linear-gradient(120deg, #22d3ee 0%, #3b82f6 52%, #8b5cf6 100%);
  --accent-grad-soft: linear-gradient(120deg, rgba(34,211,238,0.16), rgba(139,92,246,0.16));

  /* Text on dark */
  --on-dark: #eaf1ff;
  --on-dark-muted: #a7b4ce;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Fluid type scale */
  --fs-display: clamp(2.4rem, 1.4rem + 4.6vw, 4.4rem);
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  --fs-body: 1.02rem;
  --fs-small: 0.9rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container: 1180px;
  --container-narrow: 820px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13, 24, 48, 0.06), 0 2px 8px rgba(13, 24, 48, 0.05);
  --shadow-md: 0 10px 30px rgba(13, 24, 48, 0.10);
  --shadow-lg: 0 24px 60px rgba(13, 24, 48, 0.16);
  --shadow-glow: 0 0 0 1px rgba(59,130,246,0.25), 0 18px 50px rgba(34,211,238,0.16);

  --header-h: 72px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ */
/* 2. Reset & base                                                     */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* The HTML `hidden` attribute must always win, even over components like .btn
   that set their own display (used for config-driven links with no URL yet). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { padding-left: 1.2em; }
li { margin: 0.2em 0; }

hr { border: 0; border-top: 1px solid var(--paper-line); margin: var(--space-7) 0; }

/* ------------------------------------------------------------------ */
/* 3. Typography                                                       */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  color: var(--ink-900);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 720;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-500);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--accent-grad);
}

.gradient-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.balance { text-wrap: balance; }

/* ------------------------------------------------------------------ */
/* 4. Layout primitives                                                */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.2rem, 6vw, 6rem); }
.section.tight { padding-block: clamp(2.4rem, 4vw, 3.6rem); }

/* Surfaces */
.surface-dark {
  background: var(--navy-900);
  color: var(--on-dark);
  position: relative;
}
/* Any dark-background context gets light headings + light lead text.
   (These backgrounds don't come from .surface-dark, so they need explicit rules.) */
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4 { color: #fff; }
.surface-dark .lead,
.hero .lead,
.page-hero .lead,
.cta-band .lead { color: var(--on-dark-muted); }
.surface-alt { background: var(--paper-alt); }

.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Let grid columns shrink below their content's intrinsic size (prevents an
   image with a fixed max-width from forcing a column wider than the viewport). */
.grid > *, .split > *, .product-hero > * { min-width: 0; }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* 5. Accessibility helpers                                            */
/* ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  background: #fff;
  color: var(--ink-900);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.surface-dark :focus-visible { outline-color: var(--cyan); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/* 6. Buttons                                                          */
/* ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 620;
  line-height: 1;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background 0.18s var(--ease), border-color 0.18s var(--ease), opacity 0.18s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .btn-arrow { transition: transform 0.18s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--accent-grad);
  color: #06131f;
  font-weight: 680;
  box-shadow: 0 10px 24px rgba(34,211,238,0.22);
}
.btn-primary:hover { box-shadow: 0 16px 34px rgba(59,130,246,0.30); }

.btn-secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--paper-line);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: var(--blue); background: #fff; }
.surface-dark .btn-secondary,
.hero .btn-secondary,
.page-hero .btn-secondary,
.cta-band .btn-secondary {
  color: #fff;
  border-color: rgba(180,200,240,0.28);
  background: rgba(255,255,255,0.03);
}
.surface-dark .btn-secondary:hover,
.hero .btn-secondary:hover,
.page-hero .btn-secondary:hover,
.cta-band .btn-secondary:hover { border-color: var(--cyan); background: rgba(255,255,255,0.07); }

.btn-ghost { background: transparent; color: var(--blue); padding-inline: 0.4em; }
.btn-ghost:hover { background: transparent; text-decoration: underline; }

.btn-lg { font-size: 1.05rem; padding: 1em 1.8em; }
.btn-sm { font-size: 0.86rem; padding: 0.6em 1.1em; }
.btn-block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  filter: grayscale(0.3);
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row.center { justify-content: center; }

/* Store badges (App Store / Google Play) drawn in CSS */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 1.15em;
  border-radius: 12px;
  background: #06121f;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  min-width: 168px;
}
.store-badge:hover { text-decoration: none; border-color: var(--cyan); }
.store-badge svg { flex: none; }
.store-badge .sb-top { display: block; font-size: 0.62rem; letter-spacing: 0.04em; opacity: 0.8; text-transform: uppercase; }
.store-badge .sb-main { display: block; font-size: 1.02rem; font-weight: 650; line-height: 1.1; }
.store-badge[aria-disabled="true"] { opacity: 0.45; pointer-events: none; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* 7. Header / navigation                                              */
/* ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 17, 32, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
}
.site-header.is-scrolled { background: rgba(9, 14, 27, 0.92); box-shadow: 0 8px 30px rgba(0,0,0,0.28); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  flex: none;
  white-space: nowrap;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: #fff;
  font-size: 1.08rem;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand .brand-sub { color: var(--on-dark-muted); font-weight: 500; }
/* Drop the "· IT Consulting" tagline on tight desktop widths so the nav never crowds. */
@media (min-width: 901px) and (max-width: 1120px) {
  .brand .brand-sub { display: none; }
}

.nav-spacer { flex: 1 1 auto; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--on-dark);
  font-weight: 550;
  font-size: 0.96rem;
  padding: 0.55em 0.8em;
  border-radius: var(--radius-sm);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.nav-link:hover { text-decoration: none; background: rgba(255,255,255,0.07); color: #fff; }
.nav-link[aria-current="page"] { color: #fff; background: rgba(59,130,246,0.16); }

/* Dropdown */
.nav-item { position: relative; }
.nav-dropdown-toggle .caret {
  width: 0.6em; height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}
.nav-item.open .caret { transform: rotate(-135deg) translateY(-1px); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: #0f1830;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--on-dark);
}
.nav-dropdown a:hover { background: rgba(59,130,246,0.16); text-decoration: none; color: #fff; }
.nav-dropdown a .dd-title { font-weight: 620; }
.nav-dropdown a .dd-desc { font-size: 0.82rem; color: var(--on-dark-muted); }

.nav-cta { margin-left: 0.4rem; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; top: -6px; }
.nav-toggle .bars::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { top: 0; transform: rotate(-45deg); }

/* ------------------------------------------------------------------ */
/* 8. Hero                                                             */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 15% -10%, #16213f 0%, var(--navy-900) 46%, #070c18 100%);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  isolation: isolate;
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero.split-hero .hero-inner { max-width: none; }

.hero h1 { font-size: var(--fs-display); font-weight: 760; }
.hero .lead { max-width: 640px; }

/* Decorative background layers */
.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(120,160,230,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,160,230,0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 30% 20%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 30% 20%, #000 0%, transparent 72%);
}
.hero-glow {
  position: absolute; z-index: 0;
  width: 620px; height: 620px;
  right: -140px; top: -180px;
  background: radial-gradient(circle, rgba(34,211,238,0.20), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
}
.hero-glow.two {
  left: -160px; top: auto; bottom: -220px; right: auto;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 62%);
}
.hero-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Hero visual panel (right side) */
.hero-visual {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
  border: 1px solid var(--line-dark);
  background:
    linear-gradient(160deg, rgba(34,211,238,0.10), rgba(139,92,246,0.10)),
    var(--navy-800);
  box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------ */
/* 9. Cards                                                            */
/* ------------------------------------------------------------------ */
.card {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d3ddec; }

/* Glass card for dark surfaces (restrained) */
.card-glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--on-dark);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
  height: 100%;
}
.card-glass:hover { transform: translateY(-4px); border-color: rgba(34,211,238,0.4); background: rgba(255,255,255,0.06); }
.card-glass h3 { color: #fff; }
.card-glass p { color: var(--on-dark-muted); }

.card-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-grad-soft);
  border: 1px solid var(--line-dark);
  margin-bottom: var(--space-4);
  color: var(--cyan);
}
.card:not(.card-glass) .card-icon { border-color: var(--paper-line); color: var(--blue); }
.card-icon svg { width: 24px; height: 24px; }

/* White cards keep dark, readable text even when placed on a dark section. */
.card { color: var(--ink-700); }
.card h1, .card h2, .card h3, .card h4 { color: var(--ink-900); }
.card .muted { color: var(--ink-500); }
.card h3 { margin-bottom: 0.4em; }
.card p:last-child, .card-glass p:last-child { margin-bottom: 0; }

.card-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--blue);
  font-weight: 600;
}

/* Numbered differentiator card */
.diff-card { position: relative; padding-top: 2.2rem; }
.diff-card .diff-index {
  position: absolute; top: 1.3rem; right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-300);
}

/* ------------------------------------------------------------------ */
/* 10. Process / steps                                                 */
/* ------------------------------------------------------------------ */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  counter-reset: step;
}
.process.four { grid-template-columns: repeat(6, 1fr); }
.step {
  position: relative;
  padding: 1.3rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-dark);
}
.surface-alt .step, body:not(.dark) .section:not(.surface-dark) .step {
  background: #fff; border-color: var(--paper-line); box-shadow: var(--shadow-sm);
}
.step .step-n {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: #06131f;
  background: var(--accent-grad);
  margin-bottom: 0.8rem;
}
.step h4 { margin: 0 0 0.25em; font-size: 1.05rem; }
.step p { margin: 0; font-size: 0.9rem; color: var(--ink-500); }
.surface-dark .step p { color: var(--on-dark-muted); }

/* Connecting line between steps (desktop) */
.process .step::after {
  content: "";
  position: absolute;
  top: calc(1.3rem + 17px);
  right: -0.5rem;
  width: 1rem; height: 2px;
  background: var(--line-dark);
}
.process .step:last-child::after { display: none; }

/* Numbered ordered lists that read as a workflow */
.flow-list { list-style: none; padding: 0; margin: 0; counter-reset: flow; display: grid; gap: 0.9rem; }
.flow-list li {
  counter-increment: flow;
  position: relative;
  padding-left: 3rem;
  min-height: 2rem;
}
.flow-list li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem; font-weight: 600;
  color: var(--blue);
  background: var(--accent-grad-soft);
  border: 1px solid var(--paper-line);
}

/* ------------------------------------------------------------------ */
/* 11. Device frames & image placeholders                              */
/* ------------------------------------------------------------------ */
.phone {
  position: relative;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(160deg, #1b2438, #0b1120);
  border: 1px solid rgba(180,200,240,0.18);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,0.03);
}
.phone::before { /* speaker notch */
  content: "";
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 46%; height: 20px;
  background: #05080f;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone .phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #0b1120;
}
.phone .phone-screen img { width: 100%; height: 100%; object-fit: cover; }

/* Browser frame for desktop screenshots */
.browser {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.browser .browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0.6rem 0.8rem;
  background: #f1f4fa;
  border-bottom: 1px solid var(--paper-line);
}
.browser .browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfd8e6; }
.browser .browser-body { display: block; }

/* Missing-image placeholder */
.img-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  color: var(--on-dark-muted);
  background:
    repeating-linear-gradient(-45deg, rgba(120,160,230,0.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #101a30, #0b1120);
  border: 1px dashed rgba(148,173,214,0.3);
  text-align: center;
  padding: 1.2rem;
  overflow: hidden;
}
.img-placeholder.square { aspect-ratio: 1 / 1; }
.img-placeholder.portrait { aspect-ratio: 9 / 19; }
.img-placeholder .ph-icon { color: var(--cyan); opacity: 0.85; }
.img-placeholder .ph-icon svg { width: 34px; height: 34px; }
.img-placeholder .ph-label { font-family: var(--font-mono); font-size: 0.78rem; color: #cdd8ee; word-break: break-all; }
.img-placeholder .ph-meta { font-size: 0.72rem; color: var(--ink-300); }
.phone .img-placeholder, .browser .img-placeholder { aspect-ratio: auto; height: 100%; border: none; border-radius: 0; }

/* Product mark — frames a supplied product logo/icon as a premium app tile. */
.product-mark {
  width: 76px; height: 76px;
  flex: none;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1120;
  border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-md);
}
.surface-dark .product-mark, .page-hero .product-mark { border-color: var(--line-dark); }
.product-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-mark.lg { width: 92px; height: 92px; border-radius: 22px; }

/* Logo placeholder (small, square-ish) */
.logo-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-300);
  padding: 0.5em 0.8em;
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
}

/* ------------------------------------------------------------------ */
/* 12. Forms                                                           */
/* ------------------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.92rem; color: var(--ink-900); }
.field .req { color: #d64545; }
.field .hint { font-size: 0.82rem; color: var(--ink-500); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: 0.86rem; color: var(--ink-500); }
.form-status { font-size: 0.92rem; padding: 0.6rem 0; min-height: 1.4rem; }

/* Info panel next to contact form */
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.info-list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.info-list .info-ico { color: var(--cyan); flex: none; margin-top: 3px; }

/* ------------------------------------------------------------------ */
/* 13. Footer                                                          */
/* ------------------------------------------------------------------ */
.site-footer {
  background: var(--navy-900);
  color: var(--on-dark-muted);
  padding-block: clamp(2.6rem, 5vw, 4rem) 2rem;
  border-top: 1px solid var(--line-dark);
  position: relative;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand .brand { margin-bottom: 0.8rem; }
.footer-brand p { max-width: 40ch; font-size: 0.94rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-nav a { color: var(--on-dark-muted); font-size: 0.94rem; }
.footer-nav a:hover { color: #fff; }
.footer-nav .footer-col-title {
  color: #fff; font-weight: 640; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem;
}
.footer-legal {
  padding-top: 1.6rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--on-dark-muted);
}
.footer-legal a { color: var(--cyan); }
.footer-legal .legal-line { display: block; }

/* ------------------------------------------------------------------ */
/* 14. Utility & decorative                                           */
/* ------------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.muted { color: var(--ink-500); }
.surface-dark .muted,
.hero .muted,
.page-hero .muted,
.cta-band .muted { color: var(--on-dark-muted); }
/* Plain body text (p, li, dd, td, figcaption) inside any dark context stays readable. */
.surface-dark, .hero, .page-hero, .cta-band { color: var(--on-dark); }
.max-60 { max-width: 60ch; }

.tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.8rem; font-weight: 600;
  padding: 0.32em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--accent-grad-soft);
  color: var(--blue);
  border: 1px solid var(--paper-line);
}
.surface-dark .tag { color: var(--cyan); border-color: var(--line-dark); }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-size: 0.86rem;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--paper-line);
  color: var(--ink-700);
}
.surface-dark .chip { background: rgba(255,255,255,0.04); border-color: var(--line-dark); color: var(--on-dark); }

/* Feature list with checkmarks */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.check-list li { position: relative; padding-left: 1.9rem; }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.35em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--accent-grad);
  -webkit-mask: no-repeat center / 0.7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask: no-repeat center / 0.7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Divider glow line */
.rule-glow { height: 1px; background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5), transparent); border: 0; }

/* Reveal-on-scroll (progressive enhancement; visible by default) */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* 15. Page-specific helpers                                          */
/* ------------------------------------------------------------------ */
/* Page hero (interior pages) */
.page-hero {
  background: radial-gradient(120% 130% at 80% -20%, #182545 0%, var(--navy-900) 50%, #070c18 100%);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.page-hero .hero-grid { mask-image: radial-gradient(circle at 75% 10%, #000, transparent 70%); -webkit-mask-image: radial-gradient(circle at 75% 10%, #000, transparent 70%); }
.page-hero-inner { position: relative; z-index: 2; max-width: 780px; }
/* Keep all page-hero content above the decorative grid/glow layers (and clickable). */
.page-hero .container { position: relative; z-index: 2; }

/* Breadcrumbs */
.breadcrumb { font-size: 0.85rem; color: var(--on-dark-muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--on-dark-muted); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { opacity: 0.5; margin: 0 0.4em; }

/* Detailed service / solution block */
.detail-block {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.detail-block + .detail-block { border-top: 1px solid var(--paper-line); }
.detail-block.reverse .detail-media { order: -1; }

.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
.outcome { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--paper-alt); border: 1px solid var(--paper-line); }
.outcome .o-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); font-weight: 650; }
.outcome p { margin: 0.3em 0 0; font-size: 0.92rem; }

/* Product hero split */
.product-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* Editable placeholder callout (visible marker for missing copy) */
.editable {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #7a4b00;
  background: #fff4e0;
  border: 1px dashed #e0a94a;
  border-radius: 6px;
  padding: 0.1em 0.5em;
}
.surface-dark .editable { color: #ffd591; background: rgba(224,169,74,0.12); border-color: rgba(224,169,74,0.5); }
.editable-block {
  border: 1px dashed #e0a94a;
  background: #fffaf0;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: #7a4b00;
  font-size: 0.94rem;
}
.editable-block strong { color: #653f00; }

/* Tech category grid */
.tech-cat h4 { display: flex; align-items: center; gap: 0.5em; font-size: 1rem; margin-bottom: 0.6rem; }
.tech-cat h4 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-grad); flex: none; }

/* FAQ */
.faq { display: grid; gap: 0.8rem; }
.faq details {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: #fff;
  padding: 0.2rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer;
  font-weight: 620;
  color: var(--ink-900);
  padding: 0.9rem 0;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--blue); transition: transform 0.2s var(--ease); line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1rem; color: var(--ink-500); }

/* Code / template block */
.codeblock {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
  background: var(--navy-800);
  color: #dbe6ff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  white-space: pre;
}

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  background: linear-gradient(130deg, #10203f, #0b1120 60%);
  border: 1px solid var(--line-dark);
  text-align: center;
}
.cta-band .hero-glow { opacity: 0.7; }

/* ------------------------------------------------------------------ */
/* 16. Responsive                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process, .process.four { grid-template-columns: repeat(2, 1fr); }
  .process .step::after { display: none; }
  .split, .product-hero { grid-template-columns: 1fr; }
  .detail-block { grid-template-columns: 1fr; }
  .detail-block.reverse .detail-media { order: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 1.6rem; }
  .outcome-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Mobile navigation (also covers tablet portrait, where the full nav won't fit) */
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: #0b1424;
    border-bottom: 1px solid var(--line-dark);
    padding: 0.8rem clamp(1.1rem, 4vw, 2rem) 1.2rem;
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }
  .nav-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-link { padding: 0.85em 0.7em; font-size: 1.02rem; }
  .nav-item { position: static; }
  .nav-dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: rgba(255,255,255,0.03);
    margin: 0.2rem 0 0.4rem 0.8rem;
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height 0.24s var(--ease), padding 0.24s var(--ease);
  }
  .nav-item.open .nav-dropdown { max-height: 320px; padding: 0.4rem; }
  .nav-cta { margin: 0.6rem 0 0; }
  .nav-cta .btn { width: 100%; }
}

@media (max-width: 560px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* 17. Reduced motion                                                 */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* Print */
@media print {
  .site-header, .site-footer, .hero-canvas, .nav-toggle { display: none; }
  body { color: #000; }
}