/* ====== MAVERO WOW THEME v2 (fixes) ====== */
:root{
  --bg:#0c0f14;
  --fg:#e7ebf4;
  --muted:#a4aec2;
  --brand:#6aa4ff;
  --brand2:#8bb9ff;
  --card:#111622;
  --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%, #13213a 0%, transparent 60%),
    radial-gradient(900px 500px at 120% 20%, #1b2a45 0%, transparent 60%),
    var(--bg);
  line-height:1.6;
}

/* ===== Header / Nav ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,17,25,.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
h1.site{ margin:0; font-weight:800; letter-spacing:.3px }
nav.site-menu{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
nav.site-menu a{
  color:var(--fg); text-decoration:none; font-weight:650; opacity:.92;
  position:relative; padding:6px 0;
}
nav.site-menu a:after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transition:width .25s ease;
}
nav.site-menu a:hover:after{ width:100%; }
.menu-toggle{display:none; font-size:1.4rem; background:transparent; border:1px solid var(--border); color:var(--fg); border-radius:10px; padding:6px 10px}
@media (max-width: 880px){
  nav.site-menu{display:none; position:absolute; top:62px; right:16px; left:16px; padding:12px;
    background:rgba(16,20,30,.98); border:1px solid var(--border); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.45); flex-direction:column}
  nav.site-menu.open{display:flex}
  .menu-toggle{display:block}
}

/* ===== Layout ===== */
.container{max-width:1200px; margin:0 auto; padding: clamp(16px, 3vw, 28px);}
section{padding: clamp(18px, 4vw, 48px) 0}
h2{font-size: clamp(22px, 2.8vw, 34px); margin: 0 0 10px}
.lead{font-size: clamp(17px, 2.1vw, 19px); color:var(--muted); max-width: 950px;}

/* ===== Buttons ===== */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:14px; font-weight:800; letter-spacing:.2px;
  color:var(--fg); text-decoration:none; border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(200px 120px at 15% -10%, rgba(106,164,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.1));
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.button:hover{
  transform: translateY(-2px);
  border-color: rgba(106,164,255,.55);
  color:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.5), 0 0 22px 2px rgba(106,164,255,.25);
}
.button.ghost{ background:transparent; border:1px solid var(--border); }
.button.small{ padding:9px 14px; border-radius:12px; font-weight:700; }

/* ===== HERO (crossfade, no overlap) ===== */
.hero{ position:relative; height:min(80vh,820px); min-height:520px; overflow:hidden; isolation:isolate; }
.hero::after{ content:""; position:absolute; inset:0; z-index:2;
  background: radial-gradient(1200px 500px at 5% 0%, rgba(106,164,255,.16), transparent 60%),
             linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.33) 38%, rgba(0,0,0,.65)); }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; animation:heroFade 24s infinite; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.06) saturate(1.06); }
.hero-slide:nth-child(1){ animation-delay:0s }
.hero-slide:nth-child(2){ animation-delay:6s }
.hero-slide:nth-child(3){ animation-delay:12s }
.hero-slide:nth-child(4){ animation-delay:18s }
@keyframes heroFade{ 0%,20%{opacity:1} 25%,95%{opacity:0} 100%{opacity:1} }
.hero-overlay{ position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding: clamp(18px, 4vw, 40px); max-width:1100px; margin:0 auto; }
.hero-overlay h1{ margin:0; font-size: clamp(32px, 6vw, 64px); line-height:1.08; }
.hero-overlay p{ margin:0 0 12px; font-size: clamp(16px, 2.2vw, 20px); opacity:.92; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap }

/* ===== Cards / Grid ===== */
.grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.card{ background:linear-gradient(180deg, #111624, #0e1421); border:1px solid var(--border); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.35); transform:translateY(0) scale(1);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s; text-decoration:none; color:inherit;}
.card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(106,164,255,.2); border-color:rgba(106,164,255,.35); }
.card-media{ height:230px; background:#0b0f17; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card h3{ margin:14px 16px 18px; font-weight:700; letter-spacing:.2px; }

/* ===== Icons strip ===== */
.icons-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.icons-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; align-items:stretch; }
.ico-card{ display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px 16px; }
.ico-card svg{ flex: 0 0 28px; width:28px; height:28px; }
.ico-card h4{ margin:0 0 4px; font-size:16px }
.ico-card p{ margin:0; color:var(--muted); font-size:14px; }

/* ===== Gallery ===== */
.gallery{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));}
.gallery .gallery-item{background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,.3)}
.gallery .gallery-item img{width:100%; height:260px; object-fit:cover; display:block}

/* ===== Footer ===== */
footer{background:transparent; border-top:1px solid var(--border); color:var(--muted); text-align:center; padding:26px}

/* ===== Helpers ===== */
.reveal{opacity:0; transform: translateY(20px); will-change: transform, opacity}
.reveal.visible{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
img{ display:block; max-width:100%; height:auto; }
h1::marker, h2::marker { content:none; }

/* ===== Mobile ===== */
@media (max-width: 880px){
  .hero{ min-height:420px; height:70vh; }
  .hero-overlay{ padding:22px }
  .hero-overlay h1{ font-size: clamp(26px, 9vw, 40px); }
  .hero-cta .button{ padding:10px 14px }
  .card-media{ height:190px }
}