.registration-page{min-height:100vh;background:var(--charcoal,#111516);color:var(--ivory,#f7f5ef);overflow:hidden;position:relative;}
    .registration-page::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(247,245,239,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,239,.035) 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 90%);}
    .registration-main{min-height:100vh;display:grid;place-items:center;padding:140px 30px 70px;position:relative;}
    .registration-content{width:min(1200px,100%);text-align:center;position:relative;z-index:1;}
    .registration-marker{display:flex;justify-content:center;align-items:center;gap:14px;color:rgba(247,245,239,.55);
      /* font:10px 'JetBrains Mono',monospace; */
      letter-spacing:.18em;margin-bottom:28px;}
    .registration-marker i{display:block;width:46px;height:1px;background:var(--yellow,#ffd100);}
    .registration-content h1{margin:0;text-transform:uppercase;
      font:800 clamp(54px,10vw,150px)/.82 'Outfit',sans-serif;letter-spacing:-.07em;}
    .registration-content h1 span{display:block;color:var(--yellow,#ffd100);font-weight:300;}
    .registration-sub{margin:38px auto 0;max-width:620px;color:rgba(247,245,239,.6);font:13px/1.8 'Plus Jakarta Sans',sans-serif;}
    .registration-date{margin-top:34px;color:var(--ivory,#f7f5ef);font:600 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;}
    .registration-back{display:inline-flex;align-items:center;gap:12px;margin-top:42px;padding:13px 18px;border:1px solid rgba(247,245,239,.24);color:var(--ivory,#f7f5ef);font:10px 'JetBrains Mono',monospace;letter-spacing:.12em;transition:.3s;}
    .registration-back:hover{color:var(--yellow,#ffd100);border-color:var(--yellow,#ffd100);gap:18px;}
    .registration-shape{position:absolute;left:50%;top:50%;width:min(42vw,520px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(255,209,0,.13);pointer-events:none;}
    .registration-shape::before,.registration-shape::after{content:"";position:absolute;inset:15%;border:1px solid rgba(0,168,232,.1);}
    .registration-shape::after{inset:30%;border-color:rgba(224,26,79,.1);}
    
/* =========================================================
   VIEWPORT-FIT RESPONSIVE SYSTEM
   ========================================================= */

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body.registration-page {
  width: 100%;
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

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

.registration-page {
  width: 100%;
  min-width: 0;
}

.registration-main,
.registration-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* TABLET / MOBILE */
@media screen and (max-width: 600px) {
  .registration-main {
    min-height: 100svh;
    padding: 110px 18px 40px;
    overflow: hidden;
  }

  .registration-content {
    text-align: center;
  }

  .registration-marker {
    width: 100%;
    gap: 9px;
    margin-bottom: 22px;
    font-size: 8px;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  .registration-marker i {
    width: 28px;
    flex: 0 0 28px;
  }

  .registration-content h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(42px, 13vw, 78px);
    line-height: .86;
    letter-spacing: -.055em;
    overflow-wrap: normal;
  }

  .registration-sub {
    width: min(100%, 420px);
    margin: 26px auto 0;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1.65;
  }

  .registration-date {
    margin-top: 25px;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .11em;
  }

  .registration-back {
    margin-top: 30px;
    padding: 11px 15px;
    font-size: 9px;
  }

  .registration-shape {
    width: min(78vw, 390px);
    max-width: 390px;
  }
}

/* SMALL MOBILE */
@media screen and (max-width: 425px) {
  .registration-main {
    padding: 105px 16px 32px;
  }

  .registration-marker {
    gap: 7px;
    font-size: 7px;
  }

  .registration-marker i {
    width: 22px;
    flex-basis: 22px;
  }

  .registration-content h1 {
    font-size: clamp(38px, 12.8vw, 62px);
    line-height: .88;
  }

  .registration-sub {
    margin-top: 23px;
    font-size: 10.5px;
    line-height: 1.6;
  }

  .registration-date {
    margin-top: 22px;
    font-size: 8px;
  }

  .registration-back {
    margin-top: 27px;
    padding: 10px 13px;
  }

  .registration-shape {
    width: 82vw;
  }
}

/* VERY SMALL PHONES */
@media screen and (max-width: 360px) {
  .registration-main {
    padding-left: 14px;
    padding-right: 14px;
  }

  .registration-content h1 {
    font-size: 37px;
  }

  .registration-sub {
    font-size: 10px;
  }

  .registration-date {
    font-size: 7.5px;
  }
}

/* DESKTOP / LARGE TABLET */
@media screen and (min-width: 601px) {
  .registration-main {
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
  }
}