:root{
    --bg:#000; --fg:#fff; --muted:#a1a1aa; --card:#0a0a0a;
    --b1:#22d3ee; --b2:#f43f5e; --b3:#f59e0b;
  }
  
  /* Base */
  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; background:#000; color:var(--fg);
    font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; }
  a{ color:var(--fg); text-decoration:none; }
  a:hover{ opacity:.9; }
  
/* ===== Header (no dropdown) ===== */
.nav{
    position:-webkit-sticky; position:sticky; top:0; z-index:50;
    background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
    border-bottom:1px solid #1f1f22;
    min-height:56px; padding:12px 20px;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px;
  }
  
  .brand-left{display:flex; align-items:center; gap:10px; min-width:0;}
  .logo-img{height:44px; width:auto; display:block;}
  .tagline{color:#a1a1aa; font-size:12px;}
  
  .site-title{
    justify-self:center; white-space:nowrap; text-decoration:none; color:#fff;
    font-weight:700; letter-spacing:.10em; line-height:1.2;
    font-size:clamp(20px,3.2vw,36px);
  }
  
  /* Right-side links */
  .links{justify-self:end; display:flex; align-items:center; gap:32px; white-space:nowrap;}
  .links a{font-size:16px;}
  .links a:hover{opacity:.85}
  
  /* Tablet */
  @media (max-width:900px){
    .logo-img{height:36px}
    .tagline{display:none}
    .links{gap:22px}
    .links a{font-size:15px}
  }
  
  /* Phone */
  @media (max-width:720px){
    .nav{padding:10px 12px}
    .logo-img{height:28px}
    .site-title{letter-spacing:.06em; font-size:clamp(18px,5.5vw,22px)}
    .links{gap:18px}
    .links a{font-size:14px}
  }
  
  /* ===== Hero ===== */
  .hero{
    position:relative; height:70vh; min-height:520px;
    border-bottom:1px solid #1f1f22;
  }
  .hero .ink{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; filter:contrast(1.1) brightness(.75) saturate(1.1);
  }
  .hero-overlay{
    position:relative; z-index:1; max-width:960px;
    margin:0 auto; padding:80px 20px;
  }
  .hero-overlay h1{
    font-size: clamp(28px, 6vw, 56px);
    line-height:1.1; margin:0 0 12px;
  }
  .hero-overlay p{
    font-size: clamp(14px, 2.2vw, 18px);
    max-width:700px; color:#d4d4d8;
  }
  .cta{ display:flex; gap:10px; margin-top:10px; }
  .btn{ border:1px solid #333; border-radius:12px; padding:10px 16px; background:#0a0a0a; }
  .btn.primary{ background:#fff; color:#111; }
  
  /* ===== Products grid ===== */
  .products{
    display:grid; grid-template-columns:repeat(1,minmax(0,1fr));
    gap:14px; padding:28px 20px; max-width:1100px; margin:0 auto;
  }
  @media (min-width:900px){
    .products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  .card{
    border:1px solid #1f1f22; border-radius:18px; padding:18px;
    background:linear-gradient(180deg,#0a0a0a,transparent);
    transition:transform .2s, box-shadow .2s;
  }
  .card:hover{ transform:translateY(-2px); box-shadow:0 20px 60px rgba(0,0,0,.35); }
  .card h3{ margin:0 0 6px; }
  .card.c1{ box-shadow:inset 0 0 0 1px rgba(34,211,238,.24); }
  .card.c2{ box-shadow:inset 0 0 0 1px rgba(244,63,94,.24); }
  .card.c3{ box-shadow:inset 0 0 0 1px rgba(245,158,11,.28); }
  
  /* ===== Footer ===== */
  .footer{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    padding:20px; border-top:1px solid #1f1f22; color:#cfcfd3;
  }
  .social a{ margin-left:14px; color:#cfcfd3; }