/* ============================================================
   FLYBOTS — Aerospace theme (dark)
   Palette: Ferrari/logo red on carbon black
   Light alternates available: body.palette-sky / sage / sand
   ============================================================ */
:root{
  --red:        #EC1C24;   /* logo / ferrari red */
  --red-deep:   #B5121B;
  --red-glow:   rgba(236,28,36,.45);
  --ink:        #0B0C0E;   /* page background: carbon black */
  --ink-2:      #131519;   /* panels */
  --steel:      #1C1F25;
  --line:       #2A2E36;   /* hairlines */
  --fog:        #9AA1AD;   /* muted text */
  --silver:     #E7E9EC;   /* primary body text */
  --heading:    #FFFFFF;   /* headings: white */
  --white:      #FFFFFF;
  --maxw:       1200px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--silver);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}

/* ---------- Boot animation ---------- */
.boot{
  position:fixed;inset:0;z-index:999;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-mark{display:flex;flex-direction:column;align-items:center;gap:10px}
.boot-radar{width:96px;height:96px}
.radar-ring{fill:none;stroke:var(--line);stroke-width:1.5}
.radar-sweep{
  stroke:var(--red);stroke-width:2.5;stroke-linecap:round;
  transform-origin:50px 50px;
  animation:sweep 1.3s linear infinite;
  filter:drop-shadow(0 0 6px var(--red-glow));
}
@keyframes sweep{to{transform:rotate(360deg)}}
.boot-text{
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:2rem;letter-spacing:.12em;color:var(--heading);
  opacity:0;animation:fadeUp .5s .25s var(--ease) forwards;
}
.boot-sub{
  font-family:'Saira',sans-serif;font-size:.7rem;letter-spacing:.34em;
  color:var(--fog);opacity:0;animation:fadeUp .5s .5s var(--ease) forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:20px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(11,12,14,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center}
.brand-logo{height:46px;width:auto}
.tabs{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.tab{
  font-family:'Saira',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.04em;
  color:var(--fog);background:none;border:0;cursor:pointer;
  padding:9px 14px;border-radius:6px;
  position:relative;transition:color .25s,background .25s;
}
.tab:hover{color:var(--silver)}
.tab.is-active{color:var(--heading)}
.tab.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  background:var(--red);border-radius:2px;
  box-shadow:0 0 8px var(--red-glow);
}
.header-actions{display:flex;align-items:center}
.admin-btn{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--steel);color:var(--fog);cursor:pointer;
  transition:.25s;
}
.admin-btn:hover{color:var(--heading);border-color:var(--red);box-shadow:0 0 12px var(--red-glow)}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{width:24px;height:2px;background:var(--silver);border-radius:2px;transition:.3s}

/* ---------- Edit bar ---------- */
.editbar{
  position:sticky;top:63px;z-index:99;
  display:flex;align-items:center;gap:14px;
  padding:10px clamp(16px,4vw,40px);
  background:linear-gradient(90deg,var(--red-deep),var(--red));
  color:#fff;font-size:.85rem;font-weight:500;
}
.editbar-dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.editbar-link{margin-left:auto;background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font-size:.85rem}
.editbar-link+.editbar-link{margin-left:0}
.editbar-save{
  background:#fff;color:var(--red-deep);border:0;border-radius:6px;
  padding:7px 16px;font-weight:700;cursor:pointer;font-family:'Saira',sans-serif;
}
.editbar-save:hover{transform:translateY(-1px)}

/* ---------- Panels / tabs ---------- */
.panel{display:none;animation:panelIn .5s var(--ease)}
.panel.is-active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(60px,10vw,120px) 0 60px;overflow:hidden}
.hero-grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 0%,transparent 75%);
  opacity:.7;
}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.eyebrow{
  font-family:'Saira',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--red);
  margin-bottom:18px;
}
.hero-title{
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.01em;
  color:var(--heading);max-width:14ch;margin-bottom:42px;
}
.hero-line{display:inline-block}
.hero-media{margin-top:10px}
.scroll-cue{display:flex;justify-content:center;margin-top:50px}
.scroll-cue span{
  width:24px;height:38px;border:2px solid var(--line);border-radius:14px;position:relative;
}
.scroll-cue span::after{
  content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:4px;height:8px;background:var(--red);border-radius:2px;
  animation:scrollDot 1.6s infinite;
}
@keyframes scrollDot{0%{opacity:0;top:8px}40%{opacity:1}80%{opacity:0;top:20px}}

