/* =====================================================
   MEDIA KIT BASE
===================================================== */

.media-page{
  min-height:100vh;
  background:
    radial-gradient(
      circle at 83% 7%,
      #733b8f1e,
      transparent 31%
    ),
    radial-gradient(
      circle at 8% 40%,
      #32b4d914,
      transparent 30%
    ),
    #090b18;
}

.media-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.35;
  background:
    linear-gradient(
      90deg,
      transparent 49.9%,
      #ffffff08 50%,
      transparent 50.1%
    );
  background-size:120px 120px;
}

.media-header{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--line);
}

.media-header nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.media-header nav a{
  color:#a99fb9;
  font-size:13px;
  transition:color .2s ease;
}

.media-header nav a:hover{
  color:var(--text);
}

.media-main{
  padding-top:65px;
  padding-bottom:80px;
}

.media-status{
  margin-top:48px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--muted);
  background:#111321aa;
}

.media-status.error{
  color:#ffc3c7;
  border-color:#d95e6b55;
  background:#55151c22;
}


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

.media-hero{
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  align-items:center;
  gap:70px;
  padding:55px 0 90px;
}

.media-hero-copy{
  max-width:760px;
}

.media-hero h1{
  margin:12px 0 18px;
  font-size:clamp(60px,8vw,112px);
  line-height:.89;
  letter-spacing:-.055em;
}

.media-hero h1 span{
  color:var(--accent);
}

.media-tagline{
  max-width:700px;
  margin-top:28px;
  color:#eee8f4;
  font-size:clamp(20px,2.2vw,30px);
  line-height:1.35;
}

.media-bio{
  max-width:690px;
  margin-top:20px;
  font-size:16px;
  line-height:1.8;
  color:#aca3bb;
}

.creator-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:27px;
}

.creator-tag{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 13px;
  border:1px solid #bca8da29;
  border-radius:999px;
  background:#14162599;
  color:#cbc3d7;
  font-size:12px;
  letter-spacing:.04em;
}

.creator-tag.location{
  border-color:#70dbe429;
  color:#a9edf1;
}

.media-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin-top:34px;
}

.media-hero-actions .button svg{
  width:16px;
  height:16px;
}


/* =====================================================
   IDENTITY CARD
===================================================== */

.media-identity-panel{
  position:relative;
  padding:26px;
  border:1px solid #baa6db30;
  border-radius:28px;
  background:
    radial-gradient(
      circle at 50% 16%,
      #8e55ba21,
      transparent 35%
    ),
    linear-gradient(
      160deg,
      #16182aee,
      #0c0f1eee
    );
  box-shadow:
    0 30px 80px #0005,
    inset 0 1px #ffffff08;
}

.media-avatar-wrap{
  position:relative;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(
      circle,
      #7b499d1c,
      transparent 60%
    );
}

.media-avatar-wrap img{
  position:relative;
  z-index:2;
  width:78%;
  height:78%;
  object-fit:cover;
  border-radius:50%;
  border:1px solid #c7ace348;
  box-shadow:
    0 0 0 10px #0b0d19aa,
    0 20px 60px #0007;
}

.media-orbit{
  position:absolute;
  width:88%;
  height:37%;
  border:1px solid #9e87c544;
  border-radius:50%;
  transform:rotate(-18deg);
}

.media-orbit-one{
  animation:mediaOrbit 15s linear infinite;
}

.media-orbit-two{
  width:68%;
  height:105%;
  transform:rotate(53deg);
  border-color:#50c5d72c;
  animation:mediaOrbitTwo 18s linear infinite;
}

@keyframes mediaOrbit{
  to{
    transform:rotate(342deg);
  }
}

@keyframes mediaOrbitTwo{
  to{
    transform:rotate(413deg);
  }
}

.identity-details{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:23px;
  border-top:1px solid var(--line);
}

.identity-details>div{
  min-width:0;
  padding:18px 12px 4px;
}

.identity-details>div+div{
  border-left:1px solid var(--line);
}

