/* ============================================================
   Nine Lives FPV — officina droni
   Design system taken from inspo/ninelives-*.svg
   Palette, type and spacing are lifted from those mockups; the
   ground was dropped a shade below the mockup value so the logo's
   own black sits flush against the page.
   ============================================================ */

:root{
  --bg:      #08090B;
  --surface: #12151A;
  --line:    #232A33;
  --text:    #E8E8E8;
  --muted:   #9AA3AE;
  --dim:     #7A828D;   /* mockup #5A626C, lifted for 4.7:1 text contrast */
  --stroke:  #5A626C;   /* the original, kept for non-text strokes */
  --accent:  #FF6B00;
  --danger:  #D92B2B;
  --danger-text: #FF6B6B;

  --wrap: 1200px;
  --gut: clamp(1.25rem, 4vw, 2rem);
  --nav-h: 72px;

  --display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px) }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{ overflow:hidden }

img{ max-width:100%; display:block }
a{ color:inherit }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--bg);
  padding:.7rem 1.1rem; font-weight:600; text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem }

.wrap{ width:100%; max-width:calc(var(--wrap) + var(--gut)*2); margin-inline:auto; padding-inline:var(--gut) }

/* ---------- Type ------------------------------------------------ */

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; line-height:1.22 }

h1{
  font-size:clamp(2rem, 1.15rem + 2.9vw, 3.25rem);
  line-height:1.23; letter-spacing:-.005em;
}
.section-title{ font-size:clamp(1.55rem, 1.15rem + 1.35vw, 2rem); margin-bottom:2.5rem }
.section-intro{ color:var(--muted); max-width:66ch; margin-top:-1.75rem; margin-bottom:2.5rem }

p{ margin:0 }

/* the running index from the mockups — live, not decorative:
   main.js keeps the navbar copy in sync with the section on screen */
.counter{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  color:var(--muted); display:block; margin-bottom:1rem;
}

.label{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  color:var(--muted); text-transform:uppercase;
}

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

/* ---------- Section rhythm -------------------------------------- */

.section{ padding-block:clamp(3.5rem, 6vw, 5.5rem) }
.section + .section{ padding-top:0 }

/* ---------- Navbar ----------------------------------------------- */

.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(8,9,11,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  height:100%; display:flex; align-items:center; gap:1.5rem;
  max-width:calc(var(--wrap) + var(--gut)*2); margin-inline:auto; padding-inline:var(--gut);
}

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto }
.brand img{ width:36px; height:36px; flex:0 0 auto; object-fit:contain }
.brand-word{
  font-family:var(--display); font-weight:700; font-size:1.25rem;
  letter-spacing:.01em; line-height:1; white-space:nowrap;
}
.brand-word em{ font-style:normal; color:var(--accent) }

.nav-index{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; color:var(--muted);
}
.nav-index::before{ content:""; width:1px; height:24px; background:var(--line) }

.nav-links{ display:flex; gap:2.4rem; margin-left:auto; margin-right:.75rem; font-size:1rem }
.nav-links a{
  position:relative; text-decoration:none; color:var(--muted);
  padding-block:.4rem; transition:color .15s;
}
.nav-links a:hover{ color:var(--text) }
.nav-links a[aria-current="true"]{ color:var(--text) }
.nav-links a[aria-current="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--accent);
}

.nav-end{ display:flex; align-items:center; gap:1.1rem; flex:0 0 auto }

.lang{ display:flex; align-items:center; font-family:var(--mono); font-size:.75rem; letter-spacing:.08em }
.lang a{ color:var(--dim); text-decoration:none; transition:color .15s }
.lang a:hover{ color:var(--text) }
.lang a[aria-current="page"]{ color:var(--accent) }
.lang a + a::before{ content:"/"; color:var(--line); margin-inline:.4rem }

/* ---------- Mobile menu -------------------------------------------- */

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  background:transparent; color:var(--text);
  border:1px solid var(--line); border-radius:2px; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.nav-toggle:hover{ border-color:var(--stroke) }
.nav-toggle-bars{ display:grid; gap:4px; width:18px }
.nav-toggle-bars i{ display:block; height:2px; background:currentColor }
@media (prefers-reduced-motion: no-preference){
  .nav-toggle-bars i{ transition:transform .18s ease, opacity .18s ease }
}
.nav-toggle[aria-expanded="true"]{ color:var(--accent); border-color:var(--accent) }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

