@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --sf-bg: #030404;
  --sf-text: #f1f1ed;
  --sf-muted: #bec6c2;
  --sf-dim: #737d78;
  --sf-line: rgba(255, 255, 255, 0.16);
  --sf-line-soft: rgba(255, 255, 255, 0.09);
  /* Default (Events & Meetings) accent — teal. --sf-accent-rgb is the same
     color as an "r, g, b" triplet with no wrapper, so any rgba(var(...), a)
     usage below can still control its own alpha. */
  --sf-accent: #4fe0e6;
  --sf-accent-rgb: 79, 224, 230;
  /* Two supporting hues used only by the decorative multi-color surfaces
     (background aurora, the floating showcase card's gradient border/glow,
     and the shimmer on italic heading text) — never on solid text, buttons,
     borders or anything a11y-relevant, so it's safe for these to be more
     "vibe" than exact brand color. */
  --sf-hue2: #a68cf0;
  --sf-hue2-rgb: 186, 120, 232;
  --sf-hue3: #7c96f5;
  --sf-hue3-rgb: 108, 130, 240;
  --sf-hue4-rgb: 94, 232, 160;
  --sf-serif: 'Playfair Display', Georgia, serif;
  --sf-sans: 'DM Sans', Arial, sans-serif;
  --sf-mono: 'IBM Plex Mono', monospace;
}

/* ==========================================================================
   Platform theming
   ==========================================================================
   Driven entirely by the "Platform Color Theme" field (module.platform_theme)
   which module.html renders as data-enm-theme="..." on the .enm-root wrapper
   that everything else lives inside. Every themed color in this file reads
   from the --sf-accent(-rgb) / --sf-hue2/3(-rgb) / --sf-hue4-rgb custom
   properties above rather than a literal color, so overriding those four
   properties here re-colors the accent text, buttons, borders, glows, the
   background aurora and the heading shimmer everywhere at once.

   Primary --sf-accent values are each platform's real brand color (sources:
   Brandfetch brand profiles + each platform's own live site, checked
   September 2026 — Bizzabo in particular has moved on from the blue some
   directories still list, to the yellow their current site actually uses).
   The --sf-hue2/3/4 values are NOT hand-picked per platform — they're the
   default teal/violet/indigo/emerald aurora hues uniformly hue-rotated by
   the same amount as the accent color, so every theme keeps the same
   internal color harmony as the original design instead of needing 40+
   individually chosen values. Treat --sf-accent as "verify against your
   brand kit if exact accuracy matters"; treat --sf-hue2/3/4 as ambient/
   decorative only. */
