/* =========================================================
   COOPERATIONS
   public/css/cooperations.css
========================================================= */


/* =========================================================
   PAGE VARIABLES
========================================================= */

.cooperations-page {
  --coop-bg:
    color-mix(
      in srgb,
      var(--bg, #09090d) 97%,
      #11131a
    );

  --coop-bg-soft:
    color-mix(
      in srgb,
      var(--bg-soft, #0d0f14) 92%,
      transparent
    );

  --coop-card:
    color-mix(
      in srgb,
      var(--panel, #12141b) 92%,
      transparent
    );

  --coop-card-strong:
    color-mix(
      in srgb,
      var(--panel, #12141b) 98%,
      #000
    );

  --coop-border:
    color-mix(
      in srgb,
      var(--line, rgba(255, 255, 255, .1)) 88%,
      transparent
    );

  --coop-text:
    var(--text, #f7f8fb);

  --coop-soft:
    var(--text-soft, #a6adbd);

  --coop-faint:
    var(--text-faint, #6f7788);

  --coop-accent:
    var(--accent, #7c3aed);

  --coop-accent-soft:
    color-mix(
      in srgb,
      var(--coop-accent) 22%,
      transparent
    );

  --coop-twitch:
    #9146ff;

  --coop-instagram:
    #e1306c;

  --coop-youtube:
    #ff0033;

  --coop-tiktok:
    #25f4ee;

  position: relative;

  overflow: hidden;

  color:
    var(--coop-text);

  background:
    radial-gradient(
      circle at 8% 6%,
      rgba(124, 58, 237, .09),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 22%,
      rgba(145, 70, 255, .05),
      transparent 24%
    ),
    var(--coop-bg);
}


.cooperations-page *,
.cooperations-page *::before,
.cooperations-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   SHARED
========================================================= */

.coop-section {
  position: relative;

  padding:
    90px 0;
}


.coop-section + .coop-section {
  border-top:
    1px solid
    var(--coop-border);
}


.coop-section-heading {
  max-width:
    820px;

  margin-bottom:
    38px;
}


.coop-section-heading-split {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, .75fr);

  align-items:
    end;

  gap:
    60px;

  max-width:
    none;
}


.coop-section-heading-split > p {
  margin:
    0;
}


.coop-section-heading h2,
.coop-production-copy h2,
.coop-requirements-heading h2,
.coop-final-copy h2 {
  margin:
    0;

  font-size:
    clamp(
      2rem,
      4vw,
      3.8rem
    );

  line-height:
    1;

  letter-spacing:
    -.05em;
}


.coop-section-heading p,
.coop-production-copy p,
.coop-final-copy p {
  margin:
    18px 0 0;

  color:
    var(--coop-soft);

  font-size:
    1rem;

  line-height:
    1.75;
}


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

.coop-hero {
  position: relative;

  isolation: isolate;

  min-height:
    720px;

  padding:
    92px 0 82px;

  overflow:
    hidden;

  border-bottom:
    1px solid
    var(--coop-border);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      transparent 38%
    ),
    radial-gradient(
      circle at 72% 42%,
      rgba(124,58,237,.13),
      transparent 31%
    );
}


.coop-hero-grid {
  position: absolute;

  inset: 0;

  z-index: -4;

  opacity: .28;

  background-image:
    linear-gradient(
      var(--coop-border) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--coop-border) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.8) 40%,
      transparent 92%
    );
}


.coop-hero-orb {
  position: absolute;

  z-index: -3;

  width:
    460px;

  aspect-ratio:
    1;

  border-radius:
    50%;

  filter:
    blur(90px);

  opacity:
    .18;

  pointer-events:
    none;
}


.coop-hero-orb-one {
  top:
    -180px;

  right:
    -80px;

  background:
    var(--coop-accent);
}


.coop-hero-orb-two {
  bottom:
    -230px;

  left:
    16%;

  background:
    #4f46e5;
}


.coop-hero-inner {
  display: grid;

  grid-template-columns:
    minmax(0, .95fr)
    minmax(430px, .85fr);

  align-items:
    center;

  gap:
    clamp(
      50px,
      7vw,
      110px
    );
}


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

.coop-hero-top {
  display: flex;

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

  flex-wrap: wrap;

  gap:
    16px;

  margin-bottom:
    24px;
}


.coop-hero-top .section-kicker {
  margin:
    0;
}


/* =========================================================
   LANGUAGE SWITCH
========================================================= */

.coop-language-switch {
  display: inline-flex;

  align-items: center;

  gap:
    4px;

  padding:
    4px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    12px;

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

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.035),
    0 8px 24px
    rgba(0,0,0,.12);

  backdrop-filter:
    blur(16px);
}


.coop-language-switch > span {
  color:
    var(--coop-faint);

  font-size:
    .62rem;

  opacity:
    .35;

  user-select:
    none;
}


.coop-language-link {
  display: grid;

  place-items: center;

  min-width:
    38px;

  height:
    31px;

  padding:
    0 9px;

  border-radius:
    8px;

  color:
    var(--coop-faint);

  font-size:
    .67rem;

  font-weight:
    900;

  letter-spacing:
    .06em;

  text-decoration:
    none;

  transition:
    color .2s ease,
    background .2s ease,
    transform .18s ease,
    box-shadow .2s ease;
}


.coop-language-link:hover {
  color:
    var(--coop-text);

  background:
    rgba(255,255,255,.05);
}


.coop-language-link.is-active {
  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--coop-accent) 75%,
        white
      ),
      var(--coop-accent)
    );

  box-shadow:
    0 7px 22px
    rgba(124,58,237,.25);
}


