/* ===========================================================
   SOLAR VECTOR — single page site (Elysum Airborne)
   Same grey-blue base as the original fire.html
   =========================================================== */

:root{
  --red:#C8102E;
  --red-deep:#7A0A1E;
  --gold:#CBA135;
  --gold-dim:rgba(203,161,53,0.5);
  --ink:#1B222B;
  --ink-2:#12171D;
  --panel:#242D37;
  --panel-line:#3B4550;
  --paper:#EDEAE2;
  --dim:rgba(237,234,226,0.58);
  --dim-2:rgba(237,234,226,0.34);
  --amber:#E8862B;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0;
}
.mono{font-family:'DM Mono',monospace;}
.eyebrow{
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

.striping{
  height:6px;
  width:100%;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 18px,
    var(--gold) 18px 22px,
    var(--red) 22px 40px
  );
}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:40;
  background:rgba(18,23,29,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--panel-line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; max-width:1180px; margin:0 auto;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo-mark{
  width:26px;height:26px;
  border:1.5px solid var(--red);
  position:relative;
  transform:rotate(45deg);
  flex:none;
}
.logo-mark::after{ content:''; position:absolute; inset:5px; background:var(--gold); }
.logo-word{font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;letter-spacing:0.06em; color:var(--paper);}
.logo-sub{font-family:'DM Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:0.1em;display:block;margin-top:1px;}
.nav-links{display:flex; gap:30px; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; font-family:'DM Mono',monospace;}
.nav-links a{text-decoration:none; color:var(--dim); transition:color .2s;}
.nav-links a:hover{color:var(--paper);}
.nav-cta{
  border:1px solid var(--red); color:var(--paper); padding:9px 18px;
  font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; text-decoration:none; transition:background .2s; white-space:nowrap;
}
.nav-cta:hover{background:var(--red);}
@media(max-width:860px){ .nav-links{display:none;} }

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'DM Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding:13px 24px; text-decoration:none; display:inline-block; transition:all .2s; border:none; cursor:pointer;
}
.btn-primary{background:var(--red); color:var(--paper);}
.btn-primary:hover{background:#a80c25;}
.btn-ghost{border:1px solid var(--panel-line); color:var(--paper); background:transparent;}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ---------- HERO ---------- */
header.hero{ position:relative; padding:100px 0 70px; overflow:hidden; border-bottom:1px solid var(--panel-line); }
header.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(203,161,53,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,161,53,0.05) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 15%, black, transparent);
  pointer-events:none;
}
.hero-inner{ 
  position:relative; 
  z-index:1; 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.hero-inner > h1 {
  grid-column: 1;
  grid-row: 1;
}
.hero-inner > p.lede {
  grid-column: 1;
  grid-row: 2;
}
.hero-inner > .video-content {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: flex-start;
}
.hero-inner > .hero-meta {
  grid-column: 1 / 3;
  grid-row: 3;
}
.hero h1{ font-size:clamp(36px, 5.4vw, 60px); line-height:1.05; font-weight:700; }
.hero h1 span{ color:var(--red); }
.hero p.lede{ font-size:17px; line-height:1.68; color:var(--dim); max-width:60ch; margin-top:22px; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
.hero-inner .video-content {
  width: 100%;
}
.hero-inner .video-content video {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
}
@media(max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .hero-inner > h1 {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-inner > p.lede {
    grid-column: 1;
    grid-row: 2;
  }
  .hero-inner > .video-content {
    grid-column: 1;
    grid-row: 3;
    margin-top: 20px;
  }
  .hero-inner > .hero-meta {
    grid-column: 1;
    grid-row: 4;
  }
}
.meta-chip{
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--panel-line); padding:7px 12px;
}



/* ---------- SECTION HEAD ---------- */
.sec-head{ margin-bottom:40px; max-width:70ch; }
.sec-head h2{ font-size:clamp(26px,3.2vw,36px); margin-top:10px; line-height:1.1; }
.sec-head p{ font-size:15.5px; color:var(--dim); line-height:1.68; margin-top:14px; }

/* Video styling in oplossing section - side by side with text, full width like cap-grid */
#oplossing .sec-head{
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: none;
}
#oplossing .sec-head .text-content{
  flex: 1;
  max-width: 55%;
}
#oplossing .sec-head .video-content{
  flex: 0 0 42%;
}
#oplossing .sec-head video{
  width: 100%;
  filter: grayscale(100%);
}
@media(max-width:860px){
  #oplossing .sec-head{
    flex-direction: column;
  }
  #oplossing .sec-head .text-content,
  #oplossing .sec-head .video-content{
    max-width: 100%;
    flex: auto;
  }
}

