/* ========================================
   GeniusBI — Shared Design System
   ======================================== */

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* VARIABLES */
:root {
  --navy: #0B1120;
  --navy-light: #111827;
  --navy-mid: #1C2640;
  --purple: #8A65C4;
  --purple-light: #A680DB;
  --purple-soft: rgba(138,101,196,0.10);
  --teal: #7DBCDB;
  --teal-light: #9AD0E8;
  --teal-soft: rgba(125,188,219,0.10);
  --white: #FFFFFF;
  --off-white: #F7F8FA;
  --gray-50: #F1F3F7;
  --gray-100: #E3E7EF;
  --gray-200: #C8CDD9;
  --gray-400: #8B93A7;
  --gray-600: #5C6580;
  --text-dark: #111827;
  --text-body: #4B5468;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeUp { from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideLeft { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,15px) scale(0.97)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-25px,25px) scale(0.96)} 66%{transform:translate(20px,-30px) scale(1.04)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-15px)} }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes lineGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes counterPulse { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes morphBlob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:50% 60% 30% 60%/30% 60% 70% 40%} }

/* Scroll reveals */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.12s; }
.reveal-delay-2 { transition-delay:0.24s; }
.reveal-delay-3 { transition-delay:0.36s; }
.reveal-delay-4 { transition-delay:0.48s; }
.reveal-delay-5 { transition-delay:0.6s; }
.reveal-scale { opacity:0; transform:scale(0.92); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-scale.visible { opacity:1; transform:scale(1); }
.reveal-left { opacity:0; transform:translateX(-50px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(50px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ========================================
   NAVBAR
   ======================================== */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 24px; transition:all 0.5s var(--ease);
}
.navbar.scrolled {
  background:rgba(11,17,32,0.95);
  backdrop-filter:blur(24px);
  box-shadow:0 1px 0 rgba(255,255,255,0.05);
}
.navbar-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; height:72px;
}
.navbar-logo { animation:fadeDown 0.8s var(--ease) 0.1s both; }
.navbar-logo svg { height:26px; width:auto; display:block; }
.navbar-links {
  display:flex; align-items:center; gap:28px; list-style:none;
  animation:fadeDown 0.8s var(--ease) 0.2s both;
}
.navbar-links a {
  font-family:var(--font-body); font-size:0.84rem; font-weight:500;
  color:rgba(255,255,255,0.6); text-decoration:none;
  transition:color 0.3s ease; position:relative;
}
.navbar-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px;
  background:var(--purple-light); transition:width 0.3s var(--ease);
}
.navbar-links a:hover { color:var(--white); }
.navbar-links a:hover::after { width:100%; }
.navbar-links a.active { color:var(--white); }
.navbar-links a.active::after { width:100%; }
.navbar-cta {
  font-family:var(--font-body); font-size:0.84rem; font-weight:600;
  color:var(--white) !important; background:var(--purple);
  padding:9px 22px; border-radius:100px; text-decoration:none;
  transition:all 0.3s ease; border:1px solid transparent;
}
.navbar-cta:hover {
  background:transparent; border-color:var(--purple-light);
  color:var(--purple-light) !important; transform:translateY(-1px);
}
.navbar-cta::after { display:none !important; }
.navbar-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.navbar-toggle span { display:block; width:22px; height:2px; background:var(--white); margin:5px 0; border-radius:2px; transition:all 0.3s ease; }

/* Mobile nav */
.mobile-menu {
  display:none; position:fixed; top:72px; left:0; right:0;
  background:rgba(11,17,32,0.98); backdrop-filter:blur(24px);
  padding:24px; border-top:1px solid rgba(255,255,255,0.05);
  transform:translateY(-10px); opacity:0;
  transition:all 0.3s var(--ease);
}
.mobile-menu.open { display:block; transform:translateY(0); opacity:1; }
.mobile-menu a {
  display:block; padding:14px 0; color:rgba(255,255,255,0.7);
  text-decoration:none; font-size:0.95rem; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.mobile-menu a:hover { color:var(--white); }

/* ========================================
   SECTION PATTERNS
   ======================================== */
.section-light { padding:110px 24px; background:var(--white); }
.section-gray { padding:110px 24px; background:var(--off-white); }
.section-dark { padding:110px 24px; background:var(--navy); position:relative; overflow:hidden; }

.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-heading); font-size:0.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--purple); margin-bottom:16px;
}
.section-tag::before { content:''; width:20px; height:1.5px; background:var(--purple); border-radius:2px; }
.section-title {
  font-family:var(--font-heading);
  font-size:clamp(2rem, 3.5vw, 2.8rem); font-weight:700;
  color:var(--text-dark); line-height:1.12; letter-spacing:-0.03em; max-width:680px;
}
.section-subtitle {
  font-size:1.02rem; color:var(--text-body); line-height:1.65;
  max-width:580px; margin-top:16px;
}
.section-header { text-align:center; margin-bottom:72px; }
.section-header .section-title,
.section-header .section-subtitle { margin-left:auto; margin-right:auto; }
.section-header .section-tag { justify-content:center; }

