/* ============================================================
   LAZE LUX — premium metal & NFC cards
   Design language: black brushed metal + engraved gold
   Display: Syne  ·  Body: Inter  ·  Labels: tracked uppercase
   ============================================================ */

:root {
  --obsidian:   #0B0B0D;   /* base */
  --graphite:   #121317;   /* panels */
  --graphite-2: #181A20;   /* raised panels */
  --steel:      #2A2C33;   /* borders / brushed mid */
  --steel-soft: #3A3D46;
  --gold:       #C9A24B;   /* engraved gold accent */
  --gold-deep:  #7A5C1E;
  --gold-bright:#F2D98A;   /* specular highlight */
  --ivory:      #ECE7DD;   /* primary text on dark */
  --mist:       #8A8B92;   /* muted text */
  --mist-dim:   #5E606A;

  --grad-gold:  linear-gradient(120deg, #7A5C1E 0%, #F2D98A 45%, #C9A24B 100%);
  --grad-metal: linear-gradient(135deg, #1d1f25 0%, #0b0b0d 60%);

  --font-display: 'Syne', 'Arial Black', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --pad:  clamp(1.1rem, 4vw, 2rem);
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient grain + radial glow behind everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(201,162,75,.14), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(201,162,75,.06), transparent 55%),
    var(--obsidian);
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .32em;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--grad-gold); display: inline-block; }

