/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── RESET & TOKENS ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue-dark:#020617;
  --blue-deep:#0f172a;
  --blue-mid:#1e293b;
  --blue-main:#3b82f6;
  --blue-bright:#60a5fa;
  --blue-pale:#bfdbfe;
  --white:#ffffff;
  --text-light:#e2e8f0;
  --text-muted:#94a3b8;
  --accent:#38bdf8;
  --neon-glow:0 0 20px rgba(56,189,248,0.5),0 0 40px rgba(56,189,248,0.2);
  --grad-hero:linear-gradient(135deg,#020617 0%,#0f172a 50%,#1e293b 100%);
  --grad-card:linear-gradient(145deg,rgba(30,41,59,0.7) 0%,rgba(15,23,42,0.8) 100%);
  --grad-btn:linear-gradient(90deg,#3b82f6 0%,#38bdf8 100%);
  --grad-text:linear-gradient(180deg,#ffffff 0%,#93c5fd 100%);
  --radius:20px;
  --glass-border:1px solid rgba(255,255,255,0.08);
  --shadow:0 15px 35px -5px rgba(0,0,0,0.5);
  /* Responsive Tokens */
  --section-pad: 100px 5vw;
  --container-gap: 4rem;
}
@media(max-width:768px){
  :root{
    --section-pad: 60px 20px;
    --container-gap: 2.5rem;
  }
}
@media(max-width:480px){
  :root{
    --section-pad: 40px 15px;
    --container-gap: 1.5rem;
  }
}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--blue-dark);
  color:var(--white);
  line-height:1.7;
  overflow-x:hidden;
  letter-spacing:0.3px;
}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--blue-dark)}
::-webkit-scrollbar-thumb{background:var(--blue-mid);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--blue-main)}
/* ── GLOBAL LOADER ── */
#global-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--blue-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-out;
}
#loader-quote {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  background: linear-gradient(90deg, #fff 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulse-quote 1.5s infinite alternate ease-in-out;
  text-align: center;
  padding: 0 20px;
}
@keyframes pulse-quote {
  0% { opacity: 0.5; filter: blur(2px) drop-shadow(0 0 10px rgba(56,189,248,0.2)); transform: scale(0.98); }
  100% { opacity: 1; filter: blur(0px) drop-shadow(0 0 25px rgba(56,189,248,0.8)); transform: scale(1.02); }
}


