/* Bedrom Static Site - Complete Styles */
:root {
  --bg: hsl(45, 20%, 96%);
  --fg: hsl(20, 15%, 15%);
  --card: hsl(42, 25%, 98%);
  --muted: hsl(20, 8%, 45%);
  --border: hsl(35, 20%, 85%);
  --amber-light: hsl(42, 85%, 70%);
  --amber: hsl(38, 65%, 55%);
  --amber-dark: hsl(35, 45%, 35%);
  --wood-light: hsl(35, 35%, 75%);
  --wood: hsl(28, 25%, 55%);
  --wood-dark: hsl(20, 20%, 25%);
  --cream: hsl(45, 40%, 94%);
  --charcoal: hsl(20, 15%, 15%);
  --shadow-elegant: 0 4px 20px hsla(20, 15%, 15%, 0.1);
  --shadow-luxury: 0 20px 60px -12px hsla(20, 20%, 25%, 0.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Navigation */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#navbar.scrolled {
  background: hsla(45, 20%, 96%, 0.95);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
}
.nav-container {
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.nav-brand { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo-svg { height: 24px; transition: all 0.3s; filter: brightness(0) invert(1); }
#navbar.scrolled .nav-logo-svg { filter: none; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  text-decoration: none; font-weight: 500; color: white; transition: color 0.2s;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
#navbar.scrolled .nav-links a { color: var(--fg); text-shadow: none; }
.nav-links a:hover { color: var(--amber-light); }
#navbar.scrolled .nav-links a:hover { color: var(--amber); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.lang-switcher { display: flex; align-items: center; gap: 0.25rem; }
.lang-btn {
  background: none; border: none; padding: 0.25rem 0.5rem; cursor: pointer;
  font-weight: 500; font-size: 0.875rem; color: white; border-radius: 0.375rem;
}
#navbar.scrolled .lang-btn { color: var(--fg); }
.lang-btn.active { background: var(--charcoal); color: white; }
#navbar.scrolled .lang-btn.active { background: var(--charcoal); color: white; }
.lang-sep { color: var(--muted); }
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: white; }
#navbar.scrolled .mobile-menu-btn { color: var(--fg); }
.mobile-menu { display: none; padding: 1rem; background: hsla(45,20%,96%,0.95); backdrop-filter: blur(12px); }
.mobile-menu a { display: block; padding: 0.5rem 0; text-decoration: none; color: var(--fg); font-weight: 500; }
.mobile-menu.open { display: block; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .lang-switcher { display: none; }
  .mobile-menu-btn { display: block; }
}

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay-1 { position: absolute; inset: 0; background: linear-gradient(to right, hsla(20,15%,15%,0.7), hsla(20,15%,15%,0.5), transparent); }
.hero-overlay-2 { position: absolute; inset: 0; background: linear-gradient(to top, hsla(20,15%,15%,0.6), hsla(20,15%,15%,0.2), hsla(20,15%,15%,0.4)); }
.hero-overlay-3 { position: absolute; inset: 0; background: linear-gradient(to bottom, hsla(20,15%,15%,0.5), transparent, transparent); }
.hero-content {
  position: relative; z-index: 10; text-align: center; color: white; padding: 3rem 1rem;
  max-width: 56rem; margin: 0 auto;
  backdrop-filter: blur(2px); background: rgba(0,0,0,0.05); border-radius: 1.5rem;
}
.hero-logo-svg { height: 64px; margin-bottom: 1.5rem; filter: brightness(0) invert(1); drop-shadow: 0 4px 12px rgba(0,0,0,0.9); }
.hero-tagline { font-size: 1.25rem; font-weight: 300; color: var(--amber-light); margin-bottom: 0.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.hero-subtitle { font-size: 1.125rem; color: hsla(45,40%,94%,0.9); max-width: 42rem; margin: 0 auto 2rem; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 3rem; }
.hero-alt { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; color: hsla(45,40%,94%,0.8); text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: none; border: none; color: hsla(255,255,255,0.8); cursor: pointer;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}
@media (min-width: 768px) { .hero-title { font-size: 6rem; } .hero-actions { flex-direction: row; justify-content: center; } }

/* Buttons */
.btn-primary {
  background: var(--amber); color: var(--charcoal); border: none; padding: 0.75rem 2rem;
  font-size: 1.125rem; font-weight: 600; border-radius: 0.75rem; cursor: pointer;
  transition: all 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.btn-primary:hover { background: var(--amber-dark); transform: scale(1.05); color: white; }
.btn-outline {
  background: none; color: var(--amber); border: 1px solid var(--amber); padding: 0.5rem 1.5rem;
  font-weight: 500; border-radius: 0.75rem; cursor: pointer; transition: all 0.3s;
}
.btn-outline:hover { background: var(--amber); color: var(--charcoal); }

/* Sections */
.section { padding: 5rem 0; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { font-size: 2.5rem; font-weight: 700; color: var(--charcoal); margin-bottom: 1.5rem; }
.section-subtitle { font-size: 1.125rem; color: var(--muted); max-width: 42rem; margin: 0 auto; }
.header-line { width: 6rem; height: 4px; background: var(--amber); margin: 1.5rem auto 0; border-radius: 2px; }
@media (min-width: 768px) { .section-header h2 { font-size: 3rem; } }

/* Story */
.story-section { background: linear-gradient(to bottom, var(--bg), hsla(35, 45%, 88%, 0.3)); }
.story-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .story-grid { grid-template-columns: 1fr 1fr; } }
.story-text h2 { font-size: 2.5rem; font-weight: 700; color: var(--charcoal); margin-bottom: 1.5rem; }
.story-desc { font-size: 1.125rem; color: var(--muted); line-height: 1.7; margin-bottom: 2rem; }
.feature-cards { display: flex; flex-direction: column; gap: 1.5rem; }
.feature-card {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem;
  background: hsla(42,25%,98%,0.5); border-radius: 0.75rem; box-shadow: var(--shadow-elegant);
  backdrop-filter: blur(4px); transition: box-shadow 0.3s;
}
.feature-card:hover { box-shadow: var(--shadow-luxury); }
.feature-icon { font-size: 1.5rem; padding: 0.5rem; background: hsla(38,65%,55%,0.1); border-radius: 0.5rem; }
.feature-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin-bottom: 0.5rem; }
.feature-card p { color: var(--muted); font-size: 0.9375rem; }
.story-image-wrap { position: relative; }
.story-image-container { aspect-ratio: 4/3; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-luxury); position: relative; }
.story-image-container img { width: 100%; height: 100%; object-fit: cover; }
.story-image-overlay { position: absolute; inset: 0; background: linear-gradient(to top, hsla(20,15%,15%,0.3), transparent); }
.story-brand-badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--amber);
  color: var(--charcoal); padding: 1.5rem; border-radius: 1rem; box-shadow: var(--shadow-luxury);
  transform: rotate(3deg); transition: transform 0.3s; text-align: center;
}
.story-brand-badge:hover { transform: rotate(0deg); }
.badge-logo { height: 48px; width: 48px; margin-bottom: 0.5rem; }
.story-brand-badge p { font-size: 0.875rem; font-weight: 700; }

