*{box-sizing:border-box}
:root{
  --navy:#031b31;
  --navy2:#062a46;
  --cyan:#4ee6ff;
  --cyan2:#16a9df;
  --white:#f4fcff;
  --muted:#c5e7f1;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--white);
  background:#031b31;
  overflow-x:hidden;
}
.bg{
  position:fixed;
  inset:0;
  background:url("assets/kcore-universe-background.png") center center/cover no-repeat;
  z-index:-3;
}
.shade{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(0,15,29,.42),rgba(0,24,44,.10) 35%,rgba(0,22,40,.38)),
    radial-gradient(circle at 50% 48%,rgba(0,0,0,.02),rgba(0,17,34,.34) 74%);
}
.shade-strong{
  background:linear-gradient(180deg,rgba(0,13,26,.48),rgba(0,22,40,.65));
}
.topbar{
  position:fixed;
  left:1.5vw;
  right:1.5vw;
  top:16px;
  z-index:20;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 26px;
  border:1px solid rgba(143,226,255,.28);
  border-radius:20px;
  background:linear-gradient(90deg,rgba(2,34,58,.92),rgba(8,54,82,.78));
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
}
.brand{
  color:white;
  text-decoration:none;
  font-weight:850;
  font-size:clamp(16px,1.45vw,27px);
  white-space:nowrap;
}
.brand-divider{opacity:.55;margin:0 14px}
.brand-secondary{color:var(--cyan)}
nav{display:flex;gap:clamp(13px,2.5vw,42px);align-items:center}
nav a{
  color:#e9f9ff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(12px,1vw,17px);
  font-weight:700;
  opacity:.92;
}
nav a:hover{color:var(--cyan)}
.hero{
  min-height:100vh;
  width:min(1040px,92vw);
  margin:0 auto;
  padding:100px 0 38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.logo{
  width:clamp(210px,25vw,360px);
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(52,223,255,.55)) drop-shadow(0 18px 24px rgba(0,0,0,.32));
}
.hero-copy{
  margin-top:5px;
  text-shadow:0 3px 15px rgba(0,20,35,.65);
}
.eyebrow{
  margin:0 0 8px;
  color:#85eaff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
}
.hero h1{
  margin:0;
  font-size:clamp(38px,5vw,72px);
  line-height:.98;
  letter-spacing:-.035em;
  text-shadow:0 5px 20px rgba(0,29,48,.55);
}
.hero h1 span{color:#f7fdff}
.intro{
  margin:18px auto 0;
  max-width:680px;
  font-size:clamp(17px,1.7vw,25px);
  line-height:1.4;
  color:#e2f7fc;
}
.actions{
  width:min(620px,92vw);
  margin-top:24px;
}
.button{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 24px;
  border-radius:16px;
  border:2px solid rgba(83,230,255,.88);
  color:white;
  text-decoration:none;
  font-weight:850;
  font-size:clamp(17px,1.6vw,23px);
  box-shadow:0 9px 25px rgba(0,0,0,.24);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
  backdrop-filter:blur(7px);
}
.button:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 13px 30px rgba(0,0,0,.3),0 0 20px rgba(63,220,255,.25);
}
.button-main{
  background:linear-gradient(180deg,rgba(22,184,242,.95),rgba(0,90,192,.96));
}
.button-main b{
  margin-left:auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
}
.action-row{
  margin-top:15px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
.button-secondary{
  background:rgba(0,45,74,.82);
}
.button-icon{
  color:var(--cyan);
  font-size:24px;
}
.footnote{
  margin-top:18px;
  color:#d4eff7;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 2px 7px rgba(0,0,0,.45);
}

/* About */
.about-wrap{
  min-height:100vh;
  padding:115px 24px 50px;
  display:grid;
  place-items:center;
}
.about-card{
  width:min(1100px,94vw);
  display:grid;
  grid-template-columns:300px 1fr;
  gap:34px;
  padding:30px;
  border:1px solid rgba(92,222,255,.35);
  border-radius:24px;
  background:rgba(2,27,47,.86);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
}
.about-logo{
  width:100%;
  max-width:300px;
  justify-self:center;
  filter:drop-shadow(0 0 16px rgba(62,220,255,.35));
}
.about-card h1{
  margin:.15em 0 .5em;
  font-size:clamp(30px,3.5vw,50px);
  line-height:1.03;
}
.about-card p{
  color:#d7eef5;
  line-height:1.62;
  font-size:16px;
}
.about-card strong{color:#fff}
.notice{
  margin:20px 0;
  padding:15px 18px;
  border-radius:12px;
  border-left:4px solid #ffce58;
  background:rgba(78,51,5,.55);
}
.notice strong{color:#ffe08a}
.notice p{margin:5px 0 0;color:#ffefc6;font-size:14px}
.closing{font-size:18px!important}
.about-actions{
  margin-top:22px;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:10px;
}
.about-actions .button{font-size:16px;min-height:52px;padding:8px 14px}

@media(max-width:800px){
  .topbar{
    left:8px;right:8px;top:8px;
    padding:10px 14px;
    border-radius:14px;
    flex-direction:column;
    min-height:auto;
  }
  .brand-divider,.brand-secondary{display:none}
  nav{gap:16px}
  .hero{padding-top:125px}
  .logo{width:220px}
  .action-row{grid-template-columns:1fr}
  .about-wrap{padding-top:140px}
  .about-card{grid-template-columns:1fr;padding:20px}
  .about-logo{max-width:210px}
  .about-actions{grid-template-columns:1fr}
}
@media(max-height:780px) and (min-width:801px){
  .hero{padding-top:88px;justify-content:flex-start}
  .logo{width:205px}
  .hero h1{font-size:43px}
  .intro{font-size:17px;margin-top:10px}
  .actions{margin-top:13px}
  .button{min-height:52px;font-size:17px}
  .footnote{margin-top:10px}
}