.menu{
  position:absolute; left:0; right:0; top:100%;
  max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:.5rem var(--gut) 1.75rem;
}
.menu-links{ display:flex; flex-direction:column }
.menu-links a{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  text-decoration:none; color:var(--text);
  padding:.95rem 0; border-bottom:1px solid var(--line);
}
.menu-links a:last-child{ color:var(--accent) }
.menu-lang{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:1.5rem;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em;
}
.menu-lang a{ color:var(--dim); text-decoration:none }
.menu-lang a[aria-current="page"]{ color:var(--accent) }

/* ---------- Buttons ---------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-size:1.0625rem; font-weight:500;
  padding:.95rem 1.75rem; border-radius:2px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .15s, color .15s, border-color .15s;
}
.btn-solid{ background:var(--accent); color:var(--bg) }
.btn-solid:hover{ background:#ff8226 }
.btn-solid:disabled{ opacity:.6; cursor:progress }
.btn-outline{ border-color:var(--accent); color:var(--accent); background:transparent; padding:.6rem 1.3rem; font-size:1rem }
.btn-outline:hover{ background:rgba(255,107,0,.1) }

.lbl-short{ display:none }

.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.75rem }
.cta-note{ font-family:var(--mono); font-size:.8125rem; color:var(--dim); letter-spacing:.06em }

/* ---------- Hero -------------------------------------------------- */

.hero{ padding-block:clamp(3rem, 6vw, 5.5rem) }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:center;
}
.hero h1{ margin-bottom:1.75rem }
.hero h1 .accent{ color:var(--accent) }
.hero-sub{ color:var(--muted); max-width:38ch; margin-bottom:2.25rem }

/* The goggle feed. 3:2 rather than 16:9 so the 4:3 bench shot keeps its props. */
.feed{
  position:relative; aspect-ratio:3/2;
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
}
.feed-media{ position:absolute; inset:0 }
.feed-media img{ width:100%; height:100%; object-fit:cover }
/* the bench is pale wood and the OSD is thin type: hold the corners down */
.feed-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,9,11,.62) 0%, rgba(8,9,11,.06) 24%,
    rgba(8,9,11,.06) 72%, rgba(8,9,11,.68) 100%);
}
.feed-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 20%);
}
.feed-osd{
  position:absolute; inset:0; padding:1.15rem 1.5rem;
  display:grid; grid-template-columns:1fr 1fr; align-content:space-between;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.08em;
  color:#E8E8E8; pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.7);
}
.feed-osd .r{ text-align:right }
.osd-lives{ color:var(--accent) }
.osd-bars{ display:flex; gap:.375rem; margin-top:.4rem }
.osd-bars i{ width:6px; height:10px; background:var(--accent); display:block; box-shadow:0 1px 3px rgba(0,0,0,.8) }
.crosshair{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; pointer-events:none; opacity:.85;
}

/* ---------- Cards (servizi) --------------------------------------- */

.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(17.5rem,1fr)); gap:1.5rem }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:2rem;
  display:flex; flex-direction:column;
}
.card-icon{ width:48px; height:48px; color:var(--accent); margin-bottom:2rem }
.card h3{ font-size:1.5rem; margin-bottom:.85rem }
.card p{ color:var(--muted); margin-bottom:1.5rem }
.card-foot{
  margin-top:auto; padding-top:1.15rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:1.0625rem;
}

/* ---------- What we work on ---------------------------------------- */

.types-block{ margin-top:2.5rem; border-top:1px solid var(--line); padding-top:2rem }
.types-title{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin-bottom:1.25rem;
}
.types{ list-style:none; margin:0 0 1.25rem; padding:0; display:flex; flex-wrap:wrap; gap:.75rem }
.types li{
  display:flex; align-items:center; gap:.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:.55rem 1rem; font-size:.95rem;
}
.types li::before{ content:""; width:6px; height:6px; background:var(--accent); flex:0 0 auto }
.types-note{ color:var(--dim); font-size:.94rem; max-width:72ch }

/* ---------- Riparazioni (case study) -------------------------------- */

.case-pair{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.case-pair > *{ min-width:0 }
.case-note{ color:var(--muted); margin-top:1.25rem; max-width:72ch }
.case-flight{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem); align-items:center;
  margin-top:2.75rem; border-top:1px solid var(--line); padding-top:2.75rem;
}
.case-cap{ color:var(--muted) }

/* dashed plate with corner brackets, per the mockups */
.frame{
  position:relative; aspect-ratio:4/3;
  background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.frame-wide{ aspect-ratio:697/418 }
.frame::before, .frame::after{
  content:""; position:absolute; inset:-1px; pointer-events:none; z-index:2;
  background-repeat:no-repeat;
}
.frame::before{
  background-image:
    linear-gradient(var(--corner),var(--corner)), linear-gradient(var(--corner),var(--corner)),
    linear-gradient(var(--corner),var(--corner)), linear-gradient(var(--corner),var(--corner));
  background-size:16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position:left top, left top, right top, right top;
}
.frame::after{
  background-image:
    linear-gradient(var(--corner),var(--corner)), linear-gradient(var(--corner),var(--corner)),
    linear-gradient(var(--corner),var(--corner)), linear-gradient(var(--corner),var(--corner));
  background-size:16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position:left bottom, left bottom, right bottom, right bottom;
}
.frame{ --corner:var(--stroke) }
.frame-after{ --corner:var(--accent) }
.frame img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0 }
.frame-tag{
  position:absolute; left:1rem; bottom:.9rem; z-index:3;
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.08em; color:#E8E8E8;
  text-shadow:0 1px 4px rgba(0,0,0,.95);
}
.frame-tag::before{ content:""; width:6px; height:6px; background:var(--stroke) }
.frame-after .frame-tag::before{ background:var(--accent) }

/* ---------- Timeline (come funziona) ------------------------------- */

.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative;
  list-style:none; margin:0; padding:0 }
.timeline::before{
  content:""; position:absolute; left:0; right:0; top:18px; height:1px; background:var(--line);
}
.step{ position:relative; padding-top:3.75rem }
.step .dot{
  position:absolute; top:0; left:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.875rem; color:var(--accent);
}
.step h3{ font-size:1.5rem; margin-bottom:.75rem }
.step p{ color:var(--muted) }

/* ---------- Listino ------------------------------------------------ */

.price-table{ width:100%; border-collapse:collapse; text-align:left }
.price-table th{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:400; padding:0 0 1rem;
  border-bottom:1px solid var(--line);
}
.price-table td{ padding:1.1rem 0; border-bottom:1px solid var(--line); vertical-align:baseline }
.price-table th + th, .price-table td + td{ padding-left:1.25rem }
.price-table .c-price{ font-family:var(--mono); width:12rem }
.price-table .c-time{ font-family:var(--mono); color:var(--muted); width:14rem }
.price-note{ color:var(--muted); margin-top:1.75rem; max-width:72ch }

/* ---------- Chi siamo ---------------------------------------------- */

.about{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.about h2{ margin-bottom:1.75rem }
.about-copy p{ color:var(--muted); margin-bottom:1.4rem; max-width:62ch }
.about-copy p:last-child{ margin-bottom:0 }
.stats{ display:grid; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.75rem }
.stat{ border-bottom:1px solid var(--line); padding-bottom:1.5rem }
.stat:last-child{ border-bottom:0; padding-bottom:0 }
.stat b{ display:block; font-family:var(--mono); font-size:2rem; font-weight:400; color:var(--accent); line-height:1.2 }
.stat span{ display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; color:var(--muted); margin-top:.35rem }

/* ---------- Form ----------------------------------------------------- */

.form-intro{ color:var(--muted); margin-top:-1.75rem; margin-bottom:2.5rem }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.field{ display:flex; flex-direction:column; gap:.6rem; border:0; padding:0; margin:0; min-width:0 }
.field-wide{ grid-column:1 / -1 }
.field > label, .field > .label{ font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase }

.field input, .field select, .field textarea{
  font-family:var(--body); font-size:1.0625rem; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:1rem 1.15rem; width:100%; min-width:0;
  transition:border-color .15s;
}
.field textarea{ resize:vertical; line-height:1.6; min-height:6.5rem }
.field input::placeholder, .field textarea::placeholder{ color:var(--dim) }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--stroke) }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent) }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 15px) 50%;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
  padding-right:3rem;
}
.field select option{ background:var(--surface); color:var(--text) }
.field-error input, .field-error select, .field-error textarea{ border-color:var(--danger) }
.err{ font-size:.875rem; color:var(--danger-text); min-height:1.25rem }
.err:empty{ min-height:0 }

