/* =========================================
   GLOBAL
========================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #031331;
  --dark-navy: #020b1d;
  --medium-navy: #06275e;
  --blue: #075cff;
  --bright-blue: #1474ff;
  --light-blue: #e9f1ff;
  --white: #ffffff;
  --off-white: #f7f9fd;
  --text: #071838;
  --muted: #61708b;
  --border: #dce4f0;
  --green: #24ce84;

  --shadow:
    0 18px 50px rgba(5, 31, 78, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--off-white);
  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

a {
  text-decoration: none;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}


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

.siteHeader {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 50%;

  width: min(
    1160px,
    calc(100% - 40px)
  );

  min-height: 88px;

  transform:
    translateX(-50%);

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

  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: var(--white);
}

.brandShield{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    overflow:visible;
}

.brandShield img{
    width:56px;
    height:auto;
    display:block;
}

.brandText {
  display: flex;
  flex-direction: column;
}

.brandText strong {
  color: var(--white);
  font-size: 18px;
  line-height: 1.1;
}

.brandText span {
  margin-top: 4px;

  color:
    rgba(
      255,
      255,
      255,
      0.74
    );

  font-size: 11px;
}

.memberSignIn {
  min-height: 43px;

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

  gap: 9px;

  padding: 0 20px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.35
    );

  border-radius: 999px;

  background:
    rgba(
      4,
      17,
      48,
      0.35
    );

  color: var(--white);

  font-size: 13px;
  font-weight: 700;

  backdrop-filter:
    blur(10px);

  transition:
    0.25s ease;
}

.memberSignIn:hover {
  background: var(--white);
  color: var(--navy);
}


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

.hero {
  position: relative;

  min-height: 520px;

  overflow: hidden;

  padding:
    125px
    30px
    50px;

  background:
    radial-gradient(
      circle at 78% 52%,
      rgba(0, 88, 255, 0.35),
      transparent 27%
    ),
    linear-gradient(
      120deg,
      #02112e 0%,
      #03245d 62%,
      #052679 100%
    );
}

.hero::after {
  content: "";

  position: absolute;
  right: -90px;
  bottom: -180px;

  width: 620px;
  height: 620px;

  border:
    1px solid
    rgba(
      17,
      103,
      255,
      0.23
    );

  border-radius: 50%;
}

.heroDecoration {
  position: absolute;

  border-radius: 50%;

  opacity: 0.38;

  background:
    repeating-radial-gradient(
      circle,
      transparent 0 22px,
      rgba(
        22,
        111,
        255,
        0.12
      ) 23px 24px
    );
}

.heroDecorationOne {
  right: -90px;
  top: 20px;

  width: 470px;
  height: 470px;
}

.heroDecorationTwo {
  right: 300px;
  bottom: -230px;

  width: 420px;
  height: 420px;
}

.heroInner {
  position: relative;
  z-index: 5;

  width: min(
    1160px,
    100%
  );

  margin: auto;

  display: grid;

  grid-template-columns:
    1.12fr
    0.75fr;

  align-items: center;

  gap: 90px;
}

.heroBadge {
  width: fit-content;

  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 19px;

  padding:
    7px
    12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.22
    );

  border-radius: 999px;

  background:
    rgba(
      2,
      12,
      36,
      0.33
    );

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: 11px;
}

.statusDot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 10px
    rgba(
      36,
      206,
      132,
      0.8
    );
}

.heroContent h1 {
  max-width: 660px;

  color: var(--white);

  font-size:
    clamp(
      42px,
      4.5vw,
      61px
    );

  line-height: 1.02;

  letter-spacing:
    -2.7px;
}

.heroContent h1 span {
  color: #2175ff;
}

.heroDescription {
  max-width: 600px;

  margin-top: 22px;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: 15px;
  line-height: 1.65;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;

  gap: 13px;

  margin-top: 27px;
}

.primaryButton,
.secondaryButton {
  min-height: 51px;

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

  gap: 24px;

  padding:
    0
    25px;

  border-radius: 5px;

  font-size: 13px;
  font-weight: 800;

  transition:
    0.25s ease;
}

.primaryButton {
  border:
    1px solid
    var(--blue);

  background:
    var(--blue);

  color: var(--white);

  box-shadow:
    0 14px 25px
    rgba(
      0,
      72,
      255,
      0.22
    );
}

.primaryButton:hover {
  transform:
    translateY(-2px);

  background:
    var(--bright-blue);
}

.secondaryButton {
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.52
    );

  background:
    rgba(
      255,
      255,
      255,
      0.02
    );

  color: var(--white);
}

.secondaryButton:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.1
    );
}

.heroBenefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 28px;

  margin-top: 34px;
}

.heroBenefit {
  display: flex;
  align-items: center;

  gap: 8px;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: 11px;
  font-weight: 700;
}

.heroBenefitIcon {
  color: #1682ff;
  font-size: 23px;
}


/* =========================================
   ACCOUNT CARD
========================================= */

