/* ============================================================
   HCC – Helmsen Car Competence
   Shared design tokens + layout (nav, footer, buttons)
   Used by every page (index.html, gallery.html, ...)
   ============================================================ */

/* ---------- Webfonts (Poppins, self-hosted, Latin subset) ---------- */
@font-face { font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/poppins-italic-400.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:500; font-display:swap; src:url("../fonts/poppins-italic-500.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/poppins-400.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/poppins-500.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/poppins-600.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins-700.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/poppins-800.woff2") format('woff2'); }

/* ---------- Color / spacing / motion tokens ---------- */
:root {
  --hcc-black: #0A0A0A;
  --hcc-black-pure: #000000;
  --hcc-surface: #161616;
  --hcc-surface-2: #1F1F1F;
  --hcc-white: #FFFFFF;
  --hcc-gray-1: #EDEDED;
  --hcc-gray-2: #B5B5B5;
  --hcc-gray-3: #8A8A8A;
  --hcc-gray-4: #5C5C5C;
  --hcc-amber: #FCAF45;
  --hcc-amber-press: #E89422;
  --hcc-amber-soft: rgba(252, 175, 69, 0.14);
  --hcc-green: #34C759;
  --hcc-line: rgba(255, 255, 255, 0.12);
  --hcc-line-strong: rgba(255, 255, 255, 0.22);
  --hcc-line-faint: rgba(255, 255, 255, 0.07);

  --bg: var(--hcc-black);
  --bg-deep: var(--hcc-black-pure);
  --surface-card: var(--hcc-surface);
  --surface-input: var(--hcc-surface-2);
  --text-primary: var(--hcc-white);
  --text-body: var(--hcc-gray-2);
  --text-secondary: var(--hcc-gray-3);
  --text-muted: var(--hcc-gray-4);
  --accent: var(--hcc-amber);
  --accent-press: var(--hcc-amber-press);
  --accent-soft: var(--hcc-amber-soft);
  --success: var(--hcc-green);
  --border: var(--hcc-line);
  --border-strong: var(--hcc-line-strong);
  --border-faint: var(--hcc-line-faint);

  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow-amber: 0 6px 20px rgba(252, 175, 69, 0.25);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --r-lg: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--text-body); min-height:100vh; overflow-x:hidden; }
::selection { background: var(--accent); color:#111; }
a, button { font-family: var(--font-sans); }

@keyframes hcc-pulse { 0%,100% { opacity:.35; } 50% { opacity:.8; } }

[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* ---------- Nav (logo centered, links split left/right) ---------- */
.hcc-nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:center; gap:clamp(23.4px,4.03vw,54.6px); flex-wrap:wrap;
  padding:10px clamp(20px,5vw,56px);
  background:rgba(10,10,10,.72); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.hcc-nav-logo { height:44px; display:block; }
.hcc-nav-left, .hcc-nav-right { display:flex; align-items:center; gap:clamp(10px,2vw,22px); }
.hcc-nav a { color:var(--hcc-gray-2); text-decoration:none; font-size:14px; font-weight:500; transition:color .2s; }
.hcc-nav a:hover { color:var(--hcc-white); }
.hcc-nav-utility { position:absolute; right:clamp(20px,5vw,56px); top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:14px; }
.hcc-social-icon { display:inline-flex; align-items:center; justify-content:center; color:var(--hcc-gray-2); transition:color .2s; }
.hcc-social-icon:hover { color:var(--hcc-white); }
.hcc-lang { display:flex; gap:2px; padding:3px; background:var(--surface-input); border:1px solid var(--border); border-radius:999px; }
.hcc-lang button { font-family:var(--font-sans); border:0; cursor:pointer; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; letter-spacing:.02em; transition:all .2s; white-space:nowrap; background:transparent; color:var(--hcc-gray-2); }
.hcc-lang button.active { background:var(--accent); color:#111; }

.hcc-nav-toggle { display:none; align-items:center; justify-content:center; position:absolute; left:clamp(20px,5vw,56px); top:50%; transform:translateY(-50%); width:38px; height:38px; background:transparent; border:1px solid var(--border); border-radius:10px; cursor:pointer; color:var(--hcc-white); padding:0; }
.hcc-nav-toggle svg { width:20px; height:20px; display:block; }
.hcc-mobile-menu { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:rgba(10,10,10,.97); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:6px clamp(20px,5vw,56px) 14px; }
.hcc-mobile-menu.open { display:flex; }
.hcc-mobile-menu a { color:var(--hcc-gray-2); text-decoration:none; font-size:16px; font-weight:600; padding:14px 4px; border-bottom:1px solid var(--border-faint); }
.hcc-mobile-menu a:last-child { border-bottom:none; }
.hcc-mobile-menu a:hover { color:var(--hcc-white); }

@media (max-width:760px){
  .hcc-nav-left { display:none; }
  .hcc-nav-right { display:none; }
  .hcc-nav-toggle { display:flex; }
  .hcc-social-icon { display:none; }
}
@media (min-width:761px){
  .hcc-mobile-menu { display:none !important; }
}

/* ---------- Buttons ---------- */
.hcc-btn-primary { display:inline-flex; align-items:center; gap:10px; padding:16px 32px; background:var(--accent); color:#111; font-weight:700; font-size:16px; border-radius:999px; text-decoration:none; transition:background .2s, transform .12s; }
.hcc-btn-primary:hover { background:var(--accent-press); }
.hcc-btn-primary:active { transform:scale(.97); }
.hcc-btn-secondary { display:inline-flex; align-items:center; padding:16px 30px; background:rgba(255,255,255,.06); color:#fff; font-weight:600; font-size:16px; border:1px solid var(--border); border-radius:999px; text-decoration:none; transition:background .2s; }
.hcc-btn-secondary:hover { background:rgba(255,255,255,.12); }

/* ---------- Section shells (shared) ---------- */
.hcc-section { padding:clamp(70px,9vw,120px) clamp(20px,5vw,56px); }
.hcc-section-head { margin-bottom:40px; }
.hcc-section-eyebrow { color:var(--accent); font-weight:600; font-size:13px; letter-spacing:.22em; text-transform:uppercase; }
.hcc-section-title { font-size:clamp(32px,4.5vw,58px); font-weight:800; letter-spacing:-.025em; color:#fff; margin:14px 0 0; max-width:18ch; }

/* ---------- Footer (centered logo, identical on every page) ---------- */
.hcc-footer { position:relative; max-width:1120px; margin:80px auto 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border-top:1px solid var(--border); padding:26px 20px 8px; text-align:center; }
.hcc-footer img { height:44px; }
.hcc-footer span { color:var(--text-muted); font-size:13px; }