/* Process */
.process-section { background: hsla(35, 35%, 75%, 0.2); }
.process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
.process-card {
  text-align: center; padding: 2rem; background: hsla(42,25%,98%,0.8);
  border-radius: 0.75rem; box-shadow: var(--shadow-elegant); backdrop-filter: blur(4px);
  transition: box-shadow 0.3s;
}
.process-card:hover { box-shadow: var(--shadow-luxury); }
.process-icon-wrap { position: relative; margin-bottom: 1.5rem; display: inline-block; }
.process-icon {
  width: 64px; height: 64px; background: hsla(38,65%,55%,0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  font-size: 2rem; transition: background 0.3s;
}
.process-card:hover .process-icon { background: hsla(38,65%,55%,0.2); }
.process-number {
  position: absolute; top: -8px; right: -8px; width: 32px; height: 32px;
  background: var(--charcoal); color: var(--cream); font-size: 0.75rem; font-weight: 700;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.process-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin-bottom: 0.75rem; }
.process-card p { color: var(--muted); font-size: 0.875rem; }
.process-image-wrap { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-luxury); aspect-ratio: 21/9; }
.process-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.process-image-overlay { position: absolute; inset: 0; background: linear-gradient(to right, hsla(20,15%,15%,0.5), transparent, hsla(20,15%,15%,0.5)); }
.process-image-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }
.process-image-tagline { font-size: 1.25rem; font-weight: 300; color: var(--amber-light); margin-bottom: 0.5rem; }
.process-image-desc { font-size: 0.9375rem; color: hsla(45,40%,94%,0.9); max-width: 28rem; text-align: center; }

