/* ============================================================
   NEURION TECHNOLOGY LABS — Premium Design System v2
   Elevated Enterprise AI | Bootstrap 5 Base
   ============================================================ */

/* Bebas Neue: wide-tracked display | Plus Jakarta Sans: body | JetBrains Mono: labels */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --primary:         #1557e8;
  --primary-light:   #4d8fff;
  --primary-glow:    rgba(21,87,232,0.4);
  --primary-glow-sm: rgba(21,87,232,0.18);
  --accent:          #00e5ff;
  --accent-dim:      #00b8d9;
  --accent-glow:     rgba(0,229,255,0.3);
  --violet:          #7c3aed;
  --violet-glow:     rgba(124,58,237,0.25);
  --success:         #10b981;

  --dark-bg:         #03050f;
  --dark-bg2:        #060b1a;
  --dark-bg3:        #080e22;
  --dark-card:       rgba(8,14,34,0.8);
  --dark-card-solid: #0a1228;
  --dark-border:     rgba(255,255,255,0.06);
  --dark-border2:    rgba(21,87,232,0.3);
  --dark-border3:    rgba(0,229,255,0.2);

  --text-primary:    #eef2ff;
  --text-secondary:  #c7d2fe;
  --text-muted:      #7d8db5;
  --text-dim:        #3d4e7a;

  --gradient-hero:   linear-gradient(160deg, #03050f 0%, #060d22 45%, #071025 100%);
  --gradient-blue:   linear-gradient(135deg, #1557e8 0%, #00e5ff 100%);
  --gradient-blue2:  linear-gradient(135deg, #1557e8 0%, #7c3aed 100%);
  --gradient-mesh:   radial-gradient(ellipse at 20% 50%, rgba(21,87,232,0.12) 0%, transparent 60%),
                     radial-gradient(ellipse at 80% 20%, rgba(0,229,255,0.08) 0%, transparent 50%),
                     radial-gradient(ellipse at 60% 80%, rgba(124,58,237,0.08) 0%, transparent 50%);

  --font-display:    'Bebas Neue', sans-serif;
  --font-body:       'Plus Jakarta Sans', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  --radius-card:     14px;
  --radius-lg:       20px;
  --radius-btn:      5px;

  --shadow-card:     0 4px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.03) inset;
  --shadow-glow-b:   0 0 60px rgba(21,87,232,0.22);
  --shadow-glow-a:   0 0 60px rgba(0,229,255,0.14);
  --shadow-glow-btn: 0 8px 32px rgba(21,87,232,0.45);

  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      all 0.35s var(--ease-in-out);
  --transition-fast: all 0.18s var(--ease-in-out);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--dark-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── BACKGROUND ─────────────────────────────────────────── */
body::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(21,87,232,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,87,232,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none; z-index: 0;
}
body::after {
  content: ''; position: fixed; inset: 0;
  background: var(--gradient-mesh);
  pointer-events: none; z-index: 0; opacity: 0.7;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.05;
  letter-spacing: 0.03em;
}
h1 { font-size: clamp(3.4rem, 7.5vw, 6.8rem); letter-spacing: 0.04em; }
h2 { font-size: clamp(2.4rem, 5vw, 4.6rem);   letter-spacing: 0.04em; }
h3 { font-size: clamp(1.6rem, 3vw, 2.4rem);   letter-spacing: 0.04em; }
h4 { font-size: clamp(1.2rem, 2vw, 1.7rem);   letter-spacing: 0.04em; }

p { color: var(--text-muted); line-height: 1.78; }
a { color: var(--primary-light); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--accent); }
.mono { font-family: var(--font-mono); font-size: 0.82em; letter-spacing: 0.02em; }

/* ── URGENCY BAR ────────────────────────────────────────── */
.urgency-bar {
  background: linear-gradient(90deg, rgba(21,87,232,0.12), rgba(0,229,255,0.06), rgba(21,87,232,0.12));
  border-bottom: 1px solid rgba(21,87,232,0.18);
  padding: 10px 0; text-align: center;
  font-family: var(--font-mono); font-size: 0.71rem; color: var(--text-muted);
  letter-spacing: 0.07em; position: sticky; top: 0; z-index: 1001;
}
.urgency-bar span { color: var(--accent); font-weight: 500; }
.urgency-bar .ub-sep { opacity: 0.3; margin: 0 18px; }

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar {
  background: rgba(3,5,15,0.8) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--dark-border);
  padding: 14px 0; transition: var(--transition);
  position: sticky; top: 40px; z-index: 1000;
}
.navbar.scrolled {
  background: rgba(3,5,15,0.97) !important;
  top: 0;
  box-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(21,87,232,0.08);
}
.navbar-brand img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1)
          drop-shadow(0 0 10px rgba(21,87,232,0.7))
          drop-shadow(0 0 22px rgba(0,229,255,0.3));
  transition: filter 0.3s ease;
}
.navbar-brand:hover img {
  filter: brightness(0) invert(1)
          drop-shadow(0 0 14px rgba(21,87,232,0.9))
          drop-shadow(0 0 30px rgba(0,229,255,0.5));
}
.navbar-nav .nav-link {
  color: var(--text-muted) !important;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px !important; transition: var(--transition-fast); position: relative;
}
.navbar-nav .nav-link::after {
  content: ''; position: absolute; bottom: 4px; left: 16px; right: 16px; height: 1px;
  background: var(--gradient-blue); transform: scaleX(0);
  transition: transform 0.25s var(--ease-out-expo);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--text-primary) !important; }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-toggler { border-color: var(--dark-border); }