.coop-language-link:active {
  transform:
    scale(.95);
}


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

.coop-hero h1 {
  margin:
    0;

  max-width:
    770px;

  font-size:
    clamp(
      3.1rem,
      6.6vw,
      6.4rem
    );

  line-height:
    .92;

  letter-spacing:
    -.065em;
}


.coop-hero h1 span {
  display:
    block;

  color:
    transparent;

  background:
    linear-gradient(
      110deg,
      #fff 0%,
      #d6c8ff 28%,
      #a987ff 58%,
      #7c3aed 86%,
      #fff 140%
    );

  background-clip:
    text;

  -webkit-background-clip:
    text;
}


.coop-hero-lead {
  max-width:
    720px;

  margin:
    28px 0 0;

  color:
    var(--coop-soft);

  font-size:
    clamp(
      1rem,
      1.55vw,
      1.16rem
    );

  line-height:
    1.75;
}


.coop-hero-note {
  max-width:
    670px;

  margin:
    14px 0 0;

  color:
    var(--coop-faint);

  font-size:
    .87rem;

  line-height:
    1.65;
}


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

.coop-hero-tags {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    9px;

  margin-top:
    25px;
}


.coop-hero-tags > span {
  display: inline-flex;

  align-items: center;

  gap:
    7px;

  min-height:
    34px;

  padding:
    7px 11px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    999px;

  color:
    var(--coop-soft);

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

  font-size:
    .7rem;

  font-weight:
    800;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.coop-hero-tags > span:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 35%,
      var(--coop-border)
    );

  background:
    rgba(124,58,237,.055);
}


.coop-hero-tags i {
  color:
    #bda8ff;
}


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

.coop-hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    12px;

  margin-top:
    30px;
}


.coop-hero-actions .button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;
}


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

.coop-hero-media {
  position: relative;

  min-width:
    0;

  animation:
    coopMediaEnter .8s .08s
    cubic-bezier(.16,1,.3,1)
    both;
}


.coop-video-shell {
  position: relative;

  overflow: hidden;

  aspect-ratio:
    16 / 10;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--coop-accent) 32%,
      var(--coop-border)
    );

  border-radius:
    30px;

  background:
    #000;

  box-shadow:
    0 40px 110px
    rgba(0,0,0,.42),
    0 0 80px
    rgba(124,58,237,.08),
    inset 0 1px
    rgba(255,255,255,.05);
}


.coop-video-shell::before {
  content: "";

  position: absolute;

  inset:
    12px;

  z-index:
    4;

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

  border-radius:
    21px;

  pointer-events:
    none;
}


.coop-video-shell video {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  background:
    #000;
}


.coop-video-overlay {
  position: absolute;

  inset: 0;

  z-index:
    2;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 44%,
      rgba(6,7,11,.18) 62%,
      rgba(6,7,11,.92) 100%
    ),
    linear-gradient(
      90deg,
      rgba(8,8,13,.18),
      transparent 35%
    );
}