.enm-root[data-enm-theme="cvent"] {
  --sf-accent: #00ef6b;
  --sf-accent-rgb: 0, 239, 107;
  --sf-hue2: #8cadf0;
  --sf-hue2-rgb: 120, 120, 232;
  --sf-hue3: #7cdef5;
  --sf-hue3-rgb: 108, 208, 240;
  --sf-hue4-rgb: 110, 232, 94;
}
.enm-root[data-enm-theme="bizzabo"] {
  --sf-accent: #ffc629;
  --sf-accent-rgb: 255, 198, 41;
  --sf-hue2: #91f08c;
  --sf-hue2-rgb: 120, 232, 152;
  --sf-hue3: #bbf57c;
  --sf-hue3-rgb: 170, 240, 108;
  --sf-hue4-rgb: 232, 118, 94;
}
.enm-root[data-enm-theme="swoogo"] {
  --sf-accent: #f46a34;
  --sf-accent-rgb: 244, 106, 52;
  --sf-hue2: #bef08c;
  --sf-hue2-rgb: 139, 232, 120;
  --sf-hue3: #f2f57c;
  --sf-hue3-rgb: 230, 240, 108;
  --sf-hue4-rgb: 232, 94, 133;
}
.enm-root[data-enm-theme="hubilo"] {
  --sf-accent: #d1dd2b;
  --sf-accent-rgb: 209, 221, 43;
  --sf-hue2: #8cf0a9;
  --sf-hue2-rgb: 120, 232, 189;
  --sf-hue3: #93f57c;
  --sf-hue3-rgb: 126, 240, 108;
  --sf-hue4-rgb: 232, 164, 94;
}
.enm-root[data-enm-theme="spotme"] {
  --sf-accent: #e85c30;
  --sf-accent-rgb: 232, 92, 48;
  --sf-hue2: #c2f08c;
  --sf-hue2-rgb: 144, 232, 120;
  --sf-hue3: #f5f37c;
  --sf-hue3-rgb: 236, 240, 108;
  --sf-hue4-rgb: 232, 94, 139;
}
.enm-root[data-enm-theme="on24"] {
  /* ON24's literal brand blue (#3040e8) reads fine on their own white
     product UI, but used as small text/label color against this page's
     near-black card backgrounds it measures ~2.9:1 contrast — well under
     the 4.5:1 WCAG AA minimum for text, which is why the "01/02/03…" card
     numbers and section-number eyebrows were hard to make out. Lightened
     to the same hue/saturation, just brighter, so it still reads as
     ON24 blue but clears AA (~5.2:1) — every other platform's accent in
     this file already sits in the 4.4–13.4:1 range, this brings on24 in
     line with the rest instead of being the one outlier. */
  --sf-accent: #6c77ef;
  --sf-accent-rgb: 108, 119, 239;
  --sf-hue2: #f08ce3;
  --sf-hue2-rgb: 232, 120, 180;
  --sf-hue3: #cc7cf5;
  --sf-hue3-rgb: 201, 108, 240;
  --sf-hue4-rgb: 94, 183, 232;
}
.enm-root[data-enm-theme="rainfocus"] {
  --sf-accent: #e71356;
  --sf-accent-rgb: 231, 19, 86;
  --sf-hue2: #f0e68c;
  --sf-hue2-rgb: 206, 232, 120;
  --sf-hue3: #f5b07c;
  --sf-hue3-rgb: 240, 171, 108;
  --sf-hue4-rgb: 232, 94, 215;
}
.enm-root[data-enm-theme="whova"] {
  --sf-accent: #069eed;
  --sf-accent-rgb: 6, 158, 237;
  --sf-hue2: #c48cf0;
  --sf-hue2-rgb: 220, 120, 232;
  --sf-hue3: #877cf5;
  --sf-hue3-rgb: 126, 108, 240;
  --sf-hue4-rgb: 94, 232, 202;
}
.enm-root[data-enm-theme="vfairs"] {
  --sf-accent: #f1614b;
  --sf-accent-rgb: 241, 97, 75;
  --sf-hue2: #cdf08c;
  --sf-hue2-rgb: 156, 232, 120;
  --sf-hue3: #f5e67c;
  --sf-hue3-rgb: 240, 230, 108;
  --sf-hue4-rgb: 232, 94, 153;
}
.enm-root[data-enm-theme="amego"] {
  --sf-accent: #9d5cff;
  --sf-accent-rgb: 157, 92, 255;
  --sf-hue2: #f08cad;
  --sf-hue2-rgb: 232, 120, 120;
  --sf-hue3: #f57cdd;
  --sf-hue3-rgb: 240, 108, 208;
  --sf-hue4-rgb: 94, 109, 232;
}


* { box-sizing: border-box; }

html {
  background: var(--sf-bg);
  overflow-x: hidden;
}
/* `clip` hides sideways overflow WITHOUT turning html/body into scroll
   containers (which would silently break every position: sticky below). */
@supports (overflow: clip) {
  html, body { overflow-x: clip !important; }
}

body {
  margin: 0;
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--sf-sans);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Fixed background — a soft, slow-drifting teal/dark gradient "aurora".
   Three large, blurred radial-gradient blobs on a fixed layer, each
   drifting on its own slow, looping path via transform (GPU-accelerated,
   no layout/paint cost). This replaces what used to be a Three.js/WebGL
   scene (particles + a spotlight rig): no library to download, nothing to
   boot or fail to boot on an older device or unsupported browser, and
   effectively free to keep running. */
