.testimonials {
   display: flex;
   flex-wrap: wrap;
   gap: 32px;
   justify-content: center;
   margin-top: 8px;
   width: 100%;
   max-width: 1100px;
}

.testimonials-section {
   clear: both;
   margin-top: 120px;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   z-index: 10;
   padding: 48px 24px;
   background: linear-gradient(180deg, rgba(28, 35, 145, 0.05), rgba(255, 106, 0, 0.04));
   border-radius: 24px;
   border: 1px solid rgba(28, 35, 145, 0.08);
   isolation: isolate;
}

.testimonials-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 120px;
   height: 4px;
   border-radius: 999px;
   background: linear-gradient(90deg, #ff6a00, #1c2391);
}

/* NEW — animated rotating light border */
.testimonials-section::after {
   content: '';
   position: absolute;
   inset: -2px;
   border-radius: 26px;
   padding: 2px;
   z-index: -1;
   background: conic-gradient(from var(--border-angle, 0deg),
         transparent 0%,
         transparent 65%,
         #ff6a00 78%,
         #1c2391 88%,
         transparent 96%);
   -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   animation: borderRotate 4s linear infinite;
}

@property --border-angle {
   syntax: '<angle>';
   inherits: false;
   initial-value: 0deg;
}

@keyframes borderRotate {
   to {
      --border-angle: 360deg;
   }
}

@media (max-width: 900px) {
   .testimonials {
      gap: 18px;
      margin-bottom: 18px;
      max-width: 100%;
   }

   .testimonial {
      max-width: 98vw;
      min-width: 180px;
      font-size: 1rem;
      padding: 18px 10px;
   }
}

/* logo */
.header>.container {
   padding-left: 12px;
   padding-right: 12px;
}

/* === Product Section Enhancements === */
.product-intro h2 {
   color: #1c2391;
   font-weight: 700;
}

.product-filters {
   margin-bottom: 18px;
}

.filter-btn {
   background: #fff;
   color: #1c2391;
   border: 2px solid #1c2391;
   border-radius: 999px;
   padding: 8px 22px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s, color 0.2s, border 0.2s;
   outline: none;
}

.filter-btn[aria-selected="true"],
.filter-btn:focus-visible {
   background: linear-gradient(90deg, #ff6a00 0%, #ff9f45 100%);
   color: #fff;
   border-color: #ff6a00;
}

.filter-btn:focus-visible {
   box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18);
}

.badge.featured-badge {
   display: inline-block;
   background: linear-gradient(90deg, #ff6a00, #ff9f45);
   color: #fff;
   font-size: 0.92em;
   font-weight: 700;
   border-radius: 999px;
   padding: 4px 16px;
   margin-bottom: 6px;
   margin-right: 8px;
   letter-spacing: 0.7px;
   vertical-align: middle;
   box-shadow: 0 2px 8px rgba(255, 106, 0, 0.13);
}

.micro-highlight {
   display: inline-block;
   font-size: 0.85em;
   font-weight: 600;
   border-radius: 8px;
   padding: 2px 10px;
   margin-bottom: 6px;
   margin-right: 6px;
   color: #fff;
   vertical-align: middle;
}

.micro-highlight.new {
   background: #1c2391;
}

.micro-highlight.popular {
   background: #ff6a00;
}

.micro-highlight.award {
   background: #23c482;
}

.testimonials-section h3 {
   color: #1c2391;
   font-weight: 700;
}

.testimonial {
   border-left: 4px solid #ff6a00;
}

/* Cookie consent banner */
.cookie-consent {
   position: fixed;
   bottom: 16px;
   left: 16px;
   right: 16px;
   max-width: 640px;
   margin: 0 auto;
   background: #1c2391;
   color: #fff;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
   padding: 12px 18px;
   border-radius: 12px;
   z-index: 3000;
   font-size: 13px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
   gap: 12px;
}

#accept-cookies {
   margin-left: 0 !important;
   padding: 8px 20px !important;
   min-height: 36px !important;
   font-size: 13px !important;
}

/* Accessibility: visible focus for all buttons and links */
a:focus-visible,
button:focus-visible {
   outline: 2.5px solid #ff6a00;
   outline-offset: 2px;
   box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18);
   border-radius: 6px;
   transition: outline 0.2s, box-shadow 0.2s;
}

/* Hide skip-link except when focused (accessibility) */
.skip-link {
   position: absolute;
   left: -999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
   z-index: 10000;
   background: #fff;
   color: #1c2391;
   padding: 12px 24px;
   border-radius: 8px;
   font-weight: 600;
   transition: left 0.2s;
}

.skip-link:focus {
   left: 16px;
   top: 16px;
   width: auto;
   height: auto;
   outline: 2.5px solid #ff6a00;
   box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18);
}

.restoapp-img-media {
   width: 480px;
   max-width: 95vw;
   height: 260px;
   background: var(--primary, #ff6a00);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border-radius: 24px;
   margin-left: auto;
   margin-right: auto;
   box-shadow: 0 4px 32px 0 rgba(255, 106, 0, 0.10);
}

.restoapp-img-media img {
   width: 120px;
   height: 120px;
   object-fit: contain;
   border-radius: 24px;
   display: block;
   background: #fff;
   margin: 0 auto;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
   padding: 12px;
}

/* ============================================================
   SAARASOFTTECH — Main Stylesheet
   ------------------------------------------------------------
   File    : css/style.css
   Purpose : All styles for the single-page company website
   Author  : Saara Softtech
   Updated : March 2026

   BRAND COLOR REFERENCE
   ─────────────────────
   Primary orange   #ff6a00  → CTAs, accents, highlights, stat numbers
   Brand navy       #1c2391  → footer, product buttons, catalogue pills,
                               brand-stripe left half, heading accent bar
   Dark ink         #0b1c2d  → body text (light mode)
   Soft ink         #20344d  → secondary / muted text (light mode)
   Deep navy bg     #08121f  → hero gradient start
   Warm dark end    #3d2a22  → hero gradient tail (warm embers)
   Contact dark bg  #0b1c2d  → .bg-dark section background

   Z-INDEX LAYERS
   ──────────────
   .header          z-index: 1000   → fixed nav, always on top
   .back-to-top     z-index: 1001   → above header on scroll
   .video-modal     z-index: 9999   → highest — over everything
   .hero-content    z-index: 5      → above hero orbs and grid
   .signal-core     z-index: 3      → above signal rings
   .signal-node     z-index: 2      → above rings, below core
   .cursor-glow     z-index: 0      → ambient, below all content

   ANIMATION TIMINGS
   ─────────────────
   --transition         280ms cubic-bezier(.2,.8,.2,1)  → micro-interactions
   heroSignalReveal     1.2s  → signal widget entrance
   signalSpin           16s   → outer ring rotation (slow, ambient)
   signalSpinReverse    11s   → inner ring counter-rotation
   signalCorePulse      6s    → core scale + glow breath
   nodePulse            4.8s  → node opacity/glow pulse (staggered 0.8s)
   floatOrb             12s   → hero background orb float
   tickerMove           22s   → capability ticker marquee speed
   pulse                2.6s  → badge heartbeat
   ============================================================ */

/* ============================================================
   1. RESET & DESIGN TOKENS
   ============================================================ */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}

:root {
   /* ── Primary brand orange used for CTAs, stats, card borders on hover ── */
   --primary: #ff6a00;
   /* ── Main body text color (dark navy ink) ── */
   --ink: #0b1c2d;
   /* ── Secondary / muted text ── */
   --ink-soft: #20344d;
   /* ── Page background (white in light mode) ── */
   --surface: #ffffff;
   /* ── Slightly off-white background for alternating sections ── */
   --surface-muted: #f4f6fa;
   /* ── Default card / element drop-shadow ── */
   --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
   /* ── Shared easing for hover transitions (snappy ease-out) ── */
   --transition: 280ms cubic-bezier(.2, .8, .2, 1);
}

html {
   scroll-behavior: smooth;
   overflow-x: hidden;
}

body {
   color: var(--ink);
   line-height: 1.6;
   background: var(--surface);
   transition: background-color var(--transition), color var(--transition);
   overflow-x: hidden;
}

/* ── Dark mode: CSS variables are overridden here so every
      component using var(--ink) / var(--surface) etc. flips
      automatically without separate colour declarations. ── */
body.theme-dark {
   --ink: #dbe7f5;
   /* light blue-white text on dark bg */
   --ink-soft: #a9bfd8;
   /* muted text, subtitles */
   --surface: #07111d;
   /* very dark navy page background */
   --surface-muted: #0b1a2a;
   /* slightly lighter for alternate sections */
   --shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
   /* deeper shadows on dark */
}

/* ── .container: centred content wrapper, 90% wide, max 1300px ── */
.container {
   width: 90%;
   max-width: 1300px;
   margin: auto;
}

section {
   scroll-margin-top: 96px;
}

/* ============================================================
   2. HEADER & NAVIGATION
   ── Fixed at top (z-index:1000), frosted-glass effect via
      backdrop-filter. Brand stripe is a child div at the bottom.
   ============================================================ */