/* ---------- Typography blocks ---------- */
.section-head{padding-top:clamp(56px,8vw,96px);max-width:880px}
h2{
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.04;color:var(--heading);
  letter-spacing:-.01em;margin-bottom:22px;
}
h3{font-family:'Saira',sans-serif;font-weight:600;font-size:1.18rem;color:var(--heading);margin-bottom:14px}
.lead{font-size:1.15rem;color:var(--fog);max-width:62ch}
.prose{padding:48px 0;max-width:70ch;color:var(--silver)}
.prose p{margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}

/* ---------- Cards / lists ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:20px 0 80px;align-items:start}
.split-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0 90px}
.card,.list-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:30px;position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(16,24,32,.05);
}
.card::before,.list-card::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease);
}
.card:hover::before,.list-card:hover::before{transform:scaleY(1)}
.card p,.list-card p{color:var(--fog)}
.list-card.accent{background:linear-gradient(155deg,rgba(236,28,36,.12),var(--ink-2))}
.list-card ul{list-style:none}
.list-card li{
  padding:11px 0 11px 26px;position:relative;color:var(--silver);
  border-bottom:1px solid var(--line);font-size:.98rem;
}
.list-card li:last-child{border-bottom:0}
.list-card li::before{
  content:"";position:absolute;left:0;top:18px;width:8px;height:8px;
  background:var(--red);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.num-list{counter-reset:n}
.num-list li{padding-left:42px}
.num-list li::before{
  counter-increment:n;content:counter(n,decimal-leading-zero);
  background:none;clip-path:none;left:0;top:11px;width:auto;height:auto;
  font-family:'Saira',sans-serif;font-weight:700;color:var(--red);font-size:.9rem;
}

/* ---------- Image frames / placeholders ---------- */
.img-frame{
  position:relative;border:1px solid var(--line);border-radius:14px;
  background:
    repeating-linear-gradient(45deg,var(--steel) 0 12px,var(--ink-2) 12px 24px);
  aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
}
.img-frame.wide{aspect-ratio:21/8}
.img-frame.tall{aspect-ratio:4/5}
.img-frame::after{
  content:"";position:absolute;inset:0;
  border:1px dashed rgba(16,18,21,.10);margin:10px;border-radius:8px;pointer-events:none;
}
.img-frame img,.img-frame video{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.img-ph{font-family:'Saira',sans-serif;letter-spacing:.18em;font-size:.78rem;color:var(--fog);text-transform:uppercase;z-index:1}
.img-frame.editable{cursor:pointer}
.img-frame.editable:hover{border-color:var(--red);box-shadow:0 0 0 3px var(--red-glow)}
.img-frame.editable:hover::before{
  content:attr(data-hint);position:absolute;z-index:3;
  background:var(--red);color:#fff;padding:8px 16px;border-radius:8px;
  font-family:'Saira',sans-serif;font-size:.82rem;letter-spacing:.05em;white-space:nowrap;
}

/* ---------- 3D model stage ---------- */
.model-stage{
  position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  aspect-ratio:4/5;
  background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(236,28,36,.06),transparent 70%),var(--ink-2);
}
.model-stage model-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent}
.model-badge{
  position:absolute;top:14px;left:14px;z-index:4;
  background:rgba(11,12,14,.75);border:1px solid var(--line);
  color:var(--silver);font-family:'Saira',sans-serif;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:20px;
  pointer-events:none;backdrop-filter:blur(6px);
}
.model-stage .model-fallback{position:absolute;inset:0;border:0;border-radius:0}
.model-stage.editable{cursor:pointer}
.model-stage.editable:hover{border-color:var(--red);box-shadow:0 0 0 3px var(--red-glow)}

