@font-face {
    font-family: "Nissan Brand Regular";
    src: url("../fonts/Nissan_Brand_Regular.otf") format("opentype");
    font-style: normal;
    font-display: swap;
}

:root {
    --tekton-bronze: #b9835b;
    --tekton-bronze-light: #e8b890;
    --tekton-white: #ffffff;
    --tekton-muted: rgba(255, 255, 255, 0.82);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Nissan Brand Regular";
    background-color: #030303;
    color: var(--tekton-white);
}

.tekton-hero {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background:
        url("../images/Page01.png") center center / cover no-repeat;
}

.web{
    display: block;
}
.mobile-countdown{
    display: none;
}

.hero-container {
    min-height: 100vh;
    padding: clamp(44px, 8.5vh, 76px) clamp(56px, 7vw, 96px);
}

.hero-container > .row {
    min-height: calc(100vh - clamp(88px, 17vh, 152px)) !important;
}

.hero-copy {
    min-height: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.nissan-logo {
    width: clamp(78px, 8.4vw, 114px);
    height: auto;
    margin-bottom: clamp(72px, 13vh, 118px);
}

.event-details {
    max-width: 470px;
    margin-left: clamp(28px, 6.2vw, 86px);
    text-align: center;
}

.eyebrow,
.world-premiere,
.venue,
.registration-card h1,
.send-otp-btn,
.form-control {
    letter-spacing: 0.22em;
}

.eyebrow {
    font-size: clamp(1rem, 1.7vw, 1.6rem);
    font-weight: 500;
    color: var(--tekton-muted);
}

.tekton-logo {
    display: block;
    width: min(100%, 400px);
    height: auto;
    margin: 0 auto 0.35rem;
}

.world-premiere {
    font-size: clamp(0.72rem, 1vw, 0.96rem);
    font-weight: 700;
    color: var(--tekton-muted);
}

.event-date {
    font-size: clamp(1.24rem, 1.9vw, 1.65rem);
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.event-date sup {
    top: -0.45em;
    font-size: 52%;
}

.venue {
    font-size: clamp(0.74rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--tekton-muted);
}

.countdown {
    display: inline-flex;
    gap: 8px;
    padding: 8px 10px 9px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 16px;
    background: rgba(4, 4, 4, 0.66);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.42);
}

.time-box {
    width: clamp(74px, 5.7vw, 84px);
    padding: 0;
    text-align: center;
    position: relative;
}

.time-box:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    right: -6px;
    z-index: 2;
    width: 2px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.34);
}

.time-box:not(:last-child)::before {
    content: none;
}

.time-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2ch;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.2)),
        rgba(64, 64, 64, 0.7);
    font-size: clamp(2rem, 2.7vw, 2.52rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-shadow: 0 0 11px rgba(255, 255, 255, 0.2);
}

.time-box small {
    display: block;
    margin-top: 7px;
    font-size: 0.42rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.registration-card {
    max-width: 420px;
    margin-left: auto;
    margin-right: clamp(0px, 1.4vw, 20px);
    padding: clamp(28px, 3.6vw, 42px) clamp(30px, 3.8vw, 40px);
    border: 1px solid rgba(232, 184, 144, 0.72);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(22, 19, 17, 0.88), rgba(7, 7, 7, 0.78));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(4px);
}

.registration-card h1 {
    margin-bottom: 34px;
    color: var(--tekton-bronze-light);
    font-size: clamp(0.95rem, 1.35vw, 1.24rem);
    font-weight: 800;
    line-height: 1.55;
    text-align: center;
    text-transform: uppercase;
}

.registration-card .form-group {
    margin-bottom: 16px;
}

.registration-card .form-control {
    height: 42px;
    padding: 0 24px;
    border: 1px solid rgba(232, 184, 144, 0.78);
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.36);
    color: var(--tekton-white);
    font-size: 0.72rem;
    /* font-weight: 600; */
    box-shadow: none;
    text-transform: uppercase;
}

.registration-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.registration-card .category-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e8b890' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    padding-right: 44px;
}

.registration-card .category-select option {
    background: #0a0a0a;
    color: var(--tekton-white);
}

.registration-card .form-control:focus {
    border-color: var(--tekton-bronze-light);
    background: rgba(12, 12, 12, 0.62);
    color: var(--tekton-white);
    box-shadow: 0 0 0 0.16rem rgba(185, 131, 91, 0.24);
}

.send-otp-btn {
    display: block;
    min-width: 188px;
    margin: 15px auto 0;
    padding: 12px 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #c59269 0%, #ac7851 100%);
    color: var(--tekton-white);
    font-size: 0.78rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    text-transform: uppercase;
}

