*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08050d;
  --bg2:#100918;
  --panel:rgba(18,10,27,.72);
  --line:rgba(215,174,255,.16);
  --text:#f6f1fa;
  --muted:#aaa0b5;
  --purple:#9b59d6;
  --purple2:#d59aff;
  --gold:#e5c58d;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.page-glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 75% 20%,rgba(130,50,190,.13),transparent 32%),radial-gradient(circle at 15% 65%,rgba(80,35,130,.09),transparent 30%);z-index:-1}
.site-header{position:fixed;top:0;left:0;right:0;height:82px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;z-index:20;background:linear-gradient(180deg,rgba(6,3,10,.9),rgba(6,3,10,.38),transparent);backdrop-filter:blur(8px)}
.brand{display:flex;flex-direction:column;line-height:.9;min-width:180px}
.brand-small{font:600 10px/1 Inter;letter-spacing:4px;color:#b9aebe}
.brand-main{font:800 24px/1 Cinzel,serif;letter-spacing:5px;color:#fff}
.main-nav{display:flex;gap:30px;align-items:center}
.main-nav a{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#c9c0ce;transition:.25s}
.main-nav a:hover{color:#fff}
.discord-btn{font-size:10px;letter-spacing:1.5px;border:1px solid rgba(213,154,255,.35);padding:12px 17px;border-radius:2px;background:rgba(22,10,32,.5);transition:.25s}
.discord-btn:hover{background:rgba(155,89,214,.2);border-color:var(--purple2)}
.hero{min-height:780px;height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;background:#08050d}
.hero-art{position:absolute;inset:0;background-image:url('assets/jenova-hero.png');background-size:cover;background-position:center center;background-repeat:no-repeat;filter:none;transform:scale(1.01);will-change:transform}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,4,11,.96) 0%,rgba(7,4,11,.72) 30%,rgba(7,4,11,.18) 64%,rgba(7,4,11,.58) 100%),linear-gradient(0deg,#08050d 0%,transparent 25%,rgba(5,2,9,.1) 75%,#08050d 100%)}
.hero-content{position:relative;z-index:2;width:min(760px,88vw);margin-left:9vw;margin-top:45px}
.eyebrow,.section-kicker{font-size:10px;letter-spacing:3.2px;color:#bbaec4;font-weight:600}
.eyebrow{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.eyebrow span{width:30px;height:1px;background:rgba(213,154,255,.55)}
.hero h1{font-family:Cinzel,serif;font-weight:500;line-height:.92;font-size:clamp(54px,8vw,112px);letter-spacing:-2px;text-shadow:0 8px 35px rgba(0,0,0,.45)}
.hero h1 span{display:block;font-size:.42em;letter-spacing:9px;color:#eee6f2;margin-left:7px;margin-bottom:12px}
.hero h1 strong{display:block;font-weight:700;background:linear-gradient(100deg,#fff 10%,#dba7ff 65%,#a965d9);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{max-width:560px;color:#d2c9d7;line-height:1.75;margin-top:27px;font-size:15px}
.hero-actions{display:flex;gap:12px;margin-top:31px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 23px;border:1px solid transparent;font-size:10px;font-weight:700;letter-spacing:1.8px;transition:.25s}
.btn-primary{background:linear-gradient(100deg,#8750bd,#bd76eb);color:white;box-shadow:0 10px 30px rgba(126,60,170,.2)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{border-color:rgba(220,192,234,.27);background:rgba(10,5,15,.35);color:#e8e0eb}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(220,192,234,.5)}
.opening-note{margin-top:30px;font-size:10px;letter-spacing:2px;color:#a9a0ad;display:flex;align-items:center;gap:10px}
.opening-note b{color:#eee5f1;font-weight:600}
.pulse{width:6px;height:6px;border-radius:50%;background:#d59aff;box-shadow:0 0 0 5px rgba(213,154,255,.08),0 0 15px #b66be8}
.scroll-hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:3px;color:#aaa1ad;z-index:3}
.scroll-hint span{margin-left:8px;color:#d59aff}
.countdown-section{padding:95px 6vw 100px;text-align:center;border-top:1px solid rgba(220,190,240,.08);background:radial-gradient(circle at center top,rgba(116,48,160,.13),transparent 45%),#08050d}
.countdown-section h2,.section-heading h2,.server-panel h2,.endgame-content h2,.community-box h2{font:600 clamp(32px,4vw,54px)/1.05 Cinzel,serif;letter-spacing:-.5px;margin-top:12px}
.countdown-section h2 span,.section-heading h2 span,.server-panel h2 span,.endgame-content h2 span,.community-box h2 span{color:#c27ced}
.countdown{display:flex;align-items:center;justify-content:center;gap:18px;margin:43px auto 15px}
.countdown i{font-style:normal;color:#5c4c65;font:300 34px Cinzel,serif;margin-top:-19px}
.time-box{min-width:130px;padding:19px 18px 16px;border:1px solid rgba(210,167,239,.13);background:rgba(20,10,29,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.time-box strong{display:block;font:600 clamp(35px,4vw,56px)/1 Cinzel,serif;color:#eee6f3}
.time-box span{display:block;margin-top:9px;color:#81768a;font-size:8px;letter-spacing:2.5px}
.countdown-date{font-size:10px;letter-spacing:2px;color:#776b80}
.content-section{padding:110px 7vw}
.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:48px}
.section-heading>p{max-width:520px;color:#968b9d;line-height:1.75;font-size:14px}
.section-heading.centered{justify-content:center;text-align:center;margin-bottom:45px}
.feature-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:15px}
.feature-grid.four{grid-template-columns:repeat(4,1fr)}
.glass-card{position:relative;padding:35px 30px 32px;min-height:235px;background:linear-gradient(145deg,rgba(27,14,39,.75),rgba(12,7,18,.62));border:1px solid var(--line);overflow:hidden;transition:.3s}
.glass-card:hover{transform:translateY(-5px);border-color:rgba(213,154,255,.35);background:linear-gradient(145deg,rgba(36,18,51,.8),rgba(12,7,18,.7))}
.card-number{position:absolute;top:18px;right:20px;font-size:9px;letter-spacing:2px;color:#5c4d65}
.card-icon{font-size:25px;color:#d39af5;margin-bottom:28px}
.glass-card h3{font:600 19px Cinzel,serif;letter-spacing:.4px}
.glass-card p{color:#8f8496;font-size:12px;line-height:1.7;margin-top:12px}
.card-line{position:absolute;bottom:0;left:0;width:52px;height:2px;background:#a960d4}
.server-section{min-height:640px;display:grid;grid-template-columns:1.05fr .95fr;background:#0b0610;border-top:1px solid rgba(220,190,240,.07);border-bottom:1px solid rgba(220,190,240,.07)}
.server-art{position:relative;min-height:540px;background-image:url('assets/jenova-hero.png');background-size:cover;background-position:center right;filter:saturate(.7)}
.server-art-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0b0610 0%,rgba(11,6,16,.45) 35%,rgba(11,6,16,.08) 100%),linear-gradient(0deg,rgba(11,6,16,.6),transparent 50%,rgba(11,6,16,.2))}
.server-panel{padding:95px 7vw 80px 5vw;display:flex;flex-direction:column;justify-content:center}
.stats{display:grid;grid-template-columns:1fr 1fr;margin-top:42px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stats div{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats strong{display:block;font:600 30px Cinzel,serif;color:#e7d2f1}
.stats span,.enchant span{font-size:8px;letter-spacing:2px;color:#756a7d}
.enchant{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.enchant div{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055)}
.enchant b{font:600 13px Cinzel,serif;color:#d59aff}
.endgame-section{min-height:620px;display:flex;align-items:center;padding:100px 8vw;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 50%,rgba(124,54,166,.17),transparent 35%),linear-gradient(90deg,#08050d,#0e0715)}
.endgame-section:after{content:"";position:absolute;right:-8%;top:8%;width:48vw;height:84%;background:url('assets/jenova-hero.png') center/cover no-repeat;opacity:.18;filter:saturate(.55);mask-image:linear-gradient(90deg,transparent,black 45%,black);-webkit-mask-image:linear-gradient(90deg,transparent,black 45%,black)}
.endgame-content{position:relative;z-index:2;max-width:620px}
.endgame-content p{color:#9b909f;line-height:1.8;font-size:14px;max-width:530px;margin:25px 0 30px}
.community-section{padding:80px 7vw}
.community-box{padding:45px 50px;border:1px solid rgba(213,154,255,.2);background:linear-gradient(120deg,rgba(40,18,55,.7),rgba(13,7,19,.8));display:flex;justify-content:space-between;align-items:center;gap:30px}
.community-box p{color:#8e8394;margin-top:12px;font-size:12px;letter-spacing:1px}
footer{padding:28px 7vw;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.06);color:#665b6e;font-size:8px;letter-spacing:2px}
.footer-brand{font:600 12px Cinzel,serif;color:#95879c}.footer-brand span{color:#b96de4}
@media(max-width:950px){
  .main-nav{display:none}
  .brand{min-width:auto}
  .feature-grid,.feature-grid.four{grid-template-columns:1fr 1fr}
  .server-section{grid-template-columns:1fr}
  .server-art{min-height:380px}
  .community-box{flex-direction:column;align-items:flex-start}
}
@media(max-width:650px){
  .site-header{height:70px;padding:0 20px}
  .discord-btn{display:none}
  .hero{min-height:720px}
  .hero-content{margin-left:25px;margin-right:25px}
  .hero h1{font-size:56px}
  .hero h1 span{font-size:17px;letter-spacing:4px}
  .hero-copy{font-size:13px}
  .countdown-section,.content-section{padding:75px 20px}
  .countdown{gap:5px}
  .countdown i{font-size:20px}
  .time-box{min-width:0;flex:1;padding:15px 5px}
  .time-box strong{font-size:28px}
  .time-box span{font-size:6px;letter-spacing:1px}
  .section-heading{display:block}
  .section-heading>p{margin-top:20px}
  .feature-grid,.feature-grid.four{grid-template-columns:1fr}
  .server-panel{padding:70px 20px}
  .endgame-section{padding:80px 25px}
  .community-section{padding:60px 20px}
  .community-box{padding:32px 25px}
  footer{flex-direction:column;padding:25px 20px}
}


/* Final hero cleanup: the artwork already contains its own JENOVA title.
   Keep the artwork clean and do not place a second title over it. */
.hero-content{
  margin-top:120px;
}
.hero-spacer{
  height:245px;
}
.hero-actions{
  margin-top:0;
}
@media(max-width:650px){
  .hero-content{margin-top:95px}
  .hero-spacer{height:220px}
}

/* Final hero presentation */
.hero-vignette{
  background:
    linear-gradient(90deg,rgba(7,4,11,.82) 0%,rgba(7,4,11,.48) 34%,rgba(7,4,11,.08) 67%,rgba(7,4,11,.30) 100%),
    linear-gradient(0deg,rgba(5,2,9,.42) 0%,transparent 28%,rgba(5,2,9,.08) 76%,rgba(5,2,9,.35) 100%);
}
.hero-content{z-index:4}
.hero-actions{position:relative;z-index:5;margin-top:18px}
.hero-actions .btn{cursor:pointer;position:relative;z-index:6}