.sf-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--sf-bg);
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
  will-change: transform;
}
.aurora-1 {
  /* Brand teal — the anchor hue, largest + brightest blob. */
  width: 52vw;
  height: 52vw;
  top: -6vw;
  left: -4vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--sf-accent-rgb), 0.48), rgba(var(--sf-accent-rgb), 0) 70%);
  animation: enm-aurora-drift-1 42s ease-in-out infinite;
}
.aurora-2 {
  /* Cool indigo-blue — sits opposite the teal blob for a two-tone drift. */
  width: 46vw;
  height: 46vw;
  bottom: -8vw;
  right: -2vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--sf-hue3-rgb), 0.36), rgba(var(--sf-hue3-rgb), 0) 70%);
  animation: enm-aurora-drift-2 50s ease-in-out infinite;
}
.aurora-3 {
  /* Soft violet — the classic third aurora hue, kept central and subtle. */
  width: 40vw;
  height: 40vw;
  top: 26vh;
  left: 34vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--sf-hue2-rgb), 0.3), rgba(var(--sf-hue2-rgb), 0) 70%);
  animation: enm-aurora-drift-3 60s ease-in-out infinite;
}
.aurora-4 {
  /* Emerald-green accent — smallest blob, adds the green streak that
     reads unmistakably as "aurora" without crowding the brand teal. */
  width: 30vw;
  height: 30vw;
  top: -4vh;
  right: 14vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--sf-hue4-rgb), 0.26), rgba(var(--sf-hue4-rgb), 0) 70%);
  animation: enm-aurora-drift-4 55s ease-in-out infinite;
}
@keyframes enm-aurora-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 8vh) scale(1.12); }
}
@keyframes enm-aurora-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7vw, -6vh) scale(1.08); }
}
@keyframes enm-aurora-drift-3 {
  0%, 100% { transform: translate(-4vw, 0) scale(0.95); }
  50% { transform: translate(4vw, -5vh) scale(1.1); }
}
@keyframes enm-aurora-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5vw, 6vh) scale(1.15); }
}
@media (max-width: 640px) {
  .aurora-blob { filter: blur(50px); opacity: 0.6; }
  .aurora-4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none; }
}

/* ==========================================================================
   Static Full-Bleed Hero Background Image (whole hero, not a side panel)

   Was a position:fixed card that floated mid-screen and slid left/right as
   you scrolled past other sections (driven by data-enm-side), then had to
   be force-hidden on every section except the hero via an opacity:0 list.
   Now it lives INSIDE .hero itself (see module.html), is position:absolute
   scoped to that section, and fills the ENTIRE hero edge-to-edge as a true
   background image — no card border/padding/backdrop-blur/shadow, no
   float/side-swap motion. A first pass made it a right-side-only panel
   (stopping at left:62%), which read as two harsh, unrelated halves once a
   busy/bright photo sat directly against the dark text column — this
   version runs the image the full width of the hero and relies on the
   gradient overlay below to keep the text side legible, which is the
   standard "hero bg image" look instead of a boxed-in side panel.
   Being scoped to the hero's own box means it scrolls away with the hero
   naturally, so the old data-enm-section hide-list and data-enm-side
   left/right rules are gone too — there's nothing left for them to do. */

.sf-static-showcase {
  position: absolute;
  /* An absolutely positioned child's offsets are resolved against .hero's
     padding box, i.e. its true outer edges — offset:0 already reaches the
     full top/bottom of the section without being pushed in by .hero's own
     80px/60px padding (that padding only applies to normal-flow content
     like .hero-inner). Genuinely full-bleed, edge to edge. */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Fallback tint for the no-image placeholder state, so an empty panel
     still reads as an intentional design element rather than blank space.
     Harmless once a real image/video covers it. */
  background: linear-gradient(160deg, rgba(var(--sf-accent-rgb), 0.1), rgba(3, 4, 4, 0.4) 70%);
}

/* Legibility wash: dark and fully opaque under the text column, fading
   out toward the right so the photo still reads clearly over there.
   .hero-inner tops out around 620px / 45vw, so the gradient stays solid
   past that point before it starts fading. */
.sf-static-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--sf-bg) 0%,
    var(--sf-bg) 30%,
    rgba(3, 4, 4, 0.82) 45%,
    rgba(3, 4, 4, 0.4) 62%,
    rgba(3, 4, 4, 0.08) 80%,
    rgba(3, 4, 4, 0) 100%
  );
}

/* ...and a light top/bottom vignette so the image doesn't cut off with a
   hard line against the nav bar or the next section. */
.sf-static-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 4, 4, 0.5) 0%, rgba(3, 4, 4, 0) 18%, rgba(3, 4, 4, 0) 78%, rgba(3, 4, 4, 0.55) 100%);
}

.showcase-card {
  position: absolute;
  inset: 0;
}

.showcase-img,
.showcase-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sc-badge {
  font-family: var(--sf-serif);
  font-size: 42px;
  color: #fff;
  letter-spacing: -0.04em;
  text-shadow: 0 0 20px rgba(var(--sf-accent-rgb), 0.7);
}

.sc-title {
  font-family: var(--sf-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--sf-accent);
  text-transform: uppercase;
}

