:root{
  /* ===== Winter / Snow (Hopeful) palette ===== */
  --bg-main: #071223;
  --bg-hero: linear-gradient(135deg, #2b7fbd 0%, #102040 55%, #071223 100%);
  --bg-card: linear-gradient(120deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.08) 100%);
  --card-radius: 1.35rem;

  --color-main: #f4fbff;
  --color-head: #ffffff;
  --color-muted: rgba(244,251,255,.82);

  --color-accent:  #8fe7ff;  /* ice */
  --color-accent2: #d7c8ff;  /* pastel violet */

  --color-link: #c8f3ff;
  --color-link-hover: #ffffff;

  --edge: rgba(255,255,255,.18);

  --shadow-hero: 0 14px 70px rgba(143,231,255,.22);
  --shadow-card: 0 10px 40px rgba(143,231,255,.14);
  --shadow-card-hover: 0 18px 70px rgba(215,200,255,.18);

  --transition: all 0.17s cubic-bezier(.4, 0, .2, 1);

  --snow-opacity: .78;
  --snow-blur: 0px;
  --snow-wind: 55px;
}

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
*, *:before, *:after{ box-sizing: inherit; }

body{
  min-height: 100vh;
  line-height: 1.65;
  font-size: 1.08rem;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI','Inter','Montserrat',Arial,sans-serif;
  color: var(--color-main);
  position: relative;
  background:
    radial-gradient(1200px 760px at 50% -10%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(900px 520px at 18% 10%, rgba(143,231,255,.24), transparent 60%),
    radial-gradient(820px 520px at 85% 18%, rgba(215,200,255,.20), transparent 62%),
    radial-gradient(900px 560px at 60% 22%, rgba(190,255,230,.10), transparent 66%),
    linear-gradient(180deg, #1b5c8f 0%, #0b1630 48%, #071223 100%);
}

/* Utilities */
.wrap{ max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.muted{ color: var(--color-muted); opacity: .95; }
a{ color: var(--color-link); }
a:hover{ color: var(--color-link-hover); }

.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{
  left: 1rem; top: 1rem;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem;
  z-index: 1000;
  border: 1px solid rgba(255,255,255,.2);
}

/* ===== Snowfall (same vibe) ===== */
body::before,
body::after{
  content:"";
  position: fixed;
  inset: -120px 0 0 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--snow-opacity);
  filter: blur(var(--snow-blur));
  will-change: transform;
}
body::before{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(210,245,255,.85) 0 1px, transparent 2px);
  background-size: 240px 240px, 320px 320px, 420px 420px;
  background-position: 0 0, 80px 120px, 160px 60px;
  animation: snowFall1 18s linear infinite;
}
body::after{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.90) 0 1.6px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.60) 0 1.6px, transparent 3px);
  background-size: 520px 520px, 680px 680px;
  background-position: 40px 0, 220px 180px;
  opacity: calc(var(--snow-opacity) * .72);
  animation: snowFall2 26s linear infinite;
}
@keyframes snowFall1{
  0%{ transform: translate3d(0, -120px, 0); }
  100%{ transform: translate3d(calc(var(--snow-wind) * .45), 110vh, 0); }
}
@keyframes snowFall2{
  0%{ transform: translate3d(0, -160px, 0); }
  100%{ transform: translate3d(var(--snow-wind), 112vh, 0); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none !important; }
}

/* ===== Header (same as index) ===== */
.main-header{
  background: rgba(10, 20, 40, .72);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 1.15rem 2rem 1.05rem;
  box-shadow: 0 10px 40px rgba(143,231,255,.10);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap:wrap;
}
.logo{
  display:flex;
  align-items:center;
  gap: 1rem;
  text-decoration:none;
  color: inherit;
}
.logo img{
  height: 48px;
  width: 48px;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(143,231,255,.20);
  border: 1px solid rgba(255,255,255,.18);
}
.logo h1{
  font-size: 1.32rem;
  color: var(--color-head);
  font-weight: 900;
  letter-spacing: .03em;
  margin: 0;
  text-shadow: 0 10px 50px rgba(143,231,255,.18);
}

/* Language switch */
.lang-switch{ display:flex; gap:.5rem; align-items:center; justify-content:flex-end; }
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  font-weight:900;
  text-decoration:none;
}
.lang-btn[aria-current="true"]{
  border-color:rgba(159,230,255,.55);
  box-shadow:0 0 0 .09rem rgba(159,230,255,.18);
}

/* Nav */
nav ul{
  display:flex;
  gap: 1.1rem 1.8rem;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
}
nav a{
  color: rgba(200,243,255,.92);
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration:none;
  transition: color .16s;
  border-bottom: 2px solid transparent;
  padding-bottom: .15em;
  position: relative;
}
nav a:hover, nav a[aria-current="page"]{
  color: #fff;
  border-bottom: 2px solid rgba(143,231,255,.85);
}

/* Mobile nav toggle */
#nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.nav-toggle-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  cursor:pointer;
  user-select:none;
}
.nav-toggle-btn span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  position:relative;
  border-radius:999px;
}
.nav-toggle-btn span::before,
.nav-toggle-btn span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:999px;
}
.nav-toggle-btn span::before{ top:-6px; }
.nav-toggle-btn span::after{ top: 6px; }

