:root{
  --blue:#003366;
  --blueLight:#668099; /* lighter tone for gradient */
  --text:#ffffff;
  --ring: rgba(255,255,255,0.25);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  min-height:100%;
  color:var(--text);
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 15%, var(--blueLight) 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Language toggle button (top-right) */
.lang-toggle{
  position: fixed;
  top: 18px;
  right: 18px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  letter-spacing:.2px;
  cursor: pointer;
}
.lang-toggle:focus{outline:none; box-shadow:0 0 0 3px var(--ring)}

/* Layout */
.viewport{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:calc(100vh - 80px);
  padding: 96px 6vw 0 6vw;
}

.hero{max-width: 1100px;}
.title{
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.08;
  margin: 0;
  font-weight: 800;
  text-align:left;
}

/* Footer */
.footer{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 28px 16px 36px;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
}
.footer p{margin:0}