.coop-video-status {
  position: absolute;

  left:
    25px;

  right:
    25px;

  bottom:
    23px;

  z-index:
    5;
}


.coop-video-status > span {
  display: inline-flex;

  align-items: center;

  gap:
    8px;

  margin-bottom:
    8px;

  color:
    #d4c7ff;

  font-size:
    .64rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.coop-video-status > span i {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #60f28e;

  box-shadow:
    0 0 0 5px
    rgba(96,242,142,.08);
}


.coop-video-status strong {
  display:
    block;

  color:
    #fff;

  font-size:
    clamp(
      .9rem,
      1.4vw,
      1.1rem
    );

  line-height:
    1.4;
}


/* =========================================================
   POSITION
========================================================= */

.coop-position-section {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      transparent
    );
}


/* =========================================================
   VALUE GRID
========================================================= */

.coop-value-grid {
  display: grid;

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

  gap:
    14px;
}


.coop-value-card {
  position: relative;

  min-height:
    265px;

  overflow:
    hidden;

  padding:
    24px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    23px;

  background:
    linear-gradient(
      145deg,
      rgba(124,58,237,.055),
      transparent 55%
    ),
    var(--coop-card);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


.coop-value-card:hover {
  transform:
    translateY(-4px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 32%,
      var(--coop-border)
    );

  box-shadow:
    0 24px 60px
    rgba(0,0,0,.18);
}


.coop-card-index {
  position: absolute;

  top:
    20px;

  right:
    20px;

  color:
    var(--coop-faint);

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .1em;
}


.coop-icon-box {
  display: grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--coop-accent) 28%,
      var(--coop-border)
    );

  border-radius:
    14px;

  color:
    #cbb7ff;

  background:
    rgba(124,58,237,.07);

  font-size:
    1.05rem;

  transition:
    transform .25s ease,
    background .25s ease;
}


.coop-value-card:hover
.coop-icon-box {
  transform:
    translateY(-2px)
    scale(1.04);

  background:
    rgba(124,58,237,.11);
}


.coop-value-card h3 {
  margin:
    55px 0 0;

  font-size:
    1.22rem;

  letter-spacing:
    -.03em;
}


.coop-value-card p {
  margin:
    12px 0 0;

  color:
    var(--coop-soft);

  font-size:
    .82rem;

  line-height:
    1.67;
}


/* =========================================================
   CHANNEL SECTION
========================================================= */

.coop-channel-section {
  background:
    color-mix(
      in srgb,
      var(--coop-bg-soft) 76%,
      transparent
    );
}


.coop-channel-grid {
  display: grid;

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

  gap:
    16px;
}


.coop-channel-card {
  --channel-accent:
    var(--coop-accent);

  position: relative;

  min-height:
    295px;

  overflow:
    hidden;

  padding:
    25px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    25px;

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--channel-accent) 12%,
        transparent
      ),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--channel-accent) 5%,
        transparent
      ),
      transparent 54%
    ),
    var(--coop-card);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.coop-channel-card:hover {
  transform:
    translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--channel-accent) 34%,
      var(--coop-border)
    );

  box-shadow:
    0 24px 64px
    rgba(0,0,0,.18);
}


.coop-channel-twitch {
  --channel-accent:
    var(--coop-twitch);
}


.coop-channel-instagram {
  --channel-accent:
    var(--coop-instagram);
}


.coop-channel-youtube {
  --channel-accent:
    var(--coop-youtube);
}


.coop-channel-tiktok {
  --channel-accent:
    var(--coop-tiktok);
}


.coop-channel-head {
  display: flex;

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

  gap:
    20px;
}


.coop-channel-head > span {
  color:
    color-mix(
      in srgb,
      var(--channel-accent) 72%,
      white
    );

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.coop-channel-icon {
  display: grid;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--channel-accent) 30%,
      var(--coop-border)
    );

  border-radius:
    14px;

  color:
    #fff;

  background:
    color-mix(
      in srgb,
      var(--channel-accent) 22%,
      rgba(255,255,255,.02)
    );

  font-size:
    1.12rem;
}


.coop-channel-tiktok
.coop-channel-icon {
  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      rgba(37,244,238,.16),
      rgba(8,9,12,.88) 48%,
      rgba(254,44,85,.15)
    );
}


