:root {
    --black: #030508;
    --black-soft: #080b11;
    --charcoal: #10141c;
    --charcoal-light: #181d27;
    --white: #f6f7f9;
    --silver: #aab1bf;
    --muted: #7d8595;
    --red: #e12538;
    --red-dark: #8d101f;
    --blue: #1879ff;
    --cyan: #39c9ff;
    --border: rgba(255, 255, 255, 0.11);
    --container: 1240px;
    --radius: 24px;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 5%, rgba(24, 121, 255, 0.08), transparent 28%),
        radial-gradient(circle at 85% 8%, rgba(225, 37, 56, 0.08), transparent 24%),
        var(--black);
    color: var(--white);
    font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    line-height: 1.6;
}

body,
button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img,
video {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: 1.05;
    letter-spacing: -0.045em;
}

h1 {
    font-size: clamp(3.4rem, 7.5vw, 7.7rem);
}

h2 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
}

h3 {
    font-size: 1.55rem;
}

p {
    color: var(--silver);
}

.site-container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;
    padding: 120px 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #dce3ec;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.eyebrow::before {
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--red), var(--blue));
    content: "";
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    transform: translateY(-200%);
    padding: 10px 14px;
    background: var(--white);
    color: var(--black);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition:
        background 220ms ease,
        border-color 220ms ease,
        backdrop-filter 220ms ease;
}

.site-header.scrolled {
    border-color: var(--border);
    background: rgba(3, 5, 8, 0.84);
    backdrop-filter: blur(18px);
}

.header-inner {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-symbol {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(145deg, rgba(225, 37, 56, 0.25), rgba(24, 121, 255, 0.17)),
        #0b0d12;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 30px rgba(0, 0, 0, 0.35);
    font-weight: 900;
}

.brand-copy {
    display: grid;
    line-height: 1;
}

.brand-copy strong {
    letter-spacing: 0.14em;
}

.brand-copy small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.58rem;
    letter-spacing: 0.32em;
}

.primary-navigation {
    display: flex;
    align-items: center;
    gap: 26px;
}

.primary-navigation > a:not(.button) {
    color: #bdc3cf;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 180ms ease;
}

.primary-navigation > a:hover,
.primary-navigation > a.active {
    color: var(--white);
}

.menu-toggle {
    display: none;
}

.button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}

.button-primary {
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.12), transparent 38%),
        linear-gradient(135deg, var(--red), #ac1628);
    box-shadow:
        0 14px 38px rgba(225, 37, 56, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.button-primary:hover {
    box-shadow:
        0 20px 52px rgba(225, 37, 56, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.button-secondary {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(14px);
}

.button-small {
    min-height: 42px;
    padding-inline: 18px;
    font-size: 0.8rem;
}

.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    padding: 150px 0 90px;
    background:
        linear-gradient(180deg, rgba(2, 4, 8, 0.14), var(--black)),
        radial-gradient(circle at 72% 48%, rgba(35, 66, 111, 0.25), transparent 34%);
}

.hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 190px;
    background: linear-gradient(transparent, var(--black));
    content: "";
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 4;
    display: grid;
    min-height: calc(100svh - 240px);
    align-items: center;
    grid-template-columns: minmax(0, 0.95fr) minmax(500px, 1.05fr);
    gap: 60px;
}

.hero-copy h1 {
    max-width: 820px;
    margin-bottom: 30px;
    font-weight: 820;
}

.hero-copy h1 em {
    display: block;
    background: linear-gradient(110deg, #ffffff 5%, #9acbff 52%, #ff6a76 100%);
    background-clip: text;
    color: transparent;
    font-style: normal;
}

.hero-copy > p {
    max-width: 680px;
    margin-bottom: 36px;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

.hero-actions,
.centered-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.technology-note {
    display: block;
    margin-top: 25px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.hero-light {
    position: absolute;
    z-index: 1;
    border-radius: 999px;
    filter: blur(110px);
    opacity: 0.3;
    pointer-events: none;
    animation: light-drift 11s ease-in-out infinite alternate;
}

.hero-light-red {
    top: 8%;
    left: -12%;
    width: 520px;
    height: 520px;
    background: var(--red);
}

.hero-light-blue {
    right: -12%;
    bottom: 4%;
    width: 640px;
    height: 640px;
    background: var(--blue);
    animation-delay: -4s;
}

.cinematic-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.045;
    pointer-events: none;
    background-image:
        repeating-radial-gradient(circle at 0 0, transparent 0, #fff 1px, transparent 2px);
    background-size: 7px 7px;
    mix-blend-mode: soft-light;
}

.hero-visual {
    position: relative;
    min-height: 650px;
    perspective: 1600px;
}

.visual-backdrop {
    position: absolute;
    inset: 8% 6%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(47, 119, 255, 0.24), transparent 46%),
        radial-gradient(circle at 66% 44%, rgba(225, 37, 56, 0.2), transparent 38%);
    filter: blur(30px);
}

.hero-poster {
    position: absolute;
    display: flex;
    overflow: hidden;
    min-height: 370px;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background:
        linear-gradient(180deg, transparent 20%, rgba(2, 4, 8, 0.94)),
        radial-gradient(circle at 50% 22%, rgba(56, 98, 167, 0.65), transparent 44%),
        #121722;
    box-shadow: var(--shadow);
    transform-style: preserve-3d;
}

.hero-poster::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, 0.08), transparent 54%);
    content: "";
}

.hero-poster span,
.hero-poster strong {
    position: relative;
    z-index: 2;
}

.hero-poster span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
}

.hero-poster strong {
    max-width: 190px;
    font-size: 1.25rem;
    line-height: 1.08;
}

.hero-poster-left {
    top: 19%;
    left: 0;
    width: 36%;
    transform: rotateY(16deg) rotateZ(-6deg);
}

.hero-poster-center {
    top: 5%;
    left: 31%;
    z-index: 3;
    width: 40%;
    min-height: 490px;
    background:
        linear-gradient(180deg, transparent 20%, rgba(2, 4, 8, 0.94)),
        radial-gradient(circle at 62% 28%, rgba(225, 37, 56, 0.55), transparent 34%),
        radial-gradient(circle at 30% 60%, rgba(24, 121, 255, 0.45), transparent 40%),
        #121722;
    transform: translateZ(80px);
}

.hero-poster-right {
    top: 18%;
    right: 0;
    width: 35%;
    transform: rotateY(-18deg) rotateZ(6deg);
}

.hero-device {
    position: absolute;
    right: 8%;
    bottom: 1%;
    z-index: 6;
    width: 220px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 38px;
    background: linear-gradient(145deg, #20242d, #080a0e);
    box-shadow:
        0 36px 80px rgba(0, 0, 0, 0.68),
        -18px -8px 48px rgba(24, 121, 255, 0.12),
        18px 8px 48px rgba(225, 37, 56, 0.12);
    transform: rotate(8deg);
}

.device-screen {
    display: flex;
    min-height: 430px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px 18px;
    border-radius: 30px;
    background:
        linear-gradient(transparent, rgba(0, 0, 0, 0.92)),
        radial-gradient(circle at 50% 25%, rgba(55, 144, 255, 0.45), transparent 38%),
        #0a0f18;
}

.device-screen span {
    color: var(--cyan);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
}

.device-screen strong {
    margin-top: 10px;
    font-size: 1.2rem;
    line-height: 1.05;
}

.section-heading {
    max-width: 820px;
    margin: 0 auto 60px;
    text-align: center;
}

.section-heading-left {
    margin-inline: 0;
    text-align: left;
}

.section-heading p {
    max-width: 660px;
    margin: 22px auto 0;
    font-size: 1.1rem;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.story-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.24);
    transition:
        transform 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}

.story-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.23);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
}

.story-card-visual {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    padding: 22px;
    background:
        linear-gradient(180deg, transparent, rgba(3, 5, 8, 0.93)),
        radial-gradient(circle at 50% 30%, rgba(24, 121, 255, 0.36), transparent 42%),
        #111621;
}

.story-card:nth-child(2) .story-card-visual {
    background:
        linear-gradient(180deg, transparent, rgba(3, 5, 8, 0.93)),
        radial-gradient(circle at 60% 28%, rgba(225, 37, 56, 0.38), transparent 38%),
        #171116;
}

.story-card:nth-child(3) .story-card-visual {
    background:
        linear-gradient(180deg, transparent, rgba(3, 5, 8, 0.93)),
        radial-gradient(circle at 50% 25%, rgba(62, 139, 190, 0.26), transparent 38%),
        radial-gradient(circle at 35% 70%, rgba(190, 52, 42, 0.22), transparent 34%),
        #14151a;
}

.story-number {
    color: rgba(255, 255, 255, 0.28);
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: -0.08em;
}

.story-status {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    color: #e8ebf0;
    font-size: 0.67rem;
    letter-spacing: 0.08em;
}

.story-card-content {
    padding: 30px;
}

.story-card-content > span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.story-card-content h3,
.story-card-content h2 {
    margin: 13px 0 17px;
    font-size: 1.9rem;
}

.story-card-actions {
    display: flex;
    margin-top: 25px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.story-card-actions a,
.story-card-content > a {
    color: #d8e9ff;
    font-weight: 700;
}

.text-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
}

.experience-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 60%, rgba(24, 121, 255, 0.12), transparent 34%),
        linear-gradient(180deg, var(--black), var(--black-soft));
}

.experience-grid {
    display: grid;
    align-items: center;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 100px;
}

.experience-device {
    display: grid;
    min-height: 660px;
    place-items: center;
}

.phone-frame {
    width: min(330px, 80vw);
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 52px;
    background: linear-gradient(145deg, #242832, #050608);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.7),
        -30px 15px 90px rgba(24, 121, 255, 0.16);
    transform: rotate(-7deg);
}

.phone-screen {
    display: flex;
    min-height: 630px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 25px;
    border-radius: 42px;
    background:
        linear-gradient(transparent 30%, rgba(2, 4, 8, 0.96)),
        radial-gradient(circle at 50% 25%, rgba(24, 121, 255, 0.48), transparent 35%),
        #08101b;
}

.phone-screen span {
    color: var(--cyan);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
}

.phone-screen strong {
    max-width: 230px;
    margin-top: 16px;
    font-size: 2rem;
    line-height: 1.02;
}

.phone-interface {
    width: 66%;
    height: 5px;
    margin-top: 30px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--red));
}

.experience-copy p {
    max-width: 620px;
    margin-bottom: 30px;
    font-size: 1.15rem;
}

.text-link {
    color: #d8e9ff;
    font-weight: 800;
}

.about-preview {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 40%),
        var(--black);
}

.about-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
}

.about-columns p {
    font-size: 1.12rem;
}

.capability-row {
    display: grid;
    margin-top: 70px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.capability-row span {
    display: grid;
    min-height: 130px;
    place-items: center;
    padding: 20px;
    border-right: 1px solid var(--border);
    color: #dbe0e8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.capability-row span:last-child {
    border-right: 0;
}

.approach-section {
    background: var(--black-soft);
}

.approach-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.approach-track article {
    position: relative;
    min-height: 380px;
    padding: 34px;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.approach-track article:last-child {
    border-right: 0;
}

.approach-track article > span {
    display: block;
    margin-bottom: 100px;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
}

.approach-track article h3 {
    margin-bottom: 18px;
    font-size: 2rem;
}

.technology-panel {
    display: grid;
    overflow: hidden;
    padding: 70px;
    border: 1px solid var(--border);
    border-radius: 36px;
    background:
        radial-gradient(circle at 80% 50%, rgba(24, 121, 255, 0.18), transparent 32%),
        radial-gradient(circle at 72% 65%, rgba(225, 37, 56, 0.13), transparent 28%),
        linear-gradient(135deg, #111620, #080b10);
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
    box-shadow: var(--shadow);
}

.technology-panel p {
    max-width: 660px;
    margin-bottom: 32px;
}

.technology-orbit {
    position: relative;
    display: grid;
    min-height: 430px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.technology-orbit::before,
.technology-orbit::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
}

.technology-orbit::before {
    inset: 15%;
}

.technology-orbit::after {
    inset: 30%;
}

.technology-orbit strong {
    position: relative;
    z-index: 3;
    display: grid;
    width: 120px;
    height: 120px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #1e2633, #080a0f);
    box-shadow:
        -20px -10px 60px rgba(24, 121, 255, 0.18),
        20px 10px 60px rgba(225, 37, 56, 0.16);
}

.technology-orbit span {
    position: absolute;
    z-index: 2;
    color: var(--muted);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
}

.technology-orbit span:nth-child(1) {
    top: 8%;
}

.technology-orbit span:nth-child(2) {
    right: 4%;
}

.technology-orbit span:nth-child(3) {
    bottom: 8%;
}

.technology-orbit span:nth-child(4) {
    left: 1%;
}

.partner-grid,
.trailer-grid,
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.partner-grid article,
.trailer-card,
.editorial-grid > div {
    min-height: 250px;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
}

.centered-actions {
    margin-top: 50px;
    justify-content: center;
}

.value-section {
    background:
        linear-gradient(110deg, rgba(225, 37, 56, 0.07), transparent 35%),
        linear-gradient(250deg, rgba(24, 121, 255, 0.07), transparent 35%),
        var(--black-soft);
}

.value-grid {
    display: grid;
    align-items: start;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 100px;
}

.value-grid ul {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}

.value-grid li {
    padding: 24px 18px;
    border-bottom: 1px solid var(--border);
    color: #d4d9e2;
}

.value-grid li::before {
    margin-right: 12px;
    color: var(--cyan);
    content: "✦";
}

.trailer-placeholder {
    display: grid;
    min-height: 300px;
    margin-bottom: 24px;
    place-items: center;
    border-radius: 15px;
    background:
        radial-gradient(circle, rgba(24, 121, 255, 0.24), transparent 34%),
        #0c1119;
}

.trailer-placeholder span {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.34);
}

.trailer-placeholder small {
    position: absolute;
    margin-top: 100px;
    color: var(--muted);
}

.final-cta {
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    background:
        radial-gradient(circle at 50% 120%, rgba(225, 37, 56, 0.28), transparent 46%),
        radial-gradient(circle at 50% -20%, rgba(24, 121, 255, 0.18), transparent 38%),
        #07090d;
}

.final-cta-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    text-align: center;
}

.final-cta-content p {
    max-width: 690px;
    margin: 0 auto 35px;
    font-size: 1.15rem;
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 190px 0 110px;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 70% 0%, rgba(24, 121, 255, 0.15), transparent 36%),
        radial-gradient(circle at 20% 100%, rgba(225, 37, 56, 0.1), transparent 32%);
}

.page-hero .site-container {
    max-width: 980px;
    margin-left: max(20px, calc((100vw - var(--container)) / 2));
}

.page-hero h1 {
    margin-bottom: 25px;
    font-size: clamp(3.4rem, 7vw, 6.8rem);
}

.page-hero p {
    max-width: 700px;
    font-size: 1.2rem;
}

.story-detail-hero {
    padding: 180px 0 100px;
}

.story-detail-grid,
.detail-content-grid,
.contact-layout {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
}

.story-detail-grid h1 {
    font-size: clamp(3.5rem, 7vw, 7rem);
}

.story-artwork-placeholder {
    display: grid;
    min-height: 650px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 25%, rgba(24, 121, 255, 0.28), transparent 38%),
        linear-gradient(180deg, #151b26, #080a0e);
    box-shadow: var(--shadow);
    color: var(--muted);
}

.detail-content-grid aside {
    display: grid;
    border-top: 1px solid var(--border);
}

.detail-content-grid aside div {
    display: flex;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    gap: 30px;
}

.detail-content-grid aside span {
    color: var(--muted);
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 20px;
}

.gallery-grid div {
    display: grid;
    min-height: 360px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--charcoal);
    color: var(--muted);
}

.related-links {
    display: grid;
    border-top: 1px solid var(--border);
}

