:root{
  --bg:#010305;
  --blue:#19aef8;
  --orange:#ff5b1c;
  --silver:#d7dde2;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow:hidden}
.hero{position:relative;min-height:100svh;width:100%;overflow:hidden;isolation:isolate;background:#010305}
.hero-bg{position:absolute;inset:0;z-index:-3;background:url("assets/opendiag-coming-soon-hero.png") center center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,transparent 13%,transparent 84%,rgba(0,0,0,.38) 100%)}
.energy-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.guide path{fill:none;stroke-width:1;opacity:0}

.brand-bar{
  position:absolute;
  top:24px;
  left:50%;
  z-index:4;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 26px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(4,8,12,.74),rgba(1,3,5,.38));
  backdrop-filter:blur(8px);
  box-shadow:0 10px 36px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.08);
}
.brand-name{
  position:relative;
  font-family:Impact,"Arial Black",Inter,ui-sans-serif,sans-serif;
  font-size:clamp(2.2rem,4vw,4.7rem);
  line-height:.88;
  letter-spacing:.055em;
  font-weight:900;
  text-transform:uppercase;
  transform:scaleX(.94);
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.72));
}
.brand-open,.brand-diag{
  display:inline-block;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:1px rgba(255,255,255,.42);
}
.brand-open{
  background-image:linear-gradient(180deg,#f4f8fa 0%,#9ba8b0 30%,#eef3f5 52%,#69747c 73%,#d8e0e4 100%);
  text-shadow:-3px 0 15px rgba(25,174,248,.48);
  filter:drop-shadow(-4px 4px 7px rgba(0,135,255,.32));
}
.brand-diag{
  margin-left:.20em;
  background-image:linear-gradient(180deg,#fff3e9 0%,#c7b1a5 25%,#ff7b36 52%,#8e2d0c 78%,#ffb17d 100%);
  text-shadow:3px 0 15px rgba(255,91,28,.55);
  filter:drop-shadow(4px 4px 7px rgba(255,72,0,.34));
}
.brand-name::after{
  content:"";
  position:absolute;
  left:3%;
  right:3%;
  bottom:-11px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--blue) 12%,rgba(220,230,235,.75) 48%,var(--orange) 88%,transparent);
  box-shadow:-80px 0 12px rgba(25,174,248,.42),80px 0 12px rgba(255,91,28,.42);
}

.tagline{
  position:absolute;
  left:50%;
  bottom:20px;
  z-index:4;
  transform:translateX(-50%);
  display:flex;
  gap:clamp(20px,3.2vw,54px);
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:13px 28px 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(5,9,13,.76),rgba(1,3,5,.52));
  backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06);
  color:#d9dfe3;
  font-size:clamp(.82rem,1.18vw,1.18rem);
  font-weight:700;
  letter-spacing:.25em;
  text-shadow:0 3px 12px rgba(0,0,0,.9);
}
.diag-blue{
  color:#29baff;
  text-shadow:0 0 9px rgba(25,174,248,.5),0 0 20px rgba(25,174,248,.22);
}
.evolve-orange{
  color:#ff6a27;
  text-shadow:0 0 9px rgba(255,91,28,.52),0 0 20px rgba(255,91,28,.22);
}

@media (max-aspect-ratio:4/3){
  .hero-bg{background-size:auto 100%;background-position:center center}
}
@media (max-width:700px){
  .hero{min-height:100svh}
  .hero-bg{background-size:auto 100%;background-position:center center}
  .brand-bar{top:12px;left:50%;padding:8px 13px 10px;width:max-content;max-width:94vw}
  .brand-name{font-size:clamp(1.65rem,9vw,2.7rem);letter-spacing:.035em}
  .tagline{bottom:10px;gap:8px;padding:9px 11px;font-size:clamp(.47rem,2.4vw,.68rem);letter-spacing:.10em;max-width:96vw}
}