* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   min-height: 100vh;
   font-family: Inter, Arial, sans-serif;
   color: #f7fbff;
   background: #050816 url(images/dce659269993ee5c55a0543ecd2f159e.gif) center center / cover fixed no-repeat;
   overflow-x: hidden;
}

body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   background:
      linear-gradient(90deg, rgba(2, 8, 27, 0.96), rgba(2, 8, 27, 0.62) 48%, rgba(2, 8, 27, 0.9)),
      linear-gradient(180deg, rgba(5, 8, 22, 0.45), rgba(5, 8, 22, 0.92));
   z-index: -1;
}

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

img {
   display: block;
   max-width: 100%;
}

.site-shell {
   width: 100%;
}

.hero {
   min-height: 100vh;
   display: flex;
   align-items: stretch;
}

.hero-content {
   width: min(1180px, calc(100% - 40px));
   margin: 0 auto;
   display: flex;
   flex-direction: column;
}

.topbar {
   min-height: 88px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.brand {
   width: 148px;
}

.topnav {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(3, 12, 34, 0.58);
   backdrop-filter: blur(14px);
   border-radius: 16px;
}

.topnav a {
   min-height: 38px;
   display: inline-flex;
   align-items: center;
   padding: 0 14px;
   border-radius: 12px;
   color: #c8d6ef;
   font-size: 14px;
}

.topnav a:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ffffff;
}

.hero-grid {
   flex: 1;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 380px;
   align-items: center;
   gap: 56px;
   padding: 32px 0 72px;
}

.hero-copy {
   max-width: 680px;
}

.eyebrow,
.panel-kicker,
.section-head span,
.support-copy span {
   display: inline-flex;
   align-items: center;
   min-height: 28px;
   padding: 0 12px;
   border-radius: 999px;
   background: rgba(47, 211, 255, 0.13);
   color: #73e7ff;
   border: 1px solid rgba(115, 231, 255, 0.2);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

h1,
h2,
h3,
p {
   margin: 0;
}

h1 {
   margin-top: 18px;
   font-size: clamp(58px, 9vw, 120px);
   line-height: 0.88;
   letter-spacing: 0;
}

.lead {
   margin-top: 26px;
   max-width: 590px;
   color: #d8e4f5;
   font-size: clamp(18px, 2.3vw, 24px);
   line-height: 1.45;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: 34px;
}

.primary-action,
.secondary-action,
.panel-login {
   min-height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 22px;
   border-radius: 14px;
   font-weight: 800;
}

.primary-action {
   color: #041121;
   background: #6ee7ff;
   box-shadow: 0 18px 38px rgba(31, 205, 255, 0.22);
}

.secondary-action,
.panel-login {
   color: #eff6ff;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.08);
}

.primary-action:hover {
   background: #ffffff;
}

.secondary-action:hover,
.panel-login:hover {
   background: rgba(255, 255, 255, 0.14);
}

.stat-row {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   margin-top: 42px;
   max-width: 650px;
}

.stat-row div,
.profile-panel,
.feature-card,
.radio-card,
.blog-card,
.support-band {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(3, 12, 34, 0.62);
   backdrop-filter: blur(16px);
}

.stat-row div {
   min-height: 88px;
   border-radius: 18px;
   padding: 16px;
}

.stat-row strong {
   display: block;
   font-size: 22px;
}

.stat-row span {
   display: block;
   margin-top: 6px;
   color: #aebed8;
   font-size: 13px;
   line-height: 1.35;
}

.profile-panel {
   border-radius: 24px;
   padding: 16px;
   box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.panel-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 4px 4px 14px;
}

.panel-head h2 {
   margin-top: 8px;
   font-size: 24px;
}

.panel-login {
   min-height: 40px;
   padding: 0 14px;
   font-size: 13px;
}

.profile-frame {
   height: 550px;
   overflow: hidden;
   border-radius: 18px;
   background: #071226;
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   justify-content: center;
}

.profile-frame iframe {
   width: 300px;
   max-width: 100%;
   height: 100%;
   border: 0;
   background: transparent;
}

.content-band,
.media-band,
.support-band,
.footer {
   width: min(1180px, calc(100% - 40px));
   margin: 0 auto;
}

.content-band {
   padding: 20px 0 42px;
}

.feature-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
}

.feature-card {
   overflow: hidden;
   border-radius: 22px;
}

.feature-card img {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
}

.feature-card div {
   padding: 18px;
}

.feature-card h3 {
   font-size: 20px;
}

.feature-card p {
   margin-top: 10px;
   color: #b9c7dc;
   font-size: 14px;
   line-height: 1.5;
}

.media-band {
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
   gap: 18px;
   padding: 18px 0 42px;
}

.radio-card,
.blog-card {
   border-radius: 24px;
   padding: 18px;
}

.section-head {
   margin-bottom: 14px;
}

.section-head h2,
.support-copy h2 {
   margin-top: 10px;
   font-size: 30px;
}

.radio-card iframe,
.blog-card iframe {
   width: 100%;
   border: 0;
   border-radius: 16px;
   background: #030816;
}