/* Background Atmosphere */
.sf-atmosphere {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(3, 4, 4, 0.32) 80%, rgba(3, 4, 4, 0.88) 100%);
  transition: background 0.75s ease;
}

.sf-grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* Side Navigation */
.side-nav {
  position: fixed; z-index: 60; left: clamp(20px, 2.5vw, 40px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; width: 175px;
}
.side-nav::before {
  content: 'ON THIS PAGE'; font-family: var(--sf-mono); font-size: 8.5px; letter-spacing: 0.32em; color: #78817d; margin-bottom: 22px;
}
.side-nav a {
  display: flex; align-items: center; gap: 14px; min-height: 29px; font-size: 10px; color: #68716d; transition: color 0.3s ease;
}
.side-nav .tick {
  display: block; width: 14px; height: 1px; background: #515955; transition: width 0.35s ease, background 0.35s ease;
}
.side-nav a.active { color: #f1f1ed; }
.side-nav a.active .tick { width: 36px; background: var(--sf-accent); }
.side-nav a:focus-visible { color: #f1f1ed; outline: 2px solid var(--sf-accent); outline-offset: 4px; border-radius: 4px; }

/* Right Badge */
.sf-edge-badge {
  position: fixed; z-index: 55; right: 0; top: 45%; width: 44px; height: 160px;
  background: #f3f3ef; color: #090a09; display: flex; align-items: center; justify-content: space-between; flex-direction: column; padding: 12px 0;
}
.sf-edge-badge span { font-family: var(--sf-serif); font-size: 18px; font-weight: 500; }
.sf-edge-badge b { font-size: 9px; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.12em; font-family: var(--sf-mono); }


/* Ambient sound toggle (mont-fort style). Stays reachable at every viewport
   width, unlike the side-nav/edge-badge, since sound should stay available
   on mobile too. */
.sf-sound-toggle {
  position: fixed;
  z-index: 70;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sf-line);
  background: rgba(5, 10, 12, 0.72);
  color: #e7eae8;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.sf-sound-toggle:hover { border-color: var(--sf-accent); color: var(--sf-accent); }
.sf-sound-toggle:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 3px; }
.sf-sound-toggle[aria-pressed="true"] {
  border-color: var(--sf-accent);
  color: var(--sf-accent);
  background: rgba(8, 20, 22, 0.85);
}
.sf-sound-toggle .sst-canvas { width: 22px; height: 22px; display: block; }
.sst-sr-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
  .sf-sound-toggle { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-sound-toggle { transition: none; }
}

/* ==========================================================================
   Page layout — /platforms/cvent/
   ========================================================================== */
.content { position: relative; z-index: 10; width: 100%; }
.sf-atmosphere {
  background: radial-gradient(ellipse at 50% 50%, rgba(3,4,4,.3) 0%, rgba(3,4,4,.55) 70%, rgba(3,4,4,.86) 100%);
}

section { position: relative; display: block; padding: 96px 0; }
.wrap-wide {
  width: auto;
  max-width: 1180px;
  margin-left: clamp(240px, 18vw, 340px);
  margin-right: clamp(60px, 8vw, 150px);
}
.panel { position: relative; isolation: isolate; }
.panel::before, .hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -40px -50px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(3,4,4,.82) 0%, rgba(3,4,4,.42) 60%, transparent 85%);
  filter: blur(14px);
}

