/* ══ FONTS & RESET ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:ital,wght@0,300;0,400;0,600;0,700;1,400;1,700&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --win-blue:#1e6fc7;--win-light:#4dabf7;
  --glow:rgba(0,140,255,0.55);
  --glass:rgba(255,255,255,0.10);
  --glass-sha:0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.38);
  --text:#ffffff;--text-dim:rgba(255,255,255,0.72);--text-muted:rgba(255,255,255,0.45);
  --nav-h:54px;
  --serif:'Segoe UI','Times New Roman',serif;
  --accent:#4fc3f7;
}

/* ── BACKGROUND ─────────────────────────────────────────────── */
body{
  font-family:var(--serif); min-height:100vh; overflow-x:hidden;
  color:var(--text);
  background:#06184a
    url('https://lh3.googleusercontent.com/d/114HHxbbXgUL5q4tFdsyEI1O_IKIQGJun')
    center top / cover fixed;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0;
  background:radial-gradient(ellipse 120% 80% at 50% 0%,
    rgba(0,8,35,0.22) 0%, rgba(0,4,22,0.52) 100%);
  pointer-events:none;
}

/* ══ NAV ════════════════════════════════════════════════════════ */
nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:900;
  display:flex; align-items:stretch; padding:0 28px; gap:0;
  background:rgba(10,40,110,0.68);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(120,180,255,0.25);
  box-shadow:0 2px 20px rgba(0,10,60,0.45);
}
nav::before{
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.nav-logo{
  display:flex; align-items:center;
  font-size:21px; font-weight:700; font-style:italic;
  color:#fff; text-decoration:none; margin-right:auto; padding:0 6px;
  text-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 24px rgba(150,220,255,0.35);
  white-space:nowrap; letter-spacing:0.3px;
}
.nav-logo em{font-style:normal; color:#c8e8ff;}

.nav-links{display:flex; align-items:stretch; gap:0; list-style:none;}
.nav-links li{display:flex;}
.nav-links a{
  display:flex; align-items:center; padding:0 20px;
  font-size:13.5px; font-weight:500; letter-spacing:0.3px;
  color:rgba(255,255,255,0.90); text-decoration:none;
  border-left:1px solid rgba(255,255,255,0.08);
  transition:background .15s, color .15s;
  position:relative; white-space:nowrap;
}
.nav-links a:hover{
  background:rgba(255,255,255,0.12); color:#fff;
}
.nav-links a::after{
  content:''; position:absolute; bottom:0; left:50%; right:50%;
  height:2px; background:var(--accent);
  transition:left .2s, right .2s; border-radius:2px 2px 0 0;
}
.nav-links a:hover::after{ left:16px; right:16px; }

.btn-signup{
  display:flex; align-items:center;
  padding:0 24px; margin:8px 0 8px 12px;
  font-size:13px; font-weight:700; color:#fff; text-decoration:none;
  border-radius:20px; border:1px solid rgba(255,255,255,0.35);
  background:linear-gradient(180deg,rgba(100,180,255,0.55) 0%,rgba(30,100,220,0.75) 50%,rgba(10,58,190,0.92) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.40), 0 2px 10px rgba(0,60,200,0.40);
  transition:filter .15s, transform .12s;
}
.btn-signup:hover{filter:brightness(1.18); transform:translateY(-1px);}

/* ══ HERO ═══════════════════════════════════════════════════════ */
section.hero{
  position:relative; z-index:1;
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:100px 24px 80px;
}
.hero-rule{display:flex;align-items:center;gap:12px;margin-bottom:32px;}
.hero-rule-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.30),transparent);}
.hero-rule-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);}
.hero-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--text-muted);}

.hero-title{
  font-size:clamp(28px,5vw,58px); font-weight:700; font-style:italic;
  line-height:1.15; margin-bottom:32px; max-width:840px;
  text-shadow:0 4px 40px rgba(0,0,0,.7);
  animation:fadeUp .9s ease both;
}
.hero-title .accent{color:var(--accent); text-shadow:0 0 30px var(--glow);}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px; animation:fadeUp .9s .25s ease both;}

.btn-hero-primary{
  display:inline-flex;align-items:center;
  padding:13px 40px; font-size:15px; font-weight:700;
  color:#fff; text-decoration:none; border-radius:28px;
  border:1px solid rgba(255,255,255,0.35);
  background:linear-gradient(180deg,rgba(120,200,255,0.60) 0%,rgba(25,110,225,0.74) 52%,rgba(8,52,185,0.92) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.60), 0 3px 14px rgba(0,60,210,0.50);
  transition:filter .15s, transform .12s; position:relative; overflow:hidden;
}
.btn-hero-primary::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.38) 0%,transparent 100%);border-radius:28px 28px 0 0;pointer-events:none;}
.btn-hero-primary:hover{filter:brightness(1.16);transform:translateY(-2px);}
.btn-hero-secondary{
  display:inline-flex;align-items:center;
  padding:13px 32px;font-size:14px;color:var(--text-dim);text-decoration:none;
  border-radius:28px;border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08);backdrop-filter:blur(14px);
  transition:all .18s;
}
.btn-hero-secondary:hover{background:rgba(255,255,255,0.16);color:#fff;}

.scroll-indicator{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;animation:fadeIn 1s 1.6s ease forwards;
}
.scroll-indicator span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);}
.scroll-arrow{width:20px;height:20px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);animation:scrollBounce 1.6s ease-in-out infinite;}
@keyframes scrollBounce{0%,100%{transform:rotate(45deg) translateY(0);opacity:.5}50%{transform:rotate(45deg) translateY(5px);opacity:1}}