.send-otp-btn:hover,
.send-otp-btn:focus {
    color: var(--tekton-white);
    background: linear-gradient(180deg, #d2a075 0%, #b9835b 100%);
    box-shadow: 0 0 0 0.16rem rgba(185, 131, 91, 0.25);
}

.otp-hero {
    background: url("../images/Page02.png") center center / cover no-repeat;
}

.verification-hero {
    background: url("../images/Page03.png") center center / cover no-repeat;
}

.rsvp-hero {
    background: url("../images/Page04.png") center center / cover no-repeat;
}

.cohort-hero {
    background: url("../images/Page05.png") center center / cover no-repeat;
}

.ticket-hero {
    background: url("../images/Page06.png") center center / cover no-repeat;
}

.ticket-preview-hero {
    background: url("../images/Page07.png") center center / cover no-repeat;
}

.livestream-hero {
    background: url("../images/Page09.png") center center / cover no-repeat;
}

.otp-container {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(44px, 8vh, 72px) clamp(28px, 6vw, 92px);
}

.otp-logo {
    position: absolute;
    top: clamp(42px, 7.4vh, 70px);
    left: clamp(48px, 7.2vw, 94px);
    margin: 0;
}

.otp-card {
    width: min(100%, 470px);
    min-height: 330px;
    padding: clamp(34px, 4.3vw, 48px) clamp(30px, 4.6vw, 58px);
    border: 1px solid rgba(232, 184, 144, 0.64);
    border-radius: 24px;
    background:
        radial-gradient(circle at 75% 22%, rgba(185, 131, 91, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(27, 24, 22, 0.88), rgba(7, 7, 7, 0.82));
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
    text-align: center;
    backdrop-filter: blur(5px);
}

.otp-card h1,
.otp-card p,
.resend-copy,
.otp-input,
.verify-otp-btn {
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.otp-card h1 {
    margin-bottom: 34px;
    color: var(--tekton-bronze-light);
    font-size: clamp(0.95rem, 1.25vw, 1.16rem);
    font-weight: 800;
}

.otp-card p {
    margin-bottom: 10px;
    color: var(--tekton-white);
    font-size: clamp(0.7rem, 0.9vw, 0.84rem);
    font-weight: 500;
    line-height: 1.55;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 1.8vw, 18px);
    margin: 18px 0 18px;
}

.otp-input {
    width: clamp(52px, 5.2vw, 66px);
    height: clamp(48px, 5vw, 60px);
    border: 1px solid rgba(232, 184, 144, 0.72);
    border-radius: 10px;
    background: rgba(10, 10, 10, 0.42);
    color: var(--tekton-white);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 600;
    text-align: center;
    outline: none;
    box-shadow: none;
}

.otp-input:focus {
    border-color: var(--tekton-bronze-light);
    background: rgba(12, 12, 12, 0.62);
    box-shadow: 0 0 0 0.16rem rgba(185, 131, 91, 0.24);
}

.resend-copy {
    margin: 0 0 24px;
    color: var(--tekton-white);
    font-size: clamp(0.68rem, 0.86vw, 0.82rem);
    font-weight: 600;
}

.resend-copy a {
    color: var(--tekton-white);
    text-decoration: none;
}

.resend-copy a:hover,
.resend-copy a:focus {
    color: var(--tekton-bronze-light);
    text-decoration: none;
}

.verify-otp-btn {
    min-width: 214px;
    margin-top: 5px;
}

.status-card {
    width: min(100%, 374px);
    min-height: 280px;
    padding: clamp(32px, 4vw, 44px) clamp(28px, 4vw, 46px);
}

.status-card h1 {
    margin-bottom: 24px;
}

.verified-icon {
    width: clamp(76px, 7vw, 104px);
    height: clamp(76px, 7vw, 104px);
    margin: 0 auto 28px;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(180deg, #dfa367 0%, #d29357 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.verified-icon span {
    position: absolute;
    left: 34%;
    top: 24%;
    width: 30%;
    height: 52%;
    border-right: 8px solid var(--tekton-white);
    border-bottom: 8px solid var(--tekton-white);
    transform: rotate(42deg);
}

.verified-copy {
    margin-bottom: 0 !important;
}

.rsvp-card {
    width: min(100%, 470px);
    min-height: 330px;
}

.rsvp-card h1 {
    margin-bottom: 32px;
}

.rsvp-card p {
    margin-bottom: 28px;
}

.presence-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.presence-btn {
    width: min(100%, 294px);
    min-height: 42px;
    border: 1px solid rgba(232, 184, 144, 0.68);
    border-radius: 999px;
    background: rgba(6, 6, 6, 0.58);
    color: var(--tekton-white);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: none;
}

.presence-btn.is-selected {
    border-color: transparent;
    background: linear-gradient(180deg, #c59269 0%, #ac7851 100%);
}

.presence-btn:hover,
.presence-btn:focus {
    color: var(--tekton-white);
    box-shadow: 0 0 0 0.16rem rgba(185, 131, 91, 0.22);
}

.cohort-card {
    width: min(100%, 824px);
    min-height: 330px;
    padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 30px);
}

.cohort-card h1 {
    margin-bottom: 36px;
}

.cohort-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(12px, 1.3vw, 18px);
}

.cohort-btn:nth-child(1) {
    grid-column: 1 / 3;
}

.cohort-btn:nth-child(2) {
    grid-column: 3 / 5;
}

.cohort-btn:nth-child(3) {
    grid-column: 5 / 7;
}

.cohort-btn:nth-child(4) {
    grid-column: 2 / 4;
}

.cohort-btn:nth-child(5) {
    grid-column: 4 / 6;
}

.cohort-btn {
    min-height: clamp(104px, 12vw, 144px);
    border: 1px solid rgba(232, 184, 144, 0.58);
    border-radius: 16px;
    background: rgba(6, 6, 6, 0.62);
    color: var(--tekton-white);
    font-size: clamp(0.72rem, 0.9vw, 0.88rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: none;
}

.cohort-btn.is-selected {
    border-color: transparent;
    background: linear-gradient(180deg, #ad8969 0%, #987656 100%);
}

.cohort-btn:hover,
.cohort-btn:focus {
    color: var(--tekton-white);
    box-shadow: 0 0 0 0.16rem rgba(185, 131, 91, 0.22);
}

.ticket-card {
    width: min(100%, 494px);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 4vw, 48px);
}

.ticket-card h1 {
    margin: 0;
    color: var(--tekton-white);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    letter-spacing: 0.24em;
}

.ticket-preview-container {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(44px, 8vh, 72px) clamp(28px, 6vw, 92px);
}

.download-ticket-btn {
    position: absolute;
    top: clamp(38px, 10vh, 58px);
    right: clamp(28px, 5vw, 72px);
    min-width: 180px;
    padding: 11px 24px;
    border: 1px solid rgba(232, 184, 144, 0.68);
    border-radius: 999px;
    background: linear-gradient(180deg, #c59269 0%, #ac7851 100%);
    color: var(--tekton-white);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.download-ticket-btn:hover,
.download-ticket-btn:focus {
    color: var(--tekton-white);
    background: linear-gradient(180deg, #d2a075 0%, #b9835b 100%);
    box-shadow: 0 0 0 0.16rem rgba(185, 131, 91, 0.24);
}

.ticket-preview {
    width: min(100%, 780px);
    text-align: center;
}

.ticket-art {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.36));
}

.ticket-art picture,
.ticket-base {
    display: block;
    width: 100%;
}

.ticket-base {
    height: auto;
}

.ticket-name-panel {
    position: absolute;
    top: 12%;
    right: 4%;
    width: 28%;
    min-height: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    text-align: center;
}

.ticket-name {
    display: block;
    max-width: 100%;
    color: var(--tekton-white);
    font-size: clamp(0.7rem, 2.1vw, 1rem);
    font-weight: 800;
    line-height: 1.14;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
    text-transform: capitalize;
}

.ticket-qr-panel {
    position: absolute;
    top: 25%;
    right: 8%;
    width: 20%;
}

.ticket-qr {
    display: block;
    width: 100%;
    height: auto;
}

.ticket-preview-label {
    position: absolute;
    top: 80%;
    right: 4%;
    width: 28%;
    margin: 0;
    color: var(--tekton-white);
    font-size: clamp(0.46rem, 1.2vw, 0.9rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.livestream-card {
    width: min(100%, 600px);
    /* min-height: 220px; */
    min-height: auto;
    padding: clamp(34px, 4vw, 46px) clamp(26px, 4vw, 50px);
}

.livestream-card h1 {
    margin-bottom: 24px;
    color: var(--tekton-white);
    font-size: clamp(1rem, 1.6vw, 1.42rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.24em;
}

.livestream-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.livestream-actions[hidden] {
    display: none !important;
}

.livestream-employee-sessions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.livestream-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tekton-white);
    font-size: clamp(0.72rem, 0.85vw, 0.82rem);
    font-weight: 500;
    text-decoration: underline;
}

.livestream-link:hover,
.livestream-link:focus {
    color: var(--tekton-bronze-light);
    text-decoration: underline;
}

.youtube-icon {
    width: 31px;
    height: 22px;
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 5px;
    background: #ff0000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.youtube-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-42%, -50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--tekton-white);
}

#loginerror {
    color: #dfa367;
    margin-bottom: 10px;
    text-transform: capitalize;
}