
/* BAARAKU WEBSITE REDESIGN — 2026-10-10
   Premium editorial system: Instrument experience + COLLINS restraint + Baaraku orange. */
:root{
 --bk:#080808;--paper:#F7F5F0;--white:#fff;--orange:#F28A24;--orange-deep:#D86F0C;
 --ink:#101010;--muted:#6B6862;--line:#DDD8CF;--shadow:0 22px 70px rgba(0,0,0,.10)
}
html{scroll-behavior:smooth}
body{background:var(--paper)!important;color:var(--ink)!important;-webkit-font-smoothing:antialiased}
.site-header,.topbar{
 position:sticky!important;top:0!important;z-index:1000!important;
 background:rgba(8,8,8,.96)!important;backdrop-filter:blur(18px)!important;
 border-bottom:1px solid rgba(255,255,255,.10)!important
}
.site-header .nav,.topbar .nav{min-height:76px!important}
.site-header a,.topbar a{transition:color .2s ease,background .2s ease,transform .2s ease}
.site-header .nav-link,.site-header .nav-links a,.topbar .nav-links a{color:#fff!important;-webkit-text-fill-color:#fff!important}
.site-header .nav-link:hover,.site-header .nav-links a:hover,.topbar .nav-links a:hover{color:var(--orange)!important;-webkit-text-fill-color:var(--orange)!important}
.site-header .nav-cta,.topbar .nav-cta{background:var(--orange)!important;color:#111!important;-webkit-text-fill-color:#111!important;border-radius:999px!important}
.hero{position:relative;overflow:hidden}
.hero h1,.display{letter-spacing:-.06em!important;line-height:.90!important}
.eyebrow,.k{color:var(--orange)!important;-webkit-text-fill-color:var(--orange)!important;font-weight:800!important;letter-spacing:.15em!important}
.btn,.button,.cta,.primary-cta{
 border-radius:999px!important;background:var(--orange)!important;color:#111!important;
 -webkit-text-fill-color:#111!important;font-weight:750!important;box-shadow:none!important
}
.btn:hover,.button:hover,.cta:hover,.primary-cta:hover{background:#FF9B3D!important;transform:translateY(-1px)}
.card,.hero-card,.panel,.form-card{border-radius:24px!important}
section{scroll-margin-top:90px}
footer,.footer{background:#050505!important;color:#fff!important}
footer a,.footer a{color:#ddd!important}
input,select,textarea{border-radius:12px!important}
input:focus,select:focus,textarea:focus{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(242,138,36,.15)!important;outline:none!important}
@media(max-width:700px){
 .hero{padding-top:54px!important}
 .hero h1,.display{letter-spacing:-.05em!important}
 .site-header .nav,.topbar .nav{min-height:68px!important}
}
