@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;700;800&display=swap');

/* ================= BASE ================= */
*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  background:#030507;
  color:#eee;
  font-family:Inter, Arial, sans-serif;
}

body{
  overflow-x:hidden;
}

/* ================= BACKGROUND ================= */
.bg,
.bg-blue{
  position:fixed;
  inset:0;
  z-index:-5;
  background-image:url("assets/bg-main3.png") !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  filter:none !important;
}

.bg-red,
.noise{
  display:none !important;
}

.page{
  position:relative;
  min-height:100vh;
  padding:5vh 32px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  isolation:isolate;
}

.page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 100%);
}

.page::after{
  display:none !important;
}

/* ================= TOP LOGO ================= */
.top-logo{
  position:relative;
  z-index:50;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0;
  margin-bottom:4px;
}

.top-logo img{
  width:min(12vw, 130px);
  height:auto;
  object-fit:contain;
  opacity:.98;
  filter:
    drop-shadow(0 0 12px rgba(0,0,0,.5))
    drop-shadow(0 0 24px rgba(74,168,255,.12));
  animation:logoFloat 5s ease-in-out infinite;
  transition:transform .4s ease, filter .4s ease;
}

.top-logo img:hover{
  transform:scale(1.03);
  filter:
    drop-shadow(0 0 20px rgba(0,0,0,.6))
    drop-shadow(0 0 34px rgba(74,168,255,.22));
}

@keyframes logoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

/* ================= HERO ================= */
.hero{
  margin-top:2vh;
  margin-bottom:3vh;
  text-align:center;
}

.top-badge,
.mu-badge{
  position:relative;
  z-index:30;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  margin-bottom:22px;
  border-radius:999px;
  background:linear-gradient(to bottom, rgba(38,46,58,.92), rgba(10,12,18,.88));
  border:1px solid rgba(255,220,150,.42);
  color:rgba(255,248,230,.98);
  font-size:13px;
  font-weight:800;
  letter-spacing:.34em;
  text-transform:uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(255,220,150,.08),
    0 0 18px rgba(255,210,120,.14),
    0 10px 26px rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
}

.top-badge::before,
.mu-badge::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.22), transparent 30%);
  opacity:.7;
}

.top-badge::after,
.mu-badge::after{
  content:"";
  position:absolute;
  inset:-12px;
  z-index:-1;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,215,120,.18), transparent 70%);
  filter:blur(10px);
}

h1{
  margin:0;
  font-family:Cinzel, "Cormorant Garamond", serif;
  font-size:clamp(34px, 5vw, 72px);
  letter-spacing:.12em;
  font-weight:700;
  color:#f4efe6;
  text-shadow:0 2px 0 #000, 0 0 22px rgba(255,255,255,.17);
}

.hero p{
  margin:10px 0 0;
  color:rgba(255,255,255,.68);
  font-size:13px;
  letter-spacing:.55em;
  text-transform:uppercase;
}

/* ================= PORTAL / SERVER CARDS ================= */
.portal{
  position:relative;
  z-index:20;
  width:min(860px, 100%);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:30vh;
  transform:scale(.78);
  transform-origin:top center;
}

.server-card{
  position:relative;
  min-height:360px;
  border-radius:18px;
  overflow:visible !important;
  filter:
    drop-shadow(0 34px 55px rgba(0,0,0,.95))
    drop-shadow(0 0 24px rgba(255,220,150,.18)) !important;
  transition:transform .28s ease, filter .28s ease;
}

.server-card:hover,
.server-card.selected{
  transform:translateY(-5px) scale(1.025) !important;
}

.server-card::before{
  content:"";
  position:absolute;
  inset:-80px;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  opacity:.32;
  filter:blur(10px);
}

.reset-card::before{
  background:
    radial-gradient(circle, transparent 38%, rgba(72,160,255,.28) 39%, transparent 41%),
    conic-gradient(from 20deg, transparent, rgba(72,160,255,.25), transparent 32%);
}

