@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: 'Alexandria', sans-serif;
  letter-spacing: 0.2px;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  /* Fix for Instagram in-app browser safe areas */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

:lang(en) {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0px;
}

/* ── Glassmorphism & Bento ──────────────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glass-card {
  background: rgba(17, 17, 19, 0.6);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 40px -10px rgba(0,0,0,0.5);
}

.bento-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 40px -20px rgba(34, 211, 238, 0.15);
  transform: translateY(-4px);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,0.5); }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes blob-float {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
.animate-blob      { animation: blob-float 15s infinite alternate ease-in-out; }
.animate-blob-slow { animation: blob-float 20s infinite alternate-reverse ease-in-out; }

/* ── RESPONSIVE: Navbar ─────────────────────────────────────────────────── */
/* On very small phones, reduce navbar padding and push it a bit tighter */
@media (max-width: 480px) {
  header {
    top: 0.75rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 1rem !important;
  }
  header .font-black { font-size: 1rem !important; }
}

/* ── RESPONSIVE: Hero Section ───────────────────────────────────────────── */
/* Fluid font sizes using clamp() — scale gracefully across all screens */
.hero-title {
  font-size: clamp(2.2rem, 9vw, 7rem);
  line-height: 1.1;
}
.hero-subtitle {
  font-size: clamp(0.95rem, 3.5vw, 1.5rem);
}
.hero-btn {
  font-size: clamp(0.9rem, 3vw, 1.25rem);
  padding: clamp(0.75rem, 2.5vw, 1.25rem) clamp(1.5rem, 5vw, 2.5rem);
}

/* ── RESPONSIVE: Products Grid ──────────────────────────────────────────── */
/* 1 column on phones, 2 on tablets, 3 on desktop */
#products-container {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 540px) {
  #products-container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  #products-container { grid-template-columns: repeat(3, 1fr); }
}

/* ── RESPONSIVE: Cards ──────────────────────────────────────────────────── */
/* Give the image container a fixed height so images always show */
.glass-card .aspect-square {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}
.glass-card .aspect-square > * {
  width: 100%;
  height: 100%;
}
.glass-card .aspect-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 539px) {
  .glass-card .aspect-square {
    height: 180px;
  }
}

/* ── RESPONSIVE: Services Bento Grid ───────────────────────────────────── */
@media (max-width: 767px) {
  .bento-card { border-radius: 1.25rem; }
  /* Stack all bento cards on mobile */
  .grid.grid-cols-1.md\\:grid-cols-4 { grid-template-columns: 1fr !important; }
}

/* ── RESPONSIVE: Modals ─────────────────────────────────────────────────── */
/* Cart bottom-sheet: slides up on mobile, centred popup on desktop */
#cart-modal > div:last-child {
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
#cart-modal.hidden > div:last-child {
  transform: translateY(100%);
}
@media (min-width: 640px) {
  #cart-modal > div:last-child {
    transform: none !important;
  }
}

/* Global: never allow body to scroll horizontally */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Inside any modal: clamp all children */
#cart-modal, #cart-modal * {
  box-sizing: border-box;
  max-width: 100%;
}

/* ── RESPONSIVE: About Stats ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .about-stats { flex-direction: column; gap: 1.5rem; }
}

/* ── RESPONSIVE: Footer ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  footer .flex { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ── INSTAGRAM IN-APP BROWSER FIXES ────────────────────────────────────── */
/* Instagram WebView doesn't always respect viewport units correctly */
@supports (-webkit-touch-callout: none) {
  /* iOS/WebKit: ensure 100vh fills the visual viewport */
  .min-h-screen { min-height: -webkit-fill-available; }
}

/* Fix tap highlight on mobile */
a, button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Prevent text selection on interactive elements */
button { user-select: none; -webkit-user-select: none; }

/* Images: prevent overflow, keep block formatting, but never force height */
img { max-width: 100%; display: block; }
/* Exception: images inside card containers must fill their parent fully */
.glass-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── RESPONSIVE: Typography clamps (global) ─────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: clamp(2rem, 10vw, 4rem) !important; }
  h2 { font-size: clamp(1.5rem, 7vw, 2.5rem) !important; }
  h3 { font-size: clamp(1.1rem, 5vw, 1.75rem) !important; }
  p  { font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important; }
}

/* ── RESPONSIVE: Padding/spacing ───────────────────────────────────────── */
@media (max-width: 640px) {
  section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .px-6   { padding-left: 1rem !important; padding-right: 1rem !important; }
  .p-12, .p-16 { padding: 1.5rem !important; }
}

/* ── RGB Animated Text ──────────────────────────────────────────────────── */
@keyframes rgb-cycle {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.rgb-text {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7700,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rgb-cycle 2s linear infinite;
  font-weight: inherit;
  display: inline;
}