.related-links a {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.15rem;
    font-weight: 700;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.process-grid article {
    min-height: 220px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
}

.process-grid span {
    color: var(--cyan);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
}

.process-grid p {
    margin-top: 70px;
    color: var(--white);
    font-size: 1.2rem;
}

.faq-section details {
    border-top: 1px solid var(--border);
}

.faq-section details:last-child {
    border-bottom: 1px solid var(--border);
}

.faq-section summary {
    padding: 28px 0;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 800;
}

.faq-section details p {
    max-width: 740px;
    padding-bottom: 30px;
}

.contact-layout {
    align-items: start;
}

.contact-form {
    padding: 36px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.025);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.contact-form label {
    display: grid;
    margin-bottom: 20px;
    gap: 9px;
    color: #d9dde5;
    font-size: 0.85rem;
    font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #0a0d12;
    color: var(--white);
}

.contact-form input,
.contact-form select {
    height: 52px;
    padding: 0 15px;
}

.contact-form textarea {
    padding: 15px;
    resize: vertical;
}

.consent-field {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
}

.consent-field input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

.form-note {
    margin: 18px 0 0;
    font-size: 0.78rem;
}

.contact-aside {
    position: sticky;
    top: 120px;
    padding: 40px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background:
        radial-gradient(circle at 80% 0%, rgba(24, 121, 255, 0.12), transparent 35%),
        var(--charcoal);
}

.contact-aside ul {
    display: grid;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.contact-aside li {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    color: var(--silver);
}

.site-footer {
    padding: 80px 0 25px;
    border-top: 1px solid var(--border);
    background: #020304;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 0.7fr);
    gap: 60px;
}

.footer-grid > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-brand {
    margin-bottom: 24px;
}

.footer-grid p {
    max-width: 360px;
}

.footer-grid h2 {
    margin-bottom: 20px;
    color: var(--white);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-grid a,
.footer-grid span {
    margin-bottom: 11px;
    color: var(--muted);
    font-size: 0.88rem;
}

.footer-grid a:hover {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    margin-top: 65px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    justify-content: space-between;
    color: #606775;
    font-size: 0.74rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

@keyframes light-drift {
    from {
        transform: translate3d(-4%, -3%, 0) scale(0.95);
    }

    to {
        transform: translate3d(6%, 5%, 0) scale(1.08);
    }
}

@media (max-width: 1080px) {
    .primary-navigation {
        gap: 17px;
    }

    .primary-navigation > a:not(.button) {
        font-size: 0.76rem;
    }

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

    .hero-copy {
        max-width: 820px;
    }

    .hero-visual {
        min-height: 620px;
    }

    .experience-grid,
    .technology-panel,
    .value-grid {
        gap: 55px;
    }
}

@media (max-width: 860px) {
    .site-container {
        width: min(calc(100% - 30px), var(--container));
    }

    .section {
        padding: 90px 0;
    }

    .menu-toggle {
        display: grid;
        width: 46px;
        height: 46px;
        place-content: center;
        gap: 6px;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
    }

    .menu-toggle span:not(.sr-only) {
        display: block;
        width: 18px;
        height: 1px;
        background: var(--white);
    }

    .primary-navigation {
        position: absolute;
        top: 72px;
        right: 15px;
        left: 15px;
        display: none;
        padding: 25px;
        border: 1px solid var(--border);
        border-radius: 20px;
        background: rgba(5, 7, 11, 0.97);
        align-items: stretch;
        flex-direction: column;
        backdrop-filter: blur(20px);
    }

    .primary-navigation.open {
        display: flex;
    }

    .hero {
        min-height: auto;
        padding-top: 145px;
    }

    .hero-grid {
        min-height: auto;
    }

    .hero-visual {
        min-height: 560px;
    }

    .story-grid,
    .approach-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .experience-grid,
    .technology-panel,
    .value-grid,
    .story-detail-grid,
    .detail-content-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .experience-device {
        min-height: auto;
    }

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

    .capability-row span:nth-child(2n) {
        border-right: 0;
    }

    .technology-panel {
        padding: 45px;
    }

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

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

    .contact-aside {
        position: static;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: clamp(3rem, 15vw, 4.7rem);
    }

    h2 {
        font-size: clamp(2.25rem, 11vw, 3.4rem);
    }

    .section {
        padding: 75px 0;
    }

    .hero-actions,
    .centered-actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero-visual {
        min-height: 470px;
        margin-top: 20px;
    }

    .hero-poster {
        padding: 18px;
    }

    .hero-poster-left {
        top: 21%;
        width: 42%;
    }

    .hero-poster-center {
        left: 25%;
        width: 50%;
        min-height: 390px;
    }

    .hero-poster-right {
        top: 22%;
        width: 41%;
    }

    .hero-device {
        right: 3%;
        width: 150px;
    }

    .device-screen {
        min-height: 300px;
    }

    .story-grid,
    .partner-grid,
    .trailer-grid,
    .editorial-grid,
    .approach-track,
    .about-columns,
    .process-grid,
    .form-grid,
    .footer-grid,
    .value-grid ul,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .story-card-visual {
        min-height: 340px;
    }

    .story-card-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .phone-frame {
        width: 260px;
    }

    .phone-screen {
        min-height: 500px;
    }

    .capability-row {
        grid-template-columns: 1fr;
    }

    .capability-row span {
        min-height: 95px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .technology-panel {
        padding: 32px 22px;
    }

    .technology-orbit {
        min-height: 300px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .page-hero {
        padding: 155px 0 80px;
    }

    .story-artwork-placeholder {
        min-height: 470px;
    }

    .contact-form {
        padding: 25px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.presentation-body {
    background: #020305;
}

.presentation-landing {
    min-height: 100vh;
}

.presentation-premiere {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    padding: 28px max(20px, 4vw) 80px;
    background:
        linear-gradient(90deg, rgba(2, 3, 5, 0.98) 0%, rgba(2, 3, 5, 0.76) 48%, rgba(2, 3, 5, 0.32) 100%),
        radial-gradient(circle at 82% 42%, rgba(24, 121, 255, 0.2), transparent 30%),
        radial-gradient(circle at 68% 67%, rgba(225, 37, 56, 0.14), transparent 26%),
        #030508;
}

.presentation-topbar {
    position: relative;
    z-index: 10;
    display: flex;
    max-width: 1440px;
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
}

.private-access-label {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd1dc;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.presentation-premiere-grid {
    position: relative;
    z-index: 5;
    display: grid;
    max-width: 1440px;
    min-height: calc(100svh - 110px);
    margin-inline: auto;
    align-items: center;
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
    gap: clamp(50px, 7vw, 110px);
}

.presentation-premiere-copy {
    max-width: 750px;
}

.presentation-premiere-copy h1 {
    max-width: 850px;
    margin-bottom: 28px;
    font-size: clamp(3.5rem, 7vw, 7.8rem);
    font-weight: 850;
}

.presentation-lead {
    max-width: 680px;
    margin-bottom: 36px;
    color: #c3cad6;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.presentation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.presentation-confidential-note {
    display: flex;
    margin-top: 28px;
    align-items: center;
    gap: 11px;
    color: #747c8b;
    font-size: 0.78rem;
}

.presentation-confidential-note span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #56d79d;
    box-shadow: 0 0 18px rgba(86, 215, 157, 0.65);
}

.presentation-preview {
    position: relative;
    perspective: 1600px;
}

.presentation-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    background: #080b11;
    box-shadow:
        0 60px 130px rgba(0, 0, 0, 0.72),
        -28px -20px 90px rgba(24, 121, 255, 0.13),
        28px 20px 90px rgba(225, 37, 56, 0.11);
    transform: rotateY(-6deg) rotateX(2deg);
}

.presentation-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.presentation-video-placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 30px;
    flex-direction: column;
    background:
        linear-gradient(180deg, transparent 20%, rgba(2, 4, 8, 0.96)),
        radial-gradient(circle at 55% 30%, rgba(24, 121, 255, 0.4), transparent 32%),
        radial-gradient(circle at 38% 72%, rgba(225, 37, 56, 0.25), transparent 28%),
        #0b1019;
    text-align: center;
}

.presentation-play {
    display: grid;
    width: 80px;
    height: 80px;
    margin-bottom: 28px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.34);
    color: white;
    font-size: 1.3rem;
}

.presentation-video-placeholder span {
    margin-bottom: 10px;
    color: #8ed5ff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.presentation-video-placeholder strong {
    font-size: clamp(1.8rem, 3vw, 3.5rem);
    line-height: 1;
}

.presentation-video-placeholder small {
    margin-top: 15px;
    color: #70798a;
}

.presentation-screen-reflection {
    position: absolute;
    right: 8%;
    bottom: -52px;
    left: 8%;
    height: 80px;
    background: linear-gradient(90deg, rgba(24, 121, 255, 0.18), rgba(225, 37, 56, 0.13));
    filter: blur(40px);
    opacity: 0.7;
    transform: perspective(600px) rotateX(70deg);
}

.presentation-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.presentation-glow-red {
    right: -12%;
    bottom: -10%;
    width: 600px;
    height: 600px;
    background: rgba(225, 37, 56, 0.18);
}

.presentation-glow-blue {
    top: -12%;
    left: 32%;
    width: 650px;
    height: 650px;
    background: rgba(24, 121, 255, 0.13);
}

.presentation-content-width {
    width: min(calc(100% - 40px), 1120px);
    margin-inline: auto;
}

.presentation-discovery {
    padding: 130px 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(24, 121, 255, 0.08), transparent 35%),
        #05070a;
}

.presentation-discovery h2 {
    max-width: 920px;
}

.presentation-discovery > div > p {
    max-width: 780px;
    font-size: 1.12rem;
}

.presentation-discovery-grid {
    display: grid;
    margin-top: 70px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.presentation-discovery-grid article {
    min-height: 290px;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}

.presentation-discovery-grid article > span {
    color: var(--cyan);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
}

.presentation-discovery-grid h3 {
    margin-top: 70px;
}

.presentation-reserve-preview {
    padding: 140px 0;
    background:
        radial-gradient(circle at 50% 120%, rgba(225, 37, 56, 0.21), transparent 43%),
        radial-gradient(circle at 50% -20%, rgba(24, 121, 255, 0.14), transparent 36%),
        #07090d;
    text-align: center;
}

.presentation-reserve-preview .presentation-content-width {
    max-width: 850px;
}

.presentation-reserve-preview p {
    max-width: 650px;
    margin: 0 auto 35px;
    font-size: 1.12rem;
}

@media (max-width: 980px) {
    .presentation-premiere-grid {
        padding-top: 90px;
        grid-template-columns: 1fr;
    }

    .presentation-preview {
        max-width: 850px;
    }
}

@media (max-width: 700px) {
    .presentation-premiere {
        padding-inline: 18px;
    }

    .presentation-premiere-grid {
        padding-top: 75px;
    }

    .presentation-actions {
        flex-direction: column;
    }

    .presentation-actions .button {
        width: 100%;
    }

    .presentation-screen {
        transform: none;
    }

    .presentation-discovery-grid {
        grid-template-columns: 1fr;
    }

    .presentation-discovery,
    .presentation-reserve-preview {
        padding: 90px 0;
    }
}

.reservation-page,
.confirmation-page {
    min-height: 100svh;
    padding: 28px 20px 90px;
    background:
        radial-gradient(circle at 15% 0%, rgba(24, 121, 255, 0.13), transparent 31%),
        radial-gradient(circle at 85% 100%, rgba(225, 37, 56, 0.12), transparent 32%),
        #030508;
}

.reservation-shell {
    width: min(100%, 1120px);
    margin-inline: auto;
}

.reservation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reservation-back {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.reservation-intro {
    max-width: 850px;
    padding: 110px 0 60px;
}

.reservation-intro h1 {
    margin-bottom: 20px;
    font-size: clamp(3.3rem, 7vw, 6.4rem);
}

.reservation-form {
    display: grid;
    gap: 28px;
}

.reservation-step {
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid var(--border);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.26);
}

.reservation-step-heading {
    display: flex;
    margin-bottom: 38px;
    align-items: flex-start;
    gap: 18px;
}

.reservation-step-heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 800;
}

.reservation-step-heading h2 {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.reservation-step-heading p {
    margin-bottom: 0;
}

.reservation-day {
    padding: 24px 0;
    border-top: 1px solid var(--border);
}

.reservation-day h3 {
    margin-bottom: 18px;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.reservation-session-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.reservation-session {
    cursor: pointer;
}

.reservation-session input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reservation-session > span {
    display: flex;
    min-height: 92px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #090c12;
    flex-direction: column;
    justify-content: center;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.reservation-session:hover > span {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.25);
}

.reservation-session input:checked + span {
    border-color: var(--cyan);
    background:
        linear-gradient(135deg, rgba(24, 121, 255, 0.13), rgba(225, 37, 56, 0.08)),
        #0b1018;
    box-shadow: 0 0 0 3px rgba(57, 201, 255, 0.1);
}

.reservation-session strong {
    margin-bottom: 7px;
}

.reservation-session small {
    color: var(--muted);
}

.reservation-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.reservation-fields label {
    display: grid;
    gap: 9px;
    color: #d9dde5;
    font-size: 0.84rem;
    font-weight: 700;
}

.reservation-fields input,
.reservation-fields select {
    width: 100%;
    height: 54px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #080b10;
    color: var(--white);
}

.reservation-submit {
    justify-self: end;
    min-width: 240px;
}

.reservation-errors {
    margin-bottom: 28px;
    padding: 20px 24px;
    border: 1px solid rgba(225, 37, 56, 0.45);
    border-radius: 16px;
    background: rgba(225, 37, 56, 0.08);
}

.reservation-empty {
    padding: 36px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
}

.confirmation-page {
    display: grid;
    place-items: center;
}

.confirmation-card {
    width: min(100%, 760px);
    padding: clamp(32px, 7vw, 76px);
    border: 1px solid var(--border);
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 0%, rgba(24, 121, 255, 0.12), transparent 35%),
        rgba(255, 255, 255, 0.025);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.48);
    text-align: center;
}

.confirmation-icon {
    display: grid;
    width: 74px;
    height: 74px;
    margin: 0 auto 30px;
    place-items: center;
    border: 1px solid rgba(86, 215, 157, 0.4);
    border-radius: 50%;
    background: rgba(86, 215, 157, 0.08);
    color: #56d79d;
    font-size: 2rem;
    box-shadow: 0 0 40px rgba(86, 215, 157, 0.14);
}

.confirmation-card h1 {
    margin-bottom: 12px;
    font-size: clamp(3rem, 7vw, 5.8rem);
}

.confirmation-organization {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 800;
}

.confirmation-session {
    display: grid;
    margin: 38px 0;
    padding: 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.confirmation-session span {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.confirmation-session strong {
    font-size: 1.12rem;
}

.confirmation-note {
    font-size: 0.82rem;
}

@media (max-width: 760px) {
    .reservation-session-grid,
    .reservation-fields {
        grid-template-columns: 1fr;
    }

    .reservation-submit {
        width: 100%;
        justify-self: stretch;
    }

    .reservation-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }
}

.experience-state-page {
    display: grid;
    min-height: 100svh;
    padding: 30px 20px;
    place-items: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(24, 121, 255, 0.15), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(225, 37, 56, 0.12), transparent 38%),
        #030508;
}

.experience-state-card {
    width: min(100%, 850px);
    padding: clamp(38px, 8vw, 90px);
    border: 1px solid var(--border);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 45px 140px rgba(0, 0, 0, 0.52);
    text-align: center;
}

.experience-state-card h1 {
    margin-bottom: 18px;
    font-size: clamp(3.5rem, 8vw, 7rem);
}

.experience-state-card > p {
    max-width: 650px;
    margin-inline: auto;
}

.experience-organization {
    color: var(--white);
    font-size: 1.35rem;
    font-weight: 800;
}

.experience-countdown {
    display: grid;
    margin: 45px 0;
    padding: 30px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.experience-countdown span {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.experience-countdown strong {
    font-size: clamp(2.5rem, 8vw, 5rem);
    letter-spacing: 0.04em;
}

.experience-status-note {
    margin-top: 28px;
    color: var(--muted);
    font-size: 0.82rem;
}

.experience-live-page {
    min-height: 100svh;
    padding: 28px max(20px, 4vw) 70px;
    background:
        radial-gradient(circle at 70% 0%, rgba(24, 121, 255, 0.13), transparent 34%),
        #030508;
}

.experience-live-header {
    display: flex;
    max-width: 1400px;
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
}

.experience-live-welcome {
    width: min(100%, 1100px);
    margin: 90px auto 45px;
    text-align: center;
}

.experience-live-welcome h1 {
    margin-bottom: 18px;
    font-size: clamp(3.3rem, 7vw, 6.5rem);
}

.experience-live-welcome p {
    font-size: 1.15rem;
}

.experience-live-welcome strong {
    color: var(--white);
}

.experience-player-shell {
    overflow: hidden;
    width: min(100%, 1200px);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    background: #080b11;
    box-shadow:
        0 55px 130px rgba(0, 0, 0, 0.68),
        -25px -15px 75px rgba(24, 121, 255, 0.11),
        25px 15px 75px rgba(225, 37, 56, 0.09);
}

.experience-player-shell iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.experience-player-placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 30px;
    flex-direction: column;
    background:
        linear-gradient(180deg, transparent, rgba(2, 4, 8, 0.95)),
        radial-gradient(circle at 50% 25%, rgba(24, 121, 255, 0.35), transparent 34%),
        #0a1019;
    text-align: center;
}

.experience-player-placeholder span {
    margin-bottom: 14px;
    color: var(--cyan);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.experience-player-placeholder strong {
    font-size: clamp(2rem, 5vw, 4.8rem);
    line-height: 1;
}

.experience-player-placeholder p {
    max-width: 580px;
    margin-top: 22px;
}

.experience-live-page > .experience-status-note {
    max-width: 900px;
    margin: 24px auto 0;
    text-align: center;
}

.confirmation-actions {
    display: flex;
    margin-top: 32px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

@media (max-width: 700px) {
    .experience-live-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .experience-live-welcome {
        margin-top: 70px;
    }

    .confirmation-actions {
        flex-direction: column;
    }

    .confirmation-actions .button {
        width: 100%;
    }
}

.experience-commercial-next-step {
    display: grid;
    margin-top: 42px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
    justify-items: center;
}

.experience-commercial-next-step > span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.experience-commercial-next-step h2 {
    max-width: 620px;
    margin: 16px 0 25px;
    font-size: clamp(2rem, 5vw, 3.8rem);
}

.experience-progress-status {
    display: grid;
    width: min(100%, 900px);
    margin: 25px auto 0;
    gap: 12px;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.experience-progress-track {
    overflow: hidden;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.experience-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--blue),
        var(--cyan),
        var(--red)
    );
    box-shadow: 0 0 18px rgba(57, 201, 255, 0.35);
    transition: width 300ms linear;
}

.admin-login-page {
    display: grid;
    min-height: 100svh;
    padding: 30px 20px;
    place-items: center;
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(24, 121, 255, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 100%,
            rgba(225, 37, 56, 0.12),
            transparent 35%
        ),
        #030508;
}

.admin-login-card {
    width: min(100%, 600px);
    padding: clamp(32px, 6vw, 65px);
    border: 1px solid var(--border);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.026);
    box-shadow: 0 45px 140px rgba(0, 0, 0, 0.5);
}

.admin-login-heading {
    margin: 65px 0 36px;
}

.admin-login-heading h1 {
    margin-bottom: 18px;
    font-size: clamp(2.8rem, 7vw, 5rem);
}

.admin-login-form {
    display: grid;
    gap: 20px;
}

.admin-login-form label {
    display: grid;
    gap: 9px;
    color: #d9dde5;
    font-size: 0.84rem;
    font-weight: 700;
}

.admin-login-form input[type="email"],
.admin-login-form input[type="password"] {
    width: 100%;
    height: 55px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #080b10;
    color: var(--white);
}

.admin-remember {
    display: flex !important;
    align-items: center;
    grid-template-columns: auto 1fr;
}

.admin-remember input {
    width: 18px;
    height: 18px;
}

.presentation-admin-shell {
    display: grid;
    min-height: 100svh;
    grid-template-columns: 270px minmax(0, 1fr);
    background: #05070a;
}

.presentation-admin-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100svh;
    padding: 30px 24px;
    border-right: 1px solid var(--border);
    background: #030508;
    flex-direction: column;
}

.presentation-admin-sidebar nav {
    display: grid;
    margin-top: 70px;
    gap: 8px;
}

.presentation-admin-sidebar nav a,
.presentation-admin-sidebar nav span {
    padding: 13px 15px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.presentation-admin-sidebar nav a.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
}

.presentation-admin-sidebar form {
    margin-top: auto;
}

.admin-logout {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
}

.presentation-admin-main {
    width: min(100%, 1500px);
    padding: clamp(30px, 5vw, 75px);
}

.presentation-admin-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.presentation-admin-header h1 {
    margin-bottom: 18px;
    font-size: clamp(3rem, 6vw, 6rem);
}

.presentation-admin-header p {
    max-width: 650px;
}

.admin-summary-grid {
    display: grid;
    margin: 60px 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.admin-summary-grid article {
    display: grid;
    min-height: 145px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    align-content: space-between;
}

.admin-summary-grid span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-summary-grid strong {
    font-size: 2.8rem;
}

.admin-presentation-list {
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--border);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.018);
}

.admin-section-heading {
    margin-bottom: 30px;
}

.admin-section-heading h2 {
    margin-bottom: 8px;
    font-size: 2.2rem;
}

.admin-presentation-row {
    display: grid;
    padding: 25px 0;
    border-top: 1px solid var(--border);
    align-items: center;
    grid-template-columns:
        minmax(250px, 1.2fr)
        minmax(360px, 1fr)
        auto;
    gap: 30px;
}

.admin-presentation-identity {
    display: flex;
    align-items: center;
    gap: 17px;
}

.admin-presentation-identity h3 {
    margin-bottom: 7px;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.admin-presentation-identity code {
    color: var(--muted);
    font-size: 0.72rem;
}

.admin-status {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-status-published {
    border-color: rgba(86, 215, 157, 0.35);
    background: rgba(86, 215, 157, 0.08);
    color: #75e5b0;
}

.admin-presentation-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.admin-presentation-metrics span {
    display: grid;
    color: var(--muted);
    font-size: 0.68rem;
    text-align: center;
}

.admin-presentation-metrics strong {
    color: var(--white);
    font-size: 1.3rem;
}

.admin-presentation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 1100px) {
    .presentation-admin-shell {
        grid-template-columns: 1fr;
    }

    .presentation-admin-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .presentation-admin-sidebar nav {
        margin-top: 35px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .presentation-admin-sidebar form {
        margin-top: 30px;
    }

    .admin-presentation-row {
        grid-template-columns: 1fr;
    }

    .admin-presentation-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .presentation-admin-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-summary-grid,
    .admin-presentation-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-presentation-identity {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Presentation Center Admin typography */
.admin-login-page,
.admin-login-page button,
.admin-login-page input,
.admin-login-page select,
.admin-login-page textarea,
.presentation-admin-shell,
.presentation-admin-shell button,
.presentation-admin-shell input,
.presentation-admin-shell select,
.presentation-admin-shell textarea {
    font-family:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;
}

.admin-editor-form {
    display: grid;
    margin-top: 55px;
    gap: 25px;
}

.admin-editor-section {
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
}

.admin-editor-section-heading {
    display: flex;
    margin-bottom: 35px;
    gap: 18px;
}

.admin-editor-section-heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-editor-section-heading h2 {
    margin-bottom: 7px;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.admin-editor-section-heading p {
    margin-bottom: 0;
}

.admin-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-editor-grid label {
    display: grid;
    gap: 9px;
    color: #d9dde5;
    font-size: 0.84rem;
    font-weight: 700;
}

.admin-editor-grid input,
.admin-editor-grid select,
.admin-editor-grid textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #080b10;
    color: var(--white);
    font-family:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;
}

.admin-editor-grid input,
.admin-editor-grid select {
    height: 54px;
    padding: 0 15px;
}

.admin-editor-grid textarea {
    padding: 15px;
    resize: vertical;
}

.admin-editor-grid small {
    color: var(--muted);
    font-weight: 400;
}

.admin-editor-full {
    grid-column: 1 / -1;
}

.admin-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.admin-success-message {
    margin-top: 35px;
    padding: 18px 22px;
    border: 1px solid rgba(86, 215, 157, 0.35);
    border-radius: 14px;
    background: rgba(86, 215, 157, 0.08);
    color: #75e5b0;
    font-weight: 700;
}

@media (max-width: 760px) {
    .admin-editor-grid {
        grid-template-columns: 1fr;
    }

    .admin-editor-full {
        grid-column: auto;
    }

    .admin-editor-actions {
        flex-direction: column-reverse;
    }

    .admin-editor-actions .button {
        width: 100%;
    }
}

/* Definitive Presentation Center Admin visual override */
.admin-login-page,
.admin-login-page *,
.presentation-admin-shell,
.presentation-admin-shell * {
    font-family:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;
}

.admin-login-page h1,
.admin-login-page h2,
.admin-login-page h3,
.presentation-admin-shell h1,
.presentation-admin-shell h2,
.presentation-admin-shell h3,
.presentation-admin-shell h4 {
    font-family:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em;
}

.presentation-admin-main {
    overflow: hidden;
}

.admin-editor-section {
    display: block !important;
    margin: 0 !important;
}

.admin-editor-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.admin-editor-grid label {
    display: flex !important;
    min-width: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.admin-editor-grid input,
.admin-editor-grid select,
.admin-editor-grid textarea,
.admin-login-form input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 12px !important;
    background: #0b0e13 !important;
    color: #f4f6fa !important;
    box-shadow: none !important;
    outline: none;
}

.admin-editor-grid input,
.admin-editor-grid select,
.admin-login-form input {
    height: 54px !important;
    padding: 0 16px !important;
}

.admin-editor-grid textarea {
    min-height: 125px !important;
    padding: 15px 16px !important;
    line-height: 1.55;
}

.admin-editor-grid input:focus,
.admin-editor-grid select:focus,
.admin-editor-grid textarea:focus,
.admin-login-form input:focus {
    border-color: #55c8ff !important;
    box-shadow: 0 0 0 3px rgba(85, 200, 255, 0.12) !important;
}

.admin-editor-full {
    grid-column: 1 / -1 !important;
}

.admin-editor-section-heading h2 {
    font-size: clamp(1.75rem, 3vw, 2.6rem) !important;
}

.presentation-admin-header h1 {
    font-size: clamp(2.8rem, 5vw, 5.4rem) !important;
}

.admin-section-heading h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
}

.admin-presentation-identity h3 {
    font-size: 1.25rem !important;
}

@media (max-width: 760px) {
    .admin-editor-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-editor-full {
        grid-column: auto !important;
    }
}

.admin-cta-list {
    display: grid;
    gap: 18px;
}

.admin-cta-editor {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #070a0f;
}

.admin-cta-editor-heading {
    display: flex;
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-cta-editor-heading span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-cta-editor-heading h3 {
    margin-top: 7px;
    font-size: 1.45rem;
}

.admin-cta-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--white);
    cursor: pointer;
    font-weight: 700;
}

.admin-cta-toggle input[type="checkbox"] {
    width: 19px;
    height: 19px;
    accent-color: var(--cyan);
}

@media (max-width: 700px) {
    .admin-cta-editor-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.admin-session-create {
    margin-top: 55px !important;
}

.admin-session-list {
    display: grid;
    gap: 14px;
}

.admin-session-row {
    display: grid;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #070a0f;
    align-items: center;
    grid-template-columns:
        minmax(250px, 1.3fr)
        minmax(230px, 0.7fr)
        auto;
    gap: 25px;
}

.admin-session-row h3 {
    margin: 12px 0 7px;
    font-size: 1.3rem !important;
}

.admin-session-row p {
    margin: 0;
    font-size: 0.82rem;
}

.admin-status-available {
    border-color: rgba(86, 215, 157, 0.35);
    background: rgba(86, 215, 157, 0.08);
    color: #75e5b0;
}

.admin-status-closed {
    border-color: rgba(255, 184, 77, 0.35);
    background: rgba(255, 184, 77, 0.08);
    color: #ffc36b;
}

.admin-session-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-session-meta span {
    display: grid;
    color: var(--muted);
    font-size: 0.68rem;
    text-align: center;
}

.admin-session-meta strong {
    color: var(--white);
    font-size: 1.2rem;
}

.admin-session-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.button-danger {
    border-color: rgba(225, 37, 56, 0.42);
    background: rgba(225, 37, 56, 0.1);
    color: #ff8390;
}

@media (max-width: 900px) {
    .admin-session-row {
        grid-template-columns: 1fr;
    }

    .admin-session-actions {
        justify-content: flex-start;
    }
}

.admin-reservation-section {
    margin-top: 55px !important;
}

.admin-reservation-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(170px, 0.7fr)
        minmax(190px, 0.8fr)
        auto;
    align-items: end;
    gap: 16px;
}

.admin-reservation-filters label {
    display: grid;
    gap: 9px;
    color: #d9dde5;
    font-size: 0.84rem;
    font-weight: 700;
}

.admin-reservation-filters input,
.admin-reservation-filters select {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #080b10;
    color: var(--white);
}

.admin-reservation-filter-actions {
    display: flex;
    gap: 10px;
}

.admin-reservation-table-wrap {
    overflow-x: auto;
}

.admin-reservation-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.admin-reservation-table th,
.admin-reservation-table td {
    padding: 18px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.admin-reservation-table th {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-reservation-table td {
    color: var(--white);
    font-size: 0.84rem;
}

.admin-reservation-table td strong,
.admin-reservation-table td small {
    display: block;
}

.admin-reservation-table td small {
    margin-top: 5px;
    color: var(--muted);
}

.admin-reservation-progress {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 0.72rem;
}

.admin-pagination {
    margin-top: 28px;
}

@media (max-width: 1050px) {
    .admin-reservation-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-reservation-filters {
        grid-template-columns: 1fr;
    }

    .admin-reservation-filter-actions {
        flex-direction: column;
    }

    .admin-reservation-filter-actions .button {
        width: 100%;
    }
}

.analytics-kpi-grid {
    display: grid;
    margin: 55px 0 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.analytics-kpi-grid article {
    display: grid;
    min-height: 155px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
    align-content: space-between;
}

.analytics-kpi-grid span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.analytics-kpi-grid strong {
    margin: 18px 0 5px;
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.04em;
}

.analytics-kpi-grid small {
    color: var(--cyan);
    font-size: 0.74rem;
}

.analytics-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    gap: 24px;
}

.analytics-funnel {
    display: grid;
    gap: 24px;
}

.analytics-funnel-label {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.analytics-funnel-label div {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.analytics-funnel-label span {
    color: #dfe4ed;
    font-size: 0.82rem;
    font-weight: 700;
}

.analytics-funnel-label strong {
    color: var(--white);
    font-size: 1.25rem;
}

.analytics-funnel-label small {
    color: var(--cyan);
    font-weight: 800;
}

.analytics-funnel-track {
    overflow: hidden;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.analytics-funnel-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--blue),
        var(--cyan),
        var(--red)
    );
    box-shadow: 0 0 24px rgba(57, 201, 255, 0.28);
}

.analytics-breakdown {
    display: grid;
    gap: 12px;
}

.analytics-breakdown > div {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.analytics-breakdown span {
    color: var(--muted);
    font-size: 0.82rem;
}

.analytics-breakdown strong {
    color: var(--white);
    font-size: 1.3rem;
}

.analytics-activity-section {
    margin-top: 24px !important;
}

.analytics-activity-list {
    display: grid;
}

.analytics-activity-list article {
    display: flex;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.analytics-activity-list article > div:first-child {
    display: grid;
    gap: 5px;
}

.analytics-activity-list strong {
    color: var(--white);
    font-size: 0.9rem;
}

.analytics-activity-list span,
.analytics-activity-list small {
    color: var(--muted);
    font-size: 0.75rem;
}

.analytics-activity-state {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.analytics-activity-state > span {
    color: var(--cyan);
    font-weight: 800;
}

@media (max-width: 1150px) {
    .analytics-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .analytics-kpi-grid {
        grid-template-columns: 1fr;
    }

    .analytics-activity-list article {
        align-items: flex-start;
        flex-direction: column;
    }

    .analytics-activity-state {
        justify-items: start;
    }
}

/* =========================================================
   PREMIUM PRESENTATION EXPERIENCE
   ========================================================= */

.premium-experience-body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(139, 92, 246, 0.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(59, 130, 246, 0.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #020305 0%,
            #060910 48%,
            #020305 100%
        );
    color: #ffffff;
}

.premium-experience-page,
.premium-live-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.premium-experience-page {
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.premium-experience-glow {
    position: fixed;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    filter: blur(120px);
    opacity: 0.20;
    pointer-events: none;
}

.premium-experience-glow-one {
    top: -180px;
    left: -120px;
    background: #7c3aed;
}

.premium-experience-glow-two {
    right: -160px;
    bottom: -200px;
    background: #2563eb;
}

.premium-experience-card {
    width: min(820px, 100%);
    padding: clamp(32px, 6vw, 72px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.025)
        );
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(26px);
    text-align: center;
}

.premium-experience-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.premium-brand-symbol {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 18px;
    font-weight: 800;
}

.premium-experience-brand div {
    display: grid;
    text-align: left;
}

.premium-experience-brand strong {
    font-size: 14px;
    letter-spacing: 0.24em;
}

.premium-experience-brand small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 9px;
    letter-spacing: 0.34em;
}

.premium-experience-badge,
.premium-private-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.70);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.premium-experience-badge {
    margin: 34px 0 40px;
}

.premium-experience-kicker {
    display: block;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.premium-experience-copy h1,
.premium-finished-card h1,
.premium-live-introduction h1 {
    margin: 0;
    font-size: clamp(36px, 7vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.premium-experience-intro,
.premium-live-introduction p {
    max-width: 610px;
    margin: 22px auto 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 17px;
    line-height: 1.75;
}

.premium-host-card {
    display: grid;
    gap: 5px;
    width: min(360px, 100%);
    margin: 34px auto 0;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.premium-host-card span,
.premium-host-card small,
.premium-session-details span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.premium-host-card strong {
    font-size: 18px;
}

.premium-session-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0 0;
}

.premium-session-details > div {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.premium-session-details strong {
    font-size: 15px;
}

.premium-countdown {
    margin-top: 40px;
}

.premium-countdown span {
    display: block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.50);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.premium-countdown strong {
    display: block;
    font-size: clamp(38px, 8vw, 72px);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.premium-experience-note {
    margin: 32px auto 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 13px;
    line-height: 1.7;
}

.premium-live-page {
    padding: 26px clamp(18px, 4vw, 54px) 54px;
}

.premium-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1320px;
    margin: 0 auto;
}

.premium-live-introduction {
    max-width: 900px;
    margin: 70px auto 38px;
    text-align: center;
}

.premium-player-frame {
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: rgba(0, 0, 0, 0.45);
    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.025);
}

.premium-player-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.premium-player-topline span {
    font-size: 13px;
    font-weight: 700;
}

.premium-player-topline small {
    color: rgba(255, 255, 255, 0.44);
}

.premium-player-ratio {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.premium-player-ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.premium-player-placeholder {
    display: grid;
    place-items: center;
    min-height: 560px;
    padding: 50px 24px;
    text-align: center;
}

.premium-player-placeholder span {
    color: rgba(255, 255, 255, 0.40);
    font-size: 11px;
    letter-spacing: 0.16em;
}

.premium-player-placeholder strong {
    margin-top: 14px;
    font-size: 28px;
}

.premium-player-placeholder p {
    max-width: 560px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.7;
}

.premium-progress-area {
    max-width: 1180px;
    margin: 22px auto 0;
}

.premium-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
}

.premium-progress-copy small {
    color: rgba(255, 255, 255, 0.40);
}

.premium-progress-track {
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
}

.premium-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #8b5cf6,
        #3b82f6
    );
    transition: width 0.35s ease;
}

.premium-completion-mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 34px auto 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.20),
            rgba(59, 130, 246, 0.16)
        );
    font-size: 26px;
}

.premium-finished-divider {
    width: 80px;
    height: 1px;
    margin: 38px auto;
    background: rgba(255, 255, 255, 0.15);
}

.premium-next-step-copy span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.premium-next-step-copy h2 {
    max-width: 620px;
    margin: 14px auto 0;
    font-size: clamp(28px, 5vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.premium-next-step-copy p {
    max-width: 560px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.56);
    line-height: 1.7;
}

.premium-primary-cta {
    display: inline-flex;
    min-width: 290px;
    justify-content: center;
    margin-top: 32px;
    padding: 17px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .premium-experience-page {
        padding: 18px 12px;
    }

    .premium-experience-card {
        padding: 30px 20px;
        border-radius: 22px;
    }

    .premium-session-details {
        grid-template-columns: 1fr;
    }

    .premium-countdown strong {
        letter-spacing: 0.025em;
    }

    .premium-live-page {
        padding: 20px 12px 36px;
    }

    .premium-live-header {
        align-items: flex-start;
        gap: 14px;
    }

    .premium-live-introduction {
        margin-top: 54px;
    }

    .premium-player-frame {
        border-radius: 18px;
    }

    .premium-player-topline,
    .premium-progress-copy {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-player-placeholder {
        min-height: 360px;
    }

    .premium-primary-cta {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   MEZEL STUDIOS — CINEMATIC HOME V1
   ========================================================= */

.cinematic-site-body {
    background: #030406;
}

.cinematic-header {
    background:
        linear-gradient(
            180deg,
            rgba(3, 4, 6, 0.90),
            rgba(3, 4, 6, 0)
        );
}

.cinematic-header.scrolled {
    background: rgba(3, 4, 6, 0.92);
}

.cinematic-navigation {
    gap: 22px;
}

.cinematic-navigation > a:not(.button) {
    position: relative;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.77rem;
    letter-spacing: 0.015em;
}

.cinematic-navigation > a:not(.button)::after {
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    background: #ffffff;
    content: "";
    transition: transform 180ms ease;
}

.cinematic-navigation > a:hover::after,
.cinematic-navigation > a.active::after {
    transform: scaleX(1);
}

.cinematic-home-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    padding: 145px 0 90px;
    background:
        linear-gradient(
            180deg,
            rgba(3, 4, 6, 0.04) 0%,
            rgba(3, 4, 6, 0.34) 64%,
            #030406 100%
        ),
        radial-gradient(
            circle at 77% 38%,
            rgba(36, 68, 119, 0.22),
            transparent 34%
        ),
        #030406;
}

.cinematic-home-noise {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 3px
        );
    pointer-events: none;
    mix-blend-mode: overlay;
}

.cinematic-home-orb {
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 999px;
    filter: blur(150px);
    opacity: 0.17;
    pointer-events: none;
}

.cinematic-home-orb-one {
    top: -250px;
    left: -180px;
    background: #173b72;
}

.cinematic-home-orb-two {
    right: -180px;
    bottom: -260px;
    background: #6c1523;
}

.cinematic-home-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: calc(100svh - 235px);
    align-items: center;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(480px, 1.12fr);
    gap: clamp(42px, 7vw, 96px);
}

.cinematic-home-copy {
    max-width: 680px;
}

.cinematic-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.cinematic-kicker::before {
    width: 38px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #c4172c,
            rgba(255, 255, 255, 0.62)
        );
    content: "";
}

.cinematic-home-copy h1 {
    max-width: 760px;
    margin: 28px 0 28px;
    font-size: clamp(3.7rem, 6.8vw, 7.4rem);
    font-weight: 780;
    letter-spacing: -0.065em;
    line-height: 0.91;
}

.cinematic-home-copy h1 em {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.56);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.69em;
    font-weight: 400;
    letter-spacing: -0.045em;
}

.cinematic-home-copy > p {
    max-width: 620px;
    margin-bottom: 34px;
    color: rgba(255, 255, 255, 0.61);
    font-size: 1.06rem;
    line-height: 1.78;
}

.cinematic-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.cinematic-home-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 38px;
}

.cinematic-home-meta span,
.cinematic-holiday-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cinematic-collage {
    position: relative;
    min-height: 660px;
    perspective: 1200px;
}

.cinematic-poster {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.025);
    transition:
        transform 360ms ease,
        filter 360ms ease,
        z-index 0s;
}

.cinematic-poster:hover {
    z-index: 10;
    filter: brightness(1.12);
}

.cinematic-poster-main {
    top: 8px;
    left: 13%;
    z-index: 4;
    width: 49%;
    height: 610px;
    transform: rotate(-2deg);
}

.cinematic-poster-main:hover {
    transform:
        rotate(0deg)
        translateY(-10px)
        scale(1.025);
}

.cinematic-poster-secondary {
    top: 110px;
    right: 0;
    z-index: 3;
    width: 40%;
    height: 440px;
    transform: rotate(4deg);
}

.cinematic-poster-secondary:hover {
    transform:
        rotate(1deg)
        translateY(-10px)
        scale(1.03);
}

.cinematic-poster-tertiary {
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 39%;
    height: 330px;
    transform: rotate(-6deg);
}

.cinematic-poster-tertiary:hover {
    transform:
        rotate(-2deg)
        translateY(-10px)
        scale(1.035);
}

.cinematic-poster-art {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

.cinematic-poster-art::before,
.cinematic-feature-image::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.13) 38%,
            rgba(0, 0, 0, 0.90)
        );
    content: "";
}

.pit-art {
    background:
        radial-gradient(
            circle at 55% 27%,
            rgba(86, 185, 176, 0.48),
            transparent 22%
        ),
        linear-gradient(
            155deg,
            #102d39 0%,
            #14212c 44%,
            #050708 100%
        );
}

.pit-art::after {
    position: absolute;
    top: 19%;
    left: 50%;
    width: 122px;
    height: 122px;
    transform: translateX(-50%);
    border: 1px solid rgba(160, 255, 235, 0.35);
    border-radius: 50%;
    box-shadow:
        0 0 50px rgba(80, 255, 222, 0.19),
        inset 0 0 30px rgba(80, 255, 222, 0.11);
    content: "";
}

.bridge-art {
    background:
        radial-gradient(
            circle at 70% 26%,
            rgba(232, 170, 82, 0.25),
            transparent 24%
        ),
        linear-gradient(
            150deg,
            #33241d,
            #11131b 55%,
            #050608
        );
}

.bridge-art::after {
    position: absolute;
    right: -20%;
    bottom: 23%;
    width: 135%;
    height: 3px;
    transform: rotate(-7deg);
    background: rgba(255, 226, 176, 0.24);
    box-shadow: 0 0 34px rgba(255, 191, 102, 0.18);
    content: "";
}

.christmas-art {
    background:
        radial-gradient(
            circle at 66% 18%,
            rgba(255, 224, 150, 0.38),
            transparent 17%
        ),
        linear-gradient(
            150deg,
            #184149,
            #10262f 48%,
            #071014
        );
}

.christmas-art::after {
    position: absolute;
    top: 18%;
    right: 16%;
    width: 65px;
    height: 65px;
    border-radius: 999px;
    background: rgba(255, 230, 174, 0.78);
    box-shadow: 0 0 42px rgba(255, 217, 140, 0.42);
    content: "";
}

.cinematic-poster-label,
.cinematic-poster-art > div {
    position: relative;
    z-index: 2;
}

.cinematic-poster-label {
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.cinematic-poster-art small {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.57);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.cinematic-poster-art strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.6vw, 2.65rem);
    font-weight: 400;
    line-height: 0.96;
}

