/* Visie Drones — brand tokens */
:root{
  --ink:#15161a;        /* page base */
  --graphite:#1e1f24;   /* panels */
  --line:#2c2e35;
  --text:#d9dbde;
  --muted:#9a9ea6;
  --silver:#c9cdd3;     /* pastel silver */
  --silver-pale:#e6e8eb;
  --gold:#e9d8a6;       /* pastel champagne gold */
  --gold-pale:#f3e9c9;
  --gold-deep:#cbb681;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-pale)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img,svg{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;color:var(--silver-pale);margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6vw,4.8rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.45rem}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;display:block}
.lede{font-size:1.2rem;color:var(--silver);max-width:62ch}
.muted{color:var(--muted)}
em,i{font-family:var(--display);font-size:1.08em;font-style:italic;color:var(--gold-pale)}

/* header */
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:8px 12px}
.skip:focus{left:8px;z-index:99}
header.site{position:sticky;top:0;z-index:50;background:rgba(21,22,26,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--silver-pale);font-family:var(--display);font-size:1.35rem;letter-spacing:.1em;white-space:nowrap}
.brand small{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;color:var(--muted);display:block;line-height:1;margin-top:2px}
.brand .mark{width:38px;height:38px}
nav.primary{display:flex;gap:28px;align-items:center}
nav.primary a{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
nav.primary a[aria-current]{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:3px}
nav.primary a.cta{border:1px solid var(--gold);padding:9px 16px;color:var(--gold);border-radius:2px}
nav.primary a.cta:hover{background:var(--gold);color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--silver);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;padding:8px 12px}
@media (max-width:820px){
  nav.primary{display:none;position:absolute;left:0;right:0;top:72px;background:var(--ink);border-bottom:1px solid var(--line);flex-direction:column;padding:20px 24px;gap:18px;align-items:flex-start}
  nav.primary.open{display:flex}
  .menu-btn{display:block}
}

/* hero */
.hero{padding:96px 0 72px;position:relative;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1 span{color:var(--gold)}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;padding:14px 22px;border-radius:2px;border:1px solid var(--gold);color:var(--gold);transition:background .2s,color .2s}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold-pale)}
.btn.ghost{border-color:var(--line);color:var(--silver)}
.btn.ghost:hover{background:transparent;border-color:var(--silver);color:var(--silver-pale)}
.schematic{position:relative}
.schematic .frame{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--muted);display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.schematic svg .spin{transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}.hero{padding:56px 0 48px}}

/* strip of facts */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--graphite)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.facts div{padding:22px 0;border-right:1px solid var(--line);padding-right:20px;margin-right:20px}
.facts div:last-child{border:0}
.facts b{display:block;font-family:var(--display);font-size:1.55rem;color:var(--gold);font-weight:400}
.facts span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.facts .wrap{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border:0}}

/* sections */
section.block{padding:88px 0}
section.block.alt{background:var(--graphite);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:900px){.two,.three{grid-template-columns:1fr}}
.card{border:1px solid var(--line);padding:30px;border-radius:3px;background:var(--ink);transition:border-color .2s}
.card:hover{border-color:var(--gold-deep)}
.card h3{margin-top:0}
.card .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);margin-bottom:14px;display:block}
.card p{color:var(--muted);font-size:.98rem}
.card a.more{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
ul.clean li::before{content:"—";color:var(--gold);font-family:var(--mono)}
dl.spec{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;margin:0;font-size:.97rem}
dl.spec dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-top:4px}
dl.spec dd{margin:0;color:var(--text)}
.quote{border-left:2px solid var(--gold);padding:6px 0 6px 26px;font-family:var(--display);font-size:1.5rem;color:var(--silver-pale);max-width:52ch}
.quote cite{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:14px;font-style:normal}

/* process timeline — a true sequence, so numbering is warranted */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)}
.steps div{padding:26px 22px 26px 0;border-right:1px solid var(--line);margin-right:22px;counter-increment:s}
.steps div:last-child{border:0;margin:0}
.steps div::before{content:"0" counter(s);font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:14px}
.steps h3{font-size:1.25rem}
.steps p{font-size:.92rem;color:var(--muted);margin:0}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.steps{grid-template-columns:1fr}.steps div{border:0;margin:0;border-bottom:1px solid var(--line)}}

/* contact */
.cta-band{padding:96px 0;text-align:center;background:radial-gradient(ellipse at 50% 120%,rgba(233,216,166,.12),transparent 60%)}
.cta-band h2{font-size:clamp(2.2rem,5vw,3.6rem)}
form.contact{display:grid;gap:18px;max-width:620px}
form.contact label{display:grid;gap:6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
form.contact input,form.contact select,form.contact textarea{background:var(--graphite);border:1px solid var(--line);color:var(--text);padding:13px 14px;font:inherit;font-size:1rem;border-radius:2px}
form.contact input:focus,form.contact textarea:focus,form.contact select:focus{border-color:var(--gold);outline:none}
form.contact textarea{min-height:150px;resize:vertical}
form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){form.contact .row{grid-template-columns:1fr}}
form.contact button{justify-self:start;cursor:pointer;font-family:var(--mono)}
.status{font-family:var(--mono);font-size:.78rem;color:var(--gold);min-height:1.2em}

/* footer */
footer.site{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--muted);font-size:.9rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer.site h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);margin:0 0 14px}
footer.site a{color:var(--muted);display:block;padding:4px 0}
footer.site a:hover{color:var(--gold)}
footer.site .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em}
@media (max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.site .cols{grid-template-columns:1fr}}

/* page header (inner pages) */
.page-head{padding:80px 0 56px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.4rem,5vw,4rem)}
.prose{max-width:72ch}
.prose h2{margin-top:2.4em}
.prose ul{padding-left:1.2em;color:var(--text)}
.prose li{margin-bottom:.5em}
code{font-family:var(--mono);font-size:.88em;background:var(--graphite);border:1px solid var(--line);padding:1px 6px;border-radius:2px;color:var(--gold-pale)}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem;margin:24px 0}
table.cmp th,table.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp th{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:400}
table.cmp td:first-child{color:var(--silver-pale)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-size:1.35rem;color:var(--silver-pale);list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--gold);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:12px}