.identity-details span{
  display:block;
  margin-bottom:7px;
  color:#80778d;
  font-size:9px;
  letter-spacing:.16em;
}

.identity-details strong{
  display:block;
  overflow-wrap:anywhere;
  color:#ddd6e7;
  font-size:12px;
  font-weight:500;
}


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

.media-section{
  padding:85px 0;
  border-top:1px solid var(--line);
}

.media-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:36px;
}

.media-section-heading h2{
  margin-top:8px;
  font-size:clamp(34px,4vw,55px);
  line-height:1.02;
  letter-spacing:-.035em;
}

.media-section-heading h2 span{
  color:var(--accent);
}

.media-period{
  margin:0;
  color:#81778f;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.section-lead{
  max-width:690px;
  margin:-12px 0 35px;
  color:var(--muted);
  line-height:1.75;
}


/* =====================================================
   HEADLINE STATS
===================================================== */

.headline-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.headline-stat{
  position:relative;
  min-height:150px;
  padding:23px;
  overflow:hidden;
  border:1px solid #b9a8d52a;
  border-radius:18px;
  background:
    linear-gradient(
      155deg,
      #161829bb,
      #0d101dcc
    );
}

.headline-stat::after{
  content:"✦";
  position:absolute;
  right:14px;
  bottom:5px;
  color:#b882dd0e;
  font-size:70px;
}

.headline-stat span{
  display:block;
  color:#8f869d;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.headline-stat strong{
  display:block;
  margin-top:16px;
  font-size:32px;
  line-height:1;
  letter-spacing:-.04em;
}

.headline-stat small{
  display:block;
  margin-top:9px;
  color:#988fa5;
  font-size:11px;
}


/* =====================================================
   PLATFORM CARDS
===================================================== */

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

.platform-card{
  position:relative;
  min-height:390px;
  padding:26px;
  overflow:hidden;
  border:1px solid #bca9dc2b;
  border-radius:22px;
  background:
    radial-gradient(
      circle at 100% 0%,
      #9a5fc71b,
      transparent 37%
    ),
    #101321dd;
}

.platform-card::before{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  right:-70px;
  top:-70px;
  border:1px solid #ffffff0b;
  border-radius:50%;
}

.platform-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:30px;
}

.platform-name{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.platform-name strong{
  font-size:21px;
}

.platform-name span{
  color:#8d8499;
  font-size:12px;
}

.platform-mark{
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1px solid #c8afe73b;
  border-radius:12px;
  color:var(--accent);
  background:#b37ed50d;
  font-size:15px;
  font-weight:700;
}

.platform-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--line);
}

.platform-metric{
  min-height:88px;
  padding:16px;
  background:#0b0e1a;
}

.platform-metric span{
  display:block;
  color:#797283;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.platform-metric strong{
  display:block;
  margin-top:8px;
  color:#e7e0ed;
  font-size:18px;
  font-weight:500;
}

.platform-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  color:#bca9cf;
  font-size:12px;
}

.platform-link:hover{
  color:var(--cyan);
}

.platform-link svg{
  width:14px;
  height:14px;
}


/* =====================================================
   AUDIENCE
===================================================== */

.audience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.media-card{
  padding:25px;
  border:1px solid #bba9d72a;
  border-radius:20px;
  background:#10131fbb;
}

.location-card{
  grid-column:1 / -1;
}

.media-card-heading{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}

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

.media-icon{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:1px solid #b9a7d930;
  border-radius:11px;
  color:var(--accent);
}

.media-icon svg{
  width:17px;
  height:17px;
}

.metric-chart{
  display:grid;
  gap:16px;
}

.metric-row{
  display:grid;
  grid-template-columns:105px minmax(0,1fr) 50px;
  align-items:center;
  gap:13px;
}

.metric-row-label{
  overflow:hidden;
  text-overflow:ellipsis;
  color:#bdb5c7;
  font-size:12px;
  white-space:nowrap;
}

.metric-bar{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#090b14;
}

