/* ===== Variables & Reset ===== */
:root{
  --accent:#ff7a00;
  --accent-dark:#ff4b00;
  --text-dark:#0f1720;
  --text-muted:#6b7280;
  --bg:#fff;
  --glass:rgba(255,255,255,0.85);
  --shadow:0 10px 30px rgba(2,6,23,0.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html, body{height:100%;font-family:Inter,system-ui,Roboto,Arial,sans-serif;color:var(--text-dark);line-height:1.5;background:var(--bg)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ===== Header ===== */
header{
  position:fixed;top:0;left:0;right:0;height:80px;
  background:linear-gradient(180deg,var(--glass),var(--glass));
  backdrop-filter:blur(6px);z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.container{max-width:1200px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:40px}
.title{font-weight:700;font-size:1.25rem}
.subtitle{font-size:0.875rem;color:var(--text-muted)}
nav.menu{margin-left:auto;display:flex;gap:18px}
nav.menu li{position:relative;list-style:none}
nav.menu a{padding:8px 10px;border-radius:6px;transition:background 200ms}
nav.menu a:hover{background:rgba(255,122,0,0.1)}
nav.menu .dropdown{
  position:absolute;top:100%;left:0;
  background:#fff;padding:12px;border-radius:8px;
  box-shadow:var(--shadow);
  opacity:0;transform:translateY(-6px) scale(0.98);
  pointer-events:none;transition:all 280ms cubic-bezier(.2,.9,.2,1);
}
nav.menu li:hover .dropdown,
nav.menu li:focus-within .dropdown{opacity:1;transform:translateY(6px) scale(1);pointer-events:auto}
.dropdown a{display:block;padding:6px;border-radius:6px;font-size:.9rem}
.dropdown a:hover{background:rgba(255,122,0,0.06)}
.mobile-toggle{display:none;margin-left:auto;cursor:pointer;font-size:1.2rem}

/* ===== Hero Slider ===== */
.hero{margin-top:80px;min-height:80vh;display:grid;align-items:center}
.carousel{position:relative;overflow:hidden;border-radius:8px;box-shadow:var(--shadow)}
.slide{
  position:absolute;inset:0;display:flex;align-items:center;padding:40px;gap:40px;
  opacity:0;transform:scale(1.02);
  transition:opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1);
}
.slide.active{opacity:1;transform:none}
.slide .eyebrow{font-weight:600;color:var(--text-muted);margin-bottom:8px}
.slide h1{font-size:2.75rem;margin-bottom:12px}
.slide p{color:var(--text-dark);margin-bottom:16px}
.hero-cta{
  display:inline-block;padding:12px 20px;border-radius:8px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:#fff;
  transition:background 200ms;
}
.hero-cta:hover{background:linear-gradient(90deg,var(--accent-dark),var(--accent));}

.controls{position:absolute;right:20px;bottom:20px;display:flex;gap:8px;z-index:20}
.arrow{width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,0.35);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}

.indicators{position:absolute;left:20px;bottom:22px;display:flex;gap:8px}
.indicators button{width:12px;height:12px;border-radius:50%;border:none;background:rgba(255,255,255,0.5);cursor:pointer}
.indicators button.active{background:#fff}

/* ===== Sections ===== */
section{padding:80px 0}
h2{font-size:2rem;margin-bottom:24px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:10px;padding:18px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(10px);animation:cardIn .55s forwards}
@keyframes cardIn{to{opacity:1;transform:none}}
.about-grid{display:grid;grid-template-columns:1fr 400px;align-items:center;gap:24px}
.hero-image img{border-radius:8px;box-shadow:inset 0 -40px 80px rgba(0,0,0,0.1)}
.fade-in{opacity:0;transform:translateY(6px);animation:fadeInUp .7s forwards}
@keyframes fadeInUp{to{opacity:1;transform:none}}

/* ===== Footer ===== */
footer{background:#0b1320;color:#fff;padding:40px 20px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer-grid h4{margin-bottom:8px}

/* ===== Images Lazy ===== */
img.lazy{opacity:0;transform:translateY(8px);transition:opacity .4s ease, transform .4s ease}
img.lazy.loaded{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:60vh}
}
@media(max-width:640px){
  nav.menu{display:none}
  .mobile-toggle{display:block}
  .slide{padding:24px;gap:24px}
  .slide h1{font-size:2rem}
}
@media(max-width:480px){
  .aside{display:none}
  h2{font-size:1.5rem}
  .hero h1{font-size:1.6rem}
  .grid{grid-template-columns:1fr}
}