/* ==========================================================================
   SilverCloud STS — Design System
   "The quiet operations center" — light, precise, engineered.
   Corporate brand (from logo): deep teal #003D52 · lime-olive #BDBF37
   Contrast accent: warm amber #E8833A (used sparingly, teal's complement)
   Token names keep the --blue / --navy keys for stability; values are teal.
   ========================================================================== */

/* ----- Tokens ----------------------------------------------------------- */
:root {
  /* Color */
  --canvas:        #F5F8F8;   /* faint teal-tinted off-white */
  --surface:       #FFFFFF;
  --surface-alt:   #E9F0F1;
  --ink:           #08222B;   /* near-teal black */
  --ink-soft:      #1C333B;
  --slate:         #566A70;
  --slate-light:   #86999E;
  --hairline:      #DCE6E7;

  /* Primary = brand TEAL (token keys retained as --blue* for stability) */
  --blue:          #0E7C97;   /* bright teal — links/hover */
  --blue-strong:   #0A6178;   /* teal — primary buttons/headings accent */
  --blue-deep:     #003D52;   /* deep teal — logo cloud */
  --navy:          #002A3A;   /* deepest teal — hero / footer ground */
  --navy-2:        #003D52;

  /* Accent = brand LIME-OLIVE */
  --lime:          #C6C91E;   /* bright lime — status/highlights on dark */
  --lime-soft:     #BDBF37;   /* logo wordmark lime */
  --lime-ink:      #6E7212;   /* olive — lime text on light (AA) */

  /* Contrast = warm amber, teal's complement (rare, single focal accent) */
  --warm:          #E8833A;

  --blue-soft:     rgba(14, 124, 151, 0.10);
  --blue-glow:     rgba(10, 97, 120, 0.30);

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale (fluid) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.8vw, 2.9rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.2rem);
  --step-5:  clamp(3rem, 2.1rem + 4.5vw, 5.4rem);

  /* Space */
  --gap:        clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --section-y:  clamp(4.5rem, 3rem + 6vw, 8rem);
  --shell:      1200px;
  --shell-wide: 1340px;

  /* Radius / shadow / motion */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.04), 0 4px 14px rgba(11, 18, 32, 0.05);
  --shadow-md: 0 10px 30px rgba(11, 18, 32, 0.08), 0 2px 8px rgba(11, 18, 32, 0.04);
  --shadow-lg: 0 24px 60px rgba(6, 20, 49, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 240ms var(--ease);
}

/* Homepage-only: recolor the lime accents to signal red (leaves every other
   page on the brand lime). Overrides the token + the few hard-coded lime rgbas. */
body.home {
  --lime:      #E4362B;  /* signal red */
  --lime-soft: #E4362B;
  --lime-ink:  #B01E15;  /* red text on light, AA */
}
body.home .status-dot {
  box-shadow: 0 0 0 0 rgba(228, 54, 43, 0.6);
  animation: pulseRed 2.4s var(--ease) infinite;
}
@keyframes pulseRed {
  0%   { box-shadow: 0 0 0 0 rgba(228, 54, 43, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(228, 54, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 54, 43, 0); }
}
body.home .mrow__stat::before { box-shadow: 0 0 8px rgba(228, 54, 43, 0.7); }
/* solid red headline accent (the lime->teal gradient reads muddy in red) */
body.home .hero h1 .accent { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--lime); }