.cinematic-collage-caption {
    position: absolute;
    right: 2%;
    bottom: 4px;
    z-index: 8;
    display: grid;
    gap: 4px;
    padding: 15px 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(3, 4, 6, 0.66);
    backdrop-filter: blur(12px);
}

.cinematic-collage-caption span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.cinematic-collage-caption strong {
    font-size: 0.82rem;
}

.cinematic-scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 4;
    display: flex;
    transform: translateX(-50%);
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cinematic-scroll-cue span {
    width: 34px;
    height: 1px;
    background: rgba(255, 255, 255, 0.33);
}

.cinematic-section {
    position: relative;
    padding: 125px 0;
}

.cinematic-featured-section {
    background:
        linear-gradient(
            180deg,
            #030406,
            #080a0e 52%,
            #030406
        );
}

.cinematic-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 46px;
}

.cinematic-section-heading h2 {
    max-width: 760px;
    margin: 20px 0 0;
    font-size: clamp(2.5rem, 5vw, 5.1rem);
}

.cinematic-section-heading p {
    max-width: 690px;
    margin: 22px auto 0;
}

.centered-heading {
    justify-content: center;
    text-align: center;
}

.centered-heading > div {
    max-width: 850px;
}

.cinematic-heading-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.cinematic-heading-link span {
    transition: transform 180ms ease;
}

.cinematic-heading-link:hover span {
    transform: translateX(5px);
}

.cinematic-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cinematic-feature-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: #0a0c10;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28);
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.cinematic-feature-card:hover {
    z-index: 4;
    transform: translateY(-12px) scale(1.018);
    border-color: rgba(255, 255, 255, 0.23);
    box-shadow: 0 35px 85px rgba(0, 0, 0, 0.55);
}

.cinematic-feature-image {
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

.featured-pit .cinematic-feature-image {
    background:
        radial-gradient(
            circle at 65% 28%,
            rgba(74, 200, 181, 0.36),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #173844,
            #0c1c26 55%,
            #050708
        );
}

.featured-bridge .cinematic-feature-image {
    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(218, 145, 72, 0.25),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #422d21,
            #151720 55%,
            #050608
        );
}

.featured-christmas .cinematic-feature-image {
    background:
        radial-gradient(
            circle at 69% 23%,
            rgba(255, 220, 148, 0.32),
            transparent 20%
        ),
        linear-gradient(
            145deg,
            #1b4850,
            #132a34 55%,
            #060b0e
        );
}

.cinematic-feature-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 38%,
            rgba(0, 0, 0, 0.81)
        );
}

.cinematic-feature-status {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.cinematic-feature-index {
    position: absolute;
    right: 15px;
    bottom: -24px;
    color: rgba(255, 255, 255, 0.08);
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
}

.cinematic-feature-content {
    padding: 26px;
}

.cinematic-feature-content > span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.cinematic-feature-content h3 {
    margin: 12px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.75rem;
    font-weight: 400;
}

.cinematic-feature-content p {
    min-height: 76px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.87rem;
    line-height: 1.65;
}

.cinematic-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.73rem;
    font-weight: 800;
}

.cinematic-card-link span {
    font-size: 1.05rem;
    transition: transform 180ms ease;
}

.cinematic-feature-card:hover .cinematic-card-link span {
    transform: translateX(5px);
}

.cinematic-holiday-section {
    position: relative;
    overflow: hidden;
    padding: 135px 0;
    background:
        linear-gradient(
            90deg,
            rgba(5, 14, 18, 0.98),
            rgba(7, 28, 34, 0.90) 55%,
            rgba(13, 34, 36, 0.82)
        );
}

.cinematic-holiday-section::before {
    position: absolute;
    inset: 0;
    opacity: 0.23;
    background:
        radial-gradient(
            circle at 83% 19%,
            rgba(255, 226, 164, 0.52),
            transparent 16%
        ),
        radial-gradient(
            circle at 65% 70%,
            rgba(46, 114, 107, 0.32),
            transparent 30%
        );
    content: "";
}

.cinematic-holiday-snow {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.80) 0 1px,
            transparent 1.5px
        );
    background-size: 38px 38px;
    pointer-events: none;
}

.cinematic-holiday-grid {
    position: relative;
    z-index: 2;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 0.85fr) minmax(460px, 1.15fr);
    gap: 80px;
}

.cinematic-holiday-copy h2 {
    margin: 24px 0 24px;
    font-size: clamp(3rem, 5.4vw, 6rem);
    letter-spacing: -0.055em;
}

.cinematic-holiday-copy h2 em {
    display: block;
    color: #e7c994;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.cinematic-holiday-copy > p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 1rem;
    line-height: 1.75;
}

.cinematic-holiday-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 27px 0 34px;
}

.cinematic-holiday-art {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 70% 17%,
            rgba(255, 225, 165, 0.30),
            transparent 18%
        ),
        linear-gradient(
            160deg,
            #27525b,
            #102932 48%,
            #060c0f
        );
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.cinematic-holiday-moon {
    position: absolute;
    top: 14%;
    right: 14%;
    width: 115px;
    height: 115px;
    border-radius: 999px;
    background: #f4d9a0;
    box-shadow:
        0 0 60px rgba(255, 226, 165, 0.50),
        0 0 140px rgba(255, 226, 165, 0.20);
}

.cinematic-holiday-town {
    position: absolute;
    right: -3%;
    bottom: 0;
    left: -3%;
    height: 35%;
    background:
        linear-gradient(
            155deg,
            transparent 0 27%,
            #081114 27% 45%,
            transparent 45%
        ),
        linear-gradient(
            25deg,
            transparent 0 35%,
            #071013 35% 53%,
            transparent 53%
        ),
        #071013;
    clip-path:
        polygon(
            0 50%,
            9% 38%,
            16% 48%,
            23% 31%,
            31% 51%,
            41% 29%,
            52% 49%,
            63% 24%,
            72% 48%,
            82% 32%,
            92% 49%,
            100% 37%,
            100% 100%,
            0 100%
        );
}

.cinematic-holiday-title {
    position: absolute;
    top: 23%;
    left: 9%;
    z-index: 4;
    max-width: 320px;
}

.cinematic-holiday-title span {
    display: block;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.20em;
}

.cinematic-holiday-title strong {
    display: block;
    color: #fff5dc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.2rem, 5vw, 5.6rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.06em;
}

.cinematic-holiday-title small {
    display: block;
    max-width: 260px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.6;
}

.cinematic-audiences-section {
    background:
        linear-gradient(
            180deg,
            #030406,
            #090b10,
            #030406
        );
}

.cinematic-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 55px;
}

.cinematic-audience-card {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    padding: 38px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: #0a0c10;
    transition:
        transform 260ms ease,
        border-color 260ms ease;
}

.cinematic-audience-card::before {
    position: absolute;
    inset: 0;
    opacity: 0.40;
    content: "";
    transition: opacity 260ms ease;
}

.audience-schools::before {
    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(31, 123, 194, 0.48),
            transparent 30%
        );
}

.audience-bookstores::before {
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(165, 91, 50, 0.48),
            transparent 30%
        );
}

.audience-distributors::before {
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(99, 71, 170, 0.48),
            transparent 30%
        );
}

.cinematic-audience-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.22);
}

.cinematic-audience-card:hover::before {
    opacity: 0.65;
}

.cinematic-audience-number,
.cinematic-audience-card > * {
    position: relative;
    z-index: 2;
}

.cinematic-audience-number {
    position: absolute;
    top: 8px;
    right: 18px;
    color: rgba(255, 255, 255, 0.055);
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
}

.cinematic-audience-label {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.cinematic-audience-card h3 {
    max-width: 380px;
    margin: 110px 0 20px;
    font-size: clamp(2rem, 3vw, 3.1rem);
    letter-spacing: -0.05em;
}

.cinematic-audience-card p {
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.56);
    line-height: 1.7;
}

.cinematic-audience-card a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.77rem;
    font-weight: 800;
}

.cinematic-audience-card a span {
    transition: transform 180ms ease;
}

.cinematic-audience-card a:hover span {
    transform: translateX(5px);
}

.cinematic-story-engine-section {
    padding: 145px 0;
    background:
        radial-gradient(
            circle at 22% 50%,
            rgba(34, 80, 144, 0.18),
            transparent 28%
        ),
        #05070a;
}

.cinematic-story-engine-grid {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(440px, 0.95fr) minmax(0, 1.05fr);
    gap: 90px;
}

.cinematic-story-engine-visual {
    position: relative;
    min-height: 600px;
}

.cinematic-engine-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.ring-one {
    width: 220px;
    height: 220px;
}

.ring-two {
    width: 380px;
    height: 380px;
}

.ring-three {
    width: 550px;
    height: 550px;
}

.cinematic-engine-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 175px;
    height: 175px;
    transform: translate(-50%, -50%);
    place-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background:
        radial-gradient(
            circle,
            rgba(31, 106, 192, 0.28),
            rgba(8, 15, 25, 0.92)
        );
    box-shadow:
        0 0 80px rgba(26, 109, 213, 0.20),
        inset 0 0 45px rgba(255, 255, 255, 0.04);
    text-align: center;
}

.cinematic-engine-core span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.cinematic-engine-core strong {
    margin-top: 6px;
    font-size: 1.15rem;
    letter-spacing: 0.14em;
}

.engine-word {
    position: absolute;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.engine-story {
    top: 17%;
    left: 45%;
}

.engine-visuals {
    top: 43%;
    right: 2%;
}

.engine-sound {
    bottom: 16%;
    left: 44%;
}

.engine-interaction {
    top: 45%;
    left: 0;
}

.cinematic-story-engine-copy h2 {
    margin: 24px 0;
    font-size: clamp(2.8rem, 5vw, 5.4rem);
}

.cinematic-story-engine-copy > p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.59);
    font-size: 1rem;
    line-height: 1.78;
}

.cinematic-capability-list {
    display: grid;
    gap: 0;
    margin: 36px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.cinematic-capability-list > div {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.91rem;
    font-weight: 700;
}

.cinematic-capability-list span {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.64rem;
    letter-spacing: 0.13em;
}

.cinematic-about-section {
    background: #030406;
}

.cinematic-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: 100px;
}

.cinematic-about-grid h2 {
    max-width: 760px;
    margin-top: 25px;
    font-size: clamp(2.8rem, 5.2vw, 5.7rem);
}

.cinematic-about-copy p {
    color: rgba(255, 255, 255, 0.59);
    font-size: 1rem;
    line-height: 1.85;
}

.cinematic-about-copy .cinematic-heading-link {
    margin-top: 20px;
}

.cinematic-values-strip {
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    gap: 35px;
    margin-top: 90px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.cinematic-values-strip span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.cinematic-private-presentation {
    position: relative;
    overflow: hidden;
    padding: 145px 0;
    background:
        linear-gradient(
            125deg,
            #0e1520,
            #161116 54%,
            #07090c
        );
}

.cinematic-private-backdrop {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background:
        linear-gradient(
            90deg,
            transparent 0 49.7%,
            rgba(255, 255, 255, 0.10) 50%,
            transparent 50.3%
        ),
        linear-gradient(
            transparent 0 49.7%,
            rgba(255, 255, 255, 0.07) 50%,
            transparent 50.3%
        );
    background-size: 110px 110px;
}

.cinematic-private-content {
    position: relative;
    z-index: 2;
    max-width: 980px;
    text-align: center;
}

.cinematic-private-content h2 {
    margin: 24px auto;
    font-size: clamp(3rem, 6vw, 6.5rem);
}

.cinematic-private-content p {
    max-width: 720px;
    margin: 0 auto 38px;
    color: rgba(255, 255, 255, 0.61);
    font-size: 1rem;
    line-height: 1.75;
}

.cinematic-private-content .cinematic-kicker::before {
    display: none;
}

.cinematic-home-actions.centered-actions {
    justify-content: center;
}

.cinematic-footer {
    padding-top: 90px;
    background: #020304;
}

.cinematic-footer-top {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(0, 0.85fr);
    gap: 90px;
    padding-bottom: 75px;
}

.cinematic-footer-statement h2 {
    max-width: 540px;
    margin: 38px 0 18px;
    font-size: clamp(2.5rem, 4.6vw, 4.7rem);
}

.cinematic-footer-statement p {
    max-width: 570px;
    color: rgba(255, 255, 255, 0.48);
}

.cinematic-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;
}

.cinematic-footer-links > div {
    display: grid;
    align-content: start;
    gap: 10px;
}

.cinematic-footer-links h3 {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.cinematic-footer-links a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.82rem;
}

.cinematic-footer-links a:hover {
    color: #ffffff;
}