.nonreset-card::before{
  background:
    radial-gradient(circle, transparent 38%, rgba(255,157,50,.25) 39%, transparent 41%),
    conic-gradient(from 20deg, transparent, rgba(255,120,30,.24), transparent 32%);
}

.card-frame{
  position:absolute;
  inset:0;
  overflow:hidden !important;
  border-radius:18px;
  background:linear-gradient(to bottom, rgba(5,12,22,.96), rgba(0,0,0,.91)) !important;
  border:1px solid rgba(255,220,145,.46) !important;
  backdrop-filter:blur(6px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 38px rgba(255,255,255,.045),
    0 0 0 1px rgba(255,225,150,.18),
    0 0 32px rgba(255,190,90,.20),
    0 36px 80px rgba(0,0,0,.95) !important;
}

.reset-card .card-frame{
  border-color:rgba(90,185,255,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 36px rgba(50,150,255,.14),
    0 0 0 1px rgba(90,185,255,.32),
    0 0 42px rgba(50,150,255,.44),
    0 36px 80px rgba(0,0,0,.95) !important;
}

.nonreset-card .card-frame{
  border-color:rgba(255,178,78,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 36px rgba(255,125,35,.13),
    0 0 0 1px rgba(255,178,78,.30),
    0 0 42px rgba(255,120,35,.36),
    0 36px 80px rgba(0,0,0,.95) !important;
}

.card-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 14%, transparent 32%);
  opacity:.55 !important;
}

.card-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 0 24px rgba(255,255,255,.055);
}

.reset-card:hover .card-frame,
.reset-card.selected .card-frame{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 48px rgba(70,170,255,.22),
    0 0 0 1px rgba(120,210,255,.45),
    0 0 58px rgba(50,160,255,.65),
    0 40px 90px rgba(0,0,0,.98) !important;
}

.nonreset-card:hover .card-frame,
.nonreset-card.selected .card-frame{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 48px rgba(255,140,45,.20),
    0 0 0 1px rgba(255,205,100,.42),
    0 0 58px rgba(255,120,35,.55),
    0 40px 90px rgba(0,0,0,.98) !important;
}

.card-content{
  position:relative;
  z-index:5;
  min-height:360px;
  padding:28px 30px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}

/* ================= CARD TEXT ================= */
.crest{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.25);
  transform:rotate(45deg);
  background:rgba(0,0,0,.34);
  font-size:20px;
}

.crest-blue{
  color:#78bcff;
  box-shadow:0 0 22px rgba(71,165,255,.35);
}

.crest-gold{
  color:#ffc06b;
  box-shadow:0 0 22px rgba(255,156,47,.35);
}

.label{
  font-family:Cinzel, serif;
  letter-spacing:.55em;
  font-size:17px;
  font-weight:700;
}

