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

:root {
  --bg: #f9fafb;
  --card-bg: #ffffff;
  --text-main: #0a0a0a;
  --text-muted: #64748b;
  --border: rgba(100, 116, 139, 0.15);
  --accent: #0f172a;
}

html {
  font-family: 'Outfit', sans-serif;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: var(--text-main);
}

body {
  overflow-x: hidden;
}

/* Liquid Glass / Refraction panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
              0 20px 40px -15px rgba(0,0,0,0.05);
}

/* Bento Cards (Bento 2.0 specs) */
.bento-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 2.5rem;
  padding: 2.5rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.02);
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.06);
  border-color: rgba(100, 116, 139, 0.3);
}

/* Micro-interaction: Active Button tactile feedback */
.btn-tactile {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-tactile:active {
  transform: translateY(2px) scale(0.97);
}

/* Background grid pattern */
.bg-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}

/* Hero Asymmetry styling */
.hero-img-mask {
  mask-image: linear-gradient(to right, transparent, black 25%);
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%);
}

.opacity-gradient-img {
  mask-image: linear-gradient(to top, transparent, black 60%);
  -webkit-mask-image: linear-gradient(to top, transparent, black 60%);
}

/* Breathing indicator */
@keyframes breathing {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}
.status-dot {
  animation: breathing 3s infinite ease-in-out;
}

/* Premium Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, #0a0a0a 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section styling */
section {
  position: relative;
  z-index: 10;
}