/* Dark section variants */
.section-dark .section-tag { color:var(--teal-light); }
.section-dark .section-tag::before { background:var(--teal); }
.section-dark .section-title { color:var(--white); }
.section-dark .section-subtitle { color:rgba(255,255,255,0.55); }

/* ========================================
   BUTTONS
   ======================================== */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:0.95rem; font-weight:600;
  color:var(--white); background:var(--purple);
  padding:15px 34px; border-radius:100px;
  text-decoration:none; border:none; cursor:pointer;
  transition:all 0.4s var(--ease); position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition:left 0.6s ease;
}
.btn-primary:hover::before { left:100%; }
.btn-primary:hover {
  background:var(--purple-light); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(138,101,196,0.18);
}
.btn-primary svg { width:18px; height:18px; transition:transform 0.3s ease; }
.btn-primary:hover svg { transform:translateX(4px); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:0.95rem; font-weight:500;
  color:rgba(255,255,255,0.7); text-decoration:none;
  padding:15px 28px; border-radius:100px;
  border:1px solid rgba(255,255,255,0.12); transition:all 0.3s ease;
}
.btn-secondary:hover { color:var(--white); border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.04); }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:0.92rem; font-weight:600;
  color:var(--white); background:transparent;
  border:1px solid rgba(255,255,255,0.18); padding:14px 28px;
  border-radius:100px; text-decoration:none; cursor:pointer;
  transition:all 0.3s ease;
}
.btn-outline:hover { border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.05); }

.btn-outline-dark {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:0.92rem; font-weight:600;
  color:var(--purple); background:transparent;
  border:1px solid rgba(138,101,196,0.25); padding:14px 28px;
  border-radius:100px; text-decoration:none; cursor:pointer;
  transition:all 0.3s ease;
}
.btn-outline-dark:hover { border-color:var(--purple); background:var(--purple-soft); }
.btn-outline-dark svg { width:18px; height:18px; transition:transform 0.3s ease; }
.btn-outline-dark:hover svg { transform:translateX(4px); }

.btn-text {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:0.9rem; font-weight:600;
  color:var(--purple); text-decoration:none; transition:gap 0.3s ease;
}
.btn-text:hover { gap:14px; }
.btn-text svg { width:18px; height:18px; }

.arrow-icon { fill:none; viewBox:0 0 24 24; }

/* ========================================
   PAGE HERO (inner pages)
   ======================================== */