/* ---------- Gallery ---------- */
.gallery{margin:24px 0 60px}
.gallery-main{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  aspect-ratio:16/10;background:var(--ink-2);margin-bottom:14px;
}
.gallery-main img{width:100%;height:100%;object-fit:contain;background:#fff}
.gallery-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.gallery-thumb{
  border:1px solid var(--line);border-radius:9px;overflow:hidden;cursor:pointer;
  aspect-ratio:1;background:#fff;padding:0;transition:.2s;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb:hover{border-color:var(--fog)}
.gallery-thumb.active{border-color:var(--red);box-shadow:0 0 0 2px var(--red-glow)}
@media(max-width:640px){.gallery-thumbs{grid-template-columns:repeat(4,1fr)}}

/* ---------- Product layouts ---------- */
.product-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:clamp(56px,8vw,96px)}
.product-title{
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:clamp(3.4rem,8vw,6rem);line-height:.9;color:var(--heading);
  letter-spacing:-.02em;margin:6px 0 4px;
}
.product-title::first-letter{color:var(--red)}
.product-sub{font-size:1.3rem;color:var(--silver);margin-bottom:18px}
.product-jump{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px 0 90px}
.jump-card{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;cursor:pointer;color:var(--heading);transition:.3s;
}
.jump-card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 14px 36px rgba(16,24,32,.14)}
.jump-tag{font-family:'Saira',sans-serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fog)}
.jump-name{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.9rem;line-height:1}
.jump-card{flex-wrap:wrap}
.jump-tag{flex-basis:100%}
.jump-arrow{margin-left:auto;font-size:1.6rem;color:var(--red);transition:transform .3s}
.jump-card:hover .jump-arrow{transform:translateX(6px)}

/* ---------- Specs ---------- */
.spec-title{font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.6rem;color:var(--heading);margin:0 0 8px;padding-top:30px;border-top:1px solid var(--line)}
.spec-list{display:grid;grid-template-columns:1fr 2fr;gap:0;margin:20px 0 90px}
.spec-list dt{
  font-family:'Saira',sans-serif;font-weight:600;color:var(--red);
  padding:16px 0;border-top:1px solid var(--line);
}
.spec-list dd{padding:16px 0;border-top:1px solid var(--line);color:var(--silver)}
.feature-list{list-style:none;margin:24px 0 90px}
.feature-list li{
  padding:16px 0 16px 34px;border-bottom:1px solid var(--line);position:relative;color:var(--silver);
}
.feature-list li::before{
  content:"";position:absolute;left:0;top:22px;width:14px;height:2px;background:var(--red);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);background:var(--ink-2);
  padding:50px clamp(16px,4vw,40px);text-align:center;
}
.footer-logo{height:56px;margin:0 auto 18px}
.site-footer p{color:var(--fog);font-size:.95rem;margin-bottom:6px}
.footer-fine{font-size:.82rem;opacity:.7}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Editable inline ---------- */
[data-edit].editing,[data-list].editing li,[data-specs].editing dd,[data-specs].editing dt{
  outline:1px dashed var(--red);outline-offset:4px;border-radius:3px;
}
[contenteditable="true"]{cursor:text}
[contenteditable="true"]:focus{outline:2px solid var(--red);outline-offset:4px;background:rgba(236,28,36,.06)}

