/* =========================================================
   1) Design Tokens & Base
   ========================================================= */
:root{
  /* Background Colors */
  --bg:#F2F0E9; --bg-alt:#F8F8F6;
  /* Navbar Background */
  --navbar-bg: rgba(255, 255, 255, 0.6); --navbar-blur: 20px;
  /* Hero Overlay */
  --overlay-center: rgba(255, 255, 255, 0.3); --overlay-sides: rgba(255, 255, 255, 0.2);
  /* Text Colors */
  --text:#1f1812; --muted:#5b4e44; --text-light: #ffffff;
  /* Accent Colors */
  --accent: #ff8800; --accent-secondary: #f07955;
  /* Gradient Colors */
  --gradient-start:#f0a146; --gradient-end:#f07955;
  /* Box Shadows */
  --shadow:0 5px 20px rgba(34, 30, 24, 0.2); --shadow-hover:0 5px 20px rgba(34, 30, 24, 0.4);
}

/* Dark theme overrides */
:root[data-theme="dark"]{
  /* Backgrounds */
  --bg:#0f0f12; --bg-alt:#121318;
  /* Navbar */
  --navbar-bg: rgba(10, 10, 12, 0.55); --navbar-blur: 18px;
  /* Overlays */
  --overlay-center: rgba(0,0,0,0); --overlay-sides: rgba(0,0,0,0);
  /* Text */
  --text:#e8e8f0; --muted:#a9adc2; --text-light:#ffffff;
  /* Accent Colors*/
  /* 0b3d91 */
  --accent:#1059d8; --accent-secondary:#8d6bff;
  /* Gradient Colors */
  --gradient-start:#22304a; --gradient-end:#0f1a2e;
  /* Shadows tuned for dark UI */
  --shadow:0 5px 20px rgba(101, 110, 155, 0.2); --shadow-hover:0 8px 24px rgba(101, 110, 155, 0.4);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  padding-top: 60px;
  /* font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; */
  font: 20px/1.6 'Poppins', sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* =========================================================
   2) Utilities / Helpers
   ========================================================= */
.container{ width:min(1100px,92%); margin-inline:auto; }
.section{ padding:80px 0; }
.section.bg-alt{ background:var(--bg-alt); }

.section-head{ text-align:center; margin-bottom:32px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); margin:0 0 10px; }
.section-head .muted{ color:var(--muted); }
.section-head.light{ color:var(--text-light); }

.gradient-text{
  background:linear-gradient(135deg,var(--accent),var(--accent-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gradient{ background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end)); }

/* =========================================================
   3) Header / Navigation
   ========================================================= */
.header{
  position:fixed; width: 100%; top:0; z-index:40;
  background: var(--navbar-bg);
  backdrop-filter:blur(var(--navbar-blur));
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ color: var(--accent); text-decoration: none; font-weight:700; letter-spacing:.5px; }

.nav-links{ display:flex; gap:20px; }
.nav-links a{ color:var(--text); text-decoration:none; opacity:.9; transition: 0.2s; }
.nav-links a:hover{ opacity:1; color: var(--accent); }

.menu-toggle{ display:none; background:none; border:0; padding:6px; cursor:pointer; }
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--text); margin:5px 0; }

/* Mobile Nav */
@media (max-width:780px){
  .menu-toggle{ display:block; }
  .nav-links{
    position:absolute; right:4%; top:58px;
    /* FIX - Blur isn't working */
    background:var(--navbar-bg); border-radius:12px; backdrop-filter:blur(var(--navbar-blur));
    padding:10px; display:none; flex-direction:column;
  }
  .nav-links a{ padding:6px 8px; }
  .nav-links.open{ display:flex; }
}

/* =========================================================
   4) Theme Toggle Switch 
   ========================================================= */
.switch-wrap{
  display:inline-flex; align-items:center;
  margin-left:10px;
}
.switch-input{ position:absolute; opacity:0; pointer-events:none; }
.switch{
  width:44px; height:24px; border-radius:999px;
  background:var(--accent);
  position:relative; cursor:pointer;
  transition: .2s ease;
}
.switch::after{
  content:"";
  position:absolute; top:50%; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; transform:translate(0,-50%);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .2s ease;
}
.switch-input:checked + .switch::after{ transform:translate(20px,-50%); }
.switch-input:focus-visible + .switch { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width:780px){
  .nav-links .switch-wrap{ margin:6px 8px 2px; }
}

/* =========================================================
   5) Hero
   ========================================================= */
.hero{
  position:relative; min-height:90vh;
  display:grid; place-items:center; overflow:hidden;
}

.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.05);
  transition: opacity .45s ease;
  opacity:1;
  pointer-events:none;
}

