/* Premium dark theme with glassmorphism and subtle motion */
:root{
  --bg:#070B17;
  --card:#0C1326CC;
  --line:#1C2440;
  --fg:#E7ECF5;
  --muted:#9BA7BF;
  --brand:#7CC9FF;
  --brand2:#3EF3C8;
  --danger:#F87171;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding:24px;
  backdrop-filter:saturate(120%) blur(8px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  transform: translateY(0);
}
.site-header.header-hidden{
  transform: translateY(-100%);
}
.site-header.header-scrolled{
  background:rgba(7,11,23,0.85);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-weight:800;letter-spacing:.2px}
.brand .logo{color:var(--brand)}
.brand .ai-tag{color:var(--brand2);font-weight:800}
.nav{display:flex;gap:14px;align-items:center}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--fg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:14px;font-weight:700;text-decoration:none;
  border:1px solid var(--line);box-shadow:var(--shadow);transition:all .2s ease;
}
.btn--ghost{background:transparent;color:var(--fg)}
.btn--ghost:hover{border-color:#28407A}
.btn--primary{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#041022;border:0;
  box-shadow:0 8px 28px rgba(60,180,255,.25);
}
.btn--primary:hover{transform:translateY(-1px)}
.btn--link{background:transparent;border:0;color:var(--fg);text-decoration:underline}
.btn.full{width:100%}

.bg-wrap{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-gradient{
  position:absolute;inset:-15% -10% 0 -10%;
  background:radial-gradient(1200px 700px at 20% -10%, rgba(124,201,255,.25), transparent 60%),
             radial-gradient(1000px 600px at 90% 10%, rgba(62,243,200,.12), transparent 60%),
             linear-gradient(180deg,#060912,#0A0F20 60%, #0B1225);
}
.bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(transparent 95%, rgba(255,255,255,.05) 96%),
                   linear-gradient(90deg, transparent 95%, rgba(255,255,255,.05) 96%);
  background-size:24px 24px;
  mask-image:radial-gradient(60% 60% at 50% 30%, #000 60%, transparent 100%);
}
.bg-orb{
  position:absolute;filter:blur(40px);opacity:.5;border-radius:50%;
  animation: float 18s ease-in-out infinite;
}
.orb-a{width:320px;height:320px;background:radial-gradient(circle at 30% 30%, #5FB8FF, transparent 60%);top:10%;left:-6%}
.orb-b{width:360px;height:360px;background:radial-gradient(circle at 70% 70%, #3EF3C8, transparent 65%);bottom:-8%;right:-6%}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}

/* ===== PREMIUM ANIMATIONS ===== */
/* Fade-in base */
.fade-in{
  opacity:0;
  animation: fadeIn 0.8s ease-out forwards;
}
.fade-in.is-visible{
  opacity:1;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* Fade-in-up for hero */
.fade-in-up{
  animation: fadeInUp 1s ease-out forwards;
}

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

/* Shimmer effect for gradient text */
.gradient.shimmer{
  background-size:200% auto;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer{
  0%{background-position:0% center}
  100%{background-position:200% center}
}

/* Enhanced card hover effects */
.glass, .step, .feature{
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.glass:hover, .step:hover, .feature:hover{
  border-color:rgba(124,201,255,0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(124,201,255,0.1);
}

/* Device enhanced 3D effect */
.device{
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Button enhanced animation */
.btn--primary{
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  will-change: transform;
}

.btn--primary::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn--primary:hover::before{
  left:100%;
}

.btn--primary:active{
  transform:scale(0.98);
}

/* Ghost button glow on hover */
.btn--ghost{
  position:relative;
  transition: all 0.3s ease;
}

.btn--ghost:hover{
  box-shadow: 0 0 20px rgba(124,201,255,0.3);
  border-color:var(--brand);
  color:var(--brand);
}

/* Enhanced orb animations */
.bg-orb{
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Cue card pulse */
.cue-card{
  animation: subtlePulse 4s ease-in-out infinite;
}

@keyframes subtlePulse{
  0%,100%{box-shadow: 0 0 20px rgba(124,201,255,0.1)}
  50%{box-shadow: 0 0 30px rgba(124,201,255,0.2)}
}

/* Badge floating */
.badge{
  animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* Smooth scrolling */
html{
  scroll-behavior: smooth;
}

/* Loading state prevention */
.hero-copy > *{
  animation: fadeIn 0.6s ease-out forwards;
  opacity:0;
}

.hero-copy .eyebrow{animation-delay:0.1s}
.hero-copy h1{animation-delay:0.2s}
.hero-copy .sub{animation-delay:0.3s}
.hero-copy .hero-points{animation-delay:0.4s}
.hero-copy .cta-row{animation-delay:0.5s}
.hero-copy .trust{animation-delay:0.6s}

/* Hero visual entrance */
.hero-visual{
  opacity:0;
  animation: fadeIn 1s ease-out 0.4s forwards;
}

/* Step number pop */
.step-nr{
  transition: all 0.3s ease;
}

.step:hover .step-nr{
  transform: scale(1.2) rotate(5deg);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#041022;
}

/* Quote entrance */
.quote{
  opacity:0;
  animation: fadeIn 0.8s ease-out 0.3s forwards;
}

/* Nav link hover effect */
.nav a{
  position:relative;
  transition: color 0.2s ease;
}

.nav a::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;right:0;
  height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transition: transform 0.3s ease;
}

.nav a:hover::after{
  transform:scaleX(1);
}

/* Form focus glow */
input:focus, select:focus{
  animation: inputGlow 2s ease-in-out infinite;
}

@keyframes inputGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(42,123,255,.2)}
  50%{box-shadow:0 0 0 3px rgba(42,123,255,.3), 0 0 20px rgba(42,123,255,0.1)}
}

/* Performance optimizations */
.bg-wrap, .bg-orb, .device, .glass{
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html{scroll-behavior: auto}
}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:100px 0 10px}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);background:#0E162FCC;border:1px solid var(--line);padding:6px 10px;border-radius:999px;margin-bottom:12px}
.hero h1{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:48px;line-height:1.05;margin:0 0 12px 0}
.gradient{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);max-width:60ch;margin:0 0 14px}
.hero-points{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.tick{color:#34D399;margin-right:10px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.trust{color:var(--muted);font-size:13px;margin-top:10px}

.hero-visual{position:relative}
.device{width:100%;max-width:452px;margin:0 auto;border-radius:24px;padding:12px;background:linear-gradient(180deg,#121A33,#0C142C);border:1px solid #1E2A4A;box-shadow:0 40px 100px rgba(0,0,0,.45), inset 0 0 40px rgba(124,201,255,.04)}
.device-screen{position:relative;border-radius:16px;background:linear-gradient(180deg,#0B1226,#0A1020);border:1px solid #1B2747;overflow:hidden;display:flex}
.demo-image{width:100%;height:auto;display:block}
.badge{position:absolute;top:20px;right:20px;background:#0E1838;border:1px solid #21305A;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted);z-index:10}
.video-skeleton{flex:1;border-radius:12px;background:linear-gradient(135deg,#0E1730,#0A1020);border:1px solid #1C2747}
.cue-card{border-radius:12px;padding:12px}
.cue-title{font-weight:700;margin-bottom:4px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-radius:12px;padding:10px}
.metrics div{display:grid;gap:2px;text-align:center}
.metrics span{color:var(--muted);font-size:12px}
.metrics strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:18px}

.floating-card{position:absolute;left:-40px;bottom:-30px;min-width:240px;padding:14px;border-radius:14px;box-shadow:var(--shadow);animation:float 15s ease-in-out infinite}
.floating-card .fc-title{font-weight:800;margin-bottom:6px}

.section{padding:36px 0}
.section-title{font-family:"Space Grotesk",Inter,sans-serif;font-size:28px;margin:0 0 16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{padding:16px;border-radius:14px;border:1px solid var(--line);backdrop-filter: blur(8px);}
.step-nr{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#0E1730;border:1px solid #1E2A4A;color:var(--muted);font-weight:700;margin-bottom:8px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{padding:16px;border-radius:14px;border:1px solid var(--line)}
.quote{grid-column:1/-1;padding:16px;border-radius:14px;border:1px dashed #2A3B6C;font-style:italic;color:var(--muted)}

.waitlist .card{max-width:560px;margin:0 auto;margin-top:8px}
.form-row{display:grid;gap:6px;margin-bottom:10px}
input,select{background:#0B1225;color:var(--fg);border:1px solid #1D2A49;border-radius:12px;padding:12px 12px;outline:none}
input:focus,select:focus{border-color:#2A7BFF;box-shadow:0 0 0 3px rgba(42,123,255,.2)}
.consent{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:14px;margin:8px 0}
.consent a{color:var(--fg)}
.status{min-height:20px;color:var(--muted);margin-top:4px}

.site-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:10px;padding-top:16px}
.footer-links a{color:var(--muted);text-decoration:none;margin-left:12px}
.footer-links a:hover{color:var(--fg)}

/* Glass utility */
.glass{
  background:linear-gradient(180deg, rgba(12,19,38,.75), rgba(10,16,32,.55));
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(120%);
}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:22px;padding-top:100px}
  .floating-card{position:relative;left:0;bottom:0;margin-top:10px}
  .steps,.features{grid-template-columns:1fr}
  .hero h1{font-size:40px}
}
@media (max-width:520px){
  .hero h1{font-size:34px}
  .nav{display:none}
  .site-header{padding:16px}
}
.ml-form-embedBody textarea[name="fields[company]"],
.ml-form-embedBody label[for="fields_company"]{ display:none !important; }
/* --- Mobile polish --- */
@media (max-width: 640px){
  html, body { overflow-x: hidden; }
  .container { padding: 18px; }
  .section { padding: 28px 0; }
  .hero { grid-template-columns: 1fr; gap: 18px; padding: 80px 0 22px; }
  .hero h1 { font-size: 32px; line-height: 1.15; }
  .sub { font-size: 15px; }
  .cta-row { gap: 10px; }
  .hero-visual { margin-top: 4px; }

  /* Cards en formulieren ademen meer */
  .glass, .card { border-radius: 16px; }
  .waitlist .ml-wrapper, .waitlist .card { margin: 10px auto 0; }
  input, select { padding: 12px; font-size: 16px; } /* voorkomt iOS zoom */
  .btn, .btn--primary, .btn--ghost { padding: 12px 14px; border-radius: 14px; }

  /* Extra marge zodat content niet aan de rand plakt */
  .footer, header.site-header { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 400px){
  .container { padding: 14px; }
  .hero h1 { font-size: 28px; }
}