/* ---------- Modals ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(16,20,26,.45);backdrop-filter:blur(4px)}
.modal-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:16px;
  padding:36px;width:min(420px,92vw);position:relative;
}
.modal-card.wide{width:min(820px,94vw)}
.modal-card h3{font-size:1.4rem;margin-bottom:6px}
.modal-note{color:var(--fog);font-size:.9rem;margin-bottom:22px}
.modal-card label{display:block;font-size:.82rem;color:var(--fog);margin-bottom:16px;font-family:'Saira',sans-serif;letter-spacing:.04em}
.modal-card input{
  width:100%;margin-top:6px;padding:12px 14px;border-radius:8px;
  background:var(--ink);border:1px solid var(--line);color:var(--heading);font-size:1rem;
}
.modal-card input:focus{outline:none;border-color:var(--red)}
.primary-btn{
  width:100%;background:var(--red);color:#fff;border:0;border-radius:8px;
  padding:13px;font-family:'Saira',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.05em;cursor:pointer;transition:.25s;
}
.primary-btn:hover{background:var(--red-deep)}
.modal-close{position:absolute;right:18px;top:14px;background:none;border:0;color:var(--fog);font-size:1.8rem;cursor:pointer;line-height:1}
.login-error{color:var(--red);font-size:.85rem;margin-bottom:14px}

/* visitor analytics */
.stat-row{display:flex;gap:18px;margin-bottom:22px}
.stat{flex:1;background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.stat-num{display:block;font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:2.4rem;color:var(--red)}
.stat-label{font-family:'Saira',sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.visitor-table-wrap{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:12px}
.visitor-table{width:100%;border-collapse:collapse;font-size:.84rem}
.visitor-table th{position:sticky;top:0;background:var(--steel);color:var(--silver);text-align:left;padding:11px 14px;font-family:'Saira',sans-serif;font-weight:600;letter-spacing:.04em}
.visitor-table td{padding:10px 14px;border-top:1px solid var(--line);color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .tabs{
    position:fixed;top:63px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:8px;transform:translateY(-130%);transition:transform .35s var(--ease);
    margin-left:0;
  }
  .tabs.open{transform:translateY(0)}
  .tab{padding:13px 16px;width:100%;text-align:left}
  .tab.is-active::after{display:none}
  .menu-toggle{display:flex;margin-left:auto}
  .header-actions{order:2}
  .split,.split-3,.product-hero,.product-jump,.spec-list{grid-template-columns:1fr}
  .spec-list dt{padding-bottom:0;border-top:1px solid var(--line)}
  .spec-list dd{padding-top:4px;border-top:0}
  #gcs .product-hero .img-frame{order:2}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   ALTERNATE PALETTES — switch by adding a class to <body>
   ============================================================ */
/* A. SKY MIST — cool aero blue-gray */
body.palette-sky{
  --ink:#E9F0F6; --ink-2:#F9FBFD; --steel:#DDE8F0; --line:#C9D8E4;
  --fog:#54677A; --silver:#1E2B38; --heading:#0D1B28;
  --red-glow:rgba(236,28,36,.25);
}
body.palette-sky .hero-grid-bg{opacity:.75}
body.palette-sky .site-header{background:rgba(249,251,253,.88)}
body.palette-sky .site-footer{background:#DFE9F1}

/* B. FRESH SAGE — soft mint-gray */
body.palette-sage{
  --ink:#EBF1ED; --ink-2:#FAFCFA; --steel:#DEE8E1; --line:#CCDAD1;
  --fog:#586B60; --silver:#1F2B24; --heading:#0F1D16;
  --red-glow:rgba(236,28,36,.25);
}
body.palette-sage .site-header{background:rgba(250,252,250,.88)}
body.palette-sage .site-footer{background:#E0EAE3}

/* C. WARM HORIZON — light sand */
body.palette-sand{
  --ink:#F4EFE6; --ink-2:#FCFAF5; --steel:#EAE2D3; --line:#DDD2BE;
  --fog:#6E6350; --silver:#2B2418; --heading:#1C160C;
  --red-glow:rgba(236,28,36,.25);
}
body.palette-sand .site-header{background:rgba(252,250,245,.88)}
body.palette-sand .site-footer{background:#EDE6D8}