* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #172033;
  background: #ffffff;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input {
  font: inherit;
}


/* ================= SPLASH ================= */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #063ca8,
      #0757d9,
      #16b9f5
    );

  color: white;

  transition:
    opacity .5s ease,
    visibility .5s ease;
}

.splash-screen.hide {
  opacity: 0;
  visibility: hidden;
}

.splash-content {
  text-align: center;
}

.splash-logo {
  width: 90px;
  height: 90px;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  background: white;
  color: #0757d9;

  border-radius: 22px;

  font-size: 50px;
  font-weight: 900;
}

.splash-content h1 {
  margin: 20px 0 5px;

  letter-spacing: 3px;
}

.splash-content p {
  font-size: 18px;
}

.splash-content small {
  opacity: .85;
}


/* ================= HEADER ================= */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 6%;

  background: rgba(255,255,255,.94);

  backdrop-filter: blur(15px);

  border-bottom: 1px solid #e5eaf2;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0757d9;
  color: white;

  border-radius: 12px;

  font-weight: 900;
  font-size: 22px;
}

.logo-text strong {
  display: block;
  font-size: 15px;
  letter-spacing: 1px;
}

.logo-text span {
  display: block;
  font-size: 10px;
  color: #707a8c;
}

#navigation {
  display: flex;
  gap: 22px;
}

#navigation a {
  font-size: 14px;
  font-weight: 700;
}

#navigation a:hover {
  color: #0757d9;
}

.menu-button {
  display: none;

  border: none;
  background: none;

  font-size: 27px;
}


/* ================= HERO ================= */

.hero {
  min-height: 590px;

  padding: 80px 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;

  background:
    radial-gradient(
      circle at 80% 30%,
      #dff4ff,
      #ffffff 48%
    );
}

.hero-content {
  max-width: 650px;
}

.small-title {
  color: #0757d9;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1.5px;
}

.hero h1 {
  font-size: clamp(45px, 7vw, 76px);

  line-height: .98;

  letter-spacing: -3px;

  margin: 18px 0;
}

.hero h1 span {
  color: #0757d9;
}

.hero p {
  color: #5d687b;

  font-size: 18px;

  line-height: 1.7;

  max-width: 560px;
}

.hero-buttons {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 30px;
}

.button {
  display: inline-block;

  border: none;

  border-radius: 12px;

  padding: 14px 20px;

  font-weight: 800;

  cursor: pointer;
}

.primary {
  background: #0757d9;

  color: white;

  box-shadow:
    0 12px 28px
    rgba(7,87,217,.25);
}

.secondary {
  background: white;

  border: 1px solid #d9e1ec;
}


/* ================= HERO VISUAL ================= */

.hero-visual {
  width: min(410px, 90vw);

  height: 350px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #0757d9,
      #16b9f5
    );

  border-radius: 35px;

  box-shadow:
    0 30px 60px
    rgba(7,87,217,.25);
}

.main-book {
  font-size: 120px;

  filter:
    drop-shadow(
      0 20px 15px
      rgba(0,0,0,.25)
    );
}

.floating-card {
  position: absolute;

  background: white;

  padding: 12px 15px;

  border-radius: 14px;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.15);

  font-weight: 800;

  font-size: 13px;
}

.card-one {
  left: -35px;
  top: 55px;
}

.card-two {
  right: -30px;
  top: 105px;
}

.card-three {
  right: -25px;
  bottom: 45px;
}


/* ================= QUICK ACCESS ================= */

.quick-access {
  padding: 0 7%;

  margin-top: -35px;

  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 14px;
}

.quick-card {
  background: white;

  border: 1px solid #e4e9f1;

  border-radius: 18px;

  padding: 20px;

  box-shadow:
    0 12px 35px
    rgba(12,31,64,.08);
}

.quick-card div {
  font-size: 27px;
}

.quick-card strong {
  display: block;

  margin-top: 9px;
}

.quick-card small {
  color: #778195;
}


/* ================= SECTIONS ================= */

.section {
  padding: 85px 7%;
}

.light-section {
  background: #f6f9fd;
}

.section-heading {
  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 25px;

  margin-bottom: 30px;
}

.section-heading h2,
.membership h2,
.contact h2 {
  font-size: 36px;

  margin: 8px 0;
}

.section-heading p {
  max-width: 520px;

  color: #6d7789;

  line-height: 1.6;
}


/* ================= EDUCATION ================= */

.education-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 18px;
}

.education-card {
  padding: 25px;

  background: white;

  border: 1px solid #e2e8f1;

  border-radius: 20px;
}

.education-icon {
  font-size: 35px;
}

.education-card h3 {
  font-size: 23px;
}

.education-card p {
  color: #697386;

  line-height: 1.6;
}

.tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin: 18px 0;
}

.tags span {
  background: #edf4ff;

  color: #0757d9;

  border-radius: 20px;

  padding: 6px 9px;

  font-size: 11px;

  font-weight: 800;
}

.outline-button {
  border: none;

  background: #edf4ff;

  color: #0757d9;

  padding: 12px 15px;

  border-radius: 10px;

  font-weight: 800;

  cursor: pointer;
}


/* ================= PAPERS ================= */

.paper-list {
  display: grid;

  gap: 12px;
}

.paper {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 15px;

  background: white;

  border: 1px solid #e0e6ef;

  border-radius: 16px;
}

.paper-icon {
  font-size: 28px;
}

.paper-info {
  flex: 1;
}

.paper-info h3 {
  margin: 0 0 4px;
}

.paper-info p {
  margin: 0;

  color: #778195;
}

.paper button,
.library-card button,
.video-content button {
  border: none;

  background: #0757d9;

  color: white;

  padding: 11px 15px;

  border-radius: 10px;

  font-weight: 800;

  cursor: pointer;
}