@media (max-width: 1120px) {
    .cinematic-home-hero-grid,
    .cinematic-holiday-grid,
    .cinematic-story-engine-grid,
    .cinematic-about-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-home-copy {
        max-width: 820px;
    }

    .cinematic-collage {
        width: min(760px, 100%);
        margin: 0 auto;
    }

    .cinematic-holiday-grid {
        gap: 55px;
    }

    .cinematic-story-engine-visual {
        min-height: 530px;
    }

    .cinematic-story-engine-copy,
    .cinematic-about-grid > * {
        max-width: 820px;
    }

    .cinematic-footer-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .cinematic-featured-grid,
    .cinematic-audience-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-feature-card {
        display: grid;
        grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    }

    .cinematic-feature-image {
        min-height: 100%;
    }

    .cinematic-feature-content p {
        min-height: auto;
    }

    .cinematic-audience-card {
        min-height: 390px;
    }

    .cinematic-audience-card h3 {
        margin-top: 75px;
    }

    .cinematic-footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .cinematic-home-hero {
        padding-top: 120px;
    }

    .cinematic-home-hero-grid {
        display: block;
        min-height: auto;
    }

    .cinematic-home-copy h1 {
        font-size: clamp(3.15rem, 15vw, 5.1rem);
    }

    .cinematic-home-copy > p {
        font-size: 0.95rem;
    }

    .cinematic-home-actions {
        flex-direction: column;
    }

    .cinematic-home-actions .button {
        width: 100%;
    }

    .cinematic-collage {
        min-height: 530px;
        margin-top: 65px;
    }

    .cinematic-poster-main {
        left: 11%;
        width: 57%;
        height: 470px;
    }

    .cinematic-poster-secondary {
        top: 86px;
        width: 44%;
        height: 330px;
    }

    .cinematic-poster-tertiary {
        width: 43%;
        height: 250px;
    }

    .cinematic-collage-caption {
        display: none;
    }

    .cinematic-scroll-cue {
        display: none;
    }

    .cinematic-section,
    .cinematic-holiday-section,
    .cinematic-story-engine-section,
    .cinematic-private-presentation {
        padding: 90px 0;
    }

    .cinematic-section-heading {
        display: block;
    }

    .cinematic-heading-link {
        margin-top: 25px;
    }

    .cinematic-feature-card {
        display: block;
    }

    .cinematic-feature-image {
        min-height: 260px;
    }

    .cinematic-holiday-art {
        min-height: 460px;
    }

    .cinematic-holiday-title {
        top: 19%;
        left: 8%;
    }

    .cinematic-holiday-title strong {
        font-size: 3.5rem;
    }

    .cinematic-audience-card {
        min-height: 420px;
        padding: 28px;
    }

    .cinematic-story-engine-visual {
        min-height: 370px;
        transform: scale(0.76);
        margin: -40px 0;
    }

    .cinematic-about-grid {
        gap: 35px;
    }

    .cinematic-values-strip {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .cinematic-footer-links {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .cinematic-collage {
        min-height: 450px;
    }

    .cinematic-poster-main {
        height: 395px;
    }

    .cinematic-poster-secondary {
        height: 285px;
    }

    .cinematic-poster-tertiary {
        height: 210px;
    }

    .cinematic-holiday-art {
        min-height: 410px;
    }

    .cinematic-footer-links {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CHATGPT-STYLE TYPOGRAPHY
   ========================================================= */

:root {
    --studio-font:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

body,
button,
input,
select,
textarea {
    font-family: var(--studio-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.cinematic-home-copy h1 em,
.cinematic-poster-art strong,
.cinematic-feature-content h3,
.cinematic-holiday-copy h2 em,
.cinematic-holiday-title strong {
    font-family: var(--studio-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 650;
    letter-spacing: -0.04em;
}

.cinematic-home-copy h1 {
    font-weight: 650;
    letter-spacing: -0.055em;
}

.cinematic-home-copy h1 em {
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.045em;
}

.cinematic-poster-art strong,
.cinematic-feature-content h3,
.cinematic-holiday-title strong {
    font-weight: 550;
    letter-spacing: -0.035em;
}

p,
a,
span,
small,
button,
input,
textarea,
select {
    letter-spacing: normal;
}

/* =========================================================
   CINEMATIC PRESENTATION LANDING V2
   ========================================================= */

.cinematic-presentation-body {
    margin: 0;
    background: #020305;
    color: #ffffff;
}

.cinematic-presentation-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 5vw, 72px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(2, 3, 5, 0.76);
    backdrop-filter: blur(22px);
}

.cinematic-presentation-header nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.cinematic-presentation-header nav > a:not(.button) {
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.76rem;
    font-weight: 600;
}

.cinematic-presentation-header nav > a:hover {
    color: #ffffff;
}

.cinematic-presentation-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    padding: 145px clamp(20px, 5vw, 72px) 90px;
    background:
        linear-gradient(
            180deg,
            rgba(2, 3, 5, 0.02),
            rgba(2, 3, 5, 0.55) 72%,
            #020305
        ),
        radial-gradient(
            circle at 75% 35%,
            rgba(38, 92, 152, 0.20),
            transparent 32%
        ),
        #020305;
}

.cinematic-presentation-noise {
    position: absolute;
    inset: 0;
    opacity: 0.11;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 3px
        );
    pointer-events: none;
}

.cinematic-presentation-light {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    filter: blur(150px);
    opacity: 0.17;
    pointer-events: none;
}

.cinematic-presentation-light-blue {
    top: -220px;
    right: -130px;
    background: #2365a9;
}

.cinematic-presentation-light-red {
    bottom: -250px;
    left: -200px;
    background: #8d1c2e;
}

.cinematic-presentation-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: calc(100svh - 235px);
    align-items: center;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(500px, 1.1fr);
    gap: clamp(50px, 7vw, 105px);
    max-width: 1480px;
    margin: 0 auto;
}

.cinematic-presentation-copy {
    max-width: 710px;
}

.cinematic-presentation-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.23em;
}

.cinematic-presentation-eyebrow::before {
    width: 40px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #d21f36,
            rgba(255, 255, 255, 0.68)
        );
    content: "";
}

.cinematic-presentation-copy h1 {
    margin: 28px 0;
    font-size: clamp(3.8rem, 6.8vw, 7.5rem);
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.cinematic-presentation-lead {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.07rem;
    line-height: 1.78;
}

.cinematic-presentation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.cinematic-presentation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 34px;
}

.cinematic-presentation-meta span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.cinematic-presentation-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.39);
    font-size: 0.72rem;
}

.cinematic-presentation-note span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d41f38;
    box-shadow: 0 0 16px rgba(212, 31, 56, 0.70);
}

.cinematic-presentation-visual {
    position: relative;
    perspective: 1200px;
}

.cinematic-presentation-frame {
    position: relative;
    z-index: 3;
    overflow: hidden;
    transform: rotateY(-3deg) rotateX(1deg);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: #090b0f;
    box-shadow:
        0 45px 100px rgba(0, 0, 0, 0.64),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 350ms ease;
}

.cinematic-presentation-frame:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-8px);
}

.cinematic-presentation-frame-top,
.cinematic-presentation-frame-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.025);
}

.cinematic-presentation-frame-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cinematic-presentation-frame-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cinematic-presentation-frame-top span,
.cinematic-presentation-frame-top small,
.cinematic-presentation-frame-bottom span {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.cinematic-presentation-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.cinematic-presentation-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cinematic-preview-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(49, 116, 185, 0.32),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #102638,
            #0a111b 50%,
            #030406
        );
    text-align: center;
}

.cinematic-preview-orbit {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(115, 187, 255, 0.20);
    border-radius: 999px;
    box-shadow:
        0 0 60px rgba(67, 148, 226, 0.18),
        inset 0 0 60px rgba(67, 148, 226, 0.08);
}

.cinematic-preview-placeholder button {
    position: relative;
    z-index: 2;
    display: grid;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 1.35rem;
    backdrop-filter: blur(15px);
}

.cinematic-preview-placeholder span,
.cinematic-preview-placeholder strong,
.cinematic-preview-placeholder small {
    position: relative;
    z-index: 2;
}

.cinematic-preview-placeholder span {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.60rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.cinematic-preview-placeholder strong {
    max-width: 440px;
    font-size: clamp(1.8rem, 3vw, 3.4rem);
    line-height: 1;
}

.cinematic-preview-placeholder small {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.40);
}

.cinematic-presentation-shadow {
    position: absolute;
    right: 10%;
    bottom: -45px;
    left: 10%;
    height: 90px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    filter: blur(30px);
}

.cinematic-presentation-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 4;
    display: flex;
    transform: translateX(-50%);
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cinematic-presentation-scroll span {
    width: 36px;
    height: 1px;
    background: rgba(255, 255, 255, 0.30);
}

.cinematic-presentation-discovery,
.cinematic-presentation-process {
    padding: 130px clamp(20px, 5vw, 72px);
}

.cinematic-presentation-discovery {
    background:
        linear-gradient(
            180deg,
            #020305,
            #090b10 52%,
            #020305
        );
}

.cinematic-presentation-section-heading {
    max-width: 920px;
    margin: 0 auto 60px;
    text-align: center;
}

.cinematic-presentation-section-heading > span {
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.20em;
}

.cinematic-presentation-section-heading h2 {
    margin: 22px 0;
    font-size: clamp(2.8rem, 5.3vw, 5.8rem);
    letter-spacing: -0.055em;
}

.cinematic-presentation-section-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.56);
    font-size: 1rem;
    line-height: 1.78;
}

.cinematic-presentation-discovery-grid {
    display: grid;
    max-width: 1380px;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.cinematic-presentation-discovery-grid article {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(49, 102, 169, 0.21),
            transparent 29%
        ),
        #090b10;
    transition:
        transform 260ms ease,
        border-color 260ms ease;
}

.cinematic-presentation-discovery-grid article:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.22);
}

.cinematic-presentation-card-number {
    position: absolute;
    top: 8px;
    right: 18px;
    color: rgba(255, 255, 255, 0.055);
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
}

.cinematic-presentation-discovery-grid article > span {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.cinematic-presentation-discovery-grid h3 {
    position: relative;
    z-index: 2;
    margin: 125px 0 20px;
    font-size: clamp(2rem, 3vw, 3.1rem);
    letter-spacing: -0.05em;
}

.cinematic-presentation-discovery-grid p {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.53);
    line-height: 1.72;
}

.cinematic-presentation-statement {
    max-width: 1000px;
    margin: 100px auto 0;
    padding: 65px 70px;
    border-left: 1px solid rgba(255, 255, 255, 0.20);
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035),
            transparent
        );
}

.cinematic-presentation-statement span {
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.cinematic-presentation-statement blockquote {
    margin: 22px 0 0;
    font-size: clamp(1.8rem, 3.4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.18;
}

.cinematic-presentation-process {
    background: #030406;
}

.cinematic-presentation-process-grid {
    display: grid;
    max-width: 1380px;
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.cinematic-presentation-process-grid article {
    min-height: 310px;
    padding: 34px;
    background: #07090c;
}

.cinematic-presentation-process-grid article > span {
    color: rgba(255, 255, 255, 0.31);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.cinematic-presentation-process-grid h3 {
    margin: 95px 0 17px;
    font-size: 1.7rem;
}

.cinematic-presentation-process-grid p {
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.88rem;
    line-height: 1.72;
}

.cinematic-presentation-final {
    position: relative;
    overflow: hidden;
    padding: 150px 20px;
    background:
        linear-gradient(
            135deg,
            #101a29,
            #161116 52%,
            #05070a
        );
}

.cinematic-presentation-final-light {
    position: absolute;
    top: -260px;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(65, 119, 188, 0.20);
    filter: blur(150px);
}

.cinematic-presentation-final-content {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
}

.cinematic-presentation-final-content > span {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.20em;
}

.cinematic-presentation-final-content h2 {
    margin: 24px auto;
    font-size: clamp(3rem, 6vw, 6.4rem);
    letter-spacing: -0.06em;
}

.cinematic-presentation-final-content p {
    max-width: 720px;
    margin: 0 auto 38px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 1rem;
    line-height: 1.75;
}

.cinematic-presentation-footer {
    display: grid;
    min-height: 220px;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 50px clamp(20px, 5vw, 72px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #010203;
}

.cinematic-presentation-footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

.cinematic-presentation-footer > span {
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.72rem;
    text-align: right;
}

@media (max-width: 1050px) {
    .cinematic-presentation-hero-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-presentation-copy {
        max-width: 850px;
    }

    .cinematic-presentation-visual {
        max-width: 850px;
        margin: 0 auto;
    }

    .cinematic-presentation-discovery-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-presentation-discovery-grid article {
        min-height: 360px;
    }

    .cinematic-presentation-discovery-grid h3 {
        margin-top: 80px;
    }

    .cinematic-presentation-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .cinematic-presentation-header {
        min-height: 72px;
    }

    .cinematic-presentation-header nav > a:not(.button) {
        display: none;
    }

    .cinematic-presentation-hero {
        padding-top: 115px;
    }

    .cinematic-presentation-copy h1 {
        font-size: clamp(3.2rem, 15vw, 5.2rem);
    }

    .cinematic-presentation-actions {
        flex-direction: column;
    }

    .cinematic-presentation-actions .button {
        width: 100%;
    }

    .cinematic-presentation-frame-bottom {
        display: none;
    }

    .cinematic-presentation-scroll {
        display: none;
    }

    .cinematic-presentation-discovery,
    .cinematic-presentation-process {
        padding: 90px 16px;
    }

    .cinematic-presentation-statement {
        padding: 45px 28px;
    }

    .cinematic-presentation-process-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-presentation-process-grid article {
        min-height: 250px;
    }

    .cinematic-presentation-process-grid h3 {
        margin-top: 65px;
    }

    .cinematic-presentation-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cinematic-presentation-footer .brand-mark {
        justify-content: center;
    }

    .cinematic-presentation-footer > span {
        text-align: center;
    }
}

/* =========================================================
   CINEMATIC PRESENTATION LANDING V2
   ========================================================= */

.cinematic-presentation-body {
    margin: 0;
    background: #020305;
    color: #ffffff;
}

.cinematic-presentation-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 5vw, 72px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(2, 3, 5, 0.76);
    backdrop-filter: blur(22px);
}

.cinematic-presentation-header nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.cinematic-presentation-header nav > a:not(.button) {
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.76rem;
    font-weight: 600;
}

.cinematic-presentation-header nav > a:hover {
    color: #ffffff;
}

.cinematic-presentation-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    padding: 145px clamp(20px, 5vw, 72px) 90px;
    background:
        linear-gradient(
            180deg,
            rgba(2, 3, 5, 0.02),
            rgba(2, 3, 5, 0.55) 72%,
            #020305
        ),
        radial-gradient(
            circle at 75% 35%,
            rgba(38, 92, 152, 0.20),
            transparent 32%
        ),
        #020305;
}

.cinematic-presentation-noise {
    position: absolute;
    inset: 0;
    opacity: 0.11;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 3px
        );
    pointer-events: none;
}

.cinematic-presentation-light {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    filter: blur(150px);
    opacity: 0.17;
    pointer-events: none;
}

.cinematic-presentation-light-blue {
    top: -220px;
    right: -130px;
    background: #2365a9;
}

.cinematic-presentation-light-red {
    bottom: -250px;
    left: -200px;
    background: #8d1c2e;
}

.cinematic-presentation-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: calc(100svh - 235px);
    align-items: center;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(500px, 1.1fr);
    gap: clamp(50px, 7vw, 105px);
    max-width: 1480px;
    margin: 0 auto;
}

.cinematic-presentation-copy {
    max-width: 710px;
}

.cinematic-presentation-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.23em;
}

.cinematic-presentation-eyebrow::before {
    width: 40px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #d21f36,
            rgba(255, 255, 255, 0.68)
        );
    content: "";
}

.cinematic-presentation-copy h1 {
    margin: 28px 0;
    font-size: clamp(3.8rem, 6.8vw, 7.5rem);
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.cinematic-presentation-lead {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.07rem;
    line-height: 1.78;
}

.cinematic-presentation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.cinematic-presentation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 34px;
}

.cinematic-presentation-meta span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.cinematic-presentation-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.39);
    font-size: 0.72rem;
}

.cinematic-presentation-note span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d41f38;
    box-shadow: 0 0 16px rgba(212, 31, 56, 0.70);
}

.cinematic-presentation-visual {
    position: relative;
    perspective: 1200px;
}

.cinematic-presentation-frame {
    position: relative;
    z-index: 3;
    overflow: hidden;
    transform: rotateY(-3deg) rotateX(1deg);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: #090b0f;
    box-shadow:
        0 45px 100px rgba(0, 0, 0, 0.64),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 350ms ease;
}

.cinematic-presentation-frame:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-8px);
}

.cinematic-presentation-frame-top,
.cinematic-presentation-frame-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.025);
}

.cinematic-presentation-frame-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cinematic-presentation-frame-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cinematic-presentation-frame-top span,
.cinematic-presentation-frame-top small,
.cinematic-presentation-frame-bottom span {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.cinematic-presentation-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.cinematic-presentation-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cinematic-preview-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(49, 116, 185, 0.32),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #102638,
            #0a111b 50%,
            #030406
        );
    text-align: center;
}

.cinematic-preview-orbit {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(115, 187, 255, 0.20);
    border-radius: 999px;
    box-shadow:
        0 0 60px rgba(67, 148, 226, 0.18),
        inset 0 0 60px rgba(67, 148, 226, 0.08);
}

.cinematic-preview-placeholder button {
    position: relative;
    z-index: 2;
    display: grid;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 1.35rem;
    backdrop-filter: blur(15px);
}

.cinematic-preview-placeholder span,
.cinematic-preview-placeholder strong,
.cinematic-preview-placeholder small {
    position: relative;
    z-index: 2;
}

.cinematic-preview-placeholder span {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.60rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.cinematic-preview-placeholder strong {
    max-width: 440px;
    font-size: clamp(1.8rem, 3vw, 3.4rem);
    line-height: 1;
}

.cinematic-preview-placeholder small {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.40);
}

.cinematic-presentation-shadow {
    position: absolute;
    right: 10%;
    bottom: -45px;
    left: 10%;
    height: 90px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    filter: blur(30px);
}

.cinematic-presentation-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 4;
    display: flex;
    transform: translateX(-50%);
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cinematic-presentation-scroll span {
    width: 36px;
    height: 1px;
    background: rgba(255, 255, 255, 0.30);
}

.cinematic-presentation-discovery,
.cinematic-presentation-process {
    padding: 130px clamp(20px, 5vw, 72px);
}

.cinematic-presentation-discovery {
    background:
        linear-gradient(
            180deg,
            #020305,
            #090b10 52%,
            #020305
        );
}

.cinematic-presentation-section-heading {
    max-width: 920px;
    margin: 0 auto 60px;
    text-align: center;
}

.cinematic-presentation-section-heading > span {
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.20em;
}

.cinematic-presentation-section-heading h2 {
    margin: 22px 0;
    font-size: clamp(2.8rem, 5.3vw, 5.8rem);
    letter-spacing: -0.055em;
}

.cinematic-presentation-section-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.56);
    font-size: 1rem;
    line-height: 1.78;
}

.cinematic-presentation-discovery-grid {
    display: grid;
    max-width: 1380px;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.cinematic-presentation-discovery-grid article {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(49, 102, 169, 0.21),
            transparent 29%
        ),
        #090b10;
    transition:
        transform 260ms ease,
        border-color 260ms ease;
}

.cinematic-presentation-discovery-grid article:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.22);
}

.cinematic-presentation-card-number {
    position: absolute;
    top: 8px;
    right: 18px;
    color: rgba(255, 255, 255, 0.055);
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
}

.cinematic-presentation-discovery-grid article > span {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.cinematic-presentation-discovery-grid h3 {
    position: relative;
    z-index: 2;
    margin: 125px 0 20px;
    font-size: clamp(2rem, 3vw, 3.1rem);
    letter-spacing: -0.05em;
}

.cinematic-presentation-discovery-grid p {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.53);
    line-height: 1.72;
}

.cinematic-presentation-statement {
    max-width: 1000px;
    margin: 100px auto 0;
    padding: 65px 70px;
    border-left: 1px solid rgba(255, 255, 255, 0.20);
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035),
            transparent
        );
}

.cinematic-presentation-statement span {
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.cinematic-presentation-statement blockquote {
    margin: 22px 0 0;
    font-size: clamp(1.8rem, 3.4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.18;
}

.cinematic-presentation-process {
    background: #030406;
}

.cinematic-presentation-process-grid {
    display: grid;
    max-width: 1380px;
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.cinematic-presentation-process-grid article {
    min-height: 310px;
    padding: 34px;
    background: #07090c;
}

.cinematic-presentation-process-grid article > span {
    color: rgba(255, 255, 255, 0.31);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.cinematic-presentation-process-grid h3 {
    margin: 95px 0 17px;
    font-size: 1.7rem;
}

.cinematic-presentation-process-grid p {
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.88rem;
    line-height: 1.72;
}

.cinematic-presentation-final {
    position: relative;
    overflow: hidden;
    padding: 150px 20px;
    background:
        linear-gradient(
            135deg,
            #101a29,
            #161116 52%,
            #05070a
        );
}

.cinematic-presentation-final-light {
    position: absolute;
    top: -260px;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(65, 119, 188, 0.20);
    filter: blur(150px);
}

.cinematic-presentation-final-content {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
}

.cinematic-presentation-final-content > span {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.20em;
}

.cinematic-presentation-final-content h2 {
    margin: 24px auto;
    font-size: clamp(3rem, 6vw, 6.4rem);
    letter-spacing: -0.06em;
}

.cinematic-presentation-final-content p {
    max-width: 720px;
    margin: 0 auto 38px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 1rem;
    line-height: 1.75;
}

.cinematic-presentation-footer {
    display: grid;
    min-height: 220px;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 50px clamp(20px, 5vw, 72px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #010203;
}

.cinematic-presentation-footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

.cinematic-presentation-footer > span {
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.72rem;
    text-align: right;
}

@media (max-width: 1050px) {
    .cinematic-presentation-hero-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-presentation-copy {
        max-width: 850px;
    }

    .cinematic-presentation-visual {
        max-width: 850px;
        margin: 0 auto;
    }

    .cinematic-presentation-discovery-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-presentation-discovery-grid article {
        min-height: 360px;
    }

    .cinematic-presentation-discovery-grid h3 {
        margin-top: 80px;
    }

    .cinematic-presentation-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .cinematic-presentation-header {
        min-height: 72px;
    }

    .cinematic-presentation-header nav > a:not(.button) {
        display: none;
    }

    .cinematic-presentation-hero {
        padding-top: 115px;
    }

    .cinematic-presentation-copy h1 {
        font-size: clamp(3.2rem, 15vw, 5.2rem);
    }

    .cinematic-presentation-actions {
        flex-direction: column;
    }

    .cinematic-presentation-actions .button {
        width: 100%;
    }

    .cinematic-presentation-frame-bottom {
        display: none;
    }

    .cinematic-presentation-scroll {
        display: none;
    }

    .cinematic-presentation-discovery,
    .cinematic-presentation-process {
        padding: 90px 16px;
    }

    .cinematic-presentation-statement {
        padding: 45px 28px;
    }

    .cinematic-presentation-process-grid {
        grid-template-columns: 1fr;
    }

    .cinematic-presentation-process-grid article {
        min-height: 250px;
    }

    .cinematic-presentation-process-grid h3 {
        margin-top: 65px;
    }

    .cinematic-presentation-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cinematic-presentation-footer .brand-mark {
        justify-content: center;
    }

    .cinematic-presentation-footer > span {
        text-align: center;
    }
}

/* =========================================================
   PREMIUM RESERVATION EXPERIENCE
   ========================================================= */

.premium-reservation-body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(36, 94, 161, 0.12),
            transparent 30%
        ),
        #020305;
    color: #ffffff;
}

.premium-reservation-noise {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 3px
        );
    pointer-events: none;
}

.premium-reservation-light {
    position: fixed;
    z-index: 0;
    width: 600px;
    height: 600px;
    border-radius: 999px;
    filter: blur(170px);
    pointer-events: none;
}

.premium-reservation-light-one {
    top: -300px;
    right: -220px;
    background: rgba(39, 104, 188, 0.26);
}

.premium-reservation-light-two {
    bottom: -330px;
    left: -220px;
    background: rgba(140, 27, 49, 0.18);
}

.premium-reservation-header {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 5vw, 72px);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
    background: rgba(2, 3, 5, 0.72);
    backdrop-filter: blur(24px);
}

.premium-reservation-back {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 650;
}

.premium-reservation-back:hover {
    color: #ffffff;
}

.premium-reservation-page {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
    padding: 100px 0 130px;
}

.premium-reservation-intro {
    max-width: 920px;
    margin-bottom: 80px;
}

.premium-reservation-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.premium-reservation-kicker::before {
    width: 38px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #d31f38,
            rgba(255, 255, 255, 0.60)
        );
    content: "";
}

.premium-reservation-intro h1 {
    max-width: 1000px;
    margin: 26px 0 22px;
    font-size: clamp(3.7rem, 7vw, 7.5rem);
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.premium-reservation-intro > p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.57);
    font-size: 1.04rem;
    line-height: 1.8;
}

.premium-reservation-progress {
    display: grid;
    max-width: 900px;
    margin-top: 54px;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.premium-reservation-progress div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px;
    background: rgba(5, 7, 10, 0.92);
}

.premium-reservation-progress span {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.62rem;
    font-weight: 800;
}

.premium-reservation-progress strong {
    font-size: 0.76rem;
    font-weight: 700;
}

.premium-reservation-form {
    display: grid;
    gap: 30px;
}

.premium-reservation-section {
    padding: clamp(28px, 4vw, 54px);
    border:
        1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.premium-reservation-section-heading {
    display: grid;
    margin-bottom: 42px;
    grid-template-columns: 52px 1fr;
    gap: 22px;
}

.premium-reservation-section-heading > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 800;
}

.premium-reservation-section-heading small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.premium-reservation-section-heading h2 {
    margin: 9px 0 8px;
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -0.05em;
}

.premium-reservation-section-heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.47);
}

.premium-reservation-calendar {
    display: grid;
    gap: 18px;
}

.premium-reservation-day {
    padding: 24px;
    border:
        1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background: rgba(3, 5, 8, 0.78);
}

.premium-reservation-day > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.premium-reservation-date {
    font-size: 1.05rem;
    font-weight: 750;
}

.premium-reservation-day header small {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.premium-reservation-session-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.premium-reservation-session {
    cursor: pointer;
}

.premium-reservation-session input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.premium-reservation-session-card {
    position: relative;
    display: grid;
    min-height: 150px;
    align-content: center;
    padding: 22px;
    overflow: hidden;
    border:
        1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        );
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.premium-reservation-session-card small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.premium-reservation-session-card strong {
    margin: 9px 0 6px;
    font-size: 1.35rem;
}

.premium-reservation-session-card em {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
    font-style: normal;
}

.premium-reservation-session-card i {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    transform: scale(0);
    border-radius: 999px;
    background: #ffffff;
    color: #030406;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    transition: transform 180ms ease;
}

.premium-reservation-session:hover
.premium-reservation-session-card {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.22);
}

