/* @font-face descriptors cannot use CSS custom properties — literal values required */
@font-face { font-family:'BlenderPro'; src:url('../../fonts/BlenderPro/BlenderPro-Heavy.ttf') format('truetype'); font-weight:900; font-display:swap; }
@font-face { font-family:'BlenderPro'; src:url('../../fonts/BlenderPro/BlenderPro-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'BlenderPro'; src:url('../../fonts/BlenderPro/BlenderPro-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'BlenderPro'; src:url('../../fonts/BlenderPro/BlenderPro-Book.ttf') format('truetype'); font-weight:400; font-display:swap; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--color-bg); color:var(--color-text-primary); font-family:'BlenderPro','Inter',sans-serif; overflow-x:hidden; }

/* ── PRELOADER ── */
#preloader { position:fixed; inset:0; background:var(--color-bg); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; transition:opacity 0.9s ease; }
#preloader.hidden { opacity:0; pointer-events:none; }
#preloader img { width:var(--space-160); opacity:0; animation:prelogoIn 0.8s ease forwards 0.3s; }
@keyframes prelogoIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }

/* ── NAV ── */
nav { position:absolute; top:0; left:0; right:0; z-index:var(--z-nav); display:flex; align-items:center; justify-content:space-between; padding:var(--space-28) var(--pad-nav); }
.nav-logo img { height:var(--space-44); opacity:0; transform:translateY(-var(--space-14)); animation:fadeDown 0.8s ease forwards 0.3s; }
.nav-social { display:flex; align-items:center; gap:var(--space-14); opacity:0; transform:translateY(-var(--space-14)); animation:fadeDown 0.8s ease forwards 0.5s; }
.nav-social a { width:var(--space-38); height:var(--space-38); border-radius:var(--radius-full); overflow:hidden; background:var(--color-surface-hover); border:1px solid var(--color-border-mid); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background var(--ease-fast), transform var(--ease-fast); }
.nav-social a:hover { background:var(--color-accent); border-color:var(--color-accent); transform:translateY(-var(--space-2)); }
.nav-social a svg { width:var(--space-16); height:var(--space-16); fill:var(--color-text-primary); }

/* ── UTILS ── */
.tc { display:inline-block; font-size:0.78em; line-height:1; vertical-align:0.04em; letter-spacing:inherit; }
.btn-primary { font-weight:var(--weight-black); font-size:var(--text-btn); letter-spacing:3px; text-transform:uppercase; color:var(--color-text-primary); background:var(--color-accent); padding:var(--space-12) var(--space-32); text-decoration:none; display:inline-block; transition:background var(--ease-base), transform var(--ease-fast); clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%); border:none; outline:none; cursor:pointer; }
.btn-primary:hover { background:var(--color-accent-hover); transform:translateY(-var(--space-2)); }
.btn-ghost { font-family:'Inter',sans-serif; font-weight:var(--weight-medium); font-size:var(--text-btn); letter-spacing:3px; text-transform:uppercase; color:var(--color-text-faded); text-decoration:none; border-bottom:1px solid var(--color-border-strong); padding-bottom:var(--space-2); transition:color var(--ease-fast), border-color var(--ease-fast); }
.btn-ghost:hover { color:var(--color-accent); border-color:var(--color-accent); }

.scroll-indicator { position:absolute; bottom:var(--space-32); left:50%; transform:translateX(-50%); z-index:var(--z-content); opacity:0; animation:fadeUp 1s ease forwards 1.7s; }
.scroll-line { width:3px; height:var(--space-52); background:linear-gradient(to bottom, transparent, var(--color-accent)); animation:scrollLine 2s ease infinite; transform-origin:top; }
@keyframes scrollLine { 0% { transform:scaleY(0); opacity:0; } 40% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:0; } }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { to { opacity:1; transform:translateY(0); } }

