/*
 * Velocity Obsidian
 * Futuristic SaaS layout with a technical grid, dark bento cards, and luminous
 * interface accents. It preserves all shared WordPress data and interactions.
 */
.hsp-velocity-obsidian{
  --red:#ff3344;
  --red-dark:#c9081c;
  --ink:#f5f7fa;
  --text:#c5cad2;
  --muted:#808793;
  --surface:#111419;
  --line:#292e36;
  --white:#f8fafc;
  --gold:#79e6ff;
  --night:#080a0d;
  --radius:20px;
  --shadow:0 28px 80px rgba(0,0,0,.35);
  --container:1320px;
  background:#080a0d;
  color:var(--text);
}
.hsp-velocity-obsidian:before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
}
.hsp-velocity-obsidian h1,
.hsp-velocity-obsidian h2,
.hsp-velocity-obsidian h3{color:#f7f9fc}
.hsp-velocity-obsidian .eyebrow,
.hsp-velocity-obsidian .badge{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.hsp-velocity-obsidian .site-header{top:0;color:#fff}
.hsp-velocity-obsidian .site-header .nav-wrap,
.hsp-velocity-obsidian .site-header:not(.scrolled) .nav-wrap,
.hsp-velocity-obsidian .site-header.scrolled .nav-wrap{
  width:100%;
  max-width:none;
  height:88px;
  margin:0;
  padding:0 clamp(18px,4vw,72px);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:0;
  background:rgba(7,9,12,.8);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(22px);
}
.hsp-velocity-obsidian .brand-mark{
  border-radius:12px 4px 12px 4px;
  background:linear-gradient(135deg,#ff3d4d,#ba0718);
  box-shadow:0 0 30px rgba(255,51,68,.32);
}
.hsp-velocity-obsidian .brand small{color:#8a929f}
.hsp-velocity-obsidian .primary-nav a{font-size:12px;color:#c5cad2}
.hsp-velocity-obsidian .primary-nav a:hover{color:#fff}
.hsp-velocity-obsidian .nav-wa,
.hsp-velocity-obsidian .site-header:not(.scrolled) .nav-wa,
.hsp-velocity-obsidian .site-header.scrolled .nav-wa{
  border-color:#ff3344!important;
  border-radius:9px;
  background:rgba(255,51,68,.1)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,51,68,.15),0 0 28px rgba(255,51,68,.12);
}
.hsp-velocity-obsidian .button{border-radius:10px}
.hsp-velocity-obsidian .hero-slider{
  height:clamp(760px,100svh,960px);
  min-height:760px;
  border-bottom:1px solid var(--line);
  background:#07090c;
}
.hsp-velocity-obsidian .hero-visual{inset:88px 0 0 31%;background-position:64% center}
.hsp-velocity-obsidian .hero-slide:after{
  background:
    radial-gradient(circle at 74% 44%,transparent 0,transparent 18%,rgba(7,9,12,.05) 42%,rgba(7,9,12,.7) 78%),
    linear-gradient(90deg,#07090c 0%,rgba(7,9,12,.94) 27%,rgba(7,9,12,.3) 55%,rgba(7,9,12,.44)),
    linear-gradient(0deg,#07090c 0%,transparent 35%);
}
.hsp-velocity-obsidian .hero-slide:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:88px 0 0;
  pointer-events:none;
  background:
    linear-gradient(rgba(121,230,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(121,230,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,#000,transparent 78%);
}
.hsp-velocity-obsidian .hero-noise{opacity:.04}
.hsp-velocity-obsidian .hero-slider .hero-content{padding-top:108px}
.hsp-velocity-obsidian .hero-copy{width:min(650px,49vw);padding-bottom:20px}
.hsp-velocity-obsidian .hero-copy .eyebrow{color:#79e6ff}
.hsp-velocity-obsidian .hero-copy .eyebrow i{box-shadow:0 0 14px #79e6ff}
.hsp-velocity-obsidian .hero-copy h1{
  max-width:650px;
  font-size:clamp(54px,5.7vw,88px);
  line-height:.92;
  letter-spacing:-.065em;
}
.hsp-velocity-obsidian .hero-copy>p{max-width:520px;color:#aeb5c0}
.hsp-velocity-obsidian .hero-meta{
  position:relative;
  width:max-content;
  min-width:300px;
  padding:13px 18px;
  border:1px solid #303640;
  border-left:3px solid #79e6ff;
  border-radius:8px;
  background:rgba(10,13,17,.68);
  backdrop-filter:blur(16px);
}
.hsp-velocity-obsidian .hero-meta:after{
  content:"LIVE CONFIG";
  position:absolute;
  right:12px;
  top:10px;
  color:#79e6ff;
  font:700 7px ui-monospace,monospace;
  letter-spacing:.12em;
}
.hsp-velocity-obsidian .hero-actions .button-premium{
  border-color:#ff3344!important;
  background:#ff3344!important;
  color:#fff!important;
  box-shadow:0 10px 40px rgba(255,51,68,.22);
}
.hsp-velocity-obsidian .hero-actions .button-glass{
  border-color:#3e4550!important;
  background:rgba(14,17,22,.72)!important;
  color:#fff!important;
}
.hsp-velocity-obsidian .hero-ui{bottom:46px}
.hsp-velocity-obsidian .hero-pagination button span{background:#303640}
.hsp-velocity-obsidian .hero-pagination button span:after{background:#79e6ff;box-shadow:0 0 10px #79e6ff}
.hsp-velocity-obsidian .hero-nav button{border-radius:10px;background:#11151b}
.hsp-velocity-obsidian .hero-scroll{color:#68707c}
.hsp-velocity-obsidian .quick{
  margin:0;
  padding:28px 0 0;
  background:#080a0d;
}
.hsp-velocity-obsidian .quick-grid{
  gap:12px;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.hsp-velocity-obsidian .quick-grid a{
  min-height:116px;
  border:1px solid #292e36!important;
  border-radius:16px;
  background:linear-gradient(135deg,#15191f,#0e1116);
}
.hsp-velocity-obsidian .quick-grid a:hover{border-color:#505965!important;background:#181d24}
.hsp-velocity-obsidian .quick-grid b{color:#79e6ff}
.hsp-velocity-obsidian .quick-grid small{color:#747c88}
.hsp-velocity-obsidian .service-assurance{background:#080a0d}
.hsp-velocity-obsidian .assurance-grid{border-color:#292e36}
.hsp-velocity-obsidian .assurance-item{border-color:#292e36}
.hsp-velocity-obsidian .assurance-item span{color:#79e6ff}
.hsp-velocity-obsidian .section{padding:125px 0;background:#080a0d}
.hsp-velocity-obsidian .section-head{padding-bottom:28px;border-bottom:1px solid #292e36}
.hsp-velocity-obsidian .section-head h2{font-size:clamp(43px,5vw,70px)}
.hsp-velocity-obsidian .section-head p{color:#808793}
.hsp-velocity-obsidian .text-link{color:#79e6ff}
.hsp-velocity-obsidian .filters input,
.hsp-velocity-obsidian .filters select{
  border-color:#303640;
  background:#11151a;
  color:#fff;
}
.hsp-velocity-obsidian .vehicle-grid{
  grid-template-columns:repeat(12,1fr);
  grid-auto-flow:dense;
  gap:14px;
}
.hsp-velocity-obsidian .vehicle-card{
  grid-column:span 4;
  border-color:#292e36;
  border-radius:18px;
  background:#101318;
}
.hsp-velocity-obsidian .vehicle-card:nth-child(1),
.hsp-velocity-obsidian .vehicle-card:nth-child(6){grid-column:span 8}
.hsp-velocity-obsidian .vehicle-card:nth-child(1) .vehicle-art,
.hsp-velocity-obsidian .vehicle-card:nth-child(6) .vehicle-art{height:360px}
.hsp-velocity-obsidian .vehicle-art{height:250px;background:#15191f}
.hsp-velocity-obsidian .vehicle-art:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(10,12,16,.82),transparent 45%);
}
.hsp-velocity-obsidian .badge{
  border:1px solid #38404a;
  background:rgba(9,11,14,.78);
  color:#79e6ff;
  backdrop-filter:blur(10px);
}
.hsp-velocity-obsidian .vehicle-body h3,
.hsp-velocity-obsidian .vehicle-body p strong{color:#fff}
.hsp-velocity-obsidian .vehicle-body small,
.hsp-velocity-obsidian .icon-link{color:#79e6ff}
.hsp-velocity-obsidian .experience-lab{background:#0c0f13}
.hsp-velocity-obsidian .studio-grid{border:1px solid #292e36;box-shadow:0 35px 120px rgba(0,0,0,.4)}
.hsp-velocity-obsidian .studio-form{background:#12161b}
.hsp-velocity-obsidian .studio-form select{border-color:#343a44;background:#0b0e12;color:#fff}
.hsp-velocity-obsidian .studio-result{background:radial-gradient(circle at 80% 20%,rgba(121,230,255,.1),transparent 35%),#090b0e}
.hsp-velocity-obsidian .sales-section{
  background:
    radial-gradient(circle at 80% 20%,rgba(255,51,68,.12),transparent 32%),
    #0b0d11;
}
.hsp-velocity-obsidian .sales-photo>img{border:1px solid #353b45;border-radius:18px;filter:saturate(.8) contrast(1.05)}
.hsp-velocity-obsidian .sales-badge{border:1px solid #303640;border-radius:10px;background:#11151b;color:#fff}
.hsp-velocity-obsidian .concierge-panel{background:#080a0d}
.hsp-velocity-obsidian .concierge-shell{border-color:#292e36}
.hsp-velocity-obsidian .concierge-copy{background:#111419}
.hsp-velocity-obsidian .concierge-console{
  background:radial-gradient(circle at 100% 0,rgba(121,230,255,.1),transparent 32%),#0a0d11;
}
.hsp-velocity-obsidian .surface{background:#0d1014}
.hsp-velocity-obsidian .promo-card{border:1px solid #292e36;background:#12151a}
.hsp-velocity-obsidian .calculator-section{background:#080a0d}
.hsp-velocity-obsidian .mini-calc,
.hsp-velocity-obsidian .form-card,
.hsp-velocity-obsidian .info-card{
  border-color:#303640;
  background:#12161b;
  color:#c8cdd5;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.hsp-velocity-obsidian input,
.hsp-velocity-obsidian select,
.hsp-velocity-obsidian textarea{border-color:#343a44;background:#0b0e12;color:#fff}
.hsp-velocity-obsidian .process{background:#0d1014}
.hsp-velocity-obsidian .steps li{border-color:#2e343d}
.hsp-velocity-obsidian .steps b{box-shadow:0 0 0 8px #0d1014}
.hsp-velocity-obsidian .showroom{background:#090b0e}
.hsp-velocity-obsidian .map-placeholder,
.hsp-velocity-obsidian .map-large{border:1px solid #303640;background:radial-gradient(circle,rgba(121,230,255,.1),transparent 36%),#11151a}
.hsp-velocity-obsidian .faq{background:#080a0d}
.hsp-velocity-obsidian .faq details{border-color:#292e36}
.hsp-velocity-obsidian .faq details p{color:#7f8793}
.hsp-velocity-obsidian .final-cta{
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 110%,rgba(255,51,68,.4),transparent 45%),
    #0c0f13;
  background-size:40px 40px,40px 40px,auto,auto;
}
.hsp-velocity-obsidian .site-footer{border-top:1px solid #292e36;background:#050608}
.hsp-velocity-obsidian .floating-wa{border:1px solid #303640;background:#11151a;color:#fff}

/* Detail kendaraan */
.hsp-velocity-obsidian.premium-vehicle-detail{background:#080a0d}
.hsp-velocity-obsidian .detail-header{border-bottom:1px solid #292e36;background:rgba(7,9,12,.92)!important;color:#fff!important}
.hsp-velocity-obsidian .product-hero{background:#090b0e}
.hsp-velocity-obsidian .product-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(121,230,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(121,230,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
}
.hsp-velocity-obsidian .product-copy h1{font-size:clamp(54px,6vw,92px)}
.hsp-velocity-obsidian .product-hero-media{border:1px solid #313741;border-radius:24px;overflow:hidden}
.hsp-velocity-obsidian .detail-section,
.hsp-velocity-obsidian .features-section,
.hsp-velocity-obsidian .specifications-section,
.hsp-velocity-obsidian .ownership-section{background:#080a0d;color:#c5cad2}
.hsp-velocity-obsidian .configurator-shell,
.hsp-velocity-obsidian .finance-shell,
.hsp-velocity-obsidian .concierge-card{border:1px solid #303640;background:#11151a;box-shadow:0 35px 100px rgba(0,0,0,.35)}

/* Layanan Premium */
.hsp-velocity-obsidian .suite-header{border-bottom-color:#292e36;background:rgba(7,9,12,.94)}
.hsp-velocity-obsidian .suite-hero{background:#080a0d}
.hsp-velocity-obsidian .suite-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(121,230,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(121,230,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
}
.hsp-velocity-obsidian .suite-hero .hero-copy{width:auto;max-width:none;background:radial-gradient(circle at 25% 35%,rgba(255,51,68,.1),transparent 40%)}
.hsp-velocity-obsidian .hero-metrics{border-color:#303640;background:rgba(9,12,16,.9)}
.hsp-velocity-obsidian .suite-section,
.hsp-velocity-obsidian .quote-section,
.hsp-velocity-obsidian .compare-section,
.hsp-velocity-obsidian .promo-section,
.hsp-velocity-obsidian .booking-section{background:#080a0d;color:#c5cad2}
.hsp-velocity-obsidian .quote-shell,
.hsp-velocity-obsidian .compare-table,
.hsp-velocity-obsidian .booking-form,
.hsp-velocity-obsidian .trade-form{border-color:#303640;background:#11151a;color:#c5cad2}
.hsp-velocity-obsidian .stock-section,
.hsp-velocity-obsidian .media-section{background:#05070a}

@media(max-width:900px){
  .hsp-velocity-obsidian .hero-visual{inset:88px 0 0 18%}
  .hsp-velocity-obsidian .hero-copy{width:min(620px,72vw)}
  .hsp-velocity-obsidian .vehicle-card,
  .hsp-velocity-obsidian .vehicle-card:nth-child(1),
  .hsp-velocity-obsidian .vehicle-card:nth-child(6){grid-column:span 6}
  .hsp-velocity-obsidian .vehicle-card:nth-child(1) .vehicle-art,
  .hsp-velocity-obsidian .vehicle-card:nth-child(6) .vehicle-art{height:275px}
}
@media(max-width:640px){
  .hsp-velocity-obsidian .site-header{top:26px}
  .hsp-velocity-obsidian .site-header .nav-wrap,
  .hsp-velocity-obsidian .site-header.scrolled .nav-wrap{height:68px;padding:0 15px;background:rgba(7,9,12,.94)}
  .hsp-velocity-obsidian .showroom-brand>span:last-child{max-width:calc(100vw - 165px)}
  .hsp-velocity-obsidian .menu-toggle{flex:0 0 auto;margin-left:auto;color:#fff}
  .hsp-velocity-obsidian .hero-slider{height:800px;min-height:720px}
  .hsp-velocity-obsidian .hero-visual{inset:0;background-position:68% center}
  .hsp-velocity-obsidian .hero-slide:before{inset:0}
  .hsp-velocity-obsidian .hero-slide:after{background:linear-gradient(0deg,#07090c 0%,rgba(7,9,12,.84) 52%,rgba(7,9,12,.12) 100%)}
  .hsp-velocity-obsidian .hero-slider .hero-content{padding:0 0 170px}
  .hsp-velocity-obsidian .hero-copy{width:100%}
  .hsp-velocity-obsidian .hero-copy h1{font-size:clamp(38px,10.8vw,48px)}
  .hsp-velocity-obsidian .hero-ui{bottom:105px}
  .hsp-velocity-obsidian .quick{padding-top:0}
  .hsp-velocity-obsidian .quick-grid{gap:0}
  .hsp-velocity-obsidian .quick-grid a{border-radius:0}
  .hsp-velocity-obsidian .section{padding:84px 0}
  .hsp-velocity-obsidian .vehicle-grid{display:grid;grid-template-columns:1fr}
  .hsp-velocity-obsidian .vehicle-card,
  .hsp-velocity-obsidian .vehicle-card:nth-child(1),
  .hsp-velocity-obsidian .vehicle-card:nth-child(6){grid-column:auto}
  .hsp-velocity-obsidian .vehicle-card:nth-child(1) .vehicle-art,
  .hsp-velocity-obsidian .vehicle-card:nth-child(6) .vehicle-art{height:245px}
  .hsp-velocity-obsidian .mobile-cta{color:#15161a}
}
