/* ===== Design Tokens ===== */
:root{
  --brand-50:#f5f8ff; --brand-100:#e9efff; --brand-200:#cfdcff; --brand-300:#a7bfff; --brand-400:#7b9dff; --brand-500:#4b79ff; --brand-600:#365fe6; --brand-700:#2b4bb4; --brand-800:#223c8f; --brand-900:#1b2f70;
  --accent-500:#22c55e;
  --bg:#0b0c11; --surface:#0f1117; --elev:#151823; --text:#e6e8ef; --muted:#9aa3b2; --line:rgba(255,255,255,.08);
  color-scheme: light dark;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --surface:#ffffff; --elev:#f7f7fb; --text:#0f172a; --muted:#475569; --line:rgba(2,6,23,.08); }
}
:root{
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --fs-900: clamp(2.2rem, 3.5vw + 1rem, 3.2rem);
  --fs-800: clamp(1.6rem, 2.5vw + .8rem, 2.2rem);
  --fs-700: 1.5rem; --fs-600: 1.25rem; --fs-500: 1.125rem; --fs-400: 1rem;
  --lh-tight:1.15; --lh-snug:1.25; --lh-normal:1.6;
  --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --radius-xl: 32px;
  --gap-1:.25rem; --gap-2:.5rem; --gap-3:.75rem; --gap-4:1rem; --gap-5:1.25rem; --gap-6:1.5rem; --gap-8:2rem; --gap-10:2.5rem; --gap-12:3rem; --gap-16:4rem;
  --maxw: 1120px; --content: 720px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-2: 0 8px 24px rgba(0,0,0,.18);
  --ring: 0 0 0 3px color-mix(in oklab, var(--brand-500) 40%, transparent);
  --ease: cubic-bezier(.2,.7,.2,1); --dur: 220ms;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:var(--font); color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--brand-500) 16%, transparent) 0%, transparent 60%), var(--bg);
  line-height:var(--lh-normal);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin-inline:auto; padding:0 var(--gap-6)}
.muted{color:var(--muted)}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(10px);
  background: color-mix(in oklab, var(--surface) 92%, transparent); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.links{display:flex; gap:var(--gap-6); align-items:center}
.brand img{display:block}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; font-weight:600; border:1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 96%, transparent), color-mix(in oklab, var(--surface) 92%, transparent)); box-shadow:var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)}
.btn.primary{background: linear-gradient(180deg, color-mix(in oklab, var(--brand-500) 94%, transparent), color-mix(in oklab, var(--brand-600) 94%, transparent)); color:white; border-color: color-mix(in oklab, var(--brand-700) 40%, var(--line))}
.btn.small{padding:.5rem .8rem}

/* ===== Sections ===== */
section{padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top:1px solid var(--line)}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:var(--gap-6); margin-bottom:var(--gap-8)}
.kicker{font-size:.9rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em}
h1{font-size:var(--fs-900); line-height:var(--lh-tight); letter-spacing:-.01em; margin: var(--gap-4) 0 var(--gap-6)}
h2{font-size:var(--fs-800); margin:0; line-height:var(--lh-snug)}
h3{font-size:var(--fs-600); margin:0 0 .25rem 0}
.lead{font-size:var(--fs-500); color:var(--muted); max-width:var(--content)}

/* ===== Layout / Cards ===== */
.grid{display:grid; gap:var(--gap-6)}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 900px){ .grid.cols-3{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:var(--radius); padding:var(--gap-6); background:var(--surface); box-shadow:var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); display:grid; place-items:center; color:white; font-weight:700}

/* ===== Hero ===== */
.hero{padding: clamp(3rem, 8vw, 7rem) 0}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--gap-10); align-items:center}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }
.showcase{border-radius: var(--radius-xl); border:1px solid var(--line); background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 98%, transparent), color-mix(in oklab, var(--elev) 92%, transparent)); padding: var(--gap-6); box-shadow: var(--shadow-2)}
.ph-media{display:grid; place-items:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; height:100%; min-height:220px}

/* ===== Auctions ===== */
.auctions{grid-template-columns:1fr; gap:var(--gap-4)}
.auction-card{display:grid; grid-template-columns: 80px 1fr auto; gap:var(--gap-4); align-items:center; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:var(--gap-4)}
.auction-date{display:grid; place-items:center; width:80px; aspect-ratio:1; border-radius:14px; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:white; font-weight:700}
.auction-date .month{display:block; font-size:.9rem; opacity:.9}
.auction-date .day{display:block; font-size:1.6rem; line-height:1; margin-top:.1rem}
.auction-body h3{margin:0 0 .2rem 0}
.tags{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem}
.tag{font-size:.85rem; padding:.25rem .5rem; border:1px solid var(--line); border-radius:999px; color:var(--muted)}

/* ===== Lots ===== */
.lots .lot-cta{display:flex; gap:.5rem; margin-top:.5rem}

/* ===== Forms ===== */
.form label{display:grid; gap:.35rem; font-weight:600}
.form input, .form textarea{padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text)}
.form-grid{grid-template-columns:1fr 1fr}
.form-grid > label:nth-child(4){grid-column:1/-1}
@media (max-width: 900px){ .form-grid{grid-template-columns:1fr} }

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); padding: var(--gap-8) 0; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns: 2fr 1fr; align-items:start; gap:var(--gap-6)}
.footer-links{display:flex; gap:var(--gap-4)}
.copy{grid-column:1/-1; margin-top:.5rem}

/* ===== Accessibility ===== */
:focus-visible{outline:none; box-shadow:var(--ring)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }