/* Sequton corporate site — shared design system.
   Light, editorial, photography/line-art driven. Dark surface reserved for the nav bar and the
   closing CTA band only — the body is a warm off-white, matching how real physical-security
   vendors (Verkada, Axis, Convergint) present themselves, not a dark SaaS-dashboard clone. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

:root {
  --bg: #F7F5F0;
  --bg-alt: #EFEAE0;
  --surface: #FFFFFF;
  --ink: #14191F;
  --ink-2: #4B5560;
  --ink-3: #838C96;
  --line: #E2DCCE;
  --line-soft: rgba(20, 25, 31, 0.08);
  --nav-bg: #10151B;
  --nav-line: rgba(255, 255, 255, 0.09);
  --nav-text: #EDEBE6;
  --nav-text-dim: #9BA3AC;
  /* Matches the actual product's fixed brand mark ("Sunrise" spec): Ice Deep on light/paper
     grounds, Ice Blue on dark/ink grounds — not an arbitrary site accent picked separately. */
  --accent: #2E93C6;
  --accent-bright: #86C9EA;
  --accent-soft: #DCEEF6;
  --accent-ink: #FFFFFF;
  --focus: #2F5D8C;
  --radius: 4px;
  /* Archivo 800 is the identity spec's wordmark face (Mark 8B "Sunrise") — extended here to all
     display type so the site reads as one designed system instead of borrowing the OS UI font. */
  --font-head: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
h1 { font-weight: 800; }
p { margin: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent);
  padding: 7px 15px 7px 11px; border-radius: 100px;
  background: var(--accent-soft); border: 1px solid rgba(46,147,198,0.28);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.band-dark .eyebrow { background: rgba(134,201,234,0.12); border-color: rgba(134,201,234,0.32); }
.band-dark .eyebrow::before { background: var(--accent-bright); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 13px 26px; border-radius: 100px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(20,25,31,0.05); }
.btn-primary:hover { background: #1F6E96; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(46,147,198,0.55); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost-dark { border-color: rgba(255,255,255,0.3); color: var(--nav-text); background: rgba(255,255,255,0.04); }
.btn-ghost-dark:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.btn-outline { border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink-2); }
.btn-text { color: var(--accent); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn-text svg { transition: transform .15s ease; }
.btn-text:hover { color: #1F6E96; }
.btn-text:hover svg { transform: translateX(3px); }

/* ---------- Nav ---------- */
/* Elevation instead of a flat hairline border: an inset top highlight reads as a beveled top
   edge catching light, then a close/sharp shadow plus a far/soft shadow beneath give it real
   weight — like a heavy slab floating above the page rather than a flat color band. */
.site-nav {
  position: sticky; top: 0; z-index: 40; background: var(--nav-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 1px 0 rgba(0,0,0,0.45),
    0 8px 18px -8px rgba(0,0,0,0.45),
    0 24px 48px -18px rgba(0,0,0,0.6);
}
.nav-row { display: flex; align-items: center; height: 68px; gap: 28px; }
.nav-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.nav-brand .word { font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: 0; color: var(--nav-text); }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-item { position: relative; }
.nav-item > button {
  background: none; border: none; color: var(--nav-text-dim); font-size: 14px; font-weight: 500;
  padding: 10px 14px; border-radius: var(--radius); display: flex; align-items: center; gap: 6px;
}
.nav-item > button:hover, .nav-item.open > button { color: var(--nav-text); background: rgba(255,255,255,0.05); }
.nav-item > a {
  color: var(--nav-text-dim); font-size: 14px; font-weight: 500; padding: 10px 14px; display: block;
}
.nav-item > a:hover { color: var(--nav-text); }
.caret { width: 9px; height: 9px; opacity: 0.7; }

.mega {
  position: absolute; top: calc(100% + 1px); left: 0; min-width: 560px;
  background: var(--nav-bg); border: 1px solid var(--nav-line); border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 22px; display: none; grid-template-columns: 1fr 1fr; gap: 4px 28px;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
}
.nav-item.open .mega { display: grid; }
.mega-group-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nav-text-dim); margin: 4px 0 10px;
}
.mega a.mega-link {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 10px; border-radius: var(--radius);
}
.mega a.mega-link:hover { background: rgba(255,255,255,0.06); }
.mega a.mega-link .t { color: var(--nav-text); font-weight: 600; font-size: 14px; }
.mega a.mega-link .d { color: var(--nav-text-dim); font-size: 12.5px; line-height: 1.45; }

.nav-utility { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-search { display: flex; align-items: center; gap: 7px; color: var(--nav-text-dim); font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--nav-line); border-radius: 100px; }
.nav-search svg { width: 14px; height: 14px; }
.nav-signin { color: var(--nav-text-dim); font-size: 14px; font-weight: 500; }
.nav-signin:hover { color: var(--nav-text); }

@media (max-width: 980px) {
  .nav-links, .nav-search { display: none; }
}

/* ---------- Sections / bands ---------- */
section { padding: 104px 0; }
.band-alt { background: var(--bg-alt); }
.band-dark {
  background: linear-gradient(180deg, rgba(16,21,27,0.93), rgba(16,21,27,0.97)), url('../img/server-room.jpg') center/cover no-repeat;
  color: var(--nav-text);
}
.band-dark .eyebrow { color: var(--accent-bright); }
.band-dark h2, .band-dark h3 { color: var(--nav-text); }
.band-dark p { color: var(--nav-text-dim); }

.section-head { max-width: 640px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.section-head h2 { font-size: 34px; line-height: 1.14; }
.section-head p { color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* ---------- Hero ---------- */
/* Fine paper-grain texture on the cream ground behind the carousel card — an SVG feTurbulence
   filter (no image asset needed) mapped to dark ink with a very low per-pixel alpha, so the paper
   reads as textured/printed rather than a flat digital fill. Subtle by design: it should read as
   paper stock, not a visible pattern. */
.hero {
  padding: 72px 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero h1 { font-size: 54px; line-height: 1.04; max-width: 560px; }
.accent-word { color: var(--accent-bright); }
.hero .lede { font-size: 17px; color: var(--ink-2); max-width: 500px; margin-top: 20px; line-height: 1.65; }
.hero-ctas { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }

/* Hero carousel — reuses the .slideshow/.slide/.slide-dot mechanics (see Slideshow section
   below) but at hero scale: two columns (copy + visual) instead of one row. */
.hero-carousel .slides-viewport { height: 560px; cursor: grab; user-select: none; }
.hero-carousel .slides-viewport:active { cursor: grabbing; }
/* Arrows sit in the control row beside the dots rather than floating over the slide content —
   slide height varies a lot by breakpoint (900px min-height on mobile vs 560px on desktop) and a
   fixed slide's content rarely fills it, so vertically centering an overlay arrow over the whole
   card lands it on top of whatever text happens to be at the midpoint instead of at the edge. */
.hero-controls { display: flex; align-items: center; gap: 14px; }
.slide-arrow {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); color: var(--ink-2);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.slide-arrow:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.slide-arrow:active { transform: scale(0.92); }
.hero-carousel .slide { display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; align-items: center; padding: 0; }
.hero-carousel .slide.active { animation: heroSlideIn .5s ease; }
@keyframes heroSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero-outcome { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hero-outcome span { color: var(--accent); font-family: var(--font-mono); font-weight: 600; }
.hero-dots { justify-content: flex-start; background: none; border-top: none; padding: 8px 0 0; }
@media (max-width: 980px) {
  /* slideshow.js measures each slide's real content height and sets it here directly; this
     min-height is just the pre-JS/no-JS fallback, not a real layout target. */
  .hero-carousel .slides-viewport { height: auto; min-height: 320px; }
  .hero-carousel .slide { grid-template-columns: 1fr; }
}

/* Hero photo slides (2-7) — full-bleed photography behind the copy instead of a text column
   next to a boxed-in image. Fills the whole 560px hero rather than leaving dead space above
   centered text, and reads as a real marketing banner instead of an icon-with-caption. */
.hero-carousel .slide.photo-slide {
  display: block; padding: 0; background-size: cover; background-position: center;
  border-radius: 16px; overflow: hidden;
}
.photo-slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,13,16,0.97) 0%, rgba(10,13,16,0.92) 30%, rgba(10,13,16,0.6) 58%, rgba(10,13,16,0.18) 82%, rgba(10,13,16,0.05) 100%);
}
.photo-slide-content {
  position: relative; z-index: 2; max-width: 560px; height: 100%;
  padding: 52px 60px; display: flex; flex-direction: column; justify-content: center; color: #fff;
}
.photo-slide-content .eyebrow {
  color: var(--accent-bright); font-size: 12.5px;
  background: rgba(134,201,234,0.14); border-color: rgba(134,201,234,0.38);
}
.photo-slide-content .eyebrow::before { background: var(--accent-bright); }
.photo-slide-content h1 { color: #fff; font-size: 48px; line-height: 1.06; margin-top: 18px; }
.photo-slide-content .lede { color: rgba(255,255,255,0.86); margin-top: 18px; }
.photo-slide-content .btn-text { color: var(--accent-bright); }
.photo-slide-content .btn-text:hover { color: #fff; }
/* inline-flex here (dot + text + highlighted span as flex items) broke on wrap: with no
   flex-wrap, each text run sized/wrapped independently and visually scrambled sentence order on
   narrow screens. A normal inline-block with an absolutely-positioned dot wraps as one paragraph
   regardless of line count. */
.hero-outcome-inline {
  display: inline-block; width: fit-content; position: relative;
  margin-top: 28px; padding: 12px 18px 12px 30px; border-top: none;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; background: rgba(255,255,255,0.06);
  font-size: 13px; font-weight: 600; color: #fff; max-width: 420px;
}
.hero-outcome-inline::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #3FBE6B;
  box-shadow: 0 0 0 3px rgba(63,190,107,0.22);
}
.hero-outcome-inline span { color: var(--accent-bright); font-family: var(--font-mono); font-weight: 600; }
.hero-carousel .photo-slide .hero-photo-badge { top: 26px; right: 26px; }
.hero-photo-badge {
  position: absolute; z-index: 2; width: 58px; height: 58px; border-radius: 12px;
  background: rgba(247,245,240,0.96); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(12,16,19,0.28);
}
.hero-photo-badge svg { width: 32px; height: 32px; }

/* Visitor Management slide — a floating kiosk-screen mockup on the lobby photo, echoing a
   digital check-in kiosk standing next to a reception desk, instead of a small badge icon. */
.kiosk-glow {
  position: absolute; z-index: 1; bottom: 0; right: 0; width: 380px; height: 320px;
  background: radial-gradient(circle at 72% 78%, rgba(46,147,198,0.4), transparent 62%);
  filter: blur(18px); pointer-events: none;
}
.kiosk-panel {
  position: absolute; z-index: 2; bottom: 40px; right: 52px; width: 190px;
  border-radius: 14px; padding: 8px;
  background: linear-gradient(160deg, #131c29 0%, #070b10 100%);
  border: 1px solid rgba(134, 201, 234, 0.22);
  box-shadow: 0 26px 50px -18px rgba(0,0,0,0.65), 0 0 34px rgba(46,147,198,0.14);
}
.kiosk-panel svg { display: block; width: 100%; }
@media (max-width: 980px) {
  /* height:100% + justify-content:center (the desktop layout) floats short slides' text in the
     middle of the tall mobile slide box (min-height:900px, sized for the longest slide), leaving
     a dead gap above the content. Sizing to content and top-aligning removes that gap and lets
     any sibling visual (.ops-visual, .kiosk-panel) sit right after the text instead of far below it. */
  .photo-slide-content { max-width: 100%; height: auto; padding: 40px 30px; justify-content: flex-start; }
  .photo-slide-content h1 { font-size: 32px; }
  .photo-slide-scrim { background: linear-gradient(180deg, rgba(12,16,19,0.35) 0%, rgba(12,16,19,0.88) 55%, rgba(12,16,19,0.95) 100%); }
  .kiosk-panel { position: static; margin: 0 auto 24px; }
  .kiosk-glow { display: none; }
  /* Content now starts at the top (see above) instead of floating mid-card, which puts it right
     under this decorative corner badge — drop the badge on mobile rather than dodge around it. */
  .hero-photo-badge { display: none; }
}
.page-hero { padding: 56px 0 64px; border-bottom: 1px solid var(--line); }
.page-hero .kicker-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.page-hero h1 { font-size: 38px; max-width: 640px; }
.page-hero .lede { font-size: 16.5px; color: var(--ink-2); max-width: 620px; margin-top: 16px; line-height: 1.65; }

/* ---------- Stat strip ---------- */
.stat-strip { border-top: none; border-bottom: none; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  display: flex; flex-direction: column; gap: 10px; padding: 28px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20,25,31,0.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -20px rgba(20,25,31,0.22); border-color: var(--accent-soft); }
.stat .n { font-family: var(--font-mono); font-size: 34px; font-weight: 600; letter-spacing: -0.01em; color: var(--accent); }
.stat .l { font-family: var(--font-head); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.stat .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- Tabbed explorer ---------- */
.explorer-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 36px; flex-wrap: wrap; }
.explorer-tabs input { display: none; }
.explorer-tabs label {
  padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
}
.explorer-panels { position: relative; }
.explorer-panel { display: none; }
#tab-1:checked ~ .explorer-tabs label[for="tab-1"],
#tab-2:checked ~ .explorer-tabs label[for="tab-2"] { color: var(--ink); border-bottom-color: var(--accent); }
#tab-1:checked ~ .explorer-panels #panel-1 { display: block; }
#tab-2:checked ~ .explorer-panels #panel-2 { display: block; }

.offer-list { display: flex; flex-direction: column; }
.offer-row {
  display: grid; grid-template-columns: 2fr 3fr auto; gap: 32px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.offer-row:first-child { padding-top: 0; }
.offer-row .name { font-family: var(--font-head); font-size: 19px; font-weight: 600; }
.offer-row .desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.offer-row .tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); display: block; margin-bottom: 6px; }

/* ---------- Process strip ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process-step {
  padding: 26px 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.process-step:hover { transform: translateY(-4px); background: rgba(255,255,255,0.065); border-color: rgba(134,201,234,0.3); }
.process-step .num {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(134,201,234,0.14); border: 1px solid rgba(134,201,234,0.35);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--accent-bright);
}
.process-step h4 { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--nav-text); }
.process-step p { font-size: 13.5px; color: var(--nav-text-dim); line-height: 1.55; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--surface); padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 17px; }
.card p { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.card .scene { margin-bottom: 6px; }
.card.with-photo { padding: 0; gap: 0; }
.card.with-photo .photo { height: 190px; background-size: cover; background-position: center; }
.card.with-photo .body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Industry rail (real photography, not icons) ---------- */
.industry-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.industry-card {
  position: relative; min-height: 300px; padding: 24px; display: flex; flex-direction: column;
  justify-content: flex-end; background-size: cover; background-position: center; color: #fff;
  overflow: hidden; border-radius: 16px; box-shadow: 0 10px 28px -16px rgba(20,25,31,0.3);
  transition: background-size .5s ease, transform .2s ease, box-shadow .2s ease;
}
.industry-card:hover { background-size: 108%; transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(20,25,31,0.4); }
.industry-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,21,27,0.05) 0%, rgba(16,21,27,0.15) 40%, rgba(16,21,27,0.92) 100%);
  transition: background .25s ease;
}
.industry-card:hover::before { background: linear-gradient(180deg, rgba(16,21,27,0.1) 0%, rgba(16,21,27,0.28) 40%, rgba(16,21,27,0.95) 100%); }
.industry-card > * { position: relative; z-index: 1; }
.industry-card h4 { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #fff; }
.industry-card p { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.5; margin-top: 4px; }
.industry-card .tag {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-weight: 600;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 8px;
}
.industry-card .tag::before { content: ""; width: 12px; height: 1px; background: var(--accent-bright); }
@media (max-width: 600px) {
  .industry-card { min-height: 220px; }
}

/* ---------- Animated pipeline ---------- */
.pipeline-frame { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 28px 20px; overflow-x: auto; }
.pipeline-frame svg { min-width: 780px; }
.pnode rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.4; }
.pnode.glow rect { animation: nodeGlow 6s ease-out infinite; }
.pnode .t { fill: var(--ink); font-weight: 600; }
.pnode .s { fill: var(--ink-3); }
.plabel { fill: var(--ink-3); font-family: var(--font-mono); letter-spacing: .05em; }
.pline { fill: none; stroke: var(--line); stroke-width: 1.4; }
.pdot { filter: drop-shadow(0 0 2.5px var(--accent)); }
.psim { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 3 3; }
@keyframes nodeGlow {
  0% { stroke: var(--accent); stroke-width: 2.2; }
  16% { stroke: var(--line); stroke-width: 1.4; }
  100% { stroke: var(--line); stroke-width: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .pdot { display: none; }
  .pnode.glow rect { animation: none; stroke: var(--line); }
  .pulse-ring { display: none; }
}

/* ---------- Slideshow ---------- */
.slideshow { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.slides-viewport { position: relative; height: 210px; }
/* visibility (not display:none) — Chromium pauses/resets SMIL animation clocks on elements
   removed from the render tree via display:none, which froze every slide icon's animation the
   first time its slide was shown. visibility:hidden keeps it rendering (ticking) in the background. */
.slide { position: absolute; inset: 0; padding: 38px 42px; visibility: hidden; opacity: 0; pointer-events: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
.slide.active { visibility: visible; opacity: 1; pointer-events: auto; animation: slideIn .45s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.slide .tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.slide h3 { font-size: 23px; margin: 10px 0 12px; }
.slide p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; max-width: 480px; }
.slide-icon { width: 88px; height: 88px; flex-shrink: 0; }
.slide-dots { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 16px 0; background: var(--bg-alt); border-top: 1px solid var(--line); }
.slide-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.slide-dot.active { background: var(--accent); transform: scale(1.35); }
@media (max-width: 700px) {
  .slides-viewport { height: 320px; }
  .slide { grid-template-columns: 1fr; text-align: left; padding: 26px; }
  .slide-icon { display: none; }
}

/* ---------- Two column feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.point-list { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.point { display: flex; gap: 16px; align-items: flex-start; }
.point .idx { font-family: var(--font-mono); font-size: 12px; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); border-radius: 100px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.point .t { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.point .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ---------- Diagram frame (replaces stock photography) ---------- */
.diagram-frame {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 24px;
  position: relative; overflow: hidden;
}
.diagram-frame .cap { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 16px; }

/* Hero flagship slide — full-bleed dark "ops console" background (matches the full-bleed
   photography the other slides use) instead of a boxed card sitting on the plain hero bg.
   Text uses .photo-slide-content (already styled for dark grounds); the diagram floats
   directly on the shared background instead of its own bordered .diagram-frame card. */
.hero-carousel .slide.ops-slide {
  display: block; padding: 0; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 140% at 15% 10%, #131c29 0%, #0a0f16 55%, #070b10 100%);
  box-shadow: inset 0 0 80px rgba(46, 147, 198, 0.08);
}
.hero-carousel .slide.ops-slide::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(134,201,234,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 90% at 20% 35%, #000 0%, transparent 75%);
}
/* All three ops-visual diagrams share a 420x300 viewBox capped at 480px wide inside a 560px-tall
   card — at that width they're only ~340px tall, leaving a big gap of empty dark space above and
   below. Just scaling the SVG up risks it colliding with the text column (both sit in the same
   ~1136px-wide card with no shared grid to keep them apart). Padding the container instead keeps
   the diagram itself close to its original footprint while giving its background glow more room
   to fill that vertical space, so what's left reads as atmosphere rather than an empty box. */
.ops-visual {
  position: absolute; top: 50%; right: 4%; transform: translateY(-50%);
  width: 50%; max-width: 520px; padding: 70px 16px; box-sizing: border-box;
  background: radial-gradient(60% 60% at 50% 50%, rgba(46,147,198,0.14), transparent 72%);
}
.ops-visual svg { width: 100%; height: auto; display: block; }
@media (max-width: 980px) {
  .ops-visual { position: static; transform: none; width: 100%; max-width: 100%; padding: 0 30px 40px; background: none; }
}

/* ---------- Final CTA ---------- */
.cta-band { text-align: left; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-inner h2 { font-size: 32px; line-height: 1.16; max-width: 480px; }
.cta-inner p { color: var(--nav-text-dim); margin-top: 10px; max-width: 440px; }

/* ---------- Footer ---------- */
footer { background: var(--nav-bg); border-top: 1px solid var(--nav-line); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer-col-label { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--nav-text-dim); margin-bottom: 14px; }
.footer-descriptor {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.32em;
  color: var(--accent-bright); margin: 14px 0 16px;
}
.footer-col a { display: block; color: var(--nav-text-dim); font-size: 13.5px; padding: 5px 0; }
.footer-col a:hover { color: var(--nav-text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--nav-line); font-size: 12.5px; color: var(--nav-text-dim); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 14.5px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.interest-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.interest-toggle input { display: none; }
.interest-toggle label { padding: 9px 16px; border: 1px solid var(--line); border-radius: 100px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.interest-toggle input:checked + label { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .split.reverse { direction: ltr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .card-grid, .industry-rail { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .process-step { border-right: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .offer-row { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .card-grid, .industry-rail { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  section { padding: 64px 0; }
}