/* DroneGodMax — site stylesheet */
:root{
  --bg:#070708; --bg-2:#0e0e11; --surface:#141418; --surface-2:#1b1b21;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#f5f5f6; --muted:#a3a3ad; --dim:#71717a;
  --gold:#f5a524; --gold-2:#ffc55c; --violet:#6d4df2; --violet-2:#9b86ff;
  --grad:linear-gradient(100deg,var(--gold) 0%,#ff7a3d 45%,var(--violet-2) 100%);
  --radius:18px; --radius-s:12px;
  --font-display:"Bebas Neue","Oswald","Impact","Arial Narrow",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1180px; --nav-h:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1}
h1,h2,.display{font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase}
h1{font-size:clamp(3.2rem,9vw,7.2rem);line-height:.92}
h2{font-size:clamp(2.4rem,5.5vw,4.4rem)}
h3{font-family:var(--font-body);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.wrap{width:min(var(--max),calc(100% - 2.5rem));margin-inline:auto}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.section-head{max-width:760px;margin-bottom:clamp(2rem,5vw,3.5rem)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow::before{display:none}
.alt{background:var(--bg-2)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:.5rem 1rem;z-index:1000}
.skip:focus{left:1rem;top:1rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:700;font-size:.95rem;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;font-family:var(--font-body);line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#120c00;box-shadow:0 8px 30px -8px rgba(245,165,36,.65)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--text);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.btn-violet{background:var(--violet);color:#fff;box-shadow:0 8px 30px -8px rgba(109,77,242,.7)}
.btn-violet:hover{background:#7d61ff}
.btn-sm{padding:.65rem 1.15rem;font-size:.85rem}
.btn svg{width:18px;height:18px}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);overflow:visible;transition:border-color .3s;border-bottom:1px solid transparent}
/* Blur lives on a pseudo-element: backdrop-filter on .nav itself makes it the containing block for the dropdown / mobile panel and clips them to the 74px bar. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,7,8,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .3s;pointer-events:none}
.nav.scrolled::before,.nav.open::before{opacity:1}
.nav.scrolled,.nav.open{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.55rem;letter-spacing:.06em;text-transform:uppercase}
.brand img{width:46px;height:46px;border-radius:50%}
.brand span b{color:var(--gold);font-weight:400}
.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links a,.nav-links button{display:flex;align-items:center;gap:.3rem;padding:.55rem .8rem;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--muted);background:none;border:0;font-family:inherit;cursor:pointer;transition:color .2s,background .2s}
.nav-links a:hover,.nav-links button:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,.06)}
.nav-links a.active{color:var(--gold)}
.nav-links .has-menu>button svg{width:12px;height:12px;opacity:.7;transition:transform .2s}
.nav-links .has-menu.open>button svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:rgba(7,7,8,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.4rem;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.has-menu:hover .submenu,.has-menu.open .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:.6rem .8rem;border-radius:9px;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.submenu a small{color:var(--muted)}
.submenu a:hover{background:rgba(255,255,255,.1)}
.submenu a small{display:block;font-weight:400;color:var(--dim);font-size:.78rem;margin-top:.1rem}
.nav-cta{margin-left:.5rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);color:var(--text);width:44px;height:44px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:22px;height:22px}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;height:calc(100dvh - var(--nav-h));background:rgba(7,7,8,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-direction:column;align-items:stretch;padding:1rem 1.25rem 2rem;gap:.15rem;overflow:auto;display:none}
  .nav.open .nav-links{display:flex}
  .nav.open::before{background:rgba(7,7,8,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .nav.open .nav-links a,.nav.open .nav-links button{color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .nav.open .submenu a small{color:#d4d4d8}
  .nav-links a,.nav-links button{font-size:1.1rem;padding:.85rem .6rem;width:100%;justify-content:space-between}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0 0 .4rem .8rem;display:none}
  .has-menu.open .submenu{display:block}
  .submenu a{font-size:1rem;color:var(--muted)}
  .nav-cta{margin:1rem 0 0;width:100%}
  .nav-cta .btn{width:100%}
}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 3rem) 0 4.5rem;overflow:hidden;isolation:isolate}
.hero.short{min-height:72svh}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media.kb img{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,8,.55) 0%,rgba(7,7,8,.15) 35%,rgba(7,7,8,.72) 75%,var(--bg) 100%)}
.hero .wrap{position:relative}
.hero-inner{max-width:900px}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:#d4d4d8;margin:1.4rem 0 2rem}
.hero-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.pill{display:inline-flex;align-items:center;line-height:1.3;padding:.4rem .85rem;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line-2);background:rgba(7,7,8,.45);backdrop-filter:blur(8px)}
.pill.gold{border-color:rgba(245,165,36,.5);color:var(--gold-2)}
.scroll-cue{position:absolute;right:0;bottom:2rem;display:flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scroll-cue span{width:1px;height:48px;background:linear-gradient(var(--gold),transparent);display:block;animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:700px){.scroll-cue{display:none}}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--bg);padding:1.6rem 1.4rem}
.stat b{display:block;font-family:var(--font-display);font-size:2.6rem;line-height:1;letter-spacing:.02em}
.stat b em{font-style:normal;color:var(--gold)}
.stat span{color:var(--muted);font-size:.9rem}

/* Cards */
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.card-img{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:1.4rem 1.5rem 1.6rem}
.card-body h3{margin-bottom:.5rem}
.card-body p{color:var(--muted);font-size:.95rem}
.card-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--gold);font-size:.92rem;margin-top:.3rem}
.card-link svg{width:16px;height:16px;transition:transform .2s}
.card:hover .card-link svg{transform:translateX(4px)}
.card.stretch-link a.cover{position:absolute;inset:0;z-index:1}

/* Feature list / icon cards */
.icon-card{padding:1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.icon-card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(245,165,36,.18),rgba(109,77,242,.18));border:1px solid var(--line-2);margin-bottom:1.1rem;color:var(--gold)}
.icon-card .ic svg{width:24px;height:24px}
.icon-card h3{font-size:1.1rem;margin-bottom:.45rem}
.icon-card p{color:var(--muted);font-size:.93rem;margin:0}