/* ── FOOTER ── */
#footer { background:var(--color-bg-subtle); border-top:1px solid var(--color-border-subtle); padding:var(--space-56) 0 0; font-family:'Inter',sans-serif; position:relative; z-index:var(--z-nav); margin-top:0; }
.footer-inner { max-width:var(--max-content); margin:0 auto; padding:0 var(--pad-section); display:grid; grid-template-columns:1fr 1fr 1fr; }
.footer-left { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-20); padding-bottom:var(--space-40); }
.footer-logo-white { height:var(--space-44); width:auto; }
.footer-social { display:flex; gap:var(--space-10); }
.footer-social a { width:var(--space-36); height:var(--space-36); border-radius:var(--radius-full); overflow:hidden; background:var(--color-surface-high); border:1px solid var(--color-border-soft); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background var(--ease-fast), border-color var(--ease-fast); }
.footer-social a:hover { background:var(--color-accent); border-color:var(--color-accent); }
.footer-social a svg { width:var(--space-14); height:var(--space-14); fill:var(--color-text-primary); }  /* 15px ≈ space-14 */
.footer-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); padding-bottom:var(--space-40); border-left:1px solid var(--color-border-subtle); border-right:1px solid var(--color-border-subtle); }
.footer-center a { text-decoration:none; display:flex; flex-direction:column; align-items:center; transition:transform var(--ease-fast); }
.footer-center a:hover { transform:scale(1.02); }
.footer-tagline { font-family:'BlenderPro',sans-serif; font-weight:var(--weight-black); font-size:var(--text-lg); text-transform:uppercase; color:var(--color-text-primary); letter-spacing:3px; margin:0; line-height:0.9; }
.footer-brand-name { font-family:'BlenderPro',sans-serif; font-weight:var(--weight-black); font-size:var(--text-lg); text-transform:uppercase; color:var(--color-accent); letter-spacing:3px; margin:0; line-height:0.9; }
.footer-right { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-10); padding-bottom:var(--space-40); padding-left:var(--space-40); }
.footer-contact-link { display:inline-flex; align-items:center; gap:var(--space-5); font-size:var(--text-cap); font-family:'Inter',sans-serif; color:var(--color-text-faded); text-decoration:none; transition:color var(--ease-fast); }
.footer-contact-link:hover { color:var(--color-accent); }
.footer-contact-link svg { width:var(--space-12); height:var(--space-12); fill:var(--color-text-faint); flex-shrink:0; }
.footer-contact-link:hover svg { fill:var(--color-accent); }
.footer-bottom { grid-column:1/-1; border-top:1px solid var(--color-border-subtle); padding:var(--space-18) 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-16); }
.footer-bottom-left { display:flex; align-items:center; }
.footer-copyright { font-size:var(--text-cap); color:var(--color-text-ghost); }
.footer-bottom-center { display:flex; justify-content:center; align-items:center; gap:var(--space-12); }
.footer-anpc { display:flex; gap:var(--space-12); align-items:center; }
.footer-anpc a img { height:var(--space-32); width:auto; opacity:0.6; transition:opacity var(--ease-fast); }
.footer-anpc a:hover img { opacity:1; }
.footer-bottom-right { display:flex; justify-content:flex-end; }
.footer-dev { font-size:var(--text-cap); color:var(--color-text-ghost); }
.footer-dev a { color:var(--color-accent-secondary); text-decoration:none; transition:color var(--ease-fast); }
.footer-dev a:hover { color:var(--color-text-primary); }

/* ── Scroll-to-top button ── */
.mkl-scroll-top {
  position: fixed;
  bottom: var(--space-32);
  right: var(--space-32);
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border-mid);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mkl-scroll-top.mkl-scroll-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mkl-scroll-top:hover {
  background: rgba(232, 81, 10, 0.15);
  border-color: var(--color-border-accent);
  color: var(--color-accent);
}
@media (max-width: 768px) { /* --bp-mobile */
  .mkl-scroll-top { display: none; }
}

@media (max-width: 768px) { /* --bp-mobile */
  nav { padding:var(--space-20) var(--space-24); }
  .nav-logo img { height:var(--space-36); }
  .footer-inner { grid-template-columns:1fr; padding:0 var(--space-28); }
  .footer-left { align-items:center; text-align:center; }
  .footer-logo-white { height:var(--space-60); margin-bottom:var(--space-10); }
  .footer-social { justify-content:center; }
  .footer-tagline { font-size:var(--space-24); }   /* 24px fixed on mobile */
  .footer-brand-name { font-size:var(--space-36); } /* 36px fixed on mobile */
  .footer-center { border:none; border-top:1px solid var(--color-border-subtle); border-bottom:1px solid var(--color-border-subtle); align-items:center; padding:var(--space-32) 0; }
  .footer-right { align-items:center; padding:var(--space-32) 0; padding-left:0; }
  .footer-bottom { grid-template-columns:1fr; gap:var(--space-24); padding-top:var(--space-24); }
  .footer-bottom-left { flex-direction:column; text-align:center; gap:var(--space-8); justify-content:center; }
  .footer-bottom-center { justify-content:center; }
  .footer-bottom-right { justify-content:center; }
}