*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial;background:#000;color:#fff;line-height:1.6}
a{color:#fff;text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1120px;margin:0 auto;padding:0 1rem;position:relative;z-index:1}
.header{position:sticky;top:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.1);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}.brand{display:flex;align-items:center;gap:.75rem}
.brand-title{font-weight:800;letter-spacing:.2em}.brand-tag{font-size:.7rem;opacity:.7;text-transform:uppercase}
.navlinks{display:flex;gap:1rem}.navlinks a{opacity:.8}.navlinks a:hover{opacity:1}
.section{padding:4rem 0}.hero{display:grid;gap:2rem;align-items:center}@media(min-width:900px){.hero{grid-template-columns:1fr 1fr}}
.card{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1rem;background:rgba(255,255,255,.03)}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:14px;border:1px solid #fff;background:#fff;color:#000}.btn.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}.btn+.btn{margin-left:.5rem}
.grid{display:grid;gap:1rem}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:800px){.grid-3{grid-template-columns:1fr}}
.media-card{position:relative;overflow:hidden;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.media-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.media-meta{display:flex;justify-content:space-between;padding:.4rem .6rem;font-size:.8rem;opacity:.8}
#modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:20;padding:1rem}#modal.open{display:flex}
.modal-inner{position:relative;width:100%;max-width:1000px;max-height:85vh}.modal-close{position:absolute;right:0;top:-2.2rem;border:1px solid rgba(255,255,255,.6);background:#fff;color:#000;padding:.25rem .6rem;border-radius:999px;cursor:pointer}
.modal-frame{overflow:hidden;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:#000}.modal-media{width:100%;max-height:80vh;object-fit:contain;display:block}
.footer{text-align:center;font-size:.8rem;opacity:.6;padding:2rem 0;border-top:1px solid rgba(255,255,255,.1)}
#wm-field{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}/* Watermark drone styling */
/* Watermark drone styling */
.wm-drone {
  opacity: 0.35;
  filter: brightness(10);
  pointer-events: none;
  position: absolute;
}
@keyframes driftX{from{transform:translateX(-20vw) var(--extra)}to{transform:translateX(120vw) var(--extra)}}@keyframes driftXBack{from{transform:translateX(120vw) var(--extra)}to{transform:translateX(-20vw) var(--extra)}}
@keyframes driftY{from{transform:translateY(-20vh) var(--extra)}to{transform:translateY(120vh) var(--extra)}}@keyframes driftYBack{from{transform:translateY(120vh) var(--extra)}to{transform:translateY(-20vh) var(--extra)}}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.small{font-size:.85rem;opacity:.7}hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:2rem 0}


/* === 3D Flying Drone (UI-only) =========================================== */
.drone3d {
  position: fixed;
  top: 50vh;
  left: 50vw;
  width: 140px;
  height: 90px;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.25));
}

.drone3d .body {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(220,220,220,.85));
  border: 1px solid rgba(255,255,255,.4);
}

.drone3d .eye {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.7), 0 0 18px rgba(255,255,255,.6);
  top: 24px;
  left: 36px;
}

/* Arms */
.drone3d .arm {
  position: absolute;
  width: 44px; height: 6px;
  background: rgba(255,255,255,.8);
  border-radius: 4px;
  top: 27px;
  transform-origin: 0 50%;
}
.drone3d .arm.left  { left: -22px; transform: rotate(8deg); }
.drone3d .arm.right { right: -22px; transform: rotate(-8deg); }

/* Rotors */
.drone3d .rotor {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.1);
  top: -8px;
  display: grid; place-items: center;
}
.drone3d .arm.left  .rotor { left: -6px; }
.drone3d .arm.right .rotor { right: -6px; }

.drone3d .blade {
  width: 2px; height: 26px;
  background: rgba(0,0,0,.65);
  transform-origin: 50% 90%;
  animation: spin 0.25s linear infinite;
}
.drone3d .blade:after {
  content: "";
  display: block;
  width: 26px; height: 2px;
  background: rgba(0,0,0,.65);
  transform: translate(-12px, -14px);
}

@keyframes spin {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}


/* Auto gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; height: auto; display: block; border-radius: 12px; }
.gallery-grid figcaption { font-size: 0.9rem; opacity: 0.8; margin-top: 0.35rem; }