:root{

--bg:#020617;

--panel:#0f172abf;

--panel-2:rgba(15,23,42,.55);

--border:rgba(148,163,184,.18);

--text:#f8fafc;

--muted:#cbd5e1;

--accent:#34d399;

--danger:#f87171;

--warn:#fbbf24;

--radius:16px;

--radius-pill:999px;

--shadow:0 10px 30px rgba(0,0,0,.25);

}

*{ box-sizing:border-box; }

html,body{

height:auto;

min-height:100%;

width:100%;

max-width:100%;

overflow-x:hidden;

}

body{

margin:0;

background:var(--bg);

color:var(--text);

font-family:"ui-sans-serif","system-ui","-apple-system","Segoe UI","Roboto","Arial";

line-height:1.5;

}

a:visited{ color:inherit; }

.container{

max-width:1100px;

margin:0 auto;

padding:24px 16px;

}

/* Header */

.site-header{

  background:rgba(2,6,23,.88);

  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--border);

}

.site-header .container{

  padding:12px 16px;

}

.header-row{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:40px;

}

.brand{

  font-weight:800;

  letter-spacing:-.02em;

  text-decoration:none;

  color:var(--text);

  white-space:nowrap;

  flex-shrink:0;

}

.nav{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:22px;

  width:100%;

}

.nav-links,

.nav-auth{

  display:flex;

  align-items:center;

  gap:18px;

}

.nav a{

  color:var(--muted);

  text-decoration:none;

  font-size:14px;

  padding:8px 10px;

  border-radius:999px;

  border:1px solid transparent;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  white-space:nowrap;

}

.nav a:hover{

  color:var(--text);

  background:rgba(148,163,184,.08);

  border-color:rgba(148,163,184,.12);

}

/* Panels / type */

.panel{

border:1px solid var(--border);

background:var(--panel);

border-radius:var(--radius);

padding:18px;

box-shadow:var(--shadow);

overflow:hidden;

}

.h-eyebrow{

color:var(--accent);

text-transform:uppercase;

letter-spacing:.25em;

font-size:12px;

font-weight:800;

}

.h-title{

font-size:36px;

line-height:1.15;

margin:10px 0 0 0;

letter-spacing:-.02em;

overflow-wrap:break-word;

}

.h-sub{

color:var(--muted);

max-width:720px;

margin:12px 0 0 0;

}

.glow-text{

color:var(--accent);

text-shadow:

    0 0 18px rgba(52,211,153,.35),

    0 0 40px rgba(52,211,153,.18);

}

.muted{ color:var(--muted); }

.text{ color:var(--text); }

.small{ font-size:13px; color:var(--muted); margin:8px 0 0 0; }

/* Grid */

.grid{ display:grid; gap:16px; }

.grid.two{

grid-template-columns:repeat(2,minmax(0,1fr));

align-items:start;

}

.grid.two > *{ min-width:0; }

/* Buttons */

.btn,

.pill{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:10px 14px;

border-radius:var(--radius-pill);

border:1px solid var(--border);

background:var(--panel-2);

color:var(--text);

text-decoration:none;

font-size:14px;

line-height:1;

}

.btn:hover,

.pill:hover{

border-color:rgba(148,163,184,.35);

}

.glow{

border-color:rgba(52,211,153,.55) !important;

color:var(--accent) !important;

box-shadow:0 0 24px rgba(52,211,153,.18);

}

.glow:hover{

box-shadow:0 0 30px rgba(52,211,153,.25);

}

.pill.danger,

.btn.danger{

border-color:rgba(248,113,113,.55) !important;

background:rgba(248,113,113,.12) !important;

color:var(--text) !important;

}

/* Badges */

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:4px 10px;

border-radius:var(--radius-pill);

border:1px solid var(--border);

font-size:12px;

color:var(--text);

background:var(--panel-2);

}

.badge-ok{

border-color:rgba(52,211,153,.45);

background:rgba(52,211,153,.10);

}

.badge-warn{

border-color:rgba(251,191,36,.45);

background:rgba(251,191,36,.10);

}

/* Messages */

.messages{

margin:12px 0;

display:grid;

gap:8px;

}

.msg{

padding:10px 12px;

border-radius:12px;

border:1px solid var(--border);

background:var(--panel-2);

color:var(--text);

font-size:14px;

}