/* Frosted glass nav bar — rgba bg + blur so page content shows through */
/* dark-theme override for the FAQ section */
.header {
   background: rgba(255, 255, 255, 0.86);
   backdrop-filter: blur(12px);
   padding: 12px 0;
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
   position: fixed;
   width: 100%;
   z-index: 1000;
   padding: 12px 0 16px;
}

body.theme-dark .faq-section {
   background: #091827;
   border-top-color: rgba(255, 255, 255, 0.08);
   border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .faq-section h2 {
   color: #eef5ff;
}

body.theme-dark .faq-section .section-subtitle {
   color: #a9bfd8;
}

body.theme-dark .faq-item {
   background: linear-gradient(155deg, rgba(12, 27, 43, 0.95), rgba(10, 23, 37, 0.88));
   border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .faq-item summary {
   color: #ff9f45;
}

body.theme-dark .faq-item p {
   color: #a9bfd8;
}

/* Brand stripe: 5px tall bar at the bottom of the header.
   Left half  = brand navy  #1c2391
   Right half = brand orange #ff6a00
   The ::after pseudo injects a skewX(-14deg) blade to create
   the diagonal cut between the two colours (matching brand identity). */
.brand-stripe {
   height: 5px;
   width: 100%;
   background: linear-gradient(100deg, #1c2391 0%, #1c2391 47%, #ff6a00 53%, #ff6a00 100%);
   position: relative;
   overflow: hidden;
}

.brand-stripe::after {
   content: "";
   position: absolute;
   top: 0;
   left: 45.5%;
   width: 9%;
   height: 100%;
   background: linear-gradient(100deg, #1c2391, #ff6a00);
   transform: skewX(-14deg);
}

.header>.container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 18px;
   flex-wrap: nowrap;
}

.nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 18px;
   flex-wrap: nowrap;
   width: 100%;
}

.logo img {
   height: clamp(42px, 2.5vw, 48px);
   width: auto;
   max-width: 180px;
   object-fit: contain;
   transition: transform var(--transition), box-shadow var(--transition);
}

.logo img:hover {
   transform: scale(1.04);
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: 14px;
   justify-content: flex-end;
   flex: 1 1 auto;
}

.site-menu {
   display: flex;
   align-items: center;
   gap: 18px;
   flex-wrap: wrap;
   max-width: 100%;
   box-sizing: border-box;
}

.site-menu a {
   margin: 0;
   padding: 10px 0;
   color: var(--ink);
   font-weight: 500;
   text-decoration: none;
   position: relative;
   transition: color var(--transition), transform var(--transition);
   white-space: nowrap;
}

.site-menu a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 0;
   height: 2px;
   background: var(--primary);
   transition: width var(--transition);
}

.site-menu a:hover {
   color: var(--primary);
}

.site-menu a:hover::after {
   width: 100%;
}

.site-menu {
   z-index: 1005;
}

.site-menu.open {
   max-height: calc(100vh - 116px);
   overflow: auto;
   width: 100%;
   max-width: 520px;
   padding: 20px;
}

.hamburger {
   display: none;
   position: relative;
   width: 42px;
   height: 42px;
   border-radius: 0;
   border: none;
   background: transparent;
   color: #0b1c2d;
   cursor: pointer;
   align-items: center;
   justify-content: center;
   padding: 0;
   transition: transform var(--transition), opacity var(--transition);
}

.hamburger:hover {
   opacity: 0.7;
}

.hamburger span {
   display: block;
   width: 20px;
   height: 2px;
   border-radius: 999px;
   background: currentColor;
   transition: transform var(--transition), opacity var(--transition);
   position: absolute;
   left: 11px;
}

.hamburger span:nth-child(1) {
   top: 14px;
}

.hamburger span:nth-child(2) {
   top: 20px;
}

.hamburger span:nth-child(3) {
   top: 26px;
}

.hamburger.open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
   opacity: 0;
}

.hamburger.open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

.theme-toggle {
   width: 42px;
   height: 42px;
   margin-left: 18px;
   padding: 0;
   margin-bottom: 6px;

   border-radius: 50%;
   border: 1px solid rgba(11, 28, 45, 0.14);

   background: rgba(255, 255, 255, 0.86);
   color: #0b1c2d;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   flex-shrink: 0;

   cursor: pointer;

   transition:
      transform var(--transition),
      box-shadow var(--transition),
      background var(--transition);
}

.theme-toggle:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.theme-icon {
   font-size: 18px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

@media (max-width:900px) {
   .header>.container {
      flex-wrap: nowrap;
      align-items: center;
      min-height: 66px;
   }

   .nav {
      flex-wrap: nowrap;
   }

   .nav-actions {
      width: auto;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      padding-right: 12px;
   }

   .hamburger {
      display: flex;
      width: 38px;
      height: 38px;
      margin-left: 0;
   }

   .site-menu {
      position: absolute;
      top: 100%;
      right: 16px;
      left: 16px;
      margin: 0;
      padding: 16px;
      flex-direction: column;
      gap: 12px;
      background: rgba(4, 18, 45, 0.92);
      backdrop-filter: blur(18px);
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 24px 52px rgba(12, 22, 41, .16);
      max-height: calc(100vh - 96px);
      overflow: auto;
      transform: translateY(-8px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
      z-index: 1006;
   }

   .site-menu.open {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }

   .site-menu a {
      width: 100%;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #fff;
   }

   .site-menu a:hover {
      color: #ffb86c;
   }

   .site-menu a::after {
      display: none;
   }

   .theme-toggle {
      margin-left: 0;
   }
}

/* ============================================================
   3. HERO SECTION
   ── Full-viewport dark gradient with three layers:
      (a) Hero orbs      — blurred radial blobs (z-index:1)
      (b) Hero grid      — faint dot grid masked to centre (z-index:2)
      (c) Hero content   — text, badge, CTA (z-index:5)
   Hero background gradient:
      #08121f → #132943 → #21304f → #3d2a22
      Deep navy start, warmer dark-ember tail (brand warmth)
   ============================================================ */
.hero {
   height: 100vh;
   min-height: calc(100vh - 90px);
   background: linear-gradient(135deg, #08121f 0%, #132943 42%, #21304f 68%, #3d2a22 100%);
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #fff;
   position: relative;
   isolation: isolate;
   overflow: hidden;
   padding: clamp(2rem, 4vw, 5rem) 0 2rem;
}

.hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at top 18% left 42%, rgba(255, 106, 0, 0.18), transparent 30%), radial-gradient(circle at 78% 15%, rgba(255, 255, 255, 0.08), transparent 25%), linear-gradient(180deg, rgba(8, 18, 31, 0.25), rgba(8, 18, 31, 0.5));
   pointer-events: none;
   opacity: 0.8;
}

.hero-video-wrap {
   position: absolute;
   inset: 0;
   overflow: hidden;
   z-index: 0;
   pointer-events: none;
   background: #08121f;
}

.hero-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.75;
   transform: scale(1.02);
   filter: brightness(0.9) contrast(1.05);
}

.hero-network {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
   background-size: 46px 46px;
   opacity: 0.18;
   mask-image: radial-gradient(circle at center, black 40%, transparent 78%);
}

/* isolation:isolate creates a new stacking context, keeping hero layers
   separate from the rest of the page scroll */
.hero-content {
   position: relative;
   z-index: 5;
   text-align: center;
   max-width: clamp(28rem, 72vw, 980px);
   margin-inline: auto;
   padding: 0 1rem;
}

/* new css */
.badge {
   margin-bottom: 18px;
}

.hero-title {
   display: flex;
   flex-direction: column;
   gap: 2px;
   font-size: clamp(1.8rem, 4vw, 3rem);
   margin: 8px 0 14px;
   line-height: 1.12;
}

.hero-title-line {
   display: block;
}

.hero-title-line.typing-caret::after {
   content: "";
   display: inline-block;
   width: 2px;
   height: 0.9em;
   margin-left: 6px;
   background: #fff;
   vertical-align: middle;
   animation: blink 900ms steps(2, end) infinite;
}

@media (max-width:900px) {
   .hero-title {
      font-size: 30px;
   }
}

@media (max-width:640px) {
   .hero-title {
      font-size: 24px;
   }

   .nav {
      padding-left: 16px;
      padding-right: 16px;
   }

   .nav-toggle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
   }

   /* logo */
   .header>.container {
      padding-left: 16px;
      padding-right: 16px;
   }

   /* Dark theme */
   .theme-toggle {
      width: 38px;
      height: 38px;
      margin-left: 8px;
   }

   .theme-icon {
      font-size: 16px;
   }
}



/* .hero h1 {
   font-size: clamp(2.8rem, 5vw, 4.8rem);
   margin: 0 auto 1rem;
   line-height: 1.02;
   max-width: 13ch;
   letter-spacing: -0.03em;
} */

.hero p {
   font-size: clamp(1rem, 1.1vw, 1.18rem);
   margin-bottom: 1.8rem;
}

.hero-text-loop {
   margin: 12px auto 18px;
   max-width: 820px
}

;