.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.section { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head h2 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 1rem 0 .9rem; }
.section-head p { color: var(--mist); font-size: 1.05rem; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--steel), transparent); border: 0; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .95rem 1.6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space: nowrap;
}
.btn-gold { background: var(--grad-gold); color: #1a1407; box-shadow: 0 8px 30px rgba(201,162,75,.28); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(201,162,75,.42); }
.btn-ghost { background: transparent; color: var(--ivory); border-color: var(--steel-soft); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.btn-lg { padding: 1.1rem 2rem; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(11,11,13,.72);
  border-bottom: 1px solid rgba(42,44,51,.7);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.brand .mark { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 1.9rem; align-items: center; }
.nav-links a { font-size: .9rem; color: var(--mist); transition: color .2s; }
.nav-links a:hover { color: var(--ivory); }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
.nav-phone { font-weight: 600; font-size: .92rem; color: var(--ivory); display: flex; align-items: center; gap: .45rem; }
.nav-phone span { color: var(--gold); }
.nav-toggle { display: none; background: none; border: 0; color: var(--ivory); cursor: pointer; }
@media (max-width: 940px) {
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0;
    background: var(--graphite); padding: 1.2rem var(--pad); gap: 1.2rem; border-bottom: 1px solid var(--steel);
  }
}

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: 1.3rem 0; }
.hero h1 .line { display: block; }
.hero-sub { color: var(--mist); font-size: 1.18rem; max-width: 30ch; margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 2rem; margin-top: 2.6rem; flex-wrap: wrap; }
.hero-meta .stat strong { font-family: var(--font-display); font-size: 1.6rem; display: block; }
.hero-meta .stat span { color: var(--mist); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; }

/* the signature metal card */
.card-stage { perspective: 1400px; display: grid; place-items: center; }
.metal-card {
  position: relative; width: min(420px, 82vw); aspect-ratio: 1.585 / 1;
  border-radius: 18px; padding: 1.6rem 1.7rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(115deg, #16171c 0 2px, #101116 2px 4px),
    var(--grad-metal);
  border: 1px solid #2c2e36;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  transform: rotateY(-16deg) rotateX(7deg); transform-style: preserve-3d;
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.metal-card::after { /* sweeping specular sheen */
  content: ""; position: absolute; top: -60%; left: -30%; width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(242,217,138,.45), transparent);
  transform: rotate(8deg); filter: blur(6px);
  animation: sheen 5.5s var(--ease) infinite;
}
@keyframes sheen { 0%,100% { left: -40%; opacity: 0; } 18% { opacity: 1; } 40% { left: 120%; opacity: 0; } }
.metal-card .mc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.metal-card .mc-chip { width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(135deg,#d9c179,#9a7b2e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.metal-card .mc-brand { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; color: var(--gold-bright); }
.metal-card .mc-name { font-family: var(--font-display); font-size: clamp(1.3rem,4vw,1.7rem); color: var(--ivory); letter-spacing: .02em; }
.metal-card .mc-role { font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; }
.metal-card .mc-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.metal-card .mc-nfc { display: flex; align-items: center; gap: .4rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.metal-card.flat { transform: rotateY(0) rotateX(0); }
@media (prefers-reduced-motion: reduce) { .metal-card::after { animation: none; display: none; } }

/* ---------- marquee value strip ---------- */
.strip { border-block: 1px solid var(--steel); background: rgba(18,19,23,.6); }
.strip-inner { display: flex; gap: 3rem; padding: 1.1rem 0; flex-wrap: wrap; justify-content: center; }
.strip-item { display: flex; align-items: center; gap: .6rem; color: var(--mist); font-size: .88rem; letter-spacing: .04em; }
.strip-item svg { color: var(--gold); flex: none; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px){ .gallery { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .gallery { grid-template-columns: 1fr; } }
.design-card {
  position: relative; border: 1px solid var(--steel); border-radius: var(--r-md); overflow: hidden;
  background: var(--graphite); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.design-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 22px 50px -24px rgba(201,162,75,.5); }
.design-card .thumb { aspect-ratio: 16/10; overflow: hidden; background: #0d0e12; }
.design-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.design-card:hover .thumb img { transform: scale(1.05); }
.design-card .body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.design-card .dc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.design-card h3 { font-size: 1.2rem; }
.design-card .price { font-family: var(--font-display); font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
.design-card .blurb { color: var(--mist); font-size: .9rem; line-height: 1.45; }
.design-card .material { font-size: .73rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-dim); }
.tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.tag { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); background: rgba(201,162,75,.1); border: 1px solid rgba(201,162,75,.25); padding: .25rem .5rem; border-radius: 5px; }
.design-card .dc-cta { margin-top: auto; padding-top: 1rem; }
.badge-featured { position: absolute; top: .8rem; left: .8rem; z-index: 2; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1a1407; background: var(--grad-gold); padding: .3rem .6rem; border-radius: 6px; }

/* ---------- split feature (customizer + AI) ---------- */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3.5rem); align-items: center; }
@media (max-width: 880px){ .feature-split { grid-template-columns: 1fr; } }
.panel { background: var(--graphite); border: 1px solid var(--steel); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); }

/* customizer controls */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--obsidian); border: 1px solid var(--steel-soft); color: var(--ivory);
  border-radius: var(--r-sm); padding: .8rem .9rem; font-family: var(--font-body); font-size: .95rem; transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.swatches { display: flex; gap: .6rem; flex-wrap: wrap; }
.swatch { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.swatch[aria-pressed="true"] { border-color: var(--gold-bright); transform: scale(1.08); }
.swatch.s-black { background: linear-gradient(135deg,#26282e,#0b0b0d); }
.swatch.s-gold  { background: linear-gradient(135deg,#f2d98a,#9a7b2e); }
.swatch.s-steel { background: linear-gradient(135deg,#d7dadf,#8b8f98); }
.swatch.s-rose  { background: linear-gradient(135deg,#e7b9a6,#9c5e49); }

.metal-card.theme-gold { background: linear-gradient(135deg,#2a2410,#0d0b06); border-color:#5a4a23; }
.metal-card.theme-gold .mc-name, .metal-card.theme-gold .mc-brand { color: var(--gold-bright); }
.metal-card.theme-steel { background: linear-gradient(135deg,#3a3d44,#15171b); border-color:#565a63; }
.metal-card.theme-rose  { background: linear-gradient(135deg,#3a2620,#140d0b); border-color:#5e4036; }

/* AI studio */
.ai-studio .chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 1.1rem; }
.chip { font-size: .8rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--steel-soft); color: var(--mist); cursor: pointer; transition: all .2s; background: transparent; }
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-bright); }
.ai-output { margin-top: 1.2rem; border-top: 1px solid var(--steel); padding-top: 1.2rem; min-height: 60px; }
.ai-output .ai-line { opacity: 0; transform: translateY(6px); animation: rise .5s var(--ease) forwards; }
.ai-output .ai-line.l2 { animation-delay: .15s; } .ai-output .ai-line.l3 { animation-delay: .3s; }
.ai-concept-name { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-bright); }
.ai-thinking { display: inline-flex; gap: .3rem; align-items: center; color: var(--gold); }
.ai-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; animation: blink 1.2s infinite; }
.ai-thinking i:nth-child(2){animation-delay:.2s} .ai-thinking i:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes rise { to { opacity:1; transform: none; } }
.ai-badge { display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--mist); }
.ai-badge b { color: var(--gold); }

/* ---------- TAP / NFC band ---------- */
.tap-band { background: linear-gradient(135deg,#101116,#0b0b0d); border: 1px solid var(--steel); border-radius: var(--r-lg); padding: clamp(1.6rem,4vw,2.6rem); display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
@media (max-width: 800px){ .tap-band { grid-template-columns: 1fr; } }
.tap-band ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .7rem; }
.tap-band li { display: flex; gap: .6rem; color: var(--ivory); font-size: .98rem; }
.tap-band li svg { color: var(--gold); flex: none; margin-top: 3px; }

/* ---------- pet tags referral ---------- */
.pet { background:
    radial-gradient(700px 400px at 80% 0%, rgba(255,122,89,.12), transparent 60%),
    var(--graphite);
  border: 1px solid var(--steel); border-radius: var(--r-lg); padding: clamp(1.8rem,4vw,3rem);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; align-items: center;
}
@media (max-width: 800px){ .pet { grid-template-columns: 1fr; } }
.pet .coral { color: #FF7A59; }
.pet-tag-vis { display: grid; place-items: center; }
.pet-tag {
  width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center;
  background: repeating-linear-gradient(115deg,#16171c 0 2px,#101116 2px 4px), var(--grad-metal);
  border: 1px solid var(--steel-soft); box-shadow: 0 30px 60px -28px #000, inset 0 1px 0 rgba(255,255,255,.07);
  position: relative;
}
.pet-tag .heart { width: 78px; height: 78px; color: #FF7A59; }
.pet-tag::after { content: "SCAN TO RETURN ME HOME"; position: absolute; bottom: 22px; font-size: .5rem; letter-spacing: .18em; color: var(--mist); }

/* ---------- order funnel ---------- */
.order { background: var(--graphite-2); border: 1px solid var(--steel); border-radius: var(--r-lg); padding: clamp(1.6rem,4vw,2.6rem); }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px){ .order-grid { grid-template-columns: 1fr; } }
.order .full { grid-column: 1 / -1; }
.order-aside { display: grid; gap: 1.2rem; align-content: start; }
.contact-line { display: flex; align-items: center; gap: .7rem; font-size: 1.05rem; }
.contact-line svg { color: var(--gold); flex: none; }
.contact-line b { font-family: var(--font-display); }
.order-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem,5vw,3.5rem); }
@media (max-width: 820px){ .order-wrap { grid-template-columns: 1fr; } }

/* ---------- before/after credit ---------- */
.credit { border: 1px dashed var(--steel-soft); border-radius: var(--r-md); padding: 1.3rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: rgba(18,19,23,.5); }
.credit p { color: var(--mist); font-size: .95rem; }
.credit b { color: var(--ivory); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--steel); padding-block: 3rem 2.2rem; margin-top: 2rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.footer .brand { margin-bottom: 1rem; }
.footer-col h4 { font-family: var(--font-body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); margin-bottom: .9rem; }
.footer-col a { display: block; color: var(--mist); font-size: .92rem; margin-bottom: .55rem; transition: color .2s; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom { margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--steel); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--mist-dim); font-size: .82rem; }
.footer-bottom a { color: var(--mist); }
.footer-bottom a:hover { color: var(--gold); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* ============ enhanced card designer ============ */
.metal-card { --ink: var(--ivory); --ink-soft: var(--gold); }
.metal-card .mc-name, .metal-card .mc-brand { color: var(--ink); }
.metal-card .mc-role { color: var(--ink-soft); }
.metal-card .mc-mid { display: grid; gap: .25rem; }
.metal-card .mc-logo { max-height: 40px; max-width: 96px; object-fit: contain; }
.metal-card .mc-contact { display: flex; flex-direction: column; gap: 2px; }
.metal-card .mc-contact span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
/* card font options */
.metal-card.font-modern .mc-name, .metal-card.font-modern .mc-brand { font-family: var(--font-display); }
.metal-card.font-serif  .mc-name, .metal-card.font-serif  .mc-brand { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .01em; }
.metal-card.font-mono   .mc-name, .metal-card.font-mono   .mc-brand { font-family: ui-monospace, 'Courier New', monospace; letter-spacing: -.02em; }
/* card layouts */
.metal-card.lay-center { text-align: center; align-items: stretch; }
.metal-card.lay-center .mc-top, .metal-card.lay-center .mc-foot { justify-content: center; gap: .8rem; }
.metal-card.lay-center .mc-contact { align-items: center; }
.metal-card.lay-mono .mc-mid { text-align: center; }
.metal-card.lay-mono .mc-name { font-size: clamp(2.4rem,9vw,3.4rem); letter-spacing: .04em; }
.metal-card.lay-mono .mc-role { text-align: center; }

.designer-controls { display: grid; gap: 1.05rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 460px){ .field-row { grid-template-columns: 1fr; } }
.field-row .field { margin: 0; }
.opt-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.opt-btn { font-size: .8rem; padding: .5rem .85rem; border-radius: var(--r-sm); border: 1px solid var(--steel-soft); color: var(--mist); cursor: pointer; background: transparent; transition: all .2s; }
.opt-btn[aria-pressed="true"], .opt-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.ink-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s, border-color .15s; }
.ink-swatch[aria-pressed="true"]{ border-color: var(--gold-bright); transform: scale(1.1); }
.toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; color: var(--ivory); font-size: .92rem; }
.toggle input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--steel); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); transition: transform .2s; }
.toggle input:checked { background: var(--grad-gold); }
.toggle input:checked::after { transform: translateX(18px); }
.upload-btn { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.upload-btn input { display: none; }
.field-note { font-size: .74rem; color: var(--mist); }