.hero-video--dark{ opacity:0; }

/* Flip in dark mode */
:root[data-theme="dark"] .hero-video--dark{ opacity:1; }
:root[data-theme="dark"] .hero-video--light{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .hero-video{ transition:none; }
}

.hero-overlay{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, var(--overlay-center), var(--overlay-sides));
}
.hero-content{ position:relative; text-align:center; padding:80px 0; }
.title{ font-size:clamp(36px,6vw,64px); margin:0 0 12px; font-weight:800; }
.subtitle{ color:var(--text); font-weight: 600; opacity:.9; margin:0 auto 22px; max-width:700px; }

/* Hero CTAs */
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  appearance:none; border:1px solid var(--text);
  padding:10px 20px; border-radius:10px;
  cursor:pointer; text-decoration:none; display:inline-block;
  transition:transform .2s ease;
}
.btn-primary{ color: var(--text-light); background-color: var(--accent); border: none; }
.btn-outline{ background:transparent; color:var(--text); border-color: var(--text); }

/* Scale-up hover for BOTH hero buttons */
.hero .cta .btn{
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.btn:hover,
.btn:focus-visible{
  transform: scale(1.06);
}

/* Scroll indicator */
.scroll-indicator{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  opacity:.85; animation:bounce 2s infinite;
}
.mouse{ width:24px; height:38px; border:2px solid var(--text); border-radius:14px; display:grid; place-items:center; }
.wheel{ width:3px; height:8px; background:var(--text); border-radius:2px; }

/* =========================================================
   6) Gallery / Cards
   ========================================================= */
.grid{ display:grid; gap:20px; }
.cards-3{ grid-template-columns:repeat(1,1fr); }
@media (min-width:700px){ .cards-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cards-3{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--bg-alt);  border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
  will-change:transform;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-media{ position:relative; overflow:hidden; }
.card-media img{
  display:block; width:100%; height:260px; object-fit:cover;
  transform:scale(1.02); transition:transform .5s ease;
}
.card:hover{ transform:translateY(-4px) scale(1.03); box-shadow:var(--shadow-hover); }
.card:hover .card-media img{ transform:scale(1.1); }
.card-body{ padding:16px; }
.card-body h3{ margin:0 0 6px; }
.card-body p{ margin:0 0 12px; color:var(--muted); }

/* =========================================================
   7) About
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
@media (min-width:992px){ .about-grid{ grid-template-columns:1fr 1fr; } }

.about-media{ position:relative; display:grid; place-items:center; }
.about-frame{ max-width:420px; width:100%; position:relative; }
.skew-bg{
  width:100%; position:absolute; inset:-10px;
  background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));
  border-radius:18px; transform:rotate(3deg); filter:blur(2px);
}
.about-img{ width:100%; position:relative; display:block; border-radius:18px; margin:0 auto; transition: 0.2s;}

.about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; width: 100%; }
@media (max-width: 640px){ .about-stats{ grid-template-columns: 1fr; } }

.stat { text-align: center; background-color: var(--bg); padding:16px; border-radius:18px;}
.stat-number { display: block; font-size: 1.8rem; color: var(--accent); }
.stat-label { display: block; font-size: 0.9rem; color: var(--muted); }

/* =========================================================
   8) Contact
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:992px){ .contact-grid{ grid-template-columns:1fr 1fr; } }

.form{ padding:20px; }
.form label{ display:block; font-size:20px; color:var(--text); margin-bottom:12px; }
.form input,.form textarea{
  width:100%; margin-top:6px; padding:10px 12px; border-radius:10px;
  border: none; background:var(--bg); color:var(--text);
}
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-note{ margin-top:10px; font-size:20px; }

.contact-aside .contact-cards{
  display:flex; flex-direction:column; gap:16px; width:100%;
  max-width:600px; margin:0 auto;
}
.contact-card{ padding:20px; }
.contact-card h3{ color: var(--accent); margin:0 0 6px; }
.contact-card a{ color: var(--text); text-decoration:none; }
.contact-grid .btn { font-size: 20px; }
.form *::placeholder {
  font-size: 16px;
  color: var(--muted);
}

@media (max-width:992px){
  .contact-grid .form,
  .contact-grid .contact-card{
    max-width:600px;
    margin-inline:auto;
    width:100%;
  }
}

/* =========================================================
   9) Footer
   ========================================================= */
.footer{ padding:32px 0; background:var(--bg-alt); }

/* =========================================================
   10) Animations & Motion Preferences
   ========================================================= */
@keyframes bounce{
  0%,100%{ transform:translate(-50%,0) }
  50%{ transform:translate(-50%,-6px) }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero .btn-primary{ animation:none; }
  .hero .cta .btn{ transition:none; }
}