.hero-metrics {
   max-width: clamp(26rem, 68vw, 820px);
   margin-inline: auto;
}

.hero-heading {
   display: inline-block;
   white-space: pre-wrap;
   overflow-wrap: break-word;
   text-align: center;
}

.hero-heading-line {
   display: block;
}

.hero-heading.has-caret::after {
   content: "";
   display: inline-block;
   width: 2px;
   height: 1.05em;
   margin-left: 8px;
   background: #fff;
   vertical-align: middle;
   animation: blink 900ms steps(2, end) infinite;
}

@keyframes blink {

   0%,
   100% {
      opacity: 0;
   }

   50% {
      opacity: 1;
   }
}

/* ── Hero Signal Widget ──────────────────────────────────────
   Positioned top-left on desktop (top:-42px, left:0).
   On ≤900px it becomes centred above the headline.
   Two rings spin in opposite directions at different speeds
   to suggest live signal / AI activity.
   Outer ring colour: rgba(70,82,148,.88) — blueberry navy
   Inner ring colour: rgba(255,159,69,.42) — warm amber
   Core orb: radial gradient orange #ff9f45 → #ff6a00 → #c14300
   ───────────────────────────────────────────────────────── */
/* was: top:-42px; left:0; — anchored to the shifting hero-content box */
.hero-signal {
   position: absolute;
   top: clamp(80px, 8vw, 120px);
   left: clamp(20px, 4vw, 60px);
   width: 168px;
   height: 168px;
   display: grid;
   place-items: center;
   animation: heroSignalReveal 1.2s cubic-bezier(.2, .8, .2, 1) both;
   pointer-events: none;
}

.signal-ring {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .24);
}

.signal-ring.outer {
   animation: signalSpin 16s linear infinite;
   border-color: rgba(70, 82, 148, .88);
   box-shadow: 0 0 20px rgba(45, 58, 116, .42);
}

.signal-ring.inner {
   inset: 26px;
   animation: signalSpinReverse 11s linear infinite;
   border-color: rgba(255, 159, 69, .42);
}

.signal-core {
   width: 112px;
   height: 112px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: radial-gradient(circle at 30% 30%, rgba(255, 159, 69, .95), rgba(255, 106, 0, .78) 55%, rgba(193, 67, 0, .78));
   box-shadow: 0 0 24px rgba(255, 106, 0, .45);
   animation: signalCorePulse 6s ease-in-out infinite;
   position: relative;
   z-index: 3;
   padding: 10px;
}

.signal-core span {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .9px;
   color: #fff;
   text-transform: uppercase;
   line-height: 1.35;
   text-align: center;
}

/* Four nodes placed at N/E/S/W compass points, staggered 0.8s apart */
.signal-node {
   position: absolute;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 0 12px rgba(255, 255, 255, .9);
   z-index: 2;
}

.signal-node.n1 {
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
   animation: nodePulse 4.8s ease-in-out infinite;
}

.signal-node.n2 {
   top: 50%;
   right: 8px;
   transform: translateY(-50%);
   animation: nodePulse 4.8s ease-in-out infinite .8s;
}

.signal-node.n3 {
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   animation: nodePulse 4.8s ease-in-out infinite 1.6s;
}

.signal-node.n4 {
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
   animation: nodePulse 4.8s ease-in-out infinite 2.4s;
}

/* Pill badge above headline — brand-style navy/orange capsule inspired by the catalogue and header stripe */
.badge {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
   padding: 10px 22px;
   border-radius: 999px;
   background: linear-gradient(100deg, #1c2391 0%, #1c2391 58%, #ff6a00 64%, #ff6a00 100%);
   border: 1px solid rgba(255, 255, 255, 0.16);
   box-shadow: 0 14px 30px rgba(8, 18, 31, .28), 0 0 0 1px rgba(255, 255, 255, .06) inset;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .9px;
   text-transform: uppercase;
   position: relative;
   overflow: hidden;
   isolation: isolate;
   line-height: 1.05;
   margin-top: clamp(20px, 5vw, 48px);
   margin-bottom: 18px;
}

.badge::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
   opacity: .55;
   z-index: -1;
}

.badge::after {
   content: "";
   position: absolute;
   top: 0;
   left: 55%;
   width: 12%;
   height: 100%;
   background: linear-gradient(100deg, #1c2391, #ff6a00);
   transform: skewX(-18deg);
   opacity: .9;
   z-index: -1;
}

.badge span {
   display: block;
}

/* ── Primary CTA button — orange gradient, lifts + glows on hover ── */
/* #ff7e2f → #ff5e00 creates an angled warmth matching brand orange */
.btn-primary {
   background: linear-gradient(135deg, #ff7e2f, #ff5e00);
   color: #fff;
   padding: 15px 30px;
   border-radius: 14px;
   text-decoration: none;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
   border: none;
   cursor: pointer;
   min-height: 48px;
   font-size: 0.96rem;
}

.btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 24px rgba(255, 106, 0, 0.35);
   filter: brightness(1.05);
}

.btn-primary,
.product-link,
.demo-btn,
.download-app-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 48px;
   padding: 0 24px;
   border-radius: 12px;
   font-size: 0.95rem;
   font-weight: 700;
   transition: transform var(--transition), box-shadow var(--transition), background var(--transition), filter var(--transition);
   text-decoration: none;
   flex: 1 1 auto;
   text-align: center;
}

/* ============================================================
   4. SECTION LAYOUT UTILITIES
   ============================================================ */
.section {
   padding: 120px 0;
}

/* generous top/bottom space for all sections */
.bg-light {
   background: var(--surface-muted);
}

/* off-white alternating section */

/* .bg-dark: used for the Contact section
   Deep navy gradient + orange radial glow in top-left corner */
.bg-dark {
   background: linear-gradient(180deg, #0b1c2d, #091728);
   color: #fff;
   position: relative;
   overflow: hidden;
}

/* decorative ambient orb — brand orange, blurred, top-left */
.bg-dark::before {
   content: "";
   position: absolute;
   inset: -35% auto auto -20%;
   width: 350px;
   height: 350px;
   background: radial-gradient(circle at center, rgba(255, 106, 0, 0.25), transparent 70%);
   pointer-events: none;
}

.two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
}

/* Stats: 3 equal-width counter tiles */
.stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.stats div {
   background: #fff;
   padding: 30px;
   text-align: center;
   border-radius: 12px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
   transition: transform var(--transition), box-shadow var(--transition);
}

.stats div:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
}

/* Stat number colour = primary orange #ff6a00 */
.stats h3 {
   font-size: 32px;
   color: #ff6a00;
}

/* Auto-fit card grid — collapses from 3-col to 2-col to 1-col naturally */
.cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
   margin-top: 50px;
}