.premium-reservation-session input:checked
+ .premium-reservation-session-card {
    border-color: rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(
            145deg,
            rgba(40, 102, 178, 0.25),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 20px 45px rgba(0, 0, 0, 0.35);
}

.premium-reservation-session input:checked
+ .premium-reservation-session-card i {
    transform: scale(1);
}

.premium-reservation-fields {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.premium-reservation-fields label {
    display: grid;
    gap: 9px;
}

.premium-reservation-fields label > span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
}

.premium-reservation-fields input,
.premium-reservation-fields select {
    width: 100%;
    min-height: 58px;
    padding: 0 17px;
    border:
        1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    outline: none;
    background: rgba(4, 6, 9, 0.82);
    color: #ffffff;
    font-size: 0.94rem;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.premium-reservation-fields input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.premium-reservation-fields input:focus,
.premium-reservation-fields select:focus {
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow:
        0 0 0 4px rgba(74, 131, 198, 0.10);
}

.premium-reservation-confirmation {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 50px;
    padding: clamp(30px, 5vw, 64px);
    border:
        1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(45, 104, 176, 0.20),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0a111b,
            #08080c 60%,
            #050609
        );
}

.premium-reservation-confirmation-copy {
    max-width: 720px;
}

.premium-reservation-confirmation-copy > span {
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.premium-reservation-confirmation-copy h2 {
    margin: 14px 0;
    font-size: clamp(2rem, 4vw, 4.3rem);
    letter-spacing: -0.055em;
}

.premium-reservation-confirmation-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.72;
}

.premium-reservation-submit {
    min-width: 280px;
    justify-content: center;
}

.premium-reservation-errors {
    margin-bottom: 25px;
    padding: 22px;
    border:
        1px solid rgba(255, 95, 115, 0.35);
    border-radius: 14px;
    background: rgba(117, 20, 38, 0.18);
}

.premium-reservation-errors strong {
    display: block;
    margin-bottom: 8px;
}

.premium-reservation-errors ul {
    margin: 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.75);
}

.premium-reservation-empty {
    padding: 70px 30px;
    border:
        1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    text-align: center;
}

.premium-reservation-empty span {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
}

.premium-reservation-empty h3 {
    margin: 15px 0 8px;
    font-size: 2rem;
}

.premium-reservation-empty p {
    color: rgba(255, 255, 255, 0.45);
}

.premium-reservation-footer {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px clamp(20px, 5vw, 72px);
    border-top:
        1px solid rgba(255, 255, 255, 0.07);
    background: #010203;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.7rem;
}

@media (max-width: 900px) {
    .premium-reservation-session-grid {
        grid-template-columns: 1fr;
    }

    .premium-reservation-fields {
        grid-template-columns: 1fr;
    }

    .premium-reservation-confirmation {
        grid-template-columns: 1fr;
    }

    .premium-reservation-submit {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .premium-reservation-header {
        min-height: 72px;
    }

    .premium-reservation-back {
        font-size: 0;
    }

    .premium-reservation-back::after {
        content: "← Back";
        font-size: 0.75rem;
    }

    .premium-reservation-page {
        width: min(100% - 24px, 1320px);
        padding-top: 70px;
    }

    .premium-reservation-intro h1 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .premium-reservation-progress {
        grid-template-columns: 1fr;
    }

    .premium-reservation-section {
        padding: 24px 17px;
    }

    .premium-reservation-section-heading {
        grid-template-columns: 42px 1fr;
        gap: 15px;
    }

    .premium-reservation-section-heading > span {
        width: 42px;
        height: 42px;
    }

    .premium-reservation-day {
        padding: 17px;
    }

    .premium-reservation-day > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .premium-reservation-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   PREMIUM CONFIRMATION EXPERIENCE
   ========================================================= */

.premium-confirmation-body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(37, 99, 170, 0.18),
            transparent 34%
        ),
        #020305;
    color: #ffffff;
}

.premium-confirmation-noise {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 3px
        );
    pointer-events: none;
}

.premium-confirmation-light {
    position: fixed;
    z-index: 0;
    width: 620px;
    height: 620px;
    border-radius: 999px;
    filter: blur(180px);
    pointer-events: none;
}

.premium-confirmation-light-one {
    top: -300px;
    right: -230px;
    background: rgba(42, 108, 190, 0.26);
}

.premium-confirmation-light-two {
    bottom: -330px;
    left: -240px;
    background: rgba(142, 27, 50, 0.17);
}

.premium-confirmation-header {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 5vw, 72px);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
    background: rgba(2, 3, 5, 0.72);
    backdrop-filter: blur(24px);
}

.premium-confirmation-private {
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.premium-confirmation-page {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: calc(100vh - 184px);
    place-items: center;
    padding: 90px 20px 120px;
}

.premium-confirmation-card {
    width: min(100%, 1040px);
    padding: clamp(34px, 6vw, 78px);
    border:
        1px solid rgba(255, 255, 255, 0.10);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(53, 117, 194, 0.16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.014)
        );
    box-shadow:
        0 50px 120px rgba(0, 0, 0, 0.48);
    text-align: center;
    backdrop-filter: blur(22px);
}

.premium-confirmation-mark {
    display: grid;
    width: 84px;
    height: 84px;
    margin: 0 auto 30px;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background:
        linear-gradient(
            145deg,
            rgba(58, 131, 211, 0.32),
            rgba(255, 255, 255, 0.07)
        );
    box-shadow:
        0 0 55px rgba(50, 118, 196, 0.23);
}

.premium-confirmation-mark span {
    font-size: 2rem;
    font-weight: 800;
}

.premium-confirmation-kicker {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.premium-confirmation-card h1 {
    max-width: 850px;
    margin: 22px auto;
    font-size: clamp(3.2rem, 6.5vw, 6.8rem);
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 0.94;
}

.premium-confirmation-lead {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.56);
    font-size: 1.02rem;
    line-height: 1.75;
}

.premium-confirmation-lead strong {
    color: #ffffff;
}

.premium-confirmation-details {
    display: grid;
    margin-top: 50px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.premium-confirmation-details article {
    display: grid;
    min-height: 145px;
    align-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(4, 6, 9, 0.92);
}

.premium-confirmation-details span {
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.premium-confirmation-details strong {
    font-size: 0.95rem;
    line-height: 1.45;
}

.premium-confirmation-message {
    display: flex;
    max-width: 820px;
    align-items: flex-start;
    gap: 18px;
    margin: 38px auto 0;
    padding: 24px;
    border:
        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
}

.premium-confirmation-message > span {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 999px;
    background: #5ca4f2;
    box-shadow:
        0 0 18px rgba(92, 164, 242, 0.75);
}

.premium-confirmation-message strong {
    display: block;
    margin-bottom: 4px;
}

.premium-confirmation-message p {
    margin: 0;
    color: rgba(255, 255, 255, 0.49);
    line-height: 1.65;
}

.premium-confirmation-message b {
    color: rgba(255, 255, 255, 0.82);
}

.premium-confirmation-timeline {
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.premium-confirmation-timeline article {
    display: flex;
    min-height: 145px;
    align-items: flex-start;
    gap: 15px;
    padding: 22px;
    border:
        1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    background: rgba(3, 5, 8, 0.68);
    text-align: left;
}

.premium-confirmation-timeline article > span {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.58rem;
    font-weight: 800;
}

.premium-confirmation-timeline strong {
    display: block;
    margin: 4px 0 8px;
}

.premium-confirmation-timeline p {
    margin: 0;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.78rem;
    line-height: 1.6;
}

.premium-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    margin-top: 42px;
}

.premium-confirmation-actions .button {
    min-width: 245px;
    justify-content: center;
}

.premium-confirmation-footnote {
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.72rem;
}

.premium-confirmation-footer {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px clamp(20px, 5vw, 72px);
    border-top:
        1px solid rgba(255, 255, 255, 0.07);
    background: #010203;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.7rem;
}

@media (max-width: 900px) {
    .premium-confirmation-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-confirmation-timeline {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .premium-confirmation-private {
        display: none;
    }

    .premium-confirmation-page {
        padding: 55px 12px 80px;
    }

    .premium-confirmation-card {
        border-radius: 20px;
    }

    .premium-confirmation-card h1 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .premium-confirmation-details {
        grid-template-columns: 1fr;
    }

    .premium-confirmation-actions {
        flex-direction: column;
    }

    .premium-confirmation-actions .button {
        width: 100%;
        min-width: 0;
    }

    .premium-confirmation-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   PRESENTATION ADMIN — FEATURED STORY + CTA FIELDS
   ========================================================= */

.admin-content-divider {
    margin: 34px 0 22px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.admin-content-divider span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.admin-content-divider p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.78rem;
    line-height: 1.55;
}

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

.admin-form-grid textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;
    outline: none;
    resize: vertical;
    background: rgba(4, 6, 9, 0.76);
    color: #ffffff;
    font: inherit;
    line-height: 1.6;
}

.admin-form-grid textarea:focus {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 0 0 4px rgba(74, 131, 198, 0.10);
}

/* =========================================================
   LIVE EXPERIENCE — FEATURED STORY + COMMERCIAL CTA
   ========================================================= */

.premium-featured-story {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(1240px, 100%);
    margin: 110px auto 0;
    overflow: hidden;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(120, 20, 35, 0.24),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #090a0d,
            #080406 55%,
            #120609
        );
    box-shadow:
        0 45px 100px rgba(0, 0, 0, 0.42);
}

.premium-featured-story-copy {
    display: flex;
    min-height: 620px;
    justify-content: center;
    flex-direction: column;
    padding: clamp(42px, 6vw, 82px);
}

.premium-featured-story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.premium-featured-story-eyebrow::before {
    width: 36px;
    height: 1px;
    background: #d22038;
    content: "";
}

.premium-featured-story-copy h2 {
    max-width: 680px;
    margin: 24px 0 20px;
    font-size: clamp(3rem, 6vw, 6.3rem);
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 0.94;
}

.premium-featured-story-subtitle {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(1.02rem, 1.8vw, 1.3rem);
    font-weight: 600;
    line-height: 1.55;
}

.premium-featured-story-body {
    max-width: 650px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.96rem;
    line-height: 1.82;
}

.premium-featured-story-button {
    width: fit-content;
    min-width: 205px;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
}

.premium-featured-story-visual {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background: #08090c;
}

.premium-featured-story-visual::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8, 4, 6, 0.94),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(2, 3, 5, 0.45)
        );
    content: "";
    pointer-events: none;
}

.premium-featured-story-visual img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    object-position: center;
    transition: transform 700ms ease;
}

.premium-featured-story:hover
.premium-featured-story-visual img {
    transform: scale(1.035);
}

.premium-featured-story-placeholder {
    display: grid;
    min-height: 620px;
    align-content: center;
    place-items: center;
    padding: 40px;
    background:
        radial-gradient(
            circle at center,
            rgba(180, 30, 50, 0.25),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #1a080c,
            #08090c
        );
    text-align: center;
}

.premium-featured-story-placeholder span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.premium-featured-story-placeholder strong {
    margin-top: 15px;
    font-size: clamp(2rem, 4vw, 4rem);
}

.premium-commercial-cta {
    position: relative;
    z-index: 2;
    width: min(1240px, 100%);
    margin: 34px auto 80px;
    padding: clamp(48px, 7vw, 90px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(44, 105, 181, 0.22),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #09111c,
            #08090d 58%,
            #090407
        );
    text-align: center;
}

.premium-commercial-cta::before {
    position: absolute;
    top: -260px;
    left: 50%;
    width: 650px;
    height: 650px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(54, 112, 190, 0.15);
    filter: blur(150px);
    content: "";
    pointer-events: none;
}

.premium-commercial-cta > * {
    position: relative;
    z-index: 2;
}

.premium-commercial-cta-kicker {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.premium-commercial-cta h2 {
    max-width: 900px;
    margin: 22px auto;
    font-size: clamp(3rem, 6vw, 6.2rem);
    letter-spacing: -0.06em;
    line-height: 0.98;
}

.premium-commercial-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.50);
    font-size: 1rem;
}

.premium-commercial-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    margin-top: 38px;
}

.premium-commercial-cta-actions .button {
    min-width: 270px;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 980px) {
    .premium-featured-story {
        grid-template-columns: 1fr;
    }

    .premium-featured-story-copy {
        min-height: auto;
    }

    .premium-featured-story-visual,
    .premium-featured-story-visual img,
    .premium-featured-story-placeholder {
        min-height: 520px;
    }

    .premium-featured-story-visual::after {
        background:
            linear-gradient(
                180deg,
                rgba(8, 4, 6, 0.82),
                transparent 22%
            ),
            linear-gradient(
                180deg,
                transparent 66%,
                rgba(2, 3, 5, 0.48)
            );
    }
}

@media (max-width: 640px) {
    .premium-featured-story {
        margin-top: 70px;
        border-radius: 20px;
    }

    .premium-featured-story-copy {
        padding: 38px 24px;
    }

    .premium-featured-story-copy h2 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .premium-featured-story-button {
        width: 100%;
    }

    .premium-featured-story-visual,
    .premium-featured-story-visual img,
    .premium-featured-story-placeholder {
        min-height: 420px;
    }

    .premium-commercial-cta {
        margin-bottom: 40px;
        padding: 50px 24px;
        border-radius: 20px;
    }

    .premium-commercial-cta h2 {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .premium-commercial-cta-actions {
        flex-direction: column;
    }

    .premium-commercial-cta-actions .button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   LIVE EXPERIENCE — PREMIUM PLAYER FINAL
   ========================================================= */

.premium-live-page {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
}

.premium-live-introduction {
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.premium-live-introduction h1 {
    margin-top: 18px;
    font-size: clamp(3.5rem, 7vw, 7.6rem);
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.premium-live-introduction p {
    color: rgba(255, 255, 255, 0.52);
    font-size: 1rem;
}

.premium-player-frame {
    width: min(1320px, 100%);
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: #050608;
    box-shadow:
        0 55px 130px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.premium-player-topline {
    min-height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.012)
        );
}

.premium-player-topline span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
    font-weight: 700;
}

.premium-player-topline small {
    color: rgba(255, 255, 255, 0.36);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.premium-player-ratio {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.premium-player-ratio::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.03);
    content: "";
    pointer-events: none;
}

.premium-player-ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000000;
}

.premium-live-metadata {
    display: grid;
    width: min(1320px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.premium-live-metadata article {
    display: grid;
    min-height: 115px;
    align-content: center;
    gap: 9px;
    padding: 22px 25px;
    background:
        linear-gradient(
            145deg,
            rgba(8, 11, 16, 0.98),
            rgba(4, 6, 9, 0.98)
        );
}

.premium-live-metadata span {
    color: rgba(255, 255, 255, 0.33);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.premium-live-metadata strong {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.88rem;
    line-height: 1.45;
}

.premium-progress-area {
    width: min(1320px, 100%);
    margin-right: auto;
    margin-left: auto;
}

/* =========================================================
   VIDEO COMPLETION OVERLAY
   ========================================================= */

.premium-completion-open {
    overflow: hidden;
}

.premium-completion-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    padding: 24px;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(47, 109, 187, 0.24),
            transparent 32%
        ),
        rgba(1, 2, 4, 0.94);
    backdrop-filter: blur(25px);
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.premium-completion-overlay.is-visible {
    visibility: visible;
    opacity: 1;
}

.premium-completion-panel {
    width: min(100%, 940px);
    padding: clamp(42px, 7vw, 88px);
    transform: translateY(24px) scale(0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(63, 129, 211, 0.20),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0b111b,
            #08090d 58%,
            #0d0508
        );
    box-shadow:
        0 60px 150px rgba(0, 0, 0, 0.70);
    text-align: center;
    transition: transform 350ms ease;
}

.premium-completion-overlay.is-visible
.premium-completion-panel {
    transform: translateY(0) scale(1);
}

.premium-completion-icon {
    display: grid;
    width: 82px;
    height: 82px;
    margin: 0 auto 28px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    background:
        linear-gradient(
            145deg,
            rgba(65, 138, 218, 0.32),
            rgba(255, 255, 255, 0.055)
        );
    box-shadow:
        0 0 60px rgba(59, 127, 208, 0.25);
    font-size: 1.9rem;
    font-weight: 800;
}

.premium-completion-kicker {
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.premium-completion-panel h2 {
    max-width: 790px;
    margin: 22px auto;
    font-size: clamp(3.2rem, 7vw, 7rem);
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.premium-completion-panel > p {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.53);
    font-size: 1rem;
    line-height: 1.75;
}

.premium-completion-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    margin-top: 38px;
}

.premium-completion-actions .button {
    min-width: 270px;
    justify-content: center;
    gap: 10px;
}

.premium-completion-close {
    margin-top: 25px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.72rem;
    cursor: pointer;
}

.premium-completion-close:hover {
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 800px) {
    .premium-live-metadata {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .premium-live-page {
        width: min(100% - 24px, 1440px);
    }

    .premium-player-frame {
        border-radius: 18px;
    }

    .premium-player-topline {
        min-height: 55px;
        padding: 13px 16px;
    }

    .premium-live-metadata {
        grid-template-columns: 1fr;
    }

    .premium-live-metadata article {
        min-height: 90px;
    }

    .premium-completion-overlay {
        padding: 12px;
    }

    .premium-completion-panel {
        padding: 42px 22px;
        border-radius: 21px;
    }

    .premium-completion-panel h2 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .premium-completion-actions {
        flex-direction: column;
    }

    .premium-completion-actions .button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   RESERVATION LANGUAGE SELECTOR
   ========================================================= */

.premium-language-selector {
    position: relative;
    z-index: 3;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 16px;
    margin: 0 0 48px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(4, 6, 9, 0.76);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
}

.premium-language-selector > span {
    padding-left: 13px;
    color: rgba(255, 255, 255, 0.36);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.premium-language-selector > div {
    display: flex;
    gap: 4px;
}

.premium-language-selector a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.72rem;
    font-weight: 750;
    transition:
        color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.premium-language-selector a:hover {
    color: #ffffff;
}

.premium-language-selector a.is-active {
    background: #ffffff;
    color: #050608;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.12);
}

@media (max-width: 520px) {
    .premium-language-selector {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .premium-language-selector > div {
        flex: 1;
    }

    .premium-language-selector a {
        flex: 1;
    }
}

/* =========================================================
   BOOK AUDIENCE — ENGLISH ONLY
   ========================================================= */

.premium-language-selector {
    flex-wrap: wrap;
}

.premium-language-selector a.is-disabled {
    opacity: 0.28;
    cursor: not-allowed;
    pointer-events: none;
}

.premium-language-availability-note {
    flex-basis: 100%;
    padding: 2px 13px 7px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.66rem;
    line-height: 1.5;
}

.premium-language-availability-note[hidden] {
    display: none;
}

/* =========================================================
   LANGUAGE SELECTOR INSIDE RESERVATION FORM
   ========================================================= */

.premium-form-language-field {
    display: grid;
    gap: 9px;
}

.premium-form-language-field > span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
}

.premium-form-language-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.premium-form-language-options button {
    min-height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(4, 6, 9, 0.82);
    color: rgba(255, 255, 255, 0.48);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease;
}

.premium-form-language-options button:hover {
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.premium-form-language-options button.is-active {
    border-color: #ffffff;
    background: #ffffff;
    color: #050608;
}

.premium-form-language-options button.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.premium-form-language-field small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.66rem;
    line-height: 1.5;
}

.premium-form-language-field small[hidden] {
    display: none;
}

/* =========================================================
   RESERVATION LANGUAGE FIELD — FINAL
   ========================================================= */

.premium-form-language-field {
    display: grid;
    gap: 9px;
}

.premium-form-language-field > span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
}

.premium-form-language-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.premium-form-language-options button {
    min-height: 58px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(4, 6, 9, 0.82);
    color: rgba(255, 255, 255, 0.50);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
}

.premium-form-language-options button:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}

.premium-form-language-options button.is-active {
    border-color: #ffffff;
    background: #ffffff;
    color: #050608;
}

.premium-form-language-options button.is-disabled,
.premium-form-language-options button:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.premium-form-language-field small {
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.66rem;
    line-height: 1.5;
}

.premium-form-language-field small[hidden] {
    display: none;
}

.premium-form-language-field[hidden] {
    display: none;
}

.premium-form-language-options button[hidden] {
    display: none;
}

/* =========================================================
   RESERVATION FORM - FINAL LAYOUT
   ========================================================= */

.premium-reservation-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}

.premium-reservation-form-grid label,
.premium-form-language-field{
    width:100%;
}

.premium-reservation-form-grid select{
    width:100%;
    min-height:60px;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(6,8,12,.90);
    color:#fff;
    font:inherit;
    font-size:1rem;
    appearance:none;
}

.premium-form-language-field{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.premium-form-language-options{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:8px;
}

.premium-form-language-options button{
    height:60px;
}

@media(max-width:900px){

    .premium-reservation-form-grid{
        grid-template-columns:1fr;
    }

    .premium-form-language-options{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   RESERVATION TYPE + LANGUAGE ROW — FINAL
   ========================================================= */

.premium-reservation-type-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: end;
}

.premium-reservation-type-row > label,
.premium-reservation-type-row
.premium-form-language-field {
    width: 100%;
    min-width: 0;
}

.premium-reservation-type-row select {
    width: 100%;
    min-height: 60px;
    padding: 0 52px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    background:
        linear-gradient(
            45deg,
            transparent 50%,
            rgba(255, 255, 255, 0.72) 50%
        )
        calc(100% - 20px) calc(50% - 3px) / 6px 6px
        no-repeat,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.72) 50%,
            transparent 50%
        )
        calc(100% - 14px) calc(50% - 3px) / 6px 6px
        no-repeat,
        rgba(4, 6, 9, 0.86);
    color: #ffffff;
    font: inherit;
    font-size: 0.96rem;
    appearance: none;
    -webkit-appearance: none;
}

.premium-reservation-type-row select:focus {
    border-color: rgba(255, 255, 255, 0.34);
    outline: none;
    box-shadow:
        0 0 0 4px rgba(74, 131, 198, 0.10);
}

.premium-reservation-type-row
.premium-form-language-options {
    margin-top: 8px;
}

.premium-reservation-type-row
.premium-form-language-options button {
    min-height: 60px;
}

@media (max-width: 820px) {
    .premium-reservation-type-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   LIVE EXPERIENCE — COMPACT PLAYER
   ========================================================= */

@media (min-width: 981px) {
    .premium-player-frame {
        width: min(980px, 76vw);
        margin-right: auto;
        margin-left: auto;
    }

    .premium-live-metadata,
    .premium-progress-area {
        width: min(980px, 76vw);
    }
}

@media (max-width: 980px) {
    .premium-player-frame,
    .premium-live-metadata,
    .premium-progress-area {
        width: 100%;
    }
}

/* =========================================================
   LIVE EXPERIENCE — COMPACT ABOVE-THE-FOLD HEADER
   ========================================================= */

@media (min-width: 981px) {
    .premium-live-page {
        padding-top: 14px;
    }

    .premium-live-header {
        min-height: 42px;
        margin-bottom: 12px;
    }

    .premium-live-introduction {
        margin-top: 12px;
        margin-bottom: 24px;
    }

    .premium-live-introduction h1 {
        max-width: 900px;
        margin: 8px auto 10px;
        font-size: clamp(2.5rem, 4.2vw, 4.8rem);
        line-height: 0.94;
        letter-spacing: -0.055em;
    }

    .premium-live-introduction p {
        max-width: 680px;
        margin: 0 auto;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .premium-player-frame {
        margin-top: 0;
    }

    .premium-player-topline {
        min-height: 52px;
        padding: 0 20px;
    }
}

@media (max-width: 980px) {
    .premium-live-introduction {
        margin-top: 28px;
        margin-bottom: 24px;
    }

    .premium-live-introduction h1 {
        margin-top: 10px;
        font-size: clamp(2.7rem, 11vw, 4.8rem);
        line-height: 0.96;
    }
}

/* =========================================================
   LIVE EXPERIENCE — TRUE ABOVE-THE-FOLD LAYOUT
   ========================================================= */

@media (min-width: 981px) {
    .premium-live-page {
        padding-top: 10px;
    }

    .premium-live-header {
        min-height: 34px;
        margin-bottom: 4px;
    }

    .premium-live-introduction {
        margin: 4px auto 14px;
    }

    .premium-live-introduction
    .premium-experience-kicker {
        font-size: 0.58rem;
        letter-spacing: 0.15em;
    }

    .premium-live-introduction h1 {
        max-width: 760px;
        margin: 4px auto 4px;
        font-size: clamp(2rem, 3vw, 3.2rem);
        line-height: 0.98;
        letter-spacing: -0.045em;
    }

    .premium-live-introduction p {
        margin: 0 auto;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .premium-player-frame {
        width: min(760px, 68vw);
        margin: 0 auto;
        border-radius: 18px;
    }

    .premium-player-topline {
        min-height: 42px;
        padding: 0 16px;
    }

    .premium-player-topline span {
        font-size: 0.68rem;
    }

    .premium-player-topline small {
        font-size: 0.56rem;
    }

    .premium-live-metadata {
        width: min(760px, 68vw);
    }

    .premium-live-metadata article {
        min-height: 70px;
        padding: 12px 16px;
        gap: 5px;
    }

    .premium-live-metadata span {
        font-size: 0.5rem;
    }

    .premium-live-metadata strong {
        font-size: 0.72rem;
    }

    .premium-progress-area {
        width: min(760px, 68vw);
        margin-top: 10px;
    }

    .premium-featured-story {
        margin-top: 38px;
    }
}

@media (min-width: 981px) and (max-height: 820px) {
    .premium-live-introduction p {
        display: none;
    }

    .premium-player-frame,
    .premium-live-metadata,
    .premium-progress-area {
        width: min(700px, 64vw);
    }

    .premium-live-introduction h1 {
        font-size: clamp(1.8rem, 2.6vw, 2.8rem);
    }
}

@media (max-width: 980px) {
    .premium-player-frame,
    .premium-live-metadata,
    .premium-progress-area {
        width: 100%;
    }
}

/* =========================================================
   LIVE EXPERIENCE — INTRO CLOSER TO PLAYER
   ========================================================= */

@media (min-width: 981px) {
    .premium-live-introduction {
        margin-top: 0;
        margin-bottom: 6px;
    }

    .premium-live-introduction h1 {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .premium-live-introduction p {
        margin-bottom: 0;
    }

    .premium-player-frame {
        margin-top: 0;
    }
}

/* =========================================================
   ADMIN CLIENT PREVIEW
   ========================================================= */

.admin-client-preview-bar {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 46px;
    padding: 8px 22px;
    background: #ffffff;
    color: #05070a;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    font-size: .78rem;
}

.admin-client-preview-bar div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-client-preview-bar strong {
    font-size: .72rem;
    letter-spacing: .12em;
}

.admin-client-preview-bar span {
    opacity: .62;
}

.admin-client-preview-bar a {
    color: #05070a;
    font-weight: 700;
    text-decoration: none;
}

.admin-client-preview-bar a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .admin-client-preview-bar {
        padding: 10px 14px;
    }

    .admin-client-preview-bar div {
        gap: 7px;
    }
}


/* =========================================================
   BOOKSTORE FEATURED STORY — SHOW FULL IMAGE
   ========================================================= */

.premium-featured-story-bookstore
.premium-featured-story-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 620px;
    padding: 24px;
    background: #08090c;
}

.premium-featured-story-bookstore
.premium-featured-story-visual img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 620px;
    min-height: 0;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 980px) {
    .premium-featured-story-bookstore
    .premium-featured-story-visual {
        min-height: auto;
        padding: 18px;
    }

    .premium-featured-story-bookstore
    .premium-featured-story-visual img {
        max-height: none;
    }
}


/* =========================================================
   BOOKSTORE FEATURED STORY — FINAL IMAGE ALIGNMENT
   ========================================================= */

.premium-featured-story-bookstore
.premium-featured-story-visual {
    display: block;
    min-height: 0;
    height: auto;
    padding: 0;
    align-self: start;
    background: #08090c;
}

.premium-featured-story-bookstore
.premium-featured-story-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    min-height: 0;
    object-fit: contain;
    object-position: top center;
}


/* =========================================================
   HOME — FEATURED ORIGINALS CARD ARTWORK
   ========================================================= */

.featured-pit .cinematic-feature-image {
    background-image: url('/Pitcard.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.featured-bridge .cinematic-feature-image {
    background-image: url('/thebridgecard.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.featured-christmas .cinematic-feature-image {
    background-image: url('/25card.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* PIT GRAGEN STORY */
.pit-story-artwork {
    padding: 0;
    overflow: hidden;
    background: #080a0e;
}

.pit-story-artwork img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 650px;
    object-fit: cover;
    border-radius: 28px;
}

.story-detail-grid > div > p {
    line-height: 1.7;
    margin-bottom: 18px;
}

@media (max-width: 980px) {
    .pit-story-artwork img {
        min-height: auto;
        height: auto;
    }
}

/* =========================================================
   HOME HERO — REAL STORY ARTWORK
   ========================================================= */

.hero-story-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.hero-story-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   HOME — THE SENTINELS CHRISTMAS SPOTLIGHT
   ========================================================= */

.sentinels-holiday-art {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #08090c;
}

.sentinels-holiday-art img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 980px) {
    .sentinels-holiday-art img {
        height: auto;
        min-height: 0;
        object-fit: contain;
    }
}


/* =========================================================
   HOME AUDIENCE CARDS — CINEMATIC ARTWORK
   ========================================================= */

.cinematic-audience-card {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

/* Dark cinematic layer for text readability */
.cinematic-audience-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(5, 7, 12, 0.28) 0%,
            rgba(5, 7, 12, 0.62) 45%,
            rgba(5, 7, 12, 0.94) 100%
        );
}

/* Schools */
.cinematic-audience-card.audience-schools {
    background-image: url('/schools-card.png');
}

/* Bookstores */
.cinematic-audience-card.audience-bookstores {
    background-image: url('/bookstores-card.png');
}

/* Distributors */
.cinematic-audience-card.audience-distributors {
    background-image: url('/distributors-card.png');
}

/* Keep all card content above artwork */
.cinematic-audience-card > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   AUDIENCE / B2B LANDING PAGES
   ========================================================= */

.audience-page-hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 110px;
    background:
        radial-gradient(circle at 75% 25%, rgba(40,90,160,.18), transparent 32%),
        #040609;
}

.audience-page-hero-grid {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr);
    gap: 80px;
}

.audience-page-hero h1 {
    max-width: 820px;
    margin: 26px 0;
    font-size: clamp(3.4rem, 6vw, 6.8rem);
    letter-spacing: -.06em;
    line-height: .96;
}

.audience-page-hero h1 em {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.audience-page-lead {
    max-width: 720px;
    margin-bottom: 34px;
    color: rgba(255,255,255,.65);
    font-size: 1.13rem;
    line-height: 1.8;
}

.audience-page-image {
    overflow: hidden;
    min-height: 600px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;
    background: #080a0e;
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
}

.audience-page-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: cover;
}

.audience-editorial-section {
    padding: 130px 0;
    background: #080a0e;
}

.audience-editorial-grid {
    display: grid;
    grid-template-columns: minmax(280px,.65fr) minmax(0,1.35fr);
    gap: 90px;
}

.audience-editorial-grid h2 {
    margin-top: 24px;
    font-size: clamp(2.7rem,4vw,4.8rem);
    letter-spacing: -.05em;
    line-height: 1;
}

.audience-letter {
    max-width: 780px;
}

.audience-letter p {
    margin: 0 0 24px;
    color: rgba(255,255,255,.66);
    font-size: 1.03rem;
    line-height: 1.9;
}

.audience-letter strong {
    color: #fff;
}

.audience-benefits-section {
    padding: 110px 0;
    background: #030406;
}

.audience-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}

.audience-benefits-grid article {
    min-height: 300px;
    padding: 36px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    background: #0a0c10;
}

.audience-benefits-grid article > span {
    color: rgba(255,255,255,.20);
    font-size: 3rem;
    font-weight: 900;
}

.audience-benefits-grid h3 {
    margin: 55px 0 18px;
    font-size: 1.7rem;
}

.audience-benefits-grid p {
    color: rgba(255,255,255,.56);
    line-height: 1.75;
}

.audience-exclusive-section,
.audience-final-cta {
    padding: 120px 0;
    text-align: center;
}

.audience-exclusive-section {
    background:
        radial-gradient(circle at 50% 50%, rgba(31,100,185,.18), transparent 40%),
        #07090d;
}

.audience-exclusive-content {
    max-width: 900px;
}

.audience-exclusive-content h2,
.audience-final-cta h2 {
    margin: 22px auto;
    max-width: 900px;
    font-size: clamp(2.8rem,5vw,5.4rem);
    letter-spacing: -.055em;
}

.audience-exclusive-content p {
    max-width: 720px;
    margin: 0 auto 36px;
    color: rgba(255,255,255,.62);
    font-size: 1.08rem;
    line-height: 1.8;
}

.audience-large-button {
    min-width: 300px;
    justify-content: center;
}

.audience-final-cta {
    background: #020304;
}

.audience-investor-visual {
    display: grid;
    min-height: 560px;
    place-content: center;
    gap: 18px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 28px;
    background:
        radial-gradient(circle, rgba(64,91,180,.24), transparent 45%),
        #07090f;
    text-align: center;
}

.audience-investor-visual span {
    color: rgba(255,255,255,.45);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .25em;
}

.audience-investor-visual strong {
    margin-top: 22px;
    font-size: 2rem;
    letter-spacing: .12em;
}

@media (max-width: 980px) {
    .audience-page-hero-grid,
    .audience-editorial-grid {
        grid-template-columns: 1fr;
    }

    .audience-page-image {
        min-height: 0;
    }

    .audience-page-image img {
        height: auto;
        min-height: 0;
    }

    .audience-benefits-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   STORIES FOR BRANDS
   Cinematic commercial experience
   ========================================================= */

.brand-stories-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 170px 0 110px;
    background:
        radial-gradient(circle at 76% 40%, rgba(121, 20, 32, .32), transparent 32%),
        radial-gradient(circle at 20% 10%, rgba(24, 89, 180, .16), transparent 30%),
        linear-gradient(135deg, #050608 0%, #090b10 48%, #12080b 100%);
}

.brand-stories-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background:
        linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.025) 46%, transparent 47%),
        linear-gradient(180deg, transparent 70%, #050608 100%);
}

