/* ARGUS design language — tokens extracted verbatim from app-build (index.css + styles/tokens.css):
     canvas #0c0c0c · panel #111 · raised #1a1a1a · overlay #0a0a0a · line #333 (soft #222, hard #444)
     text: fg #fff · dim #aaa · secondary #888 · muted #666 · faint #555 · go #10b981
     JetBrains Mono everywhere · zero border-radius · 1px borders · micro-labels uppercase font-black */
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:#0c0c0c; color:#fff; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; line-height:1.7; }
  .scanline { position:fixed; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(to bottom, rgba(18,16,16,0) 50%, rgba(0,0,0,0.1) 50%),
                linear-gradient(90deg, rgba(255,0,0,0.03), rgba(0,255,0,0.01), rgba(0,0,255,0.03));
    background-size: 100% 2px, 3px 100%; pointer-events:none; z-index:10000; opacity:0.4; }
  .wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

  /* ── Header: the app's 32px bar pattern, sticky ── */
  .top { position:fixed; top:0; left:0; right:0; z-index:100; height:36px; background:#111; border-bottom:1px solid #333; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
  .top-l, .top-r { display:flex; align-items:center; gap:0; }
  .brand { display:flex; align-items:center; gap:8px; }
  .brand img { width:16px; height:16px; opacity:.5; }
  .brand b { font-weight:800; font-size:10px; letter-spacing:.2em; color:#888; }
  .brand b span { color:#fff; }
  .top nav { display:flex; gap:16px; border-left:1px solid #333; padding-left:16px; margin-left:16px; }
  .top nav a { color:#555; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.1em; text-decoration:none; transition:color .15s; }
  .top nav a:hover { color:#fff; }
  .pill { display:flex; align-items:center; gap:8px; padding:3px 10px; border:1px solid #064e3b; background:rgba(2,44,34,.25); }
  .pill i { width:6px; height:6px; border-radius:50%; background:#10b981; box-shadow:0 0 5px #10b981; }
  .pill span { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#10b981; }
  .top-cta { margin-left:12px; border:1px solid #333; color:#aaa; padding:4px 12px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; text-decoration:none; transition:all .15s; }
  .top-cta:hover { border-color:#fff; color:#fff; }
  @media (max-width:760px) { .top nav { display:none; } .pill span { display:none; } }

  /* ── Hero ── */
  .hero { position:relative; height:100svh; min-height:520px; overflow:hidden; display:flex; align-items:center; }
  .hero video, .band video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero video { object-position: 50% calc(50% - 15px); } /* owner: framing 15px up */
  .hero-shade { position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 52%, rgba(0,0,0,.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 40%, rgba(12,12,12,.95) 94%, #0c0c0c 100%); }
  .hero-content { position:relative; z-index:1; max-width:600px; margin-left:clamp(20px, 8vw, 130px); padding:36px 0 0; }
  .micro { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.2em; color:#10b981; }
  h1 { font-size:clamp(26px, 4.5vw, 40px); letter-spacing:.28em; text-transform:uppercase; font-weight:800; color:#fff; margin:10px 0 14px; text-shadow:0 2px 14px rgba(0,0,0,.85); }
  .sub { color:#ccc; font-size:13px; max-width:480px; text-shadow:0 1px 10px rgba(0,0,0,.9); }
  .sub-note { color:#888; font-size:10px; margin-top:10px; text-transform:uppercase; letter-spacing:.08em; text-shadow:0 1px 8px rgba(0,0,0,.9); }
  .cta { display:inline-block; margin-top:26px; padding:14px 34px; border:1px solid #fff; color:#fff; text-decoration:none; font-weight:800; font-size:12px; letter-spacing:.25em; text-transform:uppercase; transition:all .15s; background:rgba(0,0,0,.25); }
  .cta:hover { background:#fff; color:#000; }
  .cta-mail { display:inline-block; margin:26px 0 0 14px; padding:14px 18px; border:1px solid #333; color:#888; text-decoration:none; font-weight:800; font-size:10px; letter-spacing:.15em; text-transform:uppercase; transition:all .15s; }
  .cta-mail:hover { border-color:#fff; color:#fff; }
  .scroll-cue { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:1; color:#555; font-size:16px; animation:cue 1.8s ease-in-out infinite; text-decoration:none; }
  .scroll-cue:hover { color:#fff; }
  @keyframes cue { 0%,100% { transform:translate(-50%,0); opacity:.5; } 50% { transform:translate(-50%,8px); opacity:1; } }
  @media (max-width:640px) { .hero-content { margin:0 auto; text-align:center; padding:0 16px; } h1 { letter-spacing:.18em; } .cta-mail { margin-left:0; } }

  /* ── Sections ── */
  section { padding:56px 0; border-bottom:1px solid #222; scroll-margin-top:48px; }
  .label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#555; font-weight:800; margin-bottom:24px; }
  .label em { color:#333; font-style:normal; }
  .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
  .card { border:1px solid #333; padding:16px; background:#0a0a0a; font-size:12px; color:#aaa; }
  .card b { color:#fff; display:block; margin-bottom:6px; text-transform:uppercase; font-size:11px; letter-spacing:.1em; font-weight:800; border-bottom:1px solid #222; padding-bottom:6px; }
  .panel { border:1px solid #333; background:#0a0a0a; }
  .panel-h { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#111; border-bottom:1px solid #333; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; color:#888; }
  .panel-b { padding:16px; font-size:12px; color:#aaa; }

  /* ── Band ── */
  .band { position:relative; height:62vh; min-height:340px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid #222; }
  .band-shade { position:absolute; inset:0; background:linear-gradient(180deg, #0c0c0c 0%, rgba(12,12,12,.1) 30%, rgba(12,12,12,.1) 70%, #0c0c0c 100%); }
  .band-caption { position:relative; z-index:1; padding:0 20px 34px; text-align:center; }
  .band-caption p { font-size:12px; color:#fff; letter-spacing:.15em; text-transform:uppercase; font-weight:800; text-shadow:0 1px 8px rgba(0,0,0,.9); }
  .band-caption span { font-size:10px; color:#888; }

  /* ── Gallery / prices / FAQ ── */
  .gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; }
  .piece { border:1px solid #333; background:#0a0a0a; padding:14px; }
  .piece h3 { color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:6px; font-weight:800; }
  .piece .did { font-size:11px; color:#888; margin:8px 0; }
  .piece .credit { font-size:10px; color:#555; font-style:italic; }
  .piece video { width:100%; display:block; background:#000; border:1px solid #222; }
  .photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; }
  .photo-grid a { display:block; border:1px solid #222; }
  .photo-grid img { width:100%; height:100%; object-fit:cover; display:block; }
  pre.prices { border:1px solid #333; background:#0a0a0a; padding:20px; font-size:12px; color:#ddd; overflow-x:auto; font-family:inherit; }
  .faq details { border:1px solid #333; background:#0a0a0a; margin-bottom:8px; }
  .faq summary { cursor:pointer; padding:12px 16px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#ccc; list-style:none; }
  .faq summary::before { content:'+ '; color:#555; }
  .faq details[open] summary::before { content:'− '; }
  .faq summary:hover { color:#fff; background:#111; }
  .faq .a { padding:0 16px 14px; font-size:12px; color:#aaa; border-top:1px solid #222; padding-top:12px; }
  .legal p { font-size:11px; color:#888; margin-bottom:14px; }
  .legal p strong { color:#ccc; }
  .note { border:1px solid #333; background:#0a0a0a; padding:16px; font-size:11px; color:#888; margin-bottom:24px; }
  .note strong { color:#fff; }

  footer { padding:36px 0 56px; font-size:10px; color:#555; }
  footer .frow { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; border-top:1px solid #222; padding-top:20px; }
  footer a { color:#888; text-decoration:none; }
  footer a:hover { color:#fff; }
  footer .tm { margin-top:14px; color:#444; font-size:9px; max-width:720px; }

  @media (prefers-reduced-motion: reduce) {
    .hero video, .band video { display:none; }
    .hero { background:url('/media/hero-flight.jpg') center/cover; }
    .band { background:url('/media/hero-ground.jpg') center/cover; }
    .scroll-cue { animation:none; }
    html { scroll-behavior:auto; }
  }

  /* ── Product pages + ready-made card (2026-10-08) ── */
  a.brand { text-decoration:none; }
  .soon { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid #064e3b; background:rgba(2,44,34,.25); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; color:#10b981; }
  .soon i { width:6px; height:6px; border-radius:50%; background:#10b981; box-shadow:0 0 5px #10b981; }
  .price-tag { display:inline-flex; align-items:center; padding:6px 14px; border:1px solid #064e3b; background:rgba(2,44,34,.25); font-size:13px; font-weight:800; letter-spacing:.1em; color:#10b981; }
  .buy { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
  .buy-price { font-size:24px; font-weight:800; color:#fff; letter-spacing:.05em; }
  .buy-btn { display:inline-block; padding:13px 28px; border:1px solid #10b981; color:#10b981; text-decoration:none; font-weight:800; font-size:12px; letter-spacing:.2em; text-transform:uppercase; transition:all .15s; }
  .buy-btn:hover { background:#10b981; color:#000; }
  .prod-hero { padding-top:76px; }
  .prod-hero .wrap { display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:36px; align-items:center; }
  .prod-hero-img { display:block; border:1px solid #222; background:#0a0a0a; }
  .prod-hero-img img { width:100%; display:block; }
  .prod-hero-text .sub { margin-bottom:22px; }
  .prod-clip video { display:block; max-width:100%; max-height:80vh; margin:0 auto; background:#000; border:1px solid #222; }
  .prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
  .prod-grid a { display:block; border:1px solid #222; background:#0a0a0a; aspect-ratio:1; }
  .prod-grid img { width:100%; height:100%; object-fit:contain; display:block; }
  .prod-specs { width:100%; border-collapse:collapse; border:1px solid #333; background:#0a0a0a; font-size:12px; }
  .prod-specs th, .prod-specs td { text-align:left; padding:10px 16px; border-bottom:1px solid #222; vertical-align:top; }
  .prod-specs th { width:34%; color:#888; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
  .prod-specs td { color:#ddd; }
  .prod-list { list-style:none; border:1px solid #333; background:#0a0a0a; }
  .prod-list li { padding:10px 16px; border-bottom:1px solid #222; color:#ccc; font-size:12px; }
  .prod-list li::before { content:'+ '; color:#10b981; }
  .prod-licence { border:1px solid #333; background:#0a0a0a; padding:16px; font-size:12px; color:#ccc; }
  .prod-credit { font-size:10px; color:#555; font-style:italic; margin-top:8px; }
  @media (max-width:760px) { .prod-hero .wrap { grid-template-columns:1fr; } .prod-hero-img { max-width:320px; margin:0 auto; } .prod-hero-text { text-align:center; } }
  .ready-note { font-size:12px; color:#888; margin:-12px 0 20px; }
  .ready-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
  .ready-card { display:grid; grid-template-columns:120px 1fr; border:1px solid #333; background:#0a0a0a; text-decoration:none; transition:border-color .15s; }
  .ready-card:hover { border-color:#10b981; }
  .ready-card img { width:120px; height:100%; min-height:160px; object-fit:cover; display:block; border-right:1px solid #222; }
  .ready-card-b { padding:16px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
  .ready-card-b b { color:#fff; text-transform:uppercase; font-size:12px; letter-spacing:.1em; font-weight:800; }
  .ready-card-b em { font-style:normal; color:#10b981; font-size:16px; margin-top:auto; }