:root {
    --navy: #0d1b2e;
    --navy-mid: #132340;
    --navy-light: #1e3a5f;
    --accent: #4d9fff;
    --accent-glow: #2979ff;
    --accent2: #00d4aa;
    --white: #ffffff;
    --grey: #8a9bb5;
    --card-bg: rgba(19, 35, 64, 0.7);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--navy);
    color: var(--white);
    overflow-x: hidden;
  }

  /* ── Canvas ── */
  #bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 60px;
    background: rgba(13, 27, 46, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(77, 159, 255, 0.12);
    transition: all 0.3s ease;
  }

  nav.scrolled {
    padding: 12px 60px;
    background: rgba(13, 27, 46, 0.97);
    box-shadow: 0 4px 40px rgba(0,0,0,0.4);
  }

  .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .nav-logo svg { height: 40px; }
  .nav-logo .logo-text { font-size: 1.1rem; font-weight: 700; color: var(--white); letter-spacing: 0.04em; }
  .nav-logo .logo-text span { font-weight: 300; }

  .nav-links { display: flex; gap: 36px; list-style: none; }
  .nav-links a {
    color: var(--grey);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.3s;
    position: relative;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width 0.3s;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-links a:hover::after { width: 100%; }

  .nav-cta {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color: white !important;
    border-radius: 6px;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 20px rgba(77,159,255,0.35);
    transition: all 0.3s !important;
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(77,159,255,0.5) !important; }
  .nav-cta::after { display: none !important; }

  /* ── SECTIONS ── */
  section { position: relative; z-index: 1; }
/* ── HERO ── */
  #hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 40px 80px;
    /* overflow visible so shred letters can fly freely outside hero bounds */
  }

  .hero-parallax-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden; /* clips background grid/radial without trapping hero text */
  }

  .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(77,159,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(77,159,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(800px) rotateX(20deg) scale(1.2);
    transform-origin: top center;
    opacity: 0.6;
  }

  .hero-radial {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(ellipse at center,
      rgba(77,159,255,0.12) 0%,
      rgba(41,121,255,0.06) 40%,
      transparent 70%);
    border-radius: 50%;
    animation: pulse-radial 4s ease-in-out infinite;
  }

  @keyframes pulse-radial {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  }

  .hero-content { position: relative; z-index: 2; max-width: 900px; }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(77,159,255,0.12);
    border: 1px solid rgba(77,159,255,0.3);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 32px;
    animation: fadeUp 0.8s ease both;
  }

  .badge-dot {
    width: 6px; height: 6px;
    background: var(--accent2);
    border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
  }

  .hero-title {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
    animation: fadeUp 0.8s 0.15s ease both;
  }

  .hero-title .gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 60%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-sub {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--grey);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 48px;
    animation: fadeUp 0.8s 0.3s ease both;
  }

  .hero-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp 0.8s 0.45s ease both;
  }

  .btn-primary {
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(77,159,255,0.4);
    transition: all 0.3s;
    letter-spacing: 0.04em;
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(77,159,255,0.6); }

  .btn-secondary {
    padding: 16px 40px;
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(77,159,255,0.4);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
  }
  .btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(77,159,255,0.1);
    transform: translateY(-3px);
  }

  .hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--grey);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: fadeUp 1s 0.8s ease both;
  }

  .scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: scroll-drop 1.5s ease-in-out infinite;
  }

  @keyframes scroll-drop {
    0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
    100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
  }

  /* ── FLOATING HEX DECORATIONS ── */
  .floating-hex {
    position: absolute;
    opacity: 0.06;
    animation: float-hex linear infinite;
    pointer-events: none;
  }

  @keyframes float-hex {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.06; }
    90% { opacity: 0.06; }
    100% { transform: translateY(-200px) rotate(360deg); opacity: 0; }
  }

  /* ── HERO TITLE LINES ── */
  .hero-line1 {
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    /* gradient now lives on the child spans so inline-block + transforms don't break it */
    animation: fadeUp 0.9s ease both;
    margin-bottom: 0;
    overflow: visible;
  }

  /* Each span carries its own gradient so transforms never break the parent clip */
  .hl-nexus, .hl-solutions {
    display: inline-block;
    transform-origin: center center;
    background: linear-gradient(135deg, #fff 30%, var(--accent) 70%, var(--accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Nav logo hidden on load — JS fades it in when hero text arrives */
  .nav-logo { opacity: 0; pointer-events: none; }

  .hero-tagline {
    font-size: clamp(1.1rem, 2.4vw, 1.75rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.75);
    margin-top: 0;
    will-change: transform;
    /* No CSS animation — JS drives initial reveal + scroll shred */
  }

  /* Individual letter spans for shred animation */
  .tl-ch {
    display: inline-block;
    will-change: transform, opacity;
  }
  .tl-sp { display: inline-block; width: 0.3em; }

  /* ── FUTURISTIC DIVIDER ── */
  .hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 700px;
    margin: 28px auto 24px;
    animation: fadeUp 0.9s 0.28s ease both;
    position: relative;
  }

  /* Left beam */
  .hd-left, .hd-right {
    flex: 1;
    height: 1px;
    position: relative;
    overflow: visible;
  }

  .hd-left {
    background: linear-gradient(to right, transparent 0%, rgba(77,159,255,0.15) 30%, var(--accent) 100%);
  }

  .hd-right {
    background: linear-gradient(to left, transparent 0%, rgba(77,159,255,0.15) 30%, var(--accent) 100%);
  }

  /* Travelling light dot on left arm */
  .hd-left::after, .hd-right::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to right, transparent, var(--accent2), transparent);
    transform: translateY(-50%);
    filter: blur(1px);
  }

  .hd-left::after {
    right: 0;
    animation: travel-left 2.4s ease-in-out infinite;
  }

  .hd-right::after {
    left: 0;
    animation: travel-right 2.4s ease-in-out infinite;
  }

  @keyframes travel-left {
    0%   { right: 100%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { right: 0%;  opacity: 0; }
  }

  @keyframes travel-right {
    0%   { left: 100%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 0%;  opacity: 0; }
  }

  /* Center diamond node */
  .hd-center {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
  }

  .hd-diamond {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    transform: rotate(45deg);
    box-shadow: 0 0 12px var(--accent), 0 0 28px rgba(77,159,255,0.5);
    animation: diamond-pulse 2s ease-in-out infinite;
    position: relative;
    z-index: 2;
  }

  @keyframes diamond-pulse {
    0%, 100% { box-shadow: 0 0 10px var(--accent), 0 0 24px rgba(77,159,255,0.4); transform: rotate(45deg) scale(1); }
    50%       { box-shadow: 0 0 20px var(--accent), 0 0 48px rgba(77,159,255,0.7), 0 0 70px rgba(0,212,170,0.3); transform: rotate(45deg) scale(1.25); }
  }

  /* Expanding pulse rings */
  .hd-pulse-ring {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(77,159,255,0.6);
    border-radius: 50%;
    animation: ring-expand 2s ease-out infinite;
    pointer-events: none;
  }

  .hd-pulse-ring--2 {
    animation-delay: 1s;
  }

  @keyframes ring-expand {
    0%   { transform: scale(0.4); opacity: 0.8; }
    100% { transform: scale(3.2); opacity: 0; }
  }

  /* ── STATS BAR ── */
  #stats-bar {
    padding: 60px 60px;
    background: rgba(19, 35, 64, 0.5);
    border-top: 1px solid rgba(77,159,255,0.1);
    border-bottom: 1px solid rgba(77,159,255,0.1);
    backdrop-filter: blur(10px);
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
  }

  .stat-item { position: relative; }
  .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background: rgba(77,159,255,0.2);
  }

  .stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 0.85rem;
    color: var(--grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }

  /* ── SECTION HEADER ── */
  .section-header {
    text-align: center;
    margin-bottom: 70px;
  }

  .section-tag {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(77,159,255,0.1);
    border: 1px solid rgba(77,159,255,0.25);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
  }

  .section-title, .gr-title {
    font-size: clamp(1.9rem,3.2vw,3rem);
    font-weight: 800; line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    background: linear-gradient(90deg, #fff 0%, #aab8cc 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }

  .section-sub {
    font-size: 1.05rem;
    color: var(--grey);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* ── MODULES ── */
  #modules { padding: 120px 60px; }

  .modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .module-card {
    background: var(--card-bg);
    border: 1px solid rgba(77,159,255,0.12);
    border-radius: 16px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: default;
    backdrop-filter: blur(12px);
  }

  .module-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(77,159,255,0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
  }

  .module-card:hover {
    transform: translateY(-8px);
    border-color: rgba(77,159,255,0.35);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(77,159,255,0.2);
  }

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

  .module-card .card-glow {
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77,159,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
  }
  .module-card:hover .card-glow { opacity: 1; }

  .module-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.6rem;
    position: relative;
    z-index: 1;
  }

  .module-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
  }

  .module-desc {
    font-size: 0.9rem;
    color: var(--grey);
    line-height: 1.7;
    position: relative;
    z-index: 1;
  }

  .module-tag {
    display: inline-block;
    margin-top: 20px;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }

  /* ── FEATURE SHOWCASE ── */
  #showcase {
    padding: 120px 60px;
    background: rgba(19,35,64,0.3);
  }

  .showcase-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  .showcase-visual {
    position: relative;
    height: 500px;
  }

  .showcase-3d-card {
    position: absolute;
    background: var(--card-bg);
    border: 1px solid rgba(77,159,255,0.2);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(16px);
    transition: transform 0.1s ease;
  }

  .main-card {
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 320px;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

  .float-card-1 {
    right: 0; top: 10%;
    width: 200px;
    animation: card-float1 4s ease-in-out infinite;
    z-index: 3;
  }

  .float-card-2 {
    right: 20px; bottom: 10%;
    width: 220px;
    animation: card-float2 5s ease-in-out infinite;
    z-index: 3;
  }

  @keyframes card-float1 {
    0%, 100% { transform: translateY(0px) rotate(-2deg); }
    50% { transform: translateY(-14px) rotate(-1deg); }
  }

  @keyframes card-float2 {
    0%, 100% { transform: translateY(0px) rotate(2deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
  }

  .card-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 12px;
  }

  .card-metric {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
  }

  .card-metric-sub {
    font-size: 0.8rem;
    color: var(--grey);
  }

  .mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
    margin-top: 16px;
  }

  .chart-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, var(--accent-glow), var(--accent));
    opacity: 0.7;
    animation: bar-grow 1s ease both;
  }

  @keyframes bar-grow {
    from { transform: scaleY(0); transform-origin: bottom; }
    to { transform: scaleY(1); transform-origin: bottom; }
  }

  .progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .progress-label { font-size: 0.78rem; color: var(--grey); min-width: 80px; }

  .progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    border-radius: 3px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-glow), var(--accent));
    animation: fill-bar 1.5s ease both;
  }

  @keyframes fill-bar {
    from { width: 0 !important; }
  }

  .progress-val { font-size: 0.78rem; font-weight: 700; color: var(--accent); min-width: 34px; text-align: right; }

  .showcase-content { }

  .feature-list { list-style: none; margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }

  .feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease;
  }

  .feature-item.visible {
    opacity: 1;
    transform: translateX(0);
  }

  .feature-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: rgba(77,159,255,0.12);
    border: 1px solid rgba(77,159,255,0.2);
  }

  .feature-text h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
  .feature-text p { font-size: 0.875rem; color: var(--grey); line-height: 1.6; }

  /* ── PROCESS ── */
  #process { padding: 120px 60px; }

  .process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
  }

  .process-steps::before {
    content: '';
    position: absolute;
    top: 48px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
    z-index: 0;
  }

  .process-step {
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
  }

  .process-step.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .step-num {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--navy-mid);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 24px;
    box-shadow: 0 0 0 6px rgba(77,159,255,0.1), 0 8px 32px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

  .process-step:hover .step-num {
    background: rgba(77,159,255,0.15);
    box-shadow: 0 0 0 10px rgba(77,159,255,0.12), 0 8px 40px rgba(77,159,255,0.3);
    transform: scale(1.08);
  }

  .step-title { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
  .step-desc { font-size: 0.875rem; color: var(--grey); line-height: 1.6; }

  /* ── TESTIMONIALS ── */
  #testimonials { padding: 120px 60px; background: rgba(19,35,64,0.3); }

  .testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .testi-card {
    background: var(--card-bg);
    border: 1px solid rgba(77,159,255,0.12);
    border-radius: 16px;
    padding: 36px;
    backdrop-filter: blur(12px);
    transition: all 0.4s;
  }

  .testi-card:hover {
    transform: translateY(-6px);
    border-color: rgba(77,159,255,0.3);
  }

  .testi-stars { color: #f59e0b; font-size: 1.1rem; margin-bottom: 16px; letter-spacing: 2px; }
  .testi-quote { font-size: 0.95rem; color: var(--grey); line-height: 1.75; margin-bottom: 24px; font-style: italic; }

  .testi-author { display: flex; align-items: center; gap: 14px; }
  .testi-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
  }

  .testi-name { font-size: 0.9rem; font-weight: 700; margin-bottom: 3px; }
  .testi-role { font-size: 0.78rem; color: var(--grey); }

  /* ── CTA ── */
  #cta {
    padding: 120px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .cta-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; height: 400px;
    background: radial-gradient(ellipse, rgba(77,159,255,0.15) 0%, transparent 70%);
    pointer-events: none;
  }

  .cta-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
  .cta-title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; margin-bottom: 20px; line-height: 1.15; }
  .cta-sub { font-size: 1.05rem; color: var(--grey); margin-bottom: 48px; line-height: 1.7; }

  /* ── CONTACT ── */
  #contact { padding: 80px 60px 120px; }

  .contact-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
  }

  .contact-info h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; }
  .contact-info p { color: var(--grey); line-height: 1.7; margin-bottom: 36px; }

  .contact-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--grey);
    font-size: 0.9rem;
  }
  .contact-detail .icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(77,159,255,0.1);
    border: 1px solid rgba(77,159,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .contact-form {
    background: var(--card-bg);
    border: 1px solid rgba(77,159,255,0.12);
    border-radius: 20px;
    padding: 48px;
    backdrop-filter: blur(16px);
  }

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

  .form-group { margin-bottom: 24px; }
  .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 10px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(77,159,255,0.18);
    border-radius: 10px;
    padding: 14px 18px;
    color: var(--white);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: all 0.3s;
    resize: none;
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder { color: rgba(138,155,181,0.5); }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--accent);
    background: rgba(77,159,255,0.05);
    box-shadow: 0 0 0 3px rgba(77,159,255,0.12);
  }

  .form-group select option { background: var(--navy-mid); }

  /* ── FOOTER ── */
  footer {
    border-top: 1px solid rgba(77,159,255,0.1);
    padding: 60px 60px 40px;
    background: rgba(13,27,46,0.8);
  }

  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
  }

  .footer-brand p { font-size: 0.875rem; color: var(--grey); line-height: 1.7; margin-top: 16px; margin-bottom: 24px; }

  .social-links { display: flex; gap: 12px; }
  .social-link {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: rgba(77,159,255,0.08);
    border: 1px solid rgba(77,159,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--grey);
    transition: all 0.3s;
  }
  .social-link:hover { background: rgba(77,159,255,0.2); color: white; border-color: var(--accent); }

  .footer-col h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 20px;
  }

  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col ul a {
    color: var(--grey);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s;
  }
  .footer-col ul a:hover { color: var(--accent); }

  .footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.8rem;
    color: var(--grey);
  }

  /* ── FLOATING SIDE MENU ── */
  #side-menu {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  /* Outer pill container */
  .side-menu-wrap {
    background: rgba(13, 27, 46, 0.75);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(77, 159, 255, 0.18);
    border-radius: 50px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(77,159,255,0.06) inset;
    position: relative;
    overflow: visible;
    animation: sideMenuIn 0.8s 1s ease both;
  }

  @keyframes sideMenuIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Scroll-progress track — replaces scan line */
  .side-track-outer {
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: 18px;
    width: 3px;
    pointer-events: none;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(77,159,255,0.10);
  }

  .side-track-fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0%;                        /* driven by JS */
    background: linear-gradient(to bottom, var(--accent), var(--accent2));
    border-radius: 3px;
    transition: height 0.12s linear;
  }

  .side-track-cursor {
    position: absolute;
    left: -2px;
    width: 7px;
    height: 14px;
    background: linear-gradient(to bottom, var(--accent), var(--accent2));
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(77,159,255,0.9), 0 0 22px rgba(77,159,255,0.4);
    top: 0%;                           /* driven by JS */
    transition: top 0.12s linear;
    pointer-events: none;
  }

  /* Each nav item */
  .side-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    cursor: pointer;
    padding: 2px 0;
  }

  /* Tooltip label — slides in from right on hover */
  .side-nav-label {
    position: absolute;
    right: calc(100% + 14px);
    white-space: nowrap;
    background: rgba(13, 27, 46, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(77,159,255,0.25);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }

  .side-nav-label::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(77,159,255,0.25);
  }

  .side-nav-item:hover .side-nav-label {
    opacity: 1;
    transform: translateX(0);
  }

  /* Dot indicator */
  .side-nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(77,159,255,0.35);
    background: transparent;
    transition: all 0.35s ease;
    position: relative;
    flex-shrink: 0;
  }

  .side-nav-dot::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
    transition: transform 0.35s ease;
  }

  .side-nav-item:hover .side-nav-dot,
  .side-nav-item.active .side-nav-dot {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(77,159,255,0.6);
  }

  .side-nav-item:hover .side-nav-dot::after,
  .side-nav-item.active .side-nav-dot::after {
    transform: scale(1);
  }

  /* Active item = bigger bright dot */
  .side-nav-item.active .side-nav-dot {
    width: 13px;
    height: 13px;
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(77,159,255,0.7), 0 0 28px rgba(77,159,255,0.3);
  }

  /* Connector lines between dots */
  .side-nav-line {
    width: 1px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(77,159,255,0.25), rgba(77,159,255,0.1));
    margin: 0 auto;
  }

  /* Go to Top futuristic animated arrow */
  .go-top-btn {
    margin-top: 15px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    border-radius: 50%;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(77,159,255,0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
  }
  .go-top-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    z-index: 2;
  }
  .go-top-btn::before {
    content: '';
    position: absolute;
    top: 100%; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.2);
    transition: top 0.3s ease;
    border-radius: 50%;
    z-index: 1;
  }
  .go-top-btn:hover {
    box-shadow: 0 8px 32px rgba(77,159,255,0.6);
    transform: translateY(-5px);
  }
  .go-top-btn:hover svg {
    transform: translateY(-3px);
  }
  .go-top-btn:hover::before {
    top: 0;
    border-radius: 0;
  }

  /* Corner glow ornament */
  .side-menu-glow {
    position: absolute;
    top: -20px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 40px;
    background: radial-gradient(circle, rgba(77,159,255,0.35) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
    animation: glow-pulse 2.5s ease-in-out infinite;
  }

  @keyframes glow-pulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.4); }
  }

  @media (max-width: 900px) { #side-menu { display: none; } }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    /* Fallback: auto-reveal after 2s in case JS observer doesn't fire */
    animation: revealFallback 0s 2s forwards;
  }

  @keyframes revealFallback {
    to { opacity: 1; transform: translateY(0); }
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
    animation: none;
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  /* ── GLOBAL REACH SPLIT SECTION ── */
  #global-reach {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 82vh;
    position: relative;
    overflow: hidden;
  }

  .gr-visual {
    position: relative;
    background: transparent;
    overflow: hidden;
    min-height: 500px;
  }

  #world-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Floating dashboard cards */
  .dash-card {
    position: absolute;
    background: rgba(10,20,42,0.88);
    border: 1px solid rgba(77,159,255,0.28);
    border-radius: 12px;
    padding: 14px 18px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(77,159,255,0.08);
    z-index: 2;
    animation: dash-float 5s ease-in-out infinite;
  }
  .dash-card:nth-child(3) { animation-delay: -2s; }
  .dash-card:nth-child(4) { animation-delay: -4s; }

  @keyframes dash-float {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-7px); }
  }

  .dash-kpi-val {
    font-size: 1.45rem; font-weight: 800;
    color: var(--accent); line-height: 1;
  }
  .dash-kpi-lbl {
    font-size: 0.62rem; color: var(--grey);
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px;
  }
  .dash-kpi-trend { font-size: 0.72rem; color: var(--accent2); font-weight: 600; margin-top: 4px; }

  .dash-mini-bars {
    display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 10px;
  }
  .dmb {
    width: 9px; border-radius: 2px 2px 0 0;
    background: linear-gradient(to top,var(--accent-glow),var(--accent));
    animation: dmb-rise 1.2s ease-out both;
    transform-origin: bottom;
  }
  @keyframes dmb-rise { from { transform:scaleY(0); } to { transform:scaleY(1); } }

  @keyframes line-draw { to { stroke-dashoffset: 0; } }

  /* Scanline overlay */
  .gr-scan {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(77,159,255,0.018) 3px,
      rgba(77,159,255,0.018) 4px
    );
  }

  /* Text column */
  .gr-text {
    display: flex; flex-direction: column; justify-content: center;
    padding: 80px 72px;
    background: transparent;
    position: relative;
  }
  .gr-text::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 1px; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(77,159,255,0.4), transparent);
  }

  .gr-title {
    font-size: clamp(1.9rem,3.2vw,3rem);
    font-weight: 800; line-height: 1.18;
    margin: 16px 0 24px;
    background: linear-gradient(135deg,#fff 20%,var(--accent) 80%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .gr-body {
    font-size: 1.05rem; line-height: 1.85;
    color: rgba(255,255,255,0.62); max-width: 440px;
  }
  .gr-metrics {
    display: flex; gap: 36px; margin-top: 44px; flex-wrap: wrap;
  }
  .gr-metric-val {
    font-size: 1.9rem; font-weight: 800;
    color: var(--accent); line-height: 1;
  }
  .gr-metric-lbl {
    font-size: 0.7rem; color: var(--grey);
    letter-spacing: 0.1em; text-transform: uppercase; margin-top: 5px;
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 16px 24px; }
    .nav-links { display: none; }
    #global-reach { grid-template-columns: 1fr; }
    .gr-visual { min-height: 380px; }
    .gr-text { padding: 60px 28px; }
#modules, #showcase, #process, #testimonials, #cta, #contact, #stats-bar, footer { padding: 80px 24px; }
    .modules-grid, .testi-grid { grid-template-columns: 1fr; }
    .stats-grid, .process-steps { grid-template-columns: repeat(2, 1fr); }
    .showcase-inner, .contact-inner, .footer-inner { grid-template-columns: 1fr; }
    .showcase-visual { height: 300px; }
    .form-row { grid-template-columns: 1fr; }
    .process-steps::before { display: none; }
    .stat-item::after { display: none; }
    footer { padding: 60px 24px 40px; }
  }

  /* --- CUSTOM OVERLAYS FOR GLOBAL SCALE --- */
  .overlay-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    padding: 30px;
  }
  
  .gr-scan { z-index: 3 !important; }

  .kpi-panel, .chart-panel {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .kpi-panel:hover, .chart-panel:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 50px rgba(77, 159, 255, 0.3);
    border-color: rgba(77, 159, 255, 0.8);
    z-index: 10;
  }
  
  /* Additional individual element animations on hover */
  .kpi-panel:hover .kpi-value {
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
  }
  .chart-panel:hover .overlay-bar {
    filter: brightness(1.3);
    box-shadow: 0 0 10px rgba(77,159,255,0.5);
  }
  .chart-panel:hover .pie-segment {
    filter: drop-shadow(0 0 5px rgba(77,159,255,0.6));
  }

  .kpi-panel {
    background: rgba(13, 27, 46, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(77, 159, 255, 0.3);
    border-radius: 8px;
    padding: 15px 20px;
    position: absolute;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    pointer-events: auto;
  }
  
  .kpi-top-left { top: 40px; left: 40px; }
  .kpi-bottom-left { bottom: 40px; left: 40px; }
  
  .kpi-label { font-size: 0.75rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
  .kpi-value { font-size: 2rem; font-weight: 800; color: var(--white); font-variant-numeric: tabular-nums; }
  .kpi-value.warning { color: var(--accent2); }
  .kpi-trend { font-size: 0.8rem; font-weight: 600; margin-top: 5px; }
  .kpi-trend.positive { color: #00d4aa; }
  
  .kpi-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.1); margin-top: 10px; border-radius: 2px; overflow: hidden; }
  .kpi-bar-fill { height: 100%; background: var(--accent2); width: 25%; transition: width 0.5s ease; }

  .chart-panel {
    background: rgba(13, 27, 46, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(77, 159, 255, 0.3);
    border-radius: 8px;
    padding: 20px;
    position: absolute;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    pointer-events: auto;
  }

  .bar-chart-panel { bottom: 40px; right: 40px; width: 280px; }
  .pie-chart-panel { top: 40px; right: 40px; width: 200px; }

  .chart-title { font-size: 0.8rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 15px; }

  .bar-chart { display: flex; align-items: flex-end; justify-content: space-between; height: 80px; gap: 4px; }
  .bar-wrapper { flex: 1; height: 100%; background: rgba(77, 159, 255, 0.1); border-radius: 2px; position: relative; overflow: hidden; }
  .overlay-bar { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, var(--accent-glow), var(--accent)); transition: height 0.5s ease; }

  .pie-container { position: relative; width: 100px; height: 100px; margin: 0 auto 15px; }
  .pie-container svg { width: 100%; height: 100%; transform: rotate(-90deg); border-radius: 50%; }
  .pie-container circle { fill: transparent; stroke-width: 32; }
  .pie-bg { stroke: rgba(255,255,255,0.05); }
  .pie-segment { transition: stroke-dasharray 1s ease, stroke-dashoffset 1s ease; }
  .pie-1 { stroke: var(--accent); stroke-dasharray: 40 100; }
  .pie-2 { stroke: var(--accent2); stroke-dasharray: 30 100; stroke-dashoffset: -40; }
  .pie-3 { stroke: #8a9bb5; stroke-dasharray: 30 100; stroke-dashoffset: -70; }
  
  .pie-inner {
    position: absolute; inset: 15px; background: rgba(13, 27, 46, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  }
  #pie-center-val { font-size: 1.1rem; font-weight: 700; color: var(--white); }

  .pie-legend { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--grey); }
  .legend-item { display: flex; align-items: center; gap: 4px; }
  .legend-dot { width: 8px; height: 8px; border-radius: 50%; }
  .d1 { background: var(--accent); }
  .d2 { background: var(--accent2); }
  .d3 { background: #8a9bb5; }

  /* Animated Border Tag */
  .animated-border-tag {
    position: relative;
    border: none;
    background: transparent;
    padding: 2px !important;
    overflow: hidden;
    border-radius: 50px;
    display: inline-block;
  }

  .animated-border-tag::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 70%, var(--accent) 85%, var(--accent-glow) 100%);
    animation: spin-border 2s linear infinite;
    z-index: 1;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
  }

  .tag-text {
    display: block;
    background: var(--navy);
    padding: 6px 18px;
    border-radius: 50px;
    z-index: 2;
    position: relative;
  }
  
  @keyframes spin-border {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }
  /* "?"? FUTURISTIC HOVER "?"? */
  .module-list-item {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .module-list-item::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: 0.6s ease;
  }
  .module-list-item:hover {
    transform: translateX(12px) scale(1.02);
    background: rgba(255,255,255,0.28) !important;
    border-color: rgba(77,159,255,0.5) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 4px 0 0 var(--accent);
  }
  .module-list-item:hover::before {
    left: 150%;
  }
  .module-list-item:hover .item-num {
    color: var(--accent) !important;
    text-shadow: 0 0 12px var(--accent);
    transform: scale(1.1) translateX(4px);
  }

/* Subpage Specific Styles */
.subpage-header {
  position: relative;
  height: 450px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin-top: 80px;
}
.subpage-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(10,15,30,0.4) 0%, var(--bg) 100%);
}
.subpage-title {
  position: relative;
  z-index: 2;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.subpage-content-wrapper {
  position: relative;
  max-width: 1400px;
  margin: -80px auto 100px;
  padding: 40px;
  background: rgba(15, 25, 45, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  backdrop-filter: blur(24px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
  z-index: 5;
}

/* ===== MODULES PAGE - INTERACTIVE GRID ===== */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  padding: 40px;
}
.mod-card {
  position: relative;
  background: rgba(20, 30, 50, 0.6);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 16px;
  padding: 30px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 280px;
}
.mod-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(168,85,247,0.8);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 40px rgba(168,85,247,0.2) inset;
  background: rgba(30, 40, 70, 0.8);
  height: 420px;
}
.mod-icon {
  width: 60px; height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(168,85,247,0.05));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  border: 1px solid rgba(168,85,247,0.3);
  color: #a855f7;
  transition: all 0.3s;
}
.mod-icon svg { width: 30px; height: 30px; }
.mod-card:hover .mod-icon {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  color: #fff;
  box-shadow: 0 0 20px rgba(168,85,247,0.6);
}
.mod-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}
.mod-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 20px;
}
.mod-hidden-specs {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  pointer-events: none;
}
.mod-card:hover .mod-hidden-specs {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mod-spec-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: #a855f7; margin-bottom: 8px;
}
.mod-spec-val { color: #fff; font-weight: 500; }
.mod-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.mod-tag {
  background: rgba(168,85,247,0.15);
  color: #c084fc;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(168,85,247,0.3);
}

/* ===== FEATURES PAGE - TECH DEEP DIVE ===== */
.feat-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
  align-items: center;
}
.feat-panel:nth-child(even) {
  direction: rtl;
}
.feat-panel:nth-child(even) > * {
  direction: ltr;
}
.feat-text h3 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.2;
}
.feat-text h3 span { color: #4d9fff; }
.feat-text p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 24px;
}
.feat-list { list-style: none; }
.feat-list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.95rem; color: #fff; margin-bottom: 12px;
}
.feat-list li svg { color: #4d9fff; width: 20px; height: 20px; }
.feat-visual {
  position: relative;
  background: rgba(10, 15, 25, 0.8);
  border: 1px solid rgba(77,159,255,0.2);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.feat-visual::before {
  content: ''; position: absolute; top: 10px; left: 10px; right: 10px; height: 20px;
  background: rgba(255,255,255,0.05); border-radius: 6px;
}
.mock-code {
  font-family: 'Courier New', monospace; font-size: 0.85rem;
  color: #a8b2d1; line-height: 1.6; white-space: pre; margin-top: 20px;
}
.mc-key { color: #c678dd; }
.mc-func { color: #61afef; }
.mc-str { color: #98c379; }
.mc-comment { color: #5c6370; font-style: italic; }

.tech-marquee-container {
  overflow: hidden; white-space: nowrap; padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.1); position: relative;
}
.tech-marquee {
  display: inline-block; animation: scrollMarquee 25s linear infinite;
}
.tech-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 700; color: rgba(255,255,255,0.4);
  margin-right: 60px; transition: color 0.3s;
}
.tech-item:hover { color: #4d9fff; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== PROCESS PAGE - VERTICAL TIMELINE ===== */
.timeline-container {
  position: relative; padding: 40px 0; max-width: 1000px; margin: 0 auto;
}
.timeline-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
  background: rgba(255,255,255,0.05); transform: translateX(-50%);
}
.timeline-spine-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, #00d4aa, transparent);
  box-shadow: 0 0 20px #00d4aa;
}
.timeline-item {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 80px; position: relative;
}
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-node {
  width: 24px; height: 24px; background: var(--bg);
  border: 4px solid #00d4aa; border-radius: 50%;
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;
  box-shadow: 0 0 0 8px rgba(0,212,170,0.1);
}
.timeline-content {
  width: 45%; background: rgba(20, 30, 50, 0.6);
  border: 1px solid rgba(0,212,170,0.2); border-radius: 16px;
  padding: 30px; position: relative; transition: transform 0.3s;
}
.timeline-content:hover {
  transform: translateY(-5px); background: rgba(30, 40, 70, 0.8);
  border-color: rgba(0,212,170,0.6); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.tl-day {
  display: inline-block; padding: 4px 12px; background: rgba(0,212,170,0.15);
  color: #00d4aa; border-radius: 20px; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; margin-bottom: 12px;
}
.tl-title { font-size: 1.4rem; font-weight: 600; color: #fff; margin-bottom: 12px; }
.tl-desc { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* ===== CLIENTS PAGE - IMPACT DASHBOARD ===== */
.impact-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  padding: 20px;
}
.impact-card {
  background: rgba(20, 30, 50, 0.6);
  border: 1px solid rgba(234,179,8,0.2);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.impact-card:hover {
  transform: translateY(-5px);
  border-color: rgba(234,179,8,0.6);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.impact-kpi {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #fff 20%, #eab308 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.impact-metric {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.impact-quote {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 30px;
  flex-grow: 1;
}
.impact-author {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
}
.impact-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, #eab308, #ca8a04);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #000; font-size: 1.2rem;
}
.impact-name { font-weight: 600; color: #fff; display: block; }
.impact-role { font-size: 0.85rem; color: #eab308; }

/* ===== CONTACT PAGE - VIP PORTAL ===== */
.contact-portal {
  display: flex; gap: 60px; padding: 20px;
}
@media (max-width: 900px) {
  .contact-portal { flex-direction: column; }
  .contact-vip-side { width: 100%; }
}
.contact-form-side { flex: 1; }
.contact-form-side h3 {
  font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 30px;
}
.input-group { position: relative; margin-bottom: 30px; }
.input-group input, .input-group textarea {
  width: 100%; background: rgba(255,255,255,0.03); border: none;
  border-bottom: 2px solid rgba(244,63,94,0.3); color: #fff;
  font-size: 1.1rem; padding: 15px 0; outline: none; transition: all 0.3s; resize: vertical;
}
.input-group label {
  position: absolute; left: 0; top: 15px; color: rgba(255,255,255,0.5);
  transition: all 0.3s; pointer-events: none; font-size: 1.1rem;
}
.input-group input:focus, .input-group textarea:focus {
  border-bottom-color: #f43f5e; background: rgba(244,63,94,0.05); padding-left: 10px;
}
.input-group input:focus + label, .input-group textarea:focus + label,
.input-group input:valid + label, .input-group textarea:valid + label {
  top: -16px; font-size: 0.8rem; color: #f43f5e;
}
.submit-btn {
  background: linear-gradient(135deg, #f43f5e, #be123c); color: #fff;
  border: none; padding: 16px 40px; font-size: 1.1rem; font-weight: 600;
  border-radius: 8px; cursor: pointer; transition: all 0.3s;
  box-shadow: 0 10px 20px rgba(244,63,94,0.3); width: 100%;
}
.submit-btn:hover {
  transform: translateY(-2px); box-shadow: 0 15px 30px rgba(244,63,94,0.5);
}

.contact-vip-side {
  width: 400px; background: rgba(244,63,94,0.05); border: 1px solid rgba(244,63,94,0.2);
  border-radius: 20px; padding: 40px; display: flex; flex-direction: column; justify-content: space-between;
}
.vip-status {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(0,212,170,0.15);
  color: #00d4aa; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem;
  font-weight: 700; margin-bottom: 20px; align-self: flex-start;
}
.status-dot {
  width: 8px; height: 8px; background: #00d4aa; border-radius: 50%; animation: pulseDot 2s infinite;
}
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(0,212,170,0.7); } 70% { box-shadow: 0 0 0 10px rgba(0,212,170,0); } 100% { box-shadow: 0 0 0 0 rgba(0,212,170,0); } }
.vip-title { font-size: 1.5rem; font-weight: 600; color: #fff; margin-bottom: 12px; }
.vip-desc { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 30px; }
.vip-contact-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.vip-contact-row svg { color: #f43f5e; width: 24px; height: 24px; }
.vip-contact-text { color: #fff; font-size: 1.1rem; font-weight: 500; }

/* ==========================================================================
   SCI-FI / HUD DESIGN SYSTEM OVERHAUL
   ========================================================================== */

/* Futuristic Fonts & Typography */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

.tech-font {
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Base HUD Panel with Angled Corners (Cyberpunk Style) */
.hud-panel {
  position: relative;
  background: rgba(10, 15, 25, 0.7);
  backdrop-filter: blur(10px);
  /* Cut corners: top-left and bottom-right */
  clip-path: polygon(
    20px 0, 100% 0, 
    100% calc(100% - 20px), calc(100% - 20px) 100%, 
    0 100%, 0 20px
  );
  padding: 30px;
  border: 1px solid transparent;
}

/* Glowing/Animated Borders for HUD Panels */
.hud-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: hudScan 4s linear infinite;
  z-index: -1;
  /* Same clip path to match the border */
  clip-path: polygon(
    20px 0, 100% 0, 
    100% calc(100% - 20px), calc(100% - 20px) 100%, 
    0 100%, 0 20px
  );
  padding: 2px; /* Border thickness */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Subtle CRT Scanline Overlay */
.scanlines {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 10;
  opacity: 0.3;
}

/* Grid Background */
.hud-grid-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(77,159,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,159,255,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: -2;
}

/* Animations */
@keyframes hudScan {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes glitch {
  0% { transform: translate(0) }
  20% { transform: translate(-2px, 1px) }
  40% { transform: translate(-1px, -1px) }
  60% { transform: translate(2px, 1px) }
  80% { transform: translate(1px, -1px) }
  100% { transform: translate(0) }
}

/* ===== MODULES PAGE - HOLOGRAPHIC MATRIX ===== */
.holo-matrix { max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  padding: 20px;
  position: relative;
}
.holo-node {
  position: relative;
  height: 320px;
  display: flex; flex-direction: column;
  transition: all 0.3s;
  cursor: crosshair;
}
.holo-node:hover {
  transform: scale(1.05);
  z-index: 10;
}
.holo-node:hover .scanlines {
  opacity: 0.8;
  animation: glitch 0.2s infinite;
}
.holo-header {
  border-bottom: 1px solid rgba(168,85,247,0.4);
  padding-bottom: 15px; margin-bottom: 15px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.holo-id {
  color: #a855f7; font-size: 0.9rem; text-shadow: 0 0 10px #a855f7;
}
.holo-title {
  font-size: 1.6rem; color: #fff; font-weight: 700; text-transform: uppercase;
}
.holo-body {
  flex-grow: 1; color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.6;
}
.holo-footer {
  margin-top: 20px;
  display: flex; gap: 10px;
}
.holo-badge {
  background: rgba(168,85,247,0.1); border: 1px solid #a855f7;
  padding: 4px 8px; font-size: 0.7rem; color: #c084fc;
}

/* ===== FEATURES PAGE - TELEMETRY DASHBOARD ===== */
.telemetry-dashboard { max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px; padding: 20px;
}
.telemetry-row { display: flex; gap: 40px; }
@media (max-width: 900px) { .telemetry-row { flex-direction: column; } }

.telemetry-main { flex: 2; }
.telemetry-side { flex: 1; }

.radar-wrapper {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1; 
  background: radial-gradient(circle, rgba(77,159,255,0.1) 0%, transparent 70%);
  border: 1px solid rgba(77,159,255,0.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 0 40px rgba(77,159,255,0.2) inset;
}
.radar-grid {
  position: absolute; inset: 0; border-radius: 50%;
  background-image: linear-gradient(rgba(77,159,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(77,159,255,0.2) 1px, transparent 1px);
  background-size: 20px 20px; background-position: center;
}
.radar-sweep {
  position: absolute; top: 50%; left: 50%; width: 50%; height: 50%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(77,159,255,0.8) 100%);
  transform-origin: 0 0; animation: radarSweep 4s linear infinite;
}
.radar-dot {
  position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 20px #4d9fff; opacity: 0; animation: blip 4s infinite;
}
@keyframes blip { 0%, 90% { opacity: 0; transform: scale(1); } 95% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1); } }

.term-window {
  background: #050a10; border: 1px solid rgba(77,159,255,0.4); padding: 20px;
  font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: #4d9fff;
  height: 250px; overflow: hidden; position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.8) inset;
}
.term-window::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,0.4) 51%); background-size: 100% 4px; pointer-events: none;
}
.term-line { margin-bottom: 8px; opacity: 0.8; }
.term-line span { color: #fff; }

/* ===== PROCESS PAGE - ORBITAL TRAJECTORY ===== */
.orbit-timeline {
  position: relative; padding: 60px 0; max-width: 900px; margin: 0 auto;
}
.orbit-path {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(0,212,170,0.2); transform: translateX(-50%); z-index: 0;
}
.orbit-path::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, #00d4aa, transparent);
  box-shadow: 0 0 15px #00d4aa; animation: orbitGlow 3s infinite alternate;
}
@keyframes orbitGlow { from { opacity: 0.3; } to { opacity: 0.8; } }

.orbit-node {
  display: flex; justify-content: flex-end; align-items: center;
  margin-bottom: 80px; position: relative; z-index: 1; width: 50%;
  padding-right: 40px; clear: both;
}
.orbit-node:nth-child(even) {
  justify-content: flex-start; margin-left: 50%; padding-right: 0; padding-left: 40px;
}
.orbit-blip {
  position: absolute; top: 50%; right: -8px; width: 16px; height: 16px;
  background: #000; border: 2px solid #00d4aa; border-radius: 50%;
  transform: translateY(-50%);
}
.orbit-node:nth-child(even) .orbit-blip { right: auto; left: -8px; }
.orbit-blip::after {
  content: ''; position: absolute; inset: -10px; border: 1px solid rgba(0,212,170,0.5);
  border-radius: 50%; animation: ping 2s infinite;
}
@keyframes ping { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }

.orbit-card { width: 100%; }
.orbit-day { color: #00d4aa; font-size: 1rem; margin-bottom: 10px; display: block; text-shadow: 0 0 5px rgba(0,212,170,0.5); }
.orbit-title { font-size:  1.1rem; margin-bottom: 15px; }
.orbit-desc { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.6; }

/* ===== CLIENTS PAGE - INTEL DOSSIERS ===== */
.dossier-grid { max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; padding: 20px;
}
.dossier-card {
  position: relative; background: rgba(10, 15, 25, 0.8);
  border: 1px solid rgba(234,179,8,0.3); padding: 30px;
  display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0,0,0,0.8);
}
.dossier-card::before {
  content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0 40 L40 0" stroke="rgba(234,179,8,0.05)" stroke-width="1"/></svg>'); pointer-events: none;
}
.dossier-card::after {
  content: ''; position: absolute; top: -5px; left: -5px; width: 20px; height: 20px; border-top: 2px solid #eab308; border-left: 2px solid #eab308; pointer-events: none;
}
.dossier-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 30px; border-bottom: 1px solid rgba(234,179,8,0.2); padding-bottom: 15px;
}
.dossier-kpi {
  font-size: 3.5rem; font-weight: 800; color: #fff; text-shadow: 0 0 20px rgba(234,179,8,0.5); line-height: 1;
}
.dossier-kpi span { color: #eab308; font-size: 1rem; display: block; margin-top: 5px; }
.dossier-classification {
  background: #eab308; color: #000; padding: 4px 10px; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em;
}
.dossier-body {
  flex-grow: 1; font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 30px;
  font-family: 'Share Tech Mono', monospace;
}
.dossier-footer { display: flex; align-items: center; gap: 15px; }
.dossier-avatar {
  width: 40px; height: 40px; border: 1px solid #eab308; display: flex; align-items: center; justify-content: center; color: #eab308; font-weight: 700;
}
.dossier-target { font-size: 0.85rem; color: #fff; text-transform: uppercase; }
.dossier-target span { color: #eab308; display: block; }

/* ===== CONTACT PAGE - SECURE UPLINK ===== */
.uplink-terminal { max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; padding: 20px; }
@media (max-width: 900px) { .uplink-terminal { max-width: 1200px; margin: 0 auto; flex-direction: column; } }
.uplink-form-panel { flex: 2; }
.uplink-status-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; }

.term-input-group { margin-bottom: 25px; }
.term-label { display: block; color: #f43f5e; font-size: 0.85rem; margin-bottom: 10px; }
.term-label::before { content: '>_ '; }
.term-input {
  width: 100%; background: rgba(0,0,0,0.5); border: 1px solid rgba(244,63,94,0.3);
  color: #fff; font-family: 'Share Tech Mono', monospace; font-size: 1rem;
  padding: 15px 20px; outline: none; transition: all 0.3s;
}
.term-input:focus { border-color: #f43f5e; box-shadow: 0 0 20px rgba(244,63,94,0.2) inset; }
.term-submit {
  background: transparent; border: 1px solid #f43f5e; color: #f43f5e;
  padding: 15px 40px; font-family: 'Share Tech Mono', monospace; font-size: 1.1rem;
  cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s;
  width: 100%; text-transform: uppercase; letter-spacing: 0.1em;
}
.term-submit:hover { background: rgba(244,63,94,0.1); box-shadow: 0 0 30px rgba(244,63,94,0.4) inset; }
.term-submit::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(244,63,94,0.4), transparent);
}
.term-submit:hover::before { animation: btnScan 1.5s infinite; }
@keyframes btnScan { 100% { left: 100%; } }

.uplink-stat-box {
  background: rgba(0,0,0,0.5); border: 1px solid rgba(244,63,94,0.3); padding: 30px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative;
}
.uplink-stat-box::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: #f43f5e; box-shadow: 0 0 10px #f43f5e;
}
.uplink-stat-val { font-size:  1.8rem; color: #fff; text-shadow: 0 0 10px #f43f5e; margin-bottom: 5px; }
.uplink-stat-label { font-size: 0.8rem; color: #f43f5e; letter-spacing: 0.1em; }


/* ===== FLOATING HOME BUTTON ===== */
.floating-home-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: rgba(10, 15, 30, 0.95);
  border: 1px solid rgba(77, 159, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 0 20px rgba(77, 159, 255, 0.2), 0 0 0 4px rgba(77, 159, 255, 0.05);
  transition: all 0.3s;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.floating-home-btn:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 30px rgba(77, 159, 255, 0.6), 0 0 0 6px rgba(77, 159, 255, 0.1);
  border-color: #4d9fff;
}
.floating-home-btn video {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); mix-blend-mode: screen; pointer-events: none;
}


/* ACTIVE NAV LINK */
.nav-links a.active { color: var(--white); }
.nav-links a.active::after { width: 100%; }

/* =====================================================================
   NAVIGATION — home link, current-page state, and a mobile menu.
   (Below 900px .nav-links was set to display:none with nothing to
   replace it, so phones had no navigation at all beyond the logo.)
   ===================================================================== */

/* current page */
.nav-links a.active { color: var(--white); }
.nav-links a.active::after { width: 100%; }
.nav-links a.nav-cta.active::after { width: 0; }

/* a little breathing room back on mid-size laptops */
@media (max-width: 1200px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 0.8rem; }
}

/* hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: background 0.25s, border-color 0.25s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); border-color: rgba(77,159,255,0.5); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* the panel that drops down when the hamburger is tapped */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 24px 22px;
    background: #0a1322;
    z-index: 5;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 50px rgba(0,0,0,0.5);
  }
  .nav-links.open li { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-links.open li:last-child { border-bottom: 0; padding-top: 16px; }
  .nav-links.open a {
    display: block;
    padding: 15px 2px;
    font-size: 0.9rem;
  }
  .nav-links.open a::after { display: none; }
  .nav-links.open a.active { color: var(--accent); }
  .nav-links.open .nav-cta { text-align: center; padding: 14px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span, .nav-links a::after { transition: none; }
}

/* ---------------------------------------------------------------------
   The homepage intro animation flies the "Nexus Core" wordmark up into
   the navbar and only then reveals the logo, which is why .nav-logo is
   set to opacity:0 / pointer-events:none further up this file.
   That animation only runs where the hero exists, so on every sub-page
   the logo stayed invisible AND unclickable — the one link home was a
   link nobody could see. Sub-pages carry <body class="subpage">, so the
   logo is simply shown there from the start.
   --------------------------------------------------------------------- */
body.subpage .nav-logo { opacity: 1; pointer-events: auto; }

/* ===== homepage portfolio grid ===== */
#portfolio { padding: 120px 60px; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.portfolio-card {
  display: block;
  padding: 30px 28px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  text-decoration: none;
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(77,159,255,0.45);
  background: rgba(255,255,255,0.06);
}
.portfolio-card .pc-tag {
  font-family: 'Courier New', monospace;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #34d399; margin-bottom: 14px;
}
.portfolio-card h3 {
  font-size: 1.12rem; font-weight: 600; color: var(--white);
  margin-bottom: 12px; line-height: 1.35;
}
.portfolio-card p { font-size: 0.92rem; color: var(--grey); line-height: 1.7; margin-bottom: 18px; }
.portfolio-card .pc-client {
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07);
}
@media (max-width: 900px) { #portfolio { padding: 80px 24px; } }

/* =====================================================================
   PORTFOLIO GRID — fixes
   1. The navbar is fixed, so any section scrolled to sat underneath it.
   2. Card footers floated at different heights because the descriptions
      are different lengths. The card is now a flex column and the client
      line is pushed to the bottom, so every footer lines up.
   ===================================================================== */
section, #stats-bar, footer { scroll-margin-top: 96px; }

#portfolio { padding-top: 140px; }
#portfolio .section-header { margin-bottom: 8px; }

.portfolio-grid { align-items: stretch; }

.portfolio-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.portfolio-card h3 {
  /* two lines' worth, so one-line and two-line titles start their body copy
     at the same height */
  min-height: 2.7em;
  display: flex;
  align-items: flex-start;
}
.portfolio-card p {
  flex: 1 1 auto;   /* takes the slack, so the footer below is pinned down */
  margin-bottom: 20px;
}
.portfolio-card .pc-client {
  margin-top: auto;
}

@media (max-width: 900px) {
  #portfolio { padding-top: 90px; }
  .portfolio-card h3 { min-height: 0; }
}

/* ---------------------------------------------------------------------
   Hero wordmark spacing. "Nexus Core" and "Solutions" are separate spans
   so each can carry its own gradient and be animated independently. Both
   are display:inline-block, which collapses the leading space that used
   to live inside the second span — the title rendered as "CoreSolutions".
   The gap is set here instead, where nothing can swallow it.
   --------------------------------------------------------------------- */
.hl-solutions { margin-left: 0.3em; }

/* =====================================================================
   PHONE LAYOUT  (<= 700px)
   The 900px block above already collapses the grids and reduces section
   padding for tablets. This block handles the things that only break on
   an actual phone: the hero headline's minimum size, decorative elements
   drawn wider than the screen, and touch targets.
   Written last so it wins on order rather than on !important.
   ===================================================================== */
@media (max-width: 700px) {

  /* The hero glow, grid and CTA glow are deliberately drawn wider than
     the viewport. On a phone that turns into a page you can drag
     sideways, which feels broken. Clip it at the edges. */
  html, body { overflow-x: hidden; max-width: 100%; }
  #hero, #cta { overflow: hidden; }

  /* clamp() floored at 2.8rem = ~45px, which is far too big for a 375px
     screen — the wordmark wrapped mid-phrase. */
  .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); margin-bottom: 18px; }
  .hero-tagline { font-size: 0.95rem; letter-spacing: 0.02em; }
  .hero-sub { font-size: 0.95rem; line-height: 1.7; }
  #hero { min-height: auto; padding: 104px 20px 72px; }

  /* Full-width stacked buttons are far easier to hit with a thumb. */
  .hero-btns { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-btns .btn-primary, .hero-btns .btn-secondary { width: 100%; text-align: center; }

  .section-title { font-size: 1.65rem; }
  .section-sub   { font-size: 0.95rem; }

  #modules, #showcase, #process, #testimonials, #cta, #contact, #stats-bar, footer {
    padding-left: 20px; padding-right: 20px;
  }
  #portfolio { padding: 64px 20px; }
  .portfolio-card { padding: 22px 20px; }
  .stats-grid, .process-steps { grid-template-columns: 1fr; }

  /* The feature list slides in from translateX(30px). On a narrow screen
     that start position sits past the right edge. Come up instead of
     across — same animation, no sideways overflow. */
  .feature-item { transform: translateY(16px); }
  .feature-item.visible { transform: translateY(0); }

  /* On the homepage the logo is hidden until the intro animation flies the
     wordmark into the navbar. On a phone that leaves the bar empty except
     the hamburger, which reads as a broken header. Show it from the start. */
  .nav-logo { opacity: 1; pointer-events: auto; flex: 0 0 auto; }
  /* "Nexus Core" wrapped to two lines at 1.6rem beside the hamburger. */
  .nav-logo .logo-text { font-size: 1.05rem; white-space: nowrap; }
  .nav-logo { gap: 8px; }
  .nav-logo img, .nav-logo svg, .nav-logo video { height: 34px !important; width: 34px !important; }
  nav { justify-content: space-between; align-items: center; }

  /* The tagline sat directly on top of the paragraph below it. */
  .hero-tagline { margin-bottom: 20px; }

  /* The three showcase cards are absolutely positioned to overlap
     artfully at desktop width. In 335px they simply sit on top of each
     other. Put them back in normal flow, one under the next. */
  .showcase-visual { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .showcase-3d-card, .main-card, .float-card-1, .float-card-2 {
    position: static;
    width: 100%;
    transform: none;
    animation: none;
  }

  /* Same problem in the operations-photo section: the KPI and chart panels
     are pinned to the corners of the image, which works at 1200px and
     collapses into a pile at 335px. Show the photo, then the panels
     underneath it in a column, so every figure is actually readable. */
  #global-reach .gr-visual { min-height: 0; height: auto; }
  #global-reach .gr-visual > img { position: relative !important; height: 190px !important; }
  #global-reach .overlay-container {
    position: static;
    pointer-events: auto;
    padding: 14px 20px 2px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #global-reach .kpi-panel, #global-reach .chart-panel {
    position: static;
    width: auto;
    max-width: none;
    transform: none;
  }

  /* The services section carries "grid-template-columns: 50% 50%" in an
     inline style attribute, which outranks any stylesheet rule. At 375px
     it was still splitting the screen down the middle and clipping both
     halves — hence !important, the one place it is actually warranted. */
  #modules { grid-template-columns: 1fr !important; }
  #modules > .gr-text   { padding: 64px 20px 36px !important; }
  #modules > .gr-visual { padding: 0 20px 56px !important; min-height: 0 !important; }
  #modules > .gr-visual > div { max-width: 235px !important; }
  #modules .section-title { margin-bottom: 26px !important; }
  /* Headline line breaks were chosen for a wide column; let the phone
     wrap the text itself rather than stranding a word on its own line. */
  .section-title br { display: none; }
  /* 60px of gutter for a two-digit number is a lot of a 335px screen. */
  #modules .module-list-item { grid-template-columns: 34px 1fr !important; padding: 20px 18px !important; }
}

/* A touch screen has no hover, so a :hover lift just leaves whichever card
   was last tapped stuck in the raised state. */
@media (hover: none) {
  .portfolio-card:hover, .sp-card:hover, .module-card:hover { transform: none; }
  .work-shot-frame:hover .work-shot-img { transform: none; }
}

/* =====================================================================
   THE FILM  (#film)
   A 16:9 frame that plays itself silently while on screen, with a real
   control for sound. Everything sits over the video, so the controls are
   given their own backdrop rather than relying on the frame behind them.
   ===================================================================== */
#film { padding: 120px 60px; }

.film-frame {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #05080f;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}

.film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* Play / pause. Visible whenever the film is not running. */
.film-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 82px; height: 82px;
  display: flex; align-items: center; justify-content: center;
  padding-left: 5px;                     /* optically centres the triangle */
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  background: rgba(9,17,32,0.62);
  backdrop-filter: blur(9px);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.film-play:hover { background: rgba(77,159,255,0.5); transform: translate(-50%, -50%) scale(1.06); }
.film-frame.is-playing .film-play { opacity: 0; pointer-events: none; }
.film-frame.is-playing:hover .film-play { opacity: 1; pointer-events: auto; }

/* Sound. The one control that matters, since it starts muted. */
.film-sound {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50px;
  background: rgba(9,17,32,0.66);
  backdrop-filter: blur(9px);
  color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.film-sound:hover { background: rgba(77,159,255,0.45); border-color: rgba(77,159,255,0.7); }
.film-sound .fs-on { display: none; }
.film-frame.is-loud .film-sound .fs-off { display: none; }
.film-frame.is-loud .film-sound .fs-on  { display: inline; }

.film-play:focus-visible, .film-sound:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 900px) { #film { padding: 80px 24px; } }
@media (max-width: 700px) {
  #film { padding: 64px 20px; }
  .film-frame { border-radius: 12px; }
  .film-play { width: 62px; height: 62px; }
  .film-play svg { width: 24px; height: 24px; }
  .film-sound { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 0.72rem; }
}