@media (min-width: 1024px) {
  .site-header { display: flex; justify-content: center; padding-top: 32px; }
  .brand img { width: 193px; }
  .hero { grid-template-columns: minmax(0, .56fr) minmax(0, .44fr); min-height: 550px; }
  .hero-copy { max-width: 720px; }
  .hero h1 span { white-space: nowrap; }
  .figma-blocks { padding-top: 0; }
}

@media (min-width: 641px) and (max-width: 1023px) {
  body { --tw: min(100vw, 768px); }
  .site-header, .hero, .tablet-programs, .community-section, .watch-section,
  .social-section, .signup-band, .site-footer { width: var(--tw); margin-inline: auto; }
  .site-header { position: relative; height: calc(var(--tw) * .15625); padding: 0; }
  .brand { position: absolute; top: calc(var(--tw) * .035); left: 50%; width: calc(var(--tw) * .2604); transform: translateX(-50%); }
  .brand img { width: 100%; }

  .hero { position: relative; display: block; height: calc(var(--tw) * .6198); min-height: 0; overflow: hidden; padding: 0; }
  .hero-copy { position: static; }
  .hero h1 { position: absolute; top: calc(var(--tw) * .047); left: 4.1667%; z-index: 2; width: 45.6%; font-size: calc(var(--tw) * .0521); line-height: 1.04; }
  .hero h1 strong { margin-top: calc(var(--tw) * .018); }
  .hero-lead { position: absolute; top: calc(var(--tw) * .2917); left: 4.1667%; z-index: 2; width: 37%; margin: 0; font-size: calc(var(--tw) * .0182); line-height: 1.45; }
  .hero-note { position: absolute; top: calc(var(--tw) * .3646); left: 4.1667%; z-index: 2; margin: 0; font-size: calc(var(--tw) * .0143); }
  .hero .button { position: absolute; top: calc(var(--tw) * .3984); left: 4.1667%; z-index: 3; width: calc(var(--tw) * .2096); min-width: 0; min-height: calc(var(--tw) * .0651); margin: 0; border-radius: calc(var(--tw) * .026); font-size: calc(var(--tw) * .0169); }
  .hero-media { position: absolute; top: calc(var(--tw) * -.044); left: 22.92%; width: 77.08%; }
  .hero-media::before { content: none; }
  .hero-media img, .hero-media picture img { width: 100%; max-width: none; margin: 0; }

  .figma-blocks, .mobile-programs { display: none; }
  .tablet-programs { position: relative; display: block; height: calc(var(--tw) * .7747); overflow: hidden; }
  .tablet-program, .tablet-program img, .tablet-time { position: absolute; }
  .tablet-daylight { inset: 0 0 auto; height: calc(var(--tw) * .401); }
  .tablet-daylight .tablet-glow { top: calc(var(--tw) * -.06); left: 52%; width: 47.92%; }
  .tablet-daylight .tablet-program-photo { top: 0; left: 4.1667%; z-index: 1; width: 56.38%; }
  .tablet-daylight .tablet-program-text { top: calc(var(--tw) * .022); left: 63.15%; z-index: 2; width: 32.68%; }
  .tablet-after { top: calc(var(--tw) * .401); left: 0; width: 100%; height: calc(var(--tw) * .3737); }
  .tablet-after .tablet-glow { top: calc(var(--tw) * -.075); left: 0; width: 47.14%; }
  .tablet-after .tablet-program-text { top: calc(var(--tw) * .0234); left: 4.1667%; z-index: 2; width: 38.8%; }
  .tablet-after .tablet-program-photo { top: 0; left: 39.45%; z-index: 1; width: 56.38%; }
  .tablet-time { z-index: 3; display: grid; width: 22.66%; height: calc(var(--tw) * .0521); place-items: center; border-radius: calc(var(--tw) * .0195); color: #fff; font-size: calc(var(--tw) * .013); font-weight: 700; white-space: nowrap; }
  .tablet-time-daylight { top: calc(var(--tw) * .0143); left: 6.12%; background: linear-gradient(90deg, #ffe000, #28df4a); }
  .tablet-time-after { top: calc(var(--tw) * .0195); left: 70.31%; background: linear-gradient(90deg, #9857ff, #4b238d); }

  .community-section { position: relative; height: calc(var(--tw) * .6406); overflow: hidden; padding: 0; }
  .community-section::before { content: none; }
  .team-photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: auto; margin: 0; }
  .team-photo img { width: 100%; }
  .community-copy { position: relative; z-index: 2; max-width: none; padding-top: calc(var(--tw) * .064); }
  .community-copy h2 { font-size: calc(var(--tw) * .026); }
  .community-copy p { max-width: 72%; margin: calc(var(--tw) * .025) auto 0; font-size: calc(var(--tw) * .0169); line-height: 1.55; }
  .support-band { position: relative; display: block; width: var(--tw); height: calc(var(--tw) * .2604); min-height: 0; margin: 0 auto; padding: 0; }
  .support-icon { position: absolute; top: 22%; left: 16.4%; width: 8%; height: 55%; }
  .support-copy { position: absolute; top: 25%; left: 27.6%; width: 35%; }
  .support-copy h2 { font-size: calc(var(--tw) * .026); }
  .support-copy p { margin-top: calc(var(--tw) * .01); font-size: calc(var(--tw) * .016); line-height: 1.45; }
  .support-button { position: absolute; top: 43%; left: 63.15%; width: 20.96%; min-width: 0; min-height: calc(var(--tw) * .0651); }

  .watch-section { position: relative; height: calc(var(--tw) * .56); padding: 0; }
  .watch-section > .eyebrow.watch { position: absolute; top: 12%; left: 0; width: 100%; margin: 0; }
  .device-grid { position: absolute; top: 21%; left: 26.04%; display: block; width: 47.92%; height: 69%; margin: 0; background: url("kepek/tablet/group40.png") center top / 100% auto no-repeat; }
  .device-card { display: none; }

  .social-section { position: relative; height: calc(var(--tw) * .39); padding: 0; }
  .social-section > .eyebrow.social { margin: 0; }
  .social-section h2 { margin-top: calc(var(--tw) * .03); font-size: calc(var(--tw) * .0276); }
  .social-section > p:not(.eyebrow) { margin-top: calc(var(--tw) * .034); font-size: calc(var(--tw) * .0169); }
  .social-icons { width: 50.52%; height: calc(var(--tw) * .0924); margin: calc(var(--tw) * .04) auto 0; background: url("kepek/tablet/group25.png") center / contain no-repeat; }
  .social-icons img { display: none; }

  .signup-band { position: relative; display: block; height: calc(var(--tw) * .34375); padding: 0; }
  .signup-logo { position: absolute; top: 28%; left: 16.3%; width: 20%; }
  .signup-logo img { width: 100%; }
  .signup-copy { position: absolute; top: 27%; left: 39.6%; width: 23%; }
  .signup-copy h2 { font-size: calc(var(--tw) * .0182); }
  .signup-copy p { margin-top: calc(var(--tw) * .026); font-size: calc(var(--tw) * .0169); line-height: 1.5; }
  .signup-form { position: absolute; top: 38%; left: 63.15%; display: block; width: 20.96%; }
  .signup-form input, .signup-form .form-message { display: none; }
  .signup-form .button { width: 100%; min-width: 0; min-height: calc(var(--tw) * .0651); }
}

.button {
  min-width: 184px;
  min-height: 56px;
  padding: 0 32px;
  font-size: 14px;
}

.support-button {
  min-width: 176px;
  min-height: 54px;
  padding: 0 28px;
  font-size: 14px;
}

.footer-links a {
  padding: 11px 18px;
  font-size: 12px;
}

.signup-band {
  gap: 48px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.signup-logo img {
  width: 150px;
}

.signup-copy h2 {
  font-size: 28px;
}

.signup-copy p {
  max-width: 460px;
  font-size: 16px;
}

.signup-form {
  grid-template-columns: minmax(230px, 320px) auto;
  gap: 16px;
}

.signup-form input {
  min-height: 54px;
  padding: 0 22px;
  font-size: 15px;
}

.signup-form .button {
  min-width: 188px;
  min-height: 58px;
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, .51fr) minmax(0, .59fr);
    min-height: 610px;
  }

  .hero-media {
    width: min(48vw, 620px);
    margin-left: clamp(-64px, -3.8vw, -34px);
  }

  .hero-media img,
  .hero-media picture img {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .hero {
    height: calc(var(--tw) * .68);
  }

  .hero h1 {
    width: 49%;
  }

  .hero-lead {
    top: calc(var(--tw) * .315);
    width: 42%;
  }

  .hero-note {
    top: calc(var(--tw) * .395);
  }

  .hero .button {
    top: calc(var(--tw) * .438);
    width: calc(var(--tw) * .235);
    min-height: calc(var(--tw) * .073);
    font-size: calc(var(--tw) * .018);
  }

  .hero-media {
    top: calc(var(--tw) * -.015);
    left: 18.5%;
    width: 84%;
  }

  .signup-band {
    height: calc(var(--tw) * .39);
  }

  .signup-logo {
    top: 25%;
    width: 22%;
  }

  .signup-copy {
    top: 24%;
    width: 25%;
  }

  .signup-copy h2 {
    font-size: calc(var(--tw) * .022);
  }

  .signup-copy p {
    font-size: calc(var(--tw) * .018);
  }

  .signup-form {
    top: 34%;
    width: 24%;
  }

  .signup-form .button {
    min-height: calc(var(--tw) * .078);
    font-size: calc(var(--tw) * .018);
  }

  .support-button {
    width: 23.5%;
    min-height: calc(var(--tw) * .073);
    font-size: calc(var(--tw) * .017);
  }
}

@media (max-width: 860px) {
  .button {
    min-width: 148px;
    min-height: 44px;
    padding: 0 22px;
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .hero .button {
    top: 580px;
    left: 50%;
    width: 178px;
    min-width: 178px;
    height: 56px;
    min-height: 56px;
    transform: translateX(-50%);
    border-radius: 19px;
    font-size: 15px;
  }

  .support-button {
    width: 188px;
    min-width: 188px;
    height: 60px;
    min-height: 60px;
    font-size: 14px;
  }

  .signup-band {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    padding: 34px 22px;
  }

  .signup-logo img {
    width: 92px;
  }

  .signup-copy h2 {
    font-size: 19px;
  }

  .signup-copy p {
    font-size: 12px;
    line-height: 1.5;
  }

  .signup-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 12px;
  }

  .signup-form input {
    min-height: 52px;
    font-size: 14px;
  }

  .signup-form .button {
    width: 100%;
    min-height: 58px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .mobile-programs {
    display: flex;
    height: auto;
    overflow: visible;
    flex-direction: column;
    padding: 27px 0 0;
  }

  .mobile-programs::before,
  .mobile-programs::after {
    content: none;
  }

  .mobile-program {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .mobile-daylight,
  .mobile-daylight-copy {
    background:
      radial-gradient(circle at 68% 48%, rgba(25, 236, 69, 0.48), rgba(25, 236, 69, 0.14) 30%, rgba(0, 0, 0, 0) 66%),
      #050505;
  }

  .mobile-after,
  .mobile-after-copy {
    background:
      radial-gradient(circle at 31% 31%, rgba(143, 72, 255, 0.42), rgba(143, 72, 255, 0.12) 35%, rgba(0, 0, 0, 0) 68%),
      #050505;
  }

  .mobile-program-visual,
  .mobile-daylight-visual,
  .mobile-after-visual {
    position: relative;
    inset: auto;
    width: calc(100% - 44px);
    height: auto;
    margin: 0 22px;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
  }

  .mobile-daylight-visual {
    aspect-ratio: 312 / 216;
  }

  .mobile-after-visual {
    width: calc(100% - 16px);
    aspect-ratio: 1372 / 904;
    margin-inline: 8px;
  }

  .mobile-after-visual::before {
    content: none;
  }

  .mobile-program-visual img,
  .mobile-program-visual picture,
  .mobile-program-visual picture img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  .mobile-after-badge {
    top: 12px;
    right: 12px;
    display: grid;
    width: 158px;
    height: 38px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(90deg, #9857ff 0%, #6d35df 55%, #4a1d9a 100%);
    padding: 0;
    font-size: 9px;
    letter-spacing: 0;
    box-shadow: none;
  }

  .mobile-program-copy {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 14px 22px 30px;
  }

  .mobile-after-copy {
    padding-top: 18px;
    padding-bottom: 32px;
  }

  .mobile-program-label,
  .mobile-program-copy h2,
  .mobile-program-copy p:not(.mobile-program-label) {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .mobile-program-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 18px;
    text-transform: uppercase;
  }

  .mobile-daylight-copy .mobile-program-label {
    color: #19ec45;
  }

  .mobile-after-copy .mobile-program-label {
    color: #8f48ff;
  }

  .mobile-program-copy h2 {
    margin-top: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 27px;
  }

  .mobile-program-copy p:not(.mobile-program-label) {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
  }

  .community-section {
    position: relative;
    display: flex;
    height: auto;
    overflow: hidden;
    flex-direction: column;
    background:
      radial-gradient(circle at 18% 76%, rgba(92, 35, 255, 0.42), rgba(92, 35, 255, 0.13) 34%, rgba(92, 35, 255, 0) 64%),
      radial-gradient(circle at 86% 78%, rgba(255, 48, 0, 0.34), rgba(255, 48, 0, 0.1) 36%, rgba(255, 48, 0, 0) 68%),
      #050505;
  }

  .community-copy {
    position: relative;
    inset: auto;
    display: flex;
    max-width: none;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 25px 18px 16px;
    text-align: center;
  }

  .community-copy .eyebrow {
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    color: #ffd400;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
  }

  .community-copy h2 {
    position: static;
    inset: auto;
    width: auto;
    margin: 8px 0 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 27px;
  }

  .community-copy > p:not(.eyebrow) {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 319px;
    margin: 11px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
  }

  .community-copy .text-link {
    position: relative;
    inset: auto;
    display: inline-flex;
    width: auto;
    margin: 20px 0 0;
    color: #ffd400;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
  }

  .community-copy .text-link::before {
    content: none;
  }

  .team-photo {
    position: relative;
    inset: auto;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: none;
    height: 162px;
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
  }

  .team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center 43%;
  }

  .support-band {
    position: relative;
    display: grid;
    width: min(355px, 100%);
    height: auto;
    min-height: 0;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px 8px;
    margin-inline: auto;
    padding: 40px 14px 20px 28px;
    background: linear-gradient(105deg, #ff3b1f 0%, #e824d7 34%, #1acfff 72%, #18ec82 100%);
    box-sizing: border-box;
  }

  .support-icon {
    position: static;
    display: grid;
    width: 64px;
    height: auto;
    min-height: 98px;
    place-items: start center;
  }

  .support-icon img {
    width: 64px;
  }

  .support-copy {
    position: static;
    width: auto;
    min-width: 0;
  }

  .support-copy h2 {
    width: auto;
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 27px;
    white-space: normal;
  }

  .support-copy p {
    width: auto;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
  }

  .support-button {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
    width: 205px;
    min-width: 205px;
    height: 64px;
    min-height: 64px;
    margin: 0;
    border-width: 3px;
    border-radius: 18px;
    transform: none;
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .social-section,
  .signup-band,
  .site-footer {
    width: min(355px, 100%);
    margin-inline: auto;
    box-sizing: border-box;
  }

  .social-section {
    display: flex;
    height: auto;
    min-height: 276px;
    flex-direction: column;
    align-items: center;
    padding: 31px 17px 39px;
    background: #050505;
    text-align: center;
  }

  .social-section > .eyebrow.social,
  .social-section h2,
  .social-section > p:not(.eyebrow),
  .social-icons {
    position: static;
    display: block;
    inset: auto;
    width: auto;
    margin: 0;
  }

  .social-section > .eyebrow.social {
    color: #ff8b00;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    text-transform: uppercase;
  }

  .social-section h2 {
    margin-top: 24px;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 23px;
  }

  .social-section > p:not(.eyebrow) {
    width: 100%;
    margin-top: 27px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
  }

  .social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    height: auto;
    margin-top: 21px;
    background: none;
  }

  .social-icons img {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
  }

  .signup-band {
    position: relative;
    display: grid;
    min-height: 214px;
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-areas:
      "logo copy"
      "logo form";
    column-gap: 20px;
    align-items: center;
    padding: 43px 24px 42px 26px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
      #1b1b1b;
  }

  .signup-logo,
  .signup-copy,
  .signup-form {
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
  }

  .signup-logo {
    grid-area: logo;
    align-self: center;
  }

  .signup-logo img {
    display: block;
    width: 122px;
    height: auto;
    margin: 0;
    content: url("kepek/mobil/logo1.png");
  }

  .signup-copy {
    grid-area: copy;
    align-self: end;
    padding: 0;
  }

  .signup-copy h2 {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
  }

  .signup-copy p {
    width: 100%;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
  }

  .signup-form {
    display: flex;
    grid-area: form;
    align-self: start;
    padding-top: 18px;
  }

  .signup-form input,
  .signup-form .form-message {
    display: none;
  }

  .signup-form .button {
    width: 132px;
    min-width: 132px;
    height: 52px;
    min-height: 52px;
    padding: 0 17px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
  }

  .site-footer {
    position: relative;
    display: flex;
    height: auto;
    min-height: 289px;
    flex-direction: column;
    align-items: center;
    padding: 59px 24px 56px;
    border: 0;
    border-bottom: 10px solid transparent;
    border-image: linear-gradient(90deg, #ff1f00, #ff8b00, #ffe600, #19ec45, #19d4ff, #9857ff) 1;
    background: #050505;
    text-align: center;
  }

  .site-footer img,
  .site-footer p,
  .site-footer small,
  .site-footer .footer-links {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    margin: 0;
  }

  .site-footer img {
    width: 118px;
    height: auto;
    content: url("kepek/mobil/logo1.png");
  }

  .site-footer p {
    max-width: 214px;
    margin-top: 38px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
  }

  .site-footer .footer-links {
    display: none;
  }

  .site-footer small {
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    line-height: 15px;
  }
}