.brand-stories-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    align-items: center;
    gap: clamp(60px, 8vw, 130px);
}

.brand-stories-hero-copy h1 {
    max-width: 900px;
    margin: 20px 0 28px;
    font-size: clamp(3.4rem, 6.6vw, 7.6rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.brand-stories-hero-copy h1 em {
    display: block;
    font-style: normal;
    color: rgba(255,255,255,.58);
}

.brand-stories-hero-copy > p {
    max-width: 720px;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.75;
    color: var(--muted);
}

.brand-stories-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.brand-stories-christmas-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    padding: 12px 18px;
    border: 1px solid rgba(222, 73, 89, .35);
    border-radius: 999px;
    background: rgba(104, 17, 28, .16);
    backdrop-filter: blur(12px);
}

.brand-stories-christmas-badge span {
    font-size: .66rem;
    letter-spacing: .18em;
    color: rgba(255,255,255,.5);
}

.brand-stories-christmas-badge strong {
    font-size: .74rem;
    letter-spacing: .12em;
}

/* PHONE */

.brand-stories-hero-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 650px;
}

.brand-stories-hero-visual::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: rgba(176, 29, 45, .22);
    filter: blur(90px);
}

.brand-story-phone {
    position: relative;
    z-index: 2;
    width: min(340px, 80vw);
    padding: 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 48px;
    background: linear-gradient(145deg, #26282d, #08090c 55%);
    box-shadow:
        0 55px 100px rgba(0,0,0,.7),
        0 0 80px rgba(152, 24, 39, .13);
    transform: rotate(4deg);
}

.brand-story-phone::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 50%;
    width: 92px;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: #030304;
}

.brand-story-phone-screen {
    min-height: 630px;
    padding: 90px 24px 34px;
    overflow: hidden;
    border-radius: 39px;
    background:
        radial-gradient(circle at 50% 0, rgba(121,20,32,.35), transparent 34%),
        linear-gradient(180deg, #101116, #08090c);
}

.brand-story-phone-screen > span {
    display: block;
    margin-bottom: 18px;
    font-size: .62rem;
    letter-spacing: .22em;
    color: rgba(255,255,255,.42);
}

.brand-story-phone-screen > strong {
    display: block;
    max-width: 240px;
    margin-bottom: 55px;
    font-size: 1.6rem;
    line-height: 1.05;
}

.brand-story-message {
    max-width: 88%;
    margin: 15px 0;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px 18px 18px 4px;
    background: rgba(255,255,255,.055);
    font-size: .9rem;
    line-height: 1.5;
}

.brand-story-message.message-two {
    margin-left: auto;
    border-radius: 18px 18px 4px 18px;
    background: rgba(127, 22, 35, .3);
}

.brand-story-message.message-three {
    margin-top: 45px;
    border-color: rgba(212, 57, 75, .45);
    background: rgba(143, 24, 39, .38);
    text-align: center;
    font-weight: 700;
}

/* SHARED */

.brand-power-section,
.brand-mobile-section,
.brand-create-section,
.brand-format-section,
.brand-distribution-section,
.brand-paths-section,
.brand-agency-section,
.brand-use-cases-section,
.brand-impact-section,
.brand-global-section,
.brand-license-section,
.brand-difference-section,
.brand-ip-section,
.brand-demo-section,
.brand-inquiry-section,
.brand-final-section {
    position: relative;
    padding: clamp(90px, 11vw, 160px) 0;
}

.brand-section-heading {
    max-width: 850px;
    margin-bottom: 65px;
}

.brand-section-heading h2,
.brand-mobile-section h2,
.brand-format-section h2,
.brand-distribution-section h2,
.brand-agency-section h2,
.brand-impact-section h2,
.brand-license-section h2,
.brand-demo-section h2,
.brand-inquiry-section h2 {
    margin: 15px 0 20px;
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.brand-section-heading p,
.brand-format-intro {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.75;
}

/* POWER */

.brand-power-section {
    overflow: hidden;
    background: #050608;
}

.brand-power-statements {
    display: flex;
    flex-direction: column;
    margin: 50px 0 70px;
}

.brand-power-statements strong {
    display: block;
    padding: 11px 0;
    font-size: clamp(2.6rem, 6vw, 7rem);
    line-height: .92;
    letter-spacing: -.05em;
    color: rgba(255,255,255,.15);
    transition: color .25s ease, transform .25s ease;
}

.brand-power-statements strong:nth-child(1),
.brand-power-statements strong:nth-child(6) {
    color: #fff;
}

.brand-power-statements strong:hover {
    color: #fff;
    transform: translateX(12px);
}

.brand-power-copy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 45px;
    border-top: 1px solid var(--border);
}

.brand-power-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

/* MOBILE */

.brand-mobile-section {
    background:
        radial-gradient(circle at 20% 50%, rgba(25, 79, 157, .13), transparent 35%),
        #090b0f;
}

.brand-mobile-grid,
.brand-distribution-grid,
.brand-agency-grid,
.brand-impact-grid,
.brand-license-grid,
.brand-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(55px, 8vw, 120px);
}

.brand-mobile-grid p,
.brand-distribution-grid p,
.brand-agency-grid p,
.brand-impact-grid p,
.brand-license-grid p,
.brand-demo-grid p {
    color: var(--muted);
    line-height: 1.8;
}

.brand-mobile-line {
    display: block;
    margin-top: 35px;
    font-size: 1.35rem;
}

.brand-mobile-elements,
.brand-channel-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 12px;
    min-height: 400px;
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: rgba(255,255,255,.025);
}

.brand-mobile-elements span,
.brand-channel-cloud span,
.brand-christmas-formats span,
.brand-language-row span {
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    font-size: .72rem;
    letter-spacing: .1em;
}

/* CREATE */

.brand-create-section {
    background: #050608;
}

.brand-create-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.brand-create-grid span {
    min-height: 130px;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

/* FORMAT */

.brand-format-section {
    text-align: center;
    background: linear-gradient(180deg, #0a0c10, #060709);
}

.brand-format-section .cinematic-kicker,
.brand-format-section h2,
.brand-format-intro {
    margin-left: auto;
    margin-right: auto;
}

.brand-format-section h2 {
    max-width: 1000px;
}

.brand-format-principle {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 55px 0;
}

.brand-format-principle strong {
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: .06em;
}

.brand-campaign-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 65px;
}

.brand-campaign-flow span {
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .68rem;
    letter-spacing: .1em;
}

.brand-campaign-flow i {
    color: rgba(255,255,255,.3);
    font-style: normal;
}

/* DISTRIBUTION */

.brand-distribution-section {
    background: #050608;
}

/* PATHS */

.brand-paths-section {
    background:
        radial-gradient(circle at 80% 10%, rgba(127, 20, 34, .13), transparent 30%),
        #08090c;
}

.brand-paths-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.brand-paths-grid article {
    min-height: 440px;
    display: flex;
    flex-direction: column;
    padding: clamp(35px, 5vw, 65px);
    border: 1px solid var(--border);
    border-radius: 28px;
    background: rgba(255,255,255,.025);
}

.brand-paths-grid article > span,
.brand-use-cases-grid article > span {
    font-size: .68rem;
    letter-spacing: .16em;
    color: var(--muted);
}

.brand-paths-grid h3 {
    margin: auto 0 22px;
    max-width: 500px;
    font-size: clamp(2rem, 3vw, 3.4rem);
    line-height: 1;
}

.brand-paths-grid p {
    color: var(--muted);
    line-height: 1.7;
}

.brand-paths-grid a {
    margin-top: 20px;
    font-weight: 700;
}

/* AGENCIES */

.brand-agency-section {
    background: #050608;
}

.brand-agency-stack {
    display: grid;
    gap: 10px;
}

.brand-agency-stack span,
.brand-agency-stack strong {
    padding: 25px 30px;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.brand-agency-stack strong {
    border-color: rgba(188, 40, 57, .4);
    background: rgba(117, 20, 31, .18);
}

/* USE CASES */

.brand-use-cases-section {
    background: #090a0d;
}

.brand-use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.brand-use-cases-grid article {
    min-height: 270px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255,255,255,.02);
}

.brand-use-cases-grid h3 {
    margin: 70px 0 14px;
    font-size: 1.55rem;
}

.brand-use-cases-grid p {
    color: var(--muted);
    line-height: 1.7;
}

/* IMPACT */

.brand-impact-section {
    background:
        radial-gradient(circle at 80% 50%, rgba(22, 75, 144, .16), transparent 35%),
        #050608;
}

.brand-impact-note {
    padding-left: 18px;
    border-left: 2px solid rgba(255,255,255,.2);
    font-size: .9rem;
}

.brand-impact-words {
    display: flex;
    flex-direction: column;
}

.brand-impact-words span {
    font-size: clamp(3.2rem, 7vw, 7.5rem);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.05em;
    color: rgba(255,255,255,.14);
}

.brand-impact-words span:nth-child(3) {
    color: #fff;
}

/* CHRISTMAS */

.brand-christmas-section {
    position: relative;
    overflow: hidden;
    padding: clamp(110px, 13vw, 190px) 0;
    background:
        radial-gradient(circle at 75% 40%, rgba(178, 27, 45, .35), transparent 34%),
        linear-gradient(135deg, #08090c, #18080d);
}

.brand-christmas-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 80px;
}

.brand-christmas-section h2 {
    max-width: 800px;
    margin: 15px 0 25px;
    font-size: clamp(3rem, 6vw, 6.4rem);
    line-height: .94;
    letter-spacing: -.05em;
}

.brand-christmas-section p {
    max-width: 720px;
    color: rgba(255,255,255,.7);
    line-height: 1.8;
}

.brand-christmas-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 32px 0;
}

.brand-christmas-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(14px);
}

.brand-christmas-number strong {
    font-size: clamp(5rem, 10vw, 10rem);
    line-height: 1;
    letter-spacing: -.07em;
}

.brand-christmas-number small,
.brand-christmas-number span {
    letter-spacing: .14em;
    color: rgba(255,255,255,.55);
}

/* GLOBAL */

.brand-global-section {
    text-align: center;
    background: #050608;
}

.brand-global-section h2 {
    margin: 16px auto 20px;
    font-size: clamp(2.8rem, 5vw, 5.2rem);
}

.brand-global-section > .site-container > p {
    max-width: 760px;
    margin: auto;
    color: var(--muted);
    line-height: 1.8;
}

.brand-language-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 45px;
}

/* LICENSE */

.brand-license-section {
    background: #090a0d;
}

.brand-license-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.brand-license-options span,
.brand-license-options strong {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
}

.brand-license-options strong {
    grid-column: span 2;
    border-color: rgba(190, 39, 57, .42);
    background: rgba(118, 20, 32, .17);
}

/* DIFFERENCE */

.brand-difference-section {
    background: #050608;
}

.brand-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.brand-comparison-grid article {
    padding: 35px;
    border: 1px solid var(--border);
    border-radius: 22px;
}

.brand-comparison-grid small {
    color: var(--muted);
    letter-spacing: .15em;
}

.brand-comparison-grid strong {
    display: block;
    margin-top: 45px;
    font-size: 2rem;
}

.brand-comparison-grid p {
    color: var(--muted);
}

/* IP */

.brand-ip-section {
    background: #090a0d;
}

.brand-ip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.brand-ip-grid article {
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
}

.brand-ip-grid h3 {
    margin-top: 0;
    font-size: 1.35rem;
}

.brand-ip-grid p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.75;
}

/* DEMO */

.brand-demo-section {
    background:
        radial-gradient(circle at 75% 50%, rgba(31, 87, 166, .12), transparent 30%),
        #050608;
}

.brand-demo-state {
    display: grid;
    place-items: center;
    min-height: 330px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: rgba(255,255,255,.02);
}

.brand-demo-state span {
    align-self: end;
    font-size: .7rem;
    letter-spacing: .2em;
    color: var(--muted);
}

.brand-demo-state strong {
    align-self: start;
    font-size: clamp(2.4rem, 4vw, 4.5rem);
}

/* FORM */

.brand-inquiry-section {
    background:
        radial-gradient(circle at 50% 100%, rgba(137, 23, 37, .16), transparent 35%),
        #08090c;
}

.brand-inquiry-heading {
    max-width: 850px;
    margin-bottom: 55px;
}

.brand-campaign-form {
    position: relative;
    max-width: 1100px;
    padding: clamp(28px, 5vw, 60px);
    border: 1px solid var(--border);
    border-radius: 28px;
    background: rgba(255,255,255,.025);
}

.brand-campaign-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.brand-campaign-form label {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 20px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.brand-campaign-form input,
.brand-campaign-form select,
.brand-campaign-form textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    outline: none;
    background: rgba(0,0,0,.3);
    color: #fff;
    font: inherit;
    transition: border-color .2s ease, background .2s ease;
}

.brand-campaign-form select option {
    background: #111318;
    color: #fff;
}

.brand-campaign-form input:focus,
.brand-campaign-form select:focus,
.brand-campaign-form textarea:focus {
    border-color: rgba(211, 63, 80, .65);
    background: rgba(0,0,0,.48);
}

.brand-campaign-form textarea {
    resize: vertical;
}

.brand-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.brand-form-success,
.brand-form-error {
    max-width: 1100px;
    margin-bottom: 25px;
    padding: 18px 20px;
    border-radius: 12px;
}

.brand-form-success {
    border: 1px solid rgba(71, 183, 120, .35);
    background: rgba(71, 183, 120, .08);
}

.brand-form-error {
    border: 1px solid rgba(213, 62, 76, .4);
    background: rgba(213, 62, 76, .08);
}

/* FINAL */

.brand-final-section {
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(143, 23, 38, .2), transparent 35%),
        #050608;
}