section{ padding:84px 0; border-bottom:1px solid var(--panel-line); }
section.tint{ background:linear-gradient(180deg, rgba(200,16,46,0.05), transparent 45%); }

/* ---------- PROBLEM STATS ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--panel-line); border:1px solid var(--panel-line); margin-top:8px; }
.stat-card{ background:var(--ink); padding:28px 24px; }
.stat-card b{ display:block; font-family:'Oswald',sans-serif; font-size:30px; color:var(--paper); }
.stat-card span{ font-family:'DM Mono',monospace; font-size:11.5px; color:var(--dim); letter-spacing:0.04em; line-height:1.5; display:block; margin-top:8px; }
@media(max-width:760px){ .stat-row{ grid-template-columns:1fr; } }

/* ---------- CAPABILITIES GRID ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--panel-line); border:1px solid var(--panel-line); }
.cap-card{ background:var(--ink); padding:28px 26px; min-height:190px; display:flex; flex-direction:column; }
.cap-num{ font-family:'DM Mono',monospace; font-size:11px; color:var(--red); letter-spacing:0.1em; }
.cap-card h3{ font-size:18px; margin-top:20px; font-weight:600; letter-spacing:0.01em; }
.cap-card p{ font-size:14px; color:var(--dim); line-height:1.6; margin-top:10px; }
@media(max-width:860px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- FLIGHT DEMO ---------- */
.demo-frame{ position:relative; background:var(--panel); border:1px solid var(--panel-line); padding:14px; }
.demo-topbar{ display:flex; justify-content:space-between; align-items:center; font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:0.1em; color:var(--dim); text-transform:uppercase; margin-bottom:10px; }
.demo-topbar .rec{ color:var(--red); display:flex; align-items:center; gap:6px; }
.rec-dot{ width:6px;height:6px;border-radius:50%;background:var(--red); animation:blink 1.4s infinite; }
@keyframes blink{ 50%{opacity:0.25;} }

.demo-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
@media(max-width:760px){ .demo-layout{ grid-template-columns:1fr; } }

.svg-shell{ position:relative; width:100%; aspect-ratio:300/240; background:var(--ink-2); border:1px solid var(--panel-line); overflow:hidden; }
.svg-shell svg{ width:100%; height:100%; display:block; }

.hud-readout{ position:absolute; left:10px; bottom:10px; font-family:'DM Mono',monospace; font-size:10px; color:var(--gold); background:rgba(18,23,29,0.62); padding:6px 9px; letter-spacing:0.05em; border-left:2px solid var(--red); line-height:1.5; max-width:78%; }
.hud-readout .lbl{ color:var(--dim-2); margin-right:6px; }
.hud-corner{ position:absolute; width:14px; height:14px; border-color:var(--gold); opacity:0.7; }
.hud-corner.tl{ top:6px; left:6px; border-top:1.5px solid; border-left:1.5px solid; }
.hud-corner.tr{ top:6px; right:6px; border-top:1.5px solid; border-right:1.5px solid; }
.hud-corner.bl{ bottom:6px; left:6px; border-bottom:1.5px solid; border-left:1.5px solid; }
.hud-corner.br{ bottom:6px; right:6px; border-bottom:1.5px solid; border-right:1.5px solid; }

.demo-caption{ margin-top:10px; font-family:'DM Mono',monospace; font-size:10.5px; color:var(--dim-2); display:flex; justify-content:space-between; letter-spacing:0.05em; }

.grid-line{ stroke:rgba(203,161,53,0.10); stroke-width:0.5; }
.scanline{ stroke:rgba(203,161,53,0.045); stroke-width:0.4; }
.wp-ring{ fill:none; stroke:var(--gold); stroke-width:1; opacity:0.75; }
.wp-dot{ fill:var(--gold); }
.wp-label{ font-family:'DM Mono',monospace; font-size:6px; fill:var(--dim); letter-spacing:0.04em; }

