/* FSN Solutions — shared site stylesheet
   Loaded by every page in pages/. Holds the reset, keyframes, and every
   component class reused across the nav, hero, cards, badges, footer,
   and CTA banner. */

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; color: #0E2740; background: #fff; }
a { text-decoration: none; color: inherit; }

/* ---------- Keyframes ---------- */

/* Hero background blobs — every product & page hero (.fsn-hero-blob1) */
@keyframes fsnBlob1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(50px,-36px) scale(1.18); }
}

/* Hero background blobs — every product & page hero (.fsn-hero-blob2) */
@keyframes fsnBlob2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-54px,34px) scale(1.12); }
}

/* Mockup card tilt/float — every product hero (.fsn-mock) */
@keyframes fsnFloatTilt {
  0%, 100% { transform: perspective(1500px) rotateY(-8deg) rotateX(3deg) translateY(0); }
  50%      { transform: perspective(1500px) rotateY(-8deg) rotateX(3deg) translateY(-14px); }
}

/* "Live" status dot pulse — every product hero (.fsn-mock-live-dot) */
@keyframes fsnBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

/* Bar chart growth — Prohori SOC and UEBA mockups (.fsn-mock-bars > div) */
@keyframes fsnBar {
  0%   { transform: scaleY(.25); }
  100% { transform: scaleY(1); }
}