/* ===== Hero ===== */
.hero{
  background: var(--bg-hero);
  text-align:center;
  padding: 4.7rem 3vw 7.0rem;
  box-shadow: var(--shadow-hero);
  border-radius: 0 0 3.2rem 3.2rem/0 0 2rem 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hero-inner{ max-width: 950px; }

#hero-stars{ position:absolute; inset:0; pointer-events:none; z-index: 3; }

.kicker{
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.9;
  font-weight:900;
  display:inline-block;
  padding:.45em .9em;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
}

.hero h2{
  font-size: 2.65rem;
  font-weight: 900;
  margin: 1.0rem 0 .7rem;
  color: #fff;
  text-shadow: 0 10px 60px rgba(143,231,255,.20);
  position: relative;
  z-index: 4;
}
.hero p{
  font-size: 1.18rem;
  margin: 0 auto 2.0rem;
  max-width: 860px;
  color: rgba(244,251,255,.90);
  position: relative;
  z-index: 4;
}

/* CTA */
.hero-cta, .btn-row{
  display:flex;
  gap:.8rem;
  justify-content:center;
  flex-wrap:wrap;
}
.cta{
  display:inline-block;
  background: linear-gradient(90deg, rgba(143,231,255,.95), rgba(215,200,255,.92));
  color: #00101a;
  font-weight: 900;
  font-size: 1.06rem;
  padding: 1.0em 2.2em;
  border-radius: 14px;
  box-shadow: 0 0 34px rgba(143,231,255,.22);
  text-decoration:none;
  letter-spacing: .03em;
  transition: var(--transition);
  border: 1px solid rgba(255,255,255,.22);
  position: relative;
  z-index: 4;
}
.cta.alt{
  background: rgba(0,0,0,.22);
  color: #fff;
}
.cta:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 40px 10px rgba(143,231,255,.20), 0 10px 30px rgba(215,200,255,.14);
}
.cta.disabled{
  opacity:.65;
  pointer-events:none;
}

/* Wave */
.hero-wave-wrap{ position:absolute; left:0; right:0; bottom:-1px; z-index: 4; }
.hero-wave{ width:100%; height:auto; display:block; opacity:.9; }

/* ===== Content grid/cards ===== */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: stretch;
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0 1rem;
}
.soft-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--card-radius);
  padding: 1.1rem 1.1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.accent-h{ margin:.2rem 0 .6rem; color: var(--color-accent2); }
.soft-list{ margin:.8rem 0 0; padding-left: 1.1rem; opacity:.92; }
.divider{ height:1px; background:rgba(255,255,255,.10); margin:1.1rem 0; border-radius:999px; }

/* Status card */
.status-top{ display:flex; gap:.7rem; align-items:center; }
.status-dot{
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: background .22s, box-shadow .24s;
}
.status-dot.online{
  background: #9fffc3;
  box-shadow: 0 0 16px 2px rgba(159,255,195,.45), 0 0 8px 2px rgba(159,255,195,.25);
  animation: pulseOnline 1.2s infinite alternate;
}
@keyframes pulseOnline{
  0% { box-shadow: 0 0 9px 1px rgba(159,255,195,.35), 0 0 3px rgba(159,255,195,.18); }
  100% { box-shadow: 0 0 24px 4px rgba(159,255,195,.45), 0 0 10px 4px rgba(159,255,195,.28); }
}
.status-big{ font-weight: 900; font-size: 1.15rem; }
.status-small{ opacity:.86; }

/* Progress */
.progress{
  margin-top: 1rem;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.bar{
  height:100%;
  width: 24%;
  background: linear-gradient(90deg, rgba(143,231,255,.95), rgba(215,200,255,.92));
  box-shadow: 0 0 18px rgba(143,231,255,.25);
}

/* Facts */
.facts{
  display:grid;
  gap:.75rem;
  margin-top:.75rem;
}
.fact{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  padding: .85rem .9rem;
}
.fact-k{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.88;
  color: rgba(215,200,255,.92);
  font-weight: 900;
}
.fact-v{ font-weight: 800; }

/* Footer */
.footer{
  margin-top:auto;
  padding: 1.4rem 1rem;
  text-align:center;
  background: rgba(7,12,22,.55);
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(244,251,255,.85);
  backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 1100px){
  .grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .main-header{ padding: 1rem 1rem; gap: .8rem; flex-wrap: wrap; }
  .nav-toggle-btn{ display:inline-flex; }
  .main-header nav{ width:100%; }
  .main-header nav ul{
    display:none;
    width:100%;
    margin-top:.6rem;
    padding:.75rem .75rem;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.22);
    justify-content:flex-start;
    flex-direction:column;
    gap:.85rem;
  }
  #nav-toggle:checked ~ nav ul{ display:flex; }

  .hero h2{ font-size: 2.2rem; }
  .hero p{ font-size: 1.05rem; }
}
@media (max-width: 620px){
  body{ font-size: 1.02rem; }
  .hero{ padding: 4.2rem 4vw 6.4rem; border-radius: 0 0 2.2rem 2.2rem/0 0 1.6rem 1.6rem; }
}