/* ==========================================================================
   custom.css — project-wide custom styles layered on top of the HSLab theme.
   Add new sections below as the codebase grows. Keep selectors scoped so
   they never leak into unrelated theme components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global typography — Plus Jakarta Sans across the whole app.
   The HSLab theme hard-codes "Inter, sans-serif"; we override it here.
   Icon fonts (Bootstrap Icons) and monospace are intentionally excluded.
   -------------------------------------------------------------------------- */

:root {
  --bs-body-font-family: "Plus Jakarta Sans", sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar, .nav, .nav-link, .dropdown-menu,
.btn, .badge, .card, .lead, .blockquote,
input, select, textarea, button,
.form-control, .form-select, .form-label {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* --------------------------------------------------------------------------
   Footer — pure black background, enlarged logo, light polish.
   Scoped to .site-footer so the global header/navbar styles are untouched.
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: #000000;
}

/* Logo ~1.5x the navbar size (12.5rem -> 18.75rem) */
.site-footer .footer-logo {
  width: 100%;
  min-width: 18.75rem;
  max-width: 18.75rem;
  height: auto;
}

/* Column headings: full white with a touch more letter-spacing */
.site-footer h4 {
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* Brand description + links: muted white, brightening on hover */
.site-footer .footer-lead {
  color: rgba(255, 255, 255, 0.65);
}

.site-footer a.text-white {
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color 0.2s ease-in-out;
}

.site-footer a.text-white:hover,
.site-footer a.text-white:focus {
  color: #ffffff !important;
}

/* Keep the brand/logo link readable on hover without dimming it */
.site-footer .navbar-brand:hover,
.site-footer .navbar-brand:focus {
  opacity: 0.85;
}

/* Faint divider above the copyright row */
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
}

.site-footer .footer-bottom p {
  color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   Home — call-to-action section.
   Bold brand-primary card, soft internal glows, white pill button.
   -------------------------------------------------------------------------- */

.home-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #377dff;
  background-image: linear-gradient(135deg, #377dff 0%, #1f63e6 100%);
  box-shadow: 0 1rem 3rem rgba(13, 27, 46, 0.18);
}

/* Soft decorative glows inside the card */
.home-cta-card::before,
.home-cta-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.home-cta-card::before {
  width: 22rem;
  height: 22rem;
  top: -8rem;
  right: -6rem;
}

.home-cta-card::after {
  width: 16rem;
  height: 16rem;
  bottom: -7rem;
  left: -4rem;
}

/* Keep copy above the decorative glows */
.home-cta-card .cta-content {
  position: relative;
  z-index: 1;
}

/* Highlighted word in the headline */
.home-cta-card .cta-highlight {
  position: relative;
  white-space: nowrap;
}

.home-cta-card .cta-highlight::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.18em;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1rem;
}

/* White pill button with a subtle lift + arrow nudge on hover */
.home-cta-card .cta-btn {
  color: #377dff;
  font-weight: 600;
  border-radius: 50rem;
  padding-inline: 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-cta-card .cta-btn:hover,
.home-cta-card .cta-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
}

.home-cta-card .cta-btn i {
  transition: transform 0.2s ease;
}

.home-cta-card .cta-btn:hover i {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Header / Navbar — refined, premium pass.
   Scoped to .site-header so other layouts' navbars are untouched.
   -------------------------------------------------------------------------- */

/* Logo is a ~12:1 wordmark (1223x102). Size by height; width follows.
   1.5rem tall => ~288px wide: balanced presence without dominating the bar. */
.site-header .navbar-brand-logo {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 1.5rem;
}

/* Step the wordmark down on small phones so it never crowds the toggler.
   1rem tall => ~192px wide, comfortable next to the switcher + toggler. */
@media (max-width: 575.98px) {
  .site-header .navbar-brand-logo {
    height: 1rem;
  }
}

/* Crisp floating bar once it turns white on scroll (or on solid pages) */
.site-header.bg-white {
  box-shadow: 0 0.25rem 1.5rem rgba(15, 23, 42, 0.06);
  backdrop-filter: saturate(1.05);
}

/* Nav links: medium weight; text turns brand-blue on hover and when active.
   No underline — the colour change alone signals hover/active state. */
.site-header .navbar-nav .nav-link {
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .hs-mega-menu-invoker:hover {
  color: #377dff;
}

/* Products dropdown: rounded, soft shadow, comfortable padding */
.site-header .hs-sub-menu.dropdown-menu {
  border: 0;
  border-radius: 0.875rem;
  padding: 0.5rem;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.12);
}

.site-header .hs-sub-menu .dropdown-item {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.site-header .hs-sub-menu .dropdown-item:hover {
  background-color: rgba(55, 125, 255, 0.1);
  color: #377dff;
}

/* Auth buttons: pill-shaped, balanced sizing, subtle lift (no glow) */
.site-header .btn-outline-primary,
.site-header .btn-primary {
  border-radius: 50rem;
  padding: 0.5rem 1.35rem;
  font-weight: 600;
  transition: transform 0.15s ease-in-out, background-color 0.2s ease-in-out,
    color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.site-header .btn-outline-primary:hover,
.site-header .btn-primary:hover,
.site-header .btn-outline-primary:focus,
.site-header .btn-primary:focus {
  transform: translateY(-1px);
}

/* Theme-switcher icon button sits flush with the auth buttons */
.site-header .selectThemeDropdown {
  width: 2.5rem;
  height: 2.5rem;
}

/* Mobile toggler: refined icon button matching the switcher size,
   with the menu/close icons morphing (rotate + crossfade) on toggle. */
.site-header .navbar-toggler {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1e2022;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0.75rem;
  background-color: transparent;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

.site-header .navbar-toggler:hover {
  color: #377dff;
  border-color: rgba(55, 125, 255, 0.5);
  background-color: rgba(55, 125, 255, 0.08);
}

.site-header .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.site-header .navbar-toggler:focus-visible {
  outline: 2px solid rgba(55, 125, 255, 0.5);
  outline-offset: 2px;
}

.site-header .navbar-toggler i {
  font-size: 1.25rem;
  line-height: 1;
}

/* Stack both icons so they can animate instead of hard display-swapping */
.site-header .navbar-toggler .navbar-toggler-default,
.site-header .navbar-toggler .navbar-toggler-toggled {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out, transform 0.25s ease-in-out;
}

.site-header .navbar-toggler .navbar-toggler-default {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.site-header .navbar-toggler .navbar-toggler-toggled {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-default {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-toggled {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* --------------------------------------------------------------------------
   Home — hero. Product-led layout that balances our two offerings:
   custom development (services) + ready-to-use products (SaaS, e.g. Edunex).
   Theme-aware via translucent layers + Bootstrap vars (the theme swaps the
   whole stylesheet for dark mode, so there is no root `.dark` to target).
   -------------------------------------------------------------------------- */

.home-hero {
  --hero-brand: #377dff;     /* SaaS / product accent */
  --hero-accent: #f59e0b;    /* amber — services / human accent (no purple) */
  --hero-surface: var(--bs-card-bg, #ffffff);
  --hero-border: var(--bs-border-color, #e7eaf3);
  position: relative;
  isolation: isolate;
}

/* Layered brand + accent glows behind everything */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 80% 16%, rgba(55, 125, 255, 0.18), transparent 60%),
    radial-gradient(46% 42% at 6% 34%, rgba(245, 158, 11, 0.08), transparent 62%);
}

/* Faint dot grid, masked so it fades out toward the edges */
.home-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(100, 116, 139, 0.18) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 8%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 60% at 50% 8%, #000 35%, transparent 78%);
  opacity: 0.7;
}

/* ----- Copy column ----- */

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hero-border);
  border-radius: 50rem;
  background: rgba(128, 128, 128, 0.06);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.home-hero__eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hero-brand);
  animation: heroPulse 2.6s ease-in-out infinite;
}

.home-hero__title {
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* Hand-drawn underline sweeping under the highlighted word */
.home-hero__accent {
  position: relative;
  white-space: nowrap;
}

.home-hero__underline {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: 0.42em;
  overflow: visible;
}

.home-hero__underline path {
  fill: none;
  stroke: var(--hero-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: heroDraw 0.9s 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.home-hero__lead {
  max-width: 34rem;
  font-size: 1.15rem;
  opacity: 0.9;
}

/* CTA buttons: pill-shaped to match the header, subtle lift, no glow */
.home-hero__btn {
  border-radius: 50rem;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  transition: transform 0.15s ease-in-out, background-color 0.2s ease-in-out,
    color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.home-hero__btn:hover,
.home-hero__btn:focus {
  transform: translateY(-2px);
}

.home-hero__btn i {
  transition: transform 0.2s ease;
}

.home-hero__btn:hover i {
  transform: translateX(3px);
}

.home-hero__trust {
  font-size: 0.875rem;
  opacity: 0.7;
}

.home-hero__trust i {
  color: var(--hero-brand);
  margin-right: 0.35rem;
}

/* ----- Product visual column ----- */

.home-hero__visual {
  position: relative;
}

/* Floating chips that overlap the window edges */
.home-hero__chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.85rem;
  background: var(--bs-card-bg, var(--bs-light, #fff));
  color: var(--bs-body-color);
  border: 1px solid var(--hero-border);
  box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, 0.14);
}

.home-hero__chip-icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  background: rgba(55, 125, 255, 0.12);
  color: var(--hero-brand);
  font-size: 1rem;
}

.home-hero__chip-icon--accent {
  background: rgba(245, 158, 11, 0.14);
  color: var(--hero-accent);
}

.home-hero__chip-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1;
}

.home-hero__chip-value {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;
}

.home-hero__chip--stat {
  top: 1.75rem;
  left: -1.25rem;
  animation: heroFloat 6s ease-in-out infinite;
}

.home-hero__chip--build {
  bottom: 1.75rem;
  right: -0.5rem;
  animation: heroFloat 6s ease-in-out infinite 1.5s;
}

/* ----- Orchestrated load: staggered fade-up ----- */

.home-hero__copy > * {
  opacity: 0;
  animation: heroUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.home-hero__eyebrow { animation-delay: 0.05s; }
.home-hero__title { animation-delay: 0.15s; }
.home-hero__lead { animation-delay: 0.25s; }
.home-hero__cta { animation-delay: 0.35s; }
.home-hero__trust { animation-delay: 0.45s; }

.home-hero__visual {
  opacity: 0;
  animation: heroUp 0.8s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes heroUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes heroDraw {
  to { stroke-dashoffset: 0; }
}

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

@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(55, 125, 255, 0.35); }
  70% { box-shadow: 0 0 0 0.5rem rgba(55, 125, 255, 0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-hero__copy > *,
  .home-hero__visual,
  .home-hero__chip,
  .home-hero__eyebrow-dot,
  .home-hero__underline path {
    animation: none !important;
    opacity: 1 !important;
  }

  .home-hero__underline path { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Home — "trusted by" social-proof marquee (sits right below the hero).
   Real partner wordmarks scroll slowly and pause on hover. Swapping a
   wordmark for a real logo (.trust-logo__img) inherits the muted/hover look.
   -------------------------------------------------------------------------- */

.home-trust__label {
  margin-bottom: 1.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-body-color);
  opacity: 0.55;
}

/* Edge-faded viewport for the scrolling track */
.home-trust__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.home-trust__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: trustScroll 32s linear infinite;
}

.home-trust__marquee:hover .home-trust__track {
  animation-play-state: paused;
}

/* Each item owns its trailing space so the duplicated set loops seamlessly */
.trust-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 3.25rem;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bs-body-color);
  opacity: 0.5;
  transition: opacity 0.25s ease, color 0.25s ease;
}

/* Dot separator centred in the gap between items */
.home-trust__track .trust-logo::after {
  content: "";
  position: absolute;
  right: -1.75rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transform: translateY(-50%);
}

.trust-logo:hover {
  opacity: 0.95;
  color: #377dff;
}

.trust-logo svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* Real client logos (swap a wordmark for <img class="trust-logo__img">) */
.trust-logo__img {
  height: 1.9rem;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.trust-logo__img:hover {
  opacity: 1;
  filter: grayscale(0);
}

@keyframes trustScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reduced motion: stop the scroll, hide clones, centre the real set */
@media (prefers-reduced-motion: reduce) {
  .home-trust__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2.5rem;
  }

  .home-trust__track .trust-logo {
    margin-right: 0;
  }

  .home-trust__track .trust-logo::after {
    display: none;
  }

  .home-trust__clone {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Edunex product page — prodexa-inspired clean SaaS layout.
   Scoped to .edunex-page.
   -------------------------------------------------------------------------- */

.edunex-hero {
  background-image: radial-gradient(60% 60% at 50% 0%, rgba(55, 125, 255, 0.1) 0%,
      rgba(55, 125, 255, 0) 70%);
}

/* Faint dot grid behind the hero, masked so it fades toward the edges
   (matches the home hero treatment) */
.edunex-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(100, 116, 139, 0.18) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 5%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 5%, #000 35%, transparent 78%);
}

/* Keep hero content above the dot grid */
.edunex-hero > .container-lg {
  position: relative;
  z-index: 1;
}

.edunex-hero-title {
  font-weight: 800;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Layered, brand-tinted shadow gives the screenshot real presence */
.edunex-hero-shot {
  border-radius: 0.75rem;
  border: 1px solid rgba(30, 58, 138, 0.08);
  box-shadow: 0 1rem 2rem rgba(30, 58, 138, 0.1),
    0 3rem 6rem rgba(30, 58, 138, 0.22);
}

/* Pricing cards */
.edunex-page .edunex-price-card {
  position: relative;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.edunex-page .edunex-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1.5rem 3rem rgba(30, 58, 138, 0.16) !important;
}

.edunex-page .edunex-price-card-popular {
  box-shadow: 0 1.5rem 3.5rem rgba(55, 125, 255, 0.22) !important;
}

.edunex-page .edunex-price-card-popular {
  border: 2px solid #377dff !important;
}

@media (min-width: 992px) {
  .edunex-page .edunex-price-card-popular {
    transform: scale(1.04);
  }

  .edunex-page .edunex-price-card-popular:hover {
    transform: scale(1.04) translateY(-4px);
  }
}

.edunex-page .edunex-price-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #377dff;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 50rem;
  white-space: nowrap;
}

.edunex-page .edunex-price {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Bigger, on-brand billing switch */
.edunex-page .edunex-billing-switch .form-check-input {
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
}

.edunex-page .edunex-billing-switch .form-check-input:checked {
  background-color: #377dff;
  border-color: #377dff;
}

/* ----- Typography system (Plus Jakarta Sans, scoped) ----- */

/* All headings: heavy, tight, balanced wrapping */
.edunex-page h1, .edunex-page h2, .edunex-page h3,
.edunex-page h4, .edunex-page h5,
.edunex-page .home-cta-card h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Section display headings (display-5 is the page's section H2 convention) */
.edunex-page .display-5,
.edunex-page section h2,
.edunex-page .home-cta-card h2 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.edunex-page h3 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
}

.edunex-page h4, .edunex-page h5, .edunex-page .h5 {
  line-height: 1.3;
  font-weight: 700;
}

/* Eyebrow caps: small, spaced, brand-colored, with breathing room */
.edunex-page .text-cap {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #377dff;
}

/* Lead + body: readable measure, comfortable rhythm, no orphans */
.edunex-page .lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.edunex-page p {
  line-height: 1.7;
}

/* Replace timid grey shadows with deeper, brand-tinted elevation + lift.
   Pricing cards keep their own treatment. */
.edunex-page .card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.edunex-page .card.shadow-sm:not(.edunex-price-card) {
  box-shadow: 0 0.5rem 1.5rem rgba(30, 58, 138, 0.07) !important;
}

.edunex-page .card.shadow-sm:not(.edunex-price-card):hover {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.5rem rgba(30, 58, 138, 0.14) !important;
}

/* Feature/value icons get a little more weight on hover */
.edunex-page .card.shadow-sm:not(.edunex-price-card) .icon {
  transition: transform 0.2s ease-in-out;
}

.edunex-page .card.shadow-sm:not(.edunex-price-card):hover .icon {
  transform: scale(1.08);
}

/* Tools grid — bordered card, all on-brand. Every icon is a brand-blue chip
   (icon-soft-primary, #377dff); on hover the card gains a brand-blue border +
   brand-tinted lift, and the chip fills solid blue with a white glyph. The old
   per-card rainbow (success/warning/info/danger/dark) was off-brand. Theme
   tokens throughout, so light + dark both read; no button-style glow. */
.edunex-page .edunex-tools__card {
  border-color: var(--bs-border-color);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.edunex-page .edunex-tools__card:hover {
  border-color: var(--bs-primary);
  transform: translateY(-4px);
  box-shadow: 0 1rem 2.25rem rgba(30, 58, 138, 0.12) !important;
}

/* Larger, more substantial brand-blue chip than the theme default (2.625rem) */
.edunex-page .edunex-tools__card .icon {
  width: 3rem;
  height: 3rem;
  font-size: 1.15rem;
  border-radius: 0.85rem;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Hover: chip fills solid brand-blue, glyph turns white, gentle scale */
.edunex-page .edunex-tools__card:hover .icon {
  background-color: var(--bs-primary);
  color: #fff;
  transform: scale(1.06);
}

/* Card type — larger for presence (title up from 1.25rem, body up from 1rem) */
.edunex-page .edunex-tools__card h5 {
  font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
}

.edunex-page .edunex-tools__card p {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Why Edunex — value props as an asymmetric editorial split.
   Hallmark · section: why-edunex value props · genre: modern-minimal
   · macro: Split Studio (editorial numerals + hairline rules)
   · pre-emit critique: P5 H5 E4 S5 R5 V4
   Replaces the old alternating image/text zigzag (which reused one screenshot
   3x). Each value is a numbered block: a brand-blue-native illustration on a
   theme-token plate on one side, copy on the other, sides alternating down the
   column, hairline rules between blocks. All surfaces use --bs-* tokens, so
   light + dark are both correct; no hardcoded light colours, no button glow.
   -------------------------------------------------------------------------- */
.edunex-page .edunex-value__head {
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.edunex-page .edunex-value__head .lead {
  color: var(--bs-secondary-color);
}

/* One value block: 2-col asymmetric grid (media 5 / text 6). Stacks on mobile.
   minmax(0, …) so the illustration never forces an overflow. */
.edunex-page .edunex-value__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

/* Hairline rule between blocks — never above the first */
.edunex-page .edunex-value__row + .edunex-value__row {
  border-top: 1px solid var(--bs-border-color);
}

/* Alternate the diptych: media swings to the right column */
.edunex-page .edunex-value__row--reverse .edunex-value__media {
  order: 2;
}

/* Illustration plate — theme-aware card tint + hairline + soft brand wash in
   the top-left corner. Light: tinted white card; dark: tinted dark card. */
.edunex-page .edunex-value__media {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 1.5rem;
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--bs-primary-rgb), 0.10), transparent 58%),
    var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}

/* Constrain illustration HEIGHT (not width) so all three plates carry equal
   visual weight regardless of the source aspect ratio. SVG scales crisply. */
.edunex-page .edunex-value__art {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(13rem, 8rem + 13vw, 19rem);
  margin-inline: auto;
}

/* Decorative editorial numeral — ghosted brand, stacked above the heading */
.edunex-page .edunex-value__num {
  display: block;
  margin-bottom: 0.4rem;
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(var(--bs-primary-rgb), 0.22);
}

.edunex-page .edunex-value__text h3 {
  margin-bottom: 1rem;
}

.edunex-page .edunex-value__list {
  margin-bottom: 0;
}

/* Stack on tablet/mobile: single column, illustration always on top */
@media (max-width: 991.98px) {
  .edunex-page .edunex-value__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    padding-block: 2.5rem;
  }

  .edunex-page .edunex-value__media,
  .edunex-page .edunex-value__row--reverse .edunex-value__media {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Mobile-app CTA — Mizzle "iphone-x" phone mockup + a brand CTA band.
   Copied from the Mizzle mobile-app-showcase theme. The .iphone-x frame is
   near-black (#202124), so it reads on both light and dark bands.
   -------------------------------------------------------------------------- */
.iphone-x {
  position: relative;
  margin: 40px auto;
  width: 360px;
  height: 780px;
  background-color: #202124;
  background-size: cover;
  background-position: top center;
  border-radius: 30px;
  box-shadow: 0 0 0 11px #202124, 0 0 0 13px #202124, 0 0 0 10px #1a1a1d,
    0 5px 7px 13px rgba(220, 224, 229, 0.04);
}

.iphone-x::before,
.iphone-x::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.iphone-x::after {
  bottom: 7px;
  width: 140px;
  height: 4px;
  background-color: #f8f8f8;
  border-radius: 10px;
}

.iphone-x::before {
  top: -2px;
  width: 66%;
  height: 28px;
  background-color: #202124;
  border-radius: 0 0 40px 40px;
}

.iphone-x i,
.iphone-x b {
  position: absolute;
  display: block;
  color: transparent;
}

.iphone-x i {
  top: 0;
  left: 50%;
  transform: translate(-50%, 6px);
  height: 8px;
  width: 15%;
  background-color: #000;
  border-radius: 8px;
  box-shadow: inset 0 -3px 3px 0 rgba(255, 255, 255, 0.2);
}

.iphone-x b {
  left: 10%;
  top: 0;
  transform: translate(180px, 4px);
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 12px;
  box-shadow: inset 0 -3px 2px 0 rgba(255, 255, 255, 0.2);
}

.iphone-x b::after {
  content: "";
  position: absolute;
  background-color: rgba(55, 125, 255, 0.5);
  width: 6px;
  height: 6px;
  top: 3px;
  left: 3px;
  display: block;
  border-radius: 4px;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.5);
}

.iphone-x.iphone-x-small {
  margin: 0 auto;
  width: 280px;
  height: 560px;
}

.iphone-x.iphone-x-small b {
  left: 4%;
}

@media (max-width: 1199.98px) {
  .iphone-x.iphone-x-small {
    width: 260px;
    height: 520px;
  }
  .iphone-x.iphone-x-small b {
    left: -1%;
  }
}

@media (max-width: 575.98px) {
  .iphone-x.iphone-x-small {
    width: 240px;
    height: 480px;
  }
  .iphone-x.iphone-x-small b {
    left: -6%;
  }
}

/* CTA band: relative wrapper so the decoration can sit in the corner */
.edunex-page .edunex-app-cta {
  position: relative;
  overflow: hidden;
}

.edunex-page .edunex-app-cta__deco {
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.edunex-page .edunex-app-cta__inner {
  position: relative;
  z-index: 1;
}

/* Make the pricing section read as a focal moment, not just another band */
.edunex-page #pricing {
  position: relative;
  isolation: isolate;
}

.edunex-page #pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(50% 45% at 50% 0%, rgba(55, 125, 255, 0.08) 0%,
      rgba(55, 125, 255, 0) 70%);
}

/* Smooth scroll for the in-page "View Pricing" anchor */
html {
  scroll-behavior: smooth;
}

/* ----- Bolder structural moves ----- */

/* Feature tabs — Mizzle "Transform" style: vertical border-start pills next to
   a brand-tinted visual panel that swaps with the active tab. The active state
   is driven by Bootstrap's own nav-pills CSS variables, and the tints use the
   --bs-primary-rgb token, so everything stays theme-aware in light and dark. */
.edunex-page .edunex-feature__panel {
  overflow: hidden;
}

.edunex-page .edunex-feature__deco {
  color: rgba(var(--bs-primary-rgb), 0.18);
  line-height: 0;
  z-index: 0;
}

.edunex-page .edunex-feature__panel .tab-content {
  position: relative;
  z-index: 1;
}

/* Mizzle "border-start" vertical pills — adopted, but the active state is
   colored with tokens that flip in the dark sheet (--bs-light + --bs-body-color)
   so it stays readable in both modes. (Mizzle's literal --bs-gray-900 does not
   flip in this theme, so it can't be copied verbatim.) */
.edunex-page .nav-pills-border-start .nav-link {
  background-color: transparent;
  color: var(--bs-body-color);
  border: 3px solid transparent;
  white-space: normal;
}

.edunex-page .nav-pills-border-start .nav-link.active,
.edunex-page .nav-pills-border-start .nav-link:hover,
.edunex-page .nav-pills-border-start .show > .nav-link {
  color: var(--bs-body-color);
  background-color: var(--bs-light);
  border-left: 3px solid var(--bs-primary);
}

/* Guarantee the codebase font on the list text (title + the inherited <p>) */
.edunex-page .nav-pills-border-start .nav-link,
.edunex-page .nav-pills-border-start .nav-link h5,
.edunex-page .nav-pills-border-start .nav-link p {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* ----- Section copy: tighter, more deliberate hierarchy ----- */

/* Heading: heaviest weight + tight tracking (display-5 already sizes it) */
.edunex-page .edunex-feature__title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

/* Lead: constrained measure + slightly muted for hierarchy */
.edunex-page .edunex-feature__lead {
  max-width: 34rem;
  opacity: 0.85;
}

/* Footnote: small, quiet, with a clear link */
.edunex-page .edunex-feature__note {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Title + description sized to match the rest of the page (the theme's 0.9rem
   base felt too small here; the features grid uses h5 titles + ~1rem body). */
.edunex-page .nav-pills-border-start .nav-link h5 {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.edunex-page .nav-pills-border-start .nav-link p {
  font-size: 1rem;
}

/* Floating accent card overlapping the hero screenshot for depth */
.edunex-hero-shot-wrap {
  position: relative;
}

.edunex-float-card {
  position: absolute;
  left: -1.25rem;
  bottom: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* --bs-card-bg is .card-scoped, so it never resolves here; fall back to
     --bs-light, a :root token the theme redefines per appearance
     (#f9fafc light, #2c2f32 dark) for a crisp white / elevated-dark surface. */
  background-color: var(--bs-card-bg, var(--bs-light, #fff));
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color, #e7eaf3);
  border-radius: 0.875rem;
  padding: 0.75rem 1.1rem 0.75rem 0.85rem;
  box-shadow: 0 1rem 2.5rem rgba(30, 58, 138, 0.2);
}

.edunex-float-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-size: 1.15rem;
}

/* Social-proof bar (compact, lighter than the hero strip) */
.edunex-page .edunex-socialproof {
  background-color: var(--bs-light, #f8fafc);
}
.edunex-page .edunex-socialproof__quote {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* ----- Hero: Mizzle SaaS-v4 style centered stack ----- */

/* Badge pill with an inline link */
.edunex-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.3rem 0.35rem 0.3rem 0.9rem;
  border: 1px solid var(--bs-border-color, #e7eaf3);
  border-radius: 50rem;
  background: rgba(128, 128, 128, 0.06);
  font-size: 0.8rem;
  font-weight: 600;
}

.edunex-hero__badge-tag {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

.edunex-hero__badge-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  border-radius: 50rem;
  background: #377dff;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.edunex-hero__badge-link:hover,
.edunex-hero__badge-link:focus { background: #1f63e6; color: #fff; }
.edunex-hero__badge-link i { transition: transform 0.2s ease; }
.edunex-hero__badge-link:hover i { transform: translateX(2px); }

/* Highlighted word in the H1 */
.edunex-hero__accent { color: #377dff; white-space: nowrap; }

.edunex-hero__lead {
  max-width: 38rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* CTA buttons (pill, lift, no glow) */
.edunex-hero__btn {
  border-radius: 50rem;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
}
.edunex-hero__btn:hover, .edunex-hero__btn:focus { transform: translateY(-2px); }

/* Social-proof avatar strip */
.edunex-hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
.edunex-hero__avatars { display: flex; padding: 0; margin: 0; list-style: none; }
.edunex-hero__avatars li {
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -0.65rem;
  border-radius: 50%;
  border: 2px solid var(--bs-card-bg, #fff);
  background: rgba(128, 128, 128, 0.15);
  overflow: hidden;
}
.edunex-hero__avatars li:first-child { margin-left: 0; }
.edunex-hero__avatars img { width: 100%; height: 100%; object-fit: cover; }
.edunex-hero__proof-text { text-align: left; font-size: 0.875rem; line-height: 1.3; }
.edunex-hero__stars { display: block; color: #f59e0b; font-size: 0.8rem; }

/* Floating decoration cards — distinct positions + icon tints */
.edunex-float-card--fees {
  left: -1.25rem; bottom: 2rem;
  animation: heroFloat 6s ease-in-out infinite;
}
.edunex-float-card--attendance {
  left: auto;
  bottom: auto;
  right: -1.25rem; top: 3.5rem;
  animation: heroFloat 6s ease-in-out infinite 1.2s;
}
.edunex-float-card--report {
  left: auto;
  top: auto;
  right: 2rem; bottom: -1.25rem;
  animation: heroFloat 6s ease-in-out infinite 2.4s;
}
.edunex-float-icon--blue { background: rgba(55, 125, 255, 0.12); color: #377dff; }
.edunex-float-icon--amber { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }

/* Orchestrated staggered load */
.edunex-hero__copy > * {
  opacity: 0;
  animation: heroUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.edunex-hero__copy > .edunex-hero__badge { animation-delay: 0.05s; }
.edunex-hero__copy > .edunex-hero-title { animation-delay: 0.15s; }
.edunex-hero__copy > .edunex-hero__lead { animation-delay: 0.25s; }
.edunex-hero__copy > .edunex-hero__cta { animation-delay: 0.35s; }
.edunex-hero__copy > .edunex-hero__proof { animation-delay: 0.45s; }
.edunex-hero__visual {
  opacity: 0;
  animation: heroUp 0.8s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .edunex-hero__copy > *,
  .edunex-hero__visual,
  .edunex-float-card {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   About — page hero (centered variant of the home hero) + soft card polish.
   The hero reuses the home-hero__* atoms (eyebrow, title, underline, lead,
   pill buttons, staggered load); only the wrapper glow + brand tokens are
   new. Card hover-lift is scoped to .about-page so it never leaks elsewhere.
   -------------------------------------------------------------------------- */

.about-hero {
  --hero-brand: #377dff;     /* SaaS / product accent */
  --hero-accent: #f59e0b;    /* amber — human accent (no purple) */
  --hero-border: var(--bs-border-color, #e7eaf3);
  position: relative;
  isolation: isolate;
}

/* Soft brand + accent glows behind the centered copy */
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 42% at 50% 0%, rgba(55, 125, 255, 0.16), transparent 60%),
    radial-gradient(40% 38% at 85% 12%, rgba(245, 158, 11, 0.08), transparent 62%);
}

/* Center the reused lead within the narrower hero column */
.about-hero .home-hero__lead {
  margin-left: auto;
  margin-right: auto;
}

/* Bordered cards (Vision/Mission + "what we stand for" grid): just an outline
   on a transparent background — no fill, no shadow, no colour shift. The theme
   gives every .card a white background + soft shadow, so both are overridden
   here. The gradient CTA uses .border-0, so it's untouched. */
.about-page .card.border {
  background-color: transparent;
  box-shadow: none;
  transition: transform 0.2s ease-in-out;
}

.about-page .card.border:hover {
  transform: translateY(-4px);
}

/* Feature icons get a touch more weight on hover */
.about-page .card.border .icon {
  transition: transform 0.2s ease-in-out;
}

.about-page .card.border:hover .icon {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Newsroom — public blog listing, search, and article reading views.
   Modernised onto the shared SaaS system (masked dot-grid + glow, pill
   controls, heavy Jakarta type, brand-tinted card elevation). Theme-aware via
   Bootstrap vars. Scoped to .newsroom-page. Reuses heroUp/heroDraw keyframes.
   -------------------------------------------------------------------------- */

.newsroom-page {
  --nr-brand: #377dff;
  --nr-accent: #f59e0b;
  --nr-surface: var(--bs-card-bg, #ffffff);
  --nr-border: var(--bs-border-color, #e7eaf3);
}

/* ----- Hero (listing + search) ----- */
.newsroom-hero,
.newsroom-article-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.newsroom-hero {
  background-image: radial-gradient(60% 60% at 50% 0%, rgba(55, 125, 255, 0.1) 0%,
      rgba(55, 125, 255, 0) 70%);
}

.newsroom-hero::before,
.newsroom-article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(100, 116, 139, 0.18) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 5%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 5%, #000 35%, transparent 78%);
}

.newsroom-hero > .container,
.newsroom-article-hero > .container {
  position: relative;
  z-index: 1;
}

.newsroom-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--nr-border);
  border-radius: 50rem;
  background: rgba(128, 128, 128, 0.06);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.newsroom-hero__eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--nr-brand);
}

.newsroom-hero__title {
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.newsroom-hero__accent {
  position: relative;
  white-space: nowrap;
}

.newsroom-hero__underline {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: 0.42em;
  overflow: visible;
}

.newsroom-hero__underline path {
  fill: none;
  stroke: var(--nr-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: heroDraw 0.9s 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.newsroom-hero__lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  opacity: 0.9;
  text-wrap: pretty;
}

/* ----- Search field (pill input group) ----- */
.newsroom-search .input-group {
  border-radius: 50rem;
  border: 1px solid var(--nr-border);
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
  overflow: hidden;
  flex-wrap: nowrap;
}

.newsroom-search .form-control {
  border: 0;
  background: transparent;
  padding-left: 1.25rem;
  box-shadow: none;
}

.newsroom-search .form-control:focus {
  box-shadow: none;
}

.newsroom-search .btn {
  border-radius: 50rem;
  margin: 0.25rem;
  padding-inline: 1.25rem;
}

/* ----- Category chips ----- */
.newsroom-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  margin: 0.25rem;
  border-radius: 50rem;
  background: rgba(55, 125, 255, 0.1);
  color: var(--nr-brand);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.newsroom-chip:hover {
  background: var(--nr-brand);
  color: #fff;
  transform: translateY(-1px);
}

/* ----- Cards (grid + featured) ----- */
.newsroom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--nr-border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.newsroom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.5rem rgba(30, 58, 138, 0.14);
}

.newsroom-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.newsroom-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.newsroom-card:hover .newsroom-card__media img {
  transform: scale(1.04);
}

.newsroom-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem 1.35rem 1.4rem;
}

.newsroom-card__meta {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.6rem;
}

.newsroom-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.newsroom-card__title a {
  color: var(--bs-body-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.newsroom-card__title a:hover {
  color: var(--nr-brand);
}

.newsroom-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.newsroom-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--nr-brand);
  text-decoration: none;
}

.newsroom-card__more i {
  transition: transform 0.2s ease;
}

.newsroom-card__more:hover i {
  transform: translateX(3px);
}

/* Featured: horizontal on large screens */
.newsroom-featured {
  margin-bottom: 3.5rem;
}

.newsroom-featured .newsroom-card__media {
  aspect-ratio: 16 / 10;
  height: auto;
}

@media (min-width: 992px) {
  .newsroom-featured .newsroom-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 22rem;
  }
  .newsroom-featured .newsroom-card__title {
    font-size: 1.6rem;
  }
}

.newsroom-featured__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 50rem;
  background: var(--nr-brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----- Empty state ----- */
.newsroom-empty {
  text-align: center;
  padding: 4rem 1rem;
}

.newsroom-empty svg {
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

/* ----- Pager ----- */
.newsroom-pager {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ----- Article reading view ----- */
.newsroom-article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--nr-brand);
  text-decoration: none;
}

.newsroom-article__back i {
  transition: transform 0.2s ease;
}

.newsroom-article__back:hover i {
  transform: translateX(-3px);
}

.newsroom-article__title {
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.newsroom-article__date {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.6;
}

.newsroom-article__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid rgba(30, 58, 138, 0.08);
  box-shadow: 0 1rem 2rem rgba(30, 58, 138, 0.1),
    0 3rem 6rem rgba(30, 58, 138, 0.22);
}

/* Share pill icon buttons */
.newsroom-share {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.newsroom-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--nr-border);
  background: var(--nr-surface);
  color: var(--bs-body-color);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease,
    background-color 0.2s ease;
}

.newsroom-share__btn:hover {
  color: var(--nr-brand);
  border-color: var(--nr-brand);
  transform: translateY(-2px);
}

/* Prose body (readable measure) */
.newsroom-article__body {
  max-width: 46rem;
  margin-inline: auto;
  font-size: 1.075rem;
  line-height: 1.8;
}

.newsroom-article__body > .lead {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.newsroom-article__body h2 {
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
}

.newsroom-article__body h3 {
  font-weight: 700;
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}

.newsroom-article__body p {
  margin-bottom: 1.5rem;
}

.newsroom-article__body a {
  color: var(--nr-brand);
  text-underline-offset: 2px;
}

.newsroom-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
}

.newsroom-article__body ul,
.newsroom-article__body ol {
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
}

.newsroom-article__body li {
  margin-bottom: 0.5rem;
}

.newsroom-article__body blockquote {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 3px solid var(--nr-brand);
  font-size: 1.2rem;
  font-style: italic;
  opacity: 0.9;
}

/* ----- Load motion (reuse heroUp keyframe) ----- */
.newsroom-hero__copy > *,
.newsroom-article__head > * {
  opacity: 0;
  animation: heroUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.newsroom-hero__copy > *:nth-child(1),
.newsroom-article__head > *:nth-child(1) { animation-delay: 0.05s; }
.newsroom-hero__copy > *:nth-child(2),
.newsroom-article__head > *:nth-child(2) { animation-delay: 0.15s; }
.newsroom-hero__copy > *:nth-child(3),
.newsroom-article__head > *:nth-child(3) { animation-delay: 0.25s; }
.newsroom-hero__copy > *:nth-child(4) { animation-delay: 0.35s; }

.newsroom-grid__item {
  opacity: 0;
  animation: heroUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.newsroom-grid__item:nth-child(1) { animation-delay: 0.05s; }
.newsroom-grid__item:nth-child(2) { animation-delay: 0.12s; }
.newsroom-grid__item:nth-child(3) { animation-delay: 0.19s; }
.newsroom-grid__item:nth-child(4) { animation-delay: 0.26s; }
.newsroom-grid__item:nth-child(5) { animation-delay: 0.33s; }
.newsroom-grid__item:nth-child(6) { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .newsroom-grid__item,
  .newsroom-hero__copy > *,
  .newsroom-article__head > * {
    animation: none !important;
    opacity: 1 !important;
  }

  .newsroom-hero__underline path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Use) + FAQs.
   All three adopt the shared SaaS system: a centered hero built from the
   home-hero__* atoms (eyebrow, heavy 800 title, hand-drawn underline, staggered
   load) plus a sticky two-column "side-nav + content" layout. Theme-aware via
   Bootstrap vars; scoped to .legal-page / .faqs-page so nothing leaks.
   Reuses heroUp / heroDraw keyframes defined with the home hero.
   ========================================================================== */

/* ----- Hero wrappers: glow + brand tokens (like .about-hero) ----- */
.legal-hero,
.faqs-hero {
  --hero-brand: #377dff;
  --hero-accent: #f59e0b;       /* amber — no purple */
  --hero-border: var(--bs-border-color, #e7eaf3);
  position: relative;
  isolation: isolate;
}

.legal-hero::before,
.faqs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 42% at 50% 0%, rgba(55, 125, 255, 0.16), transparent 60%),
    radial-gradient(40% 38% at 85% 12%, rgba(245, 158, 11, 0.08), transparent 62%);
}

/* Center the reused lead within the narrower hero column */
.legal-hero .home-hero__lead,
.faqs-hero .home-hero__lead {
  margin-left: auto;
  margin-right: auto;
}

/* Balance the (sometimes longer) legal/FAQ headlines across lines */
.legal-hero .home-hero__title,
.faqs-hero .home-hero__title {
  text-wrap: balance;
}

/* Effective-date / meta pill sitting under the hero title */
.legal-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--bs-border-color, #e7eaf3);
  border-radius: 50rem;
  background: rgba(128, 128, 128, 0.06);
  font-size: 0.85rem;
  font-weight: 600;
}

.legal-hero__meta i {
  color: #377dff;
}

/* ----- Sticky side navigation (TOC / category jump-list) ----- */
.doc-toc {
  position: sticky;
  top: 6rem;
}

.doc-toc__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.55;
  margin-bottom: 1rem;
}

.doc-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--bs-border-color, #e7eaf3);
}

.doc-toc__link {
  display: block;
  padding: 0.45rem 0 0.45rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--bs-body-color);
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  opacity: 0.65;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.doc-toc__link:hover,
.doc-toc__link:focus {
  opacity: 1;
  color: #377dff;
}

.doc-toc__link.active {
  opacity: 1;
  color: #377dff;
  border-left-color: #377dff;
  font-weight: 600;
}

/* ----- Legal prose: readable measure, left-aligned, themed ----- */
.legal-section {
  scroll-margin-top: 6rem;   /* clear the sticky header on anchor jumps */
}

.legal-section + .legal-section {
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--bs-border-color, #e7eaf3);
}

.legal-section__head {
  display: flex;
  align-items: center;
  margin-bottom: 1.1rem;
}

.legal-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: 0.85rem;
  border-radius: 0.65rem;
  background: rgba(55, 125, 255, 0.1);
  color: #377dff;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.legal-page .legal-section h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal-page .legal-section h3 {
  margin: 1.6rem 0 0.6rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.legal-page .legal-intro p,
.legal-page .legal-section p {
  margin-bottom: 1.1rem;
  line-height: 1.8;
  opacity: 0.9;
  text-wrap: pretty;
}

.legal-page .legal-intro {
  font-size: 1.1rem;
}

/* Branded list markers replace the default bullets */
.legal-page .legal-section ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.legal-page .legal-section ul li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: 0.65rem;
  line-height: 1.7;
  opacity: 0.9;
}

.legal-page .legal-section ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #377dff;
  opacity: 0.6;
}

.legal-page .legal-section a {
  color: #377dff;
  text-underline-offset: 2px;
}

/* ----- Contact card (shared by both legal pages) -----
   Theme-aware surface: the card bg + border flip with the theme tokens, and a
   faint brand wash (rgba, so it's identical in both modes) lifts it off the
   page so it never reads flat against the near-black dark background. */
.legal-contact {
  position: relative;
  background-image: radial-gradient(130% 120% at 0% 0%,
      rgba(55, 125, 255, 0.07), transparent 55%);
  border: 1px solid var(--bs-border-color, #e7eaf3);
  border-radius: 1rem;
}

.legal-contact__row {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-contact__row:hover {
  color: #377dff;
}

.legal-contact__row i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: rgba(55, 125, 255, 0.1);
  color: #377dff;
  font-size: 1.1rem;
}

/* ----- FAQs: accordion restyle (card-style, brand active, themed) ----- */
.faqs-page .faq-group {
  scroll-margin-top: 6rem;
}

.faqs-page .faq-group__title {
  font-weight: 800;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.faqs-page .faq-accordion {
  display: grid;
  gap: 0.85rem;
}

.faqs-page .faq-accordion .accordion-item {
  border: 1px solid var(--bs-border-color, #e7eaf3);
  border-radius: 0.9rem !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight the open item (progressive enhancement; :has degrades gracefully) */
.faqs-page .faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(55, 125, 255, 0.5);
  box-shadow: 0 0.75rem 2rem rgba(30, 58, 138, 0.1);
}

.faqs-page .faq-accordion .accordion-button {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 1.15rem 1.35rem;
  color: var(--bs-body-color);
  background: transparent;
}

.faqs-page .faq-accordion .accordion-button:not(.collapsed) {
  color: #377dff;
  background: transparent;
  box-shadow: none;
}

.faqs-page .faq-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.faqs-page .faq-accordion .accordion-body {
  padding: 0 1.35rem 1.3rem;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.9;
}

.faqs-page .faq-accordion .accordion-body a {
  color: #377dff;
  font-weight: 600;
  text-underline-offset: 2px;
}

/* ----- FAQs: help-article cards (newsroom-card treatment) ----- */
.faqs-page .faq-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--bs-border-color, #e7eaf3);
  border-radius: 1rem;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--bs-body-color);
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.faqs-page .faq-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.5rem rgba(30, 58, 138, 0.14);
}

.faqs-page .faq-article-card__cat {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 50rem;
  background: rgba(55, 125, 255, 0.1);
  color: #377dff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.faqs-page .faq-article-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.faqs-page .faq-article-card:hover .faq-article-card__title {
  color: #377dff;
}

.faqs-page .faq-article-card__excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.faqs-page .faq-article-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #377dff;
}

.faqs-page .faq-article-card__more i {
  transition: transform 0.2s ease;
}

.faqs-page .faq-article-card:hover .faq-article-card__more i {
  transform: translateX(3px);
}

/* ----- Staggered load for legal/FAQ hero copy (reuse heroUp) ----- */
.legal-page .home-hero__copy > *,
.faqs-page .home-hero__copy > * {
  opacity: 0;
  animation: heroUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.legal-page .home-hero__copy > *:nth-child(1),
.faqs-page .home-hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.legal-page .home-hero__copy > *:nth-child(2),
.faqs-page .home-hero__copy > *:nth-child(2) { animation-delay: 0.15s; }
.legal-page .home-hero__copy > *:nth-child(3),
.faqs-page .home-hero__copy > *:nth-child(3) { animation-delay: 0.25s; }
.legal-page .home-hero__copy > *:nth-child(4),
.faqs-page .home-hero__copy > *:nth-child(4) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .legal-page .home-hero__copy > *,
  .faqs-page .home-hero__copy > * {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Contact — "Let's talk" hero + three contact-method cards.
   Brought onto the shared SaaS type system: heavy 800 Jakarta hero, refined
   lead, and large brand-tinted icon badges on the cards. The hero sits over a
   dark photo, so its eyebrow uses a translucent-white pill (the light pages'
   grey pill would vanish here). Scoped to .contact-page. Reuses heroUp.
   ========================================================================== */

.contact-hero {
  --contact-brand: #377dff;
  --contact-accent: #5b9bff;   /* lightened brand — readable on the dark photo */
}

/* ----- Hero copy ----- */

/* Eyebrow pill, tuned for the dark hero background */
.contact-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-hero__eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--contact-accent);
  animation: heroPulse 2.6s ease-in-out infinite;
}

/* Big, heaviest-weight headline (matches the home/newsroom hero scale) */
.contact-hero__title {
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 1.25rem;
}

.contact-hero__accent {
  color: var(--contact-accent);
  white-space: nowrap;
}

/* Lead: constrained measure, calm rhythm, slightly muted for hierarchy */
.contact-hero__lead {
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  opacity: 0.85;
  text-wrap: pretty;
}

/* ----- Contact-method cards ----- */

/* Large brand-tinted icon badge that fills with brand on card hover */
.contact-page .contact-card__icon {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(55, 125, 255, 0.1);
  color: var(--contact-brand);
  font-size: 2.75rem;
  line-height: 1;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.contact-page .card:hover .contact-card__icon {
  transform: scale(1.06);
  background: var(--contact-brand);
  color: #fff;
}

/* Card title: phone/email/address — heavy, tight, wraps long emails cleanly */
.contact-page .contact-card__title {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-break: break-word;
  margin-bottom: 0.5rem;
}

/* Supporting copy: readable measure, gently muted */
.contact-page .contact-card__text {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 0;
}

/* Footer call-to-action link with the system's arrow nudge */
.contact-page .contact-card__link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--contact-brand);
}

.contact-page .contact-card__link i {
  transition: transform 0.2s ease;
}

.contact-page .card:hover .contact-card__link i {
  transform: translateX(3px);
}

/* Brand-tinted elevation + lift, consistent with the other card grids */
.contact-page .card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.contact-page .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.5rem rgba(30, 58, 138, 0.14);
}

/* ----- Staggered hero load (reuse heroUp) ----- */
.contact-page .contact-hero__copy > * {
  opacity: 0;
  animation: heroUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.contact-page .contact-hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.contact-page .contact-hero__copy > *:nth-child(2) { animation-delay: 0.15s; }
.contact-page .contact-hero__copy > *:nth-child(3) { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-hero__copy > * {
    animation: none !important;
    opacity: 1 !important;
  }

  .contact-hero__eyebrow-dot {
    animation: none !important;
  }
}

/* ==========================================================================
   Home — content sections below the hero (offerings, product spotlight,
   why-choose, process, newsroom, final CTA). Brought onto the home/SaaS
   design system: heavy Plus Jakarta Sans headings, brand-blue #377dff +
   amber #f59e0b accents (no purple), pill buttons, theme-token surfaces so
   every block is dark-mode correct. Scroll-reveal via [data-reveal] (a tiny
   IntersectionObserver inlined in the view; <noscript> degrades to visible).
   Hallmark · genre: modern-minimal · system: home brand layer (matches
   .home-hero / .home-trust / .home-cta-card) · no purple · no button glow.
   Pre-emit critique: P5 H5 E4 S4 R4 V5.
   ========================================================================== */

/* ----- Scroll reveal (shared) ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ----- Shared section atoms ----- */
.home-cap {
  display: inline-block;
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #377dff;
}

.home-section__head {
  max-width: 46rem;
  margin-bottom: 3.5rem;
}

/* Edunex SaaS section-heading scale — large + heavy (clamp 2rem → 3rem @ 800) */
.home-section__title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 1rem;
}

/* Edunex SaaS lead scale (fluid, up to 1.3rem) */
.home-section__lead {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.75;
  text-wrap: pretty;
  margin-bottom: 0;
}

.home-section__head .home-section__lead {
  max-width: 42rem;
  margin-inline: auto;
}

/* Highlighted phrase in a section heading (brand blue, matches .text-primary) */
.home-section__hl {
  color: #377dff;
}

/* --------------------------------------------------------------------------
   Home — "what we do": two offering panels (custom builds + products).
   -------------------------------------------------------------------------- */

.home-offer__panel {
  position: relative;
  height: 100%;
  padding: 2.5rem;
  border-radius: 1.25rem;
  background: var(--bs-card-bg, var(--bs-light, #fff));
  border: 1px solid var(--bs-border-color, #e7eaf3);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Accent rule across the top of each panel */
.home-offer__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: #377dff;
}

.home-offer__panel--accent::before {
  background: #f59e0b;
}

.home-offer__panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.5rem 3rem rgba(30, 58, 138, 0.14);
  border-color: transparent;
}

.home-offer__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.5rem;
  border-radius: 0.85rem;
  background: rgba(55, 125, 255, 0.12);
  color: #377dff;
  font-size: 1.5rem;
}

.home-offer__icon--accent {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
}

/* Edunex h3 sub-heading scale (clamp 1.35rem → 1.6rem) */
.home-offer__title {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.65rem;
}

.home-offer__text {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  opacity: 0.75;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.home-offer__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.75rem;
}

.home-offer__list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.0625rem;
  font-weight: 500;
}

.home-offer__list i {
  color: #377dff;
  font-weight: 700;
}

.home-offer__panel--accent .home-offer__list i {
  color: #f59e0b;
}

.home-offer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #377dff;
  text-decoration: none;
}

.home-offer__link--accent {
  color: #f59e0b;
}

.home-offer__link i {
  transition: transform 0.2s ease;
}

.home-offer__link:hover i {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Home — "real people" brand-imagery band: 2×2 photo mosaic.
   -------------------------------------------------------------------------- */
.home-people__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-card-bg);
}

.home-people__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-people__media:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .home-people__media img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Home — Edunex product spotlight (device-browser on a soft brand panel).
   -------------------------------------------------------------------------- */

.home-spotlight__visual {
  position: relative;
  padding: clamp(1.25rem, 0.5rem + 2.5vw, 2.25rem);
  border-radius: 1.5rem;
  background-image: linear-gradient(150deg, rgba(55, 125, 255, 0.10), rgba(55, 125, 255, 0.02));
  isolation: isolate;
}

/* Faint dot grid behind the screenshot, masked to fade at the edges */
.home-spotlight__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(rgba(100, 116, 139, 0.18) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 82%);
  opacity: 0.6;
}

/* Layered, brand-tinted shadow gives the screenshot real presence */
.home-spotlight__shot {
  border-radius: 0.75rem;
  border: 1px solid rgba(30, 58, 138, 0.08);
  box-shadow: 0 1rem 2rem rgba(30, 58, 138, 0.10),
    0 3rem 6rem rgba(30, 58, 138, 0.18);
}

.home-spotlight__features {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.5rem;
}

.home-spotlight__features li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.home-spotlight__check {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.55rem;
  background: rgba(55, 125, 255, 0.12);
  color: #377dff;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Home — "why choose us": icon value list + bespoke floating-chip visual.
   -------------------------------------------------------------------------- */

.home-why__list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.75rem;
}

.home-why__item {
  display: flex;
  gap: 1.1rem;
}

.home-why__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.85rem;
  font-size: 1.35rem;
}

.home-why__icon--brand { background: rgba(55, 125, 255, 0.12); color: #377dff; }
.home-why__icon--amber { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.home-why__icon--teal  { background: rgba(20, 184, 166, 0.14); color: #14b8a6; }
.home-why__icon--rose  { background: rgba(244, 63, 94, 0.12);  color: #f43f5e; }

/* Edunex h3 sub-heading scale (clamp 1.35rem → 1.6rem) */
.home-why__title {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.home-why__text {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  opacity: 0.75;
  line-height: 1.6;
  margin-bottom: 0;
}

.home-why__text a {
  font-weight: 600;
}

/* Bespoke stacked-chip visual (mirrors the hero floating chips) */
.home-why__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 22rem;
  padding: 2.25rem;
  border-radius: 1.5rem;
  background-image: linear-gradient(160deg, rgba(55, 125, 255, 0.12), rgba(245, 158, 11, 0.06));
  isolation: isolate;
  overflow: hidden;
}

.home-why__visual-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(100, 116, 139, 0.20) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.5;
}

.home-why__card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: max-content;
  max-width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: 1rem;
  background: var(--bs-card-bg, var(--bs-light, #fff));
  border: 1px solid var(--bs-border-color, #e7eaf3);
  box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, 0.12);
}

.home-why__card + .home-why__card {
  margin-top: 1.1rem;
}

.home-why__card--1 { animation: heroFloat 6s ease-in-out infinite; }
.home-why__card--2 { margin-left: auto; animation: heroFloat 6s ease-in-out infinite 1s; }
.home-why__card--3 { margin-left: 1.5rem; animation: heroFloat 6s ease-in-out infinite 2s; }

.home-why__card-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 0.7rem;
  background: rgba(55, 125, 255, 0.12);
  color: #377dff;
  font-size: 1.15rem;
}

.home-why__card-icon--amber { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.home-why__card-icon--teal  { background: rgba(20, 184, 166, 0.14); color: #14b8a6; }

.home-why__card-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.home-why__card-value {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Home — "how we work": four connected process steps.
   -------------------------------------------------------------------------- */

.home-process__steps {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* Dashed connecting line behind the number nodes (lg+) */
.home-process__steps::before {
  content: "";
  position: absolute;
  top: 1.625rem;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  z-index: 0;
  background-image: repeating-linear-gradient(90deg,
      var(--bs-border-color, #e7eaf3) 0 8px, transparent 8px 16px);
}

.home-process__step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.home-process__num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--bs-card-bg, var(--bs-light, #fff));
  border: 2px solid #377dff;
  color: #377dff;
  font-weight: 800;
  font-size: 1.25rem;
}

/* Edunex h3 sub-heading scale (clamp 1.35rem → 1.6rem) */
.home-process__title {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.home-process__text {
  font-size: 1.0625rem;
  opacity: 0.75;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 16rem;
}

/* --------------------------------------------------------------------------
   Home — newsroom teaser (editorial image-led cards).
   -------------------------------------------------------------------------- */

.home-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.home-news__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #377dff;
  white-space: nowrap;
  text-decoration: none;
}

.home-news__all i {
  transition: transform 0.2s ease;
}

.home-news__all:hover i {
  transform: translateX(4px);
}

.home-news__card {
  display: block;
  height: 100%;
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--bs-card-bg, var(--bs-light, #fff));
  border: 1px solid var(--bs-border-color, #e7eaf3);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-news__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.5rem 3rem rgba(30, 58, 138, 0.14);
  border-color: transparent;
}

.home-news__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.home-news__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.home-news__card:hover .home-news__media img {
  transform: scale(1.05);
}

/* Category pill — theme surface + body text so it adapts to dark mode */
.home-news__cat {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 50rem;
  background: var(--bs-card-bg, var(--bs-light, #fff));
  color: var(--bs-body-color);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.home-news__body {
  padding: 1.5rem;
}

/* Edunex sub-heading scale, capped slightly lower for the 3-up cards */
.home-news__title {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-news__excerpt {
  font-size: 1.0625rem;
  opacity: 0.72;
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-news__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #377dff;
}

.home-news__more i {
  transition: transform 0.2s ease;
}

.home-news__card:hover .home-news__more i {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Home — final CTA polish (extends .home-cta-card).
   -------------------------------------------------------------------------- */

/* Faint white dot texture over the brand gradient (under the content) */
.home-cta__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 30%, transparent 78%);
}

.home-cta__eyebrow {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Ghost button alongside the white pill (no glow, subtle lift) */
.home-cta .cta-btn-ghost {
  border-radius: 50rem;
  padding-inline: 2rem;
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-cta .cta-btn-ghost:hover,
.home-cta .cta-btn-ghost:focus {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Home content sections — responsive.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .home-process__steps {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }

  .home-process__steps::before {
    display: none;
  }

  .home-section__head {
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 767.98px) {
  .home-offer__panel {
    padding: 2rem;
  }

  .home-spotlight__features {
    grid-template-columns: 1fr;
  }

  .home-process__steps {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .home-why__visual {
    min-height: 0;
  }

  .home-why__card--3 {
    margin-left: 0;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .home-why__card {
    animation: none !important;
  }
}