.coop-channel-card h3 {
  margin:
    38px 0 0;

  font-size:
    clamp(
      1.55rem,
      2vw,
      2rem
    );

  letter-spacing:
    -.04em;
}


.coop-channel-card p {
  margin:
    13px 0 0;

  max-width:
    620px;

  color:
    var(--coop-soft);

  font-size:
    .86rem;

  line-height:
    1.68;
}


.coop-tag-list {
  display: flex;

  flex-wrap: wrap;

  gap:
    7px;

  margin-top:
    23px;
}


.coop-tag-list span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    5px 9px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--channel-accent) 18%,
      var(--coop-border)
    );

  border-radius:
    999px;

  color:
    var(--coop-faint);

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

  font-size:
    .63rem;

  font-weight:
    750;
}


/* =========================================================
   ACTIVATIONS
========================================================= */

.coop-activation-grid {
  display: grid;

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

  gap:
    14px;
}


.coop-activation-card {
  position: relative;

  min-height:
    235px;

  padding:
    22px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    21px;

  background:
    var(--coop-card);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}


.coop-activation-card:hover {
  transform:
    translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 26%,
      var(--coop-border)
    );

  background:
    linear-gradient(
      145deg,
      rgba(124,58,237,.055),
      transparent
    ),
    var(--coop-card);
}


.coop-activation-top {
  display: flex;

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

  gap:
    20px;
}


.coop-activation-top span {
  color:
    var(--coop-faint);

  font-size:
    .65rem;

  font-weight:
    900;

  letter-spacing:
    .1em;
}


.coop-activation-top i {
  color:
    #c6b0ff;

  font-size:
    1.05rem;
}


.coop-activation-card h3 {
  margin:
    48px 0 0;

  font-size:
    1.15rem;

  letter-spacing:
    -.025em;
}


.coop-activation-card p {
  margin:
    11px 0 0;

  color:
    var(--coop-soft);

  font-size:
    .8rem;

  line-height:
    1.65;
}


/* =========================================================
   PRODUCTION SECTION
========================================================= */

.coop-production-section {
  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 18% 48%,
      rgba(124,58,237,.12),
      transparent 32%
    ),
    color-mix(
      in srgb,
      var(--coop-bg-soft) 82%,
      transparent
    );
}


.coop-production-layout {
  display: grid;

  grid-template-columns:
    minmax(0,.72fr)
    minmax(0,1.28fr);

  align-items:
    center;

  gap:
    clamp(
      50px,
      7vw,
      100px
    );
}


.coop-production-copy {
  max-width:
    560px;
}


.coop-production-copy h2 {
  margin-top:
    12px;
}


.coop-production-line {
  display: inline-flex;

  align-items: center;

  gap:
    9px;

  margin-top:
    26px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(96,242,142,.16);

  border-radius:
    999px;

  color:
    #7df2a2;

  background:
    rgba(96,242,142,.045);

  font-size:
    .65rem;

  font-weight:
    900;

  letter-spacing:
    .1em;
}


.coop-production-grid {
  display: grid;

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

  gap:
    12px;
}


.coop-production-grid article {
  display: flex;

  align-items:
    flex-start;

  gap:
    14px;

  min-height:
    112px;

  padding:
    18px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    18px;

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

  transition:
    transform .23s ease,
    border-color .23s ease,
    background .23s ease;
}


.coop-production-grid article:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 25%,
      var(--coop-border)
    );

  background:
    rgba(255,255,255,.035);
}


.coop-production-grid article > i {
  flex:
    0 0 auto;

  width:
    36px;

  margin-top:
    2px;

  color:
    #bfa9ff;

  font-size:
    1rem;

  text-align:
    center;
}


.coop-production-grid strong {
  display:
    block;

  font-size:
    .87rem;
}


.coop-production-grid span {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--coop-faint);

  font-size:
    .7rem;

  line-height:
    1.5;
}


/* =========================================================
   PROCESS
========================================================= */

.coop-process-grid {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:
    0;

  margin-top:
    50px;
}


.coop-process-step {
  position: relative;

  min-width:
    0;

  padding:
    0 20px 0 0;
}