.msg.success{ border-color:rgba(52,211,153,.35); }

.msg.error{ border-color:rgba(248,113,113,.35); }

/* Page */

.page{

min-height:100vh;

display:flex;

flex-direction:column;

}

main{ flex:1; }

/* Page head */

.page-head{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:16px;

flex-wrap:wrap;

}

.page-head > *,

.card-top > *{

min-width:0;

}

.head-actions{

display:flex;

gap:10px;

flex-wrap:wrap;

}

/* Cards */

.card-grid{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:14px;

margin-top:16px;

}

.card{

display:block;

border:1px solid var(--border);

background:var(--panel);

border-radius:var(--radius);

padding:16px;

text-decoration:none;

color:var(--text);

box-shadow:var(--shadow);

}

.card:hover{

border-color:rgba(148,163,184,.35);

}

.card-top{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:10px;

}

.card h2,

.page-head h1{

margin:0;

font-size:16px;

line-height:1.25;

overflow-wrap:anywhere;

word-break:break-word;

}

/* Forms */

.form{ display:block; }

.field label{

display:block;

font-size:13px;

margin-bottom:6px;

color:var(--muted);

}

.field input,

.field select,

.field textarea{

width:100%;

padding:10px 12px;

border-radius:12px;

border:1px solid rgba(148,163,184,.22);

background:rgba(2,6,23,.55);

color:var(--text);

outline:none;

}

.field textarea{

min-height:140px;

resize:vertical;

}

.field input:focus,

.field select:focus,

.field textarea:focus{

border-color:rgba(52,211,153,.55);

box-shadow:0 0 0 3px rgba(52,211,153,.10);

}

.field .errorlist{

margin:8px 0 0 0;

padding:0;

list-style:none;

color:#fecaca;

font-size:13px;

}

/* Footer */

.site-footer{

border-top:1px solid var(--border);

margin-top:40px;

}

.footer-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:12px;

padding-top:18px;

padding-bottom:12px;

flex-wrap:wrap;

}

.icon-row{

display:flex;

flex-wrap:wrap;

gap:10px;

justify-content:center;

align-items:center;

}

.icon-btn{

width:36px;

height:36px;

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:999px;

border:1px solid rgba(148,163,184,.22);

background:rgba(2,6,23,.55);

color:var(--text);

text-decoration:none;

font-weight:800;

letter-spacing:.06em;

font-size:12px;

}

.icon-btn:hover{

border-color:rgba(52,211,153,.70);

color:var(--accent);

box-shadow:0 0 24px rgba(52,211,153,.18);

}

.sr-only{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

white-space:nowrap;

border:0;

}

/* Homepage hero video */

.hero-video{

position:relative;

min-height:620px;

border:1px solid var(--border);

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

display:flex;

align-items:center;

padding:48px;

background:#020617;

}

.hero-video video,

.hero-video-bg{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

object-position:center center;

z-index:0;

}

.hero-video-overlay{

position:absolute;

inset:0;

z-index:1;

background:

    linear-gradient(90deg,rgba(2,6,23,.92),rgba(2,6,23,.62),rgba(2,6,23,.26)),

    linear-gradient(0deg,rgba(2,6,23,.70),rgba(2,6,23,.14));

}

.hero-video-content{

position:relative;

z-index:2;

max-width:760px;

}

/* Homepage featured visuals */

.home-showcase{

margin-top:26px;

}

.showcase-grid{

display:grid;

grid-template-columns:repeat(4,minmax(0,1fr));

gap:16px;

margin-top:18px;

}

.showcase-card{

position:relative;

display:block;

height:220px;

min-height:220px;

border-radius:20px;

overflow:hidden;

border:1px solid var(--border);

background:var(--panel);

box-shadow:var(--shadow);

text-decoration:none;

color:var(--text);

}

.showcase-card img{

width:100%;

height:100%;

display:block;

object-fit:cover;

object-position:center center;

filter:saturate(1.06) contrast(1.04);

transition:transform .45s ease;

}

.showcase-card:hover img{

transform:scale(1.04);

}

.showcase-card::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(0deg,rgba(2,6,23,.68),rgba(2,6,23,.05));

}