/* Typography */
.sec-label { display: flex; gap: 12px; align-items: center; margin: 0 0 18px; font-family: var(--sf-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: #aab2ae; }
.sec-label b { color: var(--sf-accent); font-weight: 400; }
h1, h2, h3, p { margin-top: 0; }
.content h1, .content h2 { color: #f1f1ed; text-shadow: 0 2px 24px rgba(0,0,0,.7); }
h1 { font-family: var(--sf-serif); font-size: clamp(38px, 4.2vw, 62px); font-weight: 400; line-height: 1.04; letter-spacing: -.045em; margin: 0 0 24px; }
h2 { font-family: var(--sf-serif); font-size: clamp(34px, 3.8vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.035em; margin: 0 0 20px; max-width: 20ch; }
/* Italic accent phrases: slow gradient shimmer in the theme's hues. */
h1 em, h2 em {
  font-style: italic; font-weight: 400;
  background: linear-gradient(90deg, var(--sf-accent) 0%, var(--sf-hue2) 35%, var(--sf-hue3) 55%, var(--sf-accent) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: enm-em-shimmer 7s linear infinite;
}
@keyframes enm-em-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
.section-sub, .hero-subheading { color: #c0c8c4; font-size: 16px; line-height: 1.65; margin: 0; max-width: 58ch; text-shadow: 0 1px 12px rgba(0,0,0,.85); }
.section-sub p, .hero-subheading p { margin: 0 0 1.1em; color: inherit; }
.section-sub p:last-child, .hero-subheading p:last-child { margin-bottom: 0; }
.section-sub strong, .hero-subheading strong { color: #f5f8f6; }
.rich-copy a, .item-copy a { color: var(--sf-accent); border-bottom: 1px solid rgba(var(--sf-accent-rgb), .4); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in .stagger > * { opacity: 1; transform: none; }

/* Hero */
.hero { min-height: 100vh; min-height: 100svh; padding: 90px 0 70px; overflow: hidden; display: flex; align-items: center; }
.hero-inner { width: min(660px, 48vw); position: relative; z-index: 1; margin-left: clamp(240px, 18vw, 340px); }
.hero-copy { position: relative; isolation: isolate; width: 100%; }
.hero-subheading { font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 32px; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; background: #f0f1ed; color: #090a09;
  border-radius: 999px; padding: 15px 28px; font-family: var(--sf-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; transition: all .25s ease; text-align: center;
}
.btn-primary:hover { background: var(--sf-accent); transform: translateY(-2px); }
.btn-primary.btn-lg { padding: 19px 36px; font-size: 11px; }
.btn-secondary {
  font-family: var(--sf-mono); font-size: 11px; letter-spacing: .06em; color: #f4f5f2; padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.55); text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.7); transition: all .2s ease;
}
.btn-secondary:hover { color: var(--sf-accent); border-color: var(--sf-accent); }
.scroll-cue { position: absolute; left: clamp(240px, 18vw, 340px); bottom: 30px; display: flex; align-items: center; gap: 10px; font-family: var(--sf-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #e4e6e2; text-shadow: 0 1px 4px rgba(0,0,0,.9); z-index: 1; }
.scroll-cue .ln { width: 28px; height: 1px; background: var(--sf-accent); }
/* The H1 stays complete in the HTML (SEO / no-JS); JS only adds this caret while typing. */
.hero h1.is-typing::after { content: ""; display: inline-block; width: .045em; height: .78em; margin-left: .08em; background: var(--sf-accent); box-shadow: 0 0 14px rgba(var(--sf-accent-rgb), .55); animation: enm-type-caret .7s steps(1, end) infinite; vertical-align: -.04em; }
@keyframes enm-type-caret { 50% { opacity: 0; } }

/* Hero placeholder illustration (shown only when no stage image/video is set) */
.showcase-placeholder { flex-direction: row; align-items: center; justify-content: flex-end; padding-right: clamp(40px, 9vw, 160px); }
.hub-art { --s: min(40vw, 540px); --r: calc(var(--s) * .36); position: relative; width: var(--s); height: var(--s); }
.ha-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--sf-accent-rgb), .32); }
.ha-r1 { inset: 30%; border-color: rgba(var(--sf-accent-rgb), .5); }
.ha-r2 { inset: 14%; }
.ha-r3 { inset: 0; border-style: dashed; border-color: rgba(var(--sf-accent-rgb), .2); animation: ha-spin 60s linear infinite; }
.ha-sat { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 16px 2px rgba(var(--sf-accent-rgb), .6); transform: rotate(var(--a)) translateY(calc(var(--r) * -1.28)); opacity: .85; }
.ha-s1 { --a: 0deg; } .ha-s2 { --a: 60deg; } .ha-s3 { --a: 120deg; } .ha-s4 { --a: 180deg; } .ha-s5 { --a: 240deg; } .ha-s6 { --a: 300deg; }
.ha-core { position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--sf-serif); font-size: clamp(20px, 2.6vw, 38px); color: #fff; letter-spacing: -.02em; background: radial-gradient(circle, rgba(var(--sf-accent-rgb), .3), rgba(var(--sf-accent-rgb), .06) 72%); box-shadow: 0 0 60px rgba(var(--sf-accent-rgb), .25); text-shadow: 0 0 18px rgba(var(--sf-accent-rgb), .6); }
@keyframes ha-spin { to { transform: rotate(360deg); } }

/* 02 Challenge — sticky heading + three problem rows */
.chal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.chal-head { position: sticky; top: 110px; }
.chal-head h2 { max-width: 14ch; }
.chal-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sf-line); }
.chal-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 34px 0 36px; border-top: 1px solid var(--sf-line); }
.chal-n { font-family: var(--sf-mono); font-size: 11px; letter-spacing: .14em; color: var(--sf-accent); padding-top: 9px; }
.chal-row h3 { font-family: var(--sf-serif); font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; color: #fff; }
.chal-row p { font-size: 15.5px; line-height: 1.7; color: #b3bbb7; margin: 0; max-width: 58ch; }

/* 03 What E&M handles — selector. Default (no JS / narrow): stacked cards. */
.svc { margin-top: 44px; display: grid; gap: 14px; }
.svc-list { display: none; }
.svc-panel { position: relative; overflow: hidden; padding: 28px 26px 30px; border: 1px solid var(--sf-line-soft); border-radius: 16px; background: rgba(5,10,12,.85); }
.svc-ghost { position: absolute; right: 18px; bottom: -.18em; font-family: var(--sf-serif); font-size: 120px; line-height: 1; color: rgba(var(--sf-accent-rgb), .07); pointer-events: none; }
.svc-count { display: block; margin-bottom: 14px; font-family: var(--sf-mono); font-size: 10px; letter-spacing: .2em; color: var(--sf-accent); }
.svc-panel h3 { position: relative; font-family: var(--sf-serif); font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; color: #fff; }
.svc-panel p { position: relative; margin: 0; font-size: 15px; line-height: 1.65; color: #b3bbb7; max-width: 46ch; }
@media (min-width: 901px) {
  .svc.is-ready { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border: 1px solid var(--sf-line-soft); border-radius: 20px; overflow: hidden; background: rgba(5,10,12,.78); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
  .svc.is-ready .svc-list { display: flex; flex-direction: column; border-right: 1px solid var(--sf-line-soft); }
  .svc-tab { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 6px; width: 100%; padding: 18px 22px; text-align: left; border: 0; border-bottom: 1px solid var(--sf-line-soft); border-left: 2px solid transparent; background: transparent; color: #8f9994; cursor: pointer; transition: background .25s, color .25s, border-color .25s; font: inherit; }
  .svc-tab:last-child { border-bottom: 0; }
  .svc-tab-n { font-family: var(--sf-mono); font-size: 10px; letter-spacing: .14em; color: #67716c; transition: color .25s; }
  .svc-tab-t { font-family: var(--sf-serif); font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
  .svc-tab:hover { color: #e8ece9; background: rgba(255,255,255,.025); }
  .svc-tab.is-active { color: #fff; background: rgba(var(--sf-accent-rgb), .09); border-left-color: var(--sf-accent); }
  .svc-tab.is-active .svc-tab-n { color: var(--sf-accent); }
  .svc-tab:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; }
  .svc.is-ready .svc-panels { position: relative; min-height: 100%; }
  .svc.is-ready .svc-panel { display: none; height: 100%; min-height: 400px; border: 0; border-radius: 0; background: transparent; padding: clamp(36px, 4vw, 60px); }
  .svc.is-ready .svc-panel.is-active { display: flex; flex-direction: column; justify-content: center; animation: svc-in .45s ease both; }
  .svc.is-ready .svc-ghost { font-size: clamp(180px, 20vw, 300px); right: 24px; bottom: -.12em; }
  .svc.is-ready .svc-panel h3 { font-size: clamp(32px, 3.2vw, 46px); margin-bottom: 18px; }
  .svc.is-ready .svc-panel p { font-size: 17px; line-height: 1.7; }
}
@keyframes svc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 04 Technology ecosystem — hub and spoke */
.eco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 18vw, 250px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; margin-top: 50px; }
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.eco-line { fill: none; stroke: rgba(var(--sf-accent-rgb), .6); stroke-width: 1.2; stroke-dasharray: 3 7; opacity: 0; transition: opacity .8s ease; transition-delay: calc(var(--i, 0) * 120ms + .3s); animation: eco-flow 1.8s linear infinite; }
.reveal.in .eco-line { opacity: 1; }
@keyframes eco-flow { to { stroke-dashoffset: -20; } }
.eco-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
.eco-node { position: relative; padding: 20px 22px 22px; border: 1px solid var(--sf-line-soft); border-radius: 14px; background: rgba(5,10,12,.88); transition: border-color .25s, transform .25s; }
.eco-node:hover { border-color: rgba(var(--sf-accent-rgb), .5); transform: translateY(-2px); }
.eco-node h3 { font-family: var(--sf-serif); font-size: 21px; font-weight: 400; letter-spacing: -.01em; margin: 0 0 6px; color: #fff; }
.eco-node p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #a9b1ad; }
.eco-dot { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 0 4px rgba(var(--sf-accent-rgb), .14), 0 0 14px rgba(var(--sf-accent-rgb), .6); }
.eco-col--l .eco-dot { right: -5px; }
.eco-col--r .eco-dot { left: -5px; }
.eco-hub { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.eco-hub-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sf-accent-rgb), .22), transparent 68%); }
.eco-hub-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(var(--sf-accent-rgb), .45); animation: ha-spin 50s linear infinite; }
.eco-hub-core { position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 38%, rgba(var(--sf-accent-rgb), .22), rgba(5,12,14,.96) 70%); border: 1px solid rgba(var(--sf-accent-rgb), .6); box-shadow: 0 0 50px rgba(var(--sf-accent-rgb), .2), inset 0 0 30px rgba(var(--sf-accent-rgb), .08); }
.eco-hub-core b { font-family: var(--sf-serif); font-size: clamp(26px, 2.8vw, 40px); font-weight: 400; letter-spacing: -.03em; color: #fff; text-shadow: 0 0 20px rgba(var(--sf-accent-rgb), .55); }
.eco-hub-core em { margin-top: 6px; font-style: normal; font-family: var(--sf-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--sf-accent); }
.eco-caption { max-width: 66ch; margin: 38px 0 0; padding-left: 18px; border-left: 2px solid var(--sf-accent); font-size: 15px; line-height: 1.7; color: #c0c8c4; }

/* 05 Approach — process rail */
.rail { list-style: none; margin: 54px 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0 clamp(14px, 1.6vw, 26px); }
.rail::before { content: ""; position: absolute; left: 22px; right: 0; top: 22px; height: 1px; background: linear-gradient(90deg, var(--sf-accent), rgba(var(--sf-accent-rgb), .12)); transform: scaleX(0); transform-origin: left center; transition: transform 1.3s cubic-bezier(.22,.61,.36,1); }
.reveal.in .rail::before { transform: scaleX(1); }
.rail-step { position: relative; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * .14s + .2s); }
.reveal.in .rail-step { opacity: 1; transform: none; }
.rail-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--sf-accent-rgb), .6); background: #05090a; box-shadow: 0 0 24px rgba(var(--sf-accent-rgb), .2); }
.rail-dot b { font-family: var(--sf-mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; color: var(--sf-accent); }
.rail-step h3 { font-family: var(--sf-serif); font-size: 24px; font-weight: 400; letter-spacing: -.02em; margin: 22px 0 8px; color: #fff; }
.rail-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #a9b1ad; }

/* 06 FAQ */
.faq-list-wrap { margin-top: 36px; max-width: 920px; }
.faq-item { border-top: 1px solid var(--sf-line); }
.faq-item:last-child { border-bottom: 1px solid var(--sf-line); }
.faq-q { display: grid; grid-template-columns: 46px minmax(0, 1fr) 24px; align-items: center; gap: 4px; padding: 24px 0; cursor: pointer; }
.faq-q:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 4px; border-radius: 4px; }
.faq-n { font-family: var(--sf-mono); font-size: 10px; letter-spacing: .14em; color: var(--sf-accent); }
.faq-q h3 { font-family: var(--sf-serif); font-size: clamp(19px, 1.8vw, 24px); font-weight: 400; line-height: 1.3; letter-spacing: -.015em; margin: 0; color: #eef1ee; }
.plus { color: var(--sf-accent); font-size: 22px; text-align: right; transition: transform .3s ease; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a .item-copy { padding: 0 44px 26px 50px; font-size: 15.5px; line-height: 1.7; color: #b3bbb7; }
.faq-a .item-copy p { margin: 0 0 .8em; color: inherit; }
.faq-a .item-copy p:last-child { margin-bottom: 0; }

/* 07 CTA */
.cta-band { padding: 100px 0 150px; }
.cta-card { position: relative; overflow: hidden; padding: clamp(34px, 5.5vw, 76px); border-radius: 26px; border: 1px solid rgba(var(--sf-accent-rgb), .3); background: linear-gradient(135deg, rgba(var(--sf-accent-rgb), .14), rgba(5,10,12,.92) 58%); box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 60px rgba(var(--sf-accent-rgb), .08); }
.cta-card::before { content: ""; position: absolute; right: -12%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sf-accent-rgb), .28), transparent 68%); pointer-events: none; }
.cta-card > * { position: relative; }
.cta-card h2 { font-size: clamp(40px, 5vw, 74px); max-width: 12ch; margin-bottom: 24px; }
.cta-card .section-sub { max-width: 52ch; }

/* Responsive */
@media (max-width: 1150px) {
  .side-nav, .sf-edge-badge { display: none; }
  .wrap-wide { margin-left: 32px; margin-right: 32px; max-width: none; }
  .hero-inner { width: auto; max-width: 640px; margin-left: 32px; margin-right: 32px; }
  .scroll-cue { left: 32px; }
  .sf-static-showcase { opacity: .5; }
  .sf-static-showcase::before { background: rgba(3,4,4,.72); }
  .showcase-placeholder { justify-content: center; padding-right: 0; opacity: .6; }
  section { padding: 76px 0; }
  .chal { grid-template-columns: 1fr; gap: 30px; }
  .chal-head { position: static; }
  .chal-head h2 { max-width: 20ch; }
  /* process rail turns vertical */
  .rail { grid-template-columns: 1fr; margin-top: 40px; }
  .rail::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; background: linear-gradient(180deg, var(--sf-accent), rgba(var(--sf-accent-rgb), .12)); transform: scaleY(0); transform-origin: top center; }
  .reveal.in .rail::before { transform: scaleY(1); }
  .rail-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 22px; padding-bottom: 30px; }
  .rail-step:last-child { padding-bottom: 0; }
  .rail-dot { grid-row: 1 / 3; }
  .rail-step h3 { margin: 8px 0 6px; }
  .cta-band { padding-bottom: 110px; }
}
@media (max-width: 900px) {
  .eco { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .eco-lines { display: none; }
  .eco-hub { order: -1; width: min(220px, 60%); margin: 0 auto 26px; }
  .eco-col { gap: 12px; padding-left: 22px; margin-left: 10px; border-left: 1px solid rgba(var(--sf-accent-rgb), .35); }
  .eco-col--r { margin-top: 12px; }
  .eco-col--l::after { content: ""; position: absolute; left: -1px; bottom: -12px; width: 1px; height: 12px; background: rgba(var(--sf-accent-rgb), .35); }
  .eco-dot { display: none; }
  .eco-node { padding: 16px 18px 18px; }
  .eco-node::before { content: ""; position: absolute; left: -23px; top: 50%; width: 22px; height: 1px; background: rgba(var(--sf-accent-rgb), .35); }
}
@media (max-width: 640px) {
  .wrap-wide { margin-left: 20px; margin-right: 20px; }
  .hero-inner { margin-left: 20px; margin-right: 20px; }
  .scroll-cue { left: 20px; }
  h1 { font-size: clamp(32px, 9.4vw, 44px); }
  h2 { font-size: clamp(30px, 8.6vw, 40px); max-width: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn-primary { width: 100%; }
  .chal-row { grid-template-columns: 44px minmax(0, 1fr); padding: 26px 0 28px; }
  .svc-panel { padding: 24px 20px 26px; }
  .faq-q { grid-template-columns: 34px minmax(0, 1fr) 22px; padding: 20px 0; }
  .faq-a .item-copy { padding: 0 8px 22px 38px; font-size: 15px; }
  .cta-card { padding: 30px 22px 34px; border-radius: 20px; }
  .cta-card h2 { max-width: none; }
  .cta-card .btn-primary { width: 100%; }
  .aurora-blob { filter: blur(50px); opacity: .6; }
  .aurora-4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  h1 em, h2 em { animation: none; background-position: 35% 50%; }
  .ha-r3, .eco-hub-ring, .eco-line, .aurora-blob { animation: none !important; }
  .reveal, .stagger > *, .rail-step { opacity: 1; transform: none; transition: none; }
  .rail::before, .rail-dot, .eco-line { transition: none; }
  .rail::before, .reveal.in .rail::before { transform: none !important; }
  .eco-line { opacity: 1; }
  .btn-primary:hover { transform: none; }
  .svc.is-ready .svc-panel.is-active { animation: none; }
  .sf-sound-toggle { transition: none; }
}