/* Steps */
/* No numeric bullet: the big gold 01-04 read as filler on the cards rather
   than as information, the same way the numbered badges on the service cards
   did. The steps are already in order. */
.steps{display:grid;gap:1rem}
.step{display:grid;gap:1.2rem;padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);align-items:start;border-left:2px solid rgba(245,165,36,.45)}
.step h3{margin-bottom:.35rem}
.step p{margin:0;color:var(--muted)}

/* Split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev>*:first-child{order:2}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
.frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative;background:var(--surface-2)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame.portrait{aspect-ratio:4/5}
.frame.landscape{aspect-ratio:16/10}
.frame.square{aspect-ratio:1}
.frame-tag{position:absolute;left:1rem;bottom:1rem;padding:.45rem .8rem;border-radius:999px;background:rgba(7,7,8,.7);backdrop-filter:blur(6px);border:1px solid var(--line-2);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.check-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;color:#d4d4d8}
.check-list li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:.15rem;background:rgba(245,165,36,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a524' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid rgba(245,165,36,.35)}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;align-items:stretch}
.price{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .25s,border-color .25s}
.price:hover{transform:translateY(-4px);border-color:var(--line-2)}
.price.featured{border-color:rgba(245,165,36,.45);box-shadow:0 0 0 1px rgba(245,165,36,.25),0 30px 60px -30px rgba(245,165,36,.35)}
.price .badge{position:absolute;top:1rem;right:1rem;z-index:2;background:var(--gold);color:#120c00;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .65rem;border-radius:999px}
.price-img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.price-img img{width:100%;height:100%;object-fit:cover}
.price-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1;gap:.4rem}
.price-body .tier{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-2)}
.price-body h3{font-size:1.35rem}
.amount{font-family:var(--font-display);font-size:2.7rem;line-height:1;letter-spacing:.02em;margin:.3rem 0 .2rem}
.amount small{font-family:var(--font-body);font-size:.85rem;color:var(--muted);letter-spacing:0;text-transform:none;margin-left:.3rem}
.price-body ul{list-style:none;padding:0;margin:.6rem 0 1.2rem;display:grid;gap:.5rem;color:#d4d4d8;font-size:.93rem}
.price-body ul li{display:flex;gap:.6rem}
.price-body ul li::before{content:"—";color:var(--gold)}
.price-body .btn{margin-top:auto;width:100%}

/* Testimonials */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;display:flex;flex-direction:column;gap:1rem;height:100%}
.quote .stars{color:var(--gold);letter-spacing:.15em;font-size:.9rem}
.quote h3{font-size:1.15rem}
.quote p{margin:0;color:#d4d4d8;font-size:1rem;flex:1}
.quote .who{display:flex;align-items:center;gap:.85rem;border-top:1px solid var(--line);padding-top:1rem}
.quote .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff}
.quote .who b{display:block;font-size:.95rem}
.quote .who span{font-size:.82rem;color:var(--muted)}
.logo-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
.logo-row img{height:64px;width:64px;object-fit:cover;border-radius:50%;background:#fff;border:1px solid var(--line-2);filter:grayscale(1);opacity:.8;transition:all .3s}
.logo-row img:hover{filter:none;opacity:1;transform:scale(1.08)}

/* Gallery */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vgrid{grid-template-columns:1fr}}
.vtile{position:relative;aspect-ratio:16/9;border-radius:var(--radius-s);overflow:hidden;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;text-align:left;padding:0;display:block;width:100%;color:inherit;font-family:inherit}
.vtile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vtile:hover img{transform:scale(1.06)}
.vtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,7,8,.85))}
.vtile .play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:rgba(245,165,36,.95);display:grid;place-items:center;z-index:2;transition:transform .2s;box-shadow:0 10px 30px -8px rgba(245,165,36,.8)}
.vtile .play svg{width:24px;height:24px;margin-left:3px;fill:#120c00}
.vtile:hover .play{transform:scale(1.1)}
.vtile .cap{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;font-weight:700;font-size:.95rem;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.vtile.short{aspect-ratio:9/16}
.pgrid{columns:3;column-gap:1rem}
@media (max-width:900px){.pgrid{columns:2}}
@media (max-width:560px){.pgrid{columns:1}}
.pgrid a{display:block;break-inside:avoid;margin-bottom:1rem;border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.pgrid img{width:100%;transition:transform .6s,filter .3s}
.pgrid a:hover img{transform:scale(1.04)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:2rem}
.lb.on{display:flex}
.lb-inner{width:min(1100px,100%);max-height:100%;position:relative}
.lb-inner iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-s);background:#000}
.lb-inner.short iframe{aspect-ratio:9/16;max-height:85vh;width:auto;margin:auto;display:block}
.lb-inner img{max-width:100%;max-height:85vh;margin:auto;border-radius:var(--radius-s)}
.lb-close{position:absolute;top:-52px;right:0;background:none;border:1px solid var(--line-2);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.lb-close svg{width:18px;height:18px}
.lb-cap{color:var(--muted);text-align:center;margin-top:.8rem;font-size:.9rem}

/* Gear */
.gear{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.gear-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem;text-align:center;transition:border-color .2s,transform .2s}
.gear-item:hover{border-color:var(--line-2);transform:translateY(-3px)}
.gear-item img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:8px;margin-bottom:.8rem}
.gear-item b{display:block;font-size:.92rem}
.gear-item span{font-size:.78rem;color:var(--dim)}

/* CTA band */
.cta{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-2);padding:clamp(2.5rem,6vw,4.5rem);text-align:center;background:radial-gradient(900px 400px at 20% 0%,rgba(245,165,36,.22),transparent 60%),radial-gradient(700px 400px at 90% 100%,rgba(109,77,242,.28),transparent 60%),var(--surface)}
.cta h2{margin-bottom:.8rem}
.cta p{max-width:56ch;margin:0 auto 1.6rem;color:var(--muted)}
.cta .btn-row{justify-content:center}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:1rem 0;background:var(--bg-2)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:mq 40s linear infinite}
.marquee-track span{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:3rem;white-space:nowrap}
.marquee-track span::after{content:"✦";color:var(--gold);font-size:1rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* Contact */
.form{display:grid;gap:1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}
.field label{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--text);padding:.9rem 1rem;border-radius:12px;font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,165,36,.18)}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ad' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px}
.form-note{font-size:.85rem;color:var(--dim)}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;display:flex;gap:1rem;align-items:flex-start;transition:border-color .2s}
.contact-card:hover{border-color:var(--line-2)}
.contact-card .ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(245,165,36,.18),rgba(109,77,242,.18));border:1px solid var(--line-2);color:var(--gold)}
.contact-card .ic svg{width:22px;height:22px}
.contact-card b{display:block;margin-bottom:.15rem}
.contact-card span{color:var(--muted);font-size:.93rem;word-break:break-word}
.form-status{padding:1rem 1.2rem;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);display:none}
.form-status.on{display:block}

