:root{
  --noir:#0a0a0a; --noir-2:#111111; --or:#c8a04a; --rose:#f2c6cf; --cuivre:#b87333;
  --blanc:#ffffff; --marron:#7a5c3e; --gris:#c9c9c9; --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%, rgba(200,160,74,.10), transparent 70%),
linear-gradient(180deg, var(--noir) 0%, var(--noir-2) 100%);color:var(--blanc);
font-family:'Ubuntu', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;line-height:1.6;font-size:16px}
a{color:var(--rose); text-decoration:none} a:hover{color:var(--or)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.grid{display:grid; gap:28px} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Navbar */
.navbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:rgba(10,10,10,.6);
 border-bottom:1px solid rgba(200,160,74,.2)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:600}
.brand img{height:42px; width:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.brand span{letter-spacing:.5px}
.nav-links{display:flex; gap:22px; align-items:center}
.nav-links a{font-weight:500; opacity:.9}
.nav-cta{padding:10px 16px; border:1px solid var(--or); color:var(--or); border-radius:999px; transition:.2s}
.nav-cta:hover{background:var(--or); color:var(--noir)}
.menu-btn{display:none; background:none; border:none; color:var(--blanc); font-size:28px}
@media(max-width:820px){
  .menu-btn{display:block} .nav-links{display:none}
  .nav-links.open{position:absolute; left:0; right:0; top:64px; display:flex; flex-direction:column; gap:0;
   background:rgba(10,10,10,.96); padding:10px 20px 24px; border-bottom:1px solid rgba(200,160,74,.2)}
  .nav-links.open a{padding:14px 0; border-top:1px solid rgba(255,255,255,.05)}
}
.hero{position:relative; overflow:hidden; padding:96px 0 84px; background: radial-gradient(600px 300px at 10% 0%, rgba(242,198,207,.12), transparent 70%)}
.hero h1{font-size:clamp(36px,6vw,64px); line-height:1.05; margin:0; letter-spacing:.5px;
 background:linear-gradient(180deg, var(--blanc) 0%, #e9e6e3 40%, var(--rose) 100%);
 -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{color:#dbd7d2; max-width:760px; font-size:18px; margin-top:16px}
.kicker{color:var(--or); text-transform:uppercase; letter-spacing:3px; font-size:12px}
.card{background:rgba(255,255,255,.02); border:1px solid rgba(200,160,74,.18); border-radius:20px; padding:22px;
 box-shadow:var(--shadow); transition:.25s}
.card:hover{transform:translateY(-3px); background:rgba(255,255,255,.04); border-color:rgba(200,160,74,.35)}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; border:1px solid var(--or); color:var(--noir);
 background:linear-gradient(180deg, var(--or), #a8843d); font-weight:600; letter-spacing:.3px}
.btn.ghost{background:transparent; color:var(--or)} .btn.ghost:hover{background:rgba(200,160,74,.12)}
.section{padding:64px 0} .section h2{font-size:clamp(26px,4vw,40px); margin:0 0 8px} .section p.lead{color:#dbd7d2; max-width:850px}
.horse-card{display:flex; flex-direction:column; gap:14px}
.horse-img{border-radius:16px; height:220px; background:linear-gradient(135deg, rgba(242,198,207,.2), rgba(200,160,74,.15)); border:1px solid rgba(255,255,255,.06)}
.horse-name{font-size:20px; font-weight:600} .meta{color:#d0c7be; font-size:14px}
.footer{padding:40px 0; border-top:1px solid rgba(200,160,74,.2); color:#d0c7be} .footer a{color:#e8e1da}
.hero-horse{padding:84px 0 48px; background: radial-gradient(700px 300px at 100% 10%, rgba(184,115,51,.15), transparent 60%)}
.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 12px; border-radius:999px;
 background:rgba(242,198,207,.12); border:1px solid rgba(200,160,74,.25); color:#eadfd6; font-size:13px}
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.06)}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.gallery{grid-template-columns:1fr}}
blockquote.quote{margin:0; padding:18px 20px; border-left:4px solid var(--or); background:rgba(255,255,255,.03); border-radius:0 12px 12px 0; color:#eadfd6}
hr.sep{border:0; border-top:1px solid rgba(255,255,255,.08); margin:24px 0}
.small{font-size:14px; color:#d2cbc3}