/* Reusable site components: navigation, buttons, cards, carousels and shared UI. */

.site-header {
height: 92px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10
}

.nav-wrap {
display: flex;
    align-items: center;
    gap: 42px
}

.brand {
display: flex;
    align-items: center;
    gap: 11px;
    min-width: 210px;
    font-size: 21px;
    line-height: .85
}

.brand img {
width: 44px;
    height: 46px;
    object-fit: contain
}

.brand small {
display: block;
    font-size: 10px;
    margin-bottom: 5px
}

.brand b {
display: block;
    color: #8466ff;
    font-size: 10px;
    letter-spacing: 7px;
    text-transform: uppercase;
    margin-top: 7px;
    font-weight: 600
}

.site-nav {
margin-left: auto;
    display: flex;
    gap: 40px
}

.site-nav a {
font-size: 14px;
    color: #c8ced9
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
color: white
}

.button {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 48px;
    padding: 0 25px;
    border-radius: 7px;
    background: linear-gradient(100deg, var(--blue), var(--violet));
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 34px #4525d338;
    transition: filter .2s, transform .2s
}

.button:hover {
filter: brightness(1.15);
    transform: translateY(-1px)
}

.button.secondary {
background: transparent;
    border: 1px solid #344057;
    box-shadow: none
}

.nav-cta {
min-height: 42px;
    padding-inline: 18px
}

.menu-button {
display: none;
    background: none;
    border: 0;
    padding: 8px
}

.menu-button span:not(.sr-only) {
display: block;
    width: 24px;
    height: 2px;
    background: white;
    margin: 5px
}

.button-row {
display: flex;
    gap: 18px;
    margin-top: 32px
}

.section-heading h2,
.about-panel h2,
.cta-panel h2 {
font-size: 25px;
    margin: 0;
    letter-spacing: -.02em
}

.product-carousel {
--carousel-card-width: min(540px, calc(100vw - 90px));
    position: relative;
    overflow: hidden;
    margin-inline: -1px;
    padding: 20px 1px
}

.carousel-track {
display: flex;
    width: max-content;
    gap: 18px;
    transition: transform .48s cubic-bezier(.22, .68, .22, 1);
    will-change: transform
}

.carousel-track.no-transition {
transition: none
}

.carousel-track.no-transition .product-card {
transition: none
}

.carousel-track .product-card {
width: var(--carousel-card-width);
    flex: 0 0 var(--carousel-card-width);
    opacity: .55;
    transform: scale(.9);
    pointer-events: none;
    transition: opacity .48s ease, transform .48s cubic-bezier(.22, .68, .22, 1), border-color .2s, box-shadow .25s ease
}

.carousel-track .product-card.is-active {
opacity: 1;
    transform: scale(1.035);
    pointer-events: auto;
    z-index: 1
}

.carousel-track .product-card.is-active:hover {
transform: scale(1.035) translateY(-3px)
}

.carousel-button {
position: absolute;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 1px solid #35465f;
    border-radius: 50%;
    background: #071321e8;
    color: white;
    font: inherit;
    font-size: 21px;
    cursor: pointer;
    box-shadow: 0 10px 30px #0008;
    transition: border-color .2s, background-color .2s, transform .2s
}

.carousel-button:hover,
.carousel-button:focus-visible {
border-color: #168cff;
    background: #0d2039;
    transform: scale(1.06)
}

.carousel-previous {
left: 16px
}

.carousel-next {
right: 16px
}

