/* =============================================
   Brij Sai Buildtech — Style Sheet
   Theme: Light / Dark via data-theme attribute
   ============================================= */

/* --- Theme Variables --- */
:root {
  --bg: #ffffff;
  --bg-alt: #f8f9fa;
  --bg-card: #ffffff;
  --bg-dark: #1a1817;
  --bg-overlay: #1a1817;
  --border: #eaedef;
  --text-heading: #2a2523;
  --text-body: #5e6968;
  --text-muted: #9b9f98;
  --nav-bg: rgba(255,255,255,0.5);
  --nav-bg-scrolled: rgba(255,255,255,0.85);
  --nav-border: rgba(215,232,243,0.15);
  --nav-border-scrolled: rgba(215,232,243,0.3);
  --card-border: #eaedef;
  --card-hover-border: #d7e8f3;
  --glass-dark-bg: rgba(255,255,255,0.04);
  --glass-dark-border: rgba(255,255,255,0.06);
  --gradient-start: #f8f9fa;
  --gradient-card: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  --fade-right: linear-gradient(to right, transparent, #ffffff);
  --preloader-bg: #1a1817;
  --hero-bg: #1a1817;
  --footer-bg: #f0efeb;
  --footer-text: #3d3835;
  --footer-muted: #7a7672;
  --footer-border: rgba(0,0,0,0.06);
  --overlay-bg: #f8f6f3;
  --overlay-text: #3d3835;
  --overlay-text-muted: #7a7672;
  --overlay-border: rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --bg: #0d0d0d;
  --bg-alt: #121212;
  --bg-card: #181818;
  --bg-dark: #080808;
  --bg-overlay: #0d0d0d;
  --border: #222;
  --text-heading: #f0ede8;
  --text-body: #a0a09a;
  --text-muted: #6b6b66;
  --nav-bg: rgba(13,13,13,0.6);
  --nav-bg-scrolled: rgba(13,13,13,0.9);
  --nav-border: rgba(255,255,255,0.04);
  --nav-border-scrolled: rgba(255,255,255,0.08);
  --card-border: #222;
  --card-hover-border: #333;
  --glass-dark-bg: rgba(255,255,255,0.02);
  --glass-dark-border: rgba(255,255,255,0.04);
  --gradient-start: #121212;
  --gradient-card: linear-gradient(180deg, #181818 0%, #1a1a1a 100%);
  --fade-right: linear-gradient(to right, transparent, #0d0d0d);
  --preloader-bg: #080808;
  --hero-bg: #080808;
  --footer-bg: #1a1918;
  --footer-text: #d0cdc8;
  --footer-muted: #8a8884;
  --footer-border: rgba(255,255,255,0.05);
  --overlay-bg: #0d0d0d;
  --overlay-text: #f0ede8;
  --overlay-text-muted: #a0a09a;
  --overlay-border: rgba(255,255,255,0.08);
}

/* --- Utility classes --- */
.text-heading { color: var(--text-heading); }
.text-body { color: var(--text-body); }
.text-muted { color: var(--text-muted); }
.border-card { border-color: var(--card-border); }
.bg-footer {
  background: var(--footer-bg);
  color: var(--footer-muted);
}
.bg-footer .text-footer-heading { color: var(--footer-text); }
.bg-footer .text-footer-body { color: var(--footer-text); opacity: 0.8; }
.bg-footer .text-footer-muted { color: var(--footer-muted); }
.bg-footer .border-footer { border-color: var(--footer-border); }
.bg-mobile-menu {
  background: var(--overlay-bg);
  color: var(--overlay-text-muted);
}
.bg-mobile-menu .text-overlay-text { color: var(--overlay-text); }
.bg-mobile-menu .text-overlay-muted { color: var(--overlay-text-muted); }

/* --- Theme transition --- */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color 0.25s cubic-bezier(0.22,1,0.36,1),
              color 0.25s cubic-bezier(0.22,1,0.36,1),
              border-color 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s cubic-bezier(0.22,1,0.36,1),
              opacity 0.25s cubic-bezier(0.22,1,0.36,1) !important;
}

/* --- Base --- */
html { scroll-behavior: smooth; width: 100%; overflow-x: hidden; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-body);
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  padding-top: 4rem;
}
@media (min-width: 1024px) {
  body { padding-top: 5rem; }
}
h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--text-heading);
  font-weight: 700;
}
::selection { background: #bd5434; color: white; }
img { max-width: 100%; display: block; }

/* --- Glass --- */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  perspective: 800px;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.15s ease, background-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.glass-card:hover {
  transform: translateY(-3px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg));
  box-shadow: 0 12px 40px rgba(42, 37, 35, 0.08);
  border-color: var(--card-hover-border);
}
.glass-card-dark {
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  border-radius: 1rem;
  perspective: 800px;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease, background-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.glass-card-dark:hover {
  transform: translateY(-3px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg));
  border-color: rgba(189, 84, 52, 0.2);
}
.glass-card-accent {
  background: #bd5434;
  border: none;
  border-radius: 1rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.glass-card-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(189, 84, 52, 0.15);
}