/* ----- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ----- Layout helpers --------------------------------------------------- */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.shell-wide { width: min(100% - 2.5rem, var(--shell-wide)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.ground-alt { background: var(--surface-alt); }
.ground-white { background: var(--surface); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: var(--step--1);
  font-weight: 500; color: var(--blue-strong); letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; background: var(--lime); border-radius: 2px;
}
.lede { font-size: var(--step-1); color: var(--slate); max-width: 60ch; line-height: 1.55; }
.measure { max-width: 68ch; }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-0);
  padding: 0.85rem 1.5rem; border-radius: var(--r-pill);
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue-strong); color: #fff; box-shadow: 0 8px 24px var(--blue-glow); }
.btn--primary:hover { background: var(--blue); box-shadow: 0 12px 32px var(--blue-glow); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue-strong); }
.btn--on-navy { background: #fff; color: var(--navy); }
.btn--on-navy:hover { background: var(--lime); color: var(--navy); }
.btn--ghost-navy { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35); }
.btn--ghost-navy:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display);
  font-weight: 500; color: var(--blue-strong); transition: gap var(--t), color var(--t);
}
.link-arrow svg { transition: transform var(--t); }
.link-arrow:hover { color: var(--blue); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ----- Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 248, 248, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); background: rgba(245, 248, 248, 0.94); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 2rem; }
.brand { display: inline-flex; align-items: center; min-width: 0; }
.brand__logo { display: block; height: 26px; width: auto; max-width: 100%; }
.footer__brand .brand__logo { height: 28px; }
@media (max-width: 480px) { .brand__logo { height: 22px; } }

.nav__links { display: flex; align-items: center; gap: 0.3rem; }
.nav__links a { font-size: var(--step--1); font-weight: 500; color: var(--slate); padding: 0.5rem 0.85rem; border-radius: var(--r-pill); transition: color var(--t), background var(--t); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); background: var(--blue-soft); }
.nav__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }

/* dropdown */
.has-menu { position: relative; }
.has-menu > button { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--step--1); font-weight: 500; color: var(--slate); padding: 0.5rem 0.85rem; border-radius: var(--r-pill); transition: color var(--t), background var(--t); }
.has-menu > button:hover, .has-menu.open > button { color: var(--ink); background: var(--blue-soft); }
.has-menu__chev { transition: transform var(--t); }
.has-menu.open .has-menu__chev { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  min-width: 260px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.has-menu.open .menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* invisible bridge across the 10px gap so hovering button -> menu stays continuous */
.menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.menu a { display: block; padding: 0.7rem 0.8rem; border-radius: var(--r-sm); color: var(--ink); font-weight: 500; font-size: var(--step--1); transition: background var(--t); }
.menu a:hover { background: var(--surface-alt); }
.menu a small { display: block; color: var(--slate); font-weight: 400; font-family: var(--font-body); margin-top: 2px; }

.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--ink); }
.nav__toggle svg { margin-inline: auto; }

/* mobile nav hidden on desktop; shown only in the mobile breakpoint */
.mobile-nav { display: none; }

/* ----- Hero ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 85% 0%, var(--navy-2) 0%, var(--navy) 55%, #04101f 100%);
  color: #fff;
}

/* Optional photo layer: set --hero-img on the hero element (inline) to fill it.
   A strong teal gradient sits on top so the brand stays dominant and text stays
   readable (subtle, brand-first). Lives under .hero__grid and the content. */
.hero[style*="--hero-img"], .page-hero[style*="--hero-img"] { background: var(--navy); }
.hero[style*="--hero-img"]::before,
.page-hero[style*="--hero-img"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    /* horizontal scrim: readable on the left where text sits, clears on the right for the photo */
    linear-gradient(90deg, rgba(0,26,36,0.80) 0%, rgba(0,32,44,0.46) 34%, rgba(0,40,55,0.14) 62%, rgba(0,40,55,0) 82%),
    /* gentle bottom-up darkening so lower body text keeps contrast over bright photos */
    linear-gradient(0deg, rgba(0,26,36,0.42) 0%, rgba(0,26,36,0.08) 42%, rgba(0,26,36,0) 68%),
    var(--hero-img);
  background-size: cover, cover, cover;
  background-position: center, center, center right;
}
.hero > *, .page-hero > * { position: relative; z-index: 1; }
.hero__grid {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(120% 100% at 70% 10%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 10%, #000 30%, transparent 75%);
}
.hero__glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; }
.hero__glow--blue { background: var(--blue); top: -240px; right: -140px; }
.hero__glow--lime { background: var(--lime); bottom: -320px; left: -160px; opacity: 0.2; }
.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(4.5rem, 4rem + 5vw, 8rem); }

