/* ============================================================
   NORTH LOOP DIGITAL MEDIA — Main Stylesheet
   Auros-inspired design elements + 50% larger sizing + 200% larger logo
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
*, *:before, *:after {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}

/* ── Universal Underline Eradication ─────────────────────────── */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus,
button,
u,
ins,
abbr,
span,
p,
h1, h2, h3, h4, h5, h6,
.nav-link,
.nav-cta,
.mobile-link,
.mobile-cta,
.btn,
.btn-primary,
.btn-ghost,
.btn-full,
.blog-read-more,
.service-arrow,
.footer-col a,
.footer-bottom a,
.footer-email,
.footer-socials a,
.explore_inner-link,
.model-btn,
.preset-pill,
.open-article-btn,
.article-modal-body a,
.article-modal-close,
.drama-text,
.accent-text,
#hero-cycle {
  text-decoration: none !important;
  text-decoration-line: none !important;
  outline: none;
}

:root {
  /* ── User-Specified Palette Tokens ── */
  --pacific-blue:   #33a0b0;
  --cerulean:       #287a9c;
  --steel-azure:    #154d86;
  --regal-navy:     #123d6a;
  --black:          #000000;

  /* ── North Loop Surface Stack (Luxury Black & Blue Matrix) ── */
  --loop-ink:       #000000;
  --loop-depth:     #04101e;
  --loop-current:   #092038;
  --loop-mid:       #123d6a;
  --loop-raised:    #154d86;

  /* ── Text Hierarchy ── */
  --platinum:       #FFFFFF;
  --fog-silver:     #B0C7D8;
  --loop-mist:      #E6F5F8;
  --ash:            #F0F6FA;
  --slate:          #6C8296;
  --pink-stat:      #D8EFF8;

  /* ── Accent & Boundaries ── */
  --teal-accent:    #33a0b0;
  --teal-deep:      #287a9c;
  --teal-border:    rgba(40, 122, 156, 0.4);
  --teal-border-hi: rgba(51, 160, 176, 0.55);

  /* ── Luxury Oceanic & Cyber Gradients ── */
  --loop-grad:      linear-gradient(90deg, #33a0b0 0%, #287a9c 45%, #154d86 100%);
  --eyebrow-grad:   linear-gradient(90deg, #e6f5f8 0%, #85d8e5 26%, #ffffff 48%, #33a0b0 89%);
  --display-grad:   linear-gradient(90deg, #e6f5f8 0%, #33a0b0 100%);
  --teal-glow-grad: radial-gradient(circle, rgba(51, 160, 176, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  --bg-gradient:    linear-gradient(180deg, #000000 0%, #04101e 15%, #092038 35%, #04101e 55%, #0d2847 75%, #000000 100%);

  /* ── Typography ── */
  --font:       'DM Sans', sans-serif;
  --font-drama: 'Playfair Display', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* ── Spacing ── */
  --section-gap:    140px;
  --card-radius:    16px;
  --btn-radius:     8px;
  --card-pad:       48px;
}

/* ── Base ─────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size: 17px;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

body {
  background: #000000;
  background: linear-gradient(180deg, #000000 0%, #030c17 12%, #081d33 30%, #030c17 50%, #0a233d 72%, #000000 100%);
  background-attachment: fixed;
  color: var(--fog-silver);
  font-family: var(--font);
  font-weight: 400;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  cursor: default;
  line-height: 1.7;
}

/* ── Global Film Grain Noise Overlay ────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  overflow: hidden;
}
.noise-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Typography Drama Text ────────────────────────────────── */
.drama-text {
  font-family: var(--font-drama);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #33a0b0 0%, #72d0de 40%, #FFFFFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ── Universal Native Cursor Hide (Applied dynamically when mouse is detected) ── */
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor * {
  cursor: none !important;
}

/* ── Custom Concentric Circle-Within-Circle Cursor ───────────── */
.cursor {
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none !important;
  z-index: 999999 !important;
  will-change: transform;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 10px #33a0b0, 0 0 20px rgba(51, 160, 176, 0.9), 0 0 2px #FFFFFF;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.25s ease;
  opacity: 0;
}

.cursor-trail {
  width: 42px;
  height: 42px;
  border: 2px solid #33a0b0;
  background: rgba(51, 160, 176, 0.14);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none !important;
  z-index: 999998 !important;
  will-change: transform;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 16px rgba(51, 160, 176, 0.45), inset 0 0 10px rgba(51, 160, 176, 0.18);
  transition: width 0.25s cubic-bezier(0.25, 1, 0.5, 1), height 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  opacity: 0;
}

/* Hover over interactive targets: concentric outer circle expands with glowing halo */
.cursor-trail.hovered {
  width: 58px;
  height: 58px;
  border-color: #72d0de;
  background: rgba(51, 160, 176, 0.24);
  box-shadow: 0 0 25px rgba(51, 160, 176, 0.7), inset 0 0 14px rgba(114, 208, 222, 0.3);
}

.cursor.hovered {
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  box-shadow: 0 0 14px #72d0de, 0 0 28px rgba(114, 208, 222, 1);
}

/* Glass Card Hover State: Optical Frosted Refraction Lens */
.cursor-trail.glass-hover {
  width: 66px;
  height: 66px;
  border: 1.5px solid rgba(114, 208, 222, 0.85);
  background: rgba(51, 160, 176, 0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 
    0 0 32px rgba(114, 208, 222, 0.5),
    inset 0 0 18px rgba(114, 208, 222, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.35);
  animation: cursorGlassPulse 2.2s infinite ease-in-out;
}

.cursor.glass-hover {
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  box-shadow: 
    0 0 12px #FFFFFF,
    0 0 24px #72d0de,
    0 0 40px rgba(114, 208, 222, 0.9);
}

@keyframes cursorGlassPulse {
  0%, 100% {
    box-shadow: 
      0 0 30px rgba(114, 208, 222, 0.45),
      inset 0 0 16px rgba(114, 208, 222, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 
      0 0 42px rgba(114, 208, 222, 0.7),
      inset 0 0 22px rgba(114, 208, 222, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.6);
  }
}

/* Click mousedown compression */
.cursor-trail.clicked {
  width: 32px;
  height: 32px;
  border-color: #FFFFFF;
  background: rgba(51, 160, 176, 0.38);
}

.cursor.clicked {
  width: 8px;
  height: 8px;
}

/* ── Disable Custom Cursor on Touch & Mobile Devices ─────────── */
@media (hover: none) or (pointer: coarse), (max-width: 1024px) {
  .cursor,
  .cursor-trail,
  #cursor,
  #cursor-trail {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor * {
    cursor: auto !important;
  }
}

/* ── 3D Interactive Card Tilt & Glass Container Setup ──────── */
.service-card,
.industry-card,
.bento_box-item,
.blog-card,
.blog-featured-card,
.blog-sidebar-card,
.command-card,
.about-command-card,
.pillar,
.explore_card,
.explore_stage-container,
.cockpit-terminal,
.protocol-card,
.telemetry-block,
.steel-badge-card,
.re-badge-card,
.edu-badge-card,
.ecom-badge-card,
.rest-badge-card,
.chem-badge-card,
.const-badge-card,
.event-badge-card,
.steel-phase-card,
.re-phase-card,
.edu-phase-card,
.ecom-phase-card,
.rest-phase-card,
.chem-phase-card,
.const-phase-card,
.event-phase-card,
.steel-dilemma-card,
.re-dilemma-card,
.edu-dilemma-card,
.ecom-dilemma-card,
.rest-dilemma-card,
.chem-dilemma-card,
.const-dilemma-card,
.event-dilemma-card,
.faq-item,
.form-wrapper,
[class*="-badge-card"],
[class*="-phase-card"],
[class*="-dilemma-card"] {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}

.card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 8;
  mix-blend-mode: screen;
}

/* Universal Cursor-Responsive Glass Spotlight Layer */
.industry-card::before,
.bento_box-item::before,
.explore_card::before,
.explore_stage-container::before,
.command-card::before,
.about-command-card::before,
.pillar::before,
.blog-card::before,
.blog-featured-card::before,
.blog-sidebar-card::before,
.telemetry-block::before,
.steel-badge-card::before,
.re-badge-card::before,
.edu-badge-card::before,
.ecom-badge-card::before,
.rest-badge-card::before,
.chem-badge-card::before,
.const-badge-card::before,
.event-badge-card::before,
.steel-phase-card::before,
.re-phase-card::before,
.edu-phase-card::before,
.ecom-phase-card::before,
.rest-phase-card::before,
.chem-phase-card::before,
.const-phase-card::before,
.event-phase-card::before,
.steel-dilemma-card::before,
.re-dilemma-card::before,
.edu-dilemma-card::before,
.ecom-dilemma-card::before,
.rest-dilemma-card::before,
.chem-dilemma-card::before,
.const-dilemma-card::before,
.event-dilemma-card::before,
.faq-item::before,
.form-wrapper::before,
.cockpit-terminal::before,
[class*="-badge-card"]::before,
[class*="-phase-card"]::before,
[class*="-dilemma-card"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(114, 208, 222, 0.16) 0%,
    rgba(51, 160, 176, 0.05) 45%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.industry-card:hover::before,
.bento_box-item:hover::before,
.explore_card:hover::before,
.explore_stage-container:hover::before,
.command-card:hover::before,
.about-command-card:hover::before,
.pillar:hover::before,
.blog-card:hover::before,
.blog-featured-card:hover::before,
.blog-sidebar-card:hover::before,
.telemetry-block:hover::before,
.steel-badge-card:hover::before,
.re-badge-card:hover::before,
.edu-badge-card:hover::before,
.ecom-badge-card:hover::before,
.rest-badge-card:hover::before,
.chem-badge-card:hover::before,
.const-badge-card:hover::before,
.event-badge-card:hover::before,
.steel-phase-card:hover::before,
.re-phase-card:hover::before,
.edu-phase-card:hover::before,
.ecom-phase-card:hover::before,
.rest-phase-card:hover::before,
.chem-phase-card:hover::before,
.const-phase-card:hover::before,
.event-phase-card:hover::before,
.steel-dilemma-card:hover::before,
.re-dilemma-card:hover::before,
.edu-dilemma-card:hover::before,
.ecom-dilemma-card:hover::before,
.rest-dilemma-card:hover::before,
.chem-dilemma-card:hover::before,
.const-dilemma-card:hover::before,
.event-dilemma-card:hover::before,
.faq-item:hover::before,
.form-wrapper:hover::before,
.cockpit-terminal:hover::before,
[class*="-badge-card"]:hover::before,
[class*="-phase-card"]:hover::before,
[class*="-dilemma-card"]:hover::before {
  opacity: 1;
}

/* ── Global Vanta Topology Background Canvas ─────────────── */
#vanta-topology-bg,
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#vanta-topology-bg .vanta-canvas,
.vanta-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Container ────────────────────────────────────────────── */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 54px;
}

.section {
  padding: var(--section-gap) 0;
  position: relative;
  z-index: 1;
}

/* ── Auros-style 1px full-width section dividers ─────────── */
.section + .section,
.logo-strip + .section,
.stats-band + .section,
.closing-cta-band + .section {
  border-top: 1px solid var(--teal-border);
}

.section-header {
  text-align: center;
  margin-bottom: 72px;
}

/* ── Eyebrow — Auros gradient text style ─────────────────── */
.eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  background: var(--eyebrow-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Section Title (50% larger) ─────────────────────────── */
.section-title {
  font-family: var(--font);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 500;
  color: var(--platinum);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}

.section-sub {
  font-size: 1.25rem;
  color: var(--fog-silver);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ── Accent gradient text ─────────────────────────────────── */
.accent-text {
  display: inline-block;
  background: var(--display-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-right: 0.12em;
  margin-right: -0.12em;
  overflow: visible;
}

/* ── Scroll Reveal (Fail-Safe & Progressive Enhancement) ──── */
.reveal-up {
  opacity: 1;
  transform: none;
  transition: opacity .65s cubic-bezier(0.16, 1, 0.3, 1), transform .65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When JS is active, unrevealed below-the-fold items animate in smoothly */
html.js-ready .reveal-up:not(.visible):not(.hero .reveal-up) {
  opacity: 0;
  transform: translateY(32px);
}

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

/* ── Hero Cinematic Staggered Entrance Animation ──────────── */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(38px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .hero-eyebrow {
  opacity: 0;
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
}

.hero .hero-title {
  opacity: 0;
  animation: heroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.28s;
}

.hero .hero-sub {
  opacity: 0;
  animation: heroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.48s;
}

.hero .hero-actions {
  opacity: 0;
  animation: heroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.68s;
}

.hero .hero-globe-wrap {
  opacity: 0;
  animation: heroFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.78s;
}

/* ── Global Tactile Click Active Feedback ─────────────────── */
.click-ripple {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #33a0b0;
  background: radial-gradient(circle, rgba(51, 160, 176, 0.5) 0%, rgba(51, 160, 176, 0) 70%);
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  z-index: 999997;
  animation: rippleExpand 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(7.5);
    opacity: 0;
  }
}

a:active,
button:active,
.btn:active,
.nav-cta:active,
.preset-pill:active,
.model-btn:active,
.wheel-btn:active,
.wheel-item:active,
.service-card:active,
.explore_inner-link:active,
.faq-q:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s ease-out !important;
}

/* ── Buttons — Auros-style animated gradient ──────────────── */
/* Button with magnetic cubic bezier and sliding fill */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-position 600ms ease, color 200ms ease;
}
.btn:hover {
  transform: scale(1.03) translateY(-1px);
  text-decoration: none !important;
}

/* Auros green-gradient button with animated shift */
.btn-primary {
  background: var(--loop-grad);
  background-size: 280% 100%;
  background-position: 100% 0%;
  color: var(--platinum);
  box-shadow: 0 4px 20px rgba(51, 160, 176, 0.2);
}
.btn-primary:hover {
  background-position: 0% 0%;
  color: var(--loop-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(51, 160, 176, 0.4);
}

.btn-ghost {
  background: rgba(18, 61, 106, 0.6);
  color: var(--fog-silver);
  border: 1px solid rgba(187,199,198,0.4);
}
.btn-ghost:hover {
  border-color: var(--teal-accent);
  color: var(--platinum);
  background: rgba(51, 160, 176, 0.1);
  transform: translateY(-2px);
}

.btn-full { width: 100%; justify-content: center; }

/* ── NAVBAR — "The Floating Island" ───────────────────────── */
.navbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  z-index: 1000;
  padding: 8px 22px;
  border-radius: 999px;
  background: rgba(4, 16, 30, 0.72);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(51, 160, 176, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(51, 160, 176, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar.scrolled {
  top: 12px;
  padding: 6px 18px;
  background: rgba(4, 16, 30, 0.88);
  border-color: rgba(114, 208, 222, 0.45);
  border-top-color: rgba(255, 255, 255, 0.45);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(51, 160, 176, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── LOGO — CRISP & LUMINOUS IN FLOATING PILL ──────────────── */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(51, 160, 176, 0.3));
  transition: transform .25s ease, filter .25s ease, height .25s ease;
}
.logo-img:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 6px 22px rgba(51, 160, 176, 0.6));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-silver);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.nav-link:hover {
  color: #FFFFFF;
  background: rgba(51, 160, 176, 0.12);
  border-color: rgba(51, 160, 176, 0.28);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.nav-link.active-link {
  color: #FFFFFF !important;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(51, 160, 176, 0.3) 0%, rgba(9, 32, 56, 0.7) 100%);
  border: 1px solid rgba(114, 208, 222, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(51, 160, 176, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 0 14px rgba(114, 208, 222, 0.8);
  text-decoration: none !important;
}
.nav-link.active-link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #72d0de;
  box-shadow: 0 0 8px #72d0de;
}

.nav-cta {
  background: var(--loop-grad);
  background-size: 280% 100%;
  background-position: 100% 0%;
  color: var(--platinum);
  padding: 12px 28px;
  border-radius: var(--btn-radius);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-position 600ms ease, color 200ms ease, transform .25s ease, padding .2s, font-size .2s;
  flex-shrink: 0;
}
.nav-cta:hover {
  background-position: 0% 0%;
  color: var(--loop-ink);
  transform: translateY(-2px);
  text-decoration: none !important;
}

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  z-index: 10001;
}
.nav-burger:hover {
  background: rgba(51, 160, 176, 0.1);
}
.nav-burger span {
  width: 26px;
  height: 2px;
  background: var(--platinum);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: block;
  transform-origin: center;
}

/* Mobile Menu Drawer */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(2, 10, 20, 0.97);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.mobile-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.mobile-link {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--platinum);
  letter-spacing: 0.04em;
  text-decoration: none !important;
  display: block;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
}
.mobile-link:hover {
  color: var(--teal-accent);
  background: rgba(51, 160, 176, 0.08);
  transform: translateY(-2px);
}
.mobile-link.active-link {
  color: #FFFFFF !important;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(51, 160, 176, 0.25) 0%, rgba(9, 32, 56, 0.6) 100%);
  border: 1px solid rgba(114, 208, 222, 0.5);
  box-shadow: 0 0 24px rgba(51, 160, 176, 0.3);
}
.mobile-cta {
  margin-top: 14px;
  color: #000 !important;
  background: var(--teal-accent) !important;
  border-radius: 999px;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  box-shadow: 0 8px 24px rgba(51, 160, 176, 0.4);
}

/* ── HERO SECTION (Centered & 50% Larger) ─────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 130px 54px 80px;
  gap: 24px;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
}

.hero .vanta-canvas,
.blog-hero .vanta-canvas,
.error-hero .vanta-canvas,
.re-hero .vanta-canvas,
.edu-hero .vanta-canvas,
.steel-hero .vanta-canvas,
.ecom-hero .vanta-canvas,
.rest-hero .vanta-canvas,
.chem-hero .vanta-canvas,
.const-hero .vanta-canvas,
.event-hero .vanta-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 21px;        /* 50% larger than 14px */
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 auto 22px;
  background: var(--eyebrow-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.hero-title {
  font-family: var(--font);
  font-weight: 500;
  color: var(--platinum);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 auto 28px;
  max-width: 1450px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-line-1 {
  display: block;
  font-family: var(--font);
  font-size: clamp(3.2rem, 5.6vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--platinum);
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.1;
}

.hero-line-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  overflow: visible;
  width: 100%;
}

.rotate-words-mask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;
  position: relative;
  padding: 0;
  margin: 0;
}

.hero-cycle {
  display: inline-block;
  font-family: var(--font-drama);
  font-style: italic;
  font-size: clamp(5.6rem, 10.5vw, 10.8rem); /* 80% larger than line 1 */
  font-weight: 400;
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, #33a0b0 0%, #72d0de 40%, #FFFFFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  white-space: nowrap;
  padding: 0.1em 0.35em 0.15em 0.02em;
  margin: -0.1em -0.35em -0.15em -0.02em;
  overflow: visible;
  line-height: 1.15;
  will-change: transform, opacity, filter;
}

/* ── RotateWords Cinematic Fade Keyframes ─────────────────── */
@keyframes wordFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
  }
}

@keyframes wordFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-28px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

.hero-cycle.word-fade-out {
  animation: wordFadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-cycle.word-fade-in {
  animation: wordFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-sub {
  font-size: 1.85rem;     /* 50% larger than 1.25rem */
  color: var(--fog-silver);
  max-width: 1100px;
  margin: 0 auto 42px;
  line-height: 1.65;
  text-align: center;
}

.hero-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

.hero-actions .btn {
  padding: 24px 52px;     /* 50% larger button scale */
  font-size: 1.45rem;
  border-radius: 16px;
  letter-spacing: 0.03em;
}

/* ── HERO GLOBE (Centered below Buttons, 20% smaller) ───────── */
.hero-globe-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 100%;
  max-width: 1160px;  /* 20% smaller than 1450px */
  min-height: 960px;  /* 20% smaller than 1200px */
  aspect-ratio: 1 / 1;
  margin: -30px auto 0;
  align-self: center;
  filter: drop-shadow(0 0 130px rgba(51, 160, 176, 0.30));
}

.hero-globe-wrap.webgpu-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#globe-canvas {
  width: 100%;
  max-width: 1008px;  /* 20% smaller than 1260px */
  aspect-ratio: 1 / 1;
  display: block;
}

.scroll-indicator {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--slate); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; z-index: 2;
}
.scroll-mouse {
  width: 24px; height: 38px;
  border: 2px solid rgba(187,199,198,0.3);
  border-radius: 14px;
  position: relative;
}
.scroll-wheel {
  width: 4px; height: 8px;
  background: var(--teal-accent);
  border-radius: 2px;
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  animation: mouseScroll 1.8s ease-in-out infinite;
}
@keyframes mouseScroll {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  40%  { opacity: 1; }
  80%  { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}


/* ── SERVICES — Auros Bento Grid (50% larger) ─────────────── */
.services-section {
  background: var(--loop-ink);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.service-card {
  background: var(--loop-current);
  border: 1px solid var(--teal-border);
  border-radius: var(--card-radius);
  padding: 46px 40px;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  display: flex; flex-direction: column;
  min-height: 380px;
}

.service-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(51, 160, 176,0.08), transparent 65%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-border-hi);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 25px rgba(51, 160, 176,0.12);
}
.service-card:hover::before { opacity: 1; }

.service-icon {
  width: 76px; height: 76px;
  background: linear-gradient(145deg, rgba(51, 160, 176, 0.14) 0%, rgba(0, 42, 39, 0.6) 100%);
  border: 1px solid rgba(51, 160, 176, 0.28);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  position: relative;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.service-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  background: radial-gradient(circle, rgba(51, 160, 176, 0.28) 0%, transparent 70%);
  border-radius: 24px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.service-card:hover .service-icon {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--teal-accent);
  box-shadow: 0 16px 36px rgba(51, 160, 176, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.service-card:hover .service-icon::after {
  opacity: 1;
}
.service-icon svg,
.service-icon img,
.service-logo-img {
  width: 44px; height: 44px;
  max-width: 44px; max-height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(51, 160, 176, 0.25));
  transition: transform 0.35s ease, filter 0.35s ease;
}
.service-card:hover .service-icon svg,
.service-card:hover .service-icon img,
.service-card:hover .service-logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 14px rgba(51, 160, 176, 0.5));
}

.service-card h3 {
  font-size: 1.45rem; font-weight: 500;
  color: var(--loop-mist); margin-bottom: 16px;
  line-height: 1.3;
}
.service-card p {
  font-size: 1.05rem; color: var(--fog-silver); line-height: 1.75;
  margin-bottom: 32px; flex-grow: 1;
}

.service-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(51, 160, 176,0.12);
  border: 1px solid rgba(51, 160, 176,0.25);
  border-radius: var(--btn-radius);
  color: var(--teal-accent);
  text-decoration: none !important;
  transition: background .25s, color .25s, transform .25s;
  align-self: flex-start;
}
.service-arrow:hover {
  background: var(--teal-accent); color: var(--loop-depth);
  transform: translate(3px,-3px);
  text-decoration: none !important;
}
.service-arrow svg { width: 20px; height: 20px; }

.service-num {
  position: absolute; bottom: 20px; right: 28px;
  font-size: 5.5rem; font-weight: 700;
  color: rgba(255,255,255,0.035);
  line-height: 1; pointer-events: none;
}

/* ── BENTO BOX STATS (Auros in Numbers) ───────────────────── */
.section_resources {
  background: radial-gradient(ellipse 90% 70% at 50% 30%, #123d6a 0%, #000000 100%);
  padding: clamp(80px, 9vw, 130px) 0;
  border-top: 1px solid rgba(51, 160, 176, 0.18);
  border-bottom: 1px solid rgba(51, 160, 176, 0.18);
  position: relative;
  overflow: hidden;
}

.section_resources::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 500px;
  background: radial-gradient(circle, rgba(51, 160, 176, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bento_boxes {
  position: relative;
  z-index: 1;
}

.bento_boxes-top {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(48px, 6vw, 76px);
}

.bento_boxes-header .eyebrow {
  margin-bottom: 18px;
  display: inline-block;
}

.bento_boxes-header .section-title {
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.bento_boxes-text p {
  font-size: 1.25rem;
  color: var(--fog-silver);
  line-height: 1.75;
  margin: 0 auto;
}

.bento_boxes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bento_box-item {
  border-radius: 22px;
  padding: clamp(28px, 2.4vw, 36px);
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Background mathematical dot grid (signature Auros detail) */
.bento_box-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(51, 160, 176, 0.22) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  pointer-events: none;
  opacity: 0.75;
  z-index: 1;
  transition: opacity 0.35s ease;
}

.bento_box-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.data-text p {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bento_box-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

.bento_box-bottom {
  position: relative;
  z-index: 2;
  margin-top: 24px;
}

.bento_box-stat {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.bento_box-stat .stat-num {
  font-family: var(--font);
  font-size: clamp(3.4rem, 4.2vw, 4.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.bento_box-stat .stat-suffix {
  font-family: var(--font);
  font-size: clamp(2.4rem, 3.2vw, 3.2rem);
  font-weight: 500;
  margin-left: 2px;
}

.bento_box-meta {
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
}

.bento_box-caption {
  font-size: 0.82rem;
  line-height: 1.35;
}

.bento_box-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Light / Highlight Theme Card (Auros Signature Inverted Lilac Card) */
.bento_box-item[data-card-theme="light"] {
  background: linear-gradient(145deg, rgba(249, 238, 251, 0.94) 0%, rgba(233, 213, 242, 0.94) 100%);
  border: 1px solid rgba(238, 219, 250, 0.9);
  border-top: 1px solid #FFFFFF;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 45px rgba(238, 219, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bento_box-item[data-card-theme="light"]::before {
  background-image: radial-gradient(rgba(12, 40, 70, 0.25) 1.5px, transparent 1.5px);
  opacity: 0.65;
}

.bento_box-item[data-card-theme="light"] .data-text p {
  color: #061729;
}

.bento_box-item[data-card-theme="light"] .bento_box-badge {
  color: #061729;
  background: rgba(12, 40, 70, 0.08);
  border: 1px solid rgba(12, 40, 70, 0.22);
}

.bento_box-item[data-card-theme="light"] .stat-num,
.bento_box-item[data-card-theme="light"] .stat-suffix {
  color: #061729 !important;
}

.bento_box-item[data-card-theme="light"] .bento_box-meta {
  border-top: 1px solid rgba(12, 40, 70, 0.15);
}

.bento_box-item[data-card-theme="light"] .bento_box-caption {
  color: rgba(12, 40, 70, 0.78);
}

.bento_box-item[data-card-theme="light"] .bento_box-trend {
  color: #154d86;
  background: rgba(12, 40, 70, 0.08);
  padding: 3px 8px;
  border-radius: 12px;
}

.bento_box-item[data-card-theme="light"]:hover {
  border-color: #ffffff;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(238, 219, 250, 0.5), inset 0 1px 0 #FFFFFF;
}

/* Dark Theme Cards */
.bento_box-item[data-card-theme="dark"] {
  background: linear-gradient(165deg, rgba(18, 61, 106, 0.55) 0%, rgba(9, 32, 56, 0.85) 100%);
  border: 1px solid rgba(51, 160, 176, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.bento_box-item[data-card-theme="dark"] .data-text p {
  color: #ffffff;
}

.bento_box-item[data-card-theme="dark"] .bento_box-badge {
  color: var(--loop-mist);
  background: rgba(51, 160, 176, 0.1);
  border: 1px solid rgba(51, 160, 176, 0.28);
}

.bento_box-item[data-card-theme="dark"] .stat-num,
.bento_box-item[data-card-theme="dark"] .stat-suffix {
  color: #f1def5;
  text-shadow: 0 0 25px rgba(241, 222, 245, 0.25);
}

.bento_box-item[data-card-theme="dark"] .bento_box-meta {
  border-top: 1px solid rgba(51, 160, 176, 0.12);
}

.bento_box-item[data-card-theme="dark"] .bento_box-caption {
  color: var(--fog-silver);
}

.bento_box-item[data-card-theme="dark"] .bento_box-trend {
  color: var(--teal-accent);
  background: rgba(51, 160, 176, 0.1);
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(51, 160, 176, 0.2);
}

.bento_box-item[data-card-theme="dark"]:hover {
  border-color: #72d0de;
  border-top-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(51, 160, 176, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Subtle Interactive Canvas inside each Bento Card */
.bento_box-item canvas.card-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.35s ease;
}

.bento_box-item:hover canvas.card-canvas {
  opacity: 0.95;
}

/* Responsive Bento Breakpoints */
@media (max-width: 992px) {
  .bento_boxes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .bento_boxes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bento_box-item {
    min-height: 240px;
    padding: 24px 20px;
  }
  .bento_box-stat .stat-num {
    font-size: 3.2rem;
  }
  .bento_box-stat .stat-suffix {
    font-size: 2.2rem;
  }
  .bento_box-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}


/* ── KINETIC TEXT SECTION (Auros "Growth On Loop") ───────── */
.section_text-scroll {
  overflow: hidden;
  padding: clamp(50px, 7vw, 110px) 0;
  position: relative;
  z-index: 2;
  background: var(--loop-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  border-top: 1px solid rgba(51, 160, 176, 0.25);
  border-bottom: 1px solid rgba(51, 160, 176, 0.25);
  width: 100%;
  max-width: 100vw;
}

.text_scroll-wrap {
  width: 100%;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.08;
  padding: 8px 0;
  pointer-events: none;
}

.text_scroll-text {
  display: inline-block;
  font-family: var(--font);
  font-size: clamp(110px, 22vw, 360px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  white-space: nowrap;
  user-select: none;
  padding: 0.12em 0.32em 0.2em 0.08em;
  margin: -0.12em -0.32em -0.2em -0.08em;
  overflow: visible;
  /* Bioluminescent teal-mist-lavender gradient */
  background: linear-gradient(100deg, #FFFFFF 0%, #85d8e5 30%, #33a0b0 70%, #154d86 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

[data-text-bottom] .text_scroll-text {
  background: linear-gradient(100deg, #85d8e5 0%, #FFFFFF 30%, #33a0b0 70%, #287a9c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── EXPLORE NORTH LOOP (Auros Interactive Video Showcase) ── */
.section_explore {
  background: var(--loop-depth);
  padding: clamp(70px, 8vh, 110px) 0;
  border-top: 1px solid var(--teal-border);
  border-bottom: 1px solid var(--teal-border);
  position: relative;
  overflow: hidden;
}

.explore_inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
}

.explore_inner-links-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.explore_inner-links-title {
  margin-bottom: 28px;
}

.explore_inner-links {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.explore_inner-link {
  display: block;
  text-decoration: none;
  padding: 28px 24px 28px 0;
  border-top: 1px solid rgba(51, 160, 176, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  opacity: 0.55;
  transform: translateX(0);
}

.explore_inner-link:last-child {
  border-bottom: 1px solid rgba(51, 160, 176, 0.35);
}

.explore_inner-link:hover,
.explore_inner-link.active {
  opacity: 1;
  transform: translateX(10px);
  border-top-color: var(--teal-border-hi);
}

.explore_inner-link:hover + .explore_inner-link,
.explore_inner-link.active + .explore_inner-link {
  border-top-color: var(--teal-border-hi);
}

.explore_inner-link-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.explore_inner-link-header h3 {
  font-family: var(--font);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  color: var(--platinum);
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.explore_inner-link.active .explore_inner-link-header h3 {
  color: var(--loop-mist);
}

.explore_inner-link-arrow {
  width: 22px;
  height: 22px;
  color: var(--fog-silver);
  transition: transform 0.35s ease, color 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explore_inner-link:hover .explore_inner-link-arrow,
.explore_inner-link.active .explore_inner-link-arrow {
  color: var(--teal-accent);
  transform: translate(4px, -4px);
}

.explore_inner-link p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fog-silver);
  max-width: 600px;
  transition: color 0.3s ease;
  margin: 0;
}

.explore_inner-link.active p {
  color: var(--loop-mist);
}

/* Growth Architecture Stage (Right Column) - Static Centered in Section */
.explore_stage-rail {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 780px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.explore_stage-container {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 600px;
  max-height: 640px;
  background: var(--loop-current);
  border: 1px solid var(--teal-border-hi);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 50px rgba(51, 160, 176, 0.12);
  display: flex;
  flex-direction: column;
  transform: none !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.explore_stage-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px solid var(--teal-border);
  background: rgba(4, 16, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 5;
}

.explore_stage-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.explore_stage-status-text {
  font-family: monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--teal-accent);
}

.explore_stage-viewport {
  position: relative;
  flex-grow: 1;
  height: calc(100% - 62px);
  min-height: 520px;
  overflow: hidden;
  background: radial-gradient(circle at 60% 40%, rgba(0, 50, 47, 0.4) 0%, rgba(0, 18, 17, 0.95) 100%);
}

.explore_stage-grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.explore_panel {
  position: absolute;
  inset: 0;
  padding: 24px 28px 20px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
  z-index: 2;
}

.explore_panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 3;
}

.panel_telemetry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  z-index: 4;
}

.panel_pill {
  display: inline-flex;
  align-items: center;
  background: rgba(51, 160, 176, 0.12);
  border: 1px solid rgba(51, 160, 176, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-family: monospace;
  color: var(--teal-accent);
  letter-spacing: 0.14em;
  font-weight: 700;
}

.panel_metric-highlight {
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.04em;
}

.panel_visual-wrap {
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 4;
  padding: 14px 0;
}

.panel_svg {
  width: 100%;
  height: 100%;
  max-height: 300px;
  overflow: visible;
}

.panel_hud-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(51, 160, 176, 0.16);
  position: relative;
  z-index: 4;
}

.hud-item {
  background: rgba(0, 36, 33, 0.65);
  border: 1px solid rgba(51, 160, 176, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
}

.hud-lbl {
  display: block;
  font-size: 9.5px;
  font-family: monospace;
  color: var(--slate);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.hud-val {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--teal-accent);
}

/* Animations for Stage Instruments */
@keyframes flowDash {
  to { stroke-dashoffset: -20; }
}
.flow-path {
  stroke-dashoffset: 0;
  animation: flowDash 1.2s linear infinite;
}
.flow-p2 { animation-delay: 0.2s; }
.flow-p3 { animation-delay: 0.4s; }

@keyframes scanMove {
  0%, 100% { transform: translateY(-38px); opacity: 0.25; }
  50% { transform: translateY(42px); opacity: 1; }
}
.scanner-beam {
  animation: scanMove 3s ease-in-out infinite;
}

@keyframes eqBounce {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1.15); }
}
.eq-bar {
  transform-origin: center;
  animation: eqBounce 1.2s ease-in-out infinite;
}
.bar-1 { animation-delay: 0.1s; }
.bar-2 { animation-delay: 0.3s; }
.bar-3 { animation-delay: 0.5s; }
.bar-4 { animation-delay: 0.2s; }
.bar-5 { animation-delay: 0.4s; }
.bar-6 { animation-delay: 0.6s; }
.bar-7 { animation-delay: 0.15s; }
.bar-8 { animation-delay: 0.35s; }
.bar-9 { animation-delay: 0.55s; }

/* Mobile Explore Cards */
.explore_inner-mobile {
  display: none;
}

@media (max-width: 991px) {
  .explore_inner {
    display: none;
  }
  .explore_inner-mobile {
    display: block;
  }
  .explore_inner-mobile-header {
    margin-bottom: 36px;
    text-align: center;
  }
  .explore_mobile-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .explore_card {
    background: var(--loop-current);
    border: 1px solid var(--teal-border);
    border-radius: var(--card-radius);
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  }
  .explore_card-metric-badge {
    align-self: flex-start;
    background: rgba(51, 160, 176, 0.12);
    border: 1px solid rgba(51, 160, 176, 0.3);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-family: monospace;
    color: var(--teal-accent);
    font-weight: 700;
  }
  .explore_card h3 {
    font-size: 1.4rem;
    color: var(--platinum);
  }
  .explore_card p {
    font-size: 0.98rem;
    color: var(--fog-silver);
    line-height: 1.65;
  }
  .explore_card .btn {
    align-self: flex-start;
    margin-top: 8px;
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* ── PORTFOLIO — 3D Stage Coverflow Carousel ──────────────────── */
.portfolio-section {
  background: var(--loop-ink);
  overflow: hidden;
  border-top: 1px solid var(--teal-border);
  padding: clamp(70px, 8vh, 95px) 0 70px;
  position: relative;
}

/* ── 3-D Carousel Scene ──────────────────────────────────── */
.wheel-scene {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: center center;
  margin: 20px auto 36px;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
}

/* The stage container */
.wheel-ring {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each card is explicitly positioned in 3-D space by JS */
.wheel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.3, 1), 
              opacity 0.65s cubic-bezier(0.2, 0.9, 0.3, 1), 
              filter 0.65s cubic-bezier(0.2, 0.9, 0.3, 1);
  cursor: pointer !important;
  will-change: transform, opacity, filter;
  user-select: none;
  -webkit-user-select: none;
}

.wheel-card {
  width: 250px;
  height: 380px;               /* Instagram portrait aspect ratio */
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(51, 160, 176, 0.25);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
  flex-shrink: 0;
  background: var(--loop-current);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
  position: relative;
}

.wheel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  pointer-events: none;
}

/* Card glass highlight */
.wheel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Active (front-center) card */
.wheel-item.active .wheel-card {
  border: 1.5px solid rgba(51, 160, 176, 0.85);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(51, 160, 176, 0.25);
}

.wheel-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--eyebrow-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
  pointer-events: none;
}

.wheel-item.active .wheel-label {
  opacity: 1;
  transform: translateY(0);
}

/* ── Nav buttons ── */
.wheel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(9, 32, 56, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--teal-border-hi);
  border-radius: 50%;
  color: var(--platinum);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.wheel-btn:hover {
  background: var(--teal-accent);
  color: var(--loop-depth);
  border-color: var(--teal-accent);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 20px rgba(51, 160, 176, 0.5);
}

.wheel-btn svg {
  width: 22px;
  height: 22px;
}

.wheel-prev {
  left: max(20px, calc(50% - 460px));
}

.wheel-next {
  right: max(20px, calc(50% - 460px));
}

/* ── Dot indicators ── */
.wheel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 16px;
}

.wheel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(51, 160, 176, 0.35);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  border: none;
  padding: 0;
}

.wheel-dot.active {
  background: var(--teal-accent);
  transform: scale(1.4);
  box-shadow: 0 0 10px rgba(51, 160, 176, 0.8);
}

@media (max-width: 991px) {
  .wheel-scene {
    height: 480px;
  }
  .wheel-card {
    width: 220px;
    height: 340px;
  }
  .wheel-prev {
    left: 16px;
  }
  .wheel-next {
    right: 16px;
  }
}

@media (max-width: 600px) {
  .wheel-scene {
    height: 440px;
  }
  .wheel-card {
    width: 190px;
    height: 300px;
    border-radius: 16px;
  }
  .wheel-btn {
    width: 42px;
    height: 42px;
  }
  .wheel-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ── INDUSTRIES WE WORK IN ────────────────────────────────── */
.industries-section {
  padding: var(--section-gap) 0;
  background: linear-gradient(180deg, var(--loop-ink) 0%, var(--loop-depth) 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--teal-border);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 54px;
}

.industry-card {
  background: linear-gradient(155deg, rgba(9, 32, 56, 0.55) 0%, rgba(4, 16, 30, 0.88) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(51, 160, 176, 0.24);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 330px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(51, 160, 176, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.industry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(114, 208, 222, 0.18) 0%,
    rgba(51, 160, 176, 0.05) 45%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.industry-card:hover {
  border-color: rgba(114, 208, 222, 0.65);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow: 
    0 28px 70px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(51, 160, 176, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.industry-card:hover::before {
  opacity: 1;
}

.industry-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.industry-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(51, 160, 176, 0.2) 0%, rgba(18, 61, 106, 0.65) 100%);
  border: 1px solid rgba(114, 208, 222, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #72d0de;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.industry-card:hover .industry-icon-wrap {
  transform: scale(1.1);
  color: #FFFFFF;
  border-color: #72d0de;
  box-shadow: 0 0 22px rgba(114, 208, 222, 0.6);
}

.industry-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #72d0de;
  background: rgba(51, 160, 176, 0.14);
  border: 1px solid rgba(51, 160, 176, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
}

.industry-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--platinum);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.industry-desc {
  font-size: 0.95rem;
  color: #8da4b8;
  line-height: 1.65;
  margin-bottom: 22px;
  flex-grow: 1;
}

.industry-footer {
  display: flex;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(51, 160, 176, 0.15);
}

.industry-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #38e1ca;
  background: rgba(56, 225, 202, 0.08);
  border: 1px solid rgba(56, 225, 202, 0.25);
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
}

.industry-link-text {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.industry-card:hover .industry-link-text {
  background: rgba(51, 160, 176, 0.32) !important;
  border-color: #72d0de !important;
  box-shadow: 0 0 16px rgba(114, 208, 222, 0.45);
  transform: translateX(3px) scale(1.08);
}

.industry-card:hover .industry-link-text svg {
  transform: translateX(1.5px);
  stroke: #FFFFFF;
}

.industry-link-text svg {
  transition: transform 0.25s ease, stroke 0.25s ease;
}

/* ── ABOUT SECTION ────────────────────────────────────────── */
.about-section {
  background: linear-gradient(0deg, var(--loop-depth) 0%, var(--loop-ink) 100%);
  border-top: 1px solid var(--teal-border);
}

.about-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 72px; align-items: center;
}

.about-text p {
  font-size: 1.2rem; color: var(--fog-silver);
  line-height: 1.8; margin-bottom: 24px;
}

.about-pillars {
  display: flex; flex-direction: column; gap: 20px;
  margin: 36px 0 40px;
}
.pillar {
  display: flex; align-items: flex-start; gap: 20px;
  background: var(--loop-current);
  border: 1px solid var(--teal-border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color .3s, transform .3s;
}
.pillar:hover {
  border-color: var(--teal-border-hi);
  transform: translateX(6px);
}
.pillar-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, rgba(51, 160, 176, 0.15) 0%, rgba(12, 40, 70, 0.4) 100%);
  border: 1px solid rgba(51, 160, 176, 0.3);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-accent);
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.pillar:hover .pillar-icon {
  transform: scale(1.08);
  border-color: var(--teal-accent);
  background: linear-gradient(135deg, rgba(51, 160, 176, 0.25) 0%, rgba(12, 40, 70, 0.6) 100%);
  box-shadow: 0 6px 20px rgba(51, 160, 176, 0.25);
}
.pillar-icon svg { width: 22px; height: 22px; }
.pillar strong {
  display: block; font-size: 1.15rem; color: var(--platinum);
  margin-bottom: 4px;
}
.pillar p {
  font-size: 1rem !important; color: var(--fog-silver) !important;
  margin-bottom: 0 !important; line-height: 1.6 !important;
}

.about-visual {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.about-command-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  background: rgba(4, 16, 30, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--teal-border-hi);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(51, 160, 176, 0.14);
  box-sizing: border-box;
}

.command-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--teal-border);
  gap: 14px;
}

.command-card-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.command-card-identity strong {
  display: block;
  font-size: 1.15rem;
  color: var(--platinum);
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.command-card-identity span {
  display: block;
  font-size: 0.82rem;
  color: var(--teal-accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.about-logo-ring {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(51, 160, 176, 0.12);
  border: 1px solid rgba(51, 160, 176, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(51, 160, 176, 0.25);
}
.about-logo-img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(51, 160, 176, 0.3));
}

.command-card-beacon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--teal-accent);
  letter-spacing: 0.08em;
  background: rgba(51, 160, 176, 0.12);
  border: 1px solid rgba(51, 160, 176, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}

.status-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-accent);
  box-shadow: 0 0 8px var(--teal-accent), 0 0 12px rgba(51, 160, 176, 0.6);
  display: inline-block;
  animation: beaconPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes beaconPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px var(--teal-accent), 0 0 12px rgba(51, 160, 176, 0.6);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
    box-shadow: 0 0 3px var(--teal-accent);
  }
}

.command-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.telemetry-block {
  background: rgba(4, 16, 30, 0.75);
  border: 1px solid rgba(51, 160, 176, 0.2);
  border-radius: 14px;
  padding: 16px 14px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.telemetry-block:hover {
  border-color: var(--teal-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(51, 160, 176, 0.15);
}

.telemetry-stat {
  display: block;
  font-size: 1.85rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.telemetry-label {
  display: block;
  font-size: 9.5px;
  font-family: var(--font-mono);
  color: var(--teal-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  line-height: 1.35;
}

.telemetry-block p {
  font-size: 0.84rem !important;
  color: var(--fog-silver) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.command-terminal-feed {
  background: rgba(0, 18, 17, 0.9);
  border: 1px solid rgba(51, 160, 176, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.feed-indicator {
  color: var(--teal-accent);
  font-weight: 700;
  flex-shrink: 0;
}
.feed-text {
  color: var(--loop-mist);
  line-height: 1.4;
}

.about-blob {
  position: absolute; top: 50%; left: 50%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(51, 160, 176,0.2) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none; z-index: 1;
}

/* ── BLOG SECTION ─────────────────────────────────────────── */
.blog-section {
  background: linear-gradient(0deg, var(--loop-depth) 0%, var(--loop-ink) 100%);
  border-top: 1px solid var(--teal-border);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blog-card {
  background: rgba(4, 16, 30, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--teal-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-border-hi);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(51, 160, 176, 0.16);
}

.blog-img-wrap {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
.blog-img-placeholder {
  height: 190px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(51, 160, 176, 0.25);
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #0d2847 0%, #020912 100%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.blog-card:hover .blog-img-placeholder {
  border-color: rgba(51, 160, 176, 0.5);
  box-shadow: 0 14px 35px rgba(51, 160, 176, 0.2);
}
.blog-img-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover .blog-img-placeholder svg {
  transform: scale(1.04);
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.blog-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--eyebrow-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blog-date {
  font-size: 12.5px;
  color: var(--slate);
  font-family: var(--font-mono);
}

.blog-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--platinum);
  line-height: 1.4;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.blog-card p {
  font-size: 0.98rem;
  color: var(--fog-silver);
  line-height: 1.65;
  margin-bottom: 22px;
  flex-grow: 1;
}
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal-accent);
  text-decoration: none !important;
  transition: gap 0.25s ease, color 0.25s ease;
  padding: 2px 0;
}
.blog-read-more:hover {
  gap: 13px;
  color: #FFFFFF;
  text-decoration: none !important;
}

/* ── FAQ SECTION ──────────────────────────────────────────── */
.faq-section {
  background: var(--loop-ink);
  border-top: 1px solid var(--teal-border);
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: rgba(4, 16, 30, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(51, 160, 176, 0.2);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.faq-item:hover {
  border-color: rgba(51, 160, 176, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(51, 160, 176, 0.1);
}
.faq-item.open {
  border-color: var(--teal-accent);
  background: rgba(6, 23, 41, 0.92);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(51, 160, 176, 0.16);
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
}
.faq-q span {
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--platinum);
  transition: color 0.25s ease;
}
.faq-item:hover .faq-q span {
  color: #FFFFFF;
}
.faq-item.open .faq-q span {
  color: #FFFFFF;
}

.faq-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(51, 160, 176, 0.12);
  border: 1px solid rgba(51, 160, 176, 0.3);
  color: var(--teal-accent);
  padding: 6px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover .faq-icon {
  border-color: rgba(51, 160, 176, 0.5);
  background: rgba(51, 160, 176, 0.18);
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: rgba(51, 160, 176, 0.25);
  border-color: var(--teal-accent);
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(51, 160, 176, 0.4);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  padding: 0 28px 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.35s ease, visibility 0.35s;
}
.faq-item.open .faq-a {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
  padding: 0 28px 24px;
}
.faq-a p {
  font-size: 1.02rem;
  color: var(--fog-silver);
  line-height: 1.7;
  margin: 0;
}

/* ── CLOSING CTA BAND — Auros style ───────────────────────── */
.closing-cta-band {
  background: linear-gradient(180deg, var(--loop-current) 0%, var(--loop-ink) 100%);
  border-top: 1px solid var(--teal-border);
  border-bottom: 1px solid var(--teal-border);
  padding: 100px 0;
  text-align: center;
  position: relative; z-index: 1;
}
.closing-cta-inner {
  max-width: 860px; margin: 0 auto;
}
.closing-cta-inner h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 500; color: var(--platinum);
  margin-bottom: 20px; line-height: 1.2;
}
.closing-cta-inner p {
  font-size: 1.3rem; color: var(--fog-silver);
  margin-bottom: 36px; line-height: 1.7;
}

/* ── CONTACT SECTION ──────────────────────────────────────── */
.contact-section {
  background: var(--loop-ink);
  border-top: 1px solid var(--teal-border);
}

.contact-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 72px; align-items: flex-start;
}

.contact-info .section-title {
  text-align: left;
  margin-bottom: 20px;
}
.contact-info > p {
  font-size: 1.2rem; color: var(--fog-silver);
  line-height: 1.75; margin-bottom: 36px;
}

.contact-details {
  display: flex; flex-direction: column; gap: 20px;
}
.contact-detail-row {
  display: flex; align-items: center; gap: 16px;
  font-size: 1.15rem; color: var(--loop-mist);
}
.contact-detail-row svg {
  color: var(--teal-accent);
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.contact-detail-row a {
  color: #FFFFFF !important;
  font-size: 1.18rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}
.contact-detail-row a:hover {
  color: var(--teal-accent) !important;
  transform: translateX(4px);
  text-decoration: none !important;
}
.contact-detail-row:hover svg {
  color: #33a0b0;
  transform: scale(1.1);
}

.contact-social-row {
  display: flex; gap: 16px; margin-top: 12px;
}
.social-link {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--loop-current);
  border: 1px solid var(--teal-border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--fog-silver);
  transition: border-color .25s, color .25s, transform .25s;
}
.social-link:hover {
  border-color: var(--teal-accent);
  color: var(--platinum);
  transform: translateY(-2px);
}
.social-link svg { color: var(--teal-accent); }

.contact-form {
  background: linear-gradient(155deg, rgba(9, 32, 56, 0.55) 0%, rgba(4, 16, 30, 0.88) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(51, 160, 176, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--card-radius);
  padding: 48px 42px;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(51, 160, 176, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 20px;
}

.form-group {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px;
}
.form-row .form-group { margin-bottom: 0; }

.form-group label {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--loop-mist);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(4, 16, 30, 0.65) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(51, 160, 176, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--btn-radius);
  padding: 16px 20px;
  font-family: var(--font); font-size: 1.05rem;
  color: var(--platinum); outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  transition: border-color .25s, box-shadow .25s, background-color .25s, transform .25s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #72d0de !important;
  border-top-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(6, 23, 41, 0.85) !important;
  box-shadow: 
    0 0 22px rgba(51, 160, 176, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.form-group select option { background: #04101e; color: var(--platinum); }

/* Field Error States */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #ff5c5c !important;
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.2) !important;
}

.field-error-msg {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: #ff7575;
  margin-top: 4px;
  align-items: center;
  gap: 6px;
  animation: fadeInDown 0.25s ease-out forwards;
}

.form-group.has-error .field-error-msg {
  display: flex;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Rich Form Success Card */
.form-success-card {
  display: none;
  background: linear-gradient(135deg, rgba(4, 16, 30, 0.95), rgba(9, 32, 56, 0.95));
  border: 1px solid var(--teal-border-hi);
  border-radius: var(--card-radius);
  padding: 48px 36px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(51, 160, 176, 0.15);
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.form-success-card.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.success-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(51, 160, 176, 0.15);
  border: 2px solid var(--teal-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-accent);
  margin-bottom: 24px;
  box-shadow: 0 0 24px rgba(51, 160, 176, 0.3);
}

.success-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--platinum);
  margin-bottom: 12px;
}

.success-desc {
  font-size: 1.15rem;
  color: var(--fog-silver);
  max-width: 500px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.form-note {
  font-size: 14px; color: var(--slate);
  text-align: center; margin-top: 20px;
}

/* Copy to Clipboard Tooltips & Action Pills */
.contact-detail-row {
  position: relative;
}

.copy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(9, 32, 56, 0.6);
  border: 1px solid var(--teal-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--teal-accent);
  cursor: pointer;
  margin-left: 10px;
  transition: all 0.2s ease;
}

.copy-pill:hover {
  background: var(--teal-accent);
  color: #000;
  border-color: var(--teal-accent);
}

.copy-tooltip {
  position: absolute;
  top: -28px;
  right: 0;
  background: var(--teal-accent);
  color: #000;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.copy-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Blog Empty State ─────────────────────────────────────── */
.blog-empty-state {
  display: none;
  grid-column: 1 / -1;
  background: rgba(4, 16, 30, 0.6);
  border: 1px dashed var(--teal-border);
  border-radius: 24px;
  padding: 60px 32px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.blog-empty-state.active {
  display: flex;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(51, 160, 176, 0.1);
  border: 1px solid var(--teal-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-accent);
  margin-bottom: 20px;
}

.empty-state-title {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--platinum);
  margin-bottom: 10px;
}

.empty-state-text {
  font-size: 1.1rem;
  color: var(--fog-silver);
  max-width: 460px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ── 404 Error Page Styles ────────────────────────────────── */
.error-hero {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 24px 80px;
  position: relative;
  overflow: hidden;
  background: var(--loop-depth);
  z-index: 2;
}

.error-badge {
  font-family: var(--font-drama);
  font-size: clamp(6rem, 16vw, 14rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  background: var(--display-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  filter: drop-shadow(0 10px 40px rgba(51, 160, 176, 0.3));
}

.error-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  color: var(--platinum);
  margin-bottom: 18px;
}

.error-desc {
  font-size: 1.25rem;
  color: var(--fog-silver);
  max-width: 620px;
  line-height: 1.7;
  margin: 0 auto 36px;
}

.error-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  background: var(--loop-depth);
  border-top: 1px solid var(--teal-border);
  border-radius: 4rem 4rem 0 0;
  padding: 90px 0 40px;
  position: relative;
  overflow: hidden;
}

.footer-inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 64px; margin-bottom: 60px;
}

.footer-logo { display: inline-block; margin-bottom: 20px; }
.logo-img-footer {
  height: 90px;
  width: auto;
  filter: drop-shadow(0 4px 18px rgba(51, 160, 176,0.25));
}

.footer-left p {
  font-size: 1.15rem; color: var(--fog-silver);
  line-height: 1.7; margin-bottom: 28px;
}

.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--loop-current);
  border: 1px solid var(--teal-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--fog-silver); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.footer-socials a:hover {
  background: var(--teal-accent);
  color: var(--loop-depth);
  border-color: var(--teal-accent);
}

.footer-links {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-col strong {
  display: block; font-size: 15px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--platinum); margin-bottom: 20px;
}
.footer-col a {
  display: block; font-size: 1.05rem; color: var(--fog-silver);
  margin-bottom: 14px; transition: color .2s, transform .2s;
  text-decoration: none !important;
}
.footer-col a:hover {
  color: var(--teal-accent);
  transform: translateX(4px);
  text-decoration: none !important;
}

.footer-bottom {
  border-top: 1px solid var(--teal-border);
  padding-top: 36px;
  display: flex; justify-content: space-between;
  align-items: center;
  font-size: 15px; color: var(--slate);
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom a,
.footer-email {
  color: var(--slate);
  text-decoration: none !important;
  transition: color .2s;
  cursor: pointer;
}
.footer-bottom a:hover,
.footer-email:hover {
  color: var(--teal-accent);
  text-decoration: none !important;
}

/* ── RESPONSIVE MEDIA QUERIES ─────────────────────────────── */
@media (max-width: 1180px) {
  .navbar {
    width: calc(100% - 32px);
    padding: 7px 18px;
  }
  .logo-img { height: 48px; }
  .nav-link { font-size: 13.5px; padding: 8px 12px; }
  .nav-cta { font-size: 13.5px; padding: 9px 18px; }
}

@media (max-width: 1100px) {
  .hero {
    text-align: center;
    align-items: center;
    padding: 130px 40px 80px;
  }
  .hero-content { text-align: center; }
  .hero-title { font-size: clamp(3.2rem, 6.5vw, 5.2rem); }
  .hero-sub { font-size: 1.4rem; max-width: 780px; margin: 0 auto 36px; }
  .hero-actions { justify-content: center; }
  .hero-actions .btn { padding: 20px 42px; font-size: 1.25rem; }
  .hero-globe-wrap { max-width: min(100%, 680px); min-height: 560px; margin: 10px auto 0; }
  #globe-canvas { max-width: min(100%, 600px); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .wheel-prev { left: 20px; }
  .wheel-next { right: 20px; }
}

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none !important; }
  .nav-burger { display: flex; }
}

@media (max-width: 768px) {
  .hero { padding: 120px 24px 80px; }
  .hero-title { font-size: 2.8rem; }
  .hero-globe-wrap { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 36px 24px; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ── BLOG SECTION VIEW ALL BUTTON ────────────────────────── */
.blog-view-all {
  text-align: center;
  margin-top: 48px;
}
.blog-view-all .btn {
  padding: 18px 38px;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ── BLOG PAGE SPECIFIC STYLES ────────────────────────────── */
.blog-hero {
  padding: clamp(140px, 16vw, 190px) 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--loop-depth);
}

.blog-hero-content {
  max-width: 860px;
  margin: 0 auto;
}

.blog-hero .hero-title {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: var(--platinum);
}

.blog-hero .hero-sub {
  font-size: 1.25rem;
  color: var(--fog-silver);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 36px;
}

.blog-search-wrap {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

.blog-search-input {
  width: 100%;
  padding: 16px 24px 16px 52px;
  background: var(--loop-current);
  border: 1px solid var(--teal-border);
  border-radius: 50px;
  color: var(--platinum);
  font-size: 1.05rem;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.blog-search-input:focus {
  border-color: var(--teal-accent);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(51, 160, 176, 0.2);
}

.blog-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal-accent);
  pointer-events: none;
}

/* Category Filter Bar */
.blog-filters-section {
  padding: 20px 0 40px;
  position: sticky;
  top: 76px;
  z-index: 20;
  background: rgba(0, 21, 20, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(51, 160, 176, 0.12);
}

.blog-filters-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-filter-btn {
  padding: 10px 22px;
  background: var(--loop-current);
  border: 1px solid var(--teal-border);
  border-radius: 30px;
  color: var(--fog-silver);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: var(--font);
}

.blog-filter-btn:hover {
  border-color: var(--teal-accent);
  color: var(--platinum);
  transform: translateY(-2px);
}

.blog-filter-btn.active {
  background: var(--teal-accent);
  color: var(--loop-depth);
  border-color: var(--teal-accent);
  box-shadow: 0 0 20px rgba(51, 160, 176, 0.4);
}

/* Featured Spotlight Post */
.blog-featured-section {
  padding: 50px 0;
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  background: var(--loop-current);
  border: 1px solid rgba(51, 160, 176, 0.25);
  border-radius: 24px;
  padding: 36px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}

.blog-featured-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-accent);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 35px rgba(51, 160, 176, 0.2);
}

.blog-featured-visual {
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(51, 160, 176, 0.25);
  position: relative;
}

.blog-featured-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.blog-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-accent);
  background: rgba(51, 160, 176, 0.12);
  border: 1px solid rgba(51, 160, 176, 0.3);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  width: fit-content;
}

.blog-featured-content h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  font-weight: 500;
  color: var(--platinum);
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.blog-featured-content p {
  font-size: 1.15rem;
  color: var(--fog-silver);
  line-height: 1.7;
  margin-bottom: 26px;
}

.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  color: var(--slate);
  margin-bottom: 28px;
}

.blog-meta-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Main Blog Feed Grid */
.blog-feed-section {
  padding: 40px 0 100px;
}

.blog-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(51, 160, 176, 0.12);
}

.blog-read-time {
  display: none;
}

/* Newsletter VIP Box */
.blog-newsletter-section {
  padding: 80px 0;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, #061729 0%, #000000 100%);
  border-top: 1px solid rgba(51, 160, 176, 0.15);
  border-bottom: 1px solid rgba(51, 160, 176, 0.15);
}

.blog-newsletter-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.blog-newsletter-inner h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  color: var(--platinum);
  margin-bottom: 16px;
}

.blog-newsletter-inner p {
  font-size: 1.15rem;
  color: var(--fog-silver);
  line-height: 1.7;
  margin-bottom: 36px;
}

.blog-newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 540px;
  margin: 0 auto;
}

.blog-newsletter-form input {
  flex: 1;
  padding: 16px 22px;
  background: var(--loop-current);
  border: 1px solid var(--teal-border);
  border-radius: var(--btn-radius);
  color: var(--platinum);
  font-family: var(--font);
  font-size: 1.05rem;
  outline: none;
}

.blog-newsletter-form input:focus {
  border-color: var(--teal-accent);
}

/* Article Reader Modal */
.article-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(1, 15, 14, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.article-modal-box {
  width: 100%;
  max-width: 840px;
  max-height: 88vh;
  background: #04101e;
  border: 1px solid rgba(51, 160, 176, 0.35);
  border-radius: 28px;
  overflow-y: auto;
  padding: clamp(32px, 5vw, 64px);
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(51, 160, 176, 0.18);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--teal-accent) rgba(0, 20, 18, 0.6);
}

.article-modal-box::-webkit-scrollbar {
  width: 6px;
}

.article-modal-box::-webkit-scrollbar-track {
  background: rgba(0, 20, 18, 0.6);
  border-radius: 999px;
  margin: 16px 0;
}

.article-modal-box::-webkit-scrollbar-thumb {
  background: var(--teal-accent);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(51, 160, 176, 0.5);
}

.article-modal-box::-webkit-scrollbar-thumb:hover {
  background: #38e1ca;
}

.article-modal.active .article-modal-box {
  transform: translateY(0) scale(1);
}

.article-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(51, 160, 176, 0.1);
  border: 1px solid rgba(51, 160, 176, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--platinum);
  cursor: pointer;
  transition: all 0.25s ease;
}

.article-modal-close:hover {
  background: var(--teal-accent);
  color: var(--loop-depth);
  transform: rotate(90deg);
}

.article-modal-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-accent);
  margin-bottom: 12px;
  display: inline-block;
}

.article-modal-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
  color: var(--platinum);
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.article-modal-body {
  font-size: 1.15rem;
  color: var(--fog-silver);
  line-height: 1.85;
}

.article-modal-body h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--platinum);
  margin: 36px 0 16px;
}

.article-modal-body p {
  margin-bottom: 20px;
}

.article-modal-body ul {
  margin: 16px 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-modal-body li {
  color: var(--fog-silver);
}

@media (max-width: 1024px) {
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-visual { height: 240px; }
  .blog-feed-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .blog-feed-grid { grid-template-columns: 1fr; }
  .blog-newsletter-form { flex-direction: column; }
}

/* ============================================================
   CINEMATIC ARCHITECTURE INJECTIONS (Option A)
   Manifesto · Interactive Artifacts · Sticky Protocol · Status
   ============================================================ */

/* ── 1. THE MANIFESTO (Philosophy) ───────────────────────── */
.manifesto-section {
  padding: 130px 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, #123d6a 0%, #04101e 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--teal-border);
  border-bottom: 1px solid var(--teal-border);
}

.manifesto-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.manifesto-lead {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--fog-silver);
  margin-bottom: 34px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.manifesto-statement {
  font-family: var(--font-drama);
  font-style: italic;
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--platinum);
  letter-spacing: -0.015em;
}

.manifesto-highlight {
  background: linear-gradient(90deg, #33a0b0 0%, #72d0de 40%, #FFFFFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-style: italic;
}

/* ── 2. INTERACTIVE GROWTH & ROAS ENGINE ──────────────────── */
.growth-engine-section {
  padding: var(--section-gap) 0;
  background: linear-gradient(180deg, var(--loop-depth) 0%, var(--loop-ink) 100%);
  position: relative;
}

.growth-cockpit {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  margin-top: 50px;
  background: linear-gradient(165deg, rgba(6, 21, 38, 0.92) 0%, rgba(2, 10, 20, 0.96) 100%);
  border: 1px solid rgba(51, 160, 176, 0.35);
  border-radius: 32px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8), 0 0 60px rgba(51, 160, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.cockpit-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.control-group {
  background: linear-gradient(145deg, rgba(9, 32, 56, 0.65) 0%, rgba(4, 16, 30, 0.8) 100%);
  border: 1px solid rgba(51, 160, 176, 0.22);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.control-group:hover {
  border-color: rgba(114, 208, 222, 0.45);
  background: linear-gradient(145deg, rgba(14, 45, 78, 0.75) 0%, rgba(6, 22, 40, 0.9) 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(51, 160, 176, 0.16);
}

.control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.control-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #72d0de;
  text-shadow: 0 0 10px rgba(114, 208, 222, 0.25);
}

.control-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8da4b8;
  opacity: 0.9;
}

.control-val-badge {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(51, 160, 176, 0.25) 0%, rgba(18, 61, 106, 0.65) 100%);
  border: 1px solid rgba(114, 208, 222, 0.5);
  padding: 4px 16px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(51, 160, 176, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Range Slider */
.slider-wrapper {
  position: relative;
  margin: 14px 0;
}

#spend-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(51, 160, 176, 0.4) 0%, rgba(21, 77, 134, 0.6) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

#spend-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #72d0de 45%, #33a0b0 100%);
  border: 3px solid #020a14;
  box-shadow: 0 0 18px rgba(114, 208, 222, 0.9), 0 0 30px rgba(51, 160, 176, 0.5);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
}

#spend-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 26px rgba(114, 208, 222, 1), 0 0 40px rgba(51, 160, 176, 0.7);
}

#spend-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #72d0de 45%, #33a0b0 100%);
  border: 3px solid #020a14;
  box-shadow: 0 0 18px rgba(114, 208, 222, 0.9), 0 0 30px rgba(51, 160, 176, 0.5);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.budget-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.preset-pill {
  padding: 8px 6px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(51, 160, 176, 0.25);
  background: rgba(6, 21, 38, 0.75);
  color: #8da4b8;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.preset-pill:hover {
  border-color: #72d0de;
  color: #FFFFFF;
  background: rgba(51, 160, 176, 0.2);
  box-shadow: 0 0 14px rgba(51, 160, 176, 0.3);
}

.preset-pill.active {
  background: linear-gradient(135deg, #72d0de 0%, #33a0b0 100%);
  color: #020a14;
  font-weight: 700;
  border-color: #72d0de;
  box-shadow: 0 0 20px rgba(51, 160, 176, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Channel Toggles */
.channel-toggles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.channel-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(51, 160, 176, 0.2);
  background: rgba(6, 21, 38, 0.65);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.channel-check input[type="checkbox"] {
  display: none;
}

.channel-check .check-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(51, 160, 176, 0.35);
  background: rgba(2, 10, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.channel-check:hover {
  border-color: rgba(114, 208, 222, 0.4);
  background: rgba(51, 160, 176, 0.1);
}

.channel-check.active {
  border-color: #72d0de;
  background: linear-gradient(135deg, rgba(21, 77, 134, 0.35) 0%, rgba(51, 160, 176, 0.15) 100%);
  box-shadow: 0 0 18px rgba(51, 160, 176, 0.25);
}

.channel-check.active .check-box {
  background: linear-gradient(135deg, #72d0de 0%, #33a0b0 100%);
  border-color: #72d0de;
  color: #020a14;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(114, 208, 222, 0.8);
}

.channel-text {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--platinum);
}

.channel-check.active .channel-text {
  font-weight: 600;
}

/* Right Terminal */
.cockpit-terminal {
  background: linear-gradient(160deg, #0a2544 0%, #05162a 50%, #020b16 100%);
  border: 1px solid rgba(114, 208, 222, 0.45);
  border-radius: 28px;
  padding: clamp(24px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(51, 160, 176, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
}

.terminal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(51, 160, 176, 0.22);
}

.terminal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #72d0de;
  letter-spacing: 0.1em;
}

.terminal-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(51, 160, 176, 0.16);
  color: #72d0de;
  border: 1px solid rgba(114, 208, 222, 0.4);
  box-shadow: 0 0 12px rgba(51, 160, 176, 0.25);
}

.terminal-primary-stat {
  padding: 24px 0;
  border-bottom: 1px solid rgba(51, 160, 176, 0.22);
}

.primary-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8faec5;
  display: block;
  margin-bottom: 10px;
}

.primary-value {
  font-family: var(--font);
  font-size: clamp(2.8rem, 4.5vw, 3.8rem);
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(90deg, #FFFFFF 0%, #a2e8f2 50%, #33a0b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 0 20px rgba(51, 160, 176, 0.4));
}

.primary-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #38e1ca;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(56, 225, 202, 0.1);
  border: 1px solid rgba(56, 225, 202, 0.3);
  padding: 4px 12px;
  border-radius: 6px;
  text-shadow: 0 0 12px rgba(56, 225, 202, 0.45);
}

.terminal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(51, 160, 176, 0.22);
}

.metric-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #72d0de;
}

.metric-stat {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 700;
  color: #FFFFFF;
  font-family: var(--font);
  letter-spacing: -0.01em;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
}

.metric-sub {
  font-size: 12px;
  color: #8faec5;
}

.terminal-footer {
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cockpit-terminal .btn-primary {
  background: linear-gradient(135deg, #72d0de 0%, #33a0b0 50%, #154d86 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: #020a14 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 30px rgba(51, 160, 176, 0.5), 0 0 20px rgba(114, 208, 222, 0.3);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cockpit-terminal .btn-primary:hover {
  background-position: 100% 0%;
  color: #FFFFFF !important;
  box-shadow: 0 12px 40px rgba(51, 160, 176, 0.8), 0 0 35px rgba(114, 208, 222, 0.6);
  transform: translateY(-2px) scale(1.02);
}

.terminal-disclaimer {
  font-size: 11.5px;
  color: #6C8296;
  opacity: 0.9;
  text-align: center;
  line-height: 1.5;
}

/* ── 3. STICKY STACKING PROTOCOL ─────────────────────────── */
.protocol-section {
  padding: var(--section-gap) 0;
  background: linear-gradient(180deg, var(--loop-ink) 0%, var(--loop-depth) 100%);
  position: relative;
}

.protocol-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 60px;
  position: relative;
}

.protocol-card {
  position: sticky;
  top: 110px;
  min-height: 380px;
  background: #04101e;
  border: 1px solid rgba(51, 160, 176, 0.35);
  border-radius: 32px;
  padding: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(51, 160, 176, 0.08);
  transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
  overflow: hidden;
}

.protocol-step {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--teal-accent);
  display: inline-block;
  margin-bottom: 14px;
}

.protocol-card h3 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  color: var(--platinum);
  margin-bottom: 18px;
  line-height: 1.25;
}

.protocol-card p {
  font-size: 1.15rem;
  color: var(--fog-silver);
  line-height: 1.75;
}

.protocol-visual {
  height: 250px;
  background: rgba(0, 20, 19, 0.7);
  border: 1px solid rgba(51, 160, 176, 0.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.protocol-visual svg {
  width: 100%;
  height: 100%;
}

/* Motif 1: Rotating Geometric Motif */
.radar-orbiter {
  transform-origin: 180px 125px;
  animation: orbitRotate 16s linear infinite;
}

@keyframes orbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Motif 2: Scanning Laser Line */
.laser-beam {
  animation: laserScan 3s ease-in-out infinite alternate;
}

@keyframes laserScan {
  0% { transform: translateY(15px); opacity: 0.4; }
  50% { opacity: 1; }
  100% { transform: translateY(210px); opacity: 0.4; }
}

/* Motif 3: Pulsing Waveform */
.ekg-wave {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: ekgPulse 3s linear infinite;
}

@keyframes ekgPulse {
  0% { stroke-dashoffset: 400; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -400; }
}

/* ── 4. FOOTER SYSTEM OPERATIONAL STATUS PILL ─────────────── */
.footer-system-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 34, 32, 0.85);
  border: 1px solid rgba(51, 160, 176, 0.35);
  padding: 8px 18px;
  border-radius: 999px;
  margin-top: 26px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.footer-system-status .status-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #33a0b0;
  box-shadow: 0 0 10px #33a0b0;
  animation: beaconPulse 1.8s infinite;
}

.footer-system-status .status-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--teal-accent);
  text-transform: uppercase;
}

/* ── COMPREHENSIVE RESPONSIVE SUITE ──────────────────────── */

/* ── Tablets & Medium Screens (<= 1024px) ─────────────────── */
@media (max-width: 1024px) {
  .navbar {
    top: 12px;
    width: calc(100% - 24px);
    padding: 8px 16px;
  }
  .nav-links, .nav-cta {
    display: none !important;
  }
  .nav-burger {
    display: flex;
  }
  .growth-cockpit {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .protocol-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 28px;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .hero-globe-wrap {
    display: none !important;
  }
}

/* ── Mobile & Tablets Portrait (<= 768px) ─────────────────── */
@media (max-width: 768px) {
  :root {
    --section-gap: 60px;
  }

  .container {
    padding: 0 16px;
  }

  /* 1. Navbar & Mobile Menu */
  .navbar {
    top: 8px;
    width: calc(100% - 16px);
    padding: 6px 14px;
  }
  .logo-img {
    height: 36px;
  }
  .mobile-menu {
    padding: 80px 24px 40px;
  }
  .mobile-menu ul {
    gap: 16px;
  }
  .mobile-link {
    font-size: 1.35rem;
  }

  /* 2. Hero Section */
  .hero {
    padding: 100px 16px 40px;
    min-height: auto;
  }
  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
  }
  .hero-title {
    margin-bottom: 18px;
    line-height: 1.08;
    width: 100%;
  }
  .hero-line-1 {
    font-size: clamp(2.1rem, 7.5vw, 3.2rem);
    margin-bottom: 4px;
  }
  .hero-line-2 {
    width: 100%;
  }
  .hero-cycle {
    font-size: clamp(3.6rem, 13vw, 5.6rem);
  }
  .hero-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 28px;
    padding: 0 4px;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    gap: 12px;
    margin: 0 auto;
  }
  .hero-actions .btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1.05rem;
    min-height: 48px;
    justify-content: center;
  }
  .hero-globe-wrap {
    display: none !important;
  }

  /* 3. Growth Cockpit */
  .growth-cockpit-section {
    padding: 60px 0;
  }
  .cockpit-controls, .cockpit-terminal {
    padding: 22px 16px;
    border-radius: 20px;
  }
  .budget-presets {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .channel-toggles {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .terminal-metrics-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .metric-card {
    padding: 14px;
  }

  /* 4. Functional Artifacts / Features */
  .artifacts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .artifact-card {
    padding: 24px 18px;
    border-radius: 20px;
  }

  /* 4.5. About Command Card */
  .about-command-card {
    padding: 24px 18px;
    border-radius: 20px;
    max-width: 100%;
  }
  .command-card-topbar {
    margin-bottom: 18px;
    padding-bottom: 14px;
    gap: 12px;
  }
  .about-logo-ring {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    padding: 4px;
  }
  .about-logo-img {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
  }
  .command-card-identity strong {
    font-size: 1.05rem;
  }
  .command-card-identity span {
    font-size: 0.78rem;
  }
  .command-card-beacon {
    font-size: 9px;
    padding: 4px 9px;
    gap: 5px;
  }
  .status-beacon {
    width: 6px;
    height: 6px;
  }
  .command-telemetry-grid {
    gap: 10px;
    margin-bottom: 14px;
  }
  .telemetry-block {
    padding: 14px 12px;
    border-radius: 12px;
  }
  .telemetry-stat {
    font-size: 1.45rem;
    margin-bottom: 2px;
  }
  .telemetry-label {
    font-size: 8.5px;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .telemetry-block p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
  .command-terminal-feed {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 10.5px;
    gap: 6px;
  }

  /* 5. Services & Portfolio */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-card {
    padding: 26px 18px;
    border-radius: 20px;
  }
  .portfolio-wheel-container {
    height: 380px;
  }
  .wheel-item {
    width: 160px;
    height: 220px;
  }
  .wheel-prev {
    left: 8px;
  }
  .wheel-next {
    right: 8px;
  }

  /* 5.5. Industries We Work In */
  .industries-section {
    padding: 60px 0;
  }
  .industries-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }
  .industry-card {
    padding: 24px 20px;
    min-height: auto;
    border-radius: 20px;
  }
  .industry-title {
    font-size: 1.25rem;
  }
  .industry-desc {
    font-size: 0.92rem;
    margin-bottom: 16px;
  }

  /* 6. Sticky Protocol Cards */
  .protocol-cards-stack {
    gap: 24px;
    margin-top: 36px;
  }
  .protocol-card {
    position: relative;
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    padding: 24px 18px;
    border-radius: 20px;
    min-height: auto;
    gap: 20px;
  }
  .protocol-visual {
    height: 180px;
  }

  /* 7. Testimonials & FAQ */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .testimonial-card {
    padding: 24px 18px;
  }
  .faq-list {
    gap: 14px;
    max-width: 100%;
  }
  .faq-item {
    border-radius: 16px;
  }
  .faq-q {
    padding: 20px 20px;
    gap: 14px;
  }
  .faq-q span {
    font-size: 1.08rem;
  }
  .faq-icon {
    width: 30px;
    height: 30px;
    padding: 5px;
  }
  .faq-a {
    padding: 0 20px 0;
  }
  .faq-item.open .faq-a {
    padding: 0 20px 20px;
  }
  .faq-a p {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  /* 7.5. Homepage Blog Grid */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .blog-card {
    padding: 24px 20px;
    border-radius: 18px;
  }
  .blog-img-wrap {
    margin-bottom: 18px;
    border-radius: 12px;
  }
  .blog-img-placeholder {
    height: 180px;
  }
  .blog-meta {
    margin-bottom: 12px;
  }
  .blog-card h3 {
    font-size: 1.18rem;
    margin-bottom: 10px;
    line-height: 1.35;
  }
  .blog-card p {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .blog-read-more {
    font-size: 14px;
  }

  /* 8. Contact Form */
  .contact-form {
    padding: 26px 16px;
    border-radius: 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-group {
    margin-bottom: 16px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* Prevents iOS Safari Auto-Zoom */
    padding: 13px 14px;
  }
  .contact-detail-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .copy-pill {
    padding: 4px 8px;
    font-size: 11.5px;
  }

  /* 9. Footer */
  .footer {
    padding: 50px 0 30px;
    border-radius: 2.5rem 2.5rem 0 0;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* 10. Blog Page */
  .blog-hero {
    padding: 95px 16px 32px;
  }
  .blog-featured-card {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    gap: 18px;
    border-radius: 20px;
  }
  .blog-feed-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .blog-filters-section {
    top: 56px;
    padding: 10px 0 16px;
  }
  .blog-filters-wrap {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-filters-wrap::-webkit-scrollbar {
    display: none;
  }
  .blog-filter-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .article-modal {
    padding: 8px;
  }
  .article-modal-content {
    border-radius: 16px;
    max-height: 94vh;
  }
  .article-modal-header {
    padding: 20px 16px 12px;
  }
  .article-modal-body {
    padding: 16px;
    font-size: 0.98rem;
    line-height: 1.65;
  }
}

/* ── Compact Mobile (<= 480px) ────────────────────────────── */
@media (max-width: 480px) {
  .navbar {
    top: 6px;
    width: calc(100% - 12px);
    padding: 5px 12px;
  }
  .logo-img {
    height: 30px;
  }
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
  .hero-line-2 {
    font-size: clamp(1.8rem, 7.5vw, 2.4rem);
  }
  .hero-sub {
    font-size: 0.98rem;
  }
  .budget-presets {
    grid-template-columns: 1fr;
  }
  .about-stats-grid {
    grid-template-columns: 1fr;
  }
  .footer-links {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .closing-cta-inner h2 {
    font-size: 1.9rem;
  }
  .closing-cta-inner p {
    font-size: 1.05rem;
  }

  /* About Command Card Mobile */
  .about-command-card {
    padding: 18px 14px;
    border-radius: 16px;
  }
  .command-card-topbar {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    gap: 8px;
  }
  .command-card-identity {
    gap: 10px;
  }
  .about-logo-ring {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    padding: 3px;
  }
  .about-logo-img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }
  .command-card-identity strong {
    font-size: 0.95rem;
  }
  .command-card-identity span {
    font-size: 0.72rem;
  }
  .command-card-beacon {
    font-size: 8.5px;
    padding: 3px 8px;
    gap: 4px;
  }
  .status-beacon {
    width: 5px;
    height: 5px;
  }
  .command-telemetry-grid {
    gap: 8px;
    margin-bottom: 12px;
  }
  .telemetry-block {
    padding: 11px 9px;
    border-radius: 10px;
  }
  .telemetry-stat {
    font-size: 1.35rem;
    margin-bottom: 2px;
  }
  .telemetry-label {
    font-size: 7.8px;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
    line-height: 1.25;
  }
  .telemetry-block p {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }
  .command-terminal-feed {
    padding: 9px 11px;
    border-radius: 9px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .feed-indicator {
    font-size: 9.5px;
  }
  .feed-text {
    font-size: 9.5px;
    line-height: 1.35;
  }

  /* Homepage Blog Mobile */
  .blog-grid {
    gap: 16px;
  }
  .blog-card {
    padding: 18px 16px;
    border-radius: 16px;
  }
  .blog-img-wrap {
    margin-bottom: 14px;
    border-radius: 10px;
  }
  .blog-img-placeholder {
    height: 160px;
    border-radius: 10px;
  }
  .blog-meta {
    margin-bottom: 10px;
  }
  .blog-tag {
    font-size: 11px;
  }
  .blog-date {
    font-size: 11.5px;
  }
  .blog-card h3 {
    font-size: 1.08rem;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .blog-card p {
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .blog-read-more {
    font-size: 13.5px;
    gap: 6px;
  }

  /* Industries Mobile */
  .industry-card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .industry-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .industry-icon-wrap svg {
    width: 20px;
    height: 20px;
  }
  .industry-badge {
    font-size: 9px;
    padding: 3px 8px;
  }
  .industry-title {
    font-size: 1.15rem;
    margin-bottom: 6px;
  }
  .industry-desc {
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .industry-pill {
    font-size: 10px;
    padding: 3px 10px;
  }

  /* FAQ Mobile */
  .faq-list {
    gap: 10px;
  }
  .faq-item {
    border-radius: 14px;
  }
  .faq-q {
    padding: 16px 14px;
    gap: 12px;
  }
  .faq-q span {
    font-size: 0.98rem;
    line-height: 1.35;
  }
  .faq-icon {
    width: 28px;
    height: 28px;
    padding: 5px;
  }
  .faq-a {
    padding: 0 14px 0;
  }
  .faq-item.open .faq-a {
    padding: 0 14px 16px;
  }
  .faq-a p {
    font-size: 0.88rem;
    line-height: 1.55;
  }
}

/* ── Ultra-Compact Mobile (<= 360px) ──────────────────────── */
@media (max-width: 360px) {
  .command-telemetry-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .telemetry-block {
    padding: 12px 10px;
  }
  .blog-card {
    padding: 16px 12px;
  }
  .blog-img-placeholder {
    height: 140px;
  }
  .faq-q {
    padding: 14px 12px;
    gap: 10px;
  }
  .faq-q span {
    font-size: 0.92rem;
  }
  .faq-icon {
    width: 26px;
    height: 26px;
    padding: 4px;
  }
  .faq-a {
    padding: 0 12px 0;
  }
  .faq-item.open .faq-a {
    padding: 0 12px 14px;
  }
  .faq-a p {
    font-size: 0.84rem;
  }
}

/* ── Industry Pages Global Mobile Responsiveness ──────────── */
.re-hero, .edu-hero, .steel-hero, .ecom-hero, .rest-hero, .chem-hero, .const-hero, .event-hero {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 0 60px;
  position: relative;
  overflow: hidden;
  background: var(--loop-depth);
}

@media (max-width: 1024px) {
  .re-badge-grid, .edu-badge-grid, .steel-badge-grid, .ecom-badge-grid,
  .rest-badge-grid, .chem-badge-grid, .const-badge-grid, .event-badge-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .re-dilemma-grid, .edu-dilemma-grid, .steel-dilemma-grid, .ecom-dilemma-grid,
  .rest-dilemma-grid, .chem-dilemma-grid, .const-dilemma-grid, .event-dilemma-grid,
  .re-phases-grid, .edu-phases-grid, .steel-phases-grid, .ecom-phases-grid,
  .rest-phases-grid, .chem-phases-grid, .const-phases-grid, .event-phases-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .re-hero, .edu-hero, .steel-hero, .ecom-hero,
  .rest-hero, .chem-hero, .const-hero, .event-hero {
    padding: 100px 0 40px !important;
    min-height: auto !important;
  }
  .re-hero .hero-title, .edu-hero .hero-title, .steel-hero .hero-title,
  .ecom-hero .hero-title, .rest-hero .hero-title, .chem-hero .hero-title,
  .const-hero .hero-title, .event-hero .hero-title {
    font-size: clamp(1.85rem, 7.5vw, 2.8rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 18px !important;
  }
  .re-badge-grid, .edu-badge-grid, .steel-badge-grid, .ecom-badge-grid,
  .rest-badge-grid, .chem-badge-grid, .const-badge-grid, .event-badge-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .re-dilemma-card, .edu-dilemma-card, .steel-dilemma-card, .ecom-dilemma-card,
  .rest-dilemma-card, .chem-dilemma-card, .const-dilemma-card, .event-dilemma-card,
  .re-phase-card, .edu-phase-card, .steel-phase-card, .ecom-phase-card,
  .rest-phase-card, .chem-phase-card, .const-phase-card, .event-phase-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  .re-hero-content, .edu-hero-content, .steel-hero-content, .ecom-hero-content,
  .rest-hero-content, .chem-hero-content, .const-hero-content, .event-hero-content {
    padding: 0 4px;
  }
  .re-hero .hero-actions, .edu-hero .hero-actions, .steel-hero .hero-actions,
  .ecom-hero .hero-actions, .rest-hero .hero-actions, .chem-hero .hero-actions,
  .const-hero .hero-actions, .event-hero .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
    gap: 12px !important;
    margin: 0 auto !important;
  }
  .re-hero .hero-actions .btn, .edu-hero .hero-actions .btn, .steel-hero .hero-actions .btn,
  .ecom-hero .hero-actions .btn, .rest-hero .hero-actions .btn, .chem-hero .hero-actions .btn,
  .const-hero .hero-actions .btn, .event-hero .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}





/* Additional Northloop services, privacy and consent components */
.consent-label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.88rem;line-height:1.55}
.consent-label input{width:18px;height:18px;flex:0 0 18px;margin-top:3px;accent-color:#46a2b7}
.consent-label a,.legal-footer-links a{color:#46a2b7;text-decoration:underline;text-underline-offset:3px}
.consent-group.has-error .field-error-msg{display:block}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-error-notice{padding:12px 15px;border:1px solid #c94a4a;background:#fff5f5;color:#832c2c;border-radius:8px;margin-bottom:16px}
.form-error-notice[hidden]{display:none}
.legal-footer-links{display:flex;gap:16px;flex-wrap:wrap}
.legal-footer-links a{font-size:.83rem}
.nl-subpage{background:#080d22;color:#eff5ff;min-height:100vh;font-family:inherit}
.nl-subpage header{padding:24px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff25}
.nl-subpage header img{width:170px;max-width:42vw}
.nl-subpage header a{color:#b9e7f0}
.nl-page-wrap{max-width:1100px;margin:0 auto;padding:80px 25px 100px}
.nl-page-wrap h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.13;margin:15px 0 24px}
.nl-page-wrap h2{font-size:1.55rem;margin:36px 0 12px;color:#fff}
.nl-page-wrap p,.nl-page-wrap li{line-height:1.8;color:#cad3e5}
.nl-page-wrap a{color:#8ad8e4}
.nl-eyebrow{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#64c0d0}
.nl-hero{background:linear-gradient(120deg,#192046,#123d6a);padding:42px;border-radius:24px;margin:15px 0 40px}
.nl-hero p{font-size:1.1rem;max-width:790px}
.nl-cta{display:inline-flex;padding:14px 23px;border-radius:30px;text-decoration:none!important;color:#10152d!important;background:#89dbea;font-weight:700;margin-top:20px}
.nl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:30px 0}
.nl-tile{padding:25px;border:1px solid #ffffff30;border-radius:15px;background:#ffffff0b}
.nl-tile h3{margin:0 0 12px}.nl-tile p{margin:0;font-size:.95rem}
.nl-disclaimer{padding:18px;border-left:3px solid #69b9c8;background:#ffffff0c}
.nl-subpage footer{padding:25px 6%;border-top:1px solid #ffffff25;display:flex;gap:25px;flex-wrap:wrap}
.nl-subpage footer a{color:#8ad8e4}
@media(max-width:750px){.nl-grid{grid-template-columns:1fr}.nl-hero{padding:25px}.nl-page-wrap{padding:45px 18px 70px}}


/* Seventh service: match the combined width of the first three cards. */
.services-grid > .service-card--full-width {
  grid-column: 1 / -1;
}

/* Full-width data entry service overview, visually balanced across desktop/mobile. */
.service-card--full-width { min-height: 0; padding: clamp(25px, 4vw, 48px); }
.nl-data-layout { display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: center; gap: clamp(25px, 4vw, 64px); position:relative; z-index:1; }
.nl-data-intro .service-icon { margin-bottom: 21px; }
.nl-data-eyebrow { display:block; margin-bottom: 14px; letter-spacing:.15em; font-size:.69rem; color:#72d0de; font-weight:700; }
.service-card--full-width .nl-data-intro h3 { font-size: clamp(1.6rem, 2.5vw, 2.45rem); font-weight:600; }
.service-card--full-width .nl-data-intro > p { margin:0 0 22px; font-size:1rem; line-height:1.7; flex-grow:0; }
.nl-data-pricing { display:flex; flex-direction:column; gap:5px; padding:15px 0 20px; border-top:1px solid rgba(114,208,222,.21); }
.nl-data-pricing strong { font-size:1.2rem; color:#9de9f3; }
.nl-data-pricing span { font-size:.77rem; line-height:1.5; color:var(--fog-silver); }
.nl-data-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:13px 20px; text-decoration:none!important; border-radius:11px; background:#46a2b7; color:#061b2d!important; font-weight:700; font-size:.92rem; transition:background .2s ease,transform .2s ease; }
.nl-data-cta:hover { background:#8bdae8; transform:translateY(-2px); }
.nl-data-cta:focus-visible { outline:3px solid white;outline-offset:3px; }
.nl-data-offerings { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.nl-data-feature { display:flex; gap:12px; padding:19px 16px; border:1px solid rgba(114,208,222,.17); border-radius:13px; background:rgba(13,55,87,.46); min-height:125px; }
.nl-data-feature-icon { flex:none; display:flex; align-items:center;justify-content:center; width:28px;height:28px;border-radius:7px; background:rgba(70,162,183,.18); color:#92e6f2; font-size:.69rem;font-weight:700; }
.nl-data-feature h4 { font-size:.91rem; margin:0 0 8px; color:#f1f8ff; line-height:1.35; }
.service-card--full-width .nl-data-feature p { margin:0; flex-grow:0; font-size:.78rem; line-height:1.56; color:#bfcfe0; }
@media(max-width:950px){ .nl-data-layout{grid-template-columns:1fr;} }
@media(max-width:600px){ .nl-data-offerings{grid-template-columns:1fr;} .nl-data-feature{min-height:0;} .service-card--full-width{padding:26px 20px;} }

/* Unified Northloop legal page system */
.legal-site{background:#070d1b;color:#e8f2fa;font-family:'DM Sans',sans-serif;overflow-x:hidden}
.legal-site .navbar{z-index:1000}
.legal-main{padding-top:84px}
.legal-container{max-width:1160px;margin:0 auto;padding-left:30px;padding-right:30px}
.legal-hero{padding:95px 0 95px;background:radial-gradient(ellipse at 80% 20%,rgba(70,162,183,.18),transparent 50%),linear-gradient(140deg,#101933 0%,#192046 65%,#101b2c 100%);border-bottom:1px solid rgba(112,200,218,.15);position:relative}
.legal-hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#46a2b7,transparent);opacity:.45}
.legal-eyebrow,.legal-date,.legal-sidebar strong{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#72d0de;font-weight:600}
.legal-hero h1{font-size:clamp(42px,6vw,78px);line-height:1.1;letter-spacing:-.055em;color:#fff;font-weight:600;margin:24px 0}
.legal-hero-subtitle{font-size:clamp(16px,2vw,20px);line-height:1.7;max-width:650px;color:#c4d6e5;margin-bottom:35px}
.legal-date{color:#a8b7c9;letter-spacing:.08em}
.legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:70px;padding-top:78px;padding-bottom:80px}
.legal-sidebar{align-self:start;position:sticky;top:115px;padding:18px 20px 20px;border:1px solid rgba(96,174,195,.2);border-radius:14px;background:rgba(25,32,70,.42)}
.legal-sidebar nav{display:flex;flex-direction:column;margin-top:18px;gap:4px}
.legal-sidebar a{font-size:13px;line-height:1.5;color:#b8c6d9;text-decoration:none;padding:9px 10px;border-radius:7px;transition:background .2s,color .2s}
.legal-sidebar a:hover,.legal-sidebar a:focus-visible{background:rgba(70,162,183,.14);color:#8ee2ef}
.legal-article{min-width:0}
.legal-review-note{border-left:3px solid #46a2b7;padding:19px 23px;border-radius:0 12px 12px 0;background:rgba(70,162,183,.1);margin-bottom:20px}
.legal-review-note p{font-size:13px;line-height:1.8;color:#bed3df;margin:0}
.legal-content-section{padding:33px 0 35px;border-bottom:1px solid rgba(137,185,209,.15);scroll-margin-top:115px}
.legal-content-section:first-of-type{padding-top:25px}
.legal-content-section h2{font-size:clamp(21px,2.3vw,28px);line-height:1.3;letter-spacing:-.025em;color:#fff;font-weight:600;margin:0 0 17px}
.legal-content-section p,.legal-content-section li{font-size:15px;line-height:1.9;color:#bfcddd;margin:0 0 12px;overflow-wrap:anywhere}
.legal-content-section a{color:#81d8e6;text-underline-offset:3px}
.legal-contact-banner{margin-bottom:95px;padding-top:34px;padding-bottom:34px;display:flex;align-items:center;justify-content:space-between;gap:26px;border:1px solid rgba(70,162,183,.32);background:linear-gradient(120deg,#192046,#0e2b42);border-radius:20px}
.legal-contact-banner h2{font-size:32px;color:#fff;margin:12px 0 6px}.legal-contact-banner p{color:#b9c8d7;font-size:14px;line-height:1.7}
.legal-contact-button{display:inline-flex;white-space:nowrap;text-decoration:none;background:#46a2b7;color:#061725;padding:14px 24px;border-radius:7px;font-size:14px;font-weight:700;transition:transform .2s}
.legal-contact-button:hover{transform:translateY(-2px)}
.legal-site .footer{position:relative}
.legal-mobile-nav{display:none}
@media(max-width:800px){.legal-main{padding-top:70px}.legal-hero{padding:70px 0}.legal-container{padding-left:22px;padding-right:22px}.legal-layout{display:block;padding-top:36px;padding-bottom:55px}.legal-sidebar{position:static;margin-bottom:15px}.legal-sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.legal-contact-banner{margin-bottom:55px;display:block}.legal-contact-button{margin-top:22px}.legal-mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:4px;position:fixed;top:70px;left:0;right:0;background:#111b34;border-bottom:1px solid #46a2b7;z-index:999;padding:18px 25px}.legal-mobile-nav a{color:#d9ebf5;text-decoration:none;padding:10px}}
@media(max-width:480px){.legal-sidebar nav{grid-template-columns:1fr}.legal-hero h1{font-size:42px}}

/* International contact in footer */
.footer-international-phone { color: inherit; text-decoration: none; font-size: 0.85rem; white-space: nowrap; opacity: 0.85; }
.footer-international-phone:hover { color: #46a2b7; opacity: 1; }
.footer-bottom { flex-wrap: wrap; gap: 12px 24px; }

/* Contact form only: native mouse cursor, custom cursor hidden; keep the
   interactive cursor-tracked glass highlight (card-glare / ::before). */
html.has-custom-cursor.native-form-cursor .form-wrapper,
html.has-custom-cursor.native-form-cursor .form-wrapper * {
  cursor: auto !important;
}
html.has-custom-cursor.native-form-cursor .form-wrapper input,
html.has-custom-cursor.native-form-cursor .form-wrapper textarea {
  cursor: text !important;
}
html.has-custom-cursor.native-form-cursor .form-wrapper button,
html.has-custom-cursor.native-form-cursor .form-wrapper select,
html.has-custom-cursor.native-form-cursor .form-wrapper a,
html.has-custom-cursor.native-form-cursor .form-wrapper label,
html.has-custom-cursor.native-form-cursor .form-wrapper input[type="checkbox"] {
  cursor: pointer !important;
}
html.native-form-cursor #cursor,
html.native-form-cursor #cursor-trail {
  opacity: 0 !important;
}
.form-wrapper {
  transform: none !important;
  transform-style: flat;
  will-change: auto;
}

/* Contact CTA: accessible multi-service checkbox dropdown (Northloop theme). */
#group-service .service-field-label {
  font-size: 14px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--loop-mist);
}
#group-service .service-field-help {
  color: var(--fog-silver); font-size: .83rem; line-height: 1.45;
  margin: -4px 0 0;
}
#group-service .service-picker {
  position: relative; border: 1px solid rgba(51,160,176,.3);
  border-top-color: rgba(255,255,255,.17);
  border-radius: var(--btn-radius); overflow: hidden;
  background: rgba(4,16,30,.65);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.3);
  transition: border-color .2s, box-shadow .2s;
}
#group-service .service-picker[open],
#group-service .service-picker:focus-within {
  border-color: #72d0de;
  box-shadow: 0 0 20px rgba(51,160,176,.15);
}
#group-service .service-picker summary {
  padding: 16px 20px; min-height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; color: var(--platinum); font-size: 1rem;
  list-style: none; cursor: pointer; user-select: none;
}
#group-service .service-picker summary::-webkit-details-marker {display:none}
#group-service .service-picker summary svg {flex: none; color:#72d0de;transition:transform .2s ease}
#group-service .service-picker[open] summary svg {transform:rotate(180deg)}
#group-service .service-picker summary:focus-visible {outline: 2px solid #72d0de; outline-offset: -3px}
#group-service .service-options {
  display:grid;grid-template-columns:1fr;gap:5px;padding:8px 10px 12px;
  border-top:1px solid rgba(114,208,222,.2);
}
#group-service .service-option {
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; border-radius:8px; cursor:pointer;
  font-weight:500; color:#d4e6ef; letter-spacing:normal;
  line-height:1.4; font-size:.89rem; text-transform:none;
  transition:background .2s ease,color .2s ease;
}
#group-service .service-option:hover,
#group-service .service-option:focus-within {background:rgba(70,162,183,.15); color:#fff}
#group-service .service-option:has(input:checked) {background:rgba(70,162,183,.11);color:#a9edf5}
#group-service .service-option input[type="checkbox"] {
  appearance:auto; flex:0 0 18px; width:18px; height:18px;
  min-width:18px; margin:2px 0 0; padding:0!important;
  accent-color:#46a2b7; background:transparent!important;
  border:0!important; box-shadow:none!important; cursor:pointer;
}
#group-service .service-selection-preview {
  display:none; font-size:.78rem; line-height:1.5; color:#86d9e5;
}
#group-service.has-selection .service-selection-preview {display:block}
#group-service.has-error .service-picker {
  border-color:#ff5c5c;box-shadow:0 0 0 3px rgba(255,92,92,.17);
}
@media(max-width:600px) {
  #group-service .service-picker summary {padding:13px 14px; min-height:49px; font-size:16px}
  #group-service .service-options {padding:7px}
  #group-service .service-option {font-size:.87rem;padding:10px 9px}
}

/* Temporary email-compose contact fallback; preserves original CTA styling and cursor. */
.form-copy-btn { margin-top: 12px; }
.form-email-status { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(51,160,176,.45);
  border-radius: 10px; background: rgba(51,160,176,.1); color: var(--fog-silver); font-size: 14px;
  line-height: 1.55; }
.form-email-status[hidden] { display: none; }