.card {
   background: rgba(255, 255, 255, 0.82);
   backdrop-filter: blur(10px);
   padding: 40px;
   border-radius: 15px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
   transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
   text-align: center;
   font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Border flashes orange on hover to reinforce brand accent */
.card:hover {
   transform: translateY(-12px) scale(1.01);
   box-shadow: 0 22px 34px rgba(12, 22, 41, 0.14);
   border-color: rgba(255, 106, 0, 0.35);
}

/* .highlight: 6px solid orange top border for the industry-sector cards */
.highlight {
   border-top: 6px solid #ff6a00;
}

.center {
   text-align: center;
}

.section-subtitle {
   max-width: 760px;
   margin: 14px auto 0;
   color: var(--ink-soft);
}

/* Decorative underline bar injected after every section h2
   gradient: orange #ff6a00 → navy #1c2391 (brand pair)
   centred when h2 has the .center class */
.section:not(.catalogue-section) h2::after {
   content: "";
   display: block;
   width: 48px;
   height: 3px;
   background: linear-gradient(90deg, #ff6a00, #1c2391);
   border-radius: 999px;
   margin: 10px 0 0;
}

.section:not(.catalogue-section) h2.center::after {
   margin: 10px auto 0;
}

.contact {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: start;
}

@media (max-width: 900px) {
   .contact {
      grid-template-columns: 1fr;
      gap: 30px;
   }
}

.contact-form {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.contact-form input,
.contact-form textarea {
   padding: 14px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.97);
}

.contact-form textarea {
   min-height: 110px;
   resize: vertical;
}

/* Footer: brand navy background #1c2391 to mirror the brand stripe top of page */
footer {
   text-align: center;
   padding: 25px;
   background: #1c2391;
   color: #fff;
   font-size: 14px;
}

.footer-badge {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1px;
   margin: 0 6px;
   padding: 6px 14px;
   border-radius: 999px;
   background: #1c2391;
   border: 1px solid rgba(255, 255, 255, .18);
   box-shadow: 0 8px 18px rgba(5, 12, 24, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset;
   color: #fff;
   font-size: 12px;
   font-weight: 900;
   letter-spacing: .8px;
   text-transform: uppercase;
   vertical-align: middle;
   position: relative;
   overflow: hidden;
   line-height: 1.1;
   border-width: 2px;
}

.footer-badge::after {
   display: none;
}

.footer-badge span {
   display: block;
   color: #fff;
   font-weight: 900;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   5. CATALOGUE SECTION
   ── Light blue-grey gradient background to differ from white sections.
   ── Two-column layout: copy panel (left) + iframe preview (right).
   ── Kicker badge uses brand orange tint.
   ── Preview bar uses near-black navy gradient for a "browser chrome" look.
   ============================================================ */
/* Gradient: very light blue-white — clean, airy, document-like feel */
.catalogue-section {
   position: relative;
   background: linear-gradient(180deg, #f8fbff 0%, #f5f8fc 48%, #eef3f9 100%);
   overflow: hidden;
   isolation: isolate;
}

/* Decorative orange radial blur in top-right corner */
.catalogue-section::before {
   content: "";
   position: absolute;
   top: -120px;
   right: -90px;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 106, 0, .16), rgba(255, 106, 0, 0) 68%);
   pointer-events: none;
   z-index: 0;
}

/* Brand watermark: uses the existing Saara Softtech logo image so the crane-bird motif
   from the catalogue is present in the section without showing a hard duplicate logo. */
.catalogue-section::after {
   content: "";
   position: absolute;
   left: -24px;
   bottom: 28px;
   width: 240px;
   height: 240px;
   background: url('../images/logo.png') center/contain no-repeat;
   opacity: .08;
   filter: grayscale(1) contrast(1.05);
   pointer-events: none;
   z-index: 0;
   transform: rotate(-8deg);
}

.catalogue-heading {
   margin-bottom: 26px;
}

/* Kicker: small uppercase pill above the heading — orange tint bg, dark orange text */
.catalogue-kicker {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(255, 106, 0, .1);
   border: 1px solid rgba(255, 106, 0, .18);
   color: #bf4f00;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .9px;
   text-transform: uppercase;
}

/* Catalogue h2 uses deep navy #0d2237 (slightly darker than brand navy for better contrast) */
.catalogue-heading h2 {
   margin-top: 16px;
   font-size: clamp(1.8rem, 4vw, 40px);
   color: #0d2237;
}

/* Left = slightly narrower (.95fr), right = slightly wider (1.15fr) for preview */
.catalogue-wrap {
   display: grid;
   grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.2fr);
   gap: 28px;
   align-items: stretch;
}

@media (max-width: 900px) {
   .catalogue-wrap {
      grid-template-columns: 1fr;
   }
}

.catalogue-copy {
   background: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.88));
   border: 1px solid rgba(11, 28, 45, .08);
   border-radius: 22px;
   padding: 30px;
   box-shadow: 0 18px 40px rgba(10, 24, 40, .08);
   position: relative;
   z-index: 1;
}

.catalogue-topline {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 14px;
}

/* Pill badge: solid brand navy #1c2391 background — matches footer + product buttons */
.catalogue-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 7px 12px;
   border-radius: 999px;
   background: #1c2391;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .4px;
}

/* Muted pill variant: very faint navy tint for secondary labels */
.catalogue-pill.muted {
   background: rgba(16, 37, 59, .08);
   color: #20344d;
}

.catalogue-copy h3 {
   font-size: 32px;
   line-height: 1.15;
   color: #0d2237;
}

.catalogue-copy p {
   margin-top: 14px;
   color: #314a66;
}

/* 2x2 grid of highlight tiles inside the copy panel */
.catalogue-highlights {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
   margin-top: 22px;
}

.catalogue-highlights div {
   background: rgba(244, 246, 250, .92);
   border: 1px solid rgba(11, 28, 45, .07);
   border-radius: 16px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

/* Highlight label uses brand navy #1c2391 for visual hierarchy */
.catalogue-highlights strong {
   font-size: 15px;
   color: #1c2391;
}

.catalogue-highlights span {
   font-size: 14px;
   color: #51667f;
}

.catalogue-actions {
   margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
   align-items: stretch;
}

.catalogue-actions .btn-primary,
.catalogue-actions .product-link {
   width: 100%;
}

.catalogue-actions .product-link {
   background: #1c2391;
   color: #fff;
}

.catalogue-actions .product-link:hover {
   background: #2230b0;
}

/* Right panel: white card housing the PDF iframe */
.catalogue-preview {
   background: rgba(255, 255, 255, .88);
   border: 1px solid rgba(11, 28, 45, .08);
   border-radius: 22px;
   overflow: hidden;
   box-shadow: 0 18px 40px rgba(10, 24, 40, .08);
   min-height: 520px;
   display: flex;
   flex-direction: column;
   position: relative;
   z-index: 1;
}

/* Dark top bar (“browser chrome”) — near-black navy gradient */
.catalogue-preview-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 18px;
   background: linear-gradient(180deg, rgba(16, 37, 59, .98), rgba(11, 28, 45, .95));
   color: #eef5ff;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .2px;
}

.catalogue-preview-tag {
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .12);
   font-size: 11px;
   letter-spacing: .8px;
   text-transform: uppercase;
}

.catalogue-preview iframe {
   width: 100%;
   height: 100%;
   min-height: 520px;
   border: none;
   background: #fff;
}

/* Homepage overrides kept in source CSS so style.min.css stays authoritative. */
.carousel-track {
   min-height: 0;
   transition: height .35s ease;
}

.case-card {
   top: 0;
   right: 0;
   bottom: auto;
   left: 0;
   height: auto;
}

.product-media {
   --media-pad: 12px;
   --media-scale: 1;
}

.product-media picture {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--media-pad);
}

.product-media img {
   width: auto !important;
   height: auto !important;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain !important;
   padding: 0 !important;
   background: transparent !important;
   transform: scale(var(--media-scale));
   transform-origin: center;
}

.sakhis-img-media,
.balut-img-media,
.fooder-img-media,
.eatontime-img-media,
.maintenance-img-media,
.fastrack-img-media,
.temple-img-media,
.restoapp-img-media {
   --media-pad: 14px;
}

.sakhis-img-media,
.fastrack-img-media,
.temple-img-media {
   --media-pad: 10px;
}

.maintenance-img-media {
   --media-scale: 2;
   --media-breath-scale: 2.06;
   --media-pad: 2px;
}

.temple-img-media {
   --media-scale: 1.5;
   --media-breath-scale: 1.55;
   --media-pad: 6px;
}

.catalogue-preview {
   min-height: 0;
   height: clamp(420px, 62vw, 820px);
}

.catalogue-preview iframe {
   min-height: 0;
   height: 100%;
   flex: 1 1 auto;
}

.feature-grid {
   margin: 12px 0 0;
   padding: 0;
   list-style: none;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
}

.feature-grid li {
   background: rgba(255, 106, 0, .08);
   border: 1px solid rgba(255, 106, 0, .14);
   border-radius: 12px;
   color: #314a66;
   font-size: 14px;
   line-height: 1.45;
   padding: 10px 12px;
   min-height: 100%;
}

/* ============================================================
   6. PRODUCTS CAROUSEL
   ── Arrow buttons (prev/next) flank the track.
   ── 7 cards stacked via position:absolute; only .active card
      is visible (opacity:1, translateX:0).
   ── Dots below act as both indicators and jump-to buttons.
   ── Arrow button colour: orange gradient (#ff8b43 → #ff5f05)
   ── Dot active colour: var(--primary) = #ff6a00
   ============================================================ */
/* 3-column grid: [prev-btn] [track] [next-btn] */
.carousel {
   margin-top: 36px;
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 16px;
   align-items: center;
}

/* touch-action:pan-y lets the browser handle vertical scroll while
   JS intercepts horizontal swipe distance for slide changes */
/* min-height is a fallback; JS expands the track to match the active card. */
.carousel-track {
   position: relative;
   min-height: 480px;
   touch-action: pan-y;
   transition: height .35s ease;
}

.carousel-track:focus-visible {
   outline: 2px solid rgba(255, 106, 0, .65);
   outline-offset: 6px;
   border-radius: 18px;
}

/* Cards are absolutely stacked — inactive are invisible & non-interactive */
.case-card {
   position: absolute;
   inset: 0;
   background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
   padding: 32px;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, .55);
   box-shadow: var(--shadow);
   opacity: 0;
   transform: translateX(40px) scale(.98);
   pointer-events: none;
   transition: opacity .55s ease, transform .55s ease;
}

.case-card.active {
   opacity: 1;
   transform: translateX(0) scale(1);
   pointer-events: auto;
}

.case-card h3 {
   font-size: 30px;
   line-height: 1.2;
   color: #0d2237;
}

.case-card p {
   margin-top: 12px;
   color: #314a66;
}

.case-meta {
   margin-top: 18px;
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.case-meta span {
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(255, 106, 0, .12);
   color: #bf4f00;
   font-size: 13px;
   font-weight: 600;
}

.product-media {
   height: 120px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
   position: relative;
   overflow: hidden;
}

.product-media::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
}

.product-media span {
   position: relative;
   font-size: 32px;
   font-weight: 700;
   color: #fff;
   letter-spacing: 1px;
   text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.sakhis-img-media {
   height: 160px;
   background: #0d5b12;
}

.sakhis-img-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 14px;
   display: block;
   background: #0d5b12;
}

.sakhis-img-media::before {
   display: none;
}