/* ----- Hero carousel (homepage) ---------------------------------------- */
/* Fixed-height stage: every slide is absolutely positioned so switching slides
   never changes the carousel's height (slides have different content heights). */
.hero-carousel {
  position: relative;
  min-height: clamp(600px, 48vw, 800px);
}
/* leave room at the bottom of each slide for the overlaid controls so the CTA
   buttons can never sit under the arrows/dots */
.hero-carousel .hero__inner { padding-bottom: clamp(6.5rem, 5rem + 7vw, 10.5rem); }
/* each slide carries its own --hero-img and paints the same overlay as .hero */
.hero-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  display: grid; align-content: center;
  transition: opacity 700ms var(--ease), visibility 700ms var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(0,26,36,0.82) 0%, rgba(0,32,44,0.48) 34%, rgba(0,40,55,0.16) 62%, rgba(0,40,55,0) 82%),
    linear-gradient(0deg, rgba(0,26,36,0.42) 0%, rgba(0,26,36,0.08) 42%, rgba(0,26,36,0) 68%),
    var(--hero-img);
  background-size: cover, cover, cover;
  background-position: center, center, center right;
}
.hero-slide > * { position: relative; z-index: 1; }
/* slide entrance motion for the copy */
.hero-slide.is-active .hero__copy > * { animation: heroRise 700ms var(--ease) both; }
.hero-slide.is-active .hero__copy > *:nth-child(2) { animation-delay: 80ms; }
.hero-slide.is-active .hero__copy > *:nth-child(3) { animation-delay: 150ms; }
.hero-slide.is-active .hero__copy > *:nth-child(4) { animation-delay: 220ms; }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active .hero__copy > * { animation: none; }
}

/* service-slide side visual (replaces monitor panel on service slides) */
.hero-card {
  background: linear-gradient(180deg, rgba(0,32,44,0.82) 0%, rgba(0,22,32,0.86) 100%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-lg);
  padding: 1.75rem; box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-card__tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--step--1); color: var(--lime); margin-bottom: 1rem; }