.coop-process-number {
  display:
    block;

  margin-bottom:
    16px;

  color:
    #bca5ff;

  font-size:
    .66rem;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.coop-process-dot {
  position: relative;

  z-index:
    3;

  width:
    13px;

  height:
    13px;

  border:
    3px solid
    var(--coop-bg);

  border-radius:
    50%;

  background:
    var(--coop-accent);

  box-shadow:
    0 0 0 4px
    rgba(124,58,237,.16);
}


.coop-process-connector {
  position: absolute;

  top:
    38px;

  left:
    13px;

  right:
    -1px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(124,58,237,.58),
      var(--coop-border)
    );
}


.coop-process-step h3 {
  margin:
    26px 0 0;

  font-size:
    1rem;

  letter-spacing:
    -.02em;
}


.coop-process-step p {
  margin:
    10px 0 0;

  color:
    var(--coop-soft);

  font-size:
    .76rem;

  line-height:
    1.6;
}


/* =========================================================
   SAFETY
========================================================= */

.coop-safety-section {
  background:
    color-mix(
      in srgb,
      var(--coop-bg-soft) 72%,
      transparent
    );
}


.coop-safety-shell {
  position: relative;

  overflow:
    hidden;

  padding:
    clamp(
      28px,
      5vw,
      52px
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--coop-accent) 25%,
      var(--coop-border)
    );

  border-radius:
    30px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(124,58,237,.12),
      transparent 34%
    ),
    var(--coop-card-strong);

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


.coop-safety-shell
.coop-section-heading {
  margin-bottom:
    32px;
}


.coop-safety-grid {
  display: grid;

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

  gap:
    13px;
}


.coop-safety-grid article {
  padding:
    20px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.022);
}


.coop-safety-icon {
  display: grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  border-radius:
    12px;

  color:
    #cbb7ff;

  background:
    rgba(124,58,237,.08);
}


.coop-safety-grid h3 {
  margin:
    22px 0 0;

  font-size:
    1rem;
}


.coop-safety-grid p {
  margin:
    10px 0 0;

  color:
    var(--coop-soft);

  font-size:
    .77rem;

  line-height:
    1.62;
}


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

.coop-packages-section {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.01),
      transparent
    );
}


.coop-package-grid {
  display: grid;

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

  gap:
    16px;
}


.coop-package-card {
  position: relative;

  display: flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    455px;

  overflow:
    hidden;

  padding:
    23px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent 48%
    ),
    var(--coop-card);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.coop-package-card:hover {
  transform:
    translateY(-4px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 32%,
      var(--coop-border)
    );

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


.coop-package-card.is-featured {
  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 52%,
      var(--coop-border)
    );

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(124,58,237,.16),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(124,58,237,.075),
      transparent 55%
    ),
    var(--coop-card);
}


.coop-package-featured {
  position: absolute;

  top:
    0;

  right:
    22px;

  padding:
    7px 10px;

  border-radius:
    0 0 10px 10px;

  color:
    #fff;

  background:
    var(--coop-accent);

  font-size:
    .58rem;

  font-weight:
    900;

  letter-spacing:
    .11em;
}


.coop-package-head {
  display: flex;

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

  gap:
    20px;
}


.coop-package-icon {
  display: grid;

  place-items:
    center;

  width:
    43px;

  height:
    43px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--coop-accent) 30%,
      var(--coop-border)
    );

  border-radius:
    13px;

  color:
    #c8b5ff;

  background:
    rgba(124,58,237,.07);
}


.coop-package-head > span {
  color:
    var(--coop-faint);

  font-size:
    .62rem;

  font-weight:
    900;
}


.coop-package-card h3 {
  margin:
    30px 0 0;

  font-size:
    1.34rem;

  letter-spacing:
    -.035em;
}


.coop-package-subtitle {
  min-height:
    42px;

  margin:
    8px 0 0;

  color:
    var(--coop-soft);

  font-size:
    .77rem;

  line-height:
    1.55;
}


.coop-package-card ul {
  display: grid;

  gap:
    10px;

  margin:
    23px 0 24px;

  padding:
    0;

  list-style:
    none;
}


.coop-package-card li {
  display: grid;

  grid-template-columns:
    17px
    minmax(0,1fr);

  gap:
    9px;

  align-items:
    start;

  color:
    var(--coop-soft);

  font-size:
    .72rem;

  line-height:
    1.5;
}


.coop-package-card li i {
  margin-top:
    3px;

  color:
    #9f82ff;

  font-size:
    .65rem;
}