.radio-card iframe {
   height: 170px;
}

.blog-card iframe {
   height: 360px;
}

.support-band {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 360px;
   align-items: center;
   gap: 24px;
   border-radius: 24px;
   padding: 26px;
   margin-bottom: 36px;
}

.support-copy p {
   margin-top: 12px;
   color: #bdcbe0;
   line-height: 1.55;
}

.stripe-box {
   display: flex;
   justify-content: center;
   min-height: 120px;
}

.footer {
   min-height: 84px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   color: #9fb0ca;
   font-size: 14px;
}

.footer div {
   display: flex;
   gap: 14px;
}

.footer a:hover {
   color: #ffffff;
}

.mfp-iframe-holder .mfp-content {
   width: 92%;
   max-width: 1200px;
   height: 92vh;
}

.mfp-iframe-holder .mfp-iframe {
   width: 100%;
   height: 92vh;
   background: #fff;
   border-radius: 14px;
}

@media (max-width: 980px) {
   .topbar {
      min-height: 74px;
   }

   .hero-grid,
   .media-band,
   .support-band {
      grid-template-columns: 1fr;
   }

   .hero-grid {
      gap: 28px;
      padding-top: 18px;
   }

   .profile-panel {
      max-width: 420px;
      width: 100%;
   }

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

   .support-band {
      align-items: start;
   }
}

@media (max-width: 640px) {
   .hero-content,
   .content-band,
   .media-band,
   .support-band,
   .footer {
      width: min(100% - 24px, 1180px);
   }

   .topbar {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
      padding-top: 14px;
   }

   .brand {
      width: 120px;
   }

   .topnav {
      width: 100%;
      justify-content: space-between;
      overflow-x: auto;
      scrollbar-width: none;
   }

   .topnav::-webkit-scrollbar {
      display: none;
   }

   .topnav a {
      padding: 0 10px;
      font-size: 13px;
      white-space: nowrap;
   }

   .hero-grid {
      gap: 22px;
      padding-bottom: 42px;
   }

   h1 {
      font-size: clamp(46px, 17vw, 72px);
   }

   .lead {
      margin-top: 18px;
      font-size: 17px;
   }

   .hero-actions {
      margin-top: 24px;
   }

   .hero-actions,
   .stat-row {
      grid-template-columns: 1fr;
   }

   .primary-action,
   .secondary-action {
      width: 100%;
   }

   .stat-row {
      display: grid;
   }

   .profile-panel,
   .radio-card,
   .blog-card,
   .support-band {
      border-radius: 18px;
   }

   .profile-frame {
      height: 500px;
   }

   .feature-card img {
      height: 150px;
      aspect-ratio: auto;
      object-fit: contain;
      padding: 12px;
      background: rgba(5, 12, 34, 0.88);
   }

   .feature-card h3 {
      font-size: 18px;
   }

   .feature-card p {
      font-size: 13px;
      line-height: 1.45;
   }

   .blog-card iframe {
      height: 300px;
   }

   .footer {
      flex-direction: column;
      align-items: flex-start;
      padding-bottom: 24px;
   }
}

@media (max-width: 420px) {
   .hero-content,
   .content-band,
   .media-band,
   .support-band,
   .footer {
      width: min(100% - 18px, 1180px);
   }

   .topbar {
      padding-top: 10px;
   }

   .brand {
      width: 108px;
   }

   .topnav {
      padding: 5px;
      gap: 5px;
      border-radius: 13px;
   }

   .topnav a {
      min-height: 34px;
      padding: 0 9px;
      font-size: 12px;
   }

   .eyebrow,
   .panel-kicker,
   .section-head span,
   .support-copy span {
      min-height: 24px;
      padding: 0 9px;
      font-size: 10px;
   }

   .hero-grid {
      padding-top: 8px;
   }

   .stat-row {
      margin-top: 24px;
      gap: 8px;
   }

   .stat-row div {
      min-height: 72px;
      padding: 13px;
      border-radius: 14px;
   }

   .profile-panel,
   .radio-card,
   .blog-card,
   .support-band {
      padding: 12px;
   }

   .panel-head {
      align-items: flex-start;
      flex-direction: column;
   }

   .panel-login {
      width: 100%;
   }

   .profile-frame {
      height: 500px;
      border-radius: 14px;
   }

   .section-head h2,
   .support-copy h2 {
      font-size: 24px;
   }

   .feature-card div {
      padding: 14px;
   }

   .feature-card img {
      height: 118px;
      padding: 10px;
   }

   .feature-card h3 {
      font-size: 17px;
   }

   .feature-card p {
      font-size: 12px;
   }

   .radio-card iframe {
      height: 150px;
   }

   .blog-card iframe {
      height: 260px;
   }

   .support-band {
      gap: 16px;
   }
}

@media (max-width: 340px) {
   h1 {
      font-size: 44px;
   }

   .lead {
      font-size: 15px;
   }

   .profile-frame {
      height: 490px;
   }

   .feature-card img {
      height: 100px;
   }
}