/* ── NAV ── */
nav {
  position:fixed;top:0;left:0;right:0;z-index:999;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;height:80px;
  background:rgba(2,6,23,0.6);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:var(--glass-border);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  width: 100%;
}
@media(max-width:480px){
  nav{padding: 0 15px; height: 64px;}
}
.nav-logo{
  font-size:1.6rem;font-weight:900;letter-spacing:-0.5px;
  background:var(--grad-btn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-decoration:none;position:relative;z-index:2;
}
.nav-links{display:flex;gap:2.5rem;list-style:none;position:relative;z-index:2}
.nav-links a{
  color:var(--text-light);text-decoration:none;font-size:0.95rem;font-weight:500;
  transition:all 0.3s;position:relative;padding-bottom:4px;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:right;transition:transform 0.4s cubic-bezier(0.86,0,0.07,1);
  box-shadow:0 0 10px var(--accent);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav-links a:hover,.nav-links a.active{color:var(--white);text-shadow:0 0 12px rgba(255,255,255,0.3)}
.nav-cta{
  background:var(--grad-btn);color:var(--white);border:none;
  padding:12px 28px;border-radius:50px;cursor:pointer;
  font-weight:700;font-size:0.95rem;transition:all 0.3s;
  text-decoration:none;position:relative;z-index:2;
  box-shadow:0 4px 15px rgba(56,189,248,0.3);
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-cta:hover{
  transform:translateY(-2px);box-shadow:0 8px 25px rgba(56,189,248,0.5);
}
.nav-links .nav-cta { display: none; }
@media(max-width:900px){
  nav > .nav-cta{display:none;} /* Hide in header on mobile */
  .nav-links .nav-cta{display:inline-flex; margin-top: 1rem; width: 100%; justify-content: center;}
}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;background:none;border:none;padding:4px;z-index:1000}
.hamburger span{display:block;width:28px;height:2px;background:var(--white);border-radius:2px;transition:all 0.3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px, 6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px, -6px)}

/* ── PAGE HERO ── */
.page-hero {
  min-height:450px;
  background:var(--grad-hero);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:150px 5vw 100px;
  position:relative;overflow:hidden;
}
@media(max-width:768px){
  .page-hero{padding: 120px 20px 60px;}
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></svg>') 0 0/40px 40px;
  mask-image:linear-gradient(to bottom,black 40%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,black 40%,transparent 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.25;pointer-events:none}
.blob-1{width:500px;height:500px;background:var(--blue-main);top:-150px;left:-100px;animation:drift1 20s ease-in-out infinite alternate}
.blob-2{width:400px;height:400px;background:var(--accent);bottom:-100px;right:-100px;animation:drift2 25s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,50px) scale(1.1)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-80px,-50px) scale(1.2)}}
.page-hero-content{position:relative;z-index:2;perspective:1000px}
.hero-badge{
  display:inline-block;
  background:rgba(56,189,248,0.1);
  border:1px solid rgba(56,189,248,0.3);
  color:var(--accent);
  font-size:0.85rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:8px 24px;border-radius:50px;margin-bottom:1.8rem;
  box-shadow:inset 0 0 15px rgba(56,189,248,0.1);
  backdrop-filter:blur(10px);
}
.page-title{
  font-size:clamp(2.5rem,5vw,4.5rem);font-weight:900;line-height:1.1;
  margin-bottom:1.5rem;letter-spacing:-1px;
  background:var(--grad-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.page-sub{
  font-size:1.15rem;color:var(--text-muted);max-width:650px;margin:0 auto;line-height:1.8;
  font-weight:400;
}

/* ── SECTIONS ── */
section{padding:var(--section-pad);position:relative;z-index:2;width:100%;}
.section-tag{
  display:inline-block;font-size:0.85rem;font-weight:800;text-transform:uppercase;
  letter-spacing:3px;color:var(--accent);margin-bottom:1rem;
}
.section-title{
  font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.2;
  margin-bottom:1.2rem;letter-spacing:-0.5px;
  background:var(--grad-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.section-sub{color:var(--text-muted);font-size:1.05rem;max-width:600px;line-height:1.8}
.text-center{text-align:center}
.text-center .section-sub{margin:0 auto}
.divider{width:80px;height:4px;background:var(--grad-btn);border-radius:2px;margin:1.5rem 0 2rem;box-shadow:0 0 10px var(--accent)}
.text-center .divider{margin:1.5rem auto 2rem}

/* ── 3D GLASS CARDS ── */
.grad-card,.step-card,.feat-card,.aud-card,.inst-card-big,.metric-card,.opp-card{
  background:var(--grad-card);
  border:var(--glass-border);
  border-radius:var(--radius);
  padding:2.5rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  transform-style:preserve-3d;
  position:relative;
  overflow:hidden;
}
.grad-card::before,.step-card::before,.feat-card::before,.aud-card::before,.inst-card-big::before,.metric-card::before,.opp-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 100%);
  opacity:0;transition:opacity 0.4s;pointer-events:none;
}
.grad-card:hover::before,.step-card:hover::before,.feat-card:hover::before,.aud-card:hover::before,.inst-card-big:hover::before,.metric-card:hover::before,.opp-card:hover::before{
  opacity:1;
}
/* Base Hover Effect (Enhanced by JS 3D tilt) */
.grad-card:hover,.step-card:hover,.feat-card:hover,.aud-card:hover,.inst-card-big:hover,.metric-card:hover,.opp-card:hover{
  border-color:rgba(56,189,248,0.4);
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.7),0 0 20px rgba(56,189,248,0.15);
}

.pill{
  display:inline-block;background:rgba(56,189,248,0.1);
  border:1px solid rgba(56,189,248,0.2);color:var(--accent);
  font-size:0.82rem;font-weight:600;padding:6px 16px;border-radius:50px;margin:0.25rem;
  backdrop-filter:blur(4px);
}

/* ── BUTTONS ── */
.btn-primary{
  background:var(--grad-btn);color:var(--white);
  padding:14px 40px;border-radius:50px;font-size:1.05rem;font-weight:700;
  text-decoration:none;transition:all 0.3s;
  box-shadow:0 8px 25px rgba(56,189,248,0.3);
  display:inline-flex; align-items: center; justify-content: center;
  position:relative;overflow:hidden;
  line-height: 1.4;
}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  transform:skewX(-20deg);transition:0.5s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(56,189,248,0.5)}
.btn-primary:hover::after{left:150%}
.btn-outline{
  border:2px solid var(--blue-main);color:var(--white);
  padding:12px 38px;border-radius:50px;font-size:1.05rem;font-weight:700;
  text-decoration:none;transition:all 0.3s;
  display:inline-flex; align-items: center; justify-content: center;
  background:rgba(59,130,246,0.05);backdrop-filter:blur(4px);
  line-height: 1.4;
}
.btn-outline:hover{background:rgba(59,130,246,0.15);box-shadow:0 0 20px rgba(59,130,246,0.3);border-color:var(--accent)}

