/* The opening is a field of individual signals, not a set of interface cards. */
.launch-flow{
  position:relative;display:block;isolation:isolate;overflow:hidden;
  min-height:max(790px,100svh);padding:0;
  background:
    radial-gradient(ellipse 62% 57% at 51% 52%,#173155 0%,#0d1c36 49%,transparent 100%),
    linear-gradient(130deg,#070d1c 0%,#0b1730 58%,#060b16 100%);
}
.flow-field,.flow-vignette{position:absolute;inset:0;pointer-events:none}
.flow-field{
  z-index:0;overflow:hidden;
  background:
    radial-gradient(circle at 50% 52%,#4266bc18 0%,transparent 48%),
    repeating-linear-gradient(0deg,transparent 0 79px,#a5c2ff08 80px),
    repeating-linear-gradient(90deg,transparent 0 79px,#a5c2ff08 80px);
}
.flow-field:before{
  content:'';position:absolute;inset:9% 7%;border:1px solid #87a6e20c;
  border-radius:50%;transform:scaleX(1.32);
  box-shadow:0 0 0 100px #87a6e204,0 0 0 220px #87a6e202;
}
.flow-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.flow-vignette{
  z-index:1;
  background:
    radial-gradient(ellipse 37% 43% at 50% 46%,#091a3290 0%,#0b1d363d 62%,transparent 100%),
    linear-gradient(180deg,#060b17a8 0%,transparent 20%,transparent 72%,#07101ec8 100%);
}
.hero-grid{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  min-height:max(790px,100svh);padding:clamp(142px,18vh,190px) 0 188px;text-align:center;
}
.hero-grid .hero-kicker{
  display:flex;align-items:center;justify-content:center;gap:15px;
  color:#b7c9ea;font-size:.7rem;letter-spacing:.22em;line-height:1.5;
}
.hero-kicker>span{width:29px;height:1px;flex:none;background:#ff8150;box-shadow:0 0 14px #ff8150}
.hero-grid .hero-logo{
  width:min(510px,68vw);margin:29px auto 0;
  filter:drop-shadow(0 16px 30px #02071685);
}
.hero-grid h1{
  position:relative;z-index:2;display:flex;align-items:baseline;justify-content:center;gap:.16em;
  width:100%;margin:40px 0 0;color:#f8faff;
  font-size:clamp(4.1rem,8.8vw,9rem);font-weight:800;line-height:.93;
  letter-spacing:-.085em;white-space:nowrap;text-shadow:0 16px 38px #020714a8;
}
.hero-grid h1 span,.hero-grid h1 em{display:block}
.hero-grid h1 em{color:#ff6940;font-style:normal}
.hero-copy{position:relative;z-index:2;max-width:650px;margin:34px auto 0}
.hero-grid .hero-message{
  color:#fff;font-size:clamp(1.38rem,2.1vw,1.85rem);
  font-weight:650;letter-spacing:-.045em;line-height:1.35;
}
.hero-grid .hero-description{
  max-width:560px;margin:14px auto 0;color:#cad7ec;
  font-size:1.02rem;line-height:1.68;
}
.hero-grid .button-primary{margin-top:26px}
.hero-grid .hero-follow-note{margin-top:12px;color:#9facbf}
.hero-scene-caption{
  position:absolute;bottom:139px;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:12px;
  color:#bbcae4;font-size:.69rem;font-weight:750;letter-spacing:.17em;
}
.caption-indicator{
  width:10px;height:10px;flex:none;border-radius:50%;
  background:#ff8150;box-shadow:0 0 0 5px #ff815026,0 0 20px #ff8150a0;
}
.hero-scene-caption .touch-hint{display:none}
.hero-legend{
  position:absolute;z-index:2;bottom:73px;left:0;right:0;display:flex;
  justify-content:center;align-items:center;gap:clamp(16px,2.4vw,42px);
  padding-top:19px;border-top:1px solid #aac3ef22;
  color:#b9c6dd;font-size:.67rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;
}
.hero-legend span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hero-legend i{width:5px;height:5px;flex:none;border-radius:50%;background:#ff9160;box-shadow:0 0 9px currentColor}
.hero-legend span:nth-child(2) i{background:#8dbbff}
.hero-legend span:nth-child(3) i{background:#7f9cff}
.hero-legend span:nth-child(4) i{background:#e8d4b5}
.hero-legend span:nth-child(5) i{background:#8fd9db}
.hero-legend span:nth-child(6) i{background:#a9b6fb}
.launch-flow .launch-bottom{z-index:3}
@media(max-width:900px){
  .hero-grid{padding-top:150px}
  .hero-grid .hero-logo{width:min(490px,72vw)}
  .hero-grid h1{font-size:clamp(4rem,8.5vw,6.4rem)}
  .hero-legend{gap:17px;font-size:.59rem}
}
@media(max-width:640px){
  .launch-flow,.hero-grid{min-height:max(815px,100svh)}
  .hero-grid{width:calc(100% - 40px);padding:116px 0 195px}
  .hero-grid .hero-kicker{font-size:.58rem;letter-spacing:.105em;gap:8px}
  .hero-kicker>span{width:15px}
  .hero-grid .hero-logo{width:min(350px,88vw);margin-top:23px}
  .hero-grid h1{
    flex-direction:column;align-items:center;gap:0;
    font-size:clamp(3.9rem,15vw,5.6rem);line-height:.91;margin-top:37px;
  }
  .hero-grid h1 em{margin-top:3px}
  .hero-copy{margin-top:25px;max-width:345px}
  .hero-grid .hero-message{font-size:1.24rem;line-height:1.38}
  .hero-grid .hero-description{font-size:.94rem;line-height:1.55;margin-top:11px}
  .hero-grid .button-primary{margin-top:18px}
  .hero-grid .hero-follow-note{max-width:280px;margin:10px auto 0;font-size:.72rem;line-height:1.4}
  .hero-scene-caption{bottom:144px;gap:9px;font-size:.57rem;letter-spacing:.09em}
  .hero-scene-caption .desktop-hint{display:none}
  .hero-scene-caption .touch-hint{display:inline}
  .hero-legend{
    width:calc(100% - 40px);bottom:63px;display:grid;grid-template-columns:repeat(3,1fr);
    gap:11px 8px;padding-top:15px;font-size:.58rem;text-align:left;
  }
  .hero-legend span{gap:6px}
  .launch-flow .launch-bottom{bottom:21px}
  .flow-vignette{background:
    linear-gradient(180deg,#070d1b90 0%,#0b1d3590 24%,#0c1e3855 58%,#07101ee5 100%)}
}
@media(max-width:360px){
  .hero-grid{width:calc(100% - 32px);padding-top:109px}
  .hero-grid h1{font-size:15.5vw;margin-top:33px}
  .hero-legend{width:calc(100% - 32px);font-size:.53rem}
}
@media(max-height:570px) and (min-width:641px){
  .launch-flow,.hero-grid{min-height:740px}
  .hero-grid{padding-top:95px}
  .hero-grid .hero-logo{width:365px;margin-top:16px}
  .hero-grid h1{font-size:5.4rem;margin-top:20px}
  .hero-copy{margin-top:20px}
  .hero-grid .button-primary{margin-top:16px}
}
@media print{
  .flow-field,.flow-vignette,.hero-scene-caption,.hero-legend{display:none}
  .launch-flow,.hero-grid{min-height:0}
  .hero-grid{padding:35px 0}
  .hero-grid h1{font-size:4rem}
}
