/* Las Vegas Paver Visualizer
   Palette: Charcoal #1a1a1a · Concrete #2a2a2a · Gold #c4a35a · Light #f0f0f0 · Sand #d0c8b8 */
:root{
  --charcoal:#1a1a1a;
  --concrete:#2a2a2a;
  --concrete-2:#222;
  --gold:#c4a35a;
  --gold-bright:#d4b56a;
  --light:#f0f0f0;
  --sand:#d0c8b8;
  --ink:#0f0f0f;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--charcoal);color:var(--light);line-height:1.55;-webkit-font-smoothing:antiased}
h1,h2,h3,.step-tag,.eyebrow{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(26,26,26,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(196,163,90,.2)}
.topbar-inner{max-width:1040px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.brand-logo{height:44px;width:auto;object-fit:contain}
.brand-text{font-family:'Anton';font-size:22px;letter-spacing:.04em;color:var(--gold)}
.brand-text em{font-style:normal;color:var(--light)}
.topbar-cta{color:var(--gold);font-weight:700;text-decoration:none;font-size:15px;letter-spacing:.02em}
.topbar-cta:hover{color:var(--gold-bright)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;text-align:center;padding:84px 20px 120px;background:var(--charcoal)}
.hero-overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(26,26,26,0) 0%,rgba(42,42,42,.8) 100%),
  radial-gradient(ellipse 80% 60% at 50% 30%,rgba(196,163,90,.08),transparent 60%)}
.hero-inner{position:relative;max-width:780px;margin:0 auto}
.eyebrow{font-family:'Inter';font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.hero h1{font-size:clamp(38px,7vw,64px);line-height:1.05;text-transform:uppercase}
.hero h1 span{color:var(--gold)}
.hero-sub{margin:20px auto 30px;max-width:580px;font-size:17px;color:rgba(240,240,240,.8)}
.hero-note{margin-top:14px;font-size:13px;color:rgba(240,240,240,.5)}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:none;border-radius:8px;padding:15px 32px;font-size:16px;font-weight:700;letter-spacing:.02em;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;text-align:center}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--gold);color:var(--charcoal);box-shadow:0 6px 22px rgba(196,163,90,.3)}
.btn-primary:hover{background:var(--gold-bright)}
.btn-ghost{background:transparent;color:var(--light);border:1.5px solid rgba(240,240,240,.3)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- studio / steps ---------- */
.studio{max-width:860px;margin:0 auto;padding:56px 20px 80px}
.step{margin-bottom:64px}
.step-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;border-bottom:1px solid rgba(196,163,90,.2);padding-bottom:12px}
.step-tag{font-family:'Inter';font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.step-head h2{font-weight:400;font-size:clamp(22px,3.4vw,30px);text-transform:uppercase}

/* ---------- dropzone ---------- */
.dropzone{position:relative;border:2px dashed rgba(196,163,90,.4);border-radius:var(--radius);background:rgba(42,42,42,.5);min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s,background .15s;cursor:pointer}
.dropzone.dragover{border-color:var(--gold);background:rgba(196,163,90,.08)}
.dz-empty{text-align:center;color:rgba(240,240,240,.8);padding:36px}
.dz-empty svg{margin:0 auto 12px;color:var(--gold)}
.dz-hint{font-size:13px;color:rgba(240,240,240,.5);margin-top:6px}
#dzPreview{width:100%;height:auto;max-height:440px;object-fit:cover}
.dz-change{position:absolute;bottom:12px;right:12px;background:rgba(26,26,26,.85);color:var(--light);border:1px solid rgba(196,163,90,.5);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600}
.dz-change:hover{background:var(--concrete)}

/* ---------- option pills ---------- */
.opt-group{margin-bottom:34px}
.opt-group h3{font-family:'Inter';font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:12px}
.opt-group h3 small{color:rgba(240,240,240,.4);font-weight:600;letter-spacing:.06em;text-transform:none}
.opt-note{font-size:13px;color:rgba(240,240,240,.6);margin:-6px 0 12px}
.pill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}
.pill{background:rgba(42,42,42,.6);border:1.5px solid rgba(196,163,90,.15);border-radius:10px;padding:13px 14px;text-align:left;color:var(--light);transition:border-color .12s,background .12s,transform .12s;display:flex;flex-direction:column;gap:2px}
.pill:hover{border-color:rgba(196,163,90,.5)}
.pill strong{font-size:14px;font-weight:700}
.pill span{font-size:12px;color:rgba(240,240,240,.5)}
.pill.selected{background:rgba(196,163,90,.12);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pill.selected strong{color:var(--gold)}
.swatch-grid .pill{flex-direction:row;align-items:center;gap:10px}
.swatch{width:28px;height:28px;border-radius:6px;flex:0 0 auto;box-shadow:inset 0 -2px 5px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4)}
.style-grid .pill{flex-direction:row;align-items:center;gap:8px}