.brand-final-section h2 {
    margin: 20px auto 0;
    font-size: clamp(3.2rem, 7vw, 7.5rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.brand-final-section h2 em {
    font-style: normal;
    color: rgba(255,255,255,.55);
}

.brand-final-section .brand-stories-actions {
    justify-content: center;
    margin-top: 45px;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .brand-stories-hero-grid,
    .brand-mobile-grid,
    .brand-distribution-grid,
    .brand-agency-grid,
    .brand-impact-grid,
    .brand-license-grid,
    .brand-demo-grid,
    .brand-christmas-grid {
        grid-template-columns: 1fr;
    }

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

    .brand-stories-hero-visual {
        min-height: 600px;
    }

    .brand-create-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .brand-use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-christmas-number {
        min-height: 350px;
    }
}

@media (max-width: 760px) {
    .brand-stories-hero {
        min-height: auto;
        padding: 135px 0 80px;
    }

    .brand-stories-hero-copy h1 {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .brand-stories-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .brand-stories-actions .button {
        text-align: center;
    }

    .brand-stories-christmas-badge {
        align-items: flex-start;
        flex-direction: column;
        border-radius: 18px;
    }

    .brand-stories-hero-visual {
        min-height: 530px;
    }

    .brand-story-phone-screen {
        min-height: 520px;
    }

    .brand-power-copy,
    .brand-paths-grid,
    .brand-comparison-grid,
    .brand-ip-grid,
    .brand-campaign-form .form-grid {
        grid-template-columns: 1fr;
    }

    .brand-create-grid,
    .brand-use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-power-statements strong {
        font-size: clamp(2.2rem, 11vw, 4rem);
    }

    .brand-mobile-elements,
    .brand-channel-cloud {
        min-height: 300px;
        padding: 25px;
    }

    .brand-paths-grid article {
        min-height: 360px;
    }

    .brand-campaign-flow {
        flex-direction: column;
    }

    .brand-campaign-flow i {
        transform: rotate(90deg);
    }

    .brand-christmas-number strong {
        font-size: 7rem;
    }
}

@media (max-width: 480px) {
    .brand-create-grid,
    .brand-use-cases-grid {
        grid-template-columns: 1fr;
    }

    .brand-story-phone {
        width: min(310px, 88vw);
    }

    .brand-license-options {
        grid-template-columns: 1fr;
    }

    .brand-license-options strong {
        grid-column: auto;
    }

    .brand-campaign-form {
        padding: 22px;
    }
}


/* =========================================================
   HOME — WELCOME TO OUR STUDIO
   ========================================================= */

.studio-welcome-section {
    padding: 34px 0 110px;
    background: #050608;
}

.studio-welcome-frame {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 30px;
    background: #08090c;
    box-shadow: 0 45px 100px rgba(0,0,0,.45);
}

.studio-welcome-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.studio-welcome-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3,4,6,.88) 0%,
            rgba(3,4,6,.58) 40%,
            rgba(3,4,6,.14) 72%,
            rgba(3,4,6,.24) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 45%,
            rgba(0,0,0,.65) 100%
        );
}

.studio-welcome-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 620px;
    max-width: 720px;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(40px, 7vw, 90px);
}

.studio-welcome-content h2 {
    margin: 18px 0 20px;
    font-size: clamp(3.2rem, 6vw, 6.8rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.studio-welcome-content h2 em {
    display: block;
    font-style: normal;
    color: rgba(255,255,255,.62);
}

.studio-welcome-content p {
    max-width: 580px;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 1.1rem;
    line-height: 1.7;
}

@media (max-width: 760px) {
    .studio-welcome-section {
        padding: 20px 0 75px;
    }

    .studio-welcome-frame,
    .studio-welcome-content {
        min-height: 500px;
    }

    .studio-welcome-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3,4,6,.12) 20%,
                rgba(3,4,6,.9) 82%
            );
    }

    .studio-welcome-content {
        justify-content: flex-end;
        padding: 34px 26px;
    }
}


/* =========================================================
   HOME STUDIO IMAGE — VISIBILITY FIX
   ========================================================= */

.studio-welcome-frame {
    background:
        linear-gradient(
            90deg,
            rgba(3,4,6,.58) 0%,
            rgba(3,4,6,.28) 42%,
            rgba(3,4,6,.05) 75%
        ),
        url('/st.png') center center / cover no-repeat !important;
}

.studio-welcome-frame > img {
    display: none !important;
}

.studio-welcome-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 45%,
            rgba(0,0,0,.42) 100%
        ) !important;
}

@media (max-width: 760px) {
    .studio-welcome-frame {
        background:
            linear-gradient(
                180deg,
                rgba(3,4,6,.04) 20%,
                rgba(3,4,6,.72) 88%
            ),
            url('/st.png') center center / cover no-repeat !important;
    }
}


/* =========================================================
   STORIES FOR BRANDS — PRIVATE SHARING
   ========================================================= */

.brand-private-sharing-section {
    position: relative;
    overflow: hidden;
    padding: clamp(110px, 13vw, 190px) 0;
    background:
        radial-gradient(circle at 82% 25%, rgba(22, 79, 150, .16), transparent 32%),
        radial-gradient(circle at 15% 80%, rgba(143, 24, 39, .14), transparent 30%),
        #050608;
}

.brand-private-sharing-header {
    max-width: 1100px;
}

.brand-private-sharing-header h2 {
    margin: 18px 0 30px;
    font-size: clamp(3.4rem, 7vw, 7.8rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.brand-private-sharing-header h2 em {
    display: block;
    font-style: normal;
    color: rgba(255,255,255,.48);
}

.brand-private-sharing-header p {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.brand-private-sharing-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(50px, 8vw, 110px);
    align-items: center;
    margin-top: 80px;
}

.brand-private-sharing-main {
    padding: clamp(36px, 5vw, 60px);
    border: 1px solid var(--border);
    border-radius: 28px;
    background: rgba(255,255,255,.025);
}

.brand-private-sharing-main > span {
    font-size: .72rem;
    letter-spacing: .16em;
    color: rgba(255,255,255,.5);
}

.brand-private-sharing-main h3 {
    margin: 28px 0 24px;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    line-height: 1;
}

.brand-private-sharing-main p {
    color: var(--muted);
    line-height: 1.8;
}

.brand-private-sharing-main strong {
    display: block;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    font-size: 1.1rem;
    line-height: 1.6;
}

.brand-private-sharing-channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 12px;
    min-height: 420px;
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: rgba(255,255,255,.02);
}

.brand-private-sharing-channels span {
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    font-size: .74rem;
    letter-spacing: .08em;
}

.brand-sharing-loop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 80px;
    padding: 38px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.brand-sharing-loop span {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.brand-sharing-loop i {
    color: rgba(255,255,255,.28);
    font-style: normal;
}

.brand-private-sharing-agency {
    max-width: 1000px;
    margin-top: 90px;
}

.brand-private-sharing-agency h3 {
    margin: 18px 0 22px;
    font-size: clamp(2.7rem, 5vw, 5.3rem);
    line-height: 1;
}

.brand-private-sharing-agency p {
    max-width: 760px;
    color: var(--muted);
    line-height: 1.8;
}

.brand-private-sharing-agency blockquote {
    max-width: 860px;
    margin: 45px 0 0;
    padding: 30px 35px;
    border-left: 3px solid rgba(190, 43, 60, .7);
    background: rgba(255,255,255,.025);
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    line-height: 1.45;
}

@media (max-width: 960px) {
    .brand-private-sharing-grid {
        grid-template-columns: 1fr;
    }

    .brand-private-sharing-channels {
        min-height: 280px;
    }
}

@media (max-width: 720px) {
    .brand-private-sharing-header h2 {
        font-size: clamp(3rem, 13vw, 5.2rem);
    }

    .brand-sharing-loop {
        flex-direction: column;
    }

    .brand-sharing-loop i {
        transform: rotate(90deg);
    }
}


/* =========================================================
   STORIES FOR BRANDS — COMMERCIAL MODEL
   ========================================================= */

.brand-commercial-model {
    background:
        radial-gradient(circle at 15% 20%, rgba(25, 77, 151, .12), transparent 30%),
        radial-gradient(circle at 85% 75%, rgba(145, 23, 38, .12), transparent 30%),
        #07090c;
}

.brand-commercial-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 70px 0 90px;
}

.brand-commercial-steps article {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255,255,255,.025);
}

.brand-commercial-steps article > span {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255,255,255,.15);
}

.brand-commercial-steps small {
    margin-top: 25px;
    color: rgba(255,255,255,.5);
    font-size: .68rem;
    letter-spacing: .15em;
}

.brand-commercial-steps h3 {
    margin: auto 0 16px;
    font-size: 1.65rem;
    line-height: 1.05;
}

.brand-commercial-steps p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.brand-commercial-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.brand-commercial-column {
    min-height: 360px;
    padding: clamp(35px, 5vw, 60px);
    border: 1px solid var(--border);
    border-radius: 28px;
    background: rgba(255,255,255,.025);
}

.brand-commercial-column h3 {
    margin: 22px 0;
    font-size: clamp(2.4rem, 4vw, 4rem);
}

.brand-commercial-column p {
    color: var(--muted);
    line-height: 1.8;
}

.brand-commercial-column > strong {
    display: block;
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: .78rem;
    letter-spacing: .1em;
    line-height: 1.7;
}

.brand-reach-section {
    padding: 70px 0 95px;
    border-top: 1px solid var(--border);
}

.brand-reach-section > h3 {
    max-width: 900px;
    margin: 18px auto 20px;
    font-size: clamp(2.8rem, 5vw, 5.4rem);
    line-height: 1;
}

.brand-reach-section > p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--muted);
    line-height: 1.8;
}

.brand-reach-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 55px;
}

.brand-reach-tiers article {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255,255,255,.025);
    text-align: center;
}

.brand-reach-tiers article:nth-child(2),
.brand-reach-tiers article:nth-child(3) {
    border-color: rgba(184, 41, 58, .35);
}

.brand-reach-tiers small {
    color: rgba(255,255,255,.45);
    font-size: .65rem;
    letter-spacing: .15em;
}

.brand-reach-tiers strong {
    margin: 16px 0 8px;
    font-size: clamp(3rem, 5vw, 5rem);
    letter-spacing: -.06em;
}

.brand-reach-tiers span {
    color: var(--muted);
    font-size: .8rem;
}

.brand-reach-note {
    margin-top: 25px !important;
    font-size: .78rem;
    color: rgba(255,255,255,.38) !important;
}

.brand-dashboard-section {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: clamp(50px, 8vw, 100px);
    align-items: center;
    padding: 95px 0;
    border-top: 1px solid var(--border);
}

.brand-dashboard-section h3 {
    margin: 18px 0 20px;
    font-size: clamp(2.7rem, 5vw, 5rem);
}

.brand-dashboard-section p {
    color: var(--muted);
    line-height: 1.8;
}

.brand-dashboard-visual {
    display: grid;
    gap: 12px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 0, rgba(112, 20, 34, .18), transparent 35%),
        rgba(255,255,255,.025);
}

.brand-dashboard-visual > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.brand-dashboard-visual small {
    color: var(--muted);
    letter-spacing: .12em;
}

.brand-dashboard-visual strong {
    font-size: 1.8rem;
}

.brand-dashboard-visual > span {
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(190, 43, 60, .4);
    border-radius: 12px;
    background: rgba(118, 20, 32, .2);
    text-align: center;
    font-weight: 800;
    letter-spacing: .08em;
}

@media (max-width: 980px) {
    .brand-commercial-steps,
    .brand-reach-tiers {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-commercial-split,
    .brand-dashboard-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .brand-commercial-steps,
    .brand-reach-tiers {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PRIVATE PRESENTATION — THREE STORY TEASERS
   BRANDS + NGOs ONLY
   ========================================================= */

.premium-three-teasers {
    padding: clamp(70px, 9vw, 120px) clamp(24px, 5vw, 70px);
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(130, 24, 42, .14),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(31, 74, 137, .13),
            transparent 30%
        ),
        #06070a;
}

.premium-three-teasers-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.premium-three-teasers-heading > span {
    display: block;
    margin-bottom: 15px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: rgba(255,255,255,.48);
}

.premium-three-teasers-heading h2 {
    margin: 0 0 20px;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.premium-three-teasers-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255,255,255,.6);
    line-height: 1.75;
}

.premium-three-teasers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1300px;
    margin: 0 auto;
}

.premium-teaser-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    background: rgba(255,255,255,.025);
}

.premium-teaser-card-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #090a0d;
}

.premium-teaser-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.premium-teaser-card:hover
.premium-teaser-card-visual img {
    transform: scale(1.035);
}

.premium-teaser-card-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    background:
        radial-gradient(
            circle at 65% 25%,
            rgba(112, 22, 42, .2),
            transparent 32%
        ),
        #0b0c10;
}

.premium-teaser-card-placeholder small {
    margin-bottom: 12px;
    letter-spacing: .14em;
    color: rgba(255,255,255,.45);
}

.premium-teaser-card-placeholder strong {
    font-size: 1.6rem;
}

.premium-teaser-number {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(8px);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.premium-teaser-card-copy {
    padding: 30px;
}

.premium-teaser-card-copy h3 {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    line-height: 1.05;
}

.premium-teaser-card-copy p {
    min-height: 52px;
    margin: 0 0 25px;
    color: rgba(255,255,255,.58);
    line-height: 1.65;
}

.premium-teaser-card-copy .button {
    width: 100%;
    justify-content: center;
}

@media (max-width: 980px) {
    .premium-three-teasers-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .premium-teaser-card-visual {
        aspect-ratio: 16 / 10;
    }

    .premium-teaser-card-copy p {
        min-height: 0;
    }
}

/* =========================================================
   PRIVATE PRESENTATION — CAMPAIGN BRIEF
   BRANDS + NGOs ONLY
   ========================================================= */

.premium-campaign-brief {
    position: relative;
    overflow: hidden;
    padding:
        clamp(85px, 10vw, 145px)
        clamp(24px, 5vw, 70px);
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(123, 25, 42, .16),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(23, 67, 127, .13),
            transparent 32%
        ),
        #08090c;
}

.premium-campaign-brief-heading {
    max-width: 1050px;
    margin: 0 auto 60px;
}

.premium-campaign-brief-heading > span {
    display: block;
    margin-bottom: 18px;
    color: rgba(255,255,255,.48);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.premium-campaign-brief-heading h2 {
    max-width: 1000px;
    margin: 0 0 25px;
    font-size: clamp(3rem, 6vw, 6.2rem);
    line-height: .96;
    letter-spacing: -.05em;
}

.premium-campaign-brief-heading p {
    max-width: 820px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 1.08rem;
    line-height: 1.8;
}

.premium-campaign-brief-heading > strong {
    display: block;
    max-width: 820px;
    margin-top: 28px;
    font-size: 1.15rem;
    line-height: 1.6;
}

.premium-campaign-brief-form {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 60px);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;
    background: rgba(255,255,255,.025);
    box-shadow: 0 40px 100px rgba(0,0,0,.22);
}

.premium-campaign-brief-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.premium-campaign-brief-form label {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 20px;
    color: rgba(255,255,255,.8);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .055em;
}

.premium-campaign-brief-form input,
.premium-campaign-brief-form select,
.premium-campaign-brief-form textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    outline: none;
    background: rgba(0,0,0,.32);
    color: #fff;
    font: inherit;
    line-height: 1.45;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.premium-campaign-brief-form select option {
    background: #111318;
    color: #fff;
}

.premium-campaign-brief-form input:focus,
.premium-campaign-brief-form select:focus,
.premium-campaign-brief-form textarea:focus {
    border-color: rgba(210, 61, 80, .65);
    background: rgba(0,0,0,.5);
}

.premium-campaign-brief-form textarea {
    resize: vertical;
}

.premium-campaign-brief-message {
    margin-top: 4px;
}

.premium-campaign-brief-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 25px;
    padding-top: 35px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.premium-campaign-brief-footer > div {
    max-width: 610px;
}

.premium-campaign-brief-footer strong {
    display: block;
    margin-bottom: 8px;
    font-size: .72rem;
    letter-spacing: .14em;
}

.premium-campaign-brief-footer p {
    margin: 0;
    color: rgba(255,255,255,.53);
    line-height: 1.65;
}

.premium-campaign-brief-footer .button {
    flex: 0 0 auto;
    min-width: 260px;
    justify-content: center;
}

.premium-campaign-brief-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.premium-campaign-brief-success,
.premium-campaign-brief-error {
    max-width: 1180px;
    margin: 0 auto 28px;
    padding: 18px 22px;
    border-radius: 13px;
}

.premium-campaign-brief-success {
    border: 1px solid rgba(71,183,120,.35);
    background: rgba(71,183,120,.08);
}

.premium-campaign-brief-error {
    border: 1px solid rgba(213,62,76,.4);
    background: rgba(213,62,76,.08);
}

@media (max-width: 820px) {

    .premium-campaign-brief-grid {
        grid-template-columns: 1fr;
    }

    .premium-campaign-brief-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .premium-campaign-brief-footer .button {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================================
   PRIVATE PRESENTATION — BOOKSTORES PROGRAM CTA
   ========================================================= */

.premium-bookstores-program-cta {
    max-width: 1100px;
    margin: 70px auto 90px;
    padding: clamp(45px, 7vw, 80px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(120, 30, 45, .18),
            transparent 35%
        ),
        rgba(255,255,255,.025);
    text-align: center;
}

.premium-bookstores-program-kicker {
    display: block;
    margin-bottom: 22px;
    color: rgba(255,255,255,.48);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.premium-bookstores-program-cta h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    font-size: clamp(2.8rem, 5vw, 5.4rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.premium-bookstores-program-cta p {
    max-width: 720px;
    margin: 0 auto 38px;
    color: rgba(255,255,255,.65);
    font-size: 1.05rem;
    line-height: 1.8;
}

.premium-bookstores-program-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 720px) {
    .premium-bookstores-program-cta {
        margin: 50px auto 70px;
        padding: 40px 24px;
    }

    .premium-bookstores-program-button {
        width: 100%;
    }
}


/* =========================================================
   GLOBAL MOBILE STORY VIEWER
   ========================================================= */

.story-viewer-page {
    margin: 0;
    min-height: 100vh;
    background: #050608;
    color: #fff;
}

.story-viewer-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(126, 24, 40, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(27, 72, 139, .16),
            transparent 32%
        ),
        #050608;
}

.story-viewer-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 35%
        );
}

