:root{
      --bg: #87CEEB;
      --card:#101620;
      --muted:#8aa0b3;
      --text:#eaf2ff;
      --brand:#58c4ff;
      --brand-2:#8b72ff;
      --accent:#30e7a2;
      --danger:#ff6b6b;
      --ring: 0 0 0 3px rgba(88,196,255,.25);
      --radius: 16px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}


body {
  margin: 0;
  color: var(--text); /* text color, adjust if needed */
  background:
    /* subtle radial highlights */
    radial-gradient(1200px 600px at 100% -10%, rgba(58, 123, 213, 0.15), transparent 60%),
    radial-gradient(1000px 800px at -10% 10%, rgba(29, 78, 216, 0.15), transparent 60%),
    /* base linear gradient */
    linear-gradient(180deg, #0d1b2a, #1b263b 160px);
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: .2px;
}



    /* Utilities */
    .container{width:min(1200px, 92%); margin-inline:auto}
    .row{display:grid; gap:20px}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    .grid-2{grid-template-columns:repeat(2,1fr)}
    @media (max-width: 1024px){.grid-4{grid-template-columns:repeat(3,1fr)}}
    @media (max-width: 900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
    @media (max-width: 620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

    .chip{
      display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
      border:1px solid rgba(138,160,179,.25); color:var(--text);
      border-radius:999px; background:rgba(16,22,32,.7); font-size:12px
    }
    .badge{
      display:inline-flex; padding:4px 8px; border-radius:999px;
      background:linear-gradient(90deg, rgba(48,231,162,.15), rgba(91, 59, 255,.15));
      border:1px solid rgba(138,160,179,.25); font-size:11px; letter-spacing:.2px
    }

    /* Header */
    .header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
      background:rgba(11,14,19,.7); border-bottom:1px solid rgba(138,160,179,.12)
    }
    .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
    .logo{
      width:38px; height:38px; border-radius:12px;
      background: conic-gradient(from 180deg at 50% 50%, var(--brand), var(--brand-2), var(--accent), var(--brand));
      box-shadow: 0 8px 24px rgba(88,196,255,.25), inset 0 1px 0 rgba(255,255,255,.2)
    }
    .brand h1{font-size:18px; margin:0}
    .menu{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
    .menu a{
      color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px;
    }
    .menu a:hover{color:var(--text); background:rgba(138,160,179,.1)}
    .cta{
      padding:10px 14px; border-radius:12px; border:1px solid rgba(88,196,255,.45);
      background:linear-gradient(180deg, rgba(88,196,255,.15), rgba(88,196,255,.05));
      color:var(--text); text-decoration:none;
      box-shadow: 0 4px 16px rgba(88,196,255,.18)
    }
    .cta:focus{outline:none; box-shadow:var(--ring)}

    /* Hero */
    .hero{padding:56px 0 34px}
    .hero .panel{
      border:1px solid rgba(138,160,179,.15); border-radius:var(--radius);
      background:
        radial-gradient(600px 180px at 80% 0%, rgba(48,231,162,.08), transparent 40%),
        radial-gradient(600px 180px at 20% 100%, rgba(88,196,255,.08), transparent 40%),
        rgba(16,22,32,.6);
      padding:32px; display:grid; gap:22px
    }
    .hero h2{
      font-size: clamp(28px, 3.5vw, 42px);
      line-height:1.15; margin:0;
      letter-spacing:.2px
    }
    .hero p{margin:0; color:var(--muted); font-size:clamp(14px, 1.7vw, 16px)}
    .hero .highlights{display:flex; gap:8px; flex-wrap:wrap}
    .hero-imgs{
      display:grid; grid-template-columns:1fr .8fr; gap:12px; margin-top:10px
    }
    .hero-imgs img{
      width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid rgba(138,160,179,.15)
    }
    @media (max-width: 840px){.hero-imgs{grid-template-columns:1fr}}

    /* Filters */
    .filters{
      margin-top:10px; padding:14px; display:flex; gap:10px; flex-wrap:wrap;
      border:1px solid rgba(138,160,179,.12); border-radius:14px; background:rgba(12,16,23,.65)
    }
    .filters .field{
      display:flex; align-items:center; gap:8px; background:rgba(16,22,32,.7);
      border:1px solid rgba(138,160,179,.2); border-radius:12px; padding:8px 10px
    }
    input[type="search"], select{
      background:transparent; border:0; color:var(--text); outline:none; min-width:180px
    }
    .btn{
      cursor:pointer; border:1px solid rgba(138,160,179,.25); background:rgba(16,22,32,.75);
      color:var(--text); border-radius:12px; padding:8px 12px
    }
    .btn[aria-pressed="true"]{border-color:rgba(48,231,162,.6); background:rgba(48,231,162,.12)}
    .btn:focus{outline:none; box-shadow:var(--ring)}

    /* Products */
    .section{padding:30px 0}
    .section h3{margin:0 0 14px; font-size:22px}

    .meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px}
    .actions{display:flex; gap:8px; margin-top:10px}

    /* Capabilities */
    .caps{
      border:1px solid rgba(138,160,179,.15); border-radius:var(--radius);
      background:rgba(16,22,32,.6); padding:18px
    }
    .cap{
      border:1px solid rgba(138,160,179,.15); border-radius:14px; padding:14px;
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    }
    .cap h4{margin:0 0 6px}
    .cap p{margin:0; color:var(--muted); font-size:14px}

    /* Quote form */
    .quote{
      border:1px solid rgba(138,160,179,.15); border-radius:16px; padding:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    }
    .quote .row{grid-template-columns:repeat(2, 1fr)}
    .quote label{font-size:13px; color:var(--muted)}
    .quote input, .quote select, .quote textarea{
      width:100%; margin-top:6px; padding:10px 12px; border-radius:12px;
      border:1px solid rgba(138,160,179,.25); background:rgba(16,22,32,.75); color:var(--text)
    }
    .quote textarea{min-height:110px; resize:vertical}

    /* Modal */
    dialog{
      width:min(920px, 92%); border:1px solid rgba(138,160,179,.25); border-radius:18px;
      background:#0c1118; color:var(--text); padding:0; box-shadow: 0 24px 80px rgba(0,0,0,.6)
    }
     /*  dialog::backdrop{background: rgba(1,4,9,.6) }*/



    .close{
      background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:22px; line-height:1
    }
    /* Small helpers */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}