/* Footer */
footer{border-top:1px solid var(--line);padding:4rem 0 2rem;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:1120px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2rem}}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:1rem;font-weight:700}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-grid ul a{color:var(--muted);font-size:.95rem}
.foot-grid ul a:hover{color:var(--text)}
.foot-brand p{color:var(--muted);max-width:38ch;font-size:.95rem;margin-top:1rem}
.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--text);transition:all .2s}
.socials a:hover{background:var(--gold);color:#120c00;border-color:var(--gold)}
.socials svg{width:18px;height:18px}
.foot-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--dim)}
.foot-bottom a{color:var(--muted)}
.foot-bottom a:hover{color:var(--gold)}

/* Reveal */
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero-media.kb img,.marquee-track{animation:none}}

/* Page hero (inner) */
.page-hero{position:relative;padding:calc(var(--nav-h) + 5rem) 0 4rem;overflow:hidden;isolation:isolate;min-height:62svh;display:flex;align-items:flex-end}
.page-hero .hero-media{opacity:.55}
.page-hero .hero-shade{background:linear-gradient(180deg,rgba(7,7,8,.7),rgba(7,7,8,.35) 50%,var(--bg))}
.page-hero h1{font-size:clamp(3rem,8vw,6.4rem)}
.page-hero .lead{margin-top:1.2rem}
.crumbs{font-size:.8rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.2rem;display:flex;gap:.5rem}
.crumbs a:hover{color:var(--gold)}