.metric-bar span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--cyan)
    );
}

.metric-value{
  text-align:right;
  color:#e6deec;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.metric-empty{
  padding:24px 0;
  color:#766e81;
  font-size:13px;
}


/* =====================================================
   CONTENT SCHEDULE
===================================================== */

.schedule-platforms{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.schedule-platform{
  min-height:190px;
  padding:24px;
  border:1px solid #bda9da29;
  border-radius:18px;
  background:
    radial-gradient(
      circle at 100% 0%,
      #70428c15,
      transparent 42%
    ),
    #10131f;
}

.schedule-platform span{
  color:var(--accent);
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
}

.schedule-platform h3{
  margin-top:18px;
  font-size:20px;
}

.schedule-platform strong{
  display:block;
  margin-top:8px;
  color:#d9d1e3;
  font-size:14px;
  font-weight:500;
}

.schedule-platform p{
  margin-top:13px;
  color:#8f869a;
  font-size:13px;
  line-height:1.65;
}


/* =====================================================
   COLLABORATIONS
===================================================== */

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

.collaboration-card{
  display:flex;
  flex-direction:column;
  min-height:245px;
  padding:23px;
  border:1px solid #b9a6d72a;
  border-radius:18px;
  background:#10131fbb;
}

.collaboration-logo{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin-bottom:22px;
  border:1px solid #b7a3d632;
  border-radius:13px;
  background:#090c17;
  color:var(--accent);
  font-size:19px;
  font-weight:600;
}

.collaboration-logo img{
  width:100%;
  height:100%;
  padding:7px;
  object-fit:contain;
}

.collaboration-card .type{
  margin-bottom:6px;
  color:#8f809f;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

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

.collaboration-card p{
  margin-top:12px;
  color:#948b9e;
  font-size:13px;
  line-height:1.65;
}

.collaboration-card a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:20px;
  color:#c0b1d0;
  font-size:11px;
}

.collaboration-card a:hover{
  color:var(--cyan);
}

.collaboration-card svg{
  width:13px;
  height:13px;
}


/* =====================================================
   CASE STUDIES
===================================================== */

.case-study-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.case-study-card{
  position:relative;
  min-height:320px;
  padding:27px;
  overflow:hidden;
  border:1px solid #b9a7d52b;
  border-radius:21px;
  background:
    radial-gradient(
      circle at 100% 0%,
      #8553aa1d,
      transparent 35%
    ),
    #10131f;
}

.case-study-platform{
  display:inline-flex;
  padding:7px 9px;
  margin-bottom:25px;
  border:1px solid #bca8d72e;
  border-radius:999px;
  color:#bca8ce;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.case-study-card h3{
  max-width:470px;
  font-size:25px;
  line-height:1.15;
}

.case-study-brand{
  margin-top:7px;
  color:var(--accent);
  font-size:12px;
}

.case-study-description{
  margin-top:18px;
  color:#978e9f;
  font-size:13px;
  line-height:1.7;
}

.case-study-results{
  margin-top:22px;
  padding:14px 15px;
  border:1px solid #a8dae92c;
  border-radius:12px;
  background:#3dbdca0c;
}

.case-study-results span{
  display:block;
  margin-bottom:6px;
  color:#70ced7;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.case-study-results strong{
  color:#d8e9eb;
  font-size:13px;
  font-weight:500;
}

.case-study-card>a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:20px;
  color:#c4b7d1;
  font-size:11px;
}

.case-study-card>a:hover{
  color:var(--cyan);
}

.case-study-card>a svg{
  width:13px;
  height:13px;
}


/* =====================================================
   PACKAGES
===================================================== */

.package-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.package-card{
  display:flex;
  flex-direction:column;
  min-height:340px;
  padding:28px;
  border:1px solid #bda7dd2d;
  border-radius:22px;
  background:
    linear-gradient(
      150deg,
      #161829cc,
      #0d101ddd
    );
}

.package-number{
  color:#6fcbd4;
  font-size:10px;
  letter-spacing:.14em;
}