.page-hero {
  position:relative; background:var(--navy); overflow:hidden;
  padding:140px 24px 80px;
}
.page-hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
}
.page-hero-orb1 {
  position:absolute; width:400px; height:400px; top:-15%; right:5%;
  background:radial-gradient(circle, rgba(138,101,196,0.2) 0%, transparent 70%);
  border-radius:50%; filter:blur(80px); animation:orbFloat1 12s ease-in-out infinite;
}
.page-hero-orb2 {
  position:absolute; width:300px; height:300px; bottom:-10%; left:10%;
  background:radial-gradient(circle, rgba(125,188,219,0.15) 0%, transparent 70%);
  border-radius:50%; filter:blur(80px); animation:orbFloat2 15s ease-in-out infinite;
}
.page-hero-content {
  position:relative; z-index:2; max-width:1200px; margin:0 auto;
}
.page-hero-content h1 {
  font-family:var(--font-heading);
  font-size:clamp(2.4rem, 4.5vw, 3.4rem); font-weight:700;
  color:var(--white); line-height:1.1; letter-spacing:-0.035em;
  max-width:650px; margin-bottom:20px;
  animation:fadeUp 1s var(--ease) 0.3s both;
}
.page-hero-content h1 .text-shimmer {
  background:linear-gradient(90deg, var(--purple-light) 0%, var(--teal) 40%, var(--purple-light) 80%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmer 4s linear infinite;
}
.page-hero-content p {
  font-size:1.05rem; line-height:1.7; color:rgba(255,255,255,0.55);
  max-width:560px; animation:fadeUp 1s var(--ease) 0.45s both;
}
.page-hero-actions {
  display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap;
  animation:fadeUp 1s var(--ease) 0.6s both;
}

/* ========================================
   CTA SECTION (reusable)
   ======================================== */
.cta-section { padding:110px 24px; background:var(--white); }
.cta-box {
  max-width:880px; margin:0 auto;
  background:var(--navy); border-radius:var(--radius-xl);
  padding:68px; text-align:center; position:relative; overflow:hidden;
}
.cta-box::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(138,101,196,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(125,188,219,0.1) 0%, transparent 50%);
}
.cta-box .section-tag { color:var(--teal-light); position:relative; }
.cta-box .section-tag::before { background:var(--teal); }
.cta-box h2 {
  font-family:var(--font-heading);
  font-size:clamp(1.7rem, 3vw, 2.3rem); font-weight:700;
  color:var(--white); margin-bottom:14px; letter-spacing:-0.03em; position:relative;
}
.cta-box p {
  font-size:0.95rem; color:rgba(255,255,255,0.55); max-width:480px;
  margin:0 auto 32px; line-height:1.6; position:relative;
}
.cta-actions {
  display:flex; align-items:center; justify-content:center; gap:14px;
  position:relative; flex-wrap:wrap;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background:var(--navy); border-top:1px solid rgba(255,255,255,0.05);
  padding:60px 24px 28px;
}
.footer-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:40px;
}
.footer-brand p {
  font-size:0.84rem; color:rgba(255,255,255,0.45);
  line-height:1.6; margin-top:14px; max-width:260px;
}
.footer-brand svg { height:22px; }
.footer-col h4 {
  font-family:var(--font-heading); font-size:0.8rem; font-weight:600;
  color:var(--white); margin-bottom:14px;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:8px; }
.footer-col a {
  font-size:0.82rem; color:rgba(255,255,255,0.45);
  text-decoration:none; transition:all 0.3s ease;
}
.footer-col a:hover { color:var(--white); }
.footer-bottom {
  max-width:1200px; margin:0 auto; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:space-between;
}
.footer-bottom p { font-size:0.76rem; color:rgba(255,255,255,0.3); }
.footer-social { display:flex; gap:12px; }
.footer-social a {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s ease;
}
.footer-social a:hover { background:var(--purple); border-color:var(--purple); transform:translateY(-2px); }
.footer-social svg { width:15px; height:15px; color:rgba(255,255,255,0.5); }
.footer-social a:hover svg { color:var(--white); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:768px) {
  .navbar-links { display:none; }
  .navbar-toggle { display:block; }
  .cta-box { padding:40px 24px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .page-hero { padding:110px 16px 60px; }
}
@media (max-width:480px) {
  .page-hero h1 { font-size:2rem; }
}