/* ---------- contact ---------- */
.contact-card{background:rgba(42,42,42,.5);border:1px solid rgba(196,163,90,.15);border-radius:var(--radius);padding:26px;max-width:520px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:6px}
.field label small{color:rgba(240,240,240,.4);text-transform:none;letter-spacing:0}
.field input{width:100%;background:rgba(26,26,26,.7);border:1.5px solid rgba(196,163,90,.25);border-radius:8px;padding:13px 14px;font-size:16px;color:var(--light);outline:none;transition:border-color .12s}
.field input:focus{border-color:var(--gold)}
.field input::placeholder{color:rgba(240,240,240,.25)}
.quota-note{font-size:13px;color:rgba(240,240,240,.6);margin-bottom:14px}
.btn-generate{width:100%;font-size:17px;padding:17px}
.error{margin-top:12px;color:#ff9e9e;font-size:14px;background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.25);border-radius:8px;padding:10px 14px}

/* ---------- before/after ---------- */
.ba-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);user-select:none;touch-action:none}
.ba-after{width:100%;display:block;position:relative;z-index:1}
.ba-before-clip{position:absolute;top:0;left:0;bottom:0;width:50%;overflow:hidden;z-index:2}
.ba-before{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;object-fit:cover}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--gold);transform:translateX(-50%);cursor:ew-resize}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.ba-handle span::before{content:'⇔';color:var(--charcoal);font-size:18px;font-weight:800}
.ba-label{position:absolute;top:12px;font-family:'Inter';font-size:11px;font-weight:800;letter-spacing:.14em;background:rgba(26,26,26,.8);padding:5px 10px;border-radius:6px}
.ba-label-l{left:12px}
.ba-label-r{right:12px;color:var(--gold)}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.remaining-note{margin-top:12px;font-size:13px;color:rgba(240,240,240,.5)}

/* ---------- final cta ---------- */
.cta-final{margin-top:24px;background:linear-gradient(135deg,rgba(196,163,90,.1),rgba(42,42,42,.5));border:1px solid rgba(196,163,90,.25);border-radius:var(--radius);padding:28px;text-align:center}
.cta-final h3{font-size:20px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.cta-final p{font-size:14.5px;color:rgba(240,240,240,.8);margin-bottom:18px;max-width:460px;margin-left:auto;margin-right:auto}
.cta-final .btn{margin:6px}

/* ---------- loading ---------- */
.loading{position:fixed;inset:0;z-index:100;background:rgba(26,26,26,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.loading-card{text-align:center}
.loading-card p{margin-top:26px;font-size:17px;font-weight:600;color:var(--light)}
.paver-anim{position:relative;width:100px;height:100px;margin:0 auto}
.paver-piece{position:absolute;border:3px solid var(--gold);border-radius:4px;animation:paverDrop 1.8s ease-in-out infinite;opacity:0}
.paver-piece:nth-child(1){width:50px;height:24px;left:25px;top:20px;animation-delay:0s}
.paver-piece:nth-child(2){width:30px;height:24px;left:35px;top:48px;animation-delay:.6s}
.paver-piece:nth-child(3){width:40px;height:24px;left:30px;top:72px;animation-delay:1.2s}
@keyframes paverDrop{0%{opacity:0;transform:translateY(-20px)}50%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(196,163,90,.15);padding:32px 20px 44px;text-align:center;font-size:13px;color:rgba(240,240,240,.5)}
.foot a{color:var(--gold);text-decoration:none}
.foot-tiny{margin-top:10px;font-size:11.5px;color:rgba(240,240,240,.35)}

/* ---------- responsive & a11y ---------- */
@media (max-width:560px){
  .hero{padding:56px 16px 100px}
  .studio{padding:40px 14px 60px}
  .result-actions .btn{flex:1 1 100%}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .paver-piece{animation:none}
  html{scroll-behavior:auto}
}
[hidden]{display:none!important}