.coop-package-action {
  display: flex;

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

  gap:
    14px;

  width:
    100%;

  margin-top:
    auto;

  padding:
    12px 14px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    12px;

  color:
    var(--coop-text);

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

  font: inherit;

  font-size:
    .72rem;

  font-weight:
    850;

  cursor:
    pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.coop-package-action:hover {
  transform:
    translateY(-1px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 42%,
      var(--coop-border)
    );

  background:
    rgba(124,58,237,.07);
}


.coop-package-action i {
  color:
    #b69cff;
}


/* =========================================================
   BUNDLES
========================================================= */

.coop-bundle-section {
  background:
    color-mix(
      in srgb,
      var(--coop-bg-soft) 74%,
      transparent
    );
}


.coop-bundle-grid {
  display: grid;

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

  gap:
    15px;
}


.coop-bundle-card {
  min-height:
    330px;

  padding:
    23px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    22px;

  background:
    var(--coop-card);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.coop-bundle-card:hover {
  transform:
    translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 30%,
      var(--coop-border)
    );

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.16);
}


.coop-bundle-icon {
  display: grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  border-radius:
    13px;

  color:
    #cbb6ff;

  background:
    rgba(124,58,237,.08);
}


.coop-bundle-card h3 {
  margin:
    30px 0 0;

  font-size:
    1.18rem;
}


.coop-bundle-card > p {
  margin:
    10px 0 0;

  color:
    var(--coop-soft);

  font-size:
    .77rem;

  line-height:
    1.58;
}


.coop-bundle-card ul {
  display: grid;

  gap:
    9px;

  margin:
    21px 0 0;

  padding:
    0;

  list-style:
    none;
}


.coop-bundle-card li {
  display: grid;

  grid-template-columns:
    16px
    1fr;

  gap:
    8px;

  color:
    var(--coop-faint);

  font-size:
    .7rem;

  line-height:
    1.45;
}


.coop-bundle-card li i {
  margin-top:
    3px;

  color:
    #a789ff;

  font-size:
    .62rem;
}


/* =========================================================
   ADD ONS
========================================================= */

.coop-addon-grid {
  display: grid;

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

  gap:
    12px;
}


.coop-addon-card {
  display: flex;

  align-items:
    flex-start;

  gap:
    14px;

  min-height:
    125px;

  padding:
    18px;

  border:
    1px solid
    var(--coop-border);

  border-radius:
    18px;

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

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease;
}


.coop-addon-card:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--coop-accent) 28%,
      var(--coop-border)
    );

  background:
    rgba(255,255,255,.034);
}


.coop-addon-card > i {
  flex:
    0 0 auto;

  width:
    34px;

  margin-top:
    3px;

  color:
    #bca5ff;

  font-size:
    1rem;

  text-align:
    center;
}


.coop-addon-card h3 {
  margin:
    0;

  font-size:
    .92rem;
}


.coop-addon-card p {
  margin:
    6px 0 0;

  color:
    var(--coop-faint);

  font-size:
    .7rem;

  line-height:
    1.5;
}


/* =========================================================
   REQUIREMENTS
========================================================= */

.coop-requirements-section {
  background:
    color-mix(
      in srgb,
      var(--coop-bg-soft) 72%,
      transparent
    );
}


.coop-requirements-layout {
  display: grid;

  grid-template-columns:
    minmax(300px,.65fr)
    minmax(0,1.35fr);

  gap:
    clamp(
      50px,
      7vw,
      100px
    );

  align-items:
    start;
}


.coop-requirements-heading {
  position:
    sticky;

  top:
    110px;
}


.coop-requirements-heading h2 {
  margin-top:
    12px;
}


.coop-requirements-list {
  display:
    grid;
}


.coop-requirements-list article {
  display: grid;

  grid-template-columns:
    58px
    minmax(0,1fr);

  gap:
    18px;

  padding:
    23px 0;

  border-bottom:
    1px solid
    var(--coop-border);
}


.coop-requirements-list article:first-child {
  padding-top:
    0;
}


.coop-requirements-list article:last-child {
  border-bottom:
    0;
}


.coop-requirements-list article > span {
  color:
    #a98cff;

  font-size:
    .66rem;

  font-weight:
    900;

  letter-spacing:
    .1em;
}


.coop-requirements-list strong {
  display:
    block;

  font-size:
    .94rem;
}