.navbar-toggler-icon { filter: invert(1); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary-n {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gradient-blue); color: #fff !important; border: none;
  padding: 14px 30px; border-radius: var(--radius-btn);
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer;
  transition: var(--transition); box-shadow: var(--shadow-glow-btn);
  text-decoration: none; position: relative; overflow: hidden;
}
.btn-primary-n::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent);
  opacity: 0; transition: opacity 0.25s;
}
.btn-primary-n:hover {
  transform: translateY(-2px); color: #fff !important;
  box-shadow: 0 14px 44px rgba(21,87,232,0.58);
}
.btn-primary-n:hover::before { opacity: 1; }

.btn-outline-n {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--text-primary) !important;
  border: 1px solid rgba(21,87,232,0.35);
  padding: 13px 30px; border-radius: var(--radius-btn);
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer;
  transition: var(--transition); text-decoration: none;
}
.btn-outline-n:hover {
  border-color: var(--accent); background: rgba(0,229,255,0.06);
  color: var(--accent) !important; transform: translateY(-2px);
}

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--gradient-hero); padding: 120px 0 100px;
}
.hero-beam {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 900px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--primary), transparent);
  animation: beam-pulse 5s ease-in-out infinite; opacity: 0.5;
}
@keyframes beam-pulse { 0%,100%{opacity:.3;transform:translateX(-50%) scaleX(.5);} 50%{opacity:.8;transform:translateX(-50%) scaleX(1);} }

.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero-orb-1 { width: 650px; height: 650px; background: radial-gradient(circle, rgba(21,87,232,0.16), transparent 70%); top: -180px; left: -180px; animation: orb1 14s ease-in-out infinite; }
.hero-orb-2 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(0,229,255,0.1), transparent 70%); bottom: -120px; right: -120px; animation: orb2 17s ease-in-out infinite; }
.hero-orb-3 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(124,58,237,0.09), transparent 70%); top: 38%; right: 22%; animation: orb3 11s ease-in-out infinite; }
@keyframes orb1 { 0%,100%{transform:translate(0,0)scale(1);} 33%{transform:translate(70px,-50px)scale(1.1);} 66%{transform:translate(-40px,70px)scale(0.93);} }
@keyframes orb2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-60px,-70px)scale(1.12);} }
@keyframes orb3 { 0%,100%{transform:translate(0,0)scale(1);opacity:.8;} 50%{transform:translate(35px,45px)scale(1.18);opacity:1;} }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(21,87,232,0.09); border: 1px solid rgba(21,87,232,0.28);
  color: var(--accent); padding: 7px 18px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 28px;
}
.hero-eyebrow .pulse-dot {
  width: 7px; height: 7px; min-width: 7px; background: var(--accent);
  border-radius: 50%; box-shadow: 0 0 0 0 rgba(0,229,255,0.4);
  animation: pdot 2.5s ease-out infinite;
}
@keyframes pdot { 0%{box-shadow:0 0 0 0 rgba(0,229,255,.5);} 70%{box-shadow:0 0 0 9px rgba(0,229,255,0);} 100%{box-shadow:0 0 0 0 rgba(0,229,255,0);} }