/* ══ SECTIONS ════════════════════════════════════════════════════ */
.section{position:relative;z-index:1;padding:100px 24px;}
.section-inner{max-width:960px;margin:0 auto;}
.section-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:12px;text-shadow:0 0 12px var(--glow);}
.section-title{font-size:clamp(20px,3.5vw,34px);font-weight:700;font-style:italic;color:#fff;margin-bottom:18px;text-shadow:0 2px 20px rgba(0,0,0,.6);}
.divider{width:55px;height:2px;margin-bottom:26px;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 10px var(--glow);}

/* About cards */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:36px;}
.about-card{
  padding:26px 24px;
  background:rgba(200,228,255,0.10);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.28);border-radius:8px;
  box-shadow:var(--glass-sha);position:relative;overflow:hidden;
  transition:transform .22s, box-shadow .22s;
}
.about-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent);}
.about-card:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.42);}
.about-card-icon{font-size:28px;margin-bottom:12px;display:block;filter:drop-shadow(0 0 8px var(--glow));}
.about-card h3{font-size:16px;font-weight:700;font-style:italic;color:#fff;margin-bottom:8px;}
.about-card p{font-size:13px;color:var(--text-dim);line-height:1.7;}

/* ── CHANGELOGS SECTION ──────────────────────────────────────── */
#changelogs{
  background:rgba(0,8,35,0.28);backdrop-filter:blur(4px);
  border-top:1px solid rgba(255,255,255,0.08);
}
.changelog-layout{display:grid;grid-template-columns:200px 1fr;gap:24px;margin-top:32px;}
.changelog-nav{display:flex;flex-direction:column;gap:6px;}
.changelog-nav-item{
  padding:10px 14px;border-radius:6px;font-size:13px;
  color:var(--text-dim);cursor:pointer;
  background:rgba(255,255,255,0.06);
  border:1px solid transparent;
  transition:all .15s;
}
.changelog-nav-item.active,
.changelog-nav-item:hover{background:rgba(79,195,247,0.15);border-color:rgba(79,195,247,0.30);color:#fff;}
.changelog-nav-item.active{font-weight:600;color:var(--accent);}

.changelog-panel{min-height:200px;}
.changelog-items{display:flex;flex-direction:column;gap:14px;}
.update-loading{text-align:center;padding:40px;color:var(--text-muted);font-style:italic;font-size:14px;}

.update-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:18px 22px;
  background:rgba(255,255,255,0.08);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.22);border-radius:6px;
  box-shadow:var(--glass-sha);position:relative;overflow:hidden;
  animation:fadeUp .35s ease;
}
.update-item::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.42),transparent);}
.update-date{min-width:88px;font-size:10.5px;letter-spacing:1px;color:var(--accent);padding-top:3px;text-transform:uppercase;white-space:nowrap;}
.update-badge{display:inline-block;padding:2px 9px;border-radius:6px;font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;}
.badge-new     {background:rgba(79,195,247,0.16);border:1px solid rgba(79,195,247,0.38);color:#4fc3f7;}
.badge-fix     {background:rgba(255,183,77,0.16); border:1px solid rgba(255,183,77,0.38); color:#ffb74d;}
.badge-improve {background:rgba(129,199,132,0.16);border:1px solid rgba(129,199,132,0.38);color:#81c784;}
.badge-upcoming{background:rgba(206,147,216,0.16);border:1px solid rgba(206,147,216,0.38);color:#ce93d8;}
.update-content h4{font-size:14px;font-weight:700;font-style:italic;color:#fff;margin-bottom:5px;}
.update-content p{font-size:12.5px;color:var(--text-dim);line-height:1.65;}

/* ══ FOOTER ══════════════════════════════════════════════════════ */
footer{
  position:relative;z-index:1;padding:36px 24px 28px;
  background:rgba(0,4,22,0.78);backdrop-filter:blur(22px);
  border-top:1px solid rgba(255,255,255,0.14);text-align:center;
}
footer::before{content:'';display:block;width:100px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:0 auto 26px;box-shadow:0 0 10px var(--glow);}
.footer-logo{font-size:17px;font-weight:700;font-style:italic;color:var(--accent);text-shadow:0 0 16px var(--glow);margin-bottom:8px;}
.footer-line{font-size:12px;color:var(--text-muted);letter-spacing:2px;line-height:2;}
.footer-line strong{color:var(--text-dim);font-style:italic;}
.footer-sep{display:inline-block;margin:0 9px;color:var(--accent);opacity:.6;}
.footer-clock{
  margin-top:10px;font-size:11px;color:rgba(255,255,255,0.35);
  letter-spacing:1px;
}
.footer-clock span{margin:0 6px;}

/* ══ REVEAL ANIMATIONS ═══════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.10s;}
.reveal-delay-2{transition-delay:.20s;}
.reveal-delay-3{transition-delay:.30s;}

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media(max-width:768px){
  .changelog-layout{grid-template-columns:1fr;}
  .changelog-nav{flex-direction:row;flex-wrap:wrap;}
}
@media(max-width:640px){
  nav{padding:0 12px;}
  .nav-links a{padding:0 12px;font-size:12px;}
  .hero-title{font-size:28px;}
  .section{padding:70px 14px;}
  .update-item{flex-direction:column;gap:6px;}
}