.accountCard {
    width: 100%;
    max-width: 365px;

    justify-self: end;

    padding: 24px 25px 19px;

    border: 2px solid #1d6dff;

    border-radius: 12px;

    background: var(--white);

    box-shadow: 0 28px 70px rgba(0,0,0,.3);
}

.accountLock {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin-bottom: 17px;

  border-radius: 50%;

  background:
    var(--blue);

  color: var(--white);

  font-size: 22px;
}

.accountCard h2 {
  margin-bottom: 7px;

  color: var(--text);

  font-size: 20px;
}

.accountIntroduction {
  color: var(--muted);

  font-size: 12px;
  line-height: 1.55;
}

.accountFeatures {
  display: grid;

  gap: 15px;

  margin:
    19px
    0;
}

.accountFeature {
  display: flex;
  align-items: center;

  gap: 12px;
}

.accountFeatureIcon {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    var(--light-blue);

  color: var(--blue);

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

.accountFeature strong,
.accountFeature small {
  display: block;
}

.accountFeature strong {
  margin-bottom: 3px;

  color: var(--text);

  font-size: 11px;
}

.accountFeature small {
  color: var(--muted);

  font-size: 9px;
  line-height: 1.35;
}

.accountSignInButton {
  width: 100%;
  min-height: 44px;

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

  gap: 25px;

  border-radius: 4px;

  background:
    var(--blue);

  color: var(--white);

  font-size: 12px;
  font-weight: 800;

  transition:
    0.25s ease;
}

.accountSignInButton:hover {
  background:
    #0050e4;
}

.secureAccountText {
  margin-top: 13px;

  text-align: center;

  color: var(--muted);

  font-size: 9px;
}


/* =========================================
   PRICING SECTION
========================================= */

.pricingSection {
  padding:
    50px
    30px
    28px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8faff 100%
    );
}

.sectionHeading {
  max-width: 720px;

  margin:
    0 auto 35px;

  text-align: center;
}

.sectionEyebrow {
  color: var(--blue);

  font-size: 11px;
  font-weight: 900;

  letter-spacing:
    1.6px;

  text-transform:
    uppercase;
}

.sectionHeading h2 {
  margin-top: 8px;

  color: var(--text);

  font-size:
    clamp(
      25px,
      3vw,
      34px
    );
}

.sectionHeading p {
  max-width: 520px;

  margin:
    9px auto 0;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.55;
}

.pricingGrid {
  width: min(
    1160px,
    100%
  );

  margin: auto;

  display: grid;

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

  gap: 20px;
}

.planCard {
  position: relative;

  min-height: 455px;

  display: flex;
  flex-direction: column;

  padding:
    24px
    21px
    18px;

 border: 2px solid #1d6dff;
  border-radius: 8px;

  background:
    var(--white);

  box-shadow:
    0 8px 24px
    rgba(
      9,
      42,
      95,
      0.05
    );

  transition:
    0.25s ease;
}

.planCard:hover {
  transform:
    translateY(-6px);

  border-color:
    #8db7ff;

  box-shadow:
    var(--shadow);
}

.featuredPlan {
  border:
    1.5px solid
    var(--blue);
}

.popularBadge {
  position: absolute;

  top: 12px;
  left: 12px;

  padding:
    5px
    10px;

  border-radius: 3px;

  background:
    var(--blue);

  color: var(--white);

  font-size: 9px;
  font-weight: 900;

  letter-spacing:
    0.5px;

  text-transform:
    uppercase;
}

.planIcon {
  width: 47px;
  height: 47px;

  display: grid;
  place-items: center;

  margin-bottom: 17px;

  border-radius: 50%;

  background:
    var(--light-blue);

  color: var(--blue);

  font-size: 25px;
}

.featuredPlan .planIcon {
  margin-top: 22px;
}

.planCard h3 {
  min-height: 45px;

  color: var(--text);

  font-size: 17px;
  line-height: 1.13;
}

.planPrice {
  display: flex;
  align-items: flex-end;

  gap: 6px;

  margin:
    10px
    0
    13px;
}

.planPrice strong {
  color: var(--blue);

  font-size: 25px;
  line-height: 1;
}

.planPrice span {
  padding-bottom: 2px;

  color: var(--muted);

  font-size: 10px;
}

.planDescription {
  min-height: 61px;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.52;
}