/* ================= LIBRARY ================= */

.library-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 18px;
}

.library-card {
  padding: 25px;

  border: 1px solid #e3e9f2;

  border-radius: 20px;

  background: white;
}

.library-icon {
  font-size: 35px;
}

.library-card p {
  color: #697386;

  line-height: 1.5;
}


/* ================= VIDEOS ================= */

.video-section {
  background: #f7faff;
}

.video-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 18px;
}

.video-card {
  overflow: hidden;

  background: white;

  border: 1px solid #e0e6ef;

  border-radius: 20px;
}

.video-thumbnail {
  height: 190px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #15213a,
      #0757d9
    );

  color: white;

  font-size: 55px;
}

.video-content {
  padding: 20px;
}

.premium {
  background: #edf4ff;

  color: #0757d9;

  padding: 6px 9px;

  border-radius: 20px;

  font-size: 10px;

  font-weight: 900;
}

.video-content p {
  color: #697386;
}

.video-content strong {
  display: block;

  margin: 15px 0;
}

.video-content button {
  width: 100%;
}


/* ================= RULES ================= */

.rules {
  background: #0d1930;

  color: white;
}

.rules h2 {
  max-width: 700px;
}

.rules-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 15px;

  margin-top: 35px;
}

.rule {
  padding: 20px;

  border: 1px solid
    rgba(255,255,255,.12);

  border-radius: 15px;
}

.rule strong {
  color: #6bbcff;
}

.rule p {
  color: #bcc7d9;

  line-height: 1.5;

  font-size: 14px;
}


/* ================= MEMBERSHIP ================= */

.membership {
  display: grid;

  grid-template-columns:
    1.5fr .7fr;

  gap: 40px;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      #eaf4ff,
      #f8fcff
    );
}

.membership-text p {
  color: #657084;

  line-height: 1.7;
}

.membership-text ul {
  padding: 0;
}

.membership-text li {
  list-style: none;

  margin: 13px 0;

  color: #465166;
}

.membership-box {
  padding: 28px;

  background: white;

  border-radius: 22px;

  text-align: center;

  box-shadow:
    0 18px 50px
    rgba(7,87,217,.12);
}

.membership-box small,
.membership-box span {
  display: block;

  color: #758096;
}

.membership-box strong {
  display: block;

  font-size: 42px;

  margin: 8px;
}

.membership-box .button {
  width: 100%;

  margin-top: 18px;
}


/* ================= ACCOUNTS ================= */

.accounts {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 18px;

  background: #f6f9fd;
}

.account-card {
  padding: 28px;

  background: white;

  border: 1px solid #e1e7ef;

  border-radius: 20px;
}

.account-card p {
  color: #697386;
}

.account-card form {
  display: grid;

  gap: 10px;

  margin-top: 20px;
}

.account-card input {
  width: 100%;

  border: 1px solid #dbe2ec;

  border-radius: 11px;

  padding: 13px;

  outline: none;
}

.account-card input:focus {
  border-color: #0757d9;
}

.account-card form a {
  text-align: center;

  color: #0757d9;

  font-size: 13px;

  margin-top: 8px;
}


/* ================= CONTACT ================= */

.contact {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;
}

.contact p {
  color: #697386;
}

.contact-links {
  display: grid;

  gap: 12px;
}

.contact-links a {
  background: #f2f6fb;

  padding: 14px 18px;

  border-radius: 12px;

  font-weight: 700;
}


/* ================= FOOTER ================= */

footer {
  padding: 30px 7%;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 20px;

  color: #697386;

  border-top: 1px solid #e5eaf1;

  font-size: 13px;
}

footer strong {
  color: #172033;
}


/* ================= TOAST ================= */

.toast {
  position: fixed;

  bottom: 20px;

  left: 50%;

  transform:
    translate(-50%,20px);

  max-width: 90%;

  padding: 13px 18px;

  background: #111b2e;

  color: white;

  border-radius: 12px;

  text-align: center;

  opacity: 0;

  pointer-events: none;

  transition: .3s;

  z-index: 10000;
}

.toast.show {
  opacity: 1;

  transform:
    translate(-50%,0);
}


/* ================= MOBILE ================= */

@media(max-width:850px) {

  #navigation {
    display: none;

    position: absolute;

    top: 68px;

    left: 0;

    right: 0;

    padding: 18px 7%;

    background: white;

    box-shadow:
      0 12px 30px
      rgba(0,0,0,.12);
  }

  #navigation.open {
    display: grid;

    gap: 16px;
  }

  .menu-button {
    display: block;
  }

  .hero {
    padding-top: 55px;

    flex-direction: column;

    align-items: stretch;
  }

  .hero-visual {
    width: 100%;

    height: 280px;
  }

  .quick-access {
    grid-template-columns:
      repeat(2,1fr);

    margin-top: 20px;
  }

  .education-grid,
  .library-grid,
  .video-grid,
  .rules-grid,
  .accounts,
  .membership {
    grid-template-columns: 1fr;
  }

  .section-heading {
    display: block;
  }

  .contact {
    display: block;
  }

  .contact-links {
    margin-top: 25px;
  }

  .card-one {
    left: 5px;
  }

  .card-two {
    right: 5px;
  }

  .card-three {
    right: 5px;
  }
}


@media(max-width:480px) {

  .hero h1 {
    font-size: 47px;
  }

  .hero {
    padding-left: 5%;
    padding-right: 5%;
  }

  .section {
    padding: 60px 5%;
  }

  .quick-access {
    padding: 0 5%;
  }

  .quick-card {
    padding: 15px;
  }

  .paper {
    align-items: flex-start;
  }

  .paper button {
    padding: 9px;

    font-size: 12px;
  }

  footer {
    padding: 25px 5%;
  }

}