.hero h1 { margin-bottom: 28px; }
.hero .lead { font-size: 1.1rem; color: var(--text-secondary); max-width: 560px; margin-bottom: 40px; font-weight: 400; line-height: 1.82; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-stats { margin-top: 64px; display: flex; gap: 56px; flex-wrap: wrap; }
.hero-stat-item .stat-num {
  font-family: var(--font-display); font-size: 2.8rem;
  background: var(--gradient-blue); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; letter-spacing: 0.04em;
}
.hero-stat-item .stat-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px; font-family: var(--font-mono); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 520px; }
.hero-center-ring {
  width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid rgba(21,87,232,0.22);
  display: flex; align-items: center; justify-content: center; position: relative;
  animation: rrot 25s linear infinite;
}
.hero-center-ring::before {
  content: ''; position: absolute; inset: 22px; border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.13); animation: rrot 15s linear infinite reverse;
}
.hero-center-ring::after {
  content: ''; position: absolute; inset: 58px; border-radius: 50%;
  background: radial-gradient(circle, rgba(21,87,232,0.13), transparent);
  animation: pring 4s ease-in-out infinite;
}
@keyframes rrot { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes pring { 0%,100%{opacity:.4;transform:scale(1);} 50%{opacity:.9;transform:scale(1.07);} }
.ring-icon {
  font-size: 3rem; background: var(--gradient-blue);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  z-index: 1; animation: rrot 25s linear infinite reverse;
}
.hero-ring-dot {
  position: absolute; width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; box-shadow: 0 0 14px var(--accent-glow);
}
.hero-ring-dot:nth-child(1) { top: -4px; left: 50%; transform: translateX(-50%); }
.hero-ring-dot:nth-child(2) { bottom: -4px; left: 50%; transform: translateX(-50%); }
.hero-ring-dot:nth-child(3) { left: -4px; top: 50%; transform: translateY(-50%); }
.hero-ring-dot:nth-child(4) { right: -4px; top: 50%; transform: translateY(-50%); }

.hero-data-card {
  background: rgba(8,14,34,0.92); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
  padding: 18px 22px; position: absolute;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(21,87,232,0.12) inset;
}
.hero-data-card.card-top  { top: 4%; right: 2%; width: 192px; animation: fy 5s ease-in-out infinite; }
.hero-data-card.card-mid  { top: 36%; left: -2%; width: 210px; animation: fy 7s ease-in-out infinite reverse; animation-delay: -1s; }
.hero-data-card.card-bot  { bottom: 6%; right: 8%; width: 182px; animation: fy 6.5s ease-in-out infinite; animation-delay: -3s; }
@keyframes fy { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.hero-data-card .dc-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; }
.hero-data-card .dc-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); line-height: 1; letter-spacing: 0.04em; }
.hero-data-card .dc-meta  { font-size: 0.7rem; color: var(--success); margin-top: 4px; }
.dc-sparkline { display: flex; align-items: flex-end; gap: 3px; margin-top: 12px; height: 28px; }
.dc-sparkline span { flex: 1; border-radius: 2px; background: linear-gradient(to top, var(--primary), var(--accent)); opacity: 0.7; animation: sg 3s ease-in-out infinite; }
.dc-sparkline span:nth-child(2){animation-delay:.2s;} .dc-sparkline span:nth-child(3){animation-delay:.4s;} .dc-sparkline span:nth-child(4){animation-delay:.6s;} .dc-sparkline span:nth-child(5){animation-delay:.8s;}
@keyframes sg { 0%,100%{opacity:.5;} 50%{opacity:1;} }

