:root {
  --color-primary: #c8965f;
  --color-primary-dark: #8a6239;
  --color-primary-light: #e8c9a0;
  --color-accent: #29b6e8;
  --color-accent-dark: #1a8fbd;
  --color-bg: #faf6f0;
  --color-bg-alt: #f2ebe0;
  --color-dark: #241d14;
  --color-muted: #6b5f4f;
  --shadow-soft: 0 20px 50px -20px rgba(36, 29, 20, 0.25);
  --shadow-card: 0 10px 30px -12px rgba(36, 29, 20, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-bg);
  color: var(--color-dark);
  overflow-x: hidden;
}

.font-display {
  font-family: "Manrope", sans-serif;
}

/* Background texture */
.bg-noise {
  background-image: radial-gradient(circle at 20% 20%, rgba(200, 150, 95, 0.08), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(41, 182, 232, 0.08), transparent 45%);
}

/* Nav */
.nav-blur {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(250, 246, 240, 0.75);
}

/* Barcode scan line animation */
@keyframes scanline {
  0% {
    transform: translateY(-6px);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(150px);
    opacity: 0;
  }
}

.scan-line {
  animation: scanline 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Float animation for hero art */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

.float-anim {
  animation: float 6s ease-in-out infinite;
}

.float-anim-delay {
  animation: float 6s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* Phone mockup frame */
.phone-frame {
  border-radius: 44px;
  border: 10px solid var(--color-dark);
  box-shadow: var(--shadow-soft);
  background: var(--color-dark);
}

.phone-notch {
  width: 90px;
  height: 22px;
  background: var(--color-dark);
  border-radius: 0 0 16px 16px;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons */
.btn-primary {
  background: var(--color-dark);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  background: #000;
}

.btn-outline {
  border: 1.5px solid rgba(36, 29, 20, 0.15);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.btn-outline:hover {
  border-color: var(--color-dark);
  background: rgba(36, 29, 20, 0.04);
}

/* Feature card hover */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: rgba(200, 150, 95, 0.4);
}

/* Mobile menu */
.mobile-menu {
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Marquee for "coming soon" strip */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  animation: marquee 22s linear infinite;
  width: max-content;
}

/* Dummy screenshot UI blocks */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 100%);
  background-size: 200% 100%;
  animation: shimmer 2.5s ease-in-out infinite;
}

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

/* Toast */
.toast {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}