:root{
  --transition-fast: 260ms;
  --transition-medium: 520ms;
  --header-height: 72px;

  --logistics-accent: #ffcf00;
  --cars-accent: #cfcfcf;
  --gokart-accent: #00ff66;

  --text-light: #ffffff;
  --muted: #bdbdbd;
  --glass: rgba(255,255,255,0.04);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:#000;color:var(--text-light)}
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:60;
  display:flex;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.15));
  backdrop-filter: blur(6px);padding:0 20px;
}
.header-inner{width:100%;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo-wrap{display:flex;align-items:center;gap:12px}
.header-controls{display:flex;gap:10px;align-items:center}
.pill{background:rgba(255,255,255,0.06);border:0;padding:8px 12px;border-radius:999px;color:var(--text-light);cursor:pointer;transition:transform 160ms}
.pill[aria-pressed="true"]{transform:scale(1.03);box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.icon-btn{background:transparent;border:0;color:var(--text-light);cursor:pointer;font-size:18px;padding:8px}

/* Tri-hub layout */
.tri-hub{display:flex;height:100vh;padding-top:var(--header-height);gap:0;overflow:hidden}
.hub{flex:1;min-width:0;position:relative;display:flex;align-items:flex-end;color:var(--text-light);cursor:pointer;transition:flex var(--transition-medium) cubic-bezier(.2,.9,.2,1);overflow:hidden}
.hub-inner{padding:48px;z-index:2;max-width:520px}
.hub-title{margin:0;font-size:clamp(20px,4vw,36px);font-weight:800;letter-spacing:0.6px}
.hub-sub{margin:8px 0 18px;color:var(--muted)}
.hub-overlay{position:absolute;inset:0;z-index:1;overflow:hidden}
.hub .hero-video, .hub .hero-image{width:100%;height:100%;object-fit:cover;opacity:0.85;transform:scale(1.05);filter:contrast(1.05) saturate(1.05)}
.hub::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.6));z-index:1}

/* Identity per hub */
.hub-logistics{background:linear-gradient(90deg,#111,#1a1a1a);border-right:1px solid rgba(255,255,255,0.02)}
.hub-logistics .hub-title{font-family: "Archivo Black", Impact, sans-serif}
.hub-cars{background:linear-gradient(90deg,#071028,#0b1b2b)}
.hub-cars .hub-title{font-family: "Playfair Display", serif}
.hub-gokart{background:linear-gradient(90deg,#050505,#0b0b0b)}
.hub-gokart .hub-title{font-family: "Anton", sans-serif}

/* Hover expansion */
.hub:hover{flex:2}
.tri-hub:hover .hub:not(:hover){flex:1}

/* Enter button */
.enter-btn{background:var(--glass);border:1px solid rgba(255,255,255,0.08);color:var(--text-light);padding:10px 14px;border-radius:8px;cursor:pointer}

/* Section shell and liquid mask */
.section-shell{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden}
.section-shell.active{visibility:visible;pointer-events:auto}
.liquid-mask{position:absolute;inset:0;width:100%;height:100%;z-index:85;mix-blend-mode:normal;pointer-events:none}
.section-content{position:absolute;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;pointer-events:none}
.subdomain{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;color:var(--text-light);padding-top:var(--header-height);pointer-events:auto;opacity:0;transform:scale(1.02);transition:opacity var(--transition-medium),transform var(--transition-medium)}
.subdomain.active{opacity:1;transform:scale(1);pointer-events:auto}
.sub-inner{max-width:1200px;padding:48px;outline:none}
.sub-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.widget{background:rgba(255,255,255,0.03);padding:18px;border-radius:10px;min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Configurator layout */
.config-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.viewer3d{background:#0b0b0b;border-radius:10px;min-height:420px;position:relative;overflow:hidden}
.config-ui{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;color:var(--muted)}
.specs h3{margin:0 0 8px 0}
.hotspot-list ul{list-style:none;padding:0;margin:0}
.hotspot-list li{padding:6px 8px;border-radius:6px;background:rgba(255,255,255,0.02);margin-bottom:8px;cursor:pointer}

/* Hotspot marker */
.hotspot {
  position:absolute;
  width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,0.9);box-shadow:0 6px 18px rgba(0,0,0,0.6);
  transform:translate(-50%,-50%);cursor:pointer;border:2px solid rgba(0,0,0,0.4);
}

/* Booking layout */
.booking-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.slot-list{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px}
.slot-item{padding:10px;border-radius:8px;background:rgba(255,255,255,0.03);margin-bottom:8px;cursor:pointer}
.slot-item.booked{opacity:0.5;cursor:not-allowed}
.booking-panel{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px}
.booking-result{margin-top:12px;color:var(--muted)}

/* Back button */
.back-home{position:fixed;left:20px;bottom:20px;padding:10px 14px;border-radius:8px;border:0;background:rgba(255,255,255,0.06);color:var(--text-light);cursor:pointer;z-index:200}

/* Header accent classes animate gradient stops */
.header.logistics #g0{stop-color:var(--logistics-accent)}
.header.cars #g0{stop-color:var(--cars-accent)}
.header.gokart #g0{stop-color:var(--gokart-accent)}

/* Responsive */
@media (max-width:1000px){
  .config-grid{grid-template-columns:1fr}
  .booking-grid{grid-template-columns:1fr}
  .viewer3d{min-height:320px}
}