.package-card h3{
  margin-top:20px;
  font-size:26px;
  line-height:1.1;
}

.package-card>p{
  margin-top:14px;
  color:#968d9f;
  font-size:13px;
  line-height:1.7;
}

.package-features{
  display:grid;
  gap:10px;
  margin:23px 0;
  padding:0;
  list-style:none;
}

.package-features li{
  position:relative;
  padding-left:19px;
  color:#c3b9ce;
  font-size:12px;
}

.package-features li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:-1px;
  color:var(--accent);
  font-size:9px;
}

.package-price{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:#e5deec;
  font-size:13px;
}


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

.media-contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:60px;
  margin-top:45px;
  padding:55px;
  overflow:hidden;
  border:1px solid #bba5d63a;
  border-radius:28px;
  background:
    radial-gradient(
      circle at 90% 50%,
      #8b53ad21,
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #171829,
      #0d101d
    );
}

.media-contact h2{
  max-width:700px;
  margin-top:9px;
  font-size:clamp(38px,5vw,64px);
  line-height:1;
  letter-spacing:-.04em;
}

.media-contact h2 span{
  color:var(--accent);
}

.media-contact-description{
  max-width:650px;
  margin-top:18px;
  color:#9f96a8;
  line-height:1.7;
}

.media-contact-action .button{
  white-space:nowrap;
}

.media-contact-action svg{
  width:16px;
  height:16px;
}


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

.media-footer{
  min-height:160px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border-top:1px solid var(--line);
}

.media-footer p{
  margin-top:9px;
  color:#736b7e;
  font-size:11px;
}

.media-footer-right{
  display:flex;
  gap:22px;
  color:#81798c;
  font-size:11px;
}

.media-footer-right a{
  color:#aaa1b5;
}

.media-footer-right a:hover{
  color:var(--text);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1050px){

  .media-hero{
    grid-template-columns:1fr .75fr;
    gap:40px;
  }

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

  .platform-cards{
    grid-template-columns:1fr 1fr;
  }

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

}


@media(max-width:800px){

  .media-header{
    min-height:76px;
  }

  .media-header nav{
    display:none;
  }

  .media-hero{
    grid-template-columns:1fr;
    min-height:0;
    padding:40px 0 70px;
  }

  .media-hero-copy{
    order:1;
  }

  .media-identity-panel{
    order:0;
    width:min(500px,100%);
  }

  .identity-details{
    grid-template-columns:1fr 1fr 1fr;
  }

  .platform-cards{
    grid-template-columns:1fr;
  }

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

  .location-card{
    grid-column:auto;
  }

  .schedule-platforms{
    grid-template-columns:1fr;
  }

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

  .case-study-grid{
    grid-template-columns:1fr;
  }

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

  .media-contact{
    grid-template-columns:1fr;
    gap:32px;
    padding:38px;
  }

  .media-contact-action{
    justify-self:start;
  }

}


@media(max-width:600px){

  .media-main{
    padding-top:35px;
  }

  .media-header .button{
    display:none;
  }

  .media-hero{
    gap:35px;
  }

  .media-hero h1{
    font-size:54px;
  }

  .media-tagline{
    font-size:21px;
  }

  .identity-details{
    grid-template-columns:1fr;
  }

  .identity-details>div{
    padding:13px 5px;
  }

  .identity-details>div+div{
    border-left:0;
    border-top:1px solid var(--line);
  }

  .media-section{
    padding:60px 0;
  }

  .media-section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .headline-stats{
    grid-template-columns:1fr;
  }

  .headline-stat{
    min-height:125px;
  }

  .metric-row{
    grid-template-columns:85px minmax(0,1fr) 43px;
    gap:9px;
  }

  .media-contact{
    padding:30px 23px;
  }

  .media-footer{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
  }

  .media-footer-right{
    flex-direction:column;
    gap:8px;
  }

}


@media(prefers-reduced-motion:reduce){

  .media-orbit{
    animation:none;
  }

}