/* Misc */
.phone{width:min(320px,100%);margin:auto;border-radius:36px;border:8px solid #1c1c22;overflow:hidden;background:#000;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px var(--line-2)}
.phone video,.phone img{width:100%;display:block}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.tag-cloud span{padding:.45rem .85rem;border-radius:999px;border:1px solid var(--line-2);font-size:.85rem;color:var(--muted)}
.divider{height:1px;background:var(--line);margin:0}
.notice{border:1px solid rgba(245,165,36,.35);background:rgba(245,165,36,.07);border-radius:12px;padding:1rem 1.2rem;font-size:.92rem;color:#e4e4e7}
.notice b{color:var(--gold)}
.big-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.big-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.big-list li:first-child{border-top:1px solid var(--line)}
.big-list li span{color:var(--muted);font-size:.9rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.tabs a{padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line-2);font-size:.9rem;font-weight:600;color:var(--muted);transition:all .2s}
.tabs a:hover,.tabs a.active{color:#120c00;background:var(--gold);border-color:var(--gold)}

/* Green Flash connector */
/* ---- Green Flash (Max is a co-founder) ---- */
.btn-gf{background:rgba(7,7,8,.45);border-color:rgba(108,255,46,.28);color:var(--text);backdrop-filter:blur(8px);padding:.65rem 1.15rem;font-size:.85rem;box-shadow:0 0 16px rgba(108,255,46,.16),inset 0 0 0 0 rgba(108,255,46,0);transition:transform .2s,box-shadow .3s,border-color .3s,background .3s}
.btn-gf:hover{border-color:rgba(108,255,46,.5);box-shadow:0 0 22px rgba(108,255,46,.28)}
.pill-gf{gap:.4rem;padding:.4rem .95rem .4rem .7rem;border-color:rgba(108,255,46,.55);color:var(--text);box-shadow:0 0 12px rgba(108,255,46,.28),0 0 28px rgba(108,255,46,.12);animation:gfGlow 2.6s ease-in-out infinite;transition:box-shadow .3s,border-color .3s,background .3s,transform .2s}
.pill-gf svg{width:14px;height:14px;color:#6cff2e;flex:none;filter:drop-shadow(0 0 5px rgba(108,255,46,.9))}
.pill-gf:hover,.pill-gf:focus-visible{border-color:#8dff55;background:rgba(108,255,46,.1);box-shadow:0 0 18px rgba(108,255,46,.55),0 0 42px rgba(108,255,46,.25);transform:translateY(-1px);animation:none}
@keyframes gfGlow{0%,100%{box-shadow:0 0 12px rgba(108,255,46,.28),0 0 28px rgba(108,255,46,.12)}50%{box-shadow:0 0 18px rgba(108,255,46,.5),0 0 40px rgba(108,255,46,.22)}}
.gf-flash{animation:gfFlash .55s cubic-bezier(.2,.7,.2,1)}
@keyframes gfFlash{0%{background:rgba(108,255,46,.55);border-color:rgba(141,255,85,.95);box-shadow:0 0 34px rgba(108,255,46,.75),0 0 0 6px rgba(108,255,46,.18);color:#061003}100%{background:rgba(7,7,8,.45);border-color:rgba(108,255,46,.28);box-shadow:0 0 14px rgba(108,255,46,.16);color:var(--text)}}
/* Lightning-bolt exit: full-screen strike + flash + curtain, then navigate (ported from links.greenflashusa.com) */
.bolt-exit{position:fixed;inset:0;z-index:9999;display:none;pointer-events:none}
.bolt-exit.strike{display:block;pointer-events:all}
.bolt-exit svg{position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);filter:drop-shadow(0 0 14px rgba(108,255,46,.9)) drop-shadow(0 0 40px rgba(108,255,46,.5))}
.bolt-exit path{fill:none;stroke:#eaffe0;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520}
.strike path{animation:boltDraw 200ms cubic-bezier(.7,0,1,1) forwards}
.strike path.branch{stroke-width:1.6;opacity:.8;animation-delay:70ms}
@keyframes boltDraw{to{stroke-dashoffset:0}}
.bolt-exit .flashfield{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(200,255,170,.95),rgba(108,255,46,.55) 45%,rgba(108,255,46,.2) 75%);opacity:0}
.strike .flashfield{animation:exitFlash 320ms 140ms linear forwards}
@keyframes exitFlash{0%{opacity:0}12%{opacity:1}30%{opacity:.15}45%{opacity:.85}100%{opacity:0}}
.bolt-exit .curtain{position:absolute;inset:0;background:var(--bg);opacity:0}
.strike .curtain{animation:exitCurtain 260ms 380ms ease-in forwards}
@keyframes exitCurtain{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pill-gf{animation:none}.strike path,.strike .flashfield,.strike .curtain{animation:none}}
.submenu .gf-item{border-top:1px solid rgba(255,255,255,.1);margin-top:.3rem;padding-top:.3rem}
.submenu .gf-item a::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(108,255,46,.7);margin-right:.5rem;vertical-align:middle}
.gf-section{padding-top:0}
.gf{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2rem,5vw,3.5rem);border-radius:var(--radius);border:1px solid var(--line-2);background:radial-gradient(700px 320px at 0% 0%,rgba(108,255,46,.08),transparent 60%),var(--surface);overflow:hidden}
.gf::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 55%,rgba(108,255,46,.05))}
.gf-mark{display:inline-block;margin-bottom:1.4rem}
.gf-mark img{width:153px;height:auto;transition:transform .25s}
.gf-mark:hover img{transform:scale(1.04)}
.gf .eyebrow{color:var(--muted)}
.gf .eyebrow::before{background:rgba(108,255,46,.7)}
.gf .lead{margin-bottom:1.4rem}
.gf-founders{font-size:.82rem;color:var(--dim);margin:1.2rem 0 0}
.gf-founders a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.gf-founders a:hover{color:var(--text)}
.gf-side{position:relative;z-index:1;display:grid;gap:.8rem}
.gf-services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
/* an odd number of rungs: the last one takes the whole row rather than leaving a hole beside it */
.gf-services li:last-child:nth-child(odd){grid-column:1 / -1}
.gf-services a{position:relative;display:block;height:100%;padding:.9rem 1rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-weight:700;font-size:.95rem;transition:border-color .2s,background .2s,transform .2s}
.gf-services a small{display:block;font-weight:400;color:var(--dim);font-size:.8rem;margin-top:.15rem;line-height:1.4}
.gf-services a:hover{border-color:rgba(108,255,46,.5);background:rgba(108,255,46,.06);transform:translateY(-2px)}
/* Sits above the title rather than in the corner: with seven rungs the
   longest chip ("from $12,500") and the longest title ("Multi-page
   websites") could not share a line without one running over the other. */
.gf-price{display:block;width:max-content;margin-bottom:.45rem;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:.18rem .5rem;white-space:nowrap}
.gf-book{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-top:.4rem}
.gf-book-label{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-right:.3rem}
.gf-book a{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem .5rem .7rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.85rem;font-weight:700;line-height:1.15;transition:border-color .2s,background .2s}
.gf-book a svg{width:16px;height:16px;color:var(--muted);flex:none}
.gf-book a small{display:block;font-weight:400;color:var(--dim);font-size:.7rem}
.gf-book a:hover{border-color:rgba(108,255,46,.5);background:rgba(108,255,46,.06)}
.gf-strip-wrap{padding:0}
.gf-strip{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.2rem 1.5rem;border-radius:var(--radius);border:1px solid var(--line-2);background:linear-gradient(90deg,rgba(108,255,46,.05),transparent 50%),var(--surface)}
.gf-strip p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.gf-strip p b{color:var(--text)}
.gf-strip-mark img{width:102px;height:auto}
.gf-strip-links{display:flex;gap:.5rem;flex-wrap:wrap}
.contact-card.gf{background:linear-gradient(135deg,rgba(108,255,46,.05),transparent 60%),var(--surface)}
.contact-card.gf:hover{border-color:rgba(108,255,46,.45)}
.foot-gf ul a em{font-style:normal;color:var(--dim);font-size:.76rem;margin-left:.45rem}
.foot-gf ul a:hover em{color:var(--muted)}
.foot-gf-link{display:inline-flex;align-items:center;gap:.5rem}
.foot-gf-link img{height:18px;width:auto;opacity:.85}
@media (max-width:860px){.gf{grid-template-columns:1fr}.gf-services{grid-template-columns:1fr 1fr}.gf-strip{grid-template-columns:1fr;gap:1rem}}
@media (max-width:480px){.gf-services{grid-template-columns:1fr}}


/* =====================================================================
   v2 — the upscale: motion system, flight deck, swipe rails, bubbles
   Everything that hides content is scoped to html.motion, which the inline
   bootstrap in <head> only adds when JavaScript runs and the visitor has not
   asked for reduced motion — and every hidden thing carries a self-reveal so
   a page whose script never arrives still shows all of its text.
   ===================================================================== */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.7,0,.2,1)}