.planFeatures {
  display: grid;

  gap: 12px;

  margin:
    17px
    0
    22px;

  list-style: none;
}

.planFeatures li {
  position: relative;

  padding-left: 17px;

  color: #43516d;

  font-size: 10px;
  line-height: 1.35;
}

.planFeatures li::before {
  content: "✓";

  position: absolute;
  left: 0;

  color: var(--blue);

  font-weight: 900;
}

.choosePlanButton {
  width: 100%;
  min-height: 42px;

  margin-top: auto;

  border:
    1px solid
    #7184a7;

  border-radius: 5px;

  background:
    var(--white);

  color: var(--blue);

  font-size: 11px;
  font-weight: 900;

  transition:
    0.25s ease;
}

.choosePlanButton:hover {
  border-color:
    var(--blue);

  background:
    var(--blue);

  color: var(--white);
}

.featuredPlanButton {
  border-color:
    var(--blue);

  background:
    var(--blue);

  color: var(--white);
}

.featuredPlanButton:hover {
  background:
    #004ee0;
}

.billingText {
  display: block;

  margin-top: 10px;

  text-align: center;

  color: #7d899e;

  font-size: 9px;
}

.secureCheckoutText {
  margin-top: 20px;

  text-align: center;

  color: var(--muted);

  font-size: 10px;
}


/* =========================================
   DEMO SECTION
========================================= */

.demoSection {
  width: min(
    1160px,
    calc(100% - 60px)
  );

  min-height: 170px;

  margin:
    0 auto 30px;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: center;

  gap: 50px;

  overflow: hidden;

  padding:
    33px
    56px;

  border-radius: 8px;

  background:
    radial-gradient(
      circle at 90% 50%,
      rgba(
        32,
        119,
        255,
        0.65
      ),
      transparent 36%
    ),
    linear-gradient(
      120deg,
      #021338 0%,
      #043685 100%
    );
}

.demoEyebrow {
  color: #1da0ff;
}

.demoContent h2 {
  margin:
    8px
    0
    10px;

  color: var(--white);

  font-size: 25px;
}

.demoContent p {
  max-width: 560px;

  color:
    rgba(
      255,
      255,
      255,
      0.75
    );

  font-size: 11px;
  line-height: 1.6;
}

.demoButton {
  min-width: 176px;
  min-height: 52px;

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

  gap: 20px;

  border-radius: 11px;

  background:
    var(--white);

  color: var(--blue);

  font-size: 13px;
  font-weight: 900;

  box-shadow:
    0 12px 25px
    rgba(
      0,
      0,
      0,
      0.19
    );

  transition:
    0.25s ease;
}

.demoButton:hover {
  transform:
    translateY(-3px);
}


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

.siteFooter {
  padding:
    36px
    30px
    17px;

  background:
    #02102d;
}

.footerGrid {
  width: min(
    1160px,
    100%
  );

  margin: auto;

  display: grid;

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

  gap: 35px;
}

.footerLogo {
  display: flex;
  align-items: center;

  gap: 10px;

  color: var(--white);
}

.footerShield {
  width: 37px;
  height: 42px;

  font-size: 23px;
}

.footerLogo strong {
  font-size: 14px;
}

.footerBrand p {
  max-width: 190px;

  margin-top: 15px;

  color:
    rgba(
      255,
      255,
      255,
      0.61
    );

  font-size: 10px;
  line-height: 1.55;
}

.footerColumn {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.footerColumn h3 {
  margin-bottom: 4px;

  color: var(--white);

  font-size: 12px;
}

.footerColumn a {
  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size: 9px;

  transition:
    0.2s ease;
}

.footerColumn a:hover {
  color: var(--white);
}

.socialLinks {
  display: flex;

  gap: 9px;
}

.socialLinks a {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  color: var(--white);

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

.copyright {
  width: min(
    1160px,
    100%
  );

  margin:
    25px auto 0;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  text-align: center;

  color:
    rgba(
      255,
      255,
      255,
      0.61
    );

  font-size: 9px;
}


/* =========================================
   CART NOTICE
========================================= */

.cartNotice {
  position: fixed;
  z-index: 1000;

  right: 22px;
  bottom: 22px;

  width: min(430px, calc(100% - 44px));

  padding: 18px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 14px;

  background: #031331;
  color: #ffffff;

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.32);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(25px);

  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    visibility 0.28s ease;
}

.cartNotice.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(0);
}

.cartNoticeText {
  padding-right: 30px;
}

.cartNoticeText strong,
.cartNoticeText span {
  display: block;
}

.cartNoticeText strong {
  margin-bottom: 4px;

  font-size: 14px;
}

.cartNoticeText span {
  color:
    rgba(255, 255, 255, 0.72);

  font-size: 12px;
}