/* --- Bento Grid --- */
.bento {
  display: grid;
  gap: 1.25rem;
}
.bento-2 { grid-template-columns: repeat(2, 1fr); }
.bento-3 { grid-template-columns: repeat(3, 1fr); }
.bento-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .bento-3, .bento-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .bento-2, .bento-3, .bento-4 { grid-template-columns: 1fr; }
}

.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-row-2 { grid-row: span 2; }

@media (max-width: 1023px) {
  .bento-span-2 { grid-column: span 2; }
  .bento-span-3 { grid-column: span 2; }
  .bento-row-2 { grid-row: span 1; }
}
@media (max-width: 639px) {
  .bento-span-2, .bento-span-3 { grid-column: span 1; }
}

/* --- Nav --- */
.nav-blur {
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.nav-scrolled {
  background: var(--nav-bg-scrolled);
  border-bottom-color: var(--nav-border-scrolled);
  box-shadow: 0 1px 2px rgba(42, 37, 35, 0.03);
}
.nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-body);
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: #bd5434;
  transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover { color: #bd5434; }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #bd5434; }
.nav-link.active::after { width: 100%; }

/* --- Theme toggle --- */
.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(189,84,52,0.08);
  color: #bd5434;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  border: none;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: #bd5434;
  color: white;
  transform: scale(1.05);
}
.theme-toggle .material-symbols-outlined {
  font-size: 1.125rem;
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 9999px;
  background: #bd5434;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(189, 84, 52, 0.18);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97); }
.btn-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-light:hover { background: rgba(255, 255, 255, 0.16); }

/* --- Section --- */
.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #bd5434;
  margin-bottom: 0.75rem;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-heading);
}
@media (max-width: 639px) {
  .section-title { font-size: 2rem; }
}
.section-desc {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 36rem;
}

/* --- Icon box --- */
.icon-box {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box-sm {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Counter --- */
.counter-value { font-variant-numeric: tabular-nums; }

/* --- FAQ --- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease, padding 0.15s ease;
}
.faq-answer.open { max-height: 300px; opacity: 1; }

/* --- Scroll progress --- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: #bd5434;
  z-index: 60;
  transform-origin: left;
  scale: 0 1;
}

/* --- Icons --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* --- Misc --- */
.section-divider {
  width: 2.5rem;
  height: 2px;
  background: #bd5434;
  margin-top: 1.5rem;
}

/* --- Map iframe responsive --- */
@media (max-width: 639px) {
  iframe[src*="google.com/maps"] { height: 300px; }
}

.bg-subtle { background: var(--bg-alt); }
.bg-hero { background: var(--hero-bg); }
.bg-dark { background: var(--bg-dark); }
.bg-overlay { background: var(--bg-overlay); }
.bg-card-soft { background: var(--bg-alt); }

/* --- Form elements (theme-aware) --- */
input, select, textarea {
  background: var(--bg-card);
  color: var(--text-heading);
  caret-color: #bd5434;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}
select {
  color: var(--text-body);
}
option {
  background: var(--bg-card);
  color: var(--text-heading);
}
[id] { scroll-margin-top: 6rem; }

/* --- Preloader --- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--preloader-bg);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: #bd5434;
  animation: preloader-spin 0.8s linear infinite;
}
@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}
.preloader-brand {
  margin-top: 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}