/* ── TICKER ─────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden; background: var(--dark-bg2);
  border-top: 1px solid var(--dark-border); border-bottom: 1px solid var(--dark-border);
  padding: 14px 0; position: relative; z-index:1;
}
.ticker-wrap::before, .ticker-wrap::after {
  content: ''; position: absolute; top:0; width: 120px; height: 100%; z-index: 2;
}
.ticker-wrap::before { left:0; background: linear-gradient(90deg, var(--dark-bg2), transparent); }
.ticker-wrap::after  { right:0; background: linear-gradient(-90deg, var(--dark-bg2), transparent); }
.ticker-track { display: flex; align-items: center; width: max-content; animation: tickscroll 38s linear infinite; }
@keyframes tickscroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 40px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.1em; white-space: nowrap; }
.ticker-item .ti-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.5; }

/* ── SECTION BASE ───────────────────────────────────────── */
section { position: relative; z-index: 1; }
.section-pad    { padding: 110px 0; }
.section-pad-sm { padding: 72px 0; }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent); font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px;
}
.section-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); }

.section-title { font-size: clamp(2.4rem, 4.8vw, 4.4rem); letter-spacing: 0.04em; line-height: 1.05; margin-bottom: 20px; }
.section-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 560px; line-height: 1.8; }

/* ── GRADIENT TEXT ──────────────────────────────────────── */
.gradient-text  { background: var(--gradient-blue);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gradient-text2 { background: var(--gradient-blue2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── GLASS CARDS ────────────────────────────────────────── */
.glass-card {
  background: var(--dark-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--dark-border); border-radius: var(--radius-card);
  padding: 40px 36px; transition: var(--transition); box-shadow: var(--shadow-card);
  position: relative; overflow: hidden; height: 100%;
}
.glass-card::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(21,87,232,0.7), rgba(0,229,255,0.5), transparent);
  opacity:0; transition: opacity 0.35s;
}
.glass-card:hover { border-color: rgba(21,87,232,0.32); transform: translateY(-5px); box-shadow: var(--shadow-card), var(--shadow-glow-b); }
.glass-card:hover::before { opacity:1; }

.card-icon {
  width: 50px; height: 50px; border-radius: 10px;
  background: rgba(21,87,232,0.08); border: 1px solid rgba(21,87,232,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--primary-light); margin-bottom: 22px; transition: var(--transition);
}
.glass-card:hover .card-icon { background: rgba(21,87,232,0.18); border-color: rgba(21,87,232,0.4); box-shadow: 0 0 20px var(--primary-glow-sm); }
.glass-card h3, .glass-card h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-bottom: 12px; }
.glass-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0; }