/* Logo strip scroll — homepage only (pages/home.html) */
@keyframes fsnMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Radar sweep rotation — Scanner mockup (.fsn-mock-radar-sweep) */
@keyframes fsnRadarSweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Vertical scroll — Blacklight ticker feed mockup (.fsn-mock-ticker-track) */
@keyframes fsnTickerY {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Pulsing alert ring — Sunshine flagged endpoint (.fsn-mock-endpoint.is-flagged::after) */
@keyframes fsnRing {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* "Blocked" stamp pop-in — DLP mockup (.fsn-mock-stamp) */
@keyframes fsnStamp {
  0%, 60%   { opacity: 0; transform: scale(1.4) rotate(-8deg); }
  75%, 100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

/* Sovereign-enclave boundary glow — Prohori SOC deployment section (.fsn-boundary) */
@keyframes fsnBoundaryGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(46,120,172,0); }
  50%      { box-shadow: 0 0 34px rgba(46,120,172,.18); }
}

/* Data-flow dot travelling down the connector — Prohori SOC boundary diagram (.fsn-boundary-flow-dot) */
@keyframes fsnDataFlow {
  0%   { top: 0%;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ---------- Layout containers ---------- */
.fsn-section { max-width: 1240px; margin: 0 auto; padding: clamp(40px,4vw,64px) clamp(18px,3vw,32px) clamp(20px,2vw,30px); }
.fsn-section--wide { max-width: 1240px; margin: 0 auto; padding: clamp(48px,5vw,80px) clamp(18px,3vw,32px) clamp(40px,4vw,56px); }

/* ---------- Nav ---------- */
.fsn-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(15,40,68,.07); }
.fsn-nav-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px clamp(18px,3vw,32px); }
.fsn-nav-right { display: flex; align-items: center; gap: clamp(16px,2vw,30px); flex-wrap: wrap; }
.fsn-nav-links { display: flex; gap: clamp(16px,2vw,28px); font-size: 14.5px; font-weight: 600; color: #3A4A56; }
.fsn-nav-links a { transition: color .2s; }
.fsn-nav-links a:hover, .fsn-nav-links a.is-active { color: #2E78AC; }

/* ---------- Buttons ---------- */
.fsn-btn { font-size: 15px; font-weight: 700; padding: 16px 30px; border-radius: 12px; display: inline-block; transition: transform .2s, box-shadow .2s, border-color .2s; }
.fsn-btn-primary { color: #fff; background: linear-gradient(120deg,#2E78AC,#1E63A8); box-shadow: 0 14px 34px rgba(46,120,172,.42); }
.fsn-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(46,120,172,.55); }
.fsn-btn-secondary { color: #13324F; background: rgba(255,255,255,.7); border: 1px solid rgba(15,40,68,.12); }
.fsn-btn-secondary:hover { transform: translateY(-3px); border-color: #2E78AC; }
.fsn-btn-onDark { color: #0B3A66; background: #fff; }
.fsn-btn-onDark:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.3); }
.fsn-btn-sm { font-size: 14px; padding: 12px 22px; box-shadow: 0 8px 20px rgba(46,120,172,.32); }
.fsn-btn-sm:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(46,120,172,.5); }

/* ---------- Eyebrow labels & pills ---------- */
.fsn-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 2px; color: #2E78AC; text-transform: uppercase; }
.fsn-pill { display: inline-flex; align-items: center; gap: 9px; background: #EAF2FA; border-radius: 30px; padding: 7px 15px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 1.5px; color: #2E78AC; text-transform: uppercase; }
.fsn-breadcrumb { font-size: 13px; color: #8493A1; font-weight: 600; }
.fsn-breadcrumb a { color: #2E78AC; }
.fsn-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Icon badges ---------- */
.fsn-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 15px; color: #fff; box-shadow: 0 12px 26px rgba(46,120,172,.3); }
.fsn-badge svg { width: 55%; height: 55%; }
.fsn-badge--lg { width: 56px; height: 56px; }
.fsn-badge--md { width: 48px; height: 48px; border-radius: 13px; }
.fsn-badge--sm { width: 46px; height: 46px; border-radius: 12px; }
.fsn-badge--xs { width: 38px; height: 38px; border-radius: 10px; }

.fsn-badge--prohori { background: linear-gradient(135deg,#5FB0E8,#1E63A8); }
.fsn-badge--blacklight { background: linear-gradient(135deg,#1E63A8,#0B3A66); }
.fsn-badge--sunshine { background: linear-gradient(135deg,#5FB0E8,#2E78AC); }
.fsn-badge--scanner { background: linear-gradient(135deg,#2E78AC,#1E63A8); }
.fsn-badge--ueba { background: linear-gradient(135deg,#5FB0E8,#2E78AC); }
.fsn-badge--dlp { background: linear-gradient(135deg,#2E78AC,#1E63A8); }
.fsn-badge--mss { background: linear-gradient(135deg,#5FB0E8,#2E78AC); }
.fsn-badge--vapt { background: linear-gradient(135deg,#2E78AC,#1E63A8); }
.fsn-badge--redteam { background: linear-gradient(135deg,#1E63A8,#0B3A66); }
.fsn-badge--appsec { background: linear-gradient(135deg,#5FB0E8,#2E78AC); }
.fsn-badge--iso { background: linear-gradient(135deg,#2E78AC,#1E63A8); }
.fsn-badge--compliance { background: linear-gradient(135deg,#1E63A8,#0B3A66); }
.fsn-badge--forensics { background: linear-gradient(135deg,#5FB0E8,#2E78AC); }

/* ---------- Cards ---------- */
.fsn-card { background: #fff; border: 1px solid #E7EDF3; border-radius: 18px; padding: 30px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.fsn-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(11,40,72,.12); border-color: #CFE0EF; }
.fsn-feature-card { background: #F7FAFD; border: 1px solid #E7EDF3; border-radius: 16px; padding: 28px; }
.fsn-feature-card--lift { transition: transform .25s, box-shadow .25s; }
.fsn-feature-card--lift:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(11,40,72,.1); }

/* ---------- Ecosystem / explore links ---------- */
.fsn-explore-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E7EDF3; border-radius: 14px; padding: 16px 18px; transition: transform .2s, box-shadow .2s, border-color .2s; flex: 1 1 220px; min-width: 200px; }
.fsn-explore-item:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,40,72,.1); border-color: #CFE0EF; }

/* ---------- Problem-framing block ---------- */
.fsn-problem { background: #F7FAFD; border: 1px solid #E7EDF3; border-radius: 20px; padding: clamp(28px,3vw,40px); }

/* ---------- How-it-works steps ---------- */
.fsn-steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 24px; }
.fsn-step { position: relative; padding-left: 54px; }
.fsn-step-num { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#2E78AC,#1E63A8); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; }

/* ---------- Built-for chip row ---------- */
.fsn-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fsn-chip { font-size: 13.5px; font-weight: 600; background: #EAF2FA; color: #2E78AC; border-radius: 20px; padding: 9px 16px; }

/* ---------- Hero decoration & mock chrome ---------- */
.fsn-hero { position: relative; background: #F7FAFD; overflow: hidden; }

/* Floating background blob — animated by the fsnBlob1 keyframe above */
.fsn-hero-blob1 {
  position: absolute;
  top: -140px;
  left: -80px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(95,176,232,.5),transparent 65%);
  filter: blur(55px);
  animation: fsnBlob1 16s ease-in-out infinite;
  pointer-events: none;
}

/* Floating background blob — animated by the fsnBlob2 keyframe above */
.fsn-hero-blob2 {
  position: absolute;
  top: -60px;
  right: -100px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(46,120,172,.34),transparent 65%);
  filter: blur(60px);
  animation: fsnBlob2 18s ease-in-out infinite;
  pointer-events: none;
}

.fsn-hero-grid { position: absolute; inset: 0; background-image: radial-gradient(#9DB8CE 1px,transparent 1px); background-size: 36px 36px; opacity: .14; pointer-events: none; }

/* Mockup card — tilts and floats via the fsnFloatTilt keyframe above */
.fsn-mock {
  animation: fsnFloatTilt 9s ease-in-out infinite;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 44px 90px rgba(11,40,72,.26);
  border: 1px solid #E7EDF3;
  overflow: hidden;
}
.fsn-mock-topbar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid rgba(15,40,68,.07); }
.fsn-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: #D8E0E8; }
.fsn-mock-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #7C8B99; margin-left: 8px; letter-spacing: 1px; }
.fsn-mock-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #1F8A5B; }

/* "Live" pulsing dot — animated by the fsnBlink keyframe above */
.fsn-mock-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1F8A5B;
  animation: fsnBlink 1.5s infinite;
}
.fsn-mock-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fsn-mock-stat { background: #fff; border: 1px solid #E7EDF3; border-radius: 12px; padding: 14px; }
.fsn-mock-stat--accent { background: linear-gradient(135deg,#2E78AC,#1E63A8); border: none; color: #fff; }
.fsn-mock-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: #8493A1; }
.fsn-mock-stat--accent .fsn-mock-stat-label { color: rgba(255,255,255,.8); }
.fsn-mock-stat-value { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700; margin-top: 4px; color: #0B3A66; }
.fsn-mock-stat--accent .fsn-mock-stat-value { color: #fff; }
.fsn-mock-panel { background: #fff; border: 1px solid #E7EDF3; border-radius: 12px; padding: 14px; }
.fsn-mock-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.fsn-mock-tag { font-size: 11px; background: #EAF2FA; color: #2E78AC; border-radius: 20px; padding: 5px 11px; font-weight: 700; }

/* Bar chart, used by Prohori SOC and UEBA mockups */
.fsn-mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }

/* Each bar grows via the fsnBar keyframe above; .is-flagged just recolors it */
.fsn-mock-bars > div {
  flex: 1;
  background: linear-gradient(#5FB0E8,#2E78AC);
  border-radius: 4px;
  transform-origin: bottom;
  animation: fsnBar 1.8s ease-in-out infinite alternate;
}
.fsn-mock-bars > div.is-flagged { background: linear-gradient(#F0A24E,#C9772C); }

/* Ticker feed, used by the Blacklight mockup */
.fsn-mock-ticker { height: 96px; overflow: hidden; position: relative; }

/* The row list scrolls upward via the fsnTickerY keyframe above */
.fsn-mock-ticker-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fsnTickerY 9s linear infinite;
}
.fsn-mock-ticker-row { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #51616D; background: #F7FAFD; border-radius: 8px; padding: 8px 10px; white-space: nowrap; }

/* Endpoint grid, used by the Sunshine mockup */
.fsn-mock-endpoints { display: grid; grid-template-columns: repeat(8,1fr); gap: 8px; }
.fsn-mock-endpoint { position: relative; width: 100%; padding-top: 100%; border-radius: 50%; background: #CFE0EF; }
.fsn-mock-endpoint.is-flagged { background: #E4574A; }

/* Pulsing alert ring on a flagged endpoint — animated by the fsnRing keyframe above */
.fsn-mock-endpoint.is-flagged::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #E4574A;
  animation: fsnRing 1.8s ease-out infinite;
}

/* Radar sweep, used by the Scanner mockup */
.fsn-mock-radar { position: relative; width: 100%; aspect-ratio: 1; max-width: 150px; margin: 0 auto; border-radius: 50%; background: repeating-radial-gradient(circle,#EAF2FA 0,#EAF2FA 1px,transparent 1px,transparent 20%); }

/* Rotating sweep overlay — animated by the fsnRadarSweep keyframe above */
.fsn-mock-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(46,120,172,.55), transparent 35%);
  animation: fsnRadarSweep 3.4s linear infinite;
}
.fsn-mock-radar-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #1F8A5B; }

/* File-row list with a block stamp, used by the DLP mockup */
.fsn-mock-filerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #3A4A56; background: #F7FAFD; border-radius: 8px; padding: 9px 12px; position: relative; overflow: hidden; }

/* "Blocked" stamp pop-in — animated by the fsnStamp keyframe above */
.fsn-mock-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #E4574A;
  border: 1.5px solid #E4574A;
  border-radius: 6px;
  padding: 2px 7px;
  animation: fsnStamp 3s ease-in-out infinite;
}

/* ---------- CTA banner ---------- */
.fsn-cta-banner { position: relative; background: linear-gradient(130deg,#0A3158,#1E63A8); border-radius: 24px; overflow: hidden; padding: clamp(36px,4vw,60px); }
.fsn-cta-banner::before { content: ''; position: absolute; top: -120px; right: -60px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle,rgba(124,196,255,.4),transparent 65%); filter: blur(50px); pointer-events: none; }
.fsn-cta-banner-inner { position: relative; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; }

/* ---------- Scroll reveal ---------- */
/* Every element carrying a data-reveal attribute starts hidden/offset, then
   assets/js/site.js adds .is-visible once it scrolls into view. Using the
   [data-reveal] attribute selector here means pages don't need an extra
   class added to every single reveal element, the attribute they already
   have for the JS hook is enough. Stagger the animation between nearby
   elements with an inline style="transition-delay:.16s" on individual
   elements rather than adding a modifier class per delay value.
   Cards that already have their own hover transition (.fsn-card,
   .fsn-feature-card--lift) get a compound selector below so the reveal fade
   doesn't slow down their hover animation. */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal].fsn-card { transition: transform .25s, box-shadow .25s, border-color .25s, opacity .7s ease; }
[data-reveal].fsn-feature-card--lift { transition: transform .25s, box-shadow .25s, opacity .7s ease; }
[data-reveal].fsn-explore-card { transition: transform .25s, box-shadow .25s, border-color .25s, opacity .7s ease; }

/* ---------- Nav & footer boilerplate ---------- */
/* Repeated once per page across every page in pages/. */
.fsn-nav-logo { height: 46px; width: auto; display: block; }
.fsn-footer-logo { height: 42px; width: auto; display: block; }
.fsn-footer-tagline { font-size: 14px; line-height: 1.6; color: #92AAC2; margin-top: 18px; max-width: 340px; }
.fsn-footer-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fsn-footer-badge { font-size: 11px; color: #CFE0EF; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 5px 12px; }
.fsn-footer-offices { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: #92AAC2; max-width: 230px; }

/* ---------- Feature card text ---------- */
/* The title/description pair inside .fsn-feature-card, repeated across the
   about, home, and product pages. */
.fsn-feature-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 19px; margin-top: 18px; }
.fsn-feature-desc { font-size: 14.5px; line-height: 1.6; color: #51616D; margin-top: 8px; }

/* ---------- Product explore links ---------- */
/* The small ecosystem/"explore" link list on each product page. */
.fsn-explore-item-title { display: block; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: #0E2740; }
.fsn-explore-item-label { display: block; font-size: 12.5px; color: #8493A1; margin-top: 1px; }

/* ---------- Section titles ---------- */
/* The <h2> that follows .fsn-eyebrow on product pages (e.g. "Key
   Capabilities", "How It Works"). */
.fsn-section-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(24px,2.8vw,34px); line-height: 1.12; letter-spacing: -1px; margin-top: 12px; }


/* ---------- CTA banner text ---------- */
/* Heading/paragraph inside .fsn-cta-banner on the product-page CTA sections. */
.fsn-cta-title { font-family: 'Sora', sans-serif; font-weight: 700; color: #fff; font-size: clamp(26px,3vw,38px); line-height: 1.12; letter-spacing: -1px; }
.fsn-cta-desc { font-size: 16px; line-height: 1.6; color: #C8DCEE; margin-top: 14px; }

/* ---------- Contact-info chips ---------- */
/* The CALL/EMAIL/HOURS (or PHONE/EMAIL/HOURS) row used on the homepage CTA
   banner (--dark, on a dark background) and the contact page hero (--light,
   on a white card). */
.fsn-contact-chip { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 14px 16px; }
.fsn-contact-chip--dark { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.fsn-contact-chip--light { background: #fff; border: 1px solid #E7EDF3; gap: 14px; padding: 16px 18px; }
.fsn-contact-chip-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; color: #7FB0D6; width: 54px; }
.fsn-contact-chip--light .fsn-contact-chip-label { color: #2E78AC; width: 56px; }
.fsn-contact-chip-value { color: #fff; font-weight: 600; font-size: 15px; }
.fsn-contact-chip--light .fsn-contact-chip-value { color: inherit; font-size: 15.5px; }

/* ---------- Product card titles ---------- */
/* products.html's 5 flagship product card titles. */
.fsn-product-card-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 27px; margin-top: 20px; line-height: 1.1; letter-spacing: -.6px; color: #0E2740; }

/* ---------- National boundary diagram (Prohori SOC deployment section) ---------- */
.fsn-boundary { position: relative; border: 1.5px dashed #A9C3DA; border-radius: 20px; padding: 28px; margin-top: 32px; animation: fsnBoundaryGlow 4.5s ease-in-out infinite; }
.fsn-boundary-label { position: absolute; top: -12px; left: 28px; background: #F7FAFD; padding: 0 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #2E78AC; }
.fsn-boundary-inner { background: #fff; border: 1px solid #CFE0EF; border-radius: 16px; padding: 24px; }
.fsn-boundary-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fsn-boundary-header-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; color: #2E78AC; text-transform: uppercase; }
.fsn-boundary-badge-safe { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #8493A1; }
.fsn-boundary-badge-safe-dot { width: 7px; height: 7px; border-radius: 50%; background: #8493A1; }
.fsn-boundary-connector { position: relative; width: 2px; height: 60px; margin: 20px auto; background: linear-gradient(#CFE0EF,#2E78AC); }

/* One of three dots animated by the fsnDataFlow keyframe above, staggered via inline animation-delay */
.fsn-boundary-flow-dot { position: absolute; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #2E78AC; animation: fsnDataFlow 2s linear infinite; }
.fsn-boundary-footer { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(120deg,#0A3158,#1E63A8); border-radius: 12px; padding: 14px; }
.fsn-boundary-footer-text { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1.5px; color: #fff; text-transform: uppercase; }

/* ---------- Comparison table (Prohori SOC vs. competitors) ---------- */
.fsn-compare-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid #E7EDF3; box-shadow: 0 24px 60px rgba(11,40,72,.08); }
.fsn-compare-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13.5px; }
.fsn-compare-table th, .fsn-compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #E7EDF3; }
.fsn-compare-table thead th { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: #3A4A56; background: #fff; text-align: center; border-bottom: 2px solid #E7EDF3; }
.fsn-compare-th--fsn { background: linear-gradient(160deg,#0A3158,#1E63A8); color: #fff; border-bottom: 2px solid #1E63A8; }
.fsn-compare-table tbody td { text-align: center; }
.fsn-compare-table tbody tr:nth-child(even) td:not(.fsn-compare-td--fsn) { background: #F7FAFD; }
.fsn-compare-table tbody tr:nth-child(odd) td:not(.fsn-compare-td--fsn) { background: #fff; }
.fsn-compare-td--fsn { background: #EAF2FA; }
.fsn-compare-row-label { text-align: left; font-weight: 600; color: #3A4A56; white-space: normal; }
.fsn-compare-pill { display: inline-block; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.fsn-compare-pill--yes { color: #1F8A5B; background: #E9F7EF; }
.fsn-compare-pill--partial { color: #B07B1F; background: #FBF1DE; }
.fsn-compare-pill--no { color: #C0392B; background: #FBEAEA; }

/* ---------- Explore-product cards, horizontal scroll (product-page ecosystem strip) ---------- */
.fsn-explore-row { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.fsn-explore-card { flex: 0 0 270px; scroll-snap-align: start; background: #fff; border: 1px solid #E7EDF3; border-radius: 18px; padding: 26px; box-shadow: 0 10px 26px rgba(11,40,72,.05); transition: transform .25s, box-shadow .25s, border-color .25s; }
.fsn-explore-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(11,40,72,.1); border-color: #CFE0EF; }
.fsn-explore-card-desc { font-size: 13.5px; line-height: 1.55; color: #51616D; margin-top: 6px; }
.fsn-explore-card-link { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: #2E78AC; }

/* ---------- Footer ---------- */
.fsn-footer { background: #081F38; color: #fff; }
.fsn-footer-main { max-width: 1240px; margin: 0 auto; padding: clamp(40px,4vw,64px) clamp(18px,3vw,32px); display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.fsn-footer-brand { flex: 1 1 300px; min-width: 260px; }
.fsn-footer-cols { display: flex; gap: clamp(32px,5vw,72px); flex-wrap: wrap; }
.fsn-footer-heading { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; color: #5E7B97; text-transform: uppercase; }
.fsn-footer-links { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; font-size: 14.5px; font-weight: 500; color: #C2D3E4; }
.fsn-footer-links a:hover { color: #fff; }
.fsn-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.fsn-footer-bottom-inner { max-width: 1240px; margin: 0 auto; padding: 18px clamp(18px,3vw,32px); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 13px; color: #6E89A3; }