/* Hackability Design System – Refined Institutional Bold */

:root {
  /* ----- Colors ----- */
  --color-white: #FFFFFF;
  /* Deep Royal Blue palette */
  --color-blue-900: #0A1172;   /* primary background / dark sections */
  --color-blue-800: #0D1A99;   /* hover / button states */
  --color-blue-700: #1A2BB5;   /* card borders / accents */
  --color-blue-100: #E8EAFF;   /* light tint backgrounds */
  --color-blue-50:  #F4F5FF;   /* subtle section fills */
  /* Amber / Gold */
  --color-amber-500: #F5A623;  /* primary accent / CTAs */
  --color-amber-400: #F7B94A;  /* hover amber */
  --color-amber-100: #FEF3DC;  /* soft amber tint */
  /* Neutrals */
  --color-gray-900: #111218;   /* body text */
  --color-gray-700: #3D3F52;   /* secondary text */
  --color-gray-400: #9395A8;   /* muted / placeholder */
  --color-gray-100: #F2F3F8;   /* light background sections */
  --color-gray-50:  #F9FAFB;   /* page background */

  /* ----- Typography ----- */
  --font-display: 'Familjen Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --text-hero:   4rem;   /* 64px */
  --text-h1:     3rem;   /* 48px */
  --text-h2:     2.25rem;/* 36px */
  --text-h3:     1.75rem;/* 28px */
  --text-h4:     1.375rem;/* 22px */
  --text-lg:     1.125rem;/* 18px */
  --text-base:   1rem;   /* 16px */
  --text-sm:    0.875rem;/* 14px */
  --text-xs:    0.75rem;/* 12px */

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ----- Spacing ----- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  --section-py: var(--space-20);
  --section-py-lg: var(--space-32);
  --container-max: 1200px;
  --container-px: var(--space-6);

  /* ----- Border Radius ----- */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full:9999px;

  /* ----- Shadows ----- */
  --shadow-sm:   0 1px 3px rgba(10,17,114,0.08), 0 1px 2px rgba(10,17,114,0.04);
  --shadow-md:   0 4px 16px rgba(10,17,114,0.10), 0 2px 6px rgba(10,17,114,0.06);
  --shadow-lg:   0 12px 40px rgba(10,17,114,0.12), 0 4px 12px rgba(10,17,114,0.08);
  --shadow-xl:   0 24px 64px rgba(10,17,114,0.16);
  --shadow-amber:0 8px 32px rgba(245,166,35,0.25);


}

/* Global resets */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--color-gray-50);color:var(--color-gray-900);line-height:var(--leading-normal);min-height:100vh}

/* Utility classes */
.container{max-width:var(--container-max);margin:auto;padding:0 var(--container-px)}
.section{padding:var(--section-py) 0}
.overline{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-amber-500);margin-bottom:var(--space-3);display:block}
.section-subtitle{font-size:var(--text-lg);color:var(--color-gray-700);margin-top:var(--space-4)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.2rem;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .25s ease;text-transform:uppercase;letter-spacing:.4px}
.btn-primary{background:var(--color-amber-500);color:var(--color-gray-900);box-shadow:var(--shadow-amber)}
.btn-primary:hover{background:var(--color-amber-400);transform:translateY(-1px);box-shadow:0 12px 36px rgba(245,166,35,.35)}
.btn-secondary{background:var(--color-blue-900);color:var(--color-white);border:2px solid var(--color-blue-900)}
.btn-secondary:hover{background:var(--color-blue-800);border-color:var(--color-blue-800)}
.btn-ghost{background:transparent;color:var(--color-blue-900);border:2px solid var(--color-blue-900);padding:.5rem 1rem}
.btn-ghost:hover{background:var(--color-blue-900);color:var(--color-white)}
.btn-link{background:transparent;color:var(--color-blue-900);font-weight:600;display:inline-flex;align-items:center;gap:.4rem;transition:gap .2s}
.btn-link:hover{gap:.8rem}
.btn-link::after{content:'→'}

/* Cards */
.card{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid rgba(26,43,181,.12);padding:var(--space-8);box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card-dark{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-8);backdrop-filter:blur(8px)}
.card-feature{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-10);border-top:4px solid var(--color-amber-500);box-shadow:var(--shadow-md)}

/* Form inputs */
input,textarea,select{width:100%;background:var(--color-gray-100);color:var(--color-gray-900);border:1px solid var(--color-gray-400);border-radius:var(--radius-md);padding:.65rem .9rem;font-size:var(--text-sm);transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus,select:focus{border-color:var(--color-blue-900);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* Header – sticky */
.header{position:sticky;top:0;z-index:50;background:var(--color-white);border-bottom:1px solid var(--color-gray-100);transition:box-shadow .3s}
.header.scrolled{box-shadow:var(--shadow-sm)}
.header .nav-link{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-700);text-decoration:none;padding:.5rem 0;position:relative}
.header .nav-link.active{color:var(--color-amber-500)}
.header .nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:3px;background:var(--color-amber-500);border-radius:var(--radius-sm)}
.header .nav-link:hover{color:var(--color-blue-900)}