.cartNoticeActions {
  position: relative;

  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 14px;
}

.continueShoppingButton,
.viewCartButton {
  min-height: 41px;

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

  padding: 0 17px;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 800;

  transition: 0.2s ease;
}

.continueShoppingButton {
  background: #075cff;
  color: #ffffff;
}

.continueShoppingButton:hover {
  background: #1474ff;
}

.viewCartButton {
  border:
    1px solid
    rgba(255, 255, 255, 0.35);

  background:
    rgba(255, 255, 255, 0.07);

  color: #ffffff;
}

.viewCartButton:hover {
  background:
    rgba(255, 255, 255, 0.14);
}

.closeCartNotice {
  position: absolute;

  right: -5px;
  bottom: 47px;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border: none;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.1);

  color: #ffffff;

  font-size: 20px;
  line-height: 1;
}

.closeCartNotice:hover {
  background:
    rgba(255, 255, 255, 0.2);
}

.choosePlanButton.added {
  border-color: #24a96b;
  background: #24a96b;
  color: #ffffff;
}

@media (max-width: 480px) {

  .cartNotice {
    right: 14px;
    bottom: 14px;
    left: 14px;

    width: auto;
  }

  .continueShoppingButton,
  .viewCartButton {
    flex: 1;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

  .heroInner {
    grid-template-columns:
      1fr
      0.72fr;

    gap: 40px;
  }

  .pricingGrid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .planCard {
    min-height: auto;
  }

  .footerGrid {
    grid-template-columns:
      1.4fr
      repeat(
        2,
        1fr
      );
  }
}


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

@media (max-width: 760px) {

  .siteHeader {
    min-height: 75px;
  }

  .brandText span {
    display: none;
  }

  .brandText strong {
    font-size: 15px;
  }

 .brandShield{
    width:22px;
    height:22px;
}
.headerLogo{
    width:22px !important;
    max-width:22px !important;
    height:auto !important;
}
  .memberSignIn {
    min-height: 38px;

    padding:
      0
      13px;

    font-size: 11px;
  }

  .hero {
    padding:
      105px
      20px
      50px;
  }

  .heroInner {
    grid-template-columns:
      1fr;

    gap: 42px;
  }

  .heroContent {
    text-align: center;
  }

  .heroBadge {
    margin-left: auto;
    margin-right: auto;
  }

  .heroContent h1 {
    font-size: 42px;

    letter-spacing:
      -2px;
  }

  .heroDescription {
    margin-left: auto;
    margin-right: auto;
  }

  .heroActions {
    justify-content: center;
  }

  .heroBenefits {
    justify-content: center;
  }

  .accountCard {
    max-width: 500px;

    justify-self: center;
  }

  .pricingSection {
    padding:
      45px
      20px
      25px;
  }

  .pricingGrid {
    grid-template-columns:
      1fr;

    max-width: 480px;
  }

  .planCard h3,
  .planDescription {
    min-height: auto;
  }

  .demoSection {
    width:
      calc(
        100% - 40px
      );

    grid-template-columns:
      1fr;

    gap: 25px;

    padding:
      35px
      25px;

    text-align: center;
  }

  .demoContent p {
    margin: auto;
  }

  .demoButton {
    justify-self: center;
  }

  .footerGrid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .footerBrand {
    grid-column:
      1 / -1;
  }
}


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

@media (max-width: 480px) {

  .siteHeader {
    width:
      calc(
        100% - 28px
      );
  }

  .brandText strong {
    font-size: 13px;
  }

  .memberIcon {
    display: none;
  }

  .heroContent h1 {
    font-size: 36px;
  }

  .heroActions {
    display: grid;
  }

  .primaryButton,
  .secondaryButton {
    width: 100%;
  }

  .heroBenefits {
    width: fit-content;

    display: grid;

    justify-content:
      flex-start;

    margin-left: auto;
    margin-right: auto;
  }

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

  .footerBrand {
    grid-column: auto;
  }

  .cartNotice {
    right: 14px;
    bottom: 14px;
    left: 14px;

    max-width: none;

    text-align: center;
  }
}
.plansLink{
    margin-top:8px;
    text-align:center;
    font-size:12px;
}

.plansLink a{
    color:#68b82f;
    text-decoration:none;
    font-weight:700;
}

.plansLink a:hover{
    text-decoration:underline;
}
.headerActions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

.homeButton,
.memberSignIn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;

    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:700;

    background:rgba(255,255,255,.06);
    transition:.25s;
}

.homeButton:hover,
.memberSignIn:hover{
    background:#1d6dff;
    border-color:#1d6dff;
}

.memberIcon{
    font-size:14px;
}