.hero-card__tag svg { flex: none; }
.hero-card h3 { color: #fff; font-size: var(--step-2); margin-bottom: 0.75rem; }
.hero-card p { color: #DCE6E8; font-size: var(--step-0); margin-bottom: 1.25rem; }
.hero-card ul { display: grid; gap: 0.65rem; }
.hero-card li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--step--1); color: #EAF1F2; }
.hero-card li svg { color: var(--lime); flex: none; margin-top: 0.15rem; }

/* controls */
/* controls overlaid on the hero image, anchored to its bottom */
.hero-controls-bar {
  position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 3; pointer-events: none;
}
.hero-controls {
  display: flex; align-items: center; gap: 1rem; pointer-events: auto;
}
.hero-arrow {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(0,26,36,0.5); border: 1.5px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.hero-arrow:hover { background: var(--blue-strong); border-color: var(--lime); }
.hero-arrow:active { transform: scale(0.94); }
.hero-dots { display: flex; gap: 0.5rem; }
.hero-dot {
  width: 10px; height: 10px; border-radius: var(--r-pill); padding: 0;
  background: rgba(255,255,255,0.3); border: none; transition: background var(--t), width var(--t);
}
.hero-dot.is-active { background: var(--lime); width: 26px; }
.hero-dot:hover { background: rgba(255,255,255,0.6); }
.hero-progress { margin-left: auto; font-family: var(--font-display); font-size: var(--step--1); color: #B6D0D5; letter-spacing: 0.02em; }
@media (max-width: 1024px) {
  /* on mobile only one slide shows and it drives height, so drop the fixed stage */
  .hero-carousel { min-height: 0; }
  .hero-slide { position: relative; display: block; }
  .hero-slide:not(.is-active) { display: none; }
}
.hero__status {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem;
  padding: 0.5rem 1rem; border-radius: var(--r-pill);
  background: rgba(0,26,36,0.55); border: 1px solid rgba(198,201,30,0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-display); font-size: var(--step--1); color: #F2F7EE;
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(157,202,59,0.6); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(157,202,59,0.55); } 70% { box-shadow: 0 0 0 10px rgba(157,202,59,0); } 100% { box-shadow: 0 0 0 0 rgba(157,202,59,0); } }
.hero h1 { color: #fff; font-size: var(--step-5); font-weight: 600; letter-spacing: -0.035em; text-shadow: 0 2px 24px rgba(0,18,26,0.55); }
/* carousel headlines run to 2-3 lines, so cap the size and tighten leading
   to keep the CTA clear of the overlaid controls */
.hero-carousel h1 { font-size: clamp(2.6rem, 1.9rem + 3vw, 4.3rem); line-height: 1.04; }
.hero-carousel .hero__lede { margin-top: 1.25rem; }
.hero-carousel .hero__cta { margin-top: 1.75rem; }
.hero h1 .accent { color: transparent; background: linear-gradient(100deg, var(--lime) 0%, #6FD6C9 100%); -webkit-background-clip: text; background-clip: text; }
.hero__lede { margin-top: 1.5rem; font-size: var(--step-1); color: #EAF1F2; max-width: 42ch; line-height: 1.5; text-shadow: 0 1px 16px rgba(0,18,26,0.6); font-weight: 500; }
.hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__aside { position: relative; }

/* monitor panel */
.monitor {
  background: linear-gradient(180deg, rgba(0,32,44,0.82) 0%, rgba(0,22,32,0.86) 100%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-lg);
  padding: 1.25rem; box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.monitor__bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.monitor__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.monitor__bar span { margin-left: auto; font-family: var(--font-display); font-size: 0.72rem; color: #9FBAC0; letter-spacing: 0.04em; }
.monitor__rows { display: grid; gap: 0.6rem; }
.mrow {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.18);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.mrow:hover { background: rgba(255,255,255,0.12); border-color: rgba(198,201,30,0.4); transform: translateX(2px); }
.mrow__label { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); color: #F2F7F8; font-weight: 500; }
.mrow__label svg { color: #6ED2E8; flex: none; }
.mrow__stat { font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; color: var(--lime); display: inline-flex; align-items: center; gap: 0.4rem; }
.mrow__stat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(198,201,30,0.7); }

/* ----- Trust strip ------------------------------------------------------ */
.trust { border-block: 1px solid var(--hairline); background: var(--surface); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__cell { padding: clamp(1.75rem, 3vw, 2.75rem) 1.5rem; text-align: center; border-left: 1px solid var(--hairline); }
.trust__cell:first-child { border-left: none; }
.trust__num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
.trust__num em { font-style: normal; color: var(--blue-strong); }
.trust__label { font-size: var(--step--1); color: var(--slate); margin-top: 0.35rem; }

/* ----- Section head ----------------------------------------------------- */
.head { max-width: 62ch; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.head h2 { font-size: var(--step-3); }
.head p { margin-top: 1rem; color: var(--slate); font-size: var(--step-1); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { }

/* ----- Pillars (Cloud / Security / Mobility) ---------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pillar {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 2rem 1.75rem; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative; overflow: hidden;
}
.pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--lime)); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.pillar:hover::before { transform: scaleX(1); }
.pillar__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-strong); margin-bottom: 1.25rem;
}
.pillar h3 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.pillar p { color: var(--slate); font-size: var(--step-0); margin-bottom: 1.25rem; }
.pillar__list { display: grid; gap: 0.55rem; }
.pillar__list li { display: flex; gap: 0.6rem; font-size: var(--step--1); color: var(--ink-soft); }
.pillar__list svg { color: var(--lime-ink); flex: none; margin-top: 0.2rem; }

/* ----- Feature rows (alternating) --------------------------------------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature + .feature { margin-top: clamp(3.5rem, 6vw, 6rem); }
.feature--flip .feature__media { order: 2; }
.feature__body h3 { font-size: var(--step-2); margin-bottom: 1rem; }
.feature__body p { color: var(--slate); margin-bottom: 1.5rem; }
.feature__points { display: grid; gap: 0.8rem; margin-bottom: 1.75rem; }
.feature__points li { display: flex; gap: 0.7rem; align-items: flex-start; }
.feature__points svg { color: var(--blue-strong); flex: none; margin-top: 0.25rem; }
.feature__points b { color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.feature__media { position: relative; }
.panel {
  border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--surface);
  box-shadow: var(--shadow-md); padding: 1.5rem; overflow: hidden;
}
.panel--navy { background: radial-gradient(120% 120% at 80% 0%, var(--navy-2), var(--navy)); border-color: rgba(255,255,255,0.1); color: #fff; }

/* schematic diagram bits used in feature panels */
.diagram { display: grid; gap: 0.9rem; }
.node { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: var(--r-sm); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #DDEEF1; font-size: var(--step--1); }
.node svg { color: #5FC5DB; flex: none; }
.node--accent { border-color: rgba(157,202,59,0.4); background: rgba(157,202,59,0.08); }
.node--accent svg { color: var(--lime); }
.node .tag { margin-left: auto; font-family: var(--font-display); font-size: 0.72rem; color: var(--lime); }
.diagram__link { height: 18px; width: 2px; background: linear-gradient(var(--blue), transparent); margin-left: 1.6rem; }

/* ----- Process (genuine sequence, numbered) ----------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); counter-reset: step; }
.step { position: relative; padding-top: 4.75rem; }
.step__n { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: var(--blue-strong); opacity: 0.28; letter-spacing: -0.04em; line-height: 1; }
.step__n::before { counter-increment: step; content: "0" counter(step); }
.step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.step p { color: var(--slate); font-size: var(--step-0); }
.step::after { content: ""; position: absolute; top: 1.55rem; left: 3.6rem; right: -0.75rem; height: 2px; background: repeating-linear-gradient(90deg, var(--hairline) 0 8px, transparent 8px 14px); }
.step:last-child::after { display: none; }

/* ----- Value / CTA band ------------------------------------------------- */
.band {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 15% 0%, var(--blue-deep) 0%, var(--navy) 60%);
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
/* optional photo texture behind a CTA band — set --band-img inline; kept very
   subtle (bands are small and text-dense) so the teal and copy stay dominant */
.band[style*="--band-img"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(100deg, rgba(0,42,58,0.95) 0%, rgba(2,25,40,0.86) 45%, rgba(0,61,82,0.60) 100%),
    var(--band-img);
  background-size: cover, cover; background-position: center, center right;
}
.band > * { position: relative; z-index: 1; }
.band__grid { position: absolute; inset: 0; opacity: 0.4; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(80% 120% at 10% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(80% 120% at 10% 0%, #000, transparent 70%); }
.band__inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; }
.band h2 { color: #fff; font-size: var(--step-3); }
.band p { color: #B6D0D5; margin-top: 1rem; max-width: 46ch; }
.band__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: flex-end; }
@media (max-width: 860px) { .band__inner { grid-template-columns: 1fr; } .band__cta { justify-content: flex-start; } }

/* pricing note card */
.pricing { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.price-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 2rem; }
.price-card__tag { font-family: var(--font-display); color: var(--blue-strong); font-size: var(--step--1); }
.price-card__amt { font-family: var(--font-display); font-size: var(--step-4); color: var(--ink); letter-spacing: -0.03em; line-height: 1; margin: 0.4rem 0; }
.price-card__amt small { font-size: var(--step-0); color: var(--slate); font-weight: 400; letter-spacing: 0; }
.price-card ul { display: grid; gap: 0.7rem; margin-top: 1.5rem; }
.price-card li { display: flex; gap: 0.6rem; font-size: var(--step--1); color: var(--ink-soft); }
.price-card li svg { color: var(--lime-ink); flex: none; margin-top: 0.2rem; }

/* ----- Footer ----------------------------------------------------------- */
.site-footer { background: var(--navy); color: #A9C2C8; padding-block: clamp(3.5rem, 5vw, 5rem) 2rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer__brand .brand { color: #fff; margin-bottom: 1rem; }
.footer__brand p { color: #7C979D; max-width: 34ch; font-size: var(--step--1); }
.footer__col h4 { color: #fff; font-size: var(--step--1); font-family: var(--font-display); letter-spacing: 0; margin-bottom: 1.1rem; }
.footer__col a { display: block; padding: 0.35rem 0; color: #A9C2C8; font-size: var(--step--1); transition: color var(--t); }
.footer__col a:hover { color: var(--lime); }
.footer__contact li { font-size: var(--step--1); color: #A9C2C8; margin-bottom: 0.6rem; display: flex; gap: 0.6rem; }
.footer__contact svg { color: #5FC5DB; flex: none; margin-top: 0.2rem; }
.footer__contact a:hover { color: var(--lime); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: var(--step--1); color: #7C979D; flex-wrap: wrap; }
.footer__social { display: flex; gap: 0.6rem; }
.footer__social a { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(255,255,255,0.06); color: #D6EDF1; transition: background var(--t), color var(--t); }
.footer__social a:hover { background: var(--blue-strong); color: #fff; }

/* ----- Scroll reveal (only hides when JS confirmed + motion allowed) ---- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ----- Inner page hero (non-home) --------------------------------------- */
.page-hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 85% 0%, var(--navy-2), var(--navy)); color: #fff; }
.page-hero .hero__grid { opacity: 0.4; }
.page-hero__inner { position: relative; padding-block: clamp(3.5rem, 4rem + 4vw, 6.5rem); max-width: 62ch; }
.page-hero h1 { color: #fff; font-size: var(--step-4); }
.page-hero p { color: #E6EEF0; font-size: var(--step-1); margin-top: 1.25rem; text-shadow: 0 1px 12px rgba(0,20,28,0.45); }
.crumbs { display: flex; gap: 0.5rem; align-items: center; font-size: var(--step--1); color: #FFFFFF; font-weight: 500; margin-bottom: 1.25rem; text-shadow: 0 1px 10px rgba(0,18,26,0.55); }
.crumbs a { color: #FFFFFF; opacity: 0.92; }
.crumbs a:hover { color: var(--lime); opacity: 1; }
.crumbs span { opacity: 0.65; }

/* ----- Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__aside { max-width: 480px; }
  .pillars { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .step::after { display: none; }
  .step { padding-top: 0; padding-left: 3.4rem; }
  .step__n { top: -0.3rem; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__cell:nth-child(3) { border-left: none; }
  .trust__cell:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav__links, .nav__actions .btn { display: none; }
  .nav__toggle { display: grid; place-items: center; }
  .feature, .feature--flip .feature__media { grid-template-columns: 1fr; order: 0; }
  .feature__media { order: -1; }
  .pricing { grid-template-columns: 1fr; }

  /* mobile menu */
  .mobile-nav { display: block; position: fixed; inset: 76px 0 0; background: var(--canvas); padding: 1.5rem 1.25rem; transform: translateX(100%); transition: transform var(--t); overflow-y: auto; z-index: 40; }
  .mobile-nav.open { transform: none; }
  .mobile-nav a { display: block; padding: 0.9rem 0.5rem; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); border-bottom: 1px solid var(--hairline); }
  .mobile-nav .btn { display: inline-flex; margin-top: 1.5rem; width: 100%; justify-content: center; }
  .mobile-nav__sub { font-size: var(--step-0) !important; color: var(--slate) !important; padding-left: 1.25rem !important; }
}
@media (max-width: 560px) {
  .trust__grid { grid-template-columns: 1fr; }
  .trust__cell { border-left: none; border-bottom: 1px solid var(--hairline); }
  .trust__cell:last-child { border-bottom: none; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
}

/* ----- Forms (careers / support / quote) -------------------------------- */
.form { display: grid; gap: 1.1rem; max-width: 640px; }
.form__row { display: grid; gap: 1.1rem; }
.form__row--2 { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-display); font-size: var(--step--1);
  font-weight: 500; color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 1rem;
  border: 1.5px solid var(--hairline); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--step-0);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); outline: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.field--full { grid-column: 1 / -1; }
.form__note { color: var(--slate); font-size: var(--step--1); }
@media (max-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr; }
}