.coop-requirements-list p {
  margin:
    7px 0 0;

  color:
    var(--coop-soft);

  font-size:
    .75rem;

  line-height:
    1.6;
}


/* =========================================================
   FINAL CTA
========================================================= */

.coop-final-section {
  position:
    relative;

  padding:
    88px 0 100px;

  border-top:
    1px solid
    var(--coop-border);
}


.coop-final-card {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:
    center;

  gap:
    50px;

  overflow:
    hidden;

  padding:
    clamp(
      32px,
      5vw,
      58px
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--coop-accent) 36%,
      var(--coop-border)
    );

  border-radius:
    32px;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(124,58,237,.16),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(124,58,237,.08),
      transparent 56%
    ),
    var(--coop-card-strong);

  box-shadow:
    0 38px 100px
    rgba(0,0,0,.24);
}


.coop-final-grid {
  position:
    absolute;

  inset:
    0;

  opacity:
    .18;

  background-image:
    linear-gradient(
      var(--coop-border) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--coop-border) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent 80%
    );
}


.coop-final-glow {
  position:
    absolute;

  right:
    -100px;

  top:
    -120px;

  width:
    360px;

  aspect-ratio:
    1;

  border-radius:
    50%;

  background:
    rgba(124,58,237,.18);

  filter:
    blur(45px);
}


.coop-final-copy,
.coop-final-actions {
  position:
    relative;

  z-index:
    2;
}


.coop-final-copy {
  max-width:
    820px;
}


.coop-final-copy h2 {
  margin-top:
    12px;
}


.coop-final-actions {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  min-width:
    230px;
}


.coop-final-actions .button {
  display:
    flex;

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

  gap:
    9px;

  width:
    100%;
}


/* =========================================================
   ENTER ANIMATIONS
========================================================= */

.coop-hero-copy {
  animation:
    coopHeroEnter .75s
    cubic-bezier(.16,1,.3,1)
    both;
}


.coop-value-card,
.coop-channel-card,
.coop-activation-card,
.coop-package-card,
.coop-bundle-card,
.coop-addon-card {
  animation:
    coopCardEnter .65s
    cubic-bezier(.16,1,.3,1)
    both;
}


.coop-value-card:nth-child(2),
.coop-channel-card:nth-child(2),
.coop-activation-card:nth-child(2),
.coop-package-card:nth-child(2),
.coop-bundle-card:nth-child(2),
.coop-addon-card:nth-child(2) {
  animation-delay:
    .05s;
}


.coop-value-card:nth-child(3),
.coop-channel-card:nth-child(3),
.coop-activation-card:nth-child(3),
.coop-package-card:nth-child(3),
.coop-bundle-card:nth-child(3),
.coop-addon-card:nth-child(3) {
  animation-delay:
    .1s;
}


.coop-value-card:nth-child(4),
.coop-channel-card:nth-child(4),
.coop-activation-card:nth-child(4),
.coop-package-card:nth-child(4),
.coop-addon-card:nth-child(4) {
  animation-delay:
    .15s;
}


.coop-activation-card:nth-child(5),
.coop-package-card:nth-child(5),
.coop-addon-card:nth-child(5) {
  animation-delay:
    .2s;
}


