*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:#000;
  color:#fff;
  font-family:Georgia,"Times New Roman","Yu Mincho","YuMincho",serif;
  overflow:hidden;
}
button,a{font:inherit;color:inherit}
main{
  position:relative;
  height:100vh;
  min-height:760px;
  overflow:hidden;
  background:#000;
}
.bg{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url("images/bg-space.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:none;
}
.bg:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.66) 31%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.20) 54%,rgba(0,0,0,.86) 100%);
}
.bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 66% 36%,rgba(255,198,104,.07),transparent 25%);
  opacity:.55;
}
#particles{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  pointer-events:none;
}
.viewport{
  position:relative;
  z-index:5;
  width:min(1220px,calc(100% - 96px));
  height:100vh;
  min-height:760px;
  margin:0 auto;
  padding:76px 0 46px;
  display:grid;
  grid-template-rows:minmax(430px,52vh) 1fr;
  gap:22px;
}
.hero{
  position:relative;
  display:grid;
  grid-template-columns:560px 1fr;
  align-items:start;
  gap:28px;
}
.hero-copy{
  padding-top:0;
}
.site-logo{
  display:block;
  width:214px;
  height:auto;
  margin:0 0 44px;
  opacity:.96;
  max-width:100%;
  object-fit:contain;
}
.lead-copy{
  width:100%;
  max-width:530px;
  margin:0 0 26px;
  font-size:clamp(26px,2.18vw,34px);
  line-height:1.55;
  letter-spacing:.045em;
  font-weight:400;
  color:rgba(255,255,255,.94);
}
.lead-line{
  display:block;
  white-space:nowrap;
}
.service-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  font-size:14px;
  line-height:1.55;
  letter-spacing:.035em;
  color:rgba(255,255,255,.76);
}
.service-list li{
  position:relative;
  padding-left:30px;
  white-space:nowrap;
}
.service-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:.74em;
  width:17px;
  height:1px;
  background:rgba(235,184,91,.86);
  box-shadow:none;
}
.torus-wrap{
  position:relative;
  z-index:3;
  width:min(45vw,590px);
  aspect-ratio:1;
  justify-self:end;
  align-self:start;
  margin-top:-2px;
  margin-right:10px;
  opacity:.98;
  filter:none;
}
.torus-wrap:before{
  content:"";
  position:absolute;
  inset:20%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,145,.12),transparent 62%);
  opacity:.75;
}
#torusCanvas{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:block;
}
.content{
  position:relative;
  border-top:1px solid rgba(226,176,86,.50);
  padding-top:26px;
  min-height:0;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:20px;
}
.content:before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,rgba(238,188,95,.85),rgba(238,188,95,.28),rgba(255,255,255,.04));
  opacity:.75;
}
.section-title span{
  display:block;
  margin:0 0 12px;
  color:rgba(238,188,95,.88);
  font-size:13px;
  line-height:1;
  letter-spacing:.44em;
  font-family:Arial,"Helvetica Neue",sans-serif;
}
.section-title h2{
  position:relative;
  display:inline-block;
  margin:0;
  padding-bottom:13px;
  font-size:clamp(26px,2.55vw,38px);
  line-height:1.35;
  font-weight:400;
  letter-spacing:.055em;
  color:rgba(255,255,255,.96);
  text-shadow:none;
}
.section-title h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:66px;
  height:1px;
  background:rgba(238,188,95,.86);
  box-shadow:none;
}
.concept-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.concept-block{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:24px;
  min-width:0;
}
.concept-block:nth-child(2){
  position:relative;
  padding-left:58px;
}
.concept-block:nth-child(2):before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,rgba(238,188,95,.72),rgba(238,188,95,.18));
}
.concept-num{
  margin:0;
  color:rgba(238,188,95,.78);
  font-size:31px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:400;
}
.concept-main h3{
  margin:0 0 16px;
  font-size:clamp(18px,1.5vw,24px);
  line-height:1.42;
  font-weight:400;
  letter-spacing:.035em;
  color:rgba(255,255,255,.92);
}
.concept-main p{
  margin:0 0 13px;
  font-size:13px;
  line-height:1.88;
  letter-spacing:.035em;
  color:rgba(255,255,255,.70);
}
.concept-main p:last-child{margin-bottom:0}
.reveal,.scroll-reveal{opacity:0;transform:translateY(14px)}
.reveal.is-visible,.scroll-reveal.is-visible{animation:fade-up .8s cubic-bezier(.2,.72,.2,1) forwards}
.hero .torus-wrap.reveal{animation-delay:.12s}
@keyframes fade-up{to{opacity:1;transform:translateY(0)}}
@media(max-width:1080px){
  body{overflow:auto}
  main{height:auto;min-height:100vh}
  .viewport{width:calc(100% - 40px);height:auto;min-height:100vh;padding:34px 0 34px;grid-template-rows:auto auto;gap:30px}
  .hero{grid-template-columns:1fr;gap:0}
  .site-logo{width:188px;margin-bottom:28px}
  .lead-copy{font-size:30px;max-width:100%;line-height:1.55}
  .service-list li{white-space:normal}
  .torus-wrap{width:62vw;max-width:360px;justify-self:end;margin-top:-50px;margin-right:0;opacity:.84}
  .concept-list{grid-template-columns:1fr;gap:28px}
  .concept-block:nth-child(2){padding-left:0}
  .concept-block:nth-child(2):before{display:none}
}
@media(max-width:640px){
  .viewport{width:calc(100% - 30px);padding-top:24px}
  .lead-copy{font-size:24px;line-height:1.6}.lead-line{white-space:normal}
  .concept-block{grid-template-columns:1fr;gap:10px}
  .concept-num{font-size:25px}
}

/* tablet / smartphone: prevent reveal initial opacity from hiding logo/text */
@media(max-width:1080px){
  .hero-copy,
  .hero-copy.reveal,
  .site-logo{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .site-logo{
    display:block!important;
  }
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}