.hero-btns{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}
@media(max-width:560px){
  .hero-btns{flex-direction:column;gap:1rem;width:100%;}
  .hero-btns .btn-primary,.hero-btns .btn-outline{width:100%;text-align:center;padding: 14px 24px;}
}

/* ── GRIDS ── */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem;margin-top:4rem}
.step-num{
  width:54px;height:54px;border-radius:14px;
  background:var(--grad-btn);display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:900;margin-bottom:1.2rem;box-shadow:var(--neon-glow);
}
.step-card h3,.feat-card h3,.aud-card h3,.inst-card-big h3,.opp-card h3{font-size:1.15rem;font-weight:800;margin-bottom:0.75rem;letter-spacing:0.5px}
.step-card p,.feat-card p,.aud-card p,.inst-card-big p,.opp-card p{font-size:0.95rem;color:var(--text-muted);line-height:1.7}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:4rem}
.feat-icon{
  font-size:2.5rem;margin-bottom:1.2rem;
  background:linear-gradient(135deg,#60a5fa,#38bdf8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(56,189,248,0.4));
}

.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:4rem}
.aud-icon{font-size:3rem;margin-bottom:1.2rem}

/* ── CALENDLY BOX (Futuristic replacing forms) ── */
.calendly-wrap, .cta-box {
  background:var(--grad-card);border:var(--glass-border);
  border-radius:var(--radius);padding:2.5rem;min-height:700px;
  display:flex;flex-direction:column;
  box-shadow:0 0 30px rgba(0,0,0,0.5);
  position:relative;
  width: 100%;
}
@media(max-width:768px){
  .calendly-wrap,.cta-box{padding: 1.5rem; min-height: 600px;}
  .calendly-wrap h3{font-size: 1.2rem !important;}
  .calendly-wrap p{font-size: 0.88rem !important;}
}
.calendly-placeholder,.calendly-placeholder-box,.calendly-inv-placeholder{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1.5rem;text-align:center;
  background:rgba(0,0,0,0.3);border:2px dashed rgba(56,189,248,0.3);
  border-radius:16px;padding:3rem;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
  transition:all 0.3s;
}
.calendly-placeholder:hover,.calendly-placeholder-box:hover,.calendly-inv-placeholder:hover{
  border-color:var(--accent);background:rgba(56,189,248,0.05);
}
.calendly-placeholder p{color:var(--text-muted);font-size:1rem}
.calendly-placeholder .cal-icon{font-size:4rem;margin-bottom:0.5rem;filter:drop-shadow(0 0 10px rgba(56,189,248,0.5))}

