:root {
      --bg: #0b0f14;
      --card: #121824;
      --muted: #9aa4b2;
      --text: #e8ecf1;
      --brand: #dc2626;
      --accent: #2563eb;
      --success: #22c55e;
    }
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    a { color: inherit; text-decoration: none; }
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px;
    }
    header {
      position: sticky;
      top: 0;
      background: rgba(11, 15, 20, .7);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid #1b2233;
      z-index: 10;
    }
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .brand {
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: .5px;
    }
    nav {
      display: flex;
      gap: 20px;
      align-items: center;
    }
    nav a {
      font-size: 14px;
      opacity: .8;
      transition: .2s;
    }
    nav a:hover {
      opacity: 1;
      color: var(--accent);
    }
    h1 {
      font-size: 48px;
      margin-bottom: 10px;
      background: linear-gradient(to right, #fff, #9aa4b2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .subtitle {
      color: var(--muted);
      font-size: 1.1rem;
      max-width: 700px;
      margin-bottom: 40px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
    }
    .card {
      background: var(--card);
      border: 1px solid #1b2233;
      border-radius: 16px;
      overflow: hidden;
      transition: .3s;
      display: flex;
      flex-direction: column;
    }
    .card:hover {
      transform: translateY(-6px);
      border-color: var(--accent);
    }
    .img-box {
      height: 260px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      margin: 10px;
      border-radius: 12px;
    }
    .img-box img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .details {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .details h3 {
      margin: 0 0 8px;
      font-size: 1.15rem;
    }
    .details p {
      margin: 0 0 15px;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
    }
    .price-row {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .price {
      font-size: 1.25rem;
      font-weight: 700;
      color: #fff;
    }
    .badge {
      display: inline-block;
      font-size: 10px;
      font-weight: bold;
      padding: 4px 8px;
      border-radius: 4px;
      background: var(--accent);
      text-transform: uppercase;
      margin-bottom: 10px;
      width: fit-content;
    }
    .badge.ice { background: #0ea5e9; }
    .badge.hardware { background: #6366f1; }
    .add-btn {
      background: var(--brand);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      font-size: 13px;
      transition: .2s;
    }
    .add-btn:hover { background: #b91c1c; }
    footer {
      margin-top: 70px;
      padding: 40px 0;
      border-top: 1px solid #1b2233;
      text-align: center;
    }
    :root{--bg:#0b0f14;--card:#121824;--muted:#9aa4b2;--text:#e8ecf1;--brand:#dc2626;--accent:#2563eb;}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial; background:linear-gradient(180deg,#0b0f14,#0e1422); color:var(--text); scroll-behavior: smooth;}
    a{text-decoration:none; color:inherit}
    .container{max-width:1100px;margin:0 auto;padding:24px}
    header{position:sticky;top:0;background:rgba(11,15,20,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1b2233;z-index:10}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px; font-size: 1.2rem;}
    .nav a{opacity:.8; font-size: 14px; transition: 0.2s;}
    .nav a:hover{opacity:1; color: var(--accent)}
    .active-nav{color: var(--accent) !important; font-weight: bold; opacity: 1 !important;}
    .about-hero{padding:60px 0; display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items: center;}
    .about-card{background:linear-gradient(180deg,#121824,#0f1524); border:1px solid #1b2233; border-radius:16px; padding:32px;}
    .about-card h2{margin-top: 0; color: var(--accent);}
    .about-card p{color: var(--muted); line-height: 1.7;}
    .mission-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top: 24px;}
    .mission-box{background:#0b0f14; border:1px solid #1b2233; padding:20px; border-radius:12px;}
    .mission-box h4{margin: 0 0 10px 0; color: var(--brand);}
    .warning-banner{margin-top: 40px; padding: 24px; border-radius: 16px; background: rgba(220, 38, 38, 0.1); border: 1px solid var(--brand); text-align: center;}
    footer{border-top:1px solid #1b2233;background:#0b0f14; padding: 40px 0; margin-top: 60px; text-align: center;}
    @media (max-width:900px){.about-hero{grid-template-columns: 1fr;}}