.showcase-label{

position:absolute;

left:14px;

bottom:14px;

z-index:2;

color:var(--text);

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

font-size:11px;

padding:7px 10px;

border-radius:999px;

border:1px solid rgba(255,255,255,.18);

background:rgba(2,6,23,.58);

backdrop-filter:blur(10px);

}

/* Portfolio gallery */

.portfolio-gallery-section{

margin-top:22px;

}

.portfolio-gallery{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:18px;

margin-top:18px;

}

.portfolio-shot{

position:relative;

display:block;

height:260px;

min-height:260px;

border-radius:20px;

overflow:hidden;

border:1px solid var(--border);

background:var(--panel);

box-shadow:var(--shadow);

text-decoration:none;

color:var(--text);

}

.portfolio-shot img{

width:100%;

height:100%;

display:block;

object-fit:cover;

filter:saturate(1.06) contrast(1.04);

transition:transform .45s ease;

}

.portfolio-shot:hover img{

transform:scale(1.04);

}

.portfolio-shot::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(0deg,rgba(2,6,23,.70),rgba(2,6,23,.05));

}

/* Drone portfolio video */

.aerial-feature{

margin-top:22px;

}

.portfolio-video-card{

width:100%;

max-width:900px;

margin-top:16px;

border-radius:22px;

overflow:hidden;

border:1px solid var(--border);

background:#020617;

box-shadow:var(--shadow);

}

.portfolio-video-card video{

display:block;

width:100%;

height:auto;

max-height:720px;

background:#020617;

}

/* =========================

   TABLET

========================= */

@media (max-width:900px){

  .grid.two{

    grid-template-columns:1fr;

  }

  .card-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

  .showcase-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

  .portfolio-gallery{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

  .showcase-card{

    height:230px;

    min-height:230px;

  }

}

/* =========================

   ELITE MOBILE NAV (FIXED)

========================= */

@media (max-width:640px){

  /* HEADER */

  .site-header{

    padding:0;

    margin:0;

    height:auto;

    border-bottom:1px solid var(--border);

    backdrop-filter:blur(12px);

  }

  .site-header .container.header-row{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 14px;

  }

  /* BRAND */

  .brand{

    font-size:15.5px;

    font-weight:700;

    letter-spacing:-0.01em;

    flex-shrink:0;

  }

  /* NAV WRAPPER */

  .nav{

    display:flex;

    align-items:center;

    flex:1;

    overflow:hidden;

  }

  /* HIDE LOGIN / REGISTER */

  .nav-auth{

    display:none !important;

  }

  /* SCROLLABLE LINKS */

  .nav-links{

    display:flex;

    align-items:center;

    gap:6px;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

  }

  /* Make "Services" feel like a primary action */

.nav-links a{

  font-weight:500;

}

.nav-links a:first-child{

  color:var(--text);

  border:1px solid rgba(148,163,184,.18);

  background:rgba(148,163,184,.06);

}

  .nav-links::-webkit-scrollbar{

    display:none;

  }

  /* LINKS */

  .nav-links a{

    flex:0 0 auto;

    font-size:11.5px;

    padding:6px 8px;

    border-radius:999px;

    white-space:nowrap;

    color:var(--muted);

    background:transparent;

    border:1px solid transparent;

    transition:all .2s ease;

  }

  /* HOVER / TAP */

  .nav-links a:active,

  .nav-links a:hover{

    color:var(--text);

    background:rgba(148,163,184,.08);

    border-color:rgba(148,163,184,.18);

  }

  /* PAGE SPACING */

  main.container{

    padding:8px 14px 16px;

  }

  .hero-video{

    margin-top:0;

    min-height:480px;

    padding:22px 18px;

    border-radius:18px;

  }

  .grid.two{

    grid-template-columns:1fr;

  }

  .showcase-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px;

  }

  .portfolio-gallery{

    grid-template-columns:1fr;

  }

  .h-title{

    font-size:30px;

  }

}

/* =========================

   VERY SMALL PHONES

========================= */

@media (max-width:420px){

  .brand{

    font-size:14.5px;

  }

  .nav-links a{

    font-size:11px;

    padding:6px 6px;

  }

  .card-grid{

    grid-template-columns:1fr;

  }

}