/* ── PRODUCT CARDS ──────────────────────────────────────── */
.product-card {
  background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-card);
  padding: 44px 40px; transition: var(--transition); box-shadow: var(--shadow-card);
  position: relative; overflow: hidden; height: 100%;
}
.product-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient-blue); opacity:.6; }
.product-card:hover { border-color:rgba(21,87,232,.4); transform:translateY(-6px); box-shadow:var(--shadow-card),0 24px 64px rgba(21,87,232,.18); }
.product-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(21,87,232,0.1); border: 1px solid rgba(21,87,232,0.25);
  color: var(--accent); padding: 4px 14px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px;
}
.product-card h3 { font-family: var(--font-display); font-size: 2.2rem; letter-spacing: 0.04em; margin-bottom: 4px; }
.product-card .product-tagline { font-size: 0.84rem; color: var(--accent); margin-bottom: 18px; font-weight: 500; }
.product-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.78; }
.feature-list { list-style: none; padding:0; margin:0 0 28px; }
.feature-list li { display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--text-muted); padding:5px 0; }
.feature-list li::before { content:''; width:16px; height:16px; min-width:16px; margin-top:2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%231557e8' stroke-width='1.5'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%2300e5ff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ── INDUSTRY CARDS ─────────────────────────────────────── */
.industry-card { background:var(--dark-card); border:1px solid var(--dark-border); border-radius:var(--radius-card); padding:40px 36px; transition:var(--transition); height:100%; }
.industry-card:hover { border-color:var(--dark-border2); transform:translateY(-4px); box-shadow:var(--shadow-glow-b); }
.industry-card .ind-label { font-family:var(--font-mono); font-size:.67rem; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px; }
.industry-card p { font-size:.88rem; color:var(--text-muted); }

/* ── METRICS ────────────────────────────────────────────── */
.metrics-row {
  background:var(--dark-card); border:1px solid var(--dark-border); border-radius:var(--radius-card);
  padding:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative; overflow:hidden;
}
.metrics-row::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient-blue); }
@media(max-width:768px) { .metrics-row { grid-template-columns:repeat(2,1fr); padding:36px 24px; } }
.metric-item { text-align:center; }
.metric-num { font-family:var(--font-display); font-size:3.2rem; line-height:1; letter-spacing:.04em; background:var(--gradient-blue); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; }
.metric-label { font-family:var(--font-mono); font-size:.68rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; }

/* ── CTA SECTION ────────────────────────────────────────── */
.cta-section {
  background:linear-gradient(145deg, rgba(21,87,232,0.1), rgba(0,229,255,0.04), rgba(124,58,237,0.06));
  border:1px solid rgba(21,87,232,0.25); border-radius:var(--radius-lg);
  padding:90px 64px; text-align:center; position:relative; overflow:hidden;
}
.cta-section::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:70%; height:2px; background:var(--gradient-blue); }
.cta-section::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(21,87,232,0.05), transparent 70%); pointer-events:none; }
.cta-section h2 { margin-bottom:16px; }
.cta-section p { font-size:1.05rem; max-width:520px; margin:0 auto 40px; }
@media(max-width:768px) { .cta-section { padding:56px 28px; } }

/* ── SOLUTION BLOCKS ────────────────────────────────────── */
.solution-block { background:var(--dark-card); border:1px solid var(--dark-border); border-radius:var(--radius-card); padding:56px 52px 52px; margin-bottom:32px; position:relative; overflow:hidden; transition:var(--transition); }
.solution-block:hover { border-color:var(--dark-border2); box-shadow:var(--shadow-glow-b); }
.solution-block .sol-number { position:absolute; top:32px; right:44px; font-family:var(--font-display); font-size:6rem; color:rgba(21,87,232,0.04); line-height:1; pointer-events:none; letter-spacing:.04em; }
.solution-block h3 { font-family:var(--font-display); font-size:2.6rem; letter-spacing:.04em; margin-bottom:14px; }
.solution-block .sol-meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.sol-tag { background:rgba(21,87,232,.08); border:1px solid rgba(21,87,232,.2); color:var(--primary-light); padding:3px 14px; border-radius:2px; font-family:var(--font-mono); font-size:.67rem; letter-spacing:.06em; }
.solution-block .sol-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:32px; }
.sol-sub-title { font-family:var(--font-mono); font-size:.67rem; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; margin-bottom:12px; }
.sol-sub-list { list-style:none; padding:0; margin:0; }
.sol-sub-list li { font-size:.87rem; color:var(--text-muted); padding:4px 0; display:flex; align-items:center; gap:8px; }
.sol-sub-list li::before { content:'→'; color:var(--primary-light); font-size:.78rem; }
@media(max-width:768px) { .solution-block .sol-grid { grid-template-columns:1fr; } .solution-block { padding:40px 28px; } }

/* ── PAGE HERO ──────────────────────────────────────────── */
.page-hero { padding:130px 0 80px; background:var(--gradient-hero); border-bottom:1px solid var(--dark-border); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-200px; left:-200px; width:600px; height:600px; background:radial-gradient(circle, rgba(21,87,232,0.1), transparent 70%); border-radius:50%; }
.page-hero .lead { font-size:1.1rem; color:var(--text-secondary); line-height:1.82; }