/* ---- Thermal sensor HUD panel (stylized instrumentation, not a photo) ---- */
.sensor-panel{ background:var(--ink-2); border:1px solid var(--panel-line); display:flex; flex-direction:column; }
.sensor-topbar{ display:flex; justify-content:space-between; padding:8px 10px; font-family:'DM Mono',monospace; font-size:9.5px; letter-spacing:0.08em; color:var(--dim-2); text-transform:uppercase; border-bottom:1px solid var(--panel-line); }
.sensor-view{ position:relative; flex:1; aspect-ratio:1/1; overflow:hidden; background:#0a0e13; }
.sensor-view svg{ width:100%; height:100%; display:block; }
.sensor-telemetry{ padding:8px 10px; font-family:'DM Mono',monospace; font-size:9.5px; color:var(--amber); letter-spacing:0.04em; line-height:1.6; border-top:1px solid var(--panel-line); }
.sensor-telemetry .dim{ color:var(--dim-2); }

/* ---------- PHOTO BLOCKS ---------- */
.photo-block{ border:1px solid var(--panel-line); background:var(--panel); }
.photo-block img{ width:100%; height:auto; display:block; }
.photo-cap{ padding:12px 16px; font-family:'DM Mono',monospace; font-size:11px; color:var(--dim-2); letter-spacing:0.05em; }
.photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--panel-line); border:1px solid var(--panel-line); margin-top:36px; }
.photo-grid .photo-block{ border:none; }
@media(max-width:760px){ .photo-grid{ grid-template-columns:1fr; } }

.status-bar{ display:flex; align-items:center; gap:14px; font-family:'DM Mono',monospace; font-size:13px; color:var(--dim); flex-wrap:wrap; margin-top:28px; }
.status-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber); flex:none; }

/* ---------- SERVICE CARDS ---------- */
.service-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--panel-line); border:1px solid var(--panel-line); margin-top:8px; }
.service-card{ background:var(--ink); padding:38px 34px; display:flex; flex-direction:column; }
.service-tag{ font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); border:1px solid var(--panel-line); padding:4px 9px; align-self:flex-start; }
.service-card h3{ font-size:23px; margin-top:16px; }
.service-card p{ font-size:14.5px; color:var(--dim); line-height:1.65; margin-top:12px; flex:1; }
.service-card ul{ margin:14px 0 0; padding-left:18px; font-size:14px; color:var(--dim); line-height:1.8; }
@media(max-width:820px){ .service-grid{ grid-template-columns:1fr; } }

/* ---------- PARTNERS ---------- */
.partner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--panel-line); border:1px solid var(--panel-line); margin-top:36px; }
.partner-card{ background:var(--ink); padding:28px 26px; }
.partner-card h3{ font-size:18px; font-weight:600; }
.partner-card p{ font-size:14px; color:var(--dim); line-height:1.6; margin-top:10px; }
@media(max-width:760px){ .partner-grid{ grid-template-columns:1fr; } }

/* ---------- CONTACT ---------- */
section.contact{ padding:96px 0 110px; border-bottom:none; }
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; }
.contact h2{ font-size:clamp(28px,3.4vw,40px); }
.contact p.lede{ color:var(--dim); margin-top:16px; line-height:1.7; max-width:42ch; }

form.brief{ display:flex; flex-direction:column; gap:22px; }
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--panel-line);
  color:var(--paper); font-family:'Archivo',sans-serif; font-size:15px; padding:12px 2px 10px; outline:none;
  transition:border-color .2s;
}
.field textarea{ resize:vertical; min-height:88px; }
.field label{
  position:absolute; left:2px; top:12px; font-family:'DM Mono',monospace; font-size:14px; color:var(--dim-2);
  letter-spacing:0.02em; pointer-events:none; transition:all .18s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--red); }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top:-11px; font-size:10.5px; letter-spacing:0.1em; color:var(--gold); text-transform:uppercase;
}
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:760px){ .contact-grid{ grid-template-columns:1fr; } .row-2{ grid-template-columns:1fr; } }

.submit-row{ display:flex; align-items:center; gap:18px; margin-top:6px; flex-wrap:wrap; }
.submit-btn{
  background:var(--red); color:var(--paper); border:none; font-family:'DM Mono',monospace; font-size:13px;
  letter-spacing:0.1em; text-transform:uppercase; padding:14px 28px; cursor:pointer; transition:background .2s;
}
.submit-btn:hover{ background:#a80c25; }
.submit-note{ font-family:'DM Mono',monospace; font-size:11.5px; color:var(--dim-2); }
.form-status{ font-family:'DM Mono',monospace; font-size:12.5px; color:var(--gold); min-height:18px; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--panel-line); padding:26px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; font-family:'DM Mono',monospace; font-size:11px; color:var(--dim-2); letter-spacing:0.05em; flex-wrap:wrap; gap:10px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}