/*
 * softedge-overrides.css — defensive responsive layout fixes.
 *
 * Loaded AFTER the Webflow CSS bundles so these rules win on cascade.
 * The Webflow export has gaps in its responsive breakpoints (992–1279px
 * and 1280–1439px) where some sections lose horizontal padding. These
 * rules guarantee a minimum gutter at every viewport width and prevent
 * any single oversized element from triggering horizontal page scroll.
 */

/* ── 1) Targeted overflow guards (DO NOT touch html/body/.page-wrapper) ──
   Earlier versions applied `overflow-x: hidden` to html/body and
   `overflow-x: clip` to .page-wrapper. That broke Webflow IX2
   scroll-triggered animations (the security cards on the homepage
   never animated in). IX2 uses scroll math against the documentElement
   and IntersectionObserver that gets miscalculated when these elements
   have any overflow value other than `visible`.

   Instead, we clip overflow ONLY on the specific elements that actually
   bleed past the viewport at intermediate widths — sliders, hero media,
   and any explicitly opt-in wrappers. */

/* ── 2) Guarantee a horizontal gutter on every section wrapper ───────── */
/* Variables let any section override per-context if needed.            */
:root {
  --se-gutter-mobile: 16px;
  --se-gutter-tablet: 24px;
  --se-gutter-desktop: 40px;
  --se-gutter-wide: 64px;
}

/* Webflow's container variants — apply gutters when their max-width
   doesn't constrain enough on its own. */