.blue-text{ color:#80c1ff; }
.gold-text{ color:#ffc06b; }

h2{
  margin:8px 0 4px;
  font-family:Cinzel, "Cormorant Garamond", serif;
  font-size:clamp(28px, 3vw, 48px);
  line-height:.95;
  color:#fff8ef;
  text-shadow:0 3px 0 #000, 0 0 18px rgba(255,255,255,.14);
}

.divider{
  width:245px;
  height:1px;
  margin:16px 0 14px;
  background:linear-gradient(90deg, transparent, #58b2ff, transparent);
}

.divider.gold{
  background:linear-gradient(90deg, transparent, #ffb45d, transparent);
}

.tagline{
  margin:0 0 20px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  letter-spacing:.25em;
}

ul{
  width:min(380px, 100%);
  margin:0 0 28px;
  padding:0;
  list-style:none;
  text-align:left;
  color:rgba(255,255,255,.86);
}

li{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
  font-size:15px;
}

li span{
  flex:0 0 34px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#f7d783;
  font-size:11px;
  font-weight:800;
}

/* ================= CTA BUTTONS ================= */
.btn{
  position:relative;
  overflow:hidden;
  width:min(380px, 100%);
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#fff !important;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.07em;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
  transform:translateZ(0);
  transition:.25s ease;
}

.btn-blue{
  background:
    radial-gradient(circle at 50% 120%, rgba(90,190,255,.85), transparent 48%),
    linear-gradient(90deg, #06295f, #1164d8) !important;
  border:1px solid rgba(130,215,255,.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 24px rgba(120,210,255,.25),
    0 0 18px rgba(70,170,255,.55),
    0 0 36px rgba(70,170,255,.28) !important;
}

.btn-gold{
  background:
    radial-gradient(circle at 50% 120%, rgba(255,190,90,.75), transparent 48%),
    linear-gradient(90deg, #552008, #a4470d) !important;
  border:1px solid rgba(255,205,110,.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 24px rgba(255,190,90,.22),
    0 0 18px rgba(255,150,45,.50),
    0 0 36px rgba(255,120,30,.25) !important;
}

.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:55%;
  height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  opacity:.65;
  animation:ctaShine 3.2s ease-in-out infinite;
}

@keyframes ctaShine{
  0%{ left:-80%; }
  45%,100%{ left:130%; }
}

/* ================= CHARACTERS ================= */
.char{
  position:absolute;
  z-index:3;
  bottom:-10px;
  height:104%;
  max-height:360px;
  pointer-events:none;
  opacity:.92;
  filter:drop-shadow(0 30px 32px rgba(0,0,0,.7));
  transition:transform .35s ease, opacity .35s ease, filter .35s ease;
}

.char-left{
  left:0;
  transform:translateX(-65%) scale(1.05);
}

.char-right{
  right:0;
  transform:translateX(65%) scale(1.05);
}

.reset-card:hover .char-left,
.reset-card.selected .char-left{
  opacity:1;
  transform:translateX(-80%) translateY(-8px) scale(1.08);
  filter:drop-shadow(0 0 28px rgba(65,158,255,.55)) drop-shadow(0 30px 32px rgba(0,0,0,.7));
}

.nonreset-card:hover .char-right,
.nonreset-card.selected .char-right{
  opacity:1;
  transform:translateX(70%) translateY(-8px) scale(1.08);
  filter:drop-shadow(0 0 28px rgba(255,158,47,.5)) drop-shadow(0 30px 32px rgba(0,0,0,.7));
}

/* ================= PARTICLES ================= */
.server-card .particles{
  position:absolute;
  inset:-120px;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
  opacity:.25;
  transition:opacity .3s ease;
}

.server-card:hover .particles{
  opacity:1;
}

.particles span{
  position:absolute;
  bottom:80px;
  width:5px;
  height:5px;
  border-radius:50%;
  opacity:0;
  animation:floatUp 5.5s linear infinite;
}

.reset-card .particles{
  filter:drop-shadow(0 0 20px rgba(80,180,255,.25));
}

.nonreset-card .particles{
  filter:drop-shadow(0 0 20px rgba(255,120,40,.25));
}

.reset-card .particles span{
  background:#5cc0ff;
  box-shadow:
    0 0 10px #5cc0ff,
    0 0 18px rgba(92,192,255,.9),
    0 0 28px rgba(92,192,255,.6);
}

.nonreset-card .particles span{
  background:#ff7a3a;
  box-shadow:
    0 0 10px #ff7a3a,
    0 0 18px rgba(255,122,58,.9),
    0 0 28px rgba(255,122,58,.6);
}

.particles span:nth-child(1){ left:10%; animation-delay:0s; }
.particles span:nth-child(2){ left:25%; animation-delay:1s; }
.particles span:nth-child(3){ left:40%; animation-delay:2s; width:7px; height:7px; filter:blur(.5px); }
.particles span:nth-child(4){ left:55%; animation-delay:3s; }
.particles span:nth-child(5){ left:70%; animation-delay:4s; }
.particles span:nth-child(6){ left:20%; animation-delay:2.5s; width:7px; height:7px; filter:blur(.5px); }
.particles span:nth-child(7){ left:50%; animation-delay:1.5s; }
.particles span:nth-child(8){ left:80%; animation-delay:3.5s; }

.server-card:hover .particles span{
  animation-duration:4.5s;
}

@keyframes floatUp{
  0%{ translate:0 0; scale:.6; opacity:0; }
  15%{ opacity:1; }
  100%{ translate:20px -240px; scale:1.3; opacity:0; }
}

/* ================= TABS ================= */
.tabs{
  margin-top:4vh;
  padding:5px;
  display:flex;
  gap:5px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(0,0,0,.45);
}

.tab{
  padding:10px 26px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.66);
  font-weight:800;
  cursor:pointer;
  transition:.22s ease;
}

.tab.active{
  color:#fff;
  background:linear-gradient(#404850,#1b2027);
  box-shadow:inset 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.35);
}

.tab-desc{
  min-height:24px;
  margin:2vh 0 26px;
  text-align:center;
  color:rgba(255,255,255,.74);
}

/* ================= FOOTER ================= */
footer{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:40px auto 0;
  padding:0;
  text-align:center;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
}

footer span{
  display:block;
  width:100%;
  text-align:center;
}

/* ================= MOBILE LOCK LAYOUT - FINAL ================= */
@media (max-width:768px){

  html,
  body{
    width:100%;
    margin:0;
    overflow-x:hidden;
  }

  .page{
    width:100%;
    min-height:100vh;
    padding:0 14px 22px;
    overflow:hidden;
    align-items:center;
  }

  .hero{
    margin:0;
    height:18vh;
  }

  .portal{
    width:100% !important;
    max-width:390px !important;

    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;

    margin:0 auto !important;
    padding:0 !important;

    transform:none !important;
    left:auto !important;
    right:auto !important;
  }

  .server-card{
    width:100% !important;
    min-height:360px !important;
    border-radius:14px !important;
  }

  .card-frame{
    border-radius:14px !important;
  }

  .card-frame::before,
  .card-frame::after{
    border-radius:14px !important;
  }

  .card-content{
    min-height:360px !important;
    padding:24px 12px 18px !important;
  }

  .crest{
    width:38px !important;
    height:38px !important;
    margin-bottom:12px !important;
    font-size:15px !important;
  }

  .label{
    font-size:12px !important;
    letter-spacing:.42em !important;
  }

  h2{
    font-size:23px !important;
    line-height:1 !important;
    margin:7px 0 3px !important;
  }

  .divider{
    width:100% !important;
    margin:14px 0 12px !important;
  }

  .tagline{
    font-size:9px !important;
    line-height:1.45 !important;
    letter-spacing:.18em !important;
    margin-bottom:16px !important;
  }

  ul{
    width:100% !important;
    margin-bottom:20px !important;
  }

  li{
    gap:8px !important;
    margin:10px 0 !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  li span{
    flex:0 0 26px !important;
    height:20px !important;
    font-size:8px !important;
    border-radius:6px !important;
  }

  .btn{
    width:100% !important;
    min-height:48px !important;
    padding:0 8px !important;
    font-size:11px !important;
    line-height:1.25 !important;
    text-align:center !important;
  }

  .char{
    max-height:210px !important;
    opacity:.85 !important;
  }

  .char-left{
    left:0 !important;
    transform:translateX(-48%) scale(.95) !important;
  }

  .char-right{
    right:0 !important;
    transform:translateX(48%) scale(.95) !important;
  }

  .reset-card:hover .char-left,
  .reset-card.selected .char-left{
    transform:translateX(-48%) scale(.95) !important;
  }

  .nonreset-card:hover .char-right,
  .nonreset-card.selected .char-right{
    transform:translateX(48%) scale(.95) !important;
  }

  .server-card .particles{
    inset:-40px !important;
  }

  footer{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:14px;
    margin:28vh auto 0;
    padding:0;
    font-size:11px;
  }

  footer span{
    width:100%;
    text-align:center;
  }

}

@media (max-width:768px){

  .server-card{
    min-height:430px !important;
  }

  .card-content{
    min-height:430px !important;
    justify-content:flex-start !important;
    padding-top:28px !important;
  }

  .btn{
    margin-top:auto !important;
  }

}