/* ── TECH STACK ─────────────────────────────────────────── */
.tech-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--dark-card); border:1px solid var(--dark-border); border-radius:4px;
  padding:10px 18px; font-family:var(--font-mono); font-size:.76rem; color:var(--text-muted);
  transition:var(--transition-fast);
}
.tech-badge:hover { border-color:var(--dark-border2); color:var(--text-primary); background:rgba(21,87,232,.08); }
.tech-badge i { color:var(--primary-light); }

.arch-layer {
  background:var(--dark-card); border:1px solid var(--dark-border); border-radius:10px;
  padding:22px 28px; margin-bottom:10px; display:flex; align-items:center; gap:20px;
  transition:var(--transition); position:relative; overflow:hidden;
}
.arch-layer:hover { border-color:var(--dark-border2); }
.arch-layer::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gradient-blue); opacity:0; transition:opacity .25s; }
.arch-layer:hover::after { opacity:1; }
.arch-layer .layer-num { font-family:var(--font-mono); font-size:.65rem; color:var(--text-dim); width:30px; flex-shrink:0; }
.arch-layer .layer-name { font-weight:700; font-size:.9rem; color:var(--text-primary); min-width:160px; font-family:var(--font-body); }
.arch-layer .layer-desc { font-size:.84rem; color:var(--text-muted); margin-bottom:0; flex:1; }

/* ── TRUST / SOCIAL PROOF ───────────────────────────────── */
.trust-row {
  display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center;
}
.trust-pill {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.22);
  color:#6ee7b7; padding:6px 16px; border-radius:2px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em;
}
.trust-pill i { font-size:.85rem; }

.trust-badge {
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:var(--dark-card); border:1px solid var(--dark-border); border-radius:8px; transition:var(--transition);
}
.trust-badge:hover { border-color:var(--dark-border2); }
.trust-badge .tb-icon { width:36px; height:36px; border-radius:8px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.22); display:flex; align-items:center; justify-content:center; color:var(--success); font-size:.95rem; flex-shrink:0; }
.trust-badge .tb-title { font-weight:700; font-size:.84rem; color:var(--text-primary); }
.trust-badge .tb-sub { font-size:.74rem; color:var(--text-dim); }

/* ── DEMO MODAL ─────────────────────────────────────────── */
.demo-modal .modal-content {
  background:var(--dark-bg3); border:1px solid rgba(21,87,232,.3); border-radius:var(--radius-lg);
  box-shadow:0 40px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(21,87,232,.1) inset;
}
.demo-modal .modal-header { border-bottom:1px solid var(--dark-border); padding:28px 36px 24px; background:linear-gradient(135deg, rgba(21,87,232,.08), transparent); }
.demo-modal .modal-body { padding:32px 36px; }
.demo-modal .modal-footer { border-top:1px solid var(--dark-border); padding:20px 36px; }
.demo-modal .modal-title { font-family:var(--font-display); font-size:1.9rem; letter-spacing:.04em; color:var(--text-primary); }
.demo-modal .btn-close { filter:invert(1) opacity(.5); }

.step-indicator { display:flex; gap:8px; margin-bottom:32px; align-items:center; }
.step-dot { height:6px; border-radius:3px; background:var(--dark-border); transition:var(--transition); width:24px; }
.step-dot.active { background:var(--gradient-blue); width:40px; }
.step-dot.done { background:rgba(16,185,129,.5); }

.demo-step { display:none; animation:stepIn .35s var(--ease-out-expo); }
.demo-step.active { display:block; }
@keyframes stepIn { from{opacity:0;transform:translateX(16px);} to{opacity:1;transform:translateX(0);} }