.story-viewer-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(390px, .7fr);
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
    width: min(1500px, calc(100% - 48px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 60px 0;
}

.story-viewer-copy {
    max-width: 760px;
}

.story-viewer-kicker {
    display: block;
    margin-bottom: 20px;
    color: rgba(255,255,255,.48);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.story-viewer-copy h1 {
    margin: 0 0 28px;
    font-size: clamp(3.5rem, 6vw, 7rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.story-viewer-copy h1 em {
    display: block;
    font-style: normal;
    color: rgba(255,255,255,.45);
}

.story-viewer-copy > p {
    max-width: 680px;
    color: rgba(255,255,255,.62);
    font-size: 1.08rem;
    line-height: 1.8;
}

.story-viewer-note {
    display: inline-flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 35px;
    padding: 18px 22px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.story-viewer-note span {
    color: rgba(255,255,255,.42);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.story-viewer-note strong {
    font-size: .95rem;
}

.story-viewer-device-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.story-viewer-phone {
    position: relative;
    width: min(390px, 90vw);
    aspect-ratio: 9 / 19.5;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 48px;
    background:
        linear-gradient(
            145deg,
            #292b31,
            #0b0c10
        );
    box-shadow:
        0 40px 100px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.05);
}

.story-viewer-phone-screen {
    position: absolute;
    inset: 12px;
    overflow: hidden;
    border-radius: 38px;
    background: #000;
}

.story-viewer-phone-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.story-viewer-phone-top {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 30px;
    border-radius: 999px;
    background: #050608;
    pointer-events: none;
}

.story-viewer-phone-top span {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #1a1b1f;
}

.story-viewer-phone-bottom {
    position: absolute;
    z-index: 3;
    bottom: 18px;
    left: 50%;
    width: 110px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    pointer-events: none;
}

.story-viewer-direct-link {
    min-width: 250px;
    justify-content: center;
}

@media (max-width: 980px) {

    .story-viewer-layout {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .story-viewer-copy {
        margin: 0 auto;
    }

    .story-viewer-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

}

@media (max-width: 640px) {

    .story-viewer-layout {
        width: min(100% - 24px, 1500px);
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .story-viewer-copy {
        display: none;
    }

    .story-viewer-phone {
        width: 100%;
        max-width: none;
        min-height: calc(100vh - 60px);
        aspect-ratio: auto;
        border-radius: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .story-viewer-phone-screen {
        inset: 0;
        border-radius: 0;
    }

    .story-viewer-phone-top,
    .story-viewer-phone-bottom {
        display: none;
    }

    .story-viewer-direct-link {
        display: none;
    }

}


/* =========================================================
   STORY VIEWER — CLEAN PHONE FRAME
   ========================================================= */

/*
 * One clean external device frame.
 * Remove the previous "multiple vertical lines" effect.
 */
.story-viewer-phone {
    padding: 6px !important;

    border:
        1px solid
        rgba(255,255,255,.14) !important;

    border-radius: 46px !important;

    background:
        linear-gradient(
            145deg,
            #202126,
            #08090c
        ) !important;

    box-shadow:
        0 45px 110px rgba(0,0,0,.58),
        0 0 0 1px rgba(0,0,0,.8) !important;
}


/*
 * Bring the EBCHATS screen closer to the physical frame.
 */
.story-viewer-phone-screen {
    inset: 6px !important;

    border-radius: 40px !important;

    overflow: hidden !important;

    background: #000 !important;
}


/*
 * EBCHATS lives cross-domain, so its scrollbar cannot be
 * styled directly from Mezel Studios.
 *
 * Instead we make the iframe slightly wider than its clipped
 * viewport. The native scrollbar moves outside the visible
 * phone screen while scrolling remains functional.
 */
.story-viewer-phone-screen iframe {
    display: block !important;

    width: calc(100% + 18px) !important;
    height: 100% !important;

    border: 0 !important;
    margin: 0 !important;

    background: #000 !important;
}


/*
 * Make the simulated speaker/notch more subtle.
 */
.story-viewer-phone-top {
    top: 12px !important;

    width: 105px !important;
    height: 26px !important;

    background: #050608 !important;
}


/*
 * Cleaner bottom gesture indicator.
 */
.story-viewer-phone-bottom {
    bottom: 13px !important;

    width: 95px !important;
    height: 4px !important;

    background:
        rgba(255,255,255,.35) !important;
}


/*
 * On a real mobile device there is no simulated frame,
 * therefore restore the iframe to its natural width.
 */
@media (max-width: 640px) {

    .story-viewer-phone-screen iframe {
        width: 100% !important;
    }

}


/* =========================================================
   STORY VIEWER — HARD IFRAME CLIP
   ========================================================= */

.story-viewer-phone {
    overflow: hidden !important;
}

.story-viewer-phone-screen {
    position: absolute !important;
    inset: 5px !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
}

.story-viewer-phone-screen iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    /*
     * Push EBCHATS' native right-side scrollbar completely
     * outside the clipped phone viewport.
     */
    width: calc(100% + 34px) !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/*
 * Keep only one subtle physical-device edge.
 */
.story-viewer-phone {
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow:
        0 40px 100px rgba(0,0,0,.60) !important;
}


/* Real mobile devices use the natural EBCHATS viewport. */
@media (max-width: 640px) {

    .story-viewer-phone-screen {
        inset: 0 !important;
    }

    .story-viewer-phone-screen iframe {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

}


/* =========================================================
   PRIVATE PRESENTATION — CHRISTMAS 2026
   BOOKSTORES + DISTRIBUTORS + BRANDS ONLY
   ========================================================= */

.christmas-2026-presentation {
    position: relative;
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(121, 19, 34, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(184, 139, 66, .10),
            transparent 26%
        ),
        #050608;
}


/* ---------------------------------------------------------
   CINEMATIC SEASONAL ATMOSPHERE
   --------------------------------------------------------- */

.christmas-2026-atmosphere {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.christmas-2026-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .28;
    animation:
        christmasGlowBreath
        8s ease-in-out infinite alternate;
}

.christmas-glow-one {
    top: -180px;
    right: -130px;
    width: 480px;
    height: 480px;
    background:
        rgba(155, 25, 43, .38);
}

.christmas-glow-two {
    bottom: -220px;
    left: -130px;
    width: 520px;
    height: 520px;
    background:
        rgba(182, 140, 73, .16);
    animation-delay: -4s;
}

@keyframes christmasGlowBreath {
    from {
        transform: scale(.92);
        opacity: .18;
    }

    to {
        transform: scale(1.1);
        opacity: .34;
    }
}


/* ---------------------------------------------------------
   SUBTLE SNOW
   --------------------------------------------------------- */

.christmas-2026-snow {
    position: absolute;
    inset: 0;
}

.christmas-2026-snow span {
    position: absolute;
    top: -20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    box-shadow:
        0 0 8px rgba(255,255,255,.35);

    animation:
        christmasSnowFall
        13s linear infinite;
}

.christmas-2026-snow span:nth-child(1)  { left: 4%;  animation-delay: -3s;  animation-duration: 15s; }
.christmas-2026-snow span:nth-child(2)  { left: 10%; animation-delay: -8s;  animation-duration: 18s; }
.christmas-2026-snow span:nth-child(3)  { left: 16%; animation-delay: -1s;  animation-duration: 12s; }
.christmas-2026-snow span:nth-child(4)  { left: 23%; animation-delay: -11s; animation-duration: 17s; }
.christmas-2026-snow span:nth-child(5)  { left: 30%; animation-delay: -6s;  animation-duration: 14s; }
.christmas-2026-snow span:nth-child(6)  { left: 37%; animation-delay: -4s;  animation-duration: 19s; }
.christmas-2026-snow span:nth-child(7)  { left: 44%; animation-delay: -9s;  animation-duration: 13s; }
.christmas-2026-snow span:nth-child(8)  { left: 51%; animation-delay: -2s;  animation-duration: 16s; }
.christmas-2026-snow span:nth-child(9)  { left: 57%; animation-delay: -12s; animation-duration: 20s; }
.christmas-2026-snow span:nth-child(10) { left: 63%; animation-delay: -5s;  animation-duration: 14s; }
.christmas-2026-snow span:nth-child(11) { left: 69%; animation-delay: -7s;  animation-duration: 18s; }
.christmas-2026-snow span:nth-child(12) { left: 74%; animation-delay: -1s;  animation-duration: 15s; }
.christmas-2026-snow span:nth-child(13) { left: 79%; animation-delay: -10s; animation-duration: 17s; }
.christmas-2026-snow span:nth-child(14) { left: 84%; animation-delay: -4s;  animation-duration: 13s; }
.christmas-2026-snow span:nth-child(15) { left: 89%; animation-delay: -8s;  animation-duration: 19s; }
.christmas-2026-snow span:nth-child(16) { left: 93%; animation-delay: -6s;  animation-duration: 16s; }
.christmas-2026-snow span:nth-child(17) { left: 97%; animation-delay: -2s;  animation-duration: 14s; }
.christmas-2026-snow span:nth-child(18) { left: 55%; animation-delay: -14s; animation-duration: 21s; }

.christmas-2026-snow span:nth-child(3n) {
    width: 2px;
    height: 2px;
    opacity: .55;
}

.christmas-2026-snow span:nth-child(4n) {
    width: 6px;
    height: 6px;
    opacity: .38;
}

@keyframes christmasSnowFall {
    0% {
        transform:
            translate3d(0, -30px, 0)
            rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: .7;
    }

    88% {
        opacity: .55;
    }

    100% {
        transform:
            translate3d(35px, 110vh, 0)
            rotate(180deg);
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   CHRISTMAS 2026 BADGE
   --------------------------------------------------------- */

.christmas-2026-season-badge {
    position: fixed;
    z-index: 50;
    top: 24px;
    right: 26px;

    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 11px 16px;

    border:
        1px solid
        rgba(217, 175, 105, .28);

    border-radius: 12px;

    background:
        rgba(7, 8, 11, .76);

    box-shadow:
        0 10px 40px rgba(0,0,0,.28),
        inset 0 0 20px rgba(189, 41, 57, .05);

    backdrop-filter: blur(14px);

    pointer-events: none;

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

.christmas-2026-season-badge span {
    color: rgba(232, 193, 124, .92);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.christmas-2026-season-badge small {
    color: rgba(255,255,255,.48);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .14em;
}

@keyframes christmasBadgeEntrance {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   KEEP ACTUAL PRESENTATION ABOVE THE ATMOSPHERE
   --------------------------------------------------------- */

.christmas-2026-presentation .premium-live-page {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   CHRISTMAS ACCENTS
   --------------------------------------------------------- */

.christmas-2026-presentation .premium-live-page::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 80px;
    left: 50%;

    width: min(900px, 80vw);
    height: 420px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(135, 22, 39, .12),
            transparent 68%
        );

    filter: blur(24px);

    pointer-events: none;
}

.christmas-2026-presentation .premium-progress-area {
    border-color:
        rgba(205, 164, 95, .14);
}

.christmas-2026-presentation .premium-three-teasers,
.christmas-2026-presentation .premium-featured-story,
.christmas-2026-presentation .premium-bookstores-program-cta {
    position: relative;
}

.christmas-2026-presentation .premium-three-teasers::before,
.christmas-2026-presentation .premium-featured-story::before,
.christmas-2026-presentation .premium-bookstores-program-cta::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(520px, 70%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223, 178, 101, .48),
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(200, 154, 79, .18);

    pointer-events: none;
}


/* ---------------------------------------------------------
   RESPECT ACCESSIBILITY PREFERENCE
   --------------------------------------------------------- */

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

    .christmas-2026-snow span,
    .christmas-2026-glow,
    .christmas-2026-season-badge {
        animation: none !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    .christmas-2026-season-badge {
        position: absolute;

        top: 14px;
        right: 14px;

        padding: 9px 12px;
    }

    .christmas-2026-snow {
        opacity: .55;
    }

    .christmas-2026-glow {
        opacity: .18;
    }

}

/* =========================================================
   STORY VIEWER — SCHOOLS / READING XP
   ========================================================= */

.story-viewer-school-actions {
    width: min(390px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.story-viewer-school-actions .button {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.story-viewer-school-faq-toggle {
    cursor: pointer;
}

.story-viewer-pit-gragen-section {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 30px auto 70px;
}

.story-viewer-pit-gragen-heading {
    margin-bottom: 24px;
    text-align: center;
}

.story-viewer-pit-gragen-heading span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.45);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.story-viewer-pit-gragen-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.story-viewer-pit-gragen-frame {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 100px rgba(0,0,0,.38);
}

.story-viewer-pit-gragen-frame iframe {
    display: block;
}

.story-viewer-school-faqs {
    position: relative;
    z-index: 2;
    width: min(1100px, calc(100% - 40px));
    margin: 20px auto 70px;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 24px;
    background: rgba(8,9,13,.96);
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.story-viewer-school-faqs[hidden] {
    display: none;
}

.story-viewer-school-faqs-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;
}

.story-viewer-school-faqs-heading span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255,255,255,.45);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.story-viewer-school-faqs-heading h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.story-viewer-school-faq-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.story-viewer-school-faq-frame {
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
}

.story-viewer-school-faq-frame iframe {
    display: block;
}

@media (max-width: 640px) {

    .story-viewer-school-actions {
        width: 100%;
    }

    .story-viewer-pit-gragen-section {
        width: calc(100% - 24px);
        margin: 25px auto 40px;
    }

    .story-viewer-pit-gragen-frame {
        border-radius: 16px;
    }

    .story-viewer-school-faqs {
        width: calc(100% - 24px);
        margin: 18px auto 30px;
        padding: 16px;
        border-radius: 18px;
    }

    .story-viewer-school-faq-frame iframe {
        height: 720px !important;
    }
}

/* =========================================================
   STORY VIEWER — FINAL BUTTON DESIGN
   ========================================================= */

/*
 * CTA block follows the physical width of the simulated phone.
 * One clear primary action, two balanced secondary actions.
 */

.story-viewer-cta-group {
    width: min(390px, 90vw);
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Primary conversion action */

.story-viewer-cta-group > .story-viewer-school-register {
    width: 100%;
    min-width: 0;
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 14px 18px;

    text-align: center;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .025em;
}

/* Secondary actions */

.story-viewer-secondary-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.story-viewer-secondary-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 46px;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 10px 9px;

    text-align: center;
    font-size: .70rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .015em;
    white-space: nowrap;
}

.story-viewer-secondary-actions
.story-viewer-school-faq-toggle {
    opacity: 1;
    cursor: pointer;
}

/*
 * Previous mobile Story Viewer CSS hides the direct-story link.
 * For the Schools CTA block we explicitly keep it visible.
 */

.story-viewer-secondary-actions
.story-viewer-direct-link {
    display: flex !important;
}

/* Keep CTA visually attached to the phone */

.story-viewer-device-area {
    gap: 16px;
}

/* Small screens */

@media (max-width: 430px) {

    .story-viewer-cta-group {
        width: 100%;
        gap: 8px;
    }

    .story-viewer-cta-group >
    .story-viewer-school-register {
        min-height: 52px;
        font-size: .78rem;
    }

    .story-viewer-secondary-actions {
        gap: 7px;
    }

    .story-viewer-secondary-actions .button {
        min-height: 44px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: .64rem;
    }
}

/* =========================================================
   STORY VIEWER — CTA VISUAL CORRECTION
   ========================================================= */

.story-viewer-cta-group {
    width: min(450px, 92vw) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    margin-top: 4px !important;
}

.story-viewer-cta-group > .story-viewer-school-register {
    width: 100% !important;
    min-height: 52px !important;
    padding: 13px 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    border-radius: 999px !important;

    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.story-viewer-secondary-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 11px !important;
}

.story-viewer-secondary-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    padding: 11px 12px !important;

    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.045) !important;
    color: rgba(255,255,255,.92) !important;

    font-size: .68rem !important;
    font-weight: 750 !important;
    letter-spacing: .02em !important;
    line-height: 1.15 !important;
    text-align: center !important;

    opacity: 1 !important;
}

.story-viewer-secondary-actions .button:hover {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.28) !important;
    color: #fff !important;
}

.story-viewer-secondary-actions
.story-viewer-school-faq-toggle {
    color: rgba(255,255,255,.92) !important;
}

.story-viewer-device-area {
    gap: 16px !important;
}

@media (max-width: 520px) {

    .story-viewer-cta-group {
        width: 100% !important;
    }

    .story-viewer-secondary-actions {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }
}

/* =========================================================
   STORY VIEWER — HERO REGISTER CTA
   ========================================================= */

.story-viewer-hero-register {
    width: min(520px, 100%);
    min-height: 62px;

    margin-top: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 17px 28px;

    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-align: center;
}

/*
 * Phone area now contains only the two secondary actions.
 */

.story-viewer-cta-group {
    width: min(390px, 90vw) !important;
}

.story-viewer-secondary-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.story-viewer-secondary-actions .button {
    width: 100% !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: rgba(255,255,255,.94) !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.16) !important;

    opacity: 1 !important;
}

/*
 * Remove space created for the old register CTA.
 */

.story-viewer-cta-group {
    gap: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 980px) {

    .story-viewer-hero-register {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {

    .story-viewer-hero-register {
        width: 100%;
        min-height: 54px;
        margin-top: 18px;
    }

    .story-viewer-secondary-actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* =========================================================
   STORY VIEWER — FOOTER REGISTER CTA
   ========================================================= */

.story-viewer-footer-register-wrap {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 10px auto 70px;
    display: flex;
    justify-content: center;
}

.story-viewer-footer-register {
    width: min(520px, 100%);
    min-height: 62px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 17px 28px;

    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-align: center;
}

@media (max-width: 640px) {

    .story-viewer-footer-register-wrap {
        width: calc(100% - 24px);
        margin-bottom: 40px;
    }

    .story-viewer-footer-register {
        min-height: 54px;
        padding: 14px 18px;
        font-size: .8rem;
    }
}


/* ==========================================================
   FOR DISTRIBUTORS — PARTNER PROGRAM
   ========================================================== */

.distributor-partner-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;
    background:
        radial-gradient(circle at 80% 20%, rgba(74, 103, 255, .17), transparent 34%),
        radial-gradient(circle at 10% 80%, rgba(112, 61, 255, .11), transparent 34%),
        linear-gradient(145deg, #080b14 0%, #0c1120 55%, #080b13 100%);
    color: #fff;
}

.distributor-partner-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 60px 60px;
}

.distributor-partner-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 80px;
    align-items: center;
}

.distributor-partner-hero-copy h1 {
    max-width: 850px;
    margin: 18px 0 25px;
    font-size: clamp(3rem, 6vw, 6.3rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.distributor-partner-hero-copy h1 em {
    display: block;
    margin-top: 10px;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff, #9eb4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.distributor-partner-hero-copy > p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 1.18rem;
    line-height: 1.75;
}

.distributor-partner-actions {
    margin-top: 38px;
}

.distributor-join-button,
.distributor-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 62px;
    padding: 0 30px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .075em;
    box-shadow: 0 18px 55px rgba(66, 92, 255, .25);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.distributor-join-button:hover,
.distributor-final-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 23px 65px rgba(66, 92, 255, .38);
}

.distributor-join-button span,
.distributor-final-button span {
    font-size: 1.25rem;
}

.distributor-partner-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.distributor-partner-proof span {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.64);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .12em;
}


/* NETWORK HERO VISUAL */

.distributor-partner-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.distributor-network-card {
    position: relative;
    z-index: 2;
    width: min(290px, 90%);
    padding: 30px;
    border: 1px solid rgba(158,180,255,.32);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
    box-shadow:
        0 25px 80px rgba(0,0,0,.4),
        0 0 70px rgba(77,105,255,.16);
    backdrop-filter: blur(18px);
    text-align: center;
}

.distributor-network-card small {
    display: block;
    margin-bottom: 9px;
    color: #9eb4ff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.distributor-network-card strong {
    color: #fff;
    font-size: 1.35rem;
    letter-spacing: -.02em;
}

.distributor-network-line {
    width: 1px;
    height: 85px;
    background: linear-gradient(#718cff, rgba(113,140,255,.15));
}

.distributor-network-bookstores {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.distributor-network-bookstores::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24%;
    right: 24%;
    height: 1px;
    background: rgba(132,153,255,.35);
}

.distributor-network-bookstores span {
    position: relative;
    padding: 18px 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.75);
    text-align: center;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
}


/* HOW IT WORKS */

.distributor-model-section {
    padding: 110px 0;
    background: #fff;
}

.distributor-section-heading {
    max-width: 820px;
    margin-bottom: 55px;
}

.distributor-section-heading h2,
.distributor-network-economy-section h2,
.distributor-dashboard-section h2,
.distributor-bookstore-dashboard-section h2,
.distributor-digital-section h2,
.distributor-final-cta h2 {
    margin: 14px 0 20px;
    font-size: clamp(2.25rem, 4vw, 4.2rem);
    line-height: 1.03;
    letter-spacing: -.045em;
}

.distributor-section-heading h2 em {
    display: block;
    font-style: normal;
    color: #5a6ee8;
}

.distributor-section-heading > p {
    max-width: 680px;
    color: #657083;
    line-height: 1.75;
}

.distributor-model-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.distributor-model-steps article {
    position: relative;
    min-height: 320px;
    padding: 30px 26px;
    overflow: hidden;
    border: 1px solid #e7eaf1;
    border-radius: 18px;
    background: #fafbfe;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.distributor-model-steps article:hover {
    transform: translateY(-7px);
    border-color: #cbd3ff;
    box-shadow: 0 22px 60px rgba(26,39,90,.1);
}

.distributor-model-steps article > span {
    display: block;
    margin-bottom: 55px;
    color: #5d72ef;
    font-size: 2.7rem;
    font-weight: 800;
    letter-spacing: -.05em;
}

.distributor-model-steps article small {
    display: block;
    margin-bottom: 12px;
    color: #7b8495;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.distributor-model-steps article h3 {
    margin: 0 0 13px;
    font-size: 1.2rem;
    line-height: 1.25;
}

.distributor-model-steps article p {
    margin: 0;
    color: #6a7382;
    font-size: .91rem;
    line-height: 1.65;
}


/* REVENUE FLOW */

.distributor-network-economy-section {
    padding: 110px 0;
    background: #0a0e18;
    color: #fff;
}

.distributor-network-economy-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.distributor-network-economy-section p {
    color: rgba(255,255,255,.64);
    line-height: 1.75;
}

.distributor-revenue-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.distributor-revenue-flow article {
    flex: 1;
    min-width: 0;
    min-height: 150px;
    padding: 22px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.05);
}

.distributor-revenue-flow article small {
    color: rgba(255,255,255,.66);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.45;
}

.distributor-revenue-flow article strong {
    color: #92a8ff;
    font-size: 2rem;
}

.distributor-revenue-flow i {
    color: #718cff;
    font-style: normal;
    font-size: 1.25rem;
}


/* DISTRIBUTOR DASHBOARD */

.distributor-dashboard-section {
    padding: 115px 0;
    background: #f4f6fb;
}

.distributor-dashboard-grid,
.distributor-bookstore-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    align-items: center;
}

.distributor-dashboard-section p,
.distributor-bookstore-dashboard-section p {
    color: #697383;
    line-height: 1.75;
}

.distributor-dashboard-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 28px;
    border: 1px solid #dfe4ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(29,42,83,.11);
}

.distributor-dashboard-visual div {
    min-height: 130px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 13px;
    background: #f6f8fc;
}

.distributor-dashboard-visual small {
    color: #788295;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.distributor-dashboard-visual strong {
    color: #172033;
    font-size: clamp(1.4rem, 2.5vw, 2.4rem);
}

.distributor-dashboard-visual > span {
    grid-column: 1 / -1;
    padding: 15px;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    text-align: center;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .13em;
}


/* BOOKSTORE DASHBOARD */

.distributor-bookstore-dashboard-section {
    padding: 115px 0;
    background: #fff;
}

.distributor-bookstore-dashboard-visual {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: center;
    min-height: 350px;
    padding: 38px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(111,137,255,.25), transparent 35%),
        #0c111d;
    box-shadow: 0 30px 80px rgba(16,26,58,.18);
}

.distributor-bookstore-dashboard-visual span {
    padding: 15px 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.78);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
}


/* DIGITAL DISTRIBUTION */

.distributor-digital-section {
    padding: 120px 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(82,109,255,.17), transparent 38%),
        #0a0e18;
    color: #fff;
    text-align: center;
}

.distributor-digital-section .site-container {
    max-width: 980px;
}

.distributor-digital-section p {
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255,255,255,.65);
    line-height: 1.75;
}

.distributor-channel-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
    margin: 45px auto;
}

.distributor-channel-cloud span {
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.8);
    font-size: .75rem;
    font-weight: 700;
}

.distributor-digital-line {
    display: block;
    margin-top: 45px;
    color: #a8b9ff;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
}


/* FINAL CTA */

.distributor-final-cta {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    background: #f6f7fb;
    text-align: center;
}

.distributor-final-cta::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(91,112,239,.08);
    filter: blur(80px);
}

.distributor-final-cta .site-container {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.distributor-final-cta h2 em {
    display: block;
    font-style: normal;
    color: #5a70ee;
}

.distributor-final-cta p {
    max-width: 620px;
    margin: 0 auto 35px;
    color: #697383;
    line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .distributor-partner-hero-grid,
    .distributor-network-economy-grid,
    .distributor-dashboard-grid,
    .distributor-bookstore-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .distributor-model-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .distributor-partner-visual {
        min-height: 420px;
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

}

@media (max-width: 720px) {

    .distributor-partner-hero {
        padding: 80px 0 65px;
    }

    .distributor-partner-hero-copy h1 {
        font-size: clamp(2.7rem, 13vw, 4.5rem);
    }

    .distributor-join-button,
    .distributor-final-button {
        width: 100%;
        padding: 18px;
        line-height: 1.35;
    }

    .distributor-model-section,
    .distributor-network-economy-section,
    .distributor-dashboard-section,
    .distributor-bookstore-dashboard-section,
    .distributor-digital-section,
    .distributor-final-cta {
        padding: 80px 0;
    }

    .distributor-model-steps {
        grid-template-columns: 1fr;
    }

    .distributor-model-steps article {
        min-height: 0;
    }

    .distributor-model-steps article > span {
        margin-bottom: 35px;
    }

    .distributor-revenue-flow {
        flex-direction: column;
    }

    .distributor-revenue-flow article {
        width: 100%;
        min-height: 115px;
    }

    .distributor-revenue-flow i {
        transform: rotate(90deg);
    }

    .distributor-dashboard-visual {
        grid-template-columns: 1fr;
    }

    .distributor-dashboard-visual > span {
        grid-column: auto;
    }

    .distributor-bookstore-dashboard-visual {
        min-height: 280px;
        padding: 25px;
    }

}



/* ==========================================================
   FOR DISTRIBUTORS — UNIFIED BLACK BACKGROUND
   ========================================================== */

.distributor-partner-hero,
.distributor-model-section,
.distributor-network-economy-section,
.distributor-dashboard-section,
.distributor-bookstore-dashboard-section,
.distributor-digital-section,
.distributor-final-cta {
    background-color: #050505;
    color: #ffffff;
}

/* Remove previous light section backgrounds */

.distributor-model-section,
.distributor-dashboard-section,
.distributor-bookstore-dashboard-section,
.distributor-final-cta {
    background: #050505;
}

/* Main headings */

.distributor-model-section h2,
.distributor-dashboard-section h2,
.distributor-bookstore-dashboard-section h2,
.distributor-final-cta h2 {
    color: #ffffff;
}

/* Paragraphs */

.distributor-section-heading > p,
.distributor-dashboard-section p,
.distributor-bookstore-dashboard-section p,
.distributor-final-cta p {
    color: rgba(255,255,255,.66);
}

/* HOW IT WORKS cards */

.distributor-model-steps article {
    border-color: rgba(255,255,255,.10);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );
}

.distributor-model-steps article:hover {
    border-color: rgba(128,151,255,.42);
    box-shadow:
        0 22px 60px rgba(0,0,0,.45),
        0 0 40px rgba(74,103,255,.08);
}

.distributor-model-steps article h3 {
    color: #ffffff;
}

.distributor-model-steps article p {
    color: rgba(255,255,255,.60);
}

.distributor-model-steps article small {
    color: rgba(255,255,255,.48);
}

/* DISTRIBUTOR DASHBOARD */

.distributor-dashboard-visual {
    border-color: rgba(255,255,255,.11);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );
    box-shadow: 0 30px 80px rgba(0,0,0,.42);
}

.distributor-dashboard-visual div {
    background: rgba(255,255,255,.055);
}

.distributor-dashboard-visual small {
    color: rgba(255,255,255,.50);
}

.distributor-dashboard-visual strong {
    color: #ffffff;
}

.distributor-dashboard-visual > span {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
}

/* Bookstore dashboard already dark — integrate it */

.distributor-bookstore-dashboard-visual {
    border: 1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(
            circle at top right,
            rgba(111,137,255,.20),
            transparent 38%
        ),
        rgba(255,255,255,.035);
    box-shadow: 0 30px 80px rgba(0,0,0,.40);
}

/* Final CTA — keep glow but black canvas */

.distributor-final-cta {
    background: #050505;
}

.distributor-final-cta::before {
    background: rgba(91,112,239,.13);
}

/* Maintain a continuous black page visually */

.distributor-model-section,
.distributor-network-economy-section,
.distributor-dashboard-section,
.distributor-bookstore-dashboard-section,
.distributor-digital-section,
.distributor-final-cta {
    border-top: 1px solid rgba(255,255,255,.045);
}



/* ==========================================================
   DISTRIBUTORS — PHYSICAL + EPUB OPTION
   ========================================================== */

.distributor-format-option-section {
    padding: 35px 0 105px;
    background: #050505;
    color: #ffffff;
}

.distributor-format-option-card {
    position: relative;
    overflow: hidden;
    padding: 42px;
    border: 1px solid rgba(255, 78, 78, .42);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 45, 45, .22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(120, 10, 16, .55),
            rgba(42, 5, 9, .72)
        );
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 55px rgba(210,25,35,.10);
}

.distributor-format-option-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #ff3b3b;
}

.distributor-format-option-badge {
    display: inline-flex;
    margin-bottom: 26px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.72);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.distributor-format-option-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: end;
}

.distributor-format-option-kicker {
    display: block;
    margin-bottom: 12px;
    color: #ff6b6b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.distributor-format-option-card h2 {
    max-width: 760px;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: clamp(2rem, 3.5vw, 3.7rem);
    line-height: 1.03;
    letter-spacing: -.045em;
}

.distributor-format-option-card h2 em {
    display: block;
    margin-top: 5px;
    color: #ff7474;
    font-style: normal;
}

.distributor-format-option-card p {
    max-width: 720px;
    margin: 0 0 10px;
    color: rgba(255,255,255,.68);
    line-height: 1.7;
}

.distributor-format-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 285px;
    min-height: 58px;
    padding: 15px 22px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: #e72d35;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .075em;
    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.distributor-format-contact-button:hover {
    transform: translateY(-3px);
    background: #ff3c44;
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(231,45,53,.25);
}

@media (max-width: 850px) {

    .distributor-format-option-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .distributor-format-contact-button {
        width: 100%;
        min-width: 0;
    }

}

@media (max-width: 720px) {

    .distributor-format-option-section {
        padding: 20px 0 75px;
    }

    .distributor-format-option-card {
        padding: 30px 24px;
    }

}



/* =========================================================
   CONTACT FORM — LIVE SUBMISSION STATUS
   ========================================================= */

.contact-form-success,
.contact-form-error {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.6;
}

.contact-form-success {
    border: 1px solid rgba(68, 201, 126, .35);
    background: rgba(37, 133, 81, .14);
    color: #d9ffe8;
}

.contact-form-error {
    border: 1px solid rgba(255, 84, 84, .35);
    background: rgba(164, 34, 45, .15);
    color: #ffe1e1;
}

.contact-form-error ul {
    margin: 10px 0 0 20px;
}


/* =========================================================
   CONTACT — LIVE FORM FEEDBACK
   Minimal styles preserving original page design
   ========================================================= */

.contact-live-message {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.55;
}

.contact-live-message-success {
    border: 1px solid rgba(72, 200, 126, .30);
    background: rgba(41, 133, 80, .12);
    color: #dfffea;
}

.contact-live-message-error {
    border: 1px solid rgba(244, 75, 75, .30);
    background: rgba(155, 35, 44, .14);
    color: #ffe4e4;
}

.contact-live-message-error ul {
    margin: 8px 0 0 20px;
}