.coop-activation-card:nth-child(6),
.coop-package-card:nth-child(6),
.coop-addon-card:nth-child(6) {
  animation-delay:
    .25s;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes coopHeroEnter {

  from {
    opacity:
      0;

    transform:
      translateY(20px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


@keyframes coopMediaEnter {

  from {
    opacity:
      0;

    transform:
      translateY(18px)
      scale(.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes coopCardEnter {

  from {
    opacity:
      0;

    transform:
      translateY(14px)
      scale(.99);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   RESPONSIVE · 1200
========================================================= */

@media (max-width: 1200px) {

  .coop-value-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .coop-package-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .coop-addon-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


/* =========================================================
   RESPONSIVE · 1100
========================================================= */

@media (max-width: 1100px) {

  .coop-hero-inner {
    grid-template-columns:
      1fr;
  }


  .coop-hero-copy {
    max-width:
      850px;
  }


  .coop-hero-media {
    max-width:
      850px;
  }


  .coop-section-heading-split {
    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .coop-production-layout {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .coop-production-copy {
    max-width:
      760px;
  }


  .coop-requirements-layout {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }


  .coop-requirements-heading {
    position:
      static;

    max-width:
      760px;
  }

}


/* =========================================================
   RESPONSIVE · 900
========================================================= */

@media (max-width: 900px) {

  .coop-section {
    padding:
      70px 0;
  }


  .coop-channel-grid,
  .coop-activation-grid,
  .coop-bundle-grid,
  .coop-safety-grid {
    grid-template-columns:
      1fr;
  }


  .coop-process-grid {
    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .coop-process-step {
    min-height:
      145px;

    padding:
      0 0 24px 50px;
  }


  .coop-process-number {
    position:
      absolute;

    top:
      0;

    left:
      0;
  }


  .coop-process-dot {
    position:
      absolute;

    top:
      26px;

    left:
      0;
  }


  .coop-process-connector {
    top:
      38px;

    bottom:
      0;

    left:
      6px;

    right:
      auto;

    width:
      1px;

    height:
      auto;

    background:
      linear-gradient(
        180deg,
        rgba(124,58,237,.58),
        var(--coop-border)
      );
  }


  .coop-process-step h3 {
    margin:
      0;
  }


  .coop-final-card {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }


  .coop-final-actions {
    flex-direction:
      row;

    min-width:
      0;
  }

}


/* =========================================================
   RESPONSIVE · 720
========================================================= */

@media (max-width: 720px) {

  .coop-hero {
    min-height:
      0;

    padding:
      65px 0 58px;
  }


  .coop-hero h1 {
    font-size:
      clamp(
        3rem,
        14vw,
        5.2rem
      );
  }


  .coop-value-grid,
  .coop-package-grid,
  .coop-addon-grid,
  .coop-production-grid {
    grid-template-columns:
      1fr;
  }


  .coop-package-card {
    min-height:
      0;
  }


  .coop-production-grid article {
    min-height:
      0;
  }

}


/* =========================================================
   RESPONSIVE · 620
========================================================= */

@media (max-width: 620px) {

  .coop-hero-top {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .coop-language-switch {
    margin-top:
      2px;
  }


  .coop-hero-actions {
    width:
      100%;
  }


  .coop-hero-actions .button {
    justify-content:
      center;

    width:
      100%;
  }


  .coop-video-shell {
    border-radius:
      22px;
  }


  .coop-video-shell::before {
    inset:
      8px;

    border-radius:
      16px;
  }


  .coop-video-status {
    left:
      18px;

    right:
      18px;

    bottom:
      17px;
  }


  .coop-value-card,
  .coop-channel-card,
  .coop-activation-card,
  .coop-package-card,
  .coop-bundle-card {
    padding:
      20px;
  }


  .coop-safety-shell {
    padding:
      22px;

    border-radius:
      24px;
  }


  .coop-requirements-list article {
    grid-template-columns:
      42px
      1fr;

    gap:
      12px;
  }


  .coop-final-section {
    padding:
      65px 0 78px;
  }


  .coop-final-card {
    padding:
      26px;

    border-radius:
      25px;
  }


  .coop-final-actions {
    flex-direction:
      column;
  }

}


/* =========================================================
   RESPONSIVE · 420
========================================================= */

@media (max-width: 420px) {

  .coop-hero {
    padding-top:
      52px;
  }


  .coop-hero h1 {
    font-size:
      3.15rem;
  }


  .coop-hero-tags {
    gap:
      7px;
  }


  .coop-hero-tags > span {
    min-height:
      31px;

    padding:
      6px 9px;

    font-size:
      .64rem;
  }


  .coop-channel-card,
  .coop-package-card,
  .coop-value-card {
    border-radius:
      20px;
  }


  .coop-section-heading h2,
  .coop-production-copy h2,
  .coop-requirements-heading h2,
  .coop-final-copy h2 {
    font-size:
      2.15rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .coop-hero-copy,
  .coop-hero-media,
  .coop-value-card,
  .coop-channel-card,
  .coop-activation-card,
  .coop-package-card,
  .coop-bundle-card,
  .coop-addon-card {
    animation:
      none !important;
  }


  .coop-value-card,
  .coop-channel-card,
  .coop-activation-card,
  .coop-production-grid article,
  .coop-package-card,
  .coop-package-action,
  .coop-bundle-card,
  .coop-addon-card,
  .coop-language-link,
  .coop-hero-tags > span {
    transition:
      none !important;
  }

}