/* ── CONTACT ────────────────────────────────────────────── */
.contact-info-card { background:var(--dark-card); border:1px solid var(--dark-border); border-radius:var(--radius-card); padding:40px 36px; height:100%; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; padding:20px 0; border-bottom:1px solid var(--dark-border); }
.contact-info-item:last-child { border-bottom:none; }
.contact-info-icon { width:42px; height:42px; background:rgba(21,87,232,.08); border:1px solid rgba(21,87,232,.2); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--primary-light); flex-shrink:0; }
.contact-info-text .label { font-family:var(--font-mono); font-size:.64rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.contact-info-text .value { font-size:.92rem; color:var(--text-primary); }

/* ── FORMS ──────────────────────────────────────────────── */
.form-label { color:var(--text-muted); font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-family:var(--font-mono); margin-bottom:8px; }
.form-control, .form-select { background:rgba(6,11,26,.85) !important; border:1px solid var(--dark-border) !important; color:var(--text-primary) !important; border-radius:5px !important; padding:13px 16px !important; font-size:.9rem !important; font-family:var(--font-body) !important; transition:var(--transition) !important; }
.form-control:focus, .form-select:focus { background:rgba(8,14,34,.97) !important; border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-glow-sm) !important; color:var(--text-primary) !important; }
.form-control::placeholder { color:var(--text-dim) !important; }
.form-select option { background:#0a1228; }

/* ── VALUE CARDS ────────────────────────────────────────── */
.value-card { display:flex; align-items:flex-start; gap:16px; padding:24px; background:var(--dark-card); border:1px solid var(--dark-border); border-radius:10px; transition:var(--transition); margin-bottom:16px; }
.value-card:hover { border-color:var(--dark-border2); }
.value-card .val-icon { width:38px; height:38px; min-width:38px; background:rgba(21,87,232,.1); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--primary-light); }
.value-card h5 { font-family:var(--font-body); font-size:.96rem; font-weight:700; letter-spacing:0; line-height:1.3; margin-bottom:6px; }
.value-card p { font-size:.85rem; margin-bottom:0; }

/* ── TIMELINE ───────────────────────────────────────────── */
.timeline-item { display:flex; gap:24px; margin-bottom:40px; }
.timeline-marker { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.t-dot { width:12px; height:12px; background:var(--gradient-blue); border-radius:50%; margin-top:6px; box-shadow:0 0 12px var(--primary-glow); }
.t-line { width:1px; flex:1; background:linear-gradient(to bottom, rgba(21,87,232,.4), transparent); margin-top:8px; }
.timeline-item h4 { font-family:var(--font-body); font-size:1rem; font-weight:700; margin-bottom:8px; letter-spacing:0; line-height:1.3; }

/* ── ALERTS ─────────────────────────────────────────────── */
.alert-success-n { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.3); color:#6ee7b7; padding:16px 20px; border-radius:8px; font-size:.9rem; }
.alert-error-n   { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); color:#fca5a5; padding:16px 20px; border-radius:8px; font-size:.9rem; }

/* ── FOOTER ─────────────────────────────────────────────── */
.footer { background:#02030a; border-top:1px solid var(--dark-border); padding:80px 0 0; }
.footer-brand img {
  height: 36px;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.footer-brand p { font-size:.85rem; color:var(--text-dim); max-width:280px; line-height:1.75; }
.footer-col h6 { font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:20px; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:10px; }
.footer-links a { color:var(--text-dim); font-size:.86rem; transition:var(--transition-fast); }
.footer-links a:hover { color:var(--primary-light); padding-left:4px; }
.footer-bottom { margin-top:56px; padding:24px 0; border-top:1px solid var(--dark-border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:.76rem; color:var(--text-dim); margin:0; font-family:var(--font-mono); }
.social-links { display:flex; gap:10px; }
.social-links a { width:36px; height:36px; background:var(--dark-card); border:1px solid var(--dark-border); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:.9rem; transition:var(--transition-fast); }
.social-links a:hover { border-color:var(--primary); color:var(--primary-light); background:rgba(21,87,232,.1); }

/* ── WHY GRID ───────────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:992px) { .why-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:576px) { .why-grid { grid-template-columns:1fr; } }

/* ── GRADIENT DIVIDER ───────────────────────────────────── */
.gradient-divider { height:1px; border:none; background:linear-gradient(90deg, transparent, rgba(21,87,232,.4), rgba(0,229,255,.3), transparent); margin:0; }

/* ── MISC ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--dark-bg); }
::-webkit-scrollbar-thumb { background:rgba(21,87,232,.5); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(21,87,232,.8); }
.text-accent { color:var(--accent) !important; }
.text-primary-n { color:var(--primary-light) !important; }
.page-fade { animation:pageFadeIn .45s var(--ease-out-expo) forwards; }
@keyframes pageFadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
[data-aos] { transition-timing-function: var(--ease-out-expo) !important; }

/* ══════════════════════════════════════════════════════════
   PAGE HERO ILLUSTRATIONS — Per-page animated visuals
══════════════════════════════════════════════════════════ */

/* Shared page-hero upgrade: two-col layout */
.page-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 340px;
}
.page-hero-text { flex: 1; min-width: 0; }
.page-hero-visual {
  flex-shrink: 0;
  width: 380px;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  .page-hero-visual { display: none; }
}

/* Shared orb for inner pages */
.ph-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: ph-orb-drift 8s ease-in-out infinite;
}
@keyframes ph-orb-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(12px,-16px) scale(1.06); }
}

