@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..800&family=JetBrains+Mono:ital,wght@0,400..600;1,400..600&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Premium Apple/Linear Light Palette */
  --bg-page: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-card: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --accent-color: #4F46E5;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  overflow-x: hidden;
}

.font-mono {
  font-family: var(--font-mono);
}

/* ========================================================================== */
/* FLOATING DYNAMIC ISLAND NAVBAR (Subtle Shrink on Scroll)                    */
/* ========================================================================== */
.floating-island-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 9999px;
  width: calc(100% - 32px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: top, max-width, padding, box-shadow, background-color;
}

/* State 1: Top of page (Larger, relaxed) */
.floating-island-nav.island-top {
  top: 22px;
  max-width: 960px;
  padding: 12px 24px;
  box-shadow: 0 8px 25px -8px rgba(15, 23, 42, 0.06);
}

/* State 2: Scrolled (Subtly compacted, snug & refined) */
.floating-island-nav.island-scrolled {
  top: 14px;
  max-width: 840px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(203, 213, 225, 0.9);
  box-shadow: 
    0 14px 35px -10px rgba(15, 23, 42, 0.12),
    0 4px 10px -2px rgba(15, 23, 42, 0.04);
}

/* Brand Logo shrink transition */
.island-logo-img {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-island-nav.island-top .island-logo-img {
  width: 32px;
  height: 32px;
}
.floating-island-nav.island-scrolled .island-logo-img {
  width: 28px;
  height: 28px;
}

/* CTA Button shrink transition */
.island-cta-btn {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-island-nav.island-top .island-cta-btn {
  padding: 8px 18px;
  font-size: 0.8125rem; /* 13px */
}
.floating-island-nav.island-scrolled .island-cta-btn {
  padding: 6px 14px;
  font-size: 0.75rem; /* 12px */
}

/* Navigation Links spacing transition */
.island-nav-links {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-island-nav.island-top .island-nav-links {
  gap: 28px;
}
.floating-island-nav.island-scrolled .island-nav-links {
  gap: 20px;
}

/* Premium Buttons */
.btn-dark {
  background: #0F172A;
  color: #FFFFFF;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.btn-dark:hover {
  background: #1E293B;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.btn-dark:active {
  transform: translateY(0);
}

/* ========================================================================== */
/* V-SHAPED DUAL PHONE HERO CONTAINER                                         */
/* ========================================================================== */
.hero-v-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 30px 10px;
}

.v-phone-item {
  position: relative;
  width: 220px;
  height: 450px;
  background: #0B0F17;
  border-radius: 40px;
  padding: 7px;
  box-shadow: 
    0 30px 70px -15px rgba(15, 23, 42, 0.22),
    0 10px 25px -5px rgba(15, 23, 42, 0.1),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.15);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .v-phone-item {
    width: 250px;
    height: 510px;
    border-radius: 46px;
    padding: 8px;
  }
}

@media (min-width: 1024px) {
  .v-phone-item {
    width: 265px;
    height: 540px;
    border-radius: 48px;
    padding: 9px;
  }
}

/* Phone Left (-6° angle) */
.v-phone-item-left {
  transform: rotate(-6deg) translateY(12px) translateX(15px);
  z-index: 10;
}

/* Phone Right (+6° angle) */
.v-phone-item-right {
  transform: rotate(6deg) translateY(12px) translateX(-15px);
  z-index: 20;
}

.hero-v-wrapper:hover .v-phone-item-left {
  transform: rotate(-8deg) translateY(6px) translateX(5px);
}

.hero-v-wrapper:hover .v-phone-item-right {
  transform: rotate(8deg) translateY(6px) translateX(-5px);
}

.v-screen {
  width: 100%;
  height: 100%;
  background: #08090B;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
}

@media (min-width: 640px) {
  .v-screen {
    border-radius: 38px;
  }
}

.v-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  background: #000;
  border-radius: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
}

.v-island-cam {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #151515;
  border: 1px solid #282828;
}

.v-island-sensor {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a0a14;
}

/* Ambient gradient behind hero */
.hero-glow-bg {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(244, 114, 182, 0.04) 50%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Subtle Equalizer */
.eq-bar {
  width: 3px;
  border-radius: 2px;
  background: #4F46E5;
  animation: eq-bounce 1.2s infinite ease-in-out;
}

.eq-bar:nth-child(1) { height: 12px; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 22px; animation-delay: 0.3s; }
.eq-bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }
.eq-bar:nth-child(4) { height: 28px; animation-delay: 0.4s; }
.eq-bar:nth-child(5) { height: 18px; animation-delay: 0.15s; }
.eq-bar:nth-child(6) { height: 24px; animation-delay: 0.35s; }
.eq-bar:nth-child(7) { height: 10px; animation-delay: 0.25s; }

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

.is-paused .eq-bar {
  animation-play-state: paused;
  transform: scaleY(0.3);
  opacity: 0.3;
}