/* Hero utilities */
.hero-dark{background:var(--color-blue-900);color:var(--color-white)}
.hero-light{background:var(--color-gray-50);color:var(--color-gray-900)}

/* Animations */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:80ms}
.reveal-delay-2{transition-delay:160ms}
.reveal-delay-3{transition-delay:240ms}
.reveal-delay-4{transition-delay:320ms}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* Misc typography helpers */
.text-hero{font-size:var(--text-hero);font-weight:700;line-height:var(--leading-tight)}
.text-h1{font-size:var(--text-h1);font-weight:700;line-height:var(--leading-tight)}
.text-h2{font-size:var(--text-h2);font-weight:600;line-height:var(--leading-snug)}
.text-h3{font-size:var(--text-h3);font-weight:600;line-height:var(--leading-snug)}
.text-h4{font-size:var(--text-h4);font-weight:600;line-height:var(--leading-snug)}
.text-lg{font-size:var(--text-lg)}
.text-base{font-size:var(--text-base)}
.text-sm{font-size:var(--text-sm)}
.text-xs{font-size:var(--text-xs)}

/* Hero Carousel Slides */
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; }
.hero-slide.active { opacity: 1; }

.partner-logo-img {
  max-width: 120px;
  max-height: 40px;
  object-fit: contain;
  filter: grayscale(100%) opacity(70%);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.partner-logo-img:hover {
  filter: grayscale(0%) opacity(100%);
  transform: scale(1.05);
}

/* ==========================================================================
   Flow Button (Converted from React component)
   ========================================================================== */
.btn-flow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  overflow: hidden;
  border-radius: 100px;
  border: 1.5px solid transparent;
  background-color: transparent;
  padding: 0.75rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  white-space: nowrap;
}

.btn-flow:active {
  transform: scale(0.95);
}

.btn-flow:hover {
  border-color: transparent !important;
  border-radius: 12px;
}

.flow-arrow-left, .flow-arrow-right {
  position: absolute;
  font-size: 1rem;
  z-index: 9;
  transition: all 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flow-arrow-left {
  left: -25%;
}

.btn-flow:hover .flow-arrow-left {
  left: 1rem;
}

.flow-arrow-right {
  right: 1rem;
}

.btn-flow:hover .flow-arrow-right {
  right: -25%;
}

.flow-text {
  position: relative;
  z-index: 1;
  transform: translateX(-0.75rem);
  transition: all 800ms ease-out;
}

.btn-flow:hover .flow-text {
  transform: translateX(0.75rem);
}

.flow-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  opacity: 0;
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 0;
}

.btn-flow:hover .flow-circle {
  width: 300px;
  height: 300px;
  opacity: 1;
}

/* Dark variant (Default from Prompt) */
.btn-flow-dark {
  border-color: rgba(17, 17, 17, 0.4);
  color: #111111;
}
.btn-flow-dark .flow-circle {
  background-color: #111111;
}
.btn-flow-dark:hover {
  color: white;
}
.btn-flow-dark:hover .flow-arrow-left {
  color: white;
}

/* Light variant (For dark backgrounds like Hero) */
.btn-flow-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}
.btn-flow-light .flow-circle {
  background-color: white;
}
.btn-flow-light:hover {
  color: #111111;
}
.btn-flow-light:hover .flow-arrow-left {
  color: #111111;
}

/* Yellow variant (For primary CTAs) */
.btn-flow-yellow {
  border-color: rgba(245, 194, 0, 0.8);
  color: #0D1B8E;
  background-color: rgba(245, 194, 0, 0.1);
}
.btn-flow-yellow .flow-circle {
  background-color: #F5C200;
}
.btn-flow-yellow:hover {
  color: #0D1B8E;
}
.btn-flow-yellow:hover .flow-arrow-left {
  color: #0D1B8E;
}

/* Navy variant */
.btn-flow-navy {
  border-color: rgba(13, 27, 142, 0.4);
  color: #0D1B8E;
}
.btn-flow-navy .flow-circle {
  background-color: #0D1B8E;
}
.btn-flow-navy:hover {
  color: white;
}
.btn-flow-navy:hover .flow-arrow-left {
  color: white;
}

/* ==========================================================================
   Vertical Testimonials Marquee
   ========================================================================== */