/* ── SVG shared animation keyframes ──────────────────────── */
@keyframes svg-fade-in { from{opacity:0;} to{opacity:1;} }
@keyframes svg-float   { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes svg-pulse   { 0%,100%{opacity:.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.08);} }
@keyframes svg-spin    { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes svg-spin-r  { from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }
@keyframes svg-dash    { to { stroke-dashoffset: 0; } }
@keyframes svg-blink   { 0%,100%{opacity:1;} 50%{opacity:.2;} }
@keyframes svg-scan    { 0%{transform:translateY(-100%);opacity:0;} 20%{opacity:.6;} 80%{opacity:.6;} 100%{transform:translateY(100%);opacity:0;} }
@keyframes svg-node-pop{ 0%,100%{r:4;} 50%{r:6;} }
@keyframes svg-grow    { from{transform:scaleY(0);} to{transform:scaleY(1);} }
@keyframes svg-ripple  { 0%{r:0;opacity:.8;} 100%{r:60;opacity:0;} }
@keyframes svg-move-r  { 0%{transform:translateX(-10px);opacity:0;} 100%{transform:translateX(10px);opacity:0;} }
@keyframes data-stream { 0%{stroke-dashoffset:200;} 100%{stroke-dashoffset:0;} }

/* ── CONTACT PAGE — Specific Fixes ──────────────────────── */
.contact-form-card {
  background: var(--dark-card);
  backdrop-filter: blur(24px);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-card);
  padding: 44px;
  box-shadow: var(--shadow-card);
  /* No height:100% — stacks correctly */
}

.contact-card-title {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 28px;
  color: var(--text-primary);
}

.contact-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(21,87,232,0.05);
  border: 1px solid rgba(21,87,232,0.12);
  border-radius: 6px;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Contact sub-cards (demo + social) — NOT height:100% */
.contact-sub-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.contact-sub-card:hover {
  border-color: var(--dark-border2);
}

/* Demo list inside contact card */
.demo-list {
  list-style: none;
  padding: 0; margin: 10px 0 0;
}
.demo-list li {
  font-size: .84rem;
  color: var(--text-muted);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-list li::before {
  content: '→';
  color: var(--primary-light);
  font-size: .78rem;
}

/* Engage process cards */
.engage-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  transition: var(--transition);
  text-align: center;
  height: 100%;
}
.engage-card:hover {
  border-color: var(--dark-border2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-b);
}
.engage-card .engage-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  letter-spacing: .04em;
  background: var(--gradient-blue);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
  margin-bottom: 14px;
}
.engage-card h5 {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary);
  letter-spacing: 0;
}
.engage-card p {
  font-size: .84rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.7;
}

/* ── PAGE HERO responsive fix ────────────────────────────── */
@media (max-width: 991px) {
  .page-hero-inner {
    flex-direction: column;
    min-height: auto;
  }
}