/* val-rc.com — unified stylesheet | replaces tailwind.js (400 KB → ~8 KB) */

/* ── Variables ── */
:root{--red:#8b1a1a;--red-hover:#7a1515}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0f172a;color:#e2e8f0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#0f172a}
::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}

/* ── Navbar ── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(15,23,42,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #1e293b}

/* ── Buttons ── */
.btn-primary{display:inline-flex;align-items:center;gap:.45rem;background:var(--red);color:#fff;font-weight:700;font-size:.875rem;padding:.75rem 1.5rem;border-radius:8px;border:none;cursor:pointer;text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s}
.btn-primary:hover{background:var(--red-hover);transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,26,26,.35)}
.btn-secondary{display:inline-flex;align-items:center;gap:.45rem;background:transparent;color:#94a3b8;font-weight:500;font-size:.875rem;padding:.75rem 1.5rem;border-radius:8px;border:1px solid #334155;cursor:pointer;text-decoration:none;transition:border-color .18s,color .18s,background .18s}
.btn-secondary:hover{border-color:#64748b;color:#e2e8f0;background:#1e293b}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:#94a3b8;font-weight:500;font-size:.875rem;padding:.7rem 1.25rem;border-radius:8px;border:1px solid #334155;cursor:pointer;text-decoration:none;transition:border-color .18s,color .18s,background .18s}
.btn-ghost:hover{border-color:#64748b;color:#e2e8f0;background:#1e293b}
.btn-store{display:inline-flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;font-size:.825rem;font-weight:600;padding:.5rem 1.1rem;border-radius:6px;text-decoration:none;transition:background .18s,box-shadow .18s}
.btn-store:hover{background:var(--red-hover);box-shadow:0 3px 12px rgba(139,26,26,.3)}

/* ── Animations ── */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ── Shared layout ── */
.divider{border:none;border-top:1px solid #1e293b}
.section-label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ef4444;margin-bottom:.5rem}
.hidden-mobile{display:block} /* overridden at 640px */

/* ── YouTube embed ── */
.yt-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#1e293b;border:1px solid #334155;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* ── Index: hero & project grids ── */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.stat-pill{display:inline-flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;border:1px solid #334155;border-radius:8px;min-width:90px;background:#1e293b}
.spec-pill{background:#1e293b;border:1px solid #334155;border-radius:6px;padding:.6rem 1rem;text-align:center;flex:1;min-width:80px}
.benefit-item{display:flex;gap:.75rem;align-items:flex-start;padding:.65rem 0;border-bottom:1px solid #1e293b}
.benefit-item:last-child{border-bottom:none}

/* ── Drybox: build guide ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.step-number{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;margin-top:1px}
.step-tip{background:#1c1a0f;border:1px solid #854d0e;border-radius:8px;padding:1rem 1.25rem;display:flex;gap:.75rem;align-items:flex-start;margin-top:1.25rem}

/* ── Drybox: BOM table ── */
.bom-table{width:100%;border-collapse:collapse;font-size:.875rem}
.bom-table th{text-align:left;font-weight:600;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#64748b;padding:.6rem .85rem;border-bottom:1px solid #334155;background:#1e293b}
.bom-table td{padding:.75rem .85rem;border-bottom:1px solid #1e293b;vertical-align:top;color:#94a3b8;line-height:1.55}
.bom-table tr:last-child td{border-bottom:none}
.bom-table tr:hover td{background:#1e293b}
.part-link{display:inline-flex;align-items:center;gap:.3rem;color:#ef4444;text-decoration:none;font-weight:500;font-size:.8rem;transition:opacity .15s}
.part-link:hover{opacity:.75;text-decoration:underline}
.links-cell{display:flex;flex-direction:column;gap:.3rem}
.affiliate-badge{font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#92400e;background:#1c1a0a;border:1px solid #854d0e;border-radius:3px;padding:.1rem .35rem;margin-left:.35rem;vertical-align:middle}
.link-card{border:1px solid #334155;border-radius:8px;padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:border-color .18s,background .18s;text-decoration:none;background:#1e293b}
.link-card:hover{border-color:#64748b;background:#263348}
.sidebar-card{display:flex;align-items:center;gap:.85rem;padding:.75rem 1rem;border:1px solid #334155;border-radius:8px;background:#1e293b;text-decoration:none;transition:border-color .18s}
.sidebar-card:hover{border-color:#64748b}

/* ── Legal pages ── */
.legal-section{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid #1e293b}
.legal-section:last-child{border-bottom:none;margin-bottom:0}
.legal-h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;color:#f1f5f9;letter-spacing:-.02em;margin-bottom:1.5rem;line-height:1.2}
.legal-h3{font-size:1rem;font-weight:700;color:#e2e8f0;margin-top:1.75rem;margin-bottom:.6rem}
.legal-p{font-size:.95rem;line-height:1.8;color:#94a3b8;margin-bottom:1rem}
.legal-p:last-child{margin-bottom:0}
.legal-ul{list-style:none;margin:.75rem 0 1rem;display:flex;flex-direction:column;gap:.35rem}
.legal-ul li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;line-height:1.65;color:#94a3b8}
.legal-ul li::before{content:"·";color:#ef4444;font-weight:700;flex-shrink:0;margin-top:.05rem}
.legal-address{font-size:.92rem;line-height:1.85;color:#94a3b8;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:1.25rem 1.5rem;margin-bottom:1.25rem}
.legal-address strong{color:#e2e8f0}
.legal-link{color:#ef4444;text-decoration:none;font-weight:500}
.legal-link:hover{text-decoration:underline}
.info-box{background:rgba(37,99,235,.1);border:1px solid rgba(96,165,250,.25);border-radius:8px;padding:1rem 1.25rem;display:flex;gap:.75rem;align-items:flex-start;margin-top:1rem}
.warning-box{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:1rem 1.25rem;display:flex;gap:.75rem;align-items:flex-start;margin:1rem 0}
code{background:#1e293b;padding:.15rem .4rem;border-radius:4px;font-size:.85em;color:#94a3b8;border:1px solid #334155}

/* ── Bilingual tags ── */
.lang-divider{border:none;border-top:1px dashed #334155;margin:2rem 0}
.lang-label-de{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f1f5f9;background:#1e293b;border:1px solid #64748b;border-radius:4px;padding:.2rem .55rem;margin-bottom:1.25rem}

/* ── Responsive ── */
@media(max-width:768px){
  .featured-grid{grid-template-columns:1fr !important;gap:2rem !important}
  .hero-grid{grid-template-columns:1fr !important;gap:2.5rem !important}
  .two-col{grid-template-columns:1fr !important;gap:2rem !important}
}
@media(max-width:640px){
  .hidden-mobile{display:none !important}
  #hamburger{display:block !important}
  .bom-table thead{display:none}
  .bom-table tr{display:block;border-bottom:1px solid #334155;padding:.5rem 0}
  .bom-table td{display:block;padding:.3rem .5rem;border:none}
  .bom-table td:first-child{font-weight:600;color:#e2e8f0}
}