/*
Theme Name: VELLARO FINAL
Theme URI: https://vellaro.pl
Author: VELLARO
Description: Finalny motyw strony głównej VELLARO, zgodny z zaakceptowaną wersją referencyjną.
Version: 2.4.0
Text Domain: vellaro-final
Requires at least: 6.0
Requires PHP: 8.0
*/

:root{--gold:#d7a23f;--black:#07090c;--paper:#f4efe6;--text:#16191d;--muted:#6c7075}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:var(--text)}
img{display:block;max-width:100%}.wrap{width:min(1240px,calc(100% - 44px));margin:auto}

.hero-reference{background:#050607}
.hero-reference img{width:100%;height:auto}
.section{padding:96px 0}
.why{background:linear-gradient(180deg,#f7f2e9,#f2ede4)}
.why-grid{display:grid;grid-template-columns:1.05fr 1.45fr;gap:52px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-size:13px;font-weight:800}
h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,5vw,67px);line-height:1.06;font-weight:400;letter-spacing:-.035em;margin:14px 0 20px}
h2 span{color:var(--gold)}
.lead{font-size:18px;line-height:1.7;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border-radius:17px;padding:28px 26px;min-height:270px;box-shadow:0 18px 45px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.06)}
.card .num{color:var(--gold);font-weight:800;font-size:17px}.icon{width:58px;height:58px;border-radius:50%;background:#f2ede4;display:grid;place-items:center;margin:18px 0;font-size:25px}
.card h3{font-family:Georgia,"Times New Roman",serif;font-size:25px;margin:0 0 12px}.card p{color:var(--muted);line-height:1.65;margin:0}
.car{background:#101419;color:#fff}.car-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:65px;align-items:center}.car-image{border-radius:18px;overflow:hidden;background:#fff}.car-image img{width:100%;height:auto}.car p{color:rgba(255,255,255,.72);font-size:17px;line-height:1.7}.link{color:#e6b654;font-weight:800}
.equipment{text-align:center}.equipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;text-align:left}
.eq{background:#fff;border-radius:18px;padding:34px;box-shadow:0 18px 45px rgba(0,0,0,.06)}.badge{width:70px;height:70px;border-radius:50%;background:#0c0f13;color:#e6b654;display:grid;place-items:center;font-weight:800;font-size:18px}.eq h3{font-family:Georgia,"Times New Roman",serif;font-size:29px;margin:22px 0 10px}.eq p{color:var(--muted);line-height:1.7}.eq strong{color:#b57e28;font-size:18px}
.cta{padding-top:20px}.cta-box{background:#fff;border-radius:18px;padding:46px 52px;display:flex;justify-content:space-between;align-items:center;gap:30px;box-shadow:0 18px 45px rgba(0,0,0,.06)}.cta-box h2{font-size:45px;margin:5px 0}.buttons{display:flex;gap:14px}.btn{padding:17px 28px;text-transform:uppercase;font-weight:800}.btn.gold{background:var(--gold)}.btn.dark{background:#111;color:#fff}
footer{background:#050607;color:#fff;padding:58px 0 25px;margin-top:90px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:50px}.footer-logo{font-family:Georgia,serif;letter-spacing:.15em;color:#e6b654;font-size:30px}.muted{color:rgba(255,255,255,.62)}.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:35px;padding-top:20px;color:rgba(255,255,255,.45);font-size:13px}
@media(max-width:950px){.why-grid,.car-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.equipment-grid{grid-template-columns:1fr}.cta-box{flex-direction:column;align-items:flex-start}.footer-grid{grid-template-columns:1fr}}
@media(max-width:600px){.wrap{width:min(100% - 26px,1240px)}.section{padding:70px 0}.buttons{width:100%;flex-direction:column}.btn{text-align:center}}

/* Klikalne strefy menu na zatwierdzonym obrazie Hero */
.hero-clickable{position:relative}
.hero-clickable .hero-hotspots{position:absolute;inset:0;pointer-events:none}
.hero-clickable .hotspot{position:absolute;display:block;pointer-events:auto;background:transparent}
.hero-clickable .hotspot:focus-visible{outline:2px solid #d7a23f;outline-offset:2px}

/* Pozycje procentowe względem finalnego obrazu 1536×1024 */
.hero-clickable .home{left:27.7%;top:4.4%;width:12.2%;height:5.4%}
.hero-clickable .about{left:39.8%;top:4.4%;width:7.1%;height:5.4%}
.hero-clickable .car{left:46.8%;top:4.4%;width:8.8%;height:5.4%}
.hero-clickable .pricing{left:55.8%;top:4.4%;width:7.0%;height:5.4%}
.hero-clickable .faq{left:62.9%;top:4.4%;width:5.2%;height:5.4%}
.hero-clickable .contact{left:68.3%;top:4.4%;width:8.0%;height:5.4%}
.hero-clickable .reservation{left:82.7%;top:4.3%;width:11.4%;height:5.6%}

/* Na małych ekranach obraz skaluje się proporcjonalnie, więc strefy pozostają zgodne */