.gotcha{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.form-submit{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.75rem; margin-top:.5rem }
.form-status{ font-size:1rem; font-weight:500; flex-basis:100% }
.form-status:empty{ display:none }
.form-status[data-state="ok"]{ color:var(--accent) }
.form-status[data-state="error"]{ color:var(--danger-text) }

/* ---------- Footer ----------------------------------------------------- */

.footer{ border-top:1px solid var(--line); margin-top:clamp(3.5rem,6vw,5.5rem); padding-block:2.5rem 2rem }
/* flex, not grid: the contact and social columns are conditional, so the
   footer has to look deliberate with two columns as well as three */
.footer-grid{ display:flex; flex-wrap:wrap; gap:2.5rem 3rem }
.footer-brand{ flex:2 1 20rem }
.footer-col{ flex:1 1 11rem }
.footer .brand{ margin-bottom:1rem }
.footer-tag{ color:var(--muted) }
.footer-col h2{ font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; color:var(--muted);
  text-transform:uppercase; font-weight:400; margin-bottom:1rem }
.footer-col ul{ list-style:none; margin:0; padding:0 }
.footer-col li{ padding:.3rem 0 }
.footer-col a{ text-decoration:none; transition:color .15s }
.footer-col a:hover{ color:var(--accent) }
.socials{ display:flex; gap:1.15rem }
.socials a{ color:var(--muted); display:block }
.socials a:hover{ color:var(--accent) }
.socials svg{ width:28px; height:28px }

.footer-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line); margin-top:2.5rem; padding-top:1.5rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; color:var(--dim);
}
.footer-warn{ color:var(--muted); margin-top:1.75rem; max-width:70ch; font-size:.94rem }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 1080px){
  .nav-links{ gap:1.6rem }
  .nav-index{ display:none }
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:2.5rem }
  .hero-copy{ order:2 }
  .feed{ order:1 }
  .hero-sub{ max-width:52ch }
  .timeline{ grid-template-columns:repeat(2,1fr); gap:2.5rem 2rem }
  .timeline::before{ display:none }
  .about{ grid-template-columns:1fr; gap:2.5rem }
  .stats{ grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1.5rem 2rem }
  .stat{ border-bottom:0; padding-bottom:0 }
  .case-flight{ grid-template-columns:1fr; gap:1.25rem; align-items:start }
}
@media (max-width: 780px){
  .nav-links{ display:none }
  .nav-toggle{ display:inline-flex }
  .nav-end{ margin-left:auto }   /* nav-links was doing the pushing */
  .nav-end .lang{ display:none }
  .form{ grid-template-columns:1fr }
  .field{ grid-column:1 / -1 }
  .price-table .c-time{ display:none }
  .price-table .c-price{ width:8rem }
}
@media (min-width: 781px){
  .menu{ display:none }
}
@media (max-width: 700px){
  /* the hero art is 4:3, so let it breathe on a phone */
  .feed{ aspect-ratio:4/3 }
  .feed-osd{ padding:.8rem 1rem; font-size:.6875rem; letter-spacing:.05em }
  .osd-bars i{ width:5px; height:8px }
  .crosshair{ width:64px; height:64px }
}
@media (max-width: 620px){
  .lbl-long{ display:none }
  .lbl-short{ display:inline }
  .btn-outline{ padding:.5rem .85rem; font-size:.9rem }
  .nav-inner{ gap:.85rem }
  .nav-end{ gap:.6rem }
  .timeline{ grid-template-columns:1fr; gap:2rem }
  .cards{ grid-template-columns:1fr }
  .brand-word{ font-size:1.1rem }
  .brand img{ width:32px; height:32px }
}
@media (max-width: 520px){
  .case-pair{ grid-template-columns:1fr }
}
@media (max-width: 400px){
  :root{ --gut:.75rem }
  .nav-inner{ gap:.5rem }
  .brand{ gap:.4rem }
  .brand img{ width:28px; height:28px }
  .brand-word{ font-size:.95rem }
  .btn-outline{ padding:.4rem .6rem; font-size:.78rem }
  .types li{ font-size:.875rem; padding:.5rem .8rem }
}

/* ---------- One motion moment: the feed comes up on load ---------------- */

@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{ animation:rise .8s cubic-bezier(.22,.75,.3,1) both }
  .hero-copy > :nth-child(1){ animation-delay:.10s }
  .hero-copy > :nth-child(2){ animation-delay:.20s }
  .hero-copy > :nth-child(3){ animation-delay:.30s }
  .hero-copy > :nth-child(4){ animation-delay:.40s }
  .feed{ animation:feedon 1.1s cubic-bezier(.2,.7,.25,1) both .15s }
  @keyframes rise{ from{opacity:0; transform:translateY(.75rem)} to{opacity:1; transform:none} }
  @keyframes feedon{ from{opacity:0} to{opacity:1} }
}