/* products.css — page-specific styles for products/index.html */

main { max-width: 1100px; margin: 0 auto; padding: 9rem 3rem 6rem; }

.kicker { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.25rem; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.section-title em { font-style: italic; color: var(--blue); }
.page-sub { font-size: 1.1rem; color: var(--w80); max-width: 640px; }

/* ── PRODUCT GRID ── */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3.5rem; }
.product-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem; text-decoration: none; display: flex; flex-direction: column; transition: border-color 0.3s, background 0.3s, transform 0.3s; position: relative; overflow: hidden; }
.product-card:hover { transform: translateY(-5px); background: var(--bg4); }
.product-card.symphony { --card-accent: #00e5c8; }
.product-card.slimehive { --card-accent: #00e89a; }
.product-card.whoisourgov { --card-accent: #E03131; }
.product-card.blackskynlp { --card-accent: #38bdf8; }
.product-card.maurice { --card-accent: #a78bfa; }
.product-card.blackskyup { --card-accent: #c9a84c; }
.product-card.veil { --card-accent: #94a3b8; }
.product-card.hola { --card-accent: #f97316; }
.product-card.radio { --card-accent: #e879f9; }
.product-card.bridge { --card-accent: #e63946; }
.product-card.prism { --card-accent: #8b5cf6; }
.product-card.btclock { --card-accent: #fbbf24; }
.product-card.symphony:hover { border-color: rgba(0,229,200,0.3); }
.product-card.slimehive:hover { border-color: rgba(0,232,154,0.3); }
.product-card.whoisourgov:hover { border-color: rgba(224,49,49,0.3); }
.product-card.blackskynlp:hover { border-color: rgba(56,189,248,0.3); }
.product-card.maurice:hover { border-color: rgba(167,139,250,0.3); }
.product-card.blackskyup:hover { border-color: rgba(201,168,76,0.3); }
.product-card.veil:hover { border-color: rgba(148,163,184,0.3); }
.product-card.hola:hover { border-color: rgba(249,115,22,0.3); }
.product-card.radio:hover { border-color: rgba(232,121,249,0.3); }
.product-card.bridge:hover { border-color: rgba(230,57,70,0.3); }
.product-card.prism:hover { border-color: rgba(139,92,246,0.3); }
.product-card.btclock:hover { border-color: rgba(251,191,36,0.3); }
.product-card.upcoming { opacity: 0.75; cursor: default; }
.product-card.upcoming:hover { transform: translateY(-2px); opacity: 0.88; }
.products-row-label { font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w30); margin: 3rem 0 1.2rem; display: flex; align-items: center; gap: 12px; }
.products-row-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.product-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card-accent, var(--blue)); box-shadow: 0 0 10px var(--card-accent, var(--blue)); margin-bottom: 1.2rem; flex-shrink: 0; }
.product-name { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.product-type { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--card-accent, var(--blue)); margin-bottom: 1rem; opacity: 0.8; }
.product-desc { font-size: 0.88rem; color: var(--w60); line-height: 1.7; flex: 1; }
.product-arrow { margin-top: 1.4rem; font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; color: var(--w40); display: flex; align-items: center; gap: 6px; transition: color 0.2s, gap 0.2s; }
.product-card:hover .product-arrow { color: var(--card-accent, var(--blue)); gap: 10px; }
.product-arrow::after { content: '→'; }

/* ── FADE ── */


  

/* ── FOOTER ── */






@media (max-width: 900px) {
  
  
  
  
  
  
  main { padding: 7rem 1.25rem 4rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  
}
@media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } }

/* ── MOBILE CTA (Say hello) ── */



/* ── MAURICE SLIDEOUT ── */