/* --- scroll progress ------------------------------------------------- */
.prog{position:fixed;inset:0 0 auto 0;height:2px;z-index:200;pointer-events:none}
.prog i{display:block;height:100%;background:var(--grad);transform:scaleX(var(--sp,0));transform-origin:0 50%;box-shadow:0 0 14px rgba(245,165,36,.45)}

/* --- reveal on scroll ------------------------------------------------- */
html.motion .rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease);animation:dgSelf 0s linear 2.8s forwards}
html.motion .rv.rv.in{opacity:1;transform:none;animation:none}
.rv.in{opacity:1;transform:none;animation:none}
@keyframes dgSelf{to{opacity:1;transform:none}}

/* --- text that flies in, word by word --------------------------------- */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.swi{display:inline-block;will-change:transform,opacity}
html.motion h1[data-split],html.motion .section-head h2,html.motion .cta h2,html.motion .split h2,html.motion .gf-intro h2{opacity:0;animation:dgFade 0s linear 2.8s forwards}
html.motion .dsplit.dsplit{opacity:1;animation:none}
html.motion .dsplit .swi{transform:translateY(115%) rotate(3deg);opacity:0}
html.motion .dsplit.in .swi{transform:none;opacity:1;transition:transform 1s var(--ease),opacity .5s ease-out;transition-delay:calc(var(--i,0) * 42ms)}
html.motion [data-fade]{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);animation:dgSelf 0s linear 2.8s forwards}
html.motion [data-fade].in.in{opacity:1;transform:none;animation:none}
[data-fade].in{opacity:1;transform:none;animation:none}
@keyframes dgFade{to{opacity:1}}

/* =====================================================================
   THE FLIGHT DECK — top of the home page
   ===================================================================== */
.hero-flight{padding-bottom:6.2rem;isolation:isolate}
.hero-flight .wrap{position:relative;z-index:2}
.fd-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.fd-plate{position:absolute;inset:0;opacity:0;transform:scale(calc(1.07 + var(--hs,0) * .1));transition:opacity 1.4s ease,transform 1.4s ease}
.fd-plate.is-on{opacity:1;transform:scale(calc(1 + var(--hs,0) * .1))}
.fd-plate video,.fd-plate img{width:100%;height:100%;object-fit:cover;object-position:center}
.fd-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,7,8,.6) 0,rgba(7,7,8,.08) 24%,rgba(7,7,8,.2) 52%,rgba(7,7,8,.7) 84%,var(--bg) 100%),
  linear-gradient(100deg,rgba(7,7,8,.88) 0,rgba(7,7,8,.6) 36%,rgba(7,7,8,.1) 68%,transparent 100%),
  radial-gradient(120% 70% at 50% 108%,rgba(109,77,242,.3),transparent 66%)}
.fd-grid{position:absolute;inset:0;opacity:.16;background-image:
  linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:100% 33.333%,33.333% 100%;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 42%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 42%,#000,transparent 78%)}

/* the drone's flight lane */
.fd-lane{position:absolute;left:0;right:0;top:clamp(84px,15vh,168px);height:clamp(90px,17vw,210px);z-index:1;pointer-events:none}
.fd-fly{--dw:clamp(158px,27vw,320px);position:absolute;left:0;top:0;width:var(--dw);
  translate:-26vw 0;animation:fdCross 11s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.fd-bob{position:relative;animation:fdBob 3.4s ease-in-out infinite}
.mavic{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(124,77,255,.28))}
.fd-beam{position:absolute;left:50%;top:62%;width:52%;height:min(46vh,340px);translate:-50% 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(167,139,250,.28),rgba(167,139,250,.04) 55%,transparent);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);animation:fdBeam 3.4s ease-in-out infinite;filter:blur(1px)}
@keyframes fdCross{
  0%{translate:-26vw 0;rotate:-7deg}
  50%{translate:calc(50vw - var(--dw) / 2) 0;rotate:0deg}
  100%{translate:calc(104vw - var(--dw)) 0;rotate:6deg}}
@keyframes fdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes fdBeam{0%,100%{opacity:.75}50%{opacity:.4}}
.dg-spin{animation:dgSpin .17s linear infinite;transform-origin:0 0}
.dg-spin.r{animation-direction:reverse}
@keyframes dgSpin{to{transform:rotate(360deg)}}
.dg-led{animation:dgLed 1.5s steps(2,end) infinite}
@keyframes dgLed{50%{opacity:.18}}
.dg-gimbal{transform-box:fill-box;transform-origin:50% 6%;animation:dgGimbal 11s ease-in-out infinite}
@keyframes dgGimbal{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}62%{transform:rotate(4.5deg)}}