.balut-img-media {
   height: 160px;
   background: #f5eedc;
}

.balut-img-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 14px;
   display: block;
   padding: 12px;
}

.balut-img-media::before {
   display: none;
}

.fooder-img-media {
   height: 160px;
   background: #ffffff;
}

.fooder-img-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 14px;
   display: block;
   padding: 16px;
}

.fooder-img-media::before {
   display: none;
}

.eatontime-img-media {
   height: 160px;
   background: #fff;
}

.eatontime-img-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 14px;
   display: block;
   padding: 8px;
}

.eatontime-img-media::before {
   display: none;
}

.maintenance-img-media {
   height: 160px;
   background: #ffffff;
}

.maintenance-img-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 14px;
   display: block;
   padding: 12px;
   background: #ffffff;
}

.maintenance-img-media::before {
   display: none;
}

.fastrack-img-media {
   height: 170px;
   background: #0f1724;
}

.fastrack-img-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 14px;
   display: block;
   padding: 6px;
}

.fastrack-img-media::before {
   display: none;
}

.temple-img-media {
   height: 170px;
   background: #fff7eb;
}

.temple-img-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 14px;
   display: block;
   padding: 8px;
}

.temple-img-media::before {
   display: none;
}

.restoapp-img-media {
   width: 100%;
   max-width: 700px;
   height: 400px;
   background: #d35400;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
   margin-left: auto;
   margin-right: auto;
   box-shadow: 0 4px 32px 0 rgba(255, 106, 0, 0.10);
}

.restoapp-img-media img {
   width: 360px;
   height: 240px;
   object-fit: contain;
   border-radius: 16px;
   display: block;
   background: #fff8f1;
   margin: 0 auto;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
   padding: 8px 18px;
}

.media-sakhis {
   background: linear-gradient(135deg, #0c9962, #23c482);
}

.media-balut {
   background: linear-gradient(135deg, #9a5d17, #d38a2f);
}

.media-fooder {
   background: linear-gradient(135deg, #ff6a00, #ff9f45);
}

.media-eatontime {
   background: linear-gradient(135deg, #0059a8, #0099dd);
}

.media-maintenance {
   background: linear-gradient(135deg, #4a3fa0, #7c6fd4);
}

.media-fastrack {
   background: linear-gradient(135deg, #9b1c1c, #ef4444);
}

.media-temple {
   background: linear-gradient(135deg, #8b2e15, #d68a1c);
}

/* Product link: secondary action button — solid brand navy #1c2391
   Hover lightens to #2230b0 (a step brighter on the same hue) */
.product-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   text-decoration: none;
   background: #1c2391;
   color: #fff;
   padding: 0 18px;
   border-radius: 14px;
   font-weight: 700;
   transition: transform var(--transition), background var(--transition);
   border: none;
   cursor: pointer;
   font-family: inherit;
   font-size: 0.95rem;
   min-height: 48px;
   min-width: 120px;
   line-height: 1.2;
}

.product-link:hover {
   transform: translateY(-2px);
   background: #2230b0;
}

.product-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 18px;
}

.product-actions .product-link {
   margin-top: 0;
}

.product-download-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   width: 100%;
   margin-top: 14px;
   padding: 12px;
   border: 1px solid #d9e4f5;
   border-radius: 8px;
   background: linear-gradient(180deg, #f8fbff, #eef5ff);
   box-shadow: 0 8px 20px rgba(28, 35, 145, .08);
}

.product-download-label {
   color: #1c2391;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.2;
}

.product-download-box .download-app-btn {
   margin-top: 0;
   background: linear-gradient(135deg, #0f9f5a, #0b8e63);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .22);
   box-shadow: 0 8px 18px rgba(11, 127, 71, .26);
   font-weight: 700;
   min-width: 112px;
   text-align: center;
   transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.product-download-box .download-app-btn:hover,
.product-download-box .download-app-btn:focus-visible {
   background: linear-gradient(135deg, #16ae6b, #0f9a66);
   transform: translateY(-2px);
   filter: saturate(1.06);
   box-shadow: 0 14px 28px rgba(11, 127, 71, .34);
}

.eatontime-downloads {
   display: flex;
   justify-content: center;
   margin-top: 16px;
}

.eatontime-downloads .product-download-box {
   max-width: 420px;
}

/* Demo button variant: overrides to brand orange gradient */
.demo-btn {
   background: linear-gradient(135deg, #ff7e2f, #ff5e00);
}

.demo-btn:hover {
   background: linear-gradient(135deg, #ff9a55, #ff7020);
}

.video-modal {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
}

.video-modal[hidden] {
   display: none;
}

.video-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .82);
   backdrop-filter: blur(6px);
}

.video-modal-box {
   position: relative;
   width: min(90vw, 860px);
   background: #000;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 32px 64px rgba(0, 0, 0, .6);
}

.video-modal-box video {
   width: 100%;
   display: block;
   max-height: 76vh;
}

.video-modal-close {
   position: absolute;
   top: 12px;
   right: 14px;
   z-index: 1;
   background: rgba(0, 0, 0, .6);
   color: #fff;
   border: none;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   font-size: 20px;
   cursor: pointer;
   line-height: 1;
   transition: background var(--transition);
}

.video-modal-close:hover {
   background: rgba(255, 94, 0, .85);
}

/* ── Carousel navigation arrows — orange gradient circles ── */
/* Box-shadow uses rgba(255,94,0,…) for a matching orange glow */
.carousel-btn {
   width: 46px;
   height: 46px;
   border: none;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff8b43, #ff5f05);
   color: #fff;
   cursor: pointer;
   font-size: 20px;
   box-shadow: 0 8px 16px rgba(255, 94, 0, .25);
   transition: transform var(--transition), box-shadow var(--transition);
}

.carousel-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 20px rgba(255, 94, 0, .35);
}

.carousel-btn:focus-visible {
   outline: 2px solid rgba(255, 106, 0, .65);
   outline-offset: 2px;
}

/* Dot indicators — inactive: grey #8ca0b7, active: primary orange */
.carousel-dots {
   margin-top: 20px;
   display: flex;
   justify-content: center;
   gap: 10px;
}

.carousel-dots .dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #8ca0b7;
   display: inline-block;
   transition: transform var(--transition), background var(--transition);
   cursor: pointer;
}

.carousel-dots .dot.active {
   background: var(--primary);
   transform: scale(1.35);
}

/* active dot = #ff6a00 */

.hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(3px);
   opacity: .45;
   z-index: 1;
   animation: floatOrb 12s ease-in-out infinite;
}

.orb-1 {
   width: 360px;
   height: 360px;
   background: radial-gradient(circle at 30% 30%, rgba(255, 126, 47, 0.9), rgba(255, 126, 47, 0));
   top: 10%;
   left: -80px;
}

.orb-2 {
   width: 480px;
   height: 480px;
   background: radial-gradient(circle at 40% 40%, rgba(255, 170, 87, 0.45), rgba(255, 170, 87, 0));
   bottom: -180px;
   right: -120px;
   animation-delay: -5s;
}

.hero-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
   background-size: 46px 46px;
   mask-image: radial-gradient(circle at center, black 38%, transparent 78%);
   opacity: .24;
   z-index: 2;
}

.hero-metrics {
   display: flex;
   justify-content: center;
   gap: 14px;
   margin: 0 0 22px;
   flex-wrap: wrap;
}

.hero-metrics div {
   background: rgba(255, 255, 255, 0.12);
   padding: 14px 18px;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.22);
   min-width: 170px;
}

.hero-metrics strong {
   display: block;
   font-size: 22px;
}

.hero-metrics span {
   font-size: 13px;
   opacity: .92;
}

/* ============================================================
   8. TICKER BAR
   ── Infinite marquee of technology capabilities.
   ── Border colours: top = brand navy rgba(28,35,145,.7)
                      bottom = brand orange rgba(255,106,0,.55)
   ── Each item has an orange dot bullet via ::before.
   ── The track is duplicated in HTML to achieve seamless looping.
   ============================================================ */
.ticker {
   background: #07182a;
   color: #c7d8ea;
   padding: 12px 0;
   overflow: hidden;
   border-top: 2px solid rgba(28, 35, 145, .7);
   border-bottom: 2px solid rgba(255, 106, 0, .55);
}

.ticker-track {
   display: flex;
   gap: 42px;
   white-space: nowrap;
   animation: tickerMove 22s linear infinite;
   width: max-content;
}

.ticker-track span {
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: .85px;
   position: relative;
}

/* Orange dot prefix before each ticker item */
.ticker-track span::before {
   content: "";
   position: absolute;
   left: -22px;
   top: 50%;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--primary);
   transform: translateY(-50%);
}

/* ============================================================
   9. SCROLL-REVEAL UTILITY
   ── .reveal-up: initial hidden state, animated in by JS
      IntersectionObserver adding .is-visible class.
   ── Delay variants: .delay-1 (+120ms), .delay-2 (+240ms)
   ============================================================ */
.reveal-up {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .75s ease, transform .75s ease;
}

.reveal-up.delay-1 {
   transition-delay: .12s;
}

.reveal-up.delay-2 {
   transition-delay: .24s;
}

.reveal-up.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* Badge pulse: gentle scale beat on the hero badge pill */
.pulse {
   animation: pulse 2.6s ease-in-out infinite;
}

/* ============================================================
   10. BACK-TO-TOP BUTTON
   ── Fixed bottom-right. Hidden until 500px scroll.
   ── Orange gradient matches .btn-primary.
   ── z-index:1001 sits above the fixed header (1000).
   ============================================================ */
.back-to-top {
   position: fixed;
   right: 24px;
   bottom: 32px;
   width: 48px;
   height: 48px;
   border: none;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff7e2f, #ff5e00);
   color: #fff;
   font-size: 20px;
   cursor: pointer;
   box-shadow: 0 10px 20px rgba(255, 94, 0, .35);
   opacity: 0;
   transform: translateY(10px);
   pointer-events: none;
   transition: opacity var(--transition), transform var(--transition);
   z-index: 1001;
}

.back-to-top.visible {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

/* ============================================================
   11. CURSOR GLOW
   ── Ambient pointer-tracking blob (desktop only).
   ── mix-blend-mode:multiply only shows effect on light bg.
   ── Hidden at ≤900px breakpoint.
   ============================================================ */
.cursor-glow {
   position: fixed;
   inset: auto auto 0 0;
   width: 280px;
   height: 280px;
   border-radius: 50%;
   background: radial-gradient(circle at center, rgba(255, 106, 0, .16), rgba(255, 106, 0, 0));
   pointer-events: none;
   z-index: 0;
   mix-blend-mode: multiply;
   filter: blur(8px);
}

/* ============================================================
   12. DARK THEME OVERRIDES
   ── All component-level overrides when body.theme-dark is set.
   ── Variables (--ink, --surface etc.) handle most cases;
      these rules handle elements with hard-coded colours.
   ============================================================ */
/* newly added */
.logo-dark {
   display: none;
}

body.theme-dark .logo-light {
   display: none;
}

body.theme-dark .logo-dark {
   display: block;
   transform: translateY(-3px);
}



body.theme-dark .header {
   background: #0d1330;

   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35);
}

body.theme-dark nav a {
   color: #d8e7f7;
}

body.theme-dark .nav-toggle {
   background: transparent;
   color: #dbe7f5;
   border-color: rgba(255, 255, 255, 0.22);
}

body.theme-dark .nav-toggle:hover {
   background: rgba(255, 106, 0, 0.08);
   color: #ff9f45;
   border-color: #ff6a00;
}

/* Hambugger btn dark theme */
body.theme-dark .hamburger {
   background: transparent;
   color: #ecf4ff;
   border: none;
}

body.theme-dark .theme-toggle {
   width: 42px;
   background: rgba(9, 24, 40, .92);
   color: #ecf4ff;
   border-color: rgba(255, 255, 255, .18);

   border: 1px solid rgba(255, 255, 255, 0.16);

   display: inline-flex;
   align-items: center;
   justify-content: center;

   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

   transition: all 0.25s ease;
}

body.theme-dark .theme-toggle:hover {
   background: #12263a;
   border-color: rgba(255, 106, 0, 0.55);
   color: #ff9f45;
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

body.theme-dark .theme-icon {
   font-size: 17px;
   line-height: 1;
}

/* Cards get a dark translucent navy background */
body.theme-dark .stats div,
body.theme-dark .card,
body.theme-dark .case-card {
   background: linear-gradient(155deg, rgba(12, 27, 43, 0.95), rgba(10, 23, 37, 0.88));
   border-color: rgba(255, 255, 255, .08);
   box-shadow: var(--shadow);
}

body.theme-dark .section-subtitle,
body.theme-dark .case-card p {
   color: #a9bfd8;
}

body.theme-dark .case-card h3 {
   color: #eef5ff;
}

/* Meta tag: background shifts to darker orange tint, text to warm cream */
body.theme-dark .case-meta span {
   background: rgba(255, 106, 0, .22);
   color: #ffd0ae;
}

/* Product links become orange on dark (navy would vanish on dark bg) */
body.theme-dark .product-link {
   background: #ff6a00;
   color: #fff;
}

body.theme-dark .product-link:hover {
   background: #ff8742;
}

/* Catalogue dark overrides: section bg → very dark navy gradient */
body.theme-dark .catalogue-section {
   background: linear-gradient(180deg, #08131f 0%, #091827 55%, #0a1725 100%);
}

body.theme-dark .catalogue-section::after {
   opacity: .1;
   filter: grayscale(1) brightness(1.7) contrast(1.05);
}

body.theme-dark .catalogue-kicker {
   background: rgba(255, 106, 0, .14);
   border-color: rgba(255, 106, 0, .22);
   color: #ffc39d;
}

body.theme-dark .catalogue-heading h2 {
   color: #eef5ff;
}

body.theme-dark .catalogue-copy,
body.theme-dark .catalogue-preview {
   background: linear-gradient(155deg, rgba(12, 27, 43, 0.95), rgba(10, 23, 37, 0.88));
   border-color: rgba(255, 255, 255, .08);
}

/* Catalogue pills stay orange on dark for visibility */
body.theme-dark .catalogue-pill {
   background: #ff6a00;
   color: #fff;
}

body.theme-dark .catalogue-pill.muted {
   background: rgba(255, 255, 255, .08);
   color: #d7e5f5;
}

body.theme-dark .catalogue-copy h3 {
   color: #eef5ff;
}

body.theme-dark .catalogue-copy p {
   color: #a9bfd8;
}

body.theme-dark .catalogue-highlights div {
   background: rgba(255, 255, 255, .04);
   border-color: rgba(255, 255, 255, .08);
}

body.theme-dark .catalogue-highlights strong {
   color: #eef5ff;
}

body.theme-dark .catalogue-highlights span {
   color: #a9bfd8;
}

body.theme-dark .contact-form input,
body.theme-dark .contact-form textarea {
   background: rgba(6, 18, 30, 0.95);
   color: #ebf4ff;
   border-color: rgba(255, 255, 255, .14);
}

body.theme-dark .bg-light {
   background: #091827;
}

body.theme-dark footer {
   background: #02060b;
}

/* About Below Section CSS */
#about .stats div {
   position: relative;
   overflow: hidden;
   transition: transform var(--transition), box-shadow var(--transition);
}

#about .stats div::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(90deg, #ff6a00, #1c2391);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 400ms ease;
}

#about .stats div:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 28px rgba(28, 35, 145, 0.12);
}

#about .stats div:hover::before {
   transform: scaleX(1);
}

