/* ==========================================================================
   IKARUS SYSTEMS — design tokens & core styles
   Signature: instrument-panel bracket corners + scanline reveal + telemetry
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- color tokens --- */
  --charcoal:      #1a1613;
  --charcoal-2:    #221d19;
  --charcoal-3:    #2b2521;
  --paper:         #f3ecdf;
  --paper-2:       #ece3d1;
  --ink:           #18130f;
  --ember:         #f44e2f;
  --ember-dim:     #c23c22;
  --ember-glow:    rgba(244,78,47,0.45);
  --amber:         #fea644;
  --signal:        #8fe05a;
  --signal-dim:    #5f9e3a;
  --smoke:         #9a9184;
  --smoke-dark:    #6b6459;
  --line-dark:     rgba(243,236,223,0.14);
  --line-light:    rgba(24,19,15,0.14);

  /* --- type --- */
  --f-display: 'Fraunces', 'Iowan Old Style', serif;
  --f-body: 'Archivo', sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;

  /* --- misc --- */
  --notch: 14px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--charcoal);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

body.on-paper{ background:var(--paper); color:var(--ink); }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.01em;
  margin:0 0 0.4em;
  color:inherit;
}
h1{ font-weight:400; }
p{ margin:0 0 1em; color:inherit; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

::selection{ background:var(--ember); color:var(--paper); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ember);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px;
  background:var(--ember);
  display:inline-block;
  flex:none;
}
.eyebrow.muted{ color:var(--smoke); }
.eyebrow.muted::before{ background:var(--smoke); }

.mono{ font-family:var(--f-mono); }

/* ==========================================================================
   TICKER — thin live-readout strip
   ========================================================================== */
.ticker-bar{
  background:var(--ink);
  color:var(--smoke);
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.04em;
}
.ticker-track{
  display:inline-flex;
  gap:48px;
  padding:7px 0;
  animation:ticker-scroll 38s linear infinite;
}
.ticker-track span{ color:var(--smoke); }
.ticker-track span b{ color:var(--amber); font-weight:500; }
.ticker-track span i{ color:var(--signal); font-style:normal; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================================
   NAV
   ========================================================================== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(26,22,19,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1240px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ width:30px; height:30px; }
.brand-word{
  font-family:var(--f-display);
  font-size:19px;
  letter-spacing:0.01em;
  color:var(--paper);
}
.brand-word b{ font-weight:600; color:var(--ember); }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:13.5px;
  font-weight:500;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--smoke);
  position:relative;
  padding:4px 0;
  transition:color .2s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.nav-links a.active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--ember);
}
.nav-cta{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--ink) !important;
  background:var(--ember);
  padding:9px 16px;
  text-transform:none !important;
  display:inline-flex; align-items:center; gap:8px;
}
.nav-cta:hover{ background:var(--amber); color:var(--ink) !important; }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-dark); color:var(--paper);
  width:38px; height:38px; align-items:center; justify-content:center;
  cursor:pointer;
}
@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:57px 0 0 0; z-index:49;
    background:var(--charcoal);
    flex-direction:column; align-items:flex-start;
    padding:26px 24px; gap:22px;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    border-top:1px solid var(--line-dark);
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a{ font-size:16px; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  font-size:13px; letter-spacing:0.03em;
  padding:13px 22px;
  border:1px solid currentColor;
  background:transparent;
  color:var(--paper);
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:14px; height:14px; flex:none; }
.btn-solid{ background:var(--ember); border-color:var(--ember); color:var(--ink); }
.btn-solid:hover{ background:var(--amber); border-color:var(--amber); }
.btn-ghost:hover{ border-color:var(--paper); }
.btn-dark{ color:var(--ink); border-color:var(--ink); }
.btn-dark:hover{ background:var(--ink); color:var(--paper); }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

/* ==========================================================================
   PANEL — bracket-corner instrument container (the site signature)
   ========================================================================== */
.panel{
  position:relative;
  background:var(--charcoal-2);
  border:1px solid var(--line-dark);
  padding:26px;
}
.panel::before, .panel::after{
  content:'';
  position:absolute;
  width:13px; height:13px;
  pointer-events:none;
}
.panel::before{ top:-1px; left:-1px; border-top:2px solid var(--ember); border-left:2px solid var(--ember); }
.panel::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--ember); border-right:2px solid var(--ember); }
.panel.on-paper{ background:#fff; border-color:var(--line-light); color:var(--ink); }
.panel.on-paper::before, .panel.on-paper::after{ border-color:var(--ember); }
.panel-alt::before, .panel-alt::after{ border-color:var(--amber); }
.panel-quiet::before, .panel-quiet::after{ border-color:var(--smoke); }

.notch{
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
}

/* ==========================================================================
   SCANLINE REVEAL — entrance animation
   ========================================================================== */
.reveal{
  position:relative;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  overflow:clip;
}
.reveal::after{
  content:'';
  position:absolute; left:0; right:0; top:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--ember) 15%, var(--amber) 50%, var(--ember) 85%, transparent);
  box-shadow:0 0 14px 2px var(--ember-glow);
  transform:translateY(-4px);
  opacity:0;
}
.reveal.is-revealed{ opacity:1; transform:translateY(0); }
.reveal.is-revealed::after{
  animation:scan-sweep .85s var(--ease) forwards;
}
@keyframes scan-sweep{
  0%{ top:0; opacity:1; }
  85%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}