.cta-banner{
  padding: 80px 5vw; background: var(--blue-deep); text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cta-banner h2{font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; margin-bottom: 1rem;}
.cta-banner p{color: var(--text-muted); font-size: 1.1rem; max-width: 700px; margin: 0 auto 2rem;}
@media(max-width:768px){
  .cta-banner{padding: 60px 20px;}
}

/* ── FOOTER ── */
footer{
  background:rgba(2,6,23,0.98);border-top:1px solid rgba(255,255,255,0.05);
  padding:80px 5vw 40px;position:relative;overflow:hidden;
}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-main),transparent);
}
.footer-inner{max-width:1200px;margin:0 auto;position:relative;z-index:2}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem;
}
.footer-brand p{font-size:0.95rem;color:var(--text-muted);margin-top:1rem;max-width:300px;line-height:1.8}
.footer-col h4{font-size:0.95rem;font-weight:800;letter-spacing:1px;margin-bottom:1.5rem;color:var(--white)}
.footer-col a{display:block;font-size:0.95rem;color:var(--text-muted);text-decoration:none;margin-bottom:0.85rem;transition:all 0.2s}
.footer-col a:hover{color:var(--accent);transform:translateX(5px);text-shadow:0 0 8px rgba(56,189,248,0.4)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.05);padding-top:2rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;
}
.footer-bottom p{font-size:0.9rem;color:var(--text-muted)}
.footer-social{display:flex;gap:1rem}
.social-btn{
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:1.1rem;text-decoration:none;
  transition:all 0.3s;
}
.social-btn:hover{background:var(--grad-btn);color:var(--white);transform:translateY(-3px);box-shadow:var(--neon-glow);border-color:transparent}

/* ── TICKER / MARQUEE ── */
.ticker-wrap{
  overflow:hidden;background:rgba(0,0,0,0.3);border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);padding:18px 0;
  backdrop-filter:blur(10px);
}
.ticker{display:flex;gap:0;animation:ticker 40s linear infinite;width:max-content}
.ticker:hover{animation-play-state:paused}
.ticker-item{
  white-space:nowrap;padding:0 4rem;font-size:0.95rem;font-weight:700;
  color:var(--text-muted);display:flex;align-items:center;gap:1rem;
  letter-spacing:1px;text-transform:uppercase;
}
.ticker-item span{color:var(--accent);text-shadow:0 0 10px rgba(56,189,248,0.5)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── MISC / LAYOUT ── */
.contact-inner,.privacy-inner,.inst-split,.demo-layout,.invest-layout,.traction-inner,.contact-page-grid{
  display:grid;grid-template-columns:1fr 1.3fr;gap:var(--container-gap);align-items:start;
}
.contact-page-grid{grid-template-columns: 1fr 1.1fr; margin-top: 3rem;}
.contact-info-card,.contact-form-card{
  background:var(--grad-card);border:var(--glass-border);border-radius:var(--radius);padding:2.5rem;
}
.privacy-inner,.traction-inner{grid-template-columns:1fr 1fr}
.ea-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--container-gap);margin-top:3rem}
.ea-card{
  background:var(--grad-card);border:var(--glass-border);
  border-radius:var(--radius);padding:3rem;text-align:center;position:relative;overflow:hidden;
}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:3rem}
.perk{
  background:var(--grad-card);border:var(--glass-border);
  border-radius:var(--radius);padding:1.75rem;text-align:center;
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{height:70px}
  .nav-links{display:none;flex-direction:column;position:absolute;top:70px;left:0;right:0;background:rgba(2,6,23,0.98);padding:2rem 5vw;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(20px)}
  .nav-links.open{display:flex}
  .hamburger{display:flex}
  .contact-inner,.privacy-inner,.inst-split,.demo-layout,.invest-layout,.traction-inner,.contact-page-grid,.footer-grid,.ea-grid{grid-template-columns:1fr; gap: var(--container-gap)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .page-title{font-size:2.5rem}
  .section-title{font-size:2rem}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* --- COOKIE CONSENT BANNER --- */
.cookie-banner {
  position: fixed; bottom: 20px; left: 20px;
  width: calc(100% - 40px); max-width: 450px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px); padding: 20px;
  border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 16px;
  z-index: 9999; transform: translateY(150%);
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: var(--text-light); font-size: 0.9rem;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { margin: 0; line-height: 1.5; color: #cbd5e1; }
.cookie-banner-btns { display: flex; gap: 12px; }
.cookie-btn {
  padding: 10px 20px; border-radius: 8px; font-size: 0.9rem;
  font-weight: 700; cursor: pointer; transition: all 0.3s; border: none;
  flex: 1; text-align: center;
}
.cookie-btn-accept { background: var(--accent); color: #fff; }
.cookie-btn-accept:hover { background: #0284c7; transform: translateY(-2px); }
.cookie-btn-decline { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.cookie-btn-decline:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