/* footer goes near-black in dark mode to avoid navy-on-dark clash */

/* ============================================================
   13. KEYFRAME ANIMATIONS
   ============================================================ */
/* Hero signal widget entrance — scales up from 70% while fading in */
@keyframes heroSignalReveal {
   0% {
      opacity: 0;
      transform: scale(.7) translateY(20px);
   }

   100% {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

/* Outer ring: full 360° rotation in 16s (slow ambient spin) */
@keyframes signalSpin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* Inner ring: counter-clockwise at a different speed for contrast */
@keyframes signalSpinReverse {
   0% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

/* Core orb: gentle 6% scale pulse with matching glow change */
@keyframes signalCorePulse {

   0%,
   100% {
      transform: scale(1);
      box-shadow: 0 0 18px rgba(255, 106, 0, .38);
   }

   50% {
      transform: scale(1.06);
      box-shadow: 0 0 28px rgba(255, 106, 0, .62);
   }
}

/* Node pulse: opacity + glow oscillation; nodes offset 0.8s each */
@keyframes nodePulse {

   0%,
   100% {
      opacity: .55;
      box-shadow: 0 0 10px rgba(255, 255, 255, .62);
   }

   50% {
      opacity: 1;
      box-shadow: 0 0 18px rgba(255, 255, 255, .98);
   }
}

/* Background orbs: slow diagonal float for subtle life */
@keyframes floatOrb {

   0%,
   100% {
      transform: translateY(0) translateX(0);
   }

   50% {
      transform: translateY(-24px) translateX(16px);
   }
}

/* Ticker marquee: moves track by 50% (half) because HTML items are duplicated */
@keyframes tickerMove {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

/* Badge heartbeat: subtle scale for the hero pill */
@keyframes pulse {

   0%,
   100% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.04);
   }
}

/* ============================================================
   14. RESPONSIVE BREAKPOINTS
   ── 900px: tablets and small laptops → single-column layouts
   ── 640px: phones → tighter padding, smaller text
   ── prefers-reduced-motion: disables all animations for
      users who have requested reduced motion in their OS.
   ============================================================ */
@media(max-width:900px) {

   .two-col,
   .contact {
      grid-template-columns: 1fr;
   }

   .stats {
      grid-template-columns: 1fr;
   }

   .hero h1 {
      font-size: clamp(2.5rem, 6vw, 3.6rem);
   }

   .hero p {
      font-size: clamp(1rem, 2.4vw, 1.05rem);
   }

   .section {
      padding: 90px 0;
   }

   .hero {
      min-height: 640px;
      padding-top: 70px;
   }

   .hero-network {
      opacity: 0.14;
   }

   .hero-grid {
      opacity: 0.18;
   }

   .hero-metrics div {
      min-width: 140px;
   }

   .nav {
      gap: 12px;
   }

   .site-menu {
      right: 16px;
      left: 16px;
      width: calc(100% - 32px);
      max-width: 520px;
   }

   .site-menu.open {
      top: 100%;
      width: calc(100% - 32px);
   }

   nav a {
      margin-left: 16px;
      font-size: 14px;
   }

   .theme-toggle {
      margin-left: 10px;
      width: 38px;
      height: 38px;
   }

   .carousel {
      grid-template-columns: 1fr;
   }

   .carousel-btn {
      display: none;
   }

   .carousel-track {
      min-height: 520px;
   }

   .catalogue-heading h2 {
      font-size: 34px;
   }

   .catalogue-highlights {
      grid-template-columns: 1fr 1fr;
   }

   .catalogue-wrap {
      grid-template-columns: 1fr;
   }

   .catalogue-preview,
   .catalogue-preview iframe {
      min-height: 420px;
   }

   .catalogue-preview {
      height: clamp(360px, 95vw, 680px);
   }

   .feature-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .catalogue-section::after {
      width: 180px;
      height: 180px;
      left: -18px;
      bottom: 18px;
      opacity: .07;
   }

   .cursor-glow {
      display: none !important;
   }
}

/* ── 640px: Phone breakpoint ── */
@media(max-width:640px) {
   .logo img {
      height: 34px;
   }

   nav a {
      margin-left: 12px;
      font-size: 13px;
   }

   .hero p {
      font-size: 16px;
   }

   .hero-metrics {
      gap: 10px;
   }

   .hero-metrics div {
      padding: 10px 12px;
      min-width: 120px;
   }

   .btn-primary {
      padding: 13px 20px;
   }

   .cards {
      grid-template-columns: 1fr;
   }

   .case-card {
      padding: 22px;
   }

   .case-card h3 {
      font-size: 24px;
   }

   .catalogue-heading h2 {
      font-size: 28px;
   }

   .catalogue-copy {
      padding: 22px;
   }

   .catalogue-highlights {
      grid-template-columns: 1fr;
   }

   .catalogue-preview-bar {
      padding: 12px 14px;
   }

   .product-media {
      height: 92px;
   }

   .feature-grid {
      grid-template-columns: 1fr;
   }

   .catalogue-section::after {
      width: 140px;
      height: 140px;
      left: -12px;
      bottom: 14px;
   }

   .catalogue-actions {
      flex-direction: column;
      align-items: stretch;
   }

   .catalogue-actions .btn-primary,
   .catalogue-actions .product-link {
      width: 100%;
   }
}

/* Honour OS-level reduced-motion preference — disable every animation */
@media(prefers-reduced-motion:reduce) {
   * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
   }
}

/* ── CONTINUOUS BORDER GLOW ANIMATION ── */
@property --banner-border-angle {
   syntax: '<angle>';
   inherits: false;
   initial-value: 0deg;
}

@keyframes bannerBorderRotate {
   to {
      --banner-border-angle: 360deg;
   }
}

/* ── PRODUCT CARD CONTAINER & OUTER BORDER GLOW ── */
#products .case-card,
#products .product-card {
   position: relative !important;
   border-radius: 20px !important;
   background: linear-gradient(155deg, #ffffff 0%, #f7f9ff 100%) !important;
   border: 1px solid rgba(28, 35, 145, 0.12) !important;
   box-shadow: 0 10px 30px rgba(16, 29, 66, 0.08) !important;
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
   overflow: hidden !important;
   isolation: isolate !important;
}

#products .case-card:hover,
#products .product-card:hover {
   transform: translateY(-6px) !important;
   box-shadow: 0 22px 50px rgba(28, 35, 145, 0.18) !important;
}