/* Team */
.team-section { background: linear-gradient(to bottom, var(--bg), hsla(35,35%,75%,0.1)); }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card {
  background: hsla(42,25%,98%,0.5); border-radius: 0.75rem; overflow: hidden;
  box-shadow: var(--shadow-elegant); backdrop-filter: blur(4px); transition: all 0.3s;
}
.team-card:hover { box-shadow: var(--shadow-luxury); }
.team-image { aspect-ratio: 1; overflow: hidden; }
.team-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.team-card:hover .team-image img { transform: scale(1.05); }
.team-info { padding: 1.5rem; }
.team-info h3 { font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin-bottom: 0.25rem; }
.team-role { color: var(--amber); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.75rem; }
.team-bio { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.team-cta {
  text-align: center; margin-top: 4rem; max-width: 42rem; margin-left: auto; margin-right: auto;
  background: hsla(38,65%,55%,0.05); border-radius: 0.75rem; padding: 2rem;
  box-shadow: var(--shadow-luxury); backdrop-filter: blur(4px);
}
.team-cta h3 { font-size: 1.5rem; font-weight: 600; color: var(--charcoal); margin-bottom: 1rem; }
.team-cta p { color: var(--muted); margin-bottom: 1.5rem; }

/* News */
.news-section { background: linear-gradient(to bottom, var(--bg), hsla(35,35%,75%,0.1)); }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card {
  background: hsla(42,25%,98%,0.5); border-radius: 0.75rem; overflow: hidden;
  box-shadow: var(--shadow-elegant); backdrop-filter: blur(4px); transition: all 0.3s;
}
.news-card:hover { box-shadow: var(--shadow-luxury); }
.news-image { aspect-ratio: 1; overflow: hidden; }
.news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.news-card:hover .news-image img { transform: scale(1.05); }
.news-info { padding: 1.5rem; }
.news-info h3 { font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin-bottom: 0.25rem; }
.news-info p { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }

/* Contact */
.contact-section { background: linear-gradient(to bottom, hsla(35,35%,75%,0.1), var(--bg)); }
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-card {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem;
  background: hsla(42,25%,98%,0.5); border-radius: 0.75rem; box-shadow: var(--shadow-elegant);
  backdrop-filter: blur(4px);
}
.contact-card.small { flex: 1; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-icon { font-size: 1.25rem; padding: 0.5rem; background: hsla(38,65%,55%,0.1); border-radius: 0.5rem; }
.contact-card h3, .contact-card h4 { font-weight: 600; color: var(--charcoal); margin-bottom: 0.5rem; }
.contact-card h4 { font-size: 0.875rem; }
.contact-card p { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.social-links { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.social-btn {
  padding: 0.5rem 1rem; background: hsla(38,65%,55%,0.1); color: var(--amber);
  border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 500; font-size: 0.875rem;
  text-decoration: none; transition: all 0.3s;
}
.social-btn:hover { background: var(--amber); color: var(--charcoal); }
.contact-map {
  background: hsla(42,25%,98%,0.8); border-radius: 0.75rem; padding: 2rem;
  box-shadow: var(--shadow-luxury); backdrop-filter: blur(4px);
}
.contact-map h3 { font-size: 1.5rem; font-weight: 600; color: var(--charcoal); margin-bottom: 1.5rem; }
.map-container { aspect-ratio: 16/9; border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow-luxury); }

/* Footer */
.footer { background: var(--charcoal); color: var(--cream); padding: 4rem 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo-wrap { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.footer-logo-svg { height: 32px; filter: brightness(0) invert(1); }
.footer-brand > p { color: hsla(45,40%,94%,0.8); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 20rem; }
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
  color: hsla(45,40%,94%,0.6); text-decoration: none; font-size: 0.875rem;
  transition: color 0.3s; padding: 0.25rem 0.5rem;
}
.footer-social a:hover { color: var(--amber); }
.footer-contact h3, .footer-policies h3 { color: var(--amber); font-weight: 600; margin-bottom: 1rem; }
.footer-contact p { color: hsla(45,40%,94%,0.8); font-size: 0.875rem; line-height: 1.8; }
.footer-policies a { display: block; color: hsla(45,40%,94%,0.8); text-decoration: none; font-size: 0.875rem; margin-bottom: 0.5rem; transition: color 0.3s; }
.footer-policies a:hover { color: var(--amber); }
.footer-bottom {
  border-top: 1px solid hsla(45,40%,94%,0.2); margin-top: 3rem; padding: 2rem 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { color: hsla(45,40%,94%,0.6); font-size: 0.875rem; }
.footer-bottom-right { display: flex; align-items: center; gap: 1rem; color: hsla(45,40%,94%,0.6); font-size: 0.875rem; }
.dot { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; display: inline-block; }

/* Responsive tweaks */
@media (max-width: 640px) {
  .hero-title { font-size: 3rem; }
  .story-text h2, .section-header h2 { font-size: 2rem; }
  .team-grid, .news-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; }
  .process-image-wrap { aspect-ratio: 16/9; }
}