/* camera HUD */
.fd-hud{position:absolute;z-index:3;left:0;right:0;top:calc(var(--nav-h) + .9rem);display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding-inline:max(1.25rem,calc((100vw - var(--max)) / 2 + 0px));font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#e6e6ea;pointer-events:none}
.fd-hud>span{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .65rem;border-radius:999px;background:rgba(7,7,8,.5);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.fd-rec i{width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px #ff3b3b;animation:dgRec 1.2s steps(2) infinite}
@keyframes dgRec{50%{opacity:.15}}
.fd-place{color:var(--gold-2);border-color:rgba(245,165,36,.4)!important}
.fd-cap{color:var(--muted);font-weight:700;letter-spacing:.1em;text-transform:none}
.fd-tel b{color:var(--violet-2)}
@media (max-width:760px){.fd-hud>.fd-cap,.fd-hud>.fd-tel{display:none}}

/* the location chips: tap one and the drone flies there */
.fd-chips{position:absolute;z-index:3;left:0;right:0;bottom:1.1rem;display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;
  padding-inline:max(1.25rem,calc((100vw - var(--max)) / 2));padding-block:.2rem}
.fd-chips::-webkit-scrollbar{display:none}
.fd-chip{display:inline-flex;align-items:center;gap:.45rem;flex:none;padding:.42rem .8rem;border-radius:999px;cursor:pointer;
  background:rgba(7,7,8,.5);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--muted);font:600 .74rem/1 var(--font-body);letter-spacing:.04em;transition:color .25s,border-color .25s,background .25s,transform .2s}
.fd-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;transition:.25s}
.fd-chip:hover{color:var(--text);border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
.fd-chip.is-on{color:#120c00;background:var(--gold);border-color:var(--gold)}
.fd-chip.is-on i{background:#120c00;opacity:1;box-shadow:0 0 0 3px rgba(18,12,0,.18)}
.hero-flight .scroll-cue{z-index:3;right:max(1.25rem,calc((100vw - var(--max)) / 2));bottom:3.6rem}
@media (max-width:820px){.hero-flight .scroll-cue{display:none}.fd-chips{bottom:.9rem}}

/* the drone also crosses the service page heroes */
.page-hero.has-drone{isolation:isolate}
.page-hero.has-drone .wrap{position:relative;z-index:2}
.hero-lane{top:clamp(80px,13vh,150px)}
.hero-lane .fd-fly{--dw:clamp(130px,20vw,240px);animation-duration:19s}

/* =====================================================================
   FLOATING BUBBLES — Max edits /bubbles.json to change these
   ===================================================================== */
.bubbles{position:absolute;inset:0;z-index:3;pointer-events:none}
.bub{position:absolute;left:var(--bx);top:var(--by);pointer-events:auto;cursor:grab;touch-action:none;
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;white-space:nowrap;
  font:700 .78rem/1.2 var(--font-body);letter-spacing:.02em;color:#efeaff;text-decoration:none;
  background:radial-gradient(120% 130% at 30% 20%,rgba(255,255,255,.24),rgba(255,255,255,.05) 55%,rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(11px) saturate(140%);-webkit-backdrop-filter:blur(11px) saturate(140%);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.4);
  translate:var(--dx,0) var(--dy,0);
  animation:dgFloat calc(9s + var(--bi) * 1.7s) ease-in-out calc(var(--bi) * -2.3s) infinite;
  transition:box-shadow .3s,border-color .3s,scale .35s var(--ease)}
.bub::before{content:"";position:absolute;left:12%;top:14%;width:26%;height:28%;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(3px);opacity:.55;pointer-events:none}
.bub-gold{border-color:rgba(245,165,36,.55);color:#ffe4b0;box-shadow:0 10px 30px -12px rgba(245,165,36,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.bub-violet{border-color:rgba(155,134,255,.6);color:#ded3ff;box-shadow:0 10px 30px -12px rgba(109,77,242,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.bub:hover,.bub:focus-visible{scale:1.08;border-color:rgba(255,255,255,.55);box-shadow:0 16px 40px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.bub.grabbed{animation-play-state:paused;scale:1.1;cursor:grabbing;transition:none}
.bub.settle{transition:translate .9s var(--ease)}
@keyframes dgFloat{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(-9px,-16px,0)}66%{transform:translate3d(8px,-7px,0)}}
.bub-pop{position:absolute;z-index:4;pointer-events:none;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:dgPop .55s ease-out forwards}
@keyframes dgPop{from{transform:scale(.4);opacity:.9}to{transform:scale(2.2);opacity:0}}
@media (max-width:860px){
  .bubbles{inset:calc(var(--nav-h) + 8.6rem) 0 auto 0;display:flex;flex-wrap:wrap;gap:.4rem;z-index:4;
    padding-inline:max(1.25rem,calc((100vw - var(--max)) / 2))}
  .bub{position:relative;left:auto;top:auto;font-size:.7rem;padding:.42rem .75rem}
  .bubbles .bub:nth-child(n+4){display:none}}
@media (max-width:420px){.bubbles .bub:nth-child(n+3){display:none}}

/* =====================================================================
   SWIPE RAILS
   ===================================================================== */
.swipe{position:relative}
.swipe-rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.3rem .25rem 1.1rem;margin-inline:-.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.swipe-rail::-webkit-scrollbar{display:none}
.swipe-rail:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--radius)}
html.js .swipe-rail{cursor:grab}
html.js .swipe-rail.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
html.js .swipe-rail.dragging a,html.js .swipe-rail.dragging button{pointer-events:none}
.swipe-slide{flex:0 0 min(84%,var(--slide,340px));scroll-snap-align:center;display:flex}
.swipe-slide:first-child{scroll-snap-align:start}
.swipe-slide:last-child{scroll-snap-align:end}
.swipe-slide>*{width:100%;height:100%;margin:0}
.swipe-v .swipe-slide{--slide:520px}
.swipe-q .swipe-slide{--slide:420px}
.swipe-gear .swipe-slide{--slide:196px}
.swipe .rv{opacity:1;transform:none;animation:none}
.swipe.fits .swipe-dots,.swipe.fits .swipe-arw,.swipe.fits .swipe-hint{display:none}
.swipe-arw{position:absolute;top:calc(50% - .8rem);translate:0 -50%;z-index:4;width:46px;height:46px;border-radius:50%;display:none;place-items:center;
  background:rgba(7,7,8,.62);border:1px solid var(--line-2);color:var(--text);cursor:pointer;padding:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s,opacity .25s,transform .2s}
html.js .swipe-arw{display:grid}
.swipe-arw svg{width:20px;height:20px}
.swipe-arw:hover{background:var(--gold);color:#120c00;border-color:var(--gold);transform:scale(1.06)}
.swipe-arw.prev{left:-14px}
.swipe-arw.next{right:-14px}
.swipe-arw[disabled]{opacity:0;pointer-events:none}
@media (max-width:1240px){.swipe-arw.prev{left:2px}.swipe-arw.next{right:2px}}
@media (hover:none){.swipe-arw{display:none!important}}
.swipe-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.1rem}
.swipe-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.2);cursor:pointer;transition:width .3s var(--ease),background .3s}
.swipe-dot.is-on{width:28px;background:var(--gold)}
.swipe-hint{display:none;position:absolute;right:.2rem;top:-2.1rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
@media (hover:none){.swipe-hint{display:block}}
.swipe.touched .swipe-hint{opacity:0;transition:opacity .4s}
.swipe-gear .gear-item{height:100%}
.swipe-q .quote{height:100%}

/* =====================================================================
   POLISH — cards that follow the pointer, buttons with a sheen, counters
   ===================================================================== */
.card,.price,.icon-card,.gear-item,.quote{transform-style:preserve-3d}
html.motion .card{transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
html.motion .card.tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.012)}
.card::after,.icon-card::after,.price::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 60%)}
.card:hover::after,.icon-card:hover::after,.price:hover::after{opacity:1}
.icon-card,.price{position:relative;overflow:hidden}
.icon-card{transition:transform .35s var(--ease),border-color .3s,background .3s}
.icon-card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:transform .7s var(--ease-io)}
.btn:hover::before{transform:translateX(120%) skewX(-18deg)}
.btn-gold:hover{box-shadow:0 14px 40px -10px rgba(245,165,36,.8)}
[data-magnet]{will-change:transform}
.btn-book{font-size:1.02rem;padding:1.05rem 1.9rem}
.btn-book::after{content:"";position:absolute;inset:-2px;z-index:-2;border-radius:999px;background:var(--grad);opacity:0;filter:blur(12px);transition:opacity .35s}
.btn-book:hover::after{opacity:.7}
.stat b{transition:color .3s}
.stat{position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:auto auto 0 0;width:100%;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.stats.in .stat::before{transform:scaleX(1)}
.stats.in .stat:nth-child(2)::before{transition-delay:.1s}
.stats.in .stat:nth-child(3)::before{transition-delay:.2s}
.stats.in .stat:nth-child(4)::before{transition-delay:.3s}
.section-head h2,.cta h2,.split h2{position:relative}
.marquee-track span{transition:color .3s}
.marquee:hover .marquee-track span{color:#d7d7de}
.frame{transition:transform .5s var(--ease),border-color .3s}
.frame:hover{transform:scale(1.015);border-color:var(--line-2)}
html.motion [data-parallax]{will-change:transform;transform:translate3d(0,calc(var(--p,0) * var(--pf,-40px)),0)}
.nav{transition:border-color .3s,height .3s}
.nav.scrolled{height:64px}
.vtile{transition:transform .35s var(--ease),border-color .3s}
.vtile:hover{transform:translateY(-4px);border-color:var(--line-2)}

@media (prefers-reduced-motion:reduce){
  .fd-fly,.fd-bob,.fd-beam,.dg-spin,.dg-led,.dg-gimbal,.fd-rec i,.bub{animation:none!important}
  .fd-fly{translate:calc(94vw - var(--dw)) 0;rotate:0deg}   /* parked clear of the headline */
  .prog{display:none}
  .btn::before{display:none}
}

/* --- scroll past the hero: the camera pushes in, the deck lets go ----- */
html.motion .hero-flight .hero-inner{transform:translateY(calc(var(--hs,0) * -70px));opacity:calc(1 - var(--hs,0) * 1.25);will-change:transform,opacity}
html.motion .hero-flight .fd-hud,html.motion .hero-flight .fd-chips,html.motion .hero-flight .bubbles,html.motion .hero-flight .fd-lane{opacity:calc(1 - var(--hs,0) * 1.5)}
html.motion .hero-flight .fd-grid{opacity:calc(.16 - var(--hs,0) * .16)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* --- the flight deck on a phone: a clean band up top, then the pitch ---- */
@media (max-width:860px){
  .hero-flight{padding-top:calc(var(--nav-h) + 10.6rem);padding-bottom:4.4rem}
  .hero-flight h1{font-size:clamp(2.3rem,9.4vw,4rem)}
  .hero-flight .lead{font-size:.92rem;line-height:1.55;margin:.9rem 0 1.3rem;max-width:34ch}
  .hero-flight .hero-pills{margin-bottom:1rem;gap:.35rem}
  .hero-flight .hero-pills .pill{font-size:.66rem;padding:.34rem .68rem;letter-spacing:.03em}
  /* on a phone keep the two that sell: where Max works and the view count */
  .hero-flight .hero-pills .pill:nth-child(2),.hero-flight .hero-pills .pill:nth-child(3){display:none}
  .hero-flight .btn-row .btn{flex:1 1 auto;justify-content:center}
  .hero-flight .btn-book{flex-basis:100%;padding:.95rem 1.4rem}
  .fd-lane{top:calc(var(--nav-h) + 2.4rem);height:clamp(72px,24vw,130px)}
  .fd-fly{--dw:min(52vw,230px);animation-duration:9s}
  .fd-beam{height:34vh}
  .page-hero.has-drone .hero-lane{top:calc(var(--nav-h) + 1.6rem)}
}

/* long service links were pushing the five-column footer past a 1024px viewport */
.foot-grid ul{min-width:0}
.foot-grid ul a{overflow-wrap:anywhere}

/* =====================================================================
   THE SWATTERS — small drones that fly in from an edge, patrol the screen,
   and only leave when you tap one out of the sky.

   Neo, Avata and the Mini 3 Pro are to scale against each other by true
   maximum span, guards or propellers included, unfolded: 157mm, 180mm and
   362mm. The Mavic is set 40% over the Mini rather than its literal 390mm,
   because at roamer size the span ratio reads as "same size" when the real
   aircraft is four times the weight. Move one width and move them all.
   ===================================================================== */
.swat-defs{position:absolute;width:0;height:0;overflow:hidden}
.swatters{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.swat{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;will-change:transform;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--leg,3s) cubic-bezier(.42,0,.3,1);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
.swat svg{display:block;width:100%;height:auto}
.swat-bob{animation:swatBob 3.1s ease-in-out infinite}
@keyframes swatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.swat-neo{width:39px}
.swat-avata{width:44px}
.swat-mini{width:89px}
.swat-mavic{width:125px}
@media (max-width:640px){
  .swat-neo{width:27px}.swat-avata{width:31px}.swat-mini{width:63px}.swat-mavic{width:88px}}
/* swatted: motors cut and it tumbles out of the bottom of the screen */
.swat.downed{pointer-events:none;transition:transform 1.15s cubic-bezier(.45,.02,.85,.5),opacity .3s linear .85s;opacity:0}
.swat.downed .swat-bob{animation:none}
.swat.downed .dg-spin{animation-duration:1.6s;opacity:.3}
@media (prefers-reduced-motion:reduce){.swatters{display:none}}

/* =====================================================================
   THE DRONEGOD TEE — the shirt turns and each print is sprayed on as its
   own face comes round to meet you.

   Lifted from the shirt on links.greenflashusa.com, with the garment in
   Max's purple: each print sits over the blank and is uncovered by a mask
   that blooms out of the print's own centre, so the reveal starts on the
   artwork rather than on bare fabric. Max's drone print sprays purple; the
   Green Flash badge on the other side keeps the green it wears on the links
   page. make-tee-layers.py builds the three images and prints the mask
   positions below.
   ===================================================================== */
.tee-stage{
  --tee-blank:url("/assets/img/maxtee-blank.webp");
  --tee:url("/assets/img/maxtee-front.webp");
  --tee-back:url("/assets/img/maxtee-back.webp");
  perspective:900px;display:flex;justify-content:center;width:100%}
.tee-float{position:relative;width:min(26rem,92%);animation:teeFloat 6.5s ease-in-out infinite}
.tee-spin{position:relative;aspect-ratio:651 / 608;transform-style:preserve-3d;animation:teeSpin 16s linear infinite}
.tee-face{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat;backface-visibility:hidden}
.tee-front-base{background-image:var(--tee-blank)}
.tee-back-base{background-image:var(--tee-blank);transform:rotateY(180deg)}
.tee-front-art,.tee-back-art{
  -webkit-mask-image:radial-gradient(circle,#000 38%,rgba(0,0,0,.45) 55%,transparent 70%);
  mask-image:radial-gradient(circle,#000 38%,rgba(0,0,0,.45) 55%,transparent 70%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tee-front-art{background-image:var(--tee);
  -webkit-mask-position:48.9% 54%;mask-position:48.9% 54%;
  animation:teeSprayFront 16s ease-in-out infinite}
/* Stored unmirrored: by the time this face is toward you the parent has also
   turned 180deg, so the rotations sum to 360 and the badge reads correctly. */
.tee-back-art{background-image:var(--tee-back);transform:rotateY(180deg);
  -webkit-mask-position:62.4% 28.5%;mask-position:62.4% 28.5%;
  animation:teeSprayBack 16s ease-in-out infinite}
.tee-mist{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.tee-mist--front{left:48.9%;top:54%;width:60%;height:100%;filter:blur(13px);
  /* brighter than the green on the links page has to be: that mist lands on a
     black shirt, this one on purple, and a mid-violet cloud on purple fabric
     barely reads as spray at all */
  background:
    radial-gradient(closest-side,rgba(228,218,255,.72),transparent 70%),
    radial-gradient(closest-side at 34% 62%,rgba(167,139,250,.52),transparent 70%),
    radial-gradient(closest-side at 68% 36%,rgba(198,174,255,.46),transparent 68%);
  animation:teeMistFront 16s ease-in-out infinite}
.tee-mist--back{left:62.4%;top:28.5%;width:48%;height:36%;filter:blur(10px);
  background:
    radial-gradient(closest-side,rgba(141,255,85,.5),transparent 72%),
    radial-gradient(closest-side at 34% 62%,rgba(108,255,46,.34),transparent 70%),
    radial-gradient(closest-side at 68% 36%,rgba(108,255,46,.28),transparent 68%);
  animation:teeMistBack 16s ease-in-out infinite}
@keyframes teeFloat{0%,100%{transform:translateY(-.5rem)}50%{transform:translateY(.5rem)}}
@keyframes teeSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
/* The spin runs 0-360deg over the cycle: the front faces us near 0% and 100%,
   the back near 50%. Each print sprays on just before its own face comes
   round, and clears while it is turned away and cannot be seen. */
@keyframes teeSprayFront{
  0%,14%{-webkit-mask-size:300% 300%;mask-size:300% 300%}
  28%,84%{-webkit-mask-size:0% 0%;mask-size:0% 0%}
  100%{-webkit-mask-size:300% 300%;mask-size:300% 300%}}
@keyframes teeSprayBack{
  0%,30%{-webkit-mask-size:0% 0%;mask-size:0% 0%}
  46%,64%{-webkit-mask-size:300% 300%;mask-size:300% 300%}
  78%,100%{-webkit-mask-size:0% 0%;mask-size:0% 0%}}
@keyframes teeMistFront{
  0%,84%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  90%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}
  97%{opacity:.28;transform:translate(-50%,-50%) scale(1.14)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes teeMistBack{
  0%,30%{opacity:0;transform:translate(-50%,-50%) scale(.84)}
  38%{opacity:.8;transform:translate(-50%,-50%) scale(1.05)}
  48%{opacity:.22;transform:translate(-50%,-50%) scale(1.13)}
  52%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}}
@media (prefers-reduced-motion:reduce){
  .tee-float,.tee-spin,.tee-front-art,.tee-back-art,.tee-mist{animation:none}
  .tee-front-art,.tee-back-art{-webkit-mask-size:300% 300%;mask-size:300% 300%}
  .tee-mist{opacity:0}}