.container,
.w-container,
.w-layout-blockcontainer,
.section .w-layout-blockcontainer,
section > .container,
section > .w-container,
section > .w-layout-blockcontainer {
  padding-left: var(--se-gutter-mobile);
  padding-right: var(--se-gutter-mobile);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .container,
  .w-container,
  .w-layout-blockcontainer,
  .section .w-layout-blockcontainer,
  section > .container,
  section > .w-container,
  section > .w-layout-blockcontainer {
    padding-left: var(--se-gutter-tablet);
    padding-right: var(--se-gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .container,
  .w-container,
  .w-layout-blockcontainer,
  .section .w-layout-blockcontainer,
  section > .container,
  section > .w-container,
  section > .w-layout-blockcontainer {
    padding-left: var(--se-gutter-desktop);
    padding-right: var(--se-gutter-desktop);
  }
}

@media (min-width: 1440px) {
  .container,
  .w-container,
  .w-layout-blockcontainer,
  .section .w-layout-blockcontainer,
  section > .container,
  section > .w-container,
  section > .w-layout-blockcontainer {
    padding-left: var(--se-gutter-wide);
    padding-right: var(--se-gutter-wide);
  }
}

/* ── 3) Navbar alignment
       Webflow ships `.navbar { padding-left: 20px }` and `.nav-wrapper`
       lives inside `.container-default`. Earlier this file ALSO added
       a responsive gutter to `.navbar.w-nav` and `.nav-wrapper`, which
       stacked with the inner container's gutter — nav content ended
       up ~64px further inset than section content below it (visible
       on /contact: SOFTEDGE logo + Contact button drifted right of
       the section heading and form).

       Single source of truth: the inner `.container-default` provides
       the horizontal gutter (handled by rule §2 above). Zero out the
       navbar's own padding so it doesn't add a second layer. */
.navbar.w-nav {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Keep nav labels on a single line at every desktop width. Without this,
   the flex children inside .nav-menu shrink enough that multi-word labels
   ("Ai Hub", "Case Studies", "About us") wrap onto two lines at certain
   intermediate viewport widths before the mobile breakpoint kicks in. */
.navbar.w-nav .nav-link,
.navbar.w-nav .nav-link.dropdown,
.navbar.w-nav .dropdown-toggle,
.navbar.w-nav .w-dropdown-toggle > div {
  white-space: nowrap;
}

/* ── 4) Prevent any single element from overflowing its parent ───────── */
img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Webflow slider/carousel components frequently sit with absolute-positioned
   inner stages that can poke past the viewport. Clip at the section level. */
.w-slider,
.w-slider-mask,
.swiper,
.slider,
section.hero,
section.section {
  max-width: 100vw;
  overflow-x: clip;
}

/* Hero / large-image sections with full-bleed mockups */
.hero-image-wrapper,
.case-study-screenshot,
.hero img,
.hero video {
  max-width: 100%;
}

/* ── 5) Form input width sanity ──────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 6) Tables (admin-style and any rich-text tables) ────────────────── */
.rich-text table,
.prose table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* ── 6a) Full-bleed homepage carousel slides ─────────────────────────────
   The homepage's case-study slider was originally a two-column layout
   (text left, image right). For the new design each slide is just a
   full-width image (the image carries its own headline + content).
   These rules apply only to slides marked with `.se-carousel-slide`. */
.slide-study:has(.se-carousel-slide) {
  background: transparent;
}
.se-carousel-slide {
  display: block;
  width: 100%;
  text-decoration: none;
  line-height: 0;
}
.se-carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
}
/* The Webflow slider gives slides a fixed height by default. Allow the
   slide to take the image's natural height so nothing is cropped. */
.slider-case-study,
.slider-case-study .mask-slider,
.slider-case-study .slide-study {
  height: auto !important;
  min-height: 0 !important;
}
/* Drop the parent section's solid blue background when the slider uses
   the full-bleed image layout — the image carries its own background. */
.section-case-study:has(.se-carousel-slide),
.section-case-study:has(.se-rich-slide) {
  background-color: transparent !important;
}

/* ── Mobile homepage case-study swap ─────────────────────────────────────
   On phones the carousel is hidden entirely. Instead we show a single
   tall Citi card so the page stays scannable on a small screen. */
.se-mobile-case-card {
  display: none;
  text-decoration: none;
  line-height: 0;
}
.se-mobile-case-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
@media (max-width: 767px) {
  .se-mobile-case-card { display: block; }
  .section-case-study .slider-wrapper { display: none !important; }
}

/* ── 6b) Hybrid carousel slide — HTML text + cropped UI mockup ─────────
   The Audit Hero slide is the proof-of-concept for splitting marketing
   copy out of the rendered image so headlines, body, and stats become
   crawlable HTML. Left column: real text. Right column: image of the
   product mockups only. Brand mark drawn as inline SVG. */
.se-rich-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
  width: 100%;
  padding: 64px 56px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 50%, rgba(120, 100, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 25%, rgba(80, 130, 200, 0.10) 0%, transparent 50%),
    linear-gradient(135deg, #050a18 0%, #0a1326 50%, #050a18 100%);
}
.se-rich-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.se-rich-slide-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.se-rich-eyebrow {
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8A6CFF;
}
.se-rich-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.se-rich-brand-mark { display: block; flex: 0 0 auto; }
.se-rich-brand-name {
  font-family: "Monument Extended", sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #fff;
  font-weight: 400;
}
.se-rich-headline {
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.se-rich-headline-accent {
  background: linear-gradient(135deg, #6FA9FF 0%, #8A6CFF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.se-rich-body {
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 540px;
}
.se-rich-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.se-rich-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.se-rich-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(111, 169, 255, 0.14), rgba(138, 108, 255, 0.14));
  border: 1px solid rgba(138, 108, 255, 0.25);
  color: #8A6CFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.se-rich-stat-value {
  font-family: "Monument Extended", sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #8A6CFF;
  line-height: 1;
  letter-spacing: 0.01em;
}
.se-rich-stat-label {
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}
.se-rich-slide-media {
  min-width: 0;
  position: relative;
}
.se-rich-slide-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
@media (max-width: 991px) {
  .se-rich-slide {
    grid-template-columns: 1fr;
    padding: 44px 36px;
    gap: 36px;
  }
  .se-rich-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
  .se-rich-slide { padding: 32px 22px; border-radius: 18px; }
  .se-rich-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .se-rich-stat-icon { width: 38px; height: 38px; margin-bottom: 8px; }
  .se-rich-stat-value { font-size: 22px; }
}

/* ── 7) AI Hub specifics ─────────────────────────────────────────────────
   The AI Hub uses a different Webflow template that sets
   `font-size: 1vw` on every section. The page-specific containers
   (`.are-container-1`, `.opm-container-1`, `.jua-container-1`, etc.)
   use `max-width: 100em` — since em cascades from --anchor (a vw value),
   the container's max-width itself scales with viewport. At 1440-1920px
   widths this makes the container ~1150-1230px wide, while the rest of
   the site's `.container-default` runs 1400-2160px. Result: AI Hub
   looks pinched with much wider side gutters than every other page.

   Fix: override the AI Hub containers' max-width to follow the same
   responsive pattern as `.container-default`. Also override the
   `.w-layout-blockcontainer` padding rule (section 2) so it doesn't
   add additional inset on top. */

.are-container-1,
.opm-container-1,
.jua-container-1,
.fer-container-1,
.fam-container-1,
.bot-container-1,
.pol-container-1 {
  max-width: 1280px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 1440px) {
  .are-container-1,
  .opm-container-1,
  .jua-container-1,
  .fer-container-1,
  .fam-container-1,
  .bot-container-1,
  .pol-container-1 {
    max-width: 1400px !important;
  }
}

@media (min-width: 1920px) {
  .are-container-1,
  .opm-container-1,
  .jua-container-1,
  .fer-container-1,
  .fam-container-1,
  .bot-container-1,
  .pol-container-1 {
    max-width: 2160px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* Safety: allow inner grids to shrink and stay within the container. */
.opm-grid-1,
.jua-grid-1,
.fam-grid-1,
.bot-grid-1,
.pol-grid-1 {
  max-width: 100%;
  box-sizing: border-box;
}
.opm-grid-1 > *,
.jua-grid-1 > *,
.fam-grid-1 > *,
.bot-grid-1 > *,
.pol-grid-1 > * {
  min-width: 0;
}

/* Mobile: drop the AI Hub card grids to one column */
@media (max-width: 767px) {
  .opm-grid-1,
  .jua-grid-1,
  .fam-grid-1,
  .bot-grid-1,
  .pol-grid-1 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile tap-target fixes (≤900px)
   ───────────────────────────────────────────────────────────────────────
   WCAG 2.1 AA recommends a 44×44 px minimum for interactive controls.
   Several Webflow defaults fall below that:
     - Footer social icons:  24×24 (icon-sized link, no padding)
     - Form radio buttons:   18×18 (custom Webflow radio)
     - Footer text links:    ~16-18 px tall (line-height only)
   Scope to phones/tablets so desktop precision-mouse layouts are
   untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Footer social icons — extend the tap area to 44×44 without changing
     visual layout. Padding pads outward; negative margin pulls the
     anchor's outer box back so the row spacing doesn't shift. Adjacent
     tap zones may slightly overlap, which is fine per Apple HIG. */
  .social-link.w-inline-block {
    padding: 10px;
    margin: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
  }

  /* Footer text links — taller, more thumb-friendly tap zone */
  .footer-link {
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-block;
    line-height: 1.35;
  }

  /* Form radio buttons — keep the visual glyph compact but make the
     <label> wrapper a comfortably tappable 44-px-tall zone (visible
     glyph + label text both within it). Applies to /contact, the
     LetsConnect blog component, and any other Webflow form using
     .radio-button-field.w-radio. */
  .radio-button-field.w-radio {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    box-sizing: border-box;
  }
  .radio-button.w-radio-input {
    width: 22px;
    height: 22px;
  }
  .radio-label.w-form-label {
    line-height: 1.25;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Featured Case Study — homepage Citigroup flagship section
   ───────────────────────────────────────────────────────────────────────
   v2 (2026-05-14): stronger client branding (Citi mark + arc), enterprise
   pill, intentionally stacked headline, larger device that overflows the
   container on desktop, animated SVG light curves + slow particles,
   brighter glass feature cards with hover glow.

   Atmosphere is entirely CSS / inline SVG. No static banner image.
   ═══════════════════════════════════════════════════════════════════════ */

.se-featured-cs {
  position: relative;
  overflow: hidden;
  padding: 180px 0 160px;
  background: linear-gradient(180deg, #050a18 0%, #0a1530 50%, #050a18 100%);
  isolation: isolate;
}

/* Slow-drifting glow trails — life without distraction. */
.se-featured-cs__bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.se-featured-cs__trail {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
  animation: se-fcs-drift 22s ease-in-out infinite alternate;
}
.se-featured-cs__trail--blue {
  width: 70vw; height: 55vw;
  top: -20%; right: -20%;
  background: radial-gradient(circle, rgba(23, 66, 142, 0.55) 0%, transparent 65%);
}
.se-featured-cs__trail--orange {
  width: 52vw; height: 42vw;
  bottom: -12%; left: -12%;
  background: radial-gradient(circle, rgba(254, 116, 0, 0.22) 0%, transparent 65%);
  animation-delay: -10s;
  animation-duration: 28s;
}
@keyframes se-fcs-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(20px, -30px) scale(1.04); }
  100% { transform: translate(-15px, 25px) scale(0.98); }
}

/* Faint particles — eight slowly rising dots, distributed across the bg */
.se-featured-cs__particles {
  position: absolute; inset: 0;
  pointer-events: none;
}
.se-featured-cs__particles span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(111, 169, 255, 0.6);
  box-shadow: 0 0 6px rgba(111, 169, 255, 0.35);
  animation: se-fcs-particle 18s linear infinite;
  opacity: 0;
}
.se-featured-cs__particles span:nth-child(1) { left: 8%;  bottom: -10px; animation-delay: 0s;   }
.se-featured-cs__particles span:nth-child(2) { left: 22%; bottom: -10px; animation-delay: -4s;  background: rgba(254, 116, 0, 0.55); box-shadow: 0 0 6px rgba(254, 116, 0, 0.3); }
.se-featured-cs__particles span:nth-child(3) { left: 38%; bottom: -10px; animation-delay: -9s;  }
.se-featured-cs__particles span:nth-child(4) { left: 54%; bottom: -10px; animation-delay: -2s;  }
.se-featured-cs__particles span:nth-child(5) { left: 67%; bottom: -10px; animation-delay: -12s; background: rgba(254, 116, 0, 0.55); box-shadow: 0 0 6px rgba(254, 116, 0, 0.3); }
.se-featured-cs__particles span:nth-child(6) { left: 79%; bottom: -10px; animation-delay: -6s;  }
.se-featured-cs__particles span:nth-child(7) { left: 88%; bottom: -10px; animation-delay: -15s; }
.se-featured-cs__particles span:nth-child(8) { left: 14%; bottom: -10px; animation-delay: -16s; }
@keyframes se-fcs-particle {
  0%   { transform: translateY(0);      opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateY(-110vh); opacity: 0; }
}

.se-featured-cs__container {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 1280px) {
  .se-featured-cs__container { padding: 0 40px; }
}

.se-featured-cs__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
  gap: 96px;
  align-items: center;
}

/* ── Left: editorial copy ──────────────────────────────────────────────── */
.se-featured-cs__copy { color: #fff; min-width: 0; }

/* Each pill/inline element below is set to `display: flex; width: fit-content`
   so it sits on its own line and hugs its content. Previously they used
   `display: inline-flex` which made them flow horizontally side-by-side
   (eyebrow + brand mark + badge all collapsed onto one row). */

.se-featured-cs__eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FE7400;
  margin-bottom: 24px;
}
.se-featured-cs__eyebrow-line {
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, #FE7400);
}

/* Citi brand mark: SVG signature arc + dot above a clean wordmark.
   Stylized vector identity for case-study attribution. */
.se-featured-cs__brand {
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 28px;
}
.se-featured-cs__brand-arc {
  width: 96px; height: 18px;
  margin-bottom: 2px;
  margin-left: -2px;
}
.se-featured-cs__brand-text {
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.05em;
  line-height: 0.85;
}

.se-featured-cs__badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
  padding: 7px 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(23, 66, 142, 0.22) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(111, 169, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.se-featured-cs__badge svg {
  width: 14px; height: 14px;
  color: #6FA9FF;
}

.se-featured-cs__title {
  font-family: "Monument Extended", sans-serif;
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 28px;
}

.se-featured-cs__lede {
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
  margin: 0 0 40px;
  max-width: 50ch;
}

.se-featured-cs__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: #FE7400;
  color: #fff;
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow:
    0 14px 36px -10px rgba(254, 116, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
  overflow: hidden;
  isolation: isolate;
}
.se-featured-cs__cta-glow {
  position: absolute; inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.se-featured-cs__cta:hover {
  background: #ff8419;
  transform: translateY(-2px);
  box-shadow:
    0 24px 50px -10px rgba(254, 116, 0, 0.62),
    0 1px 0 rgba(255, 255, 255, 0.16) inset;
}
.se-featured-cs__cta:hover .se-featured-cs__cta-glow { opacity: 0.5; }
.se-featured-cs__cta svg { transition: transform 0.25s ease; }
.se-featured-cs__cta:hover svg { transform: translateX(4px); }

/* ── Right: product visual ─────────────────────────────────────────────── */
.se-featured-cs__visual {
  position: relative;
  min-height: 380px;
  isolation: isolate;
}

/* Slight overflow past the container — adds cinematic horizontal weight. */
@media (min-width: 1025px) {
  .se-featured-cs__visual {
    margin-right: -56px;
    transform: scale(1.06);
    transform-origin: center left;
  }
}

.se-featured-cs__curves {
  position: absolute; inset: -10% -20% -10% -10%;
  width: auto; height: 120%;
  z-index: 0;
  opacity: 0.85;
}
.se-featured-cs__curve {
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
  animation: se-fcs-curve-flow 14s ease-in-out infinite;
}
.se-featured-cs__curve--1 { animation-delay: -2s; }
.se-featured-cs__curve--2 { animation-delay: -7s; animation-duration: 18s; }
.se-featured-cs__curve--3 { animation-delay: -4s; animation-duration: 22s; }
@keyframes se-fcs-curve-flow {
  0%, 100% { stroke-dashoffset: 0;    opacity: 0.4; }
  50%      { stroke-dashoffset: -300; opacity: 0.9; }
}

.se-featured-cs__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: 0;
}
.se-featured-cs__glow--blue {
  width: 75%; height: 80%;
  top: 5%; right: -15%;
  background: radial-gradient(circle, rgba(23, 66, 142, 0.55) 0%, transparent 65%);
}
.se-featured-cs__glow--orange {
  width: 48%; height: 52%;
  bottom: 0; left: -10%;
  background: radial-gradient(circle, rgba(254, 116, 0, 0.32) 0%, transparent 70%);
}

.se-featured-cs__device {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 40px 80px -24px rgba(0, 0, 0, 0.70),
    0 24px 56px -16px rgba(23, 66, 142, 0.38);
  overflow: hidden;
  animation: se-fcs-float 7s ease-in-out infinite;
}
.se-featured-cs__device-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.se-featured-cs__chrome-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.se-featured-cs__chrome-dot:nth-child(1) { background: rgba(255, 95, 87, 0.65); }
.se-featured-cs__chrome-dot:nth-child(2) { background: rgba(255, 189, 46, 0.65); }
.se-featured-cs__chrome-dot:nth-child(3) { background: rgba(40, 200, 65, 0.65); }
.se-featured-cs__chrome-url {
  margin-left: 14px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
.se-featured-cs__screenshot {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes se-fcs-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Floating glass accents around the device */
.se-featured-cs__float {
  position: absolute;
  z-index: 2;
  width: 48px; height: 48px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.se-featured-cs__float svg { width: 100%; height: 100%; }
.se-featured-cs__float--shield {
  top: -22px; left: -18px;
  color: #FE7400;
  animation: se-fcs-float-a 8s ease-in-out infinite;
}
.se-featured-cs__float--cloud {
  top: 38%; right: -26px;
  color: #6FA9FF;
  animation: se-fcs-float-b 10s ease-in-out infinite;
}
.se-featured-cs__float--graph {
  bottom: -22px; right: 26%;
  color: rgba(255, 255, 255, 0.9);
  animation: se-fcs-float-c 9s ease-in-out infinite;
}
@keyframes se-fcs-float-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes se-fcs-float-b { 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-6px) translateX(-4px)} }
@keyframes se-fcs-float-c { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ── Feature cards (brighter glassmorphism) ───────────────────────────── */
.se-featured-cs__features {
  list-style: none;
  margin: 112px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.se-featured-cs__feature {
  position: relative;
  padding: 30px 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
  isolation: isolate;
}
.se-featured-cs__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(23, 66, 142, 0.18) 0%, transparent 70%);
  opacity: 0.6;
  transition: opacity 0.35s ease;
}
.se-featured-cs__feature:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 169, 255, 0.30);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: 0 24px 48px -16px rgba(23, 66, 142, 0.45);
}
.se-featured-cs__feature:hover::before { opacity: 1; }

.se-featured-cs__feature-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23, 66, 142, 0.55) 0%, rgba(23, 66, 142, 0.12) 100%);
  border: 1px solid rgba(111, 169, 255, 0.40);
  color: #8FBEFF;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 6px 16px -6px rgba(23, 66, 142, 0.5);
  transition: color 0.3s ease, box-shadow 0.3s ease;
}
.se-featured-cs__feature:hover .se-featured-cs__feature-icon {
  color: #B3D2FF;
  box-shadow: 0 10px 24px -6px rgba(23, 66, 142, 0.7);
}
.se-featured-cs__feature-icon svg { width: 22px; height: 22px; }
.se-featured-cs__feature h3 {
  font-family: "Monument Extended", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fff;
}
.se-featured-cs__feature p {
  font-family: "Mundial", "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.70);
  margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .se-featured-cs { padding: 120px 0 100px; }
  .se-featured-cs__layout { grid-template-columns: 1fr; gap: 64px; }
  .se-featured-cs__features { margin-top: 80px; }
  .se-featured-cs__visual { transform: none; margin-right: 0; }
}
@media (max-width: 768px) {
  .se-featured-cs { padding: 80px 0 72px; }
  .se-featured-cs__container { padding: 0 20px; }
  .se-featured-cs__brand-text { font-size: 32px; }
  .se-featured-cs__title { font-size: clamp(26px, 7vw, 36px); }
  .se-featured-cs__lede { font-size: 16px; max-width: none; }
  .se-featured-cs__visual { min-height: 0; }
  .se-featured-cs__chrome-url { display: none; }
  .se-featured-cs__float { width: 38px; height: 38px; padding: 9px; }
  .se-featured-cs__float--shield { top: -14px; left: -10px; }
  .se-featured-cs__float--cloud { right: -12px; }
  .se-featured-cs__float--graph { bottom: -12px; right: 22%; }
  .se-featured-cs__features {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 64px;
  }
}

/* ── Reduced-motion users ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .se-featured-cs__trail,
  .se-featured-cs__particles span,
  .se-featured-cs__curve,
  .se-featured-cs__device,
  .se-featured-cs__float {
    animation: none;
  }
  .se-featured-cs__particles span { opacity: 0.6; }
}