/* =========================================================
   AXIS INFO PAGE
   Standard AXIS hero treatment:
   taller hero, no blue line, long fade + second fade layer
   ========================================================= */

.info-page{
  margin:0;
  padding:0 0 72px;
  background:#03101a;
  color:#fff;
}

/* HERO */

.info-hero{
  position:relative;
  height:620px;
  overflow:hidden;
  background:
    url("../img/axis-info-bg.png?v=1") center 44% / cover no-repeat;
}

.info-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      rgba(0,5,10,.04) 0%,
      rgba(0,8,14,.08) 34%,
      rgba(2,9,15,.30) 58%,
      rgba(2,9,15,.68) 74%,
      rgba(3,16,26,.94) 90%,
      #03101a 100%
    ),
    radial-gradient(circle at 50% 42%,rgba(0,0,0,0),rgba(0,0,0,.28) 82%);
}

.info-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:250px;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(3,16,26,0) 0%,
      rgba(3,16,26,.22) 28%,
      rgba(3,16,26,.62) 62%,
      #03101a 100%
    );
}

.info-hero-content{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  height:100%;
  padding-top:170px;
  text-align:center;
  text-shadow:
    0 4px 14px rgba(0,0,0,.88),
    0 0 24px rgba(0,0,0,.78);
}

.info-hero-content .eyebrow{
  margin:0 0 7px;
  color:#65d8ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:4px;
}

.info-hero-content h1{
  margin:0;
  color:#fff;
  font-size:clamp(42px,4vw,64px);
  line-height:.94;
  font-weight:950;
  letter-spacing:5px;
}

.info-hero-content > p:last-child{
  margin:16px 0 0;
  color:#e8f4fa;
  font-size:16px;
  font-weight:800;
  letter-spacing:.8px;
}

/* CONTENT WRAPPER */

.info-wrap{
  position:relative;
  z-index:5;
  width:min(1260px,calc(100% - 40px));
  margin:-300px auto 0;
}

.info-panel{
  position:relative;
  padding:26px 28px 28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(18,122,194,.07),transparent 32%),
    linear-gradient(180deg,rgba(4,17,28,.98),rgba(2,10,18,.99));
  border:1px solid rgba(35,180,255,.50);
  clip-path:polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );
  box-shadow:
    0 22px 38px rgba(0,0,0,.42),
    0 0 16px rgba(0,147,220,.10),
    inset 0 0 28px rgba(0,100,160,.04);
}

.info-panel + .info-panel{
  margin-top:18px;
}

.panel-title{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}

.panel-title span{
  height:2px;
  background:linear-gradient(90deg,transparent,#1db9ff 50%,transparent);
  box-shadow:0 0 7px rgba(29,185,255,.35);
}

.panel-title h2{
  margin:0;
  color:#eef8fc;
  font-size:23px;
  font-weight:950;
  letter-spacing:.8px;
}

/* SERVER RATES */

.rates{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:34px;
}

.rate{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:40px;
  border-bottom:1px solid rgba(72,128,157,.22);
  color:#c7d4dc;
  font-size:14px;
}

.rate b{
  color:#27b8ff;
  font-size:14px;
  font-weight:950;
}

.notice{
  margin-top:18px;
  padding:12px 14px;
  border:1px solid rgba(35,180,255,.34);
  background:rgba(3,14,23,.72);
  color:#9fb8c6;
  font-size:12px;
  line-height:1.45;
}

/* MAP TABLE */

.table-wrap{
  width:100%;
  overflow:auto;
}

.table{
  width:100%;
  border-collapse:collapse;
  color:#cad7df;
  font-size:13px;
}

.table th{
  padding:13px 12px;
  text-align:left;
  color:#34baff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.7px;
  border-bottom:1px solid rgba(74,137,170,.28);
}

.table td{
  padding:14px 12px;
  border-bottom:1px solid rgba(65,112,140,.18);
}

.table tbody tr{
  transition:background .18s ease;
}

.table tbody tr:hover{
  background:rgba(20,92,131,.08);
}

.table td b{
  color:#f3f7f9;
}

.blue{
  color:#28b5ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
}

.online{
  color:#5be35d;
  font-weight:900;
}

.copy{
  padding:8px 14px;
  border:1px solid rgba(40,180,255,.60);
  background:linear-gradient(180deg,#073550,#06243a);
  color:#eaf8ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
  cursor:pointer;
}

.copy:hover{
  filter:brightness(1.12);
}


/* ITEM CAPS */

.caps-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 34px;
}

.cap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:44px;
  border-bottom:1px solid rgba(72,128,157,.22);
  color:#c7d4dc;
  font-size:14px;
}

.cap b{
  color:#27b8ff;
  font-size:14px;
  font-weight:950;
  text-align:right;
}

.cap em{
  color:#698696;
  padding:0 5px;
  font-style:normal;
}

/* MODS */

.mods-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.mod-card{
  min-height:62px;
  box-sizing:border-box;
  padding:13px 14px;
  border:1px solid rgba(35,180,255,.34);
  background:rgba(3,14,23,.72);
}

.mod-card strong{
  display:block;
  margin-bottom:5px;
  color:#25c8ff;
  font-size:14px;
  font-weight:950;
  letter-spacing:.4px;
}

.mod-card span{
  color:#9fb8c6;
  font-size:12px;
  line-height:1.45;
}

/* RESPONSIVE */

@media(max-width:900px){
  .info-hero{
    height:540px;
  }

  .info-wrap{
    margin-top:-245px;
  }

  .rates,
  .caps-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .info-page{
    padding-bottom:42px;
  }

  .info-hero{
    height:460px;
  }

  .info-hero-content{
    padding:125px 14px 0;
  }

  .info-hero-content > p:last-child{
    font-size:13px;
  }

  .info-wrap{
    width:calc(100% - 20px);
    margin-top:-190px;
  }

  .info-panel{
    padding:20px 14px;
  }

  .panel-title h2{
    font-size:19px;
  }

  .rate,
  .cap{
    font-size:13px;
  }

  .mods-grid{
    grid-template-columns:1fr;
  }

  .cap b{
    font-size:13px;
  }
}