.reveal-1{ transition-delay:.05s; } .reveal-1.is-revealed::after{ animation-delay:.05s; }
.reveal-2{ transition-delay:.13s; } .reveal-2.is-revealed::after{ animation-delay:.13s; }
.reveal-3{ transition-delay:.21s; } .reveal-3.is-revealed::after{ animation-delay:.21s; }
.reveal-4{ transition-delay:.29s; } .reveal-4.is-revealed::after{ animation-delay:.29s; }

/* ==========================================================================
   SHARED SECTION / LAYOUT UTILITIES
   ========================================================================== */
section{ padding:96px 0; }
@media (max-width:768px){ section{ padding:64px 0; } }
.section-alt{ background:var(--paper); color:var(--ink); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; gap:36px; } .grid-3{ grid-template-columns:1fr; } }

.divider{ height:1px; background:var(--line-dark); border:0; margin:0; }
.on-paper .divider, .section-alt .divider{ background:var(--line-light); }

/* status pills */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 10px;
  border:1px solid currentColor;
}
.pill::before{ content:''; width:6px; height:6px; background:currentColor; }
.pill-active{ color:var(--signal); }
.pill-alert{ color:var(--ember); }
.pill-standby{ color:var(--smoke); }
.pill-warn{ color:var(--amber); }

/* footer */
footer.site-footer{
  background:var(--ink); border-top:1px solid var(--line-dark);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:48px;
}
@media (max-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{
  font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--smoke); font-weight:500; margin-bottom:16px;
}
.footer-grid a{ display:block; color:var(--paper); font-size:14.5px; padding:6px 0; opacity:0.85; }
.footer-grid a:hover{ opacity:1; color:var(--amber); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--line-dark);
  font-family:var(--f-mono); font-size:11.5px; color:var(--smoke);
}

/* form fields */
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:1px solid var(--line-dark); color:var(--paper);
  padding:12px 13px; font-family:var(--f-body); font-size:14.5px;
}
.on-paper .field input, .on-paper .field textarea, .on-paper .field select,
.section-alt .field input, .section-alt .field textarea, .section-alt .field select{
  border-color:var(--line-light); color:var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--ember); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }

/* scrollbar for tables */
.table-scroll{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.data-table th{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--smoke); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-dark);
  white-space:nowrap;
}
table.data-table td{ padding:13px 14px; border-bottom:1px solid var(--line-dark); vertical-align:middle; }
.on-paper table.data-table th, .on-paper table.data-table td{ border-color:var(--line-light); }

/* ==========================================================================
   MAP
   ========================================================================== */
.map-pin{
  width:18px; height:18px; position:relative;
}
.map-pin span{
  position:absolute; inset:0; margin:auto;
  width:10px; height:10px; background:var(--c);
  box-shadow:0 0 0 4px rgba(0,0,0,0.0), 0 0 10px 2px var(--c);
  animation:pin-pulse 2.2s ease-in-out infinite;
}
@keyframes pin-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:.7; }
}
.map-pin.is-stale span{ animation:none; opacity:.35; box-shadow:none; }

.live-dot{ width:6px; height:6px; display:inline-block; margin-right:6px; vertical-align:1px; }

.risk-bar{ height:6px; width:100%; background:var(--line-dark); position:relative; overflow:hidden; }
.risk-bar-fill{ position:absolute; inset:0 auto 0 0; height:100%; transition:width .8s var(--ease); }

.leaflet-tooltip{
  background:var(--ink) !important; color:var(--paper) !important;
  border:1px solid var(--line-dark) !important; border-radius:0 !important;
  font-family:var(--f-mono) !important; font-size:11.5px !important;
  box-shadow:none !important;
}
.leaflet-tooltip-top:before{ display:none !important; }

.sensor-row{
  display:flex; align-items:center; gap:10px;
  width:100%; background:none; border:0; border-bottom:1px solid var(--line-dark);
  padding:12px 4px; color:var(--paper); cursor:pointer; font-family:var(--f-body); font-size:13.5px;
  transition:background .15s var(--ease);
}
.sensor-row:hover{ background:rgba(244,78,47,0.08); }
.sensor-row .dot{ width:8px; height:8px; flex:none; }

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ember); color:var(--ink); padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:12px; top:12px; }