body.theme-dark #products .case-card,
body.theme-dark #products .product-card {
   background: linear-gradient(155deg, #0a1324 0%, #060d19 100%) !important;
   border-color: rgba(255, 255, 255, 0.1) !important;
   box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Continuous Glowing Outer Border on Product Cards */
#products .case-card::before,
#products .product-card::before {
   content: '' !important;
   position: absolute !important;
   inset: -2px !important;
   border-radius: 22px !important;
   padding: 2px !important;
   z-index: -1 !important;
   pointer-events: none !important;
   background: conic-gradient(from var(--banner-border-angle, 0deg),
         transparent 0%,
         transparent 50%,
         #ff6a00 70%,
         #00d2ff 85%,
         #1c2391 95%,
         transparent 100%) !important;
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
   -webkit-mask-composite: xor !important;
   mask-composite: exclude !important;
   animation: bannerBorderRotate 6s linear infinite !important;
   opacity: 0.75 !important;
   transition: opacity 0.3s ease !important;
}

#products .case-card:hover::before,
#products .product-card:hover::before {
   opacity: 1 !important;
}

/* ── PRODUCT BANNER SLIDER (CARD & MODAL) ── */
.product-banner-slider {
   position: relative !important;
   width: 100% !important;
   height: 200px !important;
   border-radius: 16px !important;
   overflow: hidden !important;
   margin-bottom: 18px !important;
   background: #091322 !important;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
   isolation: isolate !important;
}

/* Continuous Glowing Frame around Banner Box (kosoftwares style) */
.product-banner-slider::after,
.modal-banner-slider::after {
   content: '' !important;
   position: absolute !important;
   inset: 0 !important;
   border-radius: 16px !important;
   padding: 2px !important;
   z-index: 5 !important;
   pointer-events: none !important;
   background: conic-gradient(from var(--banner-border-angle, 0deg),
         transparent 0%,
         transparent 50%,
         #ff6a00 70%,
         #00d2ff 85%,
         #1c2391 95%,
         transparent 100%) !important;
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
   -webkit-mask-composite: xor !important;
   mask-composite: exclude !important;
   animation: bannerBorderRotate 5s linear infinite !important;
}

.card-banner-track {
   position: relative !important;
   width: 100% !important;
   height: 100% !important;
}

/* Dual-Layer Smart Banner Fitting */
.card-banner-slide,
.modal-banner-slide {
   position: absolute !important;
   inset: 0 !important;
   opacity: 0 !important;
   transform: scale(1.03) !important;
   transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   overflow: hidden !important;
   pointer-events: none !important;
   background: radial-gradient(circle at center, #182642 0%, #070e1c 100%) !important;
}

.card-banner-slide.active,
.modal-banner-slide.active {
   opacity: 1 !important;
   transform: scale(1) !important;
   pointer-events: auto !important;
}

/* Ambient Blurred Background Copy */
.banner-bg-blur {
   position: absolute !important;
   inset: -20px !important;
   width: calc(100% + 40px) !important;
   height: calc(100% + 40px) !important;
   object-fit: cover !important;
   filter: blur(28px) brightness(0.65) saturate(1.3) !important;
   opacity: 0.65 !important;
   pointer-events: none !important;
   user-select: none !important;
   transform: scale(1.15) !important;
}

.image-lightbox {
   position: fixed;
   inset: 0;
   z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
}

.image-lightbox[hidden] {
   display: none;
}

.image-lightbox-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(4, 10, 24, 0.9);
   backdrop-filter: blur(6px);
}

.image-lightbox-img {
   position: relative;
   z-index: 1;
   max-width: 92vw;
   max-height: 92vh;
   width: auto;
   height: auto;
   object-fit: contain;
   border-radius: 12px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
   animation: detailPanelIn 240ms ease;
}

.image-lightbox-close {
   position: fixed;
   top: 20px;
   right: 24px;
   z-index: 2;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, 0.14);
   color: #fff;
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   transition: background 0.2s ease, transform 0.2s ease;
}

.image-lightbox-close:hover {
   background: #ff6a00;
   transform: rotate(90deg);
}

.image-lightbox {
   position: fixed;
   inset: 0;
   z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
}

.image-lightbox[hidden] {
   display: none;
}

.image-lightbox-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(4, 10, 24, 0.92);
   backdrop-filter: blur(6px);
}

.image-lightbox-stage {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 92vw;
   max-height: 88vh;
}

.image-lightbox-img {
   max-width: 92vw;
   max-height: 88vh;
   width: auto;
   height: auto;
   object-fit: contain;
   border-radius: 12px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
   animation: detailPanelIn 240ms ease;
}

.image-lightbox-close {
   position: fixed;
   top: 20px;
   right: 24px;
   z-index: 3;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, 0.14);
   color: #fff;
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   transition: background 0.2s ease, transform 0.2s ease;
}

.image-lightbox-close:hover {
   background: #ff6a00;
   transform: rotate(90deg);
}

.image-lightbox-arrow {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   z-index: 3;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: rgba(8, 17, 36, 0.7);
   color: #fff;
   font-size: 24px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, transform 0.2s ease;
}

