:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#f7f4ea;
  background:#071116;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#171812}
button,a{font:inherit}
button{border:0}
a{color:inherit}
/* ================================================================
   LANDING PAGE v1.38 — final hero composition
   ================================================================ */
.landing-page{
  position:relative;
  display:grid;
  place-items:center;
  min-height:100vh;
  overflow-x:hidden;
  padding:clamp(14px,2.3vw,32px);
  color:#f5f1e7;
  background-color:#03070b;
  background-image:
    linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.24)),
    url("./landing-space-bg.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.landing-page::before,
.landing-page::after,
.landing-atmosphere{display:none}
.landing-shell{
  position:relative;
  z-index:1;
  width:min(1120px,100%);
}
.landing-card{
  position:relative;
  padding:clamp(10px,1.25vw,16px) clamp(12px,1.6vw,18px) clamp(16px,1.8vw,22px);
  border:1px solid rgba(76,221,228,.68);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(4,14,19,.94),rgba(3,11,15,.97));
  box-shadow:
    0 26px 80px rgba(0,0,0,.68),
    inset 0 1px rgba(255,255,255,.035),
    0 0 38px rgba(31,193,202,.12);
  backdrop-filter:blur(8px);
}
.landing-card::before,
.landing-card::after{
  content:"";
  position:absolute;
  width:56px;
  height:23px;
  pointer-events:none;
}
.landing-card::before{
  top:-1px;left:-1px;
  border-top:2px solid #45d5dc;
  border-left:2px solid #45d5dc;
  border-radius:18px 0 0 0;
}
.landing-card::after{
  right:-1px;bottom:-1px;
  border-right:2px solid #45d5dc;
  border-bottom:2px solid #45d5dc;
  border-radius:0 0 18px 0;
}
.landing-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(78,215,221,.58);
  border-radius:11px;
  background:#091218;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 14px 36px rgba(0,0,0,.38),
    0 0 24px rgba(58,181,188,.08);
}
.landing-hero-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.landing-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.01) 55%,rgba(0,0,0,.14) 100%);
}
.landing-hero-title{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:min(92%,1040px);
  height:auto;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.72)) drop-shadow(0 0 10px rgba(0,0,0,.45));
}
.landing-steps{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr);
  align-items:start;
  gap:clamp(14px,1.8vw,24px);
  padding:clamp(16px,2vw,24px) clamp(8px,1vw,12px) clamp(14px,1.7vw,20px);
}
.landing-step{
  display:grid;
  grid-template-columns:clamp(54px,4.8vw,66px) minmax(0,1fr);
  align-items:start;
  gap:clamp(10px,1vw,14px);
  min-width:0;
  min-height:92px;
  padding-top:2px;
}
.step-icon{
  display:grid;
  place-items:center;
  width:clamp(54px,4.8vw,66px);
  aspect-ratio:1;
  align-self:start;
  border:1px solid rgba(74,202,208,.78);
  border-radius:8px;
  color:#53d5dc;
  background:linear-gradient(145deg,rgba(19,44,51,.88),rgba(5,18,23,.94));
  box-shadow:inset 0 0 22px rgba(65,204,211,.055);
}
.step-icon-image{
  display:block;
  max-width:100%;
  max-height:100%;
  width:70%;
  height:auto;
  object-fit:contain;
}
.twitch-step-icon{width:68%;}
.rimbuks-step-frame{padding:0;background:linear-gradient(145deg,rgba(23,53,29,.92),rgba(10,23,13,.96));}
.rimbuks-step-icon{width:84%;}
.rimworld-step-frame{padding:0;background:linear-gradient(145deg,rgba(36,36,39,.94),rgba(10,12,14,.97));}
.rimworld-step-icon{width:76%;}
.step-copy{
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
  justify-content:flex-start;
}
.step-number{
  margin:0 0 7px;
  color:#55d7df;
  font-size:clamp(23px,2vw,30px);
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
}
.landing-step p{
  margin:0;
  color:#dddcd7;
  font-size:clamp(13.5px,1.15vw,16.5px);
  line-height:1.38;
  font-weight:550;
}
.landing-step strong{color:#fff;font-weight:820}
.landing-actions{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:16px;
  padding:0 12px;
}
.landing-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:62px;
  padding:15px 27px;
  border-radius:8px;
  text-decoration:none;
  font-weight:850;
  font-size:clamp(16px,1.5vw,20px);
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.landing-button:hover{transform:translateY(-2px)}
.landing-button:active{transform:translateY(0)}
.landing-button:disabled{opacity:.62;cursor:wait;transform:none}
.primary-button{
  flex:0 1 390px;
  color:#fff7ed;
  border:1px solid #ff9b59;
  background:linear-gradient(180deg,#df632e,#ae3d18);
  box-shadow:
    inset 0 1px rgba(255,255,255,.23),
    0 10px 28px rgba(158,56,21,.28),
    0 0 0 1px rgba(56,214,220,.25),
    0 0 20px rgba(227,85,31,.14);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.primary-button:hover{filter:brightness(1.08);box-shadow:inset 0 1px rgba(255,255,255,.25),0 12px 34px rgba(188,68,25,.34),0 0 0 1px rgba(71,222,228,.5)}
.secondary-button{
  flex:0 1 270px;
  color:#f0f3f0;
  border:1px solid #43bec5;
  background:rgba(7,24,30,.9);
  box-shadow:inset 0 0 22px rgba(46,193,201,.04);
}
.secondary-button:hover{border-color:#72e1e6;background:rgba(10,33,39,.96)}
.play-triangle{
  width:0;height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:15px solid #fff9f2;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.info-icon{
  display:grid;
  place-items:center;
  width:24px;height:27px;
  border:1px solid #52d3da;
  border-radius:3px;
  color:#52d3da;
  font-size:19px;
  line-height:1;
}
.landing-status{
  min-height:16px;
  margin-top:8px;
  text-align:center;
  color:#9eb4b3;
  font-size:13px;
}
.error-text{color:#ffb39a}

@media(min-width:721px){
  .landing-step:nth-child(2) .step-icon{
    transform:translateX(-10px);
  }
}

@media(max-width:900px){
  .landing-page{padding:12px;background-attachment:scroll}
  .landing-card{padding:8px 9px 16px}
  .landing-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 7px}
  .landing-step{grid-template-columns:48px minmax(0,1fr);gap:9px;min-height:82px}
  .step-icon{width:48px}
  .step-number{font-size:22px}
  .landing-step p{font-size:13.5px}
  .landing-actions{padding:0 8px;gap:10px}
  .landing-button{min-height:56px;padding:13px 18px;font-size:16px}
}
@media(max-width:720px){
  .landing-page{padding:8px}
  .landing-card{border-radius:13px}
  .landing-steps{
    grid-template-columns:1fr;
    gap:0;
    padding:12px 12px 10px;
  }
  .landing-step{
    grid-template-columns:50px 1fr;
    min-height:auto;
    padding:11px 0;
    border-bottom:1px solid rgba(73,178,183,.18);
  }
  .landing-step:last-child{border-bottom:0}
  .step-icon{width:50px}
  .landing-step p{font-size:15px}
  .landing-actions{flex-direction:column}
  .primary-button,.secondary-button{flex:1 1 auto;width:100%}
}


.landing-credit{
  color:#a9b987;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.info-header h1{
  margin:10px 0 16px;
  font-size:clamp(44px,9vw,68px);
  line-height:.95;
  letter-spacing:-.035em;
}

.info-page{padding:24px}
.info-shell{width:min(100%,860px);margin:0 auto 70px}
.back-link{display:inline-block;margin:6px 0 18px;color:#bfc1b5;text-decoration:none;font-weight:750}
.back-link:hover{color:#fff}
.info-header,.info-section{
  border:1px solid #414634;
  background:#22241c;
  border-radius:18px;
  padding:clamp(24px,5vw,38px);
  box-shadow:0 18px 50px rgba(0,0,0,.2);
}
.info-header{margin-bottom:14px}
.info-header h1{margin-bottom:16px}
.info-header>p{max-width:680px;margin:0 0 24px;color:#c9c9bd;font-size:18px;line-height:1.6}
.info-play-button{width:min(100%,320px)}
.info-header .landing-status{width:min(100%,320px);text-align:left}
.info-section{margin-top:14px}
.info-section h2{margin:0 0 14px;font-size:clamp(25px,4vw,34px);line-height:1.05}
.info-section h3{margin:0 0 8px;font-size:18px}
.info-section p{margin:10px 0;color:#c7c9bd;font-size:16px;line-height:1.65}
.info-section strong{color:#f7f4ea}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.info-grid article{padding:18px;border:1px solid #414634;border-radius:13px;background:#1c1e17}
.info-grid article p{font-size:14px;margin-bottom:0}
.final-info-section{text-align:center}
.final-info-section .landing-button{width:min(100%,360px);margin:22px auto 0}

@media(max-width:700px){
  .info-page{padding:12px}
  .info-grid{grid-template-columns:1fr}
  .info-header,.info-section{padding:24px 20px}
}