@keyframes marquee-vertical {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.animate-marquee-vertical {
  animation: marquee-vertical 10s linear infinite;
}

.mask-y-fade {
  /* Using standard mask-image */
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* ==========================================================================
   Mega Menu Dropdowns
   ========================================================================== */
/* Prevent navbar items from wrapping text */
.mega-menu-item button,
#navbar ul li a {
  white-space: nowrap !important;
}

.mega-menu-content a {
  white-space: normal !important;
}

/* Animate Caret Arrows on Hover / Open */
.mega-menu-item button i.ph-caret-down {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.mega-menu-item:hover button i.ph-caret-down,
.mega-menu-item.menu-open button i.ph-caret-down {
  transform: rotate(180deg);
}

/* Dynamic arrow up right transition inside mega menu dropdown links */
.mega-menu-content a i.ph-arrow-up-right {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  transform: translate(0, 0);
}

.mega-menu-content a:hover i.ph-arrow-up-right {
  transform: translate(2px, -2px);
  opacity: 1 !important;
}

/* Nav pill — use ::before for backdrop-blur so the <ul> doesn't clip dropdowns */
.nav-pill {
  position: relative;
  overflow: visible !important;
  /* Reset: no backdrop-filter on the <ul> itself */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-color: transparent !important;
}

.nav-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index: -1;
  pointer-events: none;
}

.mega-menu-item {
  position: relative;
}

.mega-menu-content {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(0.95);
  z-index: 9999;
  pointer-events: none;
}

/* Invisible bridge to prevent hover loss when moving mouse down to dropdown */
.mega-menu-content::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

.mega-menu-item:hover .mega-menu-content,
.mega-menu-item.menu-open .mega-menu-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(10px) scale(1);
  pointer-events: auto;
}

/* ==========================================================================
   Dynamic & Alive Aesthetic Utilities (Overhaul)
   ========================================================================== */

/* 1. Animated Mesh Gradients & Overlays */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-mesh-dark {
  background: linear-gradient(-45deg, #0D1B8E, #1A0B40, #0B2447, #361154);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

.diagonal-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 11px
  );
}

.bg-pattern-plus {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F5C200' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 90%);
  mask-image: radial-gradient(circle at center, black 10%, transparent 90%);
}

/* 2. Floating Blob Animations */
@keyframes blob-float {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes blob-float-reverse {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(-30px, 50px) scale(1.1); }
  66% { transform: translate(20px, -20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
  animation: blob-float 12s infinite alternate ease-in-out;
}

.animate-blob-reverse {
  animation: blob-float-reverse 15s infinite alternate ease-in-out;
}

.animate-blob-delay {
  animation-delay: 2s;
}

/* Subtle glowing accent orbs for white backgrounds */
.bg-orb-cyan {
  background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0) 70%);
}
.bg-orb-violet {
  background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, rgba(138, 43, 226, 0) 70%);
}
.bg-orb-yellow {
  background: radial-gradient(circle, rgba(245, 194, 0, 0.15) 0%, rgba(245, 194, 0, 0) 70%);
}

/* 3. Glassmorphism Panels */
.glass-panel {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(13, 27, 142, 0.05);
}

.glass-panel-dark {
  background: rgba(13, 27, 142, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Glow effects for buttons */
.btn-glow-yellow {
  box-shadow: 0 0 20px rgba(245, 194, 0, 0.4);
  transition: box-shadow 0.3s ease;
}
.btn-glow-yellow:hover {
  box-shadow: 0 0 35px rgba(245, 194, 0, 0.6);
}

.mega-menu-grid-bg {
  background-image: radial-gradient(rgba(13, 27, 142, 0.05) 2px, transparent 2px);
  background-size: 12px 12px;
}

/* 4. Fluid Pastel Aurora & Tinted Glass */
.aurora-wrapper {
  position: relative;
  z-index: 1;
  /* Dark hero sits above this, so no conflict */
}

.aurora-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -2;
  background: linear-gradient(135deg, #E8F0FF 0%, #FFE5EB 40%, #F5F0FF 70%, #E8F0FF 100%);
  background-size: 300% 300%;
  animation: aurora-shift 20s ease infinite;
  pointer-events: none;
}

.futuristic-grid {
  position: fixed;
  bottom: -50vh; left: -50vw; right: -50vw; top: 0;
  z-index: -1;
  background-image: 
    linear-gradient(to right, rgba(13, 27, 142, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 27, 142, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1000px) rotateX(75deg);
  transform-origin: bottom center;
  animation: grid-forward 4s linear infinite;
  pointer-events: none;
  mask-image: linear-gradient(to top, black 20%, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, black 20%, transparent 70%);
}

@keyframes grid-forward {
  0% { transform: perspective(1000px) rotateX(75deg) translateY(0); }
  100% { transform: perspective(1000px) rotateX(75deg) translateY(80px); }
}

@keyframes aurora-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.glass-panel-blue {
  background: rgba(232, 240, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px 0 rgba(13, 27, 142, 0.05);
}

.glass-panel-yellow {
  background: rgba(255, 229, 235, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px 0 rgba(245, 194, 0, 0.05);
}

.glass-panel-dark {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}
.glass-panel-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.cyber-dark-bg {
  background-color: #0A0F1C;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(0, 229, 255, 0.08), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(255, 64, 129, 0.08), transparent 50%);
}

.cyber-dark-grid {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
}

/* Utility for hiding scrollbars */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}