:root{
  --overlay: rgba(5,12,28,.42);
  --overlay-strong: rgba(6,14,32,.72);
  --line: rgba(255,255,255,.20);
  --text: #ffffff;
  --muted: rgba(255,255,255,.84);
  --gold: #e9c95d;
  --panel: rgba(8,18,39,.44);
  --panel-strong: rgba(8,18,39,.58);
  --shadow: 0 20px 60px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#081226;color:var(--text)}
a{color:inherit;text-decoration:none}
body.inner-page{
  background:
    linear-gradient(180deg, rgba(4,10,24,.78), rgba(4,10,24,.82)),
    url('images/drone_foto.jpg') center/cover fixed no-repeat;
}
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(6,14,32,.62);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.wrap{width:min(calc(100% - 32px), 1180px);margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #76f5ff, #2dc6d6 55%, #e9c95d 100%);
  box-shadow:var(--shadow);opacity:.95;
}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase}
.brand-text span{margin-top:5px;font-size:.72rem;letter-spacing:.20em;color:var(--muted);text-transform:uppercase}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
nav a{
  display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);font-size:.92rem;
  backdrop-filter: blur(7px);transition:.18s ease
}
nav a:hover, nav a.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34)}
.hero-strip{
  padding:64px 0 28px;
}
.hero-box{
  width:min(820px,100%);padding:30px 28px;border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(180deg, rgba(8,18,39,.26), rgba(8,18,39,.52));
  backdrop-filter: blur(9px);box-shadow:var(--shadow)
}
.kicker{
  display:inline-block;margin-bottom:16px;padding:8px 14px;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-size:.76rem;
  letter-spacing:.24em;text-transform:uppercase
}
h1,h2,h3{margin:0 0 12px;line-height:1.06}
h1{font-size:clamp(2.4rem, 6vw, 4.8rem)}
h2{font-size:clamp(1.5rem, 3vw, 2.2rem)}
.lead{max-width:58ch;color:var(--muted);font-size:1.05rem}
.section{padding:18px 0 36px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{
  border:1px solid var(--line);border-radius:24px;background:var(--panel);
  backdrop-filter: blur(8px);overflow:hidden;box-shadow:var(--shadow)
}
.card .image{aspect-ratio:16/10;background-size:cover;background-position:center}
.card-body{padding:16px 16px 18px}
.tag{
  display:inline-flex;margin-bottom:8px;padding:5px 9px;border-radius:999px;
  background:rgba(56,213,229,.14);color:#8ff5ff;font-size:.78rem;font-weight:700;text-transform:uppercase
}
.card p,.muted{color:var(--muted)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);transition:.18s ease
}
.btn:hover{background:rgba(255,255,255,.16)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gallery .shot{
  aspect-ratio:1/1;border-radius:20px;border:1px solid var(--line);overflow:hidden;
  background-size:cover;background-position:center;box-shadow:var(--shadow)
}
.list{display:grid;gap:14px}
.list-item{
  padding:16px 18px;border-radius:20px;border:1px solid var(--line);background:var(--panel);
  backdrop-filter: blur(8px);box-shadow:var(--shadow)
}
.footer{padding:12px 0 28px}
.footer-card{
  padding:16px 18px;border-radius:22px;border:1px solid var(--line);background:var(--panel-strong);
  color:var(--muted);display:flex;justify-content:space-between;gap:16px
}
.notice{font-size:.95rem;color:var(--muted)}
@media (max-width:980px){.grid{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .topbar,.footer-card{flex-direction:column;align-items:flex-start}
  .grid,.gallery{grid-template-columns:1fr}
  .hero-strip{padding-top:32px}
}