/* ════════════════════════════════════════════════
   MELTED KE — GLOBAL STYLES
   Pure Black / White / Chrome. Zero Grey.
════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@100;200;300;400;600;700;900&family=Space+Grotesk:wght@300;400;500;600&display=swap');

/* ── CSS VARIABLES ─────────────────────────── */
:root {
  --black:       #000000;
  --white:       #ffffff;
  --chrome:      linear-gradient(135deg, #ffffff 0%, #c0c0c0 20%, #f8f8f8 35%, #808080 50%, #f0f0f0 65%, #b0b0b0 80%, #e0e0e0 100%);
  --chrome-text: linear-gradient(135deg, #fff 0%, #aaa 25%, #fff 50%, #888 75%, #ddd 100%);
  --gold-10k:    linear-gradient(135deg, #f5d060 0%, #c8a840 40%, #f0c850 70%, #a07820 100%);
  --gold-14k:    linear-gradient(135deg, #f5c842 0%, #b8900a 40%, #e8b828 70%, #7a5c00 100%);
  --gold-18k:    linear-gradient(135deg, #ffd700 0%, #a07820 35%, #ffbf00 65%, #7a5000 100%);
  --diamond:     linear-gradient(135deg, #fff 0%, #c0e8ff 30%, #fff 60%, #a8d8ff 100%);
  --opal:        linear-gradient(135deg, #ff80ab 0%, #80deea 33%, #ffcc02 66%, #ce93d8 100%);
  --glass:       rgba(255,255,255,0.03);
  --glass-border:rgba(255,255,255,0.08);
  --easing:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ──────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }

/* ── GRAIN OVERLAY ──────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── CURSOR ─────────────────────────────────── */
/* ── PAGE WIPE TRANSITIONS ──────────────────── */
#wipe-out, #wipe-in {
  position: fixed; inset: 0; z-index: 9995;
  background: var(--black);
  transform-origin: left;
  pointer-events: none;
}
#wipe-out { transform: scaleX(0); }
#wipe-in  { transform: scaleX(1); transform-origin: right; }
.wipe-out-active  { animation: wipeOut  .4s var(--easing) forwards; }
.wipe-in-active   { animation: wipeIn   .4s var(--easing) forwards; }
@keyframes wipeOut { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes wipeIn  { from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ── NAVIGATION ─────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  background: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, transparent 100%);
  transition: background .3s, padding .3s;
}
#nav.scrolled {
  background: rgba(0,0,0,.97);
  padding: 14px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-logo {
  text-decoration: none; display: flex; align-items: baseline; gap: 4px;
}
.logo-melted {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px; letter-spacing: 6px;
  background: var(--chrome-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.logo-ke {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 100; letter-spacing: 6px;
  color: rgba(255,255,255,.5);
}
.nav-links {
  list-style: none; display: flex; gap: 36px; align-items: center;
}
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.5); text-decoration: none;
  transition: color .25s; position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: var(--chrome-text);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--easing);
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
  padding: 12px 26px; background: var(--white); color: var(--black);
  border: none; text-decoration: none; display: inline-block;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition: all .3s; position: relative; overflow: hidden;
}
.nav-cta::before {
  content:''; position:absolute; inset:0;
  background: var(--chrome); opacity:0; transition: opacity .3s;
}
.nav-cta:hover::before { opacity:1; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,255,255,.15); }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1px; background: var(--white);
  transition: all .3s;
}

/* ── BUTTONS ────────────────────────────────── */
.btn-primary {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 700;
  padding: 16px 40px; background: var(--white); color: var(--black);
  border: none; display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition: transform .3s var(--easing), box-shadow .3s; position: relative; overflow: hidden;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background: var(--chrome); opacity:0; transition: opacity .3s;
}
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,255,255,.2); }
.btn-ghost {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 400;
  padding: 16px 40px; background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.25); display: inline-block; text-decoration: none;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition: all .3s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); transform: translateY(-1px); }
.btn-inline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.6); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}
.btn-inline:hover { color: var(--white); border-color: rgba(255,255,255,.6); }

/* ── MELT HOVER EFFECT ──────────────────────── */
.melt-btn:hover {
  animation: melt-vibrate .35s ease-in-out infinite alternate;
}
@keyframes melt-vibrate {
  0%   { transform: translateY(-2px) skewX(0deg); }
  25%  { transform: translateY(-3px) skewX(-.8deg); }
  75%  { transform: translateY(-2px) skewX(.8deg); }
  100% { transform: translateY(-3px) skewX(-.4deg); }
}

/* ── TYPOGRAPHY ─────────────────────────────── */
.section-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 8px; text-transform: uppercase;
  color: rgba(255,255,255,.3); display: block; margin-bottom: 12px;
}
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 9vw, 110px); letter-spacing: 4px;
  background: var(--chrome-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: .9;
}
.section-sub {
  font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.4);
  max-width: 500px; font-weight: 300; letter-spacing: .5px;
}
.chrome-text {
  background: var(--chrome-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── SCROLL REVEAL ──────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--easing), transform .7s var(--easing);
}
.reveal.visible {
  opacity: 1; transform: translateY(0);
}

/* ── TICKER ─────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 14px 0;
}
.ticker {
  display: flex; gap: 48px; align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 25s linear infinite;
}
.ticker span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.ticker-dot {
  background: var(--chrome-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: 8px !important;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── FOOTER ─────────────────────────────────── */
footer {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 80px 48px 32px;
}
.footer-top {
  display: flex; justify-content: space-between; gap: 48px;
  margin-bottom: 64px; flex-wrap: wrap;
}
.footer-logo {
  font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 6px;
  background: var(--chrome-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.footer-tagline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-top: 6px;
}
.footer-location {
  font-size: 11px; color: rgba(255,255,255,.2); margin-top: 16px;
}
.footer-nav { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col {
  display: flex; flex-direction: column; gap: 12px;
}
.footer-col-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.25); margin-bottom: 4px;
}
.footer-col a {
  font-size: 12px; color: rgba(255,255,255,.4); text-decoration: none;
  transition: color .2s;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.05); padding-top: 24px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.15);
}
.footer-credit { color: rgba(255,255,255,.28); }

/* ── FORM ELEMENTS ──────────────────────────── */
.form-input {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1); color: var(--white);
  padding: 14px 18px; font-family: 'Space Grotesk', sans-serif; font-size: 12px;
  letter-spacing: .5px; outline: none; transition: border-color .3s;
  clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.form-input::placeholder { color: rgba(255,255,255,.2); }
.form-input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.form-textarea { resize: vertical; min-height: 100px; }
label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.3); display: block; margin-bottom: 8px;
}

/* ── NOT FOUND ──────────────────────────────── */
#not-found {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 48px;
}
.nf-content { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.nf-code {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(120px, 25vw, 240px);
  letter-spacing: 8px; line-height: 1;
  background: var(--chrome-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nf-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px; letter-spacing: 8px; color: rgba(255,255,255,.4);
}
.nf-sub { color: rgba(255,255,255,.3); font-size: 13px; }

/* ── MOBILE ─────────────────────────────────── */
@media (max-width: 768px) {
  #nav { padding: 16px 24px; }
  #nav.scrolled { padding: 12px 24px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; top: 60px;
    background: var(--black); padding: 48px 32px; gap: 32px; z-index: 999;
  }
  .nav-links.open a { font-size: 28px; letter-spacing: 4px; }
  footer { padding: 48px 24px 24px; }
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-nav { gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}