.product-card {
min-height: 156px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(145deg, #09182c, #06101e);
    padding: 26px;
    display: flex;
    gap: 24px;
    align-items: center;
    transition: border-color .2s, transform .25s ease, box-shadow .25s ease
}

.product-card:hover {
border-color: #3e5180;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px #0000003d
}

.site-header {
transition: background-color .3s ease, box-shadow .3s ease
}

.site-header.is-scrolled {
background: #020711e8;
    box-shadow: 0 10px 35px #00000038
}

.product-card h3 {
margin: 0 0 5px;
    font-size: 18px
}

.product-card p {
color: var(--muted);
    font-size: 13px;
    margin: 0 0 14px
}

.product-card b {
color: #308eff;
    font-size: 12px
}

.icon-box {
width: 74px;
    aspect-ratio: 1;
    border: 3px solid transparent;
    background: linear-gradient(#0a1628, #0a1628) padding-box, linear-gradient(140deg, #168cff, #a52cf3) border-box;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #7f50ff;
    font-size: 27px;
    flex: 0 0 auto
}

.line-icon {
grid-row: 1/3;
    color: #8d3fff;
    font-size: 35px
}

.cta-panel {
margin-top: 25px;
    margin-bottom: 70px;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 22px 75px;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 35px;
    background: #06101e
}

.cta-panel img {
width: 70px;
    height: 72px;
    object-fit: contain
}

.cta-panel p {
margin: 5px 0 0;
    color: var(--muted)
}

.site-footer {
border-top: 1px solid var(--line);
    padding: 35px 0 45px
}

.footer-grid {
display: grid;
    grid-template-columns: 220px 1.5fr .7fr 1fr 1fr;
    gap: 38px;
    align-items: start;
    color: var(--muted);
    font-size: 12px
}

.footer-grid .brand {
color: white
}

.footer-grid b {
display: block;
    color: #dfe4ed;
    margin-bottom: 8px
}

.footer-grid a:not(.brand) {
display: block;
    margin: 5px 0
}

.copyright {
text-align: right
}

.tag {
font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #2d93ff
}

.service-card .line-icon {
display: block;
    margin-bottom: 20px
}

.field {
display: flex;
    flex-direction: column;
    gap: 7px
}

.field.full {
grid-column: 1/-1
}

.field label {
font-size: 12px;
    color: #bac3d1
}

.field input,
.field textarea,
.field select {
width: 100%;
    border: 1px solid #273751;
    border-radius: 7px;
    background: #050e1b;
    color: white;
    padding: 13px;
    font: inherit
}

.field textarea {
min-height: 140px;
    resize: vertical
}

.form-note {
color: var(--green);
    font-size: 13px;
    display: none
}

.form-note.show {
display: block
}

.form-note.error {
color: #ff8f9c
}

.form-honeypot {
position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.contact-form .button:disabled {
cursor: wait;
    filter: saturate(.65);
    opacity: .75;
    transform: none
}

.mock-app {
width: min(100%, 390px);
    min-height: 330px;
    border: 1px solid #354b6b;
    border-radius: 22px;
    background: #071221e8;
    padding: 30px;
    box-shadow: 0 25px 55px #0008
}

.mock-app>small {
color: #6e7e96;
    font-size: 9px;
    letter-spacing: .16em
}

.mock-app h3 {
font-size: 21px;
    margin: 15px 0 20px
}

.mock-time {
display: block;
    font-size: 60px;
    letter-spacing: -.06em;
    margin: 35px 0 0
}

.mock-app>span {
color: var(--muted);
    font-size: 12px
}

.mock-progress {
height: 6px;
    border-radius: 6px;
    background: #1a2940;
    overflow: hidden;
    margin: 22px 0
}

.mock-progress i {
display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #168cff, #8a35f3)
}

.mock-pills {
display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.mock-pills b,
.status-pill {
border: 1px solid #2d405e;
    border-radius: 30px;
    padding: 8px 12px;
    color: #bfc9d8;
    font-size: 10px
}

.poster-row,
.poster-grid {
display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.poster-row i,
.poster-grid i,
.detail-poster {
display: block;
    aspect-ratio: 2/3;
    border-radius: 8px;
    background: linear-gradient(150deg, #168cff, #212c58 48%, #8b2cff)
}

.poster-row i:nth-child(2),
.poster-grid i:nth-child(2) {
background: linear-gradient(150deg, #eb5b78, #34204c 55%, #ffad4d)
}

.poster-row i:nth-child(3),
.poster-grid i:nth-child(3) {
background: linear-gradient(150deg, #3ad4ba, #122f49 55%, #1476f2)
}

.poster-grid {
grid-template-columns: repeat(4, 1fr)
}

.poster-grid i:nth-child(4) {
background: linear-gradient(150deg, #ffc55f, #542a4e 55%, #9d42f2)
}

.media-summary {
display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: baseline;
    gap: 7px;
    margin-top: 22px
}

.media-summary b {
color: #479cff;
    font-size: 20px
}

.media-summary span {
color: var(--muted);
    font-size: 9px
}

.shopping-row {
display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #1d2d44;
    padding: 14px 0;
    font-size: 12px
}

.shopping-row i {
width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid #436087;
    border-radius: 6px;
    color: #54dc95;
    font-style: normal
}

.shopping-row b {
color: #67768d;
    font-size: 9px
}

.mock-app button {
width: 100%;
    border: 1px solid #2c76c8;
    border-radius: 8px;
    background: #0d2947;
    color: white;
    padding: 11px;
    margin-top: 18px
}

.feature-list p {
display: grid;
    gap: 5px;
    border-top: 1px solid var(--line);
    padding: 18px 0;
    margin: 0
}

.feature-list strong {
font-size: 14px
}

.feature-list span {
color: var(--muted);
    font-size: 12px
}

.product-shot {
min-height: 360px;
    border: 1px solid #263650;
    border-radius: 14px;
    overflow: hidden;
    background: #081321;
    box-shadow: 0 20px 50px #0004
}

.shot-bar {
height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #1c2b41;
    padding: 0 16px;
    color: #76849a;
    font-size: 10px
}

.shot-bar i {
width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #33445d
}

.shot-bar span {
margin-left: 8px
}

.shot-content {
width: min(82%, 410px);
    margin: 34px auto;
    padding: 25px;
    border: 1px solid #243650;
    border-radius: 12px;
    background: #07101d
}

.shot-content h3 {
margin: 0 0 4px
}

.shot-content>p {
color: var(--muted);
    font-size: 11px
}

.schedule-row {
display: flex;
    justify-content: space-between;
    border-top: 1px solid #1d2d44;
    padding: 13px 0;
    font-size: 11px
}

.schedule-row span {
color: #ff8c55
}

.large-countdown {
font-size: 56px;
    font-weight: 700;
    letter-spacing: -.06em;
    margin-top: 34px
}

.quick-add {
display: flex;
    justify-content: space-between;
    border: 1px solid #2b4263;
    border-radius: 8px;
    padding: 11px;
    margin: 20px 0 8px;
    color: #9ca8b9;
    font-size: 11px
}

.quick-add b {
color: #3697ff
}

@media(max-width:900px) {
.site-nav {
position: absolute;
        left: 20px;
        right: 20px;
        top: 78px;
        background: #081321;
        border: 1px solid var(--line);
        border-radius: 10px;
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 10px
}

.site-nav.open {
display: flex
}

.site-nav a {
padding: 12px
}

.menu-button {
display: block;
        margin-left: auto
}

.nav-cta {
display: none
}

.product-card:last-child {
grid-column: 1/-1
}

.footer-grid {
grid-template-columns: 1fr 1fr 1fr
}

.copyright {
text-align: left
}
}

@media(max-width:620px) {
.site-header {
height: 74px
}

.brand {
min-width: auto
}

.brand span {
display: none
}

.button-row {
flex-direction: column;
        align-items: stretch
}

.product-carousel {
--carousel-card-width: calc(100vw - 76px)
}

.carousel-button {
width: 42px;
        height: 42px;
        margin-top: -21px
}

.carousel-previous {
left: 7px
}

.carousel-next {
right: 7px
}

.product-card:last-child {
grid-column: auto
}

.product-card {
padding: 20px
}

.icon-box {
width: 60px
}

.cta-panel {
grid-template-columns: 1fr;
        padding: 28px;
        text-align: center
}

.cta-panel img {
margin: auto
}

.footer-grid {
grid-template-columns: 1fr 1fr
}

.footer-grid>p:nth-child(2),
    .copyright {
grid-column: 1/-1
}

.field.full {
grid-column: auto
}

.mock-app {
min-height: 290px;
        padding: 23px
}

.mock-time {
font-size: 48px
}

.product-shot {
min-height: 330px
}
}

@media (prefers-reduced-motion: reduce) {
.carousel-track {
transition: none
}

.button,
    .product-card {
transition: none
}
}