.image-lightbox-arrow:hover {
   background: linear-gradient(135deg, #ff7e2f, #ff5e00);
   transform: translateY(-50%) scale(1.08);
}

.image-lightbox-arrow.prev {
   left: 20px;
}

.image-lightbox-arrow.next {
   right: 20px;
}

.image-lightbox-dots {
   position: fixed;
   bottom: 28px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   display: flex;
   gap: 8px;
}

.image-lightbox-dot {
   width: 9px;
   height: 9px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.4);
   cursor: pointer;
   transition: width 0.25s ease, background 0.25s ease;
}

.image-lightbox-dot.active {
   width: 24px;
   background: linear-gradient(90deg, #ff6a00, #ff9f45);
}

.image-lightbox-counter {
   position: fixed;
   top: 24px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   background: rgba(8, 17, 36, 0.7);
   padding: 5px 14px;
   border-radius: 999px;
}

@media (max-width: 640px) {
   .image-lightbox-arrow {
      width: 40px;
      height: 40px;
      font-size: 20px;
   }

   .image-lightbox-arrow.prev {
      left: 8px;
   }

   .image-lightbox-arrow.next {
      right: 8px;
   }
}

/* Main Crisp Foreground Image */
.banner-fg-img,
.modal-banner-img {
   position: relative !important;
   z-index: 2 !important;
   max-width: 90% !important;
   max-height: 88% !important;
   width: auto !important;
   height: auto !important;
   object-fit: contain !important;
   display: block !important;
   margin: auto !important;
   filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38)) !important;
   transition: transform 0.35s ease, filter 0.35s ease !important;
}

.modal-banner-img {
   cursor: zoom-in !important;
}

.modal-banner-img:hover {
   transform: scale(1.035) !important;
   filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.48)) !important;
}

/* Arrow Navigation Buttons */
.card-banner-arrow,
.modal-banner-arrow {
   position: absolute !important;
   top: 50% !important;
   transform: translateY(-50%) !important;
   width: 36px !important;
   height: 36px !important;
   border-radius: 50% !important;
   background: rgba(8, 17, 36, 0.78) !important;
   backdrop-filter: blur(8px) !important;
   color: #fff !important;
   border: 1px solid rgba(255, 255, 255, 0.25) !important;
   font-size: 20px !important;
   cursor: pointer !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   z-index: 10 !important;
   transition: opacity 0.25s, background 0.25s, transform 0.25s, border-color 0.25s !important;
}

.card-banner-arrow {
   opacity: 0 !important;
}

.product-banner-slider:hover .card-banner-arrow {
   opacity: 1 !important;
}

.card-banner-arrow:hover,
.modal-banner-arrow:hover {
   background: linear-gradient(135deg, #ff7e2f, #ff5e00) !important;
   border-color: #ff9f60 !important;
   transform: translateY(-50%) scale(1.12) !important;
   box-shadow: 0 6px 16px rgba(255, 94, 0, 0.4) !important;
}

.card-banner-arrow.prev,
.modal-banner-arrow.prev {
   left: 10px !important;
}

.card-banner-arrow.next,
.modal-banner-arrow.next {
   right: 10px !important;
}

/* Capsule Indicator Dots with Glowing Pill Active State */
.card-banner-dots,
.modal-banner-dots {
   position: absolute !important;
   bottom: 10px !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   display: flex !important;
   align-items: center !important;
   gap: 7px !important;
   z-index: 10 !important;
   background: rgba(4, 10, 24, 0.65) !important;
   padding: 5px 14px !important;
   border-radius: 20px !important;
   backdrop-filter: blur(8px) !important;
   border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.card-banner-dot,
.modal-banner-dot {
   width: 8px !important;
   height: 8px !important;
   border-radius: 999px !important;
   background: rgba(255, 255, 255, 0.45) !important;
   cursor: pointer !important;
   transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}

.card-banner-dot.active,
.modal-banner-dot.active {
   width: 22px !important;
   background: linear-gradient(90deg, #ff6a00, #ff9f45) !important;
   box-shadow: 0 0 10px rgba(255, 106, 0, 0.6) !important;
}

/* ── SPLASH MODAL REDESIGN ── */
.product-detail-modal {
   position: fixed !important;
   inset: 0 !important;
   z-index: 9998 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.product-detail-modal[hidden] {
   display: none !important;
}

.product-detail-backdrop {
   position: absolute !important;
   inset: 0 !important;
   background: rgba(4, 10, 24, 0.82) !important;
   backdrop-filter: blur(14px) !important;
}

.product-detail-panel {
   position: relative !important;
   width: min(94vw, 920px) !important;
   max-height: 88vh !important;
   background: #ffffff !important;
   border-radius: 24px !important;
   box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
   overflow: hidden !important;
   animation: detailPanelIn 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
   isolation: isolate !important;
}

body.theme-dark .product-detail-panel {
   background: #091325 !important;
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Panel continuous border glow */
.product-detail-panel::before {
   content: '' !important;
   position: absolute !important;
   inset: 0 !important;
   border-radius: 24px !important;
   padding: 2px !important;
   pointer-events: none !important;
   z-index: 10 !important;
   background: conic-gradient(from var(--banner-border-angle, 0deg),
         transparent 0%,
         #ff6a00 35%,
         #00d2ff 65%,
         transparent 100%) !important;
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
   -webkit-mask-composite: xor !important;
   mask-composite: exclude !important;
   animation: bannerBorderRotate 8s linear infinite !important;
   opacity: 0.85 !important;
}

.product-detail-header {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   gap: 16px !important;
   padding: 18px 24px !important;
   background: linear-gradient(135deg, #0f1b40 0%, #1c2391 100%) !important;
   color: #ffffff !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.product-detail-header h3 {
   font-size: 1.35rem !important;
   font-weight: 800 !important;
   margin: 0 !important;
   letter-spacing: 0.3px !important;
   display: flex !important;
   align-items: center !important;
   gap: 10px !important;
}

.product-detail-header h3::before {
   content: '✦' !important;
   color: #ff6a00 !important;
   font-size: 1.1rem !important;
}

.product-detail-close {
   width: 38px !important;
   height: 38px !important;
   border: none !important;
   border-radius: 50% !important;
   background: rgba(255, 255, 255, 0.14) !important;
   color: #ffffff !important;
   font-size: 22px !important;
   line-height: 1 !important;
   cursor: pointer !important;
   transition: transform 0.25s ease, background 0.25s ease !important;
}

.product-detail-close:hover {
   background: #ff6a00 !important;
   transform: rotate(90deg) scale(1.1) !important;
}

.product-detail-body {
   max-height: calc(88vh - 72px) !important;
   overflow-y: auto !important;
   padding: 24px 28px 28px !important;
   scroll-behavior: smooth !important;
}

.product-detail-body p {
   font-size: 1.04rem !important;
   color: #334155 !important;
   line-height: 1.7 !important;
   margin-bottom: 18px !important;
}

body.theme-dark .product-detail-body p {
   color: #cbd5e1 !important;
}

/* Feature Points in Splash Modal */
.product-detail-body ul {
   list-style: none !important;
   padding: 0 !important;
   margin: 20px 0 24px !important;
   display: grid !important;
   gap: 10px !important;
}

.detail-point {
   position: relative !important;
   padding: 12px 18px 12px 44px !important;
   background: rgba(28, 35, 145, 0.04) !important;
   border: 1px solid rgba(28, 35, 145, 0.09) !important;
   border-radius: 12px !important;
   font-size: 0.96rem !important;
   color: #1e293b !important;
   line-height: 1.5 !important;
}

body.theme-dark .detail-point {
   background: rgba(255, 255, 255, 0.04) !important;
   border-color: rgba(255, 255, 255, 0.08) !important;
   color: #e2e8f0 !important;
}

.detail-point::before {
   content: '✓' !important;
   position: absolute !important;
   left: 14px !important;
   top: 50% !important;
   transform: translateY(-50%) !important;
   width: 20px !important;
   height: 20px !important;
   border-radius: 50% !important;
   background: linear-gradient(135deg, #ff7e2f, #ff5e00) !important;
   color: #fff !important;
   font-size: 11px !important;
   font-weight: 900 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

/* Modal Banner Slider Height & Box */
.detail-modal-slider-wrapper {
   margin-bottom: 22px !important;
}

.modal-banner-slider {
   position: relative !important;
   width: 100% !important;
   height: 300px !important;
   border-radius: 18px !important;
   overflow: hidden !important;
   background: #070e1c !important;
   box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28) !important;
}

.modal-slide-counter {
   position: absolute !important;
   top: 12px !important;
   right: 12px !important;
   background: rgba(8, 17, 36, 0.78) !important;
   color: #fff !important;
   padding: 5px 12px !important;
   border-radius: 20px !important;
   font-size: 0.8rem !important;
   font-weight: 600 !important;
   backdrop-filter: blur(8px) !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
   z-index: 10 !important;
}

/* Action Buttons in Splash Modal */
.detail-action-row .detail-action-btn {
   padding: 12px 24px !important;
   border-radius: 12px !important;
   font-weight: 700 !important;
   font-size: 0.98rem !important;
   letter-spacing: 0.2px !important;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
   transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.detail-action-row .detail-action-btn:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}