:root{
      --bg:#0A0B0D; --bg-soft:#101216; --text:#F8F9FB; --muted:#9aa4b2;
      --accent:#00C16A; --inspect-green:#00AE20; --border:#23272f; --card:#0f1115;
      --shadow:0 8px 30px rgba(0,0,0,.35); --radius:16px;
    }
    html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    a{color:var(--accent);text-decoration:none}a:hover{color:#19d27a}
    .navbar{backdrop-filter:blur(6px);background:rgba(10,11,13,.7);border-bottom:1px solid var(--border)}
   
    .navbar .nav-link{
      position: relative;
      transition: color .2s ease, box-shadow .25s ease;
      border-radius: 999px; padding: .375rem .75rem;
    }
   
    .navbar .nav-link::after{
      content:"";
      position:absolute; left:.75rem; right:.75rem; bottom:2px;
      height:2px; border-radius:2px;
      background: linear-gradient(90deg, rgba(0,174,32,0), rgba(0,174,32,.8), rgba(0,174,32,0));
      transform: scaleX(0); transform-origin:left;
      transition: transform .25s ease;
      pointer-events:none;
    }
    .navbar .nav-link:hover::after,
    .navbar .nav-link:focus-visible::after{
      transform: scaleX(1);
    }
    .navbar .nav-link:hover,
    .navbar .nav-link:focus-visible{
      color: var(--text) !important;
      background: transparent;
      box-shadow: none;
      outline: none;
    }
    .navbar .btn{
      transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
      will-change: transform;
    }
    .navbar .btn:hover,
    .navbar .btn:focus-visible{
      box-shadow: 0 12px 28px rgba(0,174,32,.35);
      outline: none;
    }

    .brand-text{font-weight:700;letter-spacing:-.01em}
    .brand-mark{height:36px;width:auto;display:block}
    .btn-accent{background:linear-gradient(135deg,var(--accent),#22c997 70%);border:none;color:#05150b;font-weight:700}
    .btn-outline-light{border-color:#2b2f37;color:var(--text)}.btn-outline-light:hover{background:#1a1d23}
    .hero{position:relative;padding-top:120px;padding-bottom:120px;background:
      radial-gradient(800px 400px at 70% 0%, rgba(0,193,106,.25), transparent 70%),
      radial-gradient(600px 300px at 30% 10%, rgba(139,92,246,.18), transparent 70%);overflow:hidden}
   
    .hero .btn:hover,
    .hero .btn:focus-visible{
      box-shadow: 0 12px 28px rgba(0,174,32,.35);
      outline: none;
    }

    .hero h1{font-weight:800;letter-spacing:-.02em}
    .hero-lead{color:var(--muted);max-width:780px}
    .card-dark{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
    .icon-box{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(0,174,32,.15),rgba(0,174,32,.06));border:1px solid #1f2a22}


    @keyframes fadeUp { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
    .reveal { opacity:0; animation: fadeUp .8s ease-out both; }
    @supports (animation-timeline: view()) {
      .reveal { animation: fadeUp .6s ease-out both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    }

   
    .hero-art{position:relative;min-height:520px}
    .hero-drone{
      position:absolute; right:-18%; bottom:8%;
      width:min(1200px,165%); max-width:none;
      pointer-events:none;
      filter:drop-shadow(0 20px 60px rgba(0,0,0,.55));
      transform: rotate(-2deg) translateY(10px);
    }
    @keyframes drift { from { transform: rotate(-2deg) translateY(10px) scale(1); } to { transform: rotate(-2deg) translateY(-40px) scale(1.05); } }
    .drift { animation: drift linear both; }
    @supports (animation-timeline: scroll(root block)) {
      .drift { animation-timeline: scroll(root block); animation-range: 0 40vh; }
    }
    @media (max-width: 991.98px){
      .hero-art{min-height:420px}
      .hero-drone{ right:-32%; bottom:4%; width:185%; }
    }

    
    .equal-cols .card-dark{ height:100%; display:flex; flex-direction:column; }
    .equal-cols .card-dark > *:last-child{ margin-bottom:0; }
    #about .about-title{ font-size: calc(1.275rem + .3vw); font-weight: 700; line-height: 1.2; } 
    #about .about-text, #about .step{ color: var(--muted); font-size: 1rem; }

    .step{position:relative;padding-left:18px}
    .step::before{content:"";position:absolute;left:0;top:.45rem;width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,var(--inspect-green),var(--accent))}

    .usecase-tabs input{ display:none; }
    .usecase-tabs .tab-btn{ flex:0 0 auto; cursor:pointer; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:#0e1217; color:var(--text); white-space:nowrap; }
 
    #usecases .tab-btn{ margin: 0 8px 12px 0; }
    #usecases #tab5 + label.tab-btn{ display:inline-block; margin: 16px auto 16px; }
    .usecase-tabs input:checked + label{ background:linear-gradient(135deg,rgba(0,174,32,.25),rgba(0,174,32,.05)); border-color:#21412b; }
    .usecase-panel{ display:none; }
    #tab1:checked ~ .panels #panel1,
    #tab2:checked ~ .panels #panel2,
    #tab3:checked ~ .panels #panel3,
    #tab4:checked ~ .panels #panel4,
    #tab5:checked ~ .panels #panel5 { display:block; }

    .cta{background:linear-gradient(180deg, rgba(0,174,32,.10), rgba(0,174,32,0) 60%)}
    .footer{border-top:1px solid var(--border);background:var(--bg-soft)}
    
    #features .card-dark{transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;}
    #features .card-dark:hover, #features .card-dark:focus-within{
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 16px 48px rgba(0,174,32,.22);
      border-color:#21412b;
      background:linear-gradient(180deg, rgba(0,174,32,.08), rgba(0,174,32,0) 65%);
    }
    :target::before{content:"";display:block;height:88px;margin-top:-88px}
  
    
    .hero .btn-outline-light:hover,
    .hero .btn-outline-light:focus-visible{
      color: #fff !important;
    }

  

#tech .card-dark{transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;}
    #tech .card-dark:hover, #tech .card-dark:focus-within{
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 16px 48px rgba(0,174,32,.22);
      border-color:#21412b;
      background:linear-gradient(180deg, rgba(0,174,32,.08), rgba(0,174,32,0) 65%);
    }

html{scroll-behavior:smooth}