.banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    background-image: url('assets/images/woman-portrait1.webp');
    background-size: cover;
    background-position: top;
    min-height: 900px;
    height: 100vh;
    padding: clamp(36px, 7vw, 106px) 50px 0 50px;
    color: white;
    margin-bottom: 0;
    position: relative;
}

.banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(220px, 30vh, 460px);
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.35) 40%,
        rgba(255,255,255,0.85) 75%,
        rgba(255,255,255,1) 100%);
    z-index: 0;
}

@supports (height: 100dvh) {
    .banner { height: 100dvh; }
}


.banner-content {
    grid-column: 1 / 2;
    text-align: left;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--banner-gap);
    --banner-gap: calc(var(--cta-gap) * 0.5);
}

.banner-content h1 {
    font-size: 13rem;
    font-weight: 400;
    margin: -6px 0 0 0;
    line-height: 0.85;
    letter-spacing: -0.02em;
}


.banner-content p {
    font-size: 2.2rem;
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
}


.banner-content::before {
    content: '';
    position: absolute;
    inset: -8% -12% -10% -6%;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(56% 50% at 40% 28%,
            rgba(255,255,255,0.34) 0%,
            rgba(255,255,255,0.12) 38%,
            rgba(255,255,255,0.00) 78%),
        radial-gradient(88% 78% at 46% 32%,
            rgba(225,235,255,0.10) 0%,
            rgba(225,235,255,0.00) 90%);
    mix-blend-mode: screen;
    filter: blur(10px) brightness(1.06);
    opacity: 0.80;
    transform: translateX(-40px);
}

html {
    font-size: 90%;
    background-color: #ffffff;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Montserrat', sans-serif;
    max-width: 2000px;
    margin: 0 auto;
    background: transparent;
    color: #000000;
    position: relative;
    min-height: 100vh;
    z-index: 0;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

@media (prefers-reduced-data: reduce) {
    .trusted-by__track { animation: none; }
    .microphone-fullwidth::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(280px, 45vh, 620px);
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(255,255,255,0.92) 0%,
        rgba(255,255,255,0.68) 36%,
        rgba(255,255,255,0.26) 64%,
        rgba(255,255,255,0.0) 100%);
    opacity: 0.62;
    z-index: -1;
    transition: opacity 200ms ease;
}


:root {
    --page-bg: #ffffff;
    --soft-text-shadow: 0 1px 1px rgba(0,0,0,0.05);
    --soft-drop-1: 0 1px 1px rgba(0,0,0,0.06);
    --soft-drop-2: 0 4px 10px rgba(0,0,0,0.04);
    --intro-text-width: 640px;
    --section-gap: clamp(24px, 4vw, 56px);
    --media-col-width: clamp(320px, 36vw, 540px);
    --trusted-section-spacing: clamp(20px, 3vw, 32px);
    --banner-overlay-gap: clamp(32px, 6vw, 84px);
    --cta-gap: 108px;
    --color-grad-1: #2fb0c0;
    --color-grad-2: #3197A6;
    --color-grad-3: #277d88;
    --btn-gradient: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 55%, var(--color-grad-3) 100%);
    --shadow-elev: 0 8px 20px rgba(49,151,166,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
    --shadow-elev-hover: 0 12px 28px rgba(49,151,166,0.40), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 18px rgba(47, 240, 255, 0.75), 0 0 38px rgba(47, 240, 255, 0.60);
    --card-shadow-hover: 0 10px 24px rgba(49,151,166,0.34), inset 0 1px 0 rgba(255,255,255,0.50), 0 0 12px rgba(47,240,255,0.35);
    --glow-cyan: #2FF0FF;
    --site-bg-top: #C6BBB6;
    --site-bg-mid: #E1DAD7;
    --site-bg-bottom: #FFFFFF;
    --site-right-glow: rgba(255,255,255,0.14);
    --radius: 2px;
    --player-surface: rgba(7, 12, 31, 0.85);
    --player-border: rgba(255,255,255,0.16);
    --player-highlight: #2FF0FF;
    --player-text: #f4f7ff;
    --player-fixed-max: 480px;
    --player-fixed-min: 320px;
    --player-fixed-w: 620px;
    --player-fixed-h: 118px;
    --player-control-size: 22px;
    --player-radius: var(--radius);
    --voice-headline-gap: var(--cta-gap); /* такий самий відступ як між банером і блоком TRUSTED BY */
}

.voice-demos {
    padding: var(--space-7) 0;
    color: #f4f7ff;
    /* 8pt spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --radius: 16px;
    --player-radius: 22px;
    --vd-bg: radial-gradient(160% 140% at 10% -10%, rgba(136,224,184,0.28), transparent 50%) rgba(13,26,20,0.96);
    --vd-border: rgba(195,255,221,0.25);
    --vd-art-image: linear-gradient(135deg, #0f2d24 0%, #6ed9a0 100%);
    --vd-hero-glow: rgba(110,217,160,0.45);
    --vd-queue-bg: rgba(10,24,18,0.82);
    --vinyl-label-light: #ead9bf;
    --vinyl-label-dark: #b78a52;
    --vinyl-label-ink: #1c120a;
    --vinyl-label-ring: rgba(0,0,0,0.6);
    /* Stable sizing for playlist of 8 tracks */
    --vd-item-h: 58px;               /* .vd-item min-height */
    --vd-grid-gap: var(--space-3);   /* .vd-grid gap */
    --vd-visible: 8;                 /* visible items in playlist */
    --vd-queue-pad-y: var(--space-9);/* top+bottom padding of .vd-queue */
    
}
.voice-demos[data-lang="English"] {
    --vd-art-image: linear-gradient(135deg, #13204b 0%, #6a44ff 55%, #ff8ad6 100%);
    --vd-hero-glow: rgba(140,118,255,0.55);
    --vinyl-label-light: #f7e8c5;
    --vinyl-label-dark: #c58f3c;
    --vinyl-label-ink: #1b1209;
    --vinyl-label-ring: rgba(52,32,12,0.65);
}
.voice-demos[data-lang="German"] {
    --vd-art-image: linear-gradient(135deg, #23141f 0%, #d33f63 45%, #ffb36b 100%);
    --vd-hero-glow: rgba(220,86,120,0.48);
    --vinyl-label-light: #f1e2d6;
    --vinyl-label-dark: #b15a52;
    --vinyl-label-ink: #201010;
    --vinyl-label-ring: rgba(60,20,18,0.55);
}
.voice-demos[data-lang="Ukrainian"] {
    --vd-art-image: linear-gradient(135deg, #0f1d46 0%, #2467ff 55%, #ffdc7a 100%);
    --vd-hero-glow: rgba(80,143,255,0.52);
    --vinyl-label-light: #f6e49a;
    --vinyl-label-dark: #1e428a;
    --vinyl-label-ink: #f9f4e4;
    --vinyl-label-ring: rgba(17,34,78,0.6);
}
.voice-demos[data-lang="Russian"] {
    --vd-art-image: linear-gradient(135deg, #2a0f18 0%, #ff4d6d 45%, #3f8bff 55%, #9ad5ff 100%);
    --vd-hero-glow: rgba(255,100,130,0.55);
    --vinyl-label-light: #d9f1e8;
    --vinyl-label-dark: #2d5a52;
    --vinyl-label-ink: #f2fbf6;
    --vinyl-label-ring: rgba(12,40,33,0.58);
}
.voice-demos,
.voice-demos * { box-sizing: border-box; }
.voice-demos .vd-panel { display: block; }
.voice-demos .vd {
    width: 100%;
    max-width: min(var(--player-fixed-w), var(--intro-text-width, 640px));
    margin: 0;
    border-radius: var(--player-radius);
    padding: var(--space-7);
    border: 1px solid var(--vd-border);
    box-shadow: 0 36px 80px rgba(3,6,22,0.65);
    background: var(--vd-bg);
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(32px) saturate(1.35);
    backdrop-filter: blur(32px) saturate(1.35);
}
.voice-demos .vd::before,
.voice-demos .vd::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.voice-demos .vd::before {
    background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.18), transparent 60%);
    opacity: 0.45;
}
.voice-demos .vd::after {
    background: radial-gradient(circle at 80% 80%, rgba(47,240,255,0.18), transparent 55%);
    opacity: 0.35;
}
.voice-demos .vd > * { position: relative; z-index: 1; }
.vd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-6) var(--space-4);
    border-radius: var(--player-radius);
    background: var(--vd-queue-bg);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    box-shadow: 0 24px 45px rgba(3,6,18,0.45);
    width: 100%;
    align-self: stretch;
}
.vd-header__titles h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #f8fbff;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.voice-demos .vd-sub {
    margin: var(--space-2) 0 0;
    color: rgba(244,247,255,0.75);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.vd-layout {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: stretch;
    min-height: 0;
}
.vd-hero {
    border-radius: var(--player-radius);
    padding: var(--space-6) var(--space-6) var(--space-7);
    background: rgba(8,10,22,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 50px rgba(4,6,20,0.55), 0 0 60px var(--vd-hero-glow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    text-align: left;
}
.vd-art-stack {
    width: clamp(200px, 72vw, 292px); /* адаптивний розмір для мобільних */
    max-width: 292px;
    aspect-ratio: 1;
    position: relative;
    perspective: 900px;
    margin-inline: auto; /* відцентрувати */
    align-self: center;
}

/* Вінілова пластинка (анімація обкладинки) */
.vd-vinyl {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(176px, 70%, 221px); /* ще 1.5x від попереднього */
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 2;
    background: #0a0a0a;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.85);
    overflow: hidden;
    will-change: transform;
    animation: vinyl-spin 7.5s linear infinite;
    animation-play-state: paused; /* крутитися під час відтворення */
}
.vd-vinyl::before {
    content: '';
    position: absolute;
    inset: 12% 12%;
    border-radius: 50%;
    /* борозенки */
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 3px),
        radial-gradient(circle at 50% 50%, #131313 0%, #0f0f0f 70%, #0a0a0a 100%);
    mix-blend-mode: overlay;
    opacity: 0.75;
}
.vd-vinyl__label {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 34%; height: 34%;
    border-radius: 50%;
    background: radial-gradient(circle at 28% 28%, var(--vinyl-label-light, #e9d8b4), var(--vinyl-label-dark, #be9152));
    box-shadow:
        0 0 0 1.6px var(--vinyl-label-ring, rgba(0,0,0,0.6)),
        inset 0 0 2px rgba(0,0,0,0.35),
        0 2px 8px rgba(0,0,0,0.35);
}
.vd-vinyl__hole {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 6%; height: 6%;
    border-radius: 50%;
    background: #0b0b0b;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.15);
}
.vd-vinyl__labeltext {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 34%;
    height: 34%;
    pointer-events: none;
    overflow: visible;
    color: var(--vinyl-label-ink, #1b1208);
    opacity: 0.95;
    mix-blend-mode: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.vd-vinyl__labelring {
    fill: none;
    stroke: var(--vinyl-label-ring, currentColor);
    stroke-width: 1.6px;
    opacity: 0.6;
}
.vd-vinyl__labeltext text {
    fill: currentColor;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0;
}
.vd-vinyl__cross-letter { dominant-baseline: middle; }
@keyframes vinyl-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* запуск/зупинка обертання залежно від стану плеєра */
.vd-hero.is-playing .vd-vinyl { animation-play-state: running; }
.vd-art-card {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: var(--vd-art-image);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}
.vd-art-card--shadow {
    transform: translate(20px, 18px) scale(0.9);
    opacity: 0.45;
    filter: blur(1px);
}
.vd-art-card--mid {
    transform: translate(10px, 10px) scale(0.95);
    opacity: 0.7;
}
.vd-art-card--top {
    position: relative;
    overflow: hidden;
}
.vd-art-card--top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 55%);
    mix-blend-mode: screen;
}
.vd-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.vd-meta__label {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.72rem;
    color: rgba(244,247,255,0.6);
    margin-bottom: var(--space-1);
}
.vd-meta__track {
    margin: 0;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.vd-queue {
    border-radius: var(--player-radius);
    padding: var(--space-6) var(--space-4);
    background: var(--vd-queue-bg);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    box-shadow: 0 24px 45px rgba(3,6,18,0.45);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
    align-self: stretch;
    /* Fix the playlist area to exactly fit 8 items */
    --vd-queue-h: calc(var(--vd-item-h) * var(--vd-visible) + var(--vd-grid-gap) * (var(--vd-visible) - 1) + var(--vd-queue-pad-y) + var(--space-2));
    height: var(--vd-queue-h);
    max-height: var(--vd-queue-h);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-width: none;
}
.vd-lang-picker {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin-top: 6px;
}
.vd-lang-picker:not(.is-open) { gap: 0; }
.vd-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #f4f7ff;
    transition: transform 180ms ease, box-shadow 220ms ease, border-color 150ms ease, background 150ms ease, opacity 180ms ease, margin 180ms ease, max-width 180ms ease;
    flex: 0 0 auto;
    max-width: 32px;
}
.vd-lang .vd-flag {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Lang picker: show only active flag when closed */
.vd-lang-picker:not(.is-open) .vd-lang:not(.is-active) {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-1))) scale(0.9);
    margin-inline: 0;
    max-width: 0;
    pointer-events: none;
}

/* When open, reveal all flags with slide-in */
.vd-lang-picker.is-open .vd-lang {
    opacity: 1;
    transform: translateY(0) scale(1);
    margin-inline: var(--space-1);
    max-width: 32px;
}
.vd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.vd-lang:is(:hover,:focus-visible) {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(0);
}
.vd-lang.is-active {
    background: rgba(47,240,255,0.18);
    border-color: rgba(47,240,255,0.45);
    box-shadow: 0 10px 16px rgba(2,12,21,0.45), inset 0 0 0 1px rgba(47,240,255,0.3);
}
.vd-lang:focus-visible {
    outline: 2px solid rgba(47, 240, 255, 0.85);
    outline-offset: 3px;
    border-radius: 50%;
}
.vd-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding-top: calc(var(--space-1) / 2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
}
.vd-grid::-webkit-scrollbar {
    width: 6px;
}
.vd-grid::-webkit-scrollbar-track {
    background: transparent;
}
.vd-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
    border-radius: 999px;
}
.vd-item {
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
    border-radius: var(--player-radius);
    padding: var(--space-2);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--space-1) / 2);
    min-height: 58px;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    color: #f4f7ff;
    position: relative;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 120ms ease;
}
.vd-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}
.vd-item__label {
    flex: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.88rem;
    min-width: 0;
    text-wrap: balance;
    line-height: 1.2;
}
.vd-item--no-icon {
    justify-content: center;
}
.vd-item:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}
.vd-item.active {
    border-color: rgba(47,240,255,0.45);
    background: rgba(47,240,255,0.15);
    box-shadow: 0 16px 24px rgba(3,8,21,0.45);
    color: #ffffff;
}

.vd-audio {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Lift the whole audio bar closer to the headline */
    --player-nav-lift: -2px;
    margin-top: calc(-1 * var(--player-nav-lift));
}
.vd-audio-el {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.vd-player {
    display: grid;
    grid-template-columns: auto auto minmax(60px, 1fr) auto auto;
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--player-radius);
    background: rgba(9,12,27,0.8);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 18px 38px rgba(3,5,17,0.55);
    align-items: center;
    overflow: hidden;
    width: min(100%, var(--player-fixed-w));
    max-width: var(--player-fixed-w);
    min-width: 0;
    min-height: var(--player-fixed-h);
    height: var(--player-fixed-h);
    max-height: var(--player-fixed-h);
    margin-inline: 0;
    box-sizing: border-box;
    --vd-control-icon: 14px;
    --vd-slider-h: 8px; /* thickness of track/volume bars */
    --player-control-size: 30px;
    margin-top: 0;
}

/* Use default control size within voice demos */
.vd-player > * { min-width: 0; }
.vd-pp, .vd-mute {
    min-height: var(--player-control-size, 44px);
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
    color: #f4f7ff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: transform 150ms ease, box-shadow 200ms ease, background 150ms ease, border-color 150ms ease;
}
.vd-pp {
    width: var(--player-control-size, 44px);
    height: var(--player-control-size, 44px);
    padding: 0;
    border-radius: var(--player-radius);
    min-width: 0;
}
.vd-mute {
    width: var(--player-control-size, 44px);
    height: var(--player-control-size, 44px);
    padding: 0;
    border-radius: var(--player-radius);
}
.vd-pp:hover, .vd-mute:hover {
    background: rgba(47,240,255,0.16);
    border-color: rgba(47,240,255,0.45);
    box-shadow: 0 8px 16px rgba(3,10,22,0.45);
}
.vd-pp:active, .vd-mute:active { transform: scale(0.95); }
.vd-pp-icon {
    width: 0;
    height: 0;
    display: inline-block;
    border-style: solid;
    --vd-icon-size: var(--vd-control-icon, 22px);
    border-width: calc(var(--vd-icon-size) / 2) 0 calc(var(--vd-icon-size) / 2) calc(var(--vd-icon-size) * 0.65);
    border-color: transparent transparent transparent currentColor;
    transition: border-width 150ms ease, width 150ms ease, height 150ms ease, background 150ms ease;
    margin-left: 4px;
}
.vd-player.is-playing .vd-pp-icon {
    border-width: 0;
    width: var(--vd-control-icon, 22px);
    height: var(--vd-control-icon, 22px);
    background: linear-gradient(90deg,
        currentColor 0,
        currentColor 42%,
        transparent 42%,
        transparent 58%,
        currentColor 58%,
        currentColor 100%);
    margin-left: 0;
}

.vd-track {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: var(--vd-slider-h, 6px);
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 150ms ease;
    
}
.vd-track:hover { background: rgba(255,255,255,0.25); }
.vd-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(47,240,255,0.8), rgba(255,255,255,0.9));
}
.vd-time {
    grid-row: 2;
    grid-column: 2;
    min-width: 48px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: rgba(244,247,255,0.85);
    text-align: center;
    justify-self: center;
    
}
.vd-mute-icon {
    width: var(--vd-control-icon, 22px);
    height: var(--vd-control-icon, 22px);
    position: relative;
}
.vd-mute-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    clip-path: polygon(0 32%, 38% 32%, 65% 5%, 65% 95%, 38% 68%, 0 68%);
    transition: background 150ms ease;
}
.vd-mute-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -2px;
    width: 2px;
    height: calc(var(--vd-control-icon, 22px) + 4px);
    background: rgba(255,255,255,0.9);
    transform: translateX(-50%) rotate(45deg) scaleY(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
}
.vd-player.is-muted .vd-mute-icon::after {
    transform: translateX(-50%) rotate(45deg) scaleY(1.2);
    opacity: 1;
    background: #ff7a7a;
}
.vd-pp { grid-row: 2; grid-column: 1; }
.vd-mute { grid-row: 2; grid-column: 4; }
.vd-vol {
    grid-row: 2;
    grid-column: 3;
    width: 100%;
    height: var(--vd-slider-h, 6px);
    border-radius: 999px;
    background: rgba(255,255,255,0.21);
    position: relative;
    cursor: pointer;
    max-width: 160px; /* wider volume bar */
    min-width: 0; /* allow shrink within grid */
}
.vd-vol-level {
    position: absolute;
    inset: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(47,240,255,0.8), rgba(255,255,255,0.9));
    border-radius: inherit;
    transform-origin: left;
}
.vd-player .vd-download {
    grid-row: 2;
    grid-column: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: var(--player-control-size, 44px);
    height: var(--player-control-size, 44px);
    padding: 0;
    border-radius: var(--player-radius);
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
    color: #f4f7ff;
    text-decoration: none;
    box-shadow: none;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.vd-player .vd-download::before {
    content: '';
    width: var(--vd-control-icon, 22px);
    height: var(--vd-control-icon, 22px);
    background: currentColor;
    /* Up arrow to indicate uploading/downloading */
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M11 19h2v-9.17l3.59 3.58L18 12 12 6l-6 6 1.41 1.41L11 9.83V19z"/></svg>') center/contain no-repeat;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M11 19h2v-9.17l3.59 3.58L18 12 12 6l-6 6 1.41 1.41L11 9.83V19z"/></svg>') center/contain no-repeat;
    display: inline-block;
}
.vd-player .vd-download:hover {
    background: rgba(47,240,255,0.18);
    border-color: rgba(47,240,255,0.55);
    box-shadow: 0 8px 16px rgba(3,10,22,0.45);
}
.vd-player .vd-download:active { transform: translateY(0); }

.vd-pp:focus-visible, .vd-mute:focus-visible {
    outline: 2px solid rgba(47, 240, 255, 0.85);
    outline-offset: 3px;
    border-radius: var(--player-radius);
}
.vd-track:focus-visible, .vd-vol:focus-visible {
    outline: 2px solid rgba(47, 240, 255, 0.85);
    outline-offset: 4px;
    border-radius: 999px;
}
.vd-player .vd-download:focus-visible {
    outline: 2px solid rgba(47, 240, 255, 0.85);
    outline-offset: 3px;
    border-radius: var(--player-radius);
}
@media (max-width: 1024px){
    .vd-layout {
        grid-template-columns: 1fr;
    }
    .vd-queue {
        max-width: none;
    }
}
@media (max-width: 820px){
    .voice-demos .vd { padding: var(--space-6) var(--space-5); }
    .vd-header { flex-direction: column; align-items: flex-start; text-align: left; }
    .vd-lang-picker { justify-content: flex-start; }
    .vd-player {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
    }
    .vd-track { grid-column: 1 / -1; grid-row: 1; }
    .vd-pp { grid-column: 1; grid-row: 2; }
    .vd-time { grid-column: 2; grid-row: 2; justify-self: center; }
    .vd-mute { grid-column: 3; grid-row: 2; }
    .vd-vol {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: none;
    }
    .vd-player .vd-download {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
    }
}

@media (max-width: 600px){
    .voice-demos { padding: var(--space-6) 0; }
    .vd-header {
        gap: var(--space-4);
        padding: var(--space-5) var(--space-4);
    }
    .vd-layout { row-gap: var(--space-4); }
    .vd-hero {
        padding: var(--space-5) var(--space-4) var(--space-6);
        gap: var(--space-3);
    }
    .vd-queue {
        padding: var(--space-5) var(--space-4);
        gap: var(--space-3);
        --vd-item-h: 54px;
        --vd-grid-gap: var(--space-2);
        --vd-queue-pad-y: var(--space-7);
    }
    .vd-player {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2) var(--space-2);
        --player-control-size: 28px;
        --vd-control-icon: 13px;
        --vd-slider-h: 6px;
    }
}

@media (max-width: 480px){
    .vd-queue {
        --vd-visible: 6;
        --vd-item-h: 50px;
        --vd-grid-gap: var(--space-2);
    }
    .vd-player {
        --player-control-size: 26px;
        --vd-control-icon: 12px;
    }
}

.global-voice__headline .voice-demos {
    padding: 0;
    margin-top: var(--voice-player-gap, var(--cta-gap));
    width: 100%;
    transition: margin-top 280ms ease;
}
.global-voice__headline .voice-demos .vd {
    max-width: none;
    margin: 8px 0 0 0;
    --vd-min-h: 320px;
    height: auto;
    max-height: none;
    min-height: var(--vd-min-h);
    overflow: hidden;
    padding: 28px;
}
.global-voice__headline .voice-demos .vd-grid {
    min-height: 0;
    overflow: auto;
}

/* Ensure inner layout stretches to fill player height */
.global-voice__headline .voice-demos .vd-layout { height: 100%; }

@media (max-width: 820px){
    .vd-grid { grid-template-columns: 1fr; }
    .global-voice__headline .voice-demos .vd {
        height: auto;
        max-height: none;
    }
}

#zoom-root :where(h1,h2,h3,h4,h5,p,li,a,button,span,em,strong,label,small) {
    text-shadow: var(--soft-text-shadow);
}

/* cleaned: removed JS-driven size overrides for player */

#zoom-root :where(img, svg, .btn, .premium-trigger, .global-voice__item) {
    filter: drop-shadow(var(--soft-drop-1)) drop-shadow(var(--soft-drop-2));
}


.description__image img { filter: none; }

.trusted-by__track img, .trusted-by__logo svg { filter: none !important; }

img,
button,
.banner-content .btn,
.premium-trigger,
.trusted-by__logo {
    border: none;
    outline: none;
}


.banner-content .btn {
    padding: 0 2rem;
    cursor: pointer;
    border: none;
    border-radius: var(--radius);
    background: var(--btn-gradient);
    box-shadow: var(--shadow-elev);
    transition: transform 150ms ease, box-shadow 200ms ease, background 200ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    font-weight: 700;
    margin-top: 40px;
}

.banner-content .btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(49,151,166,0.20),
        inset 0 1px 0 rgba(255,255,255,0.40),
        0 0 9px rgba(47, 240, 255, 0.38),
        0 0 19px rgba(47, 240, 255, 0.30);
}

.banner-content .btn:active {
    transform: translateY(0);
    box-shadow:
        0 6px 16px rgba(49,151,166,0.30),
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 0 10px rgba(47, 240, 255, 0.45),
        0 0 22px rgba(47, 240, 255, 0.35);
}

.banner-content .btn:focus-visible {
    outline: 2px solid rgba(47, 240, 255, 0.9);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .banner {
        grid-template-columns: 1fr;
        padding: clamp(36px, 8vw, 68px) 20px 0 20px;
    }
    .banner-content {
        grid-column: 1 / -1;
        padding: 20px;
        align-items: flex-start;
    }

    .banner-content h1 {
        font-size: 6.5rem;
        margin: -6px 0 0 0;
        line-height: 0.88;
    }

    .banner-content p {
        font-size: 2.0rem;
        line-height: 1.12;
    }

    .banner-content .btn {
        font-size: 1rem;
        padding: 0 1.6rem;
        min-height: 56px;
        margin-top: 40px;
    }
}


@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .trusted-by__track { animation: none !important; transform: none !important; }
    .premium-trigger,
    .banner-content .btn,
    .service-block,
    .services-grid .service-block,
    .premium-panel { transition: none !important; }
}



.description {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
        "desc image"
        "headline info";
    align-items: stretch;
    column-gap: 24px;
    row-gap: var(--section-gap); /* стандартний відступ між фото та плеєром/текстом */
    padding: 0 50px;
    margin-top: var(--cta-gap);
    padding-bottom: clamp(80px, 10vw, 180px); /* додатковий відступ від фото №2 до низу сторінки */
}

.description__content {
    grid-area: desc;
    grid-column: 1 / 2;
    text-align: left;
    max-width: clamp(460px, 38vw, 640px);
    width: min(100%, clamp(460px, 38vw, 640px));
    justify-self: start;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: min(80vh, 960px);
}

.description__content .description__name {
    font-size: 6rem;
    font-weight: 400;
    margin: 10px 0 calc(var(--cta-gap) / 2); /* вдвічі менший відступ до абзацу */
    color: #57A9B4;
}

.description__content h2 {
    font-size: 3rem;
    font-weight: 300;
    margin: 0;
    color: #4B4949;
}

.description__content p {
    font-size: calc(1.375rem + 3px);
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0; /* базове скидання */
    color: #000000;
}
.description__content p:not(:last-child) {
    margin-bottom: 1.5em; /* відступ у висоту рядка між абзацами */
}

.description__image {
    grid-area: image;
    grid-column: 2 / 3;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    isolation: isolate;
    width: auto;
    max-width: 100%;
    justify-self: end;
    align-self: start;
}

.description__image img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(100vh, 1250px);
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: var(--radius);
    box-shadow: none; /* Прибрано тінь та підсвічування */
    /* Smooth fade of the bottom edge into the page background */
    --photo-fade-bottom: 18%;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 calc(100% - var(--photo-fade-bottom)),
        rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 calc(100% - var(--photo-fade-bottom)),
        rgba(0,0,0,0) 100%);
}

@media (min-width: 1024px) {
    .description__image {
        overflow: visible;
    }
    .description__image img {
        width: 112.5%;
        max-width: none;
        transform: none;
        transform-origin: center right;
    }
}

/* Desktop: align second image top with TANA, and anchor player to image bottom */
@media (min-width: 769px) {
  .description__image { margin-top: 0; }
  .global-voice__headline .vd-hero { height: 100%; }
}
@supports (height: 100dvh) {
    .description__image img { max-height: min(100dvh, 1250px); }
}


.description__image::before {
    content: none;
}


.description__image::after {
    content: none;
}
@media (max-width: 768px) {
    .description {
        row-gap: 0;
        --media-col-width: 100%;
        grid-template-columns: 1fr;
    grid-template-areas:
        "desc"
        "image"
        "headline"
        "info";
        padding: 0 20px;
    }

    .description__content {
        grid-column: 1 / -1;
        margin-bottom: 20px;
        display: block;
        width: 100%;
        max-width: none;
        min-height: auto;
    }

    /* Reset explicit placements on small screens */
    .description__image { margin-top: 0 !important; grid-area: image; }
    .global-voice__content { grid-area: info; }

    .description__content .description__name {
        font-size: 3rem;
        margin: 10px 0 calc(var(--cta-gap) / 2);
    }

    .description__content h2 {
        font-size: 1.8rem;
        line-height: 1.1;
    }

    .description__content p {
        font-size: calc(1.25rem + 4px);
    }

    .description__image { justify-content: center; }

    .description__image img {
        max-height: 400px;
        object-position: 50% 20%;
    }
}


.global-voice__headline {
    grid-area: headline;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: #4B4949;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    align-self: start;
    gap: 0;
    --voice-player-gap: var(--cta-gap); /* відступ як між банером і Trusted By */
}

.global-voice__headline > h2 {
    font-size: calc(3rem - 1px);
    line-height: 1.1;
    margin: 0; /* без додаткового відступу зверху/знизу */
    width: 100%;
    text-align: left;
    text-wrap: balance;
}



.global-voice__content {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0; /* прибираємо відступ під кнопкою */
    width: min(100%, var(--media-col-width));
    max-width: 100%;
    margin: 0;
    justify-self: end;
    align-self: start;
    padding-top: 0; /* відступи керуються на рівні вкладених блоків */
    align-items: flex-start;
    overflow-wrap: break-word;
    word-break: break-word;
}

.global-voice__items {
    padding-top: 0;
    /* Тримай синхронний відступ із плеєром без додаткового зсуву від меню */
    margin-top: var(--voice-player-gap, 0px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    transition: margin-top 280ms ease;
}

/* Fit premium CTA into the right column without extra padding */
.global-voice__content .premium-voice {
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
}

/* Make the services panel full-width under the button */
.global-voice__content .premium-panel {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: min(var(--premium-panel-width, 1100px), calc(100vw - 2 * clamp(20px, 5vw, 50px)));
    max-width: min(var(--premium-panel-width, 1100px), calc(100vw - 2 * clamp(20px, 5vw, 50px)));
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--voice-headline-gap);
    padding-inline: clamp(20px, 5vw, 50px);
}

@media (max-width: 768px) {
    .global-voice__content .premium-panel {
        width: 100%;
        max-width: 100%;
        left: auto;
        transform: none;
        padding-inline: 20px;
    }
    .global-voice__content .premium-voice {
        width: 100%;
        left: auto;
        transform: none;
    }
}

/* Use grid row gap for spacing so the headline/player and text stay aligned */
.description > .global-voice__headline,
.description > .global-voice__content {
    margin-top: 0;
}


.global-voice__item h3 {
    font-size: calc(1.375rem + 3px);
    font-weight: 400;
    margin: 0 0 10px 0;
    color: #57A9B4;
}

.global-voice__item p {
    font-size: calc(1.375rem + 3px);
    line-height: 1.5;
    color: #000000;
}


@media (max-width: 768px) {
    .global-voice__headline {
        grid-column: 1 / -1;
        margin-bottom: 20px;
    }

    .global-voice__headline > h2 {
        font-size: calc(2rem - 1px);
        line-height: 1.2;
        margin: 0 0 16px 0;
    }

    .global-voice__headline .voice-demos {
        margin-top: clamp(36px, 6vw, 72px);
    }

    .global-voice__items {
        padding-top: 0;
        margin-top: 0;
        gap: 10px;
    }

    .global-voice__content {
        grid-column: 1 / -1;
        gap: var(--voice-headline-gap);
    }

    .global-voice__content .premium-voice {
        margin-top: 0;
    }

    .global-voice__item h3 {
        font-size: calc(1.25rem + 3px);
    }

    .global-voice__item p {
        font-size: calc(1.25rem + 3px);
    }
}




.trusted-by {
    text-align: center;
    padding: 0 0 1px 0;
    color: #4B4949;
    --trusted-title-gap: clamp(18px, 4vw, 36px);
    margin-top: max(0px, calc(var(--cta-gap) - 40px));
    margin-bottom: var(--trusted-section-spacing);
    padding-bottom: 0;
    background: transparent;
    --logo-gap: clamp(12rem, 18vw, 20rem);
    --logo-h: 36px;
    --logo-pad: 10px;
    --scroll-duration: 40s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--trusted-title-gap);
}
.trusted-by__title {
    margin: 0;
    font-size: calc(1.375rem + 4px);
    letter-spacing: 0.95em; 
    word-spacing: 0.85em;   
    line-height: 1;
    text-align: center;
}

.trusted-by h1 {
    font-size: inherit;
    margin-bottom: 0;
}

.trusted-by__viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.trusted-by__track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: var(--logo-gap);
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    contain: layout paint;
}

.trusted-by__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 auto;
    height: var(--logo-h);
    padding: 0 var(--logo-pad);
    cursor: pointer;
}

.trusted-by__logo--clone { pointer-events: auto; }
.trusted-by__logo[aria-hidden="true"] { pointer-events: auto; }

.trusted-by__track img,
.trusted-by__logo svg {
    height: 100%;
    max-height: 100%;
    width: auto;
    margin: 0;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}


.trusted-by__logo img, .trusted-by__logo svg { transition: transform 180ms ease; will-change: transform; }
.trusted-by__logo:hover img,
.trusted-by__logo:focus-visible img,
.trusted-by__logo:hover svg,
.trusted-by__logo:focus-visible svg { transform: scale(1.02); }


.trusted-by__logo img[src*="apple-music"] { transform: scale(0.86); transform-origin: center; }
.trusted-by__logo img[src*="spotify"] { transform: scale(0.92); transform-origin: center; }
.trusted-by__logo img[src*="film-london"] { transform: scale(0.90); transform-origin: center; }
.trusted-by__logo img[src*="youtube-full"] { transform: scale(1.44); transform-origin: center; }
.trusted-by__logo svg.logo-onetap { transform: scale(1.30); transform-origin: center; }
.trusted-by__logo img[src*="96-8"] { transform: scale(1.12); transform-origin: center; }
.trusted-by__logo img[src*="tet"] { transform: scale(0.84); transform-origin: center; }


.trusted-by__logo:focus-visible {
    outline: 2px solid rgba(47, 240, 255, 0.85);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.trusted-by__logo img[src*="kyiv98f"],
.trusted-by__logo img[src*="logo_kyiv98fm"] { transform: scale(1.60); transform-origin: center; }


.trusted-by__logo.logo--onetap { height: calc(var(--logo-h) * 1.30); }
.trusted-by__logo.logo--onetap svg.logo-onetap { transform: none; }

@media (max-width: 768px) {
    .trusted-by { --logo-gap: clamp(7rem, 25vw, 10rem); --logo-h: 40px; }
    .trusted-by__title { font-size: calc(1.25rem + 4px); }
    .trusted-by h1 { font-size: inherit; }
    
}



.premium-voice {
    padding: 0 50px 0 50px;
    position: relative;
    margin-top: clamp(36px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.premium-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 1.85rem;
    min-height: 64px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    border-radius: var(--radius);
    background: var(--btn-gradient);
    box-shadow: var(--shadow-elev);
    transition: opacity 1200ms ease-out, transform 150ms ease, box-shadow 200ms ease, background 200ms ease;
    align-self: flex-end;
    width: fit-content;
}
.premium-trigger:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(49,151,166,0.20),
        inset 0 1px 0 rgba(255,255,255,0.40),
        0 0 9px rgba(47, 240, 255, 0.38),
        0 0 19px rgba(47, 240, 255, 0.30);
}
.premium-trigger:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(49,151,166,0.30), inset 0 1px 0 rgba(255,255,255,0.45);
}
.premium-trigger:focus-visible {
    outline: none;
}
.premium-trigger__text h2 {
    font-size: 1.125rem; 
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

@media (max-width: 768px) {
    .premium-trigger {
        padding: 0 1.4rem;
        min-height: 56px;
    }
}
.premium-trigger__text { position: relative; }
.premium-trigger .premium-trigger__text::after { content: none; }
.premium-subtext {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.55);
    margin: 0 0 8px 0;
}

.premium-voice.expanded .premium-trigger {
    display: inline-flex;
    margin-bottom: 24px;
}
.premium-voice.expanded .premium-trigger__text { 
    opacity: 1;
}
.premium-voice.expanded .premium-panel { margin-top: 0; }



.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 6px;
    column-gap: 4px;
    justify-items: center; 
}

.service-block {
    position: relative;
    background: var(--btn-gradient);
    padding: 16px 18px;
    border-radius: var(--radius);
    box-shadow:
        0 6px 18px rgba(18,56,64,0.24),
        inset 0 1px 0 rgba(255,255,255,0.22);
    border: 1px solid rgba(47,240,255,0.16);
    color: #ffffff;
    font-size: calc(24px * 0.7);
    text-align: left;
    --icon-gutter: 30px;
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 250ms ease, border-color 200ms ease, filter 220ms ease;
    -webkit-backdrop-filter: saturate(1.15) blur(1.4px);
    backdrop-filter: saturate(1.15) blur(1.4px);
    width: 92%;
}

.service-block h2, .service-block li, .service-block li * {
    text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}



.service-block:hover {
    transform: translateY(-3px);
    box-shadow:
        0 6px 16px rgba(49,151,166,0.20),
        inset 0 1px 0 rgba(255,255,255,0.40),
        0 0 9px rgba(47,240,255,0.38),
        0 0 19px rgba(47,240,255,0.30);
    border-color: rgba(47,240,255,0.35);
    filter: saturate(1.05);
}
.services-grid .service-block {
    transition: opacity 400ms ease, transform 500ms ease;
    will-change: transform, opacity;
}
html.js .premium-voice:not(.expanded) .services-grid .service-block {
    opacity: 0;
    transform: translateY(24px);
}
html.js .premium-voice.expanded .services-grid .service-block {
    opacity: 1;
    transform: none;
}
html.js .premium-voice .services-grid {
    max-height: 2500px;
    transition: max-height 400ms ease;
}
html.js .premium-voice .premium-panel {
    max-height: 5000px;
    transition: max-height 500ms ease, opacity 400ms ease, padding 250ms ease, box-shadow 250ms ease, background 250ms ease, border-color 250ms ease;
}
html.js .premium-voice:not(.expanded) .premium-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    border: 0;
    margin-bottom: 0;
}
html.js .premium-voice:not(.expanded) .premium-subtext { display: none; }
html.js .premium-voice.expanded .premium-subtext {
    display: block;
    animation: premiumSubtextFadeIn 1200ms ease-out both;
}


.premium-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 1;
    padding: 0;
    border-radius: var(--radius);
    border: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    overflow: visible;
    margin: 0 0 clamp(48px, 8vw, 140px) 0;
}
.premium-panel::after {
    content: none;
}
.premium-voice.expanded .premium-panel {
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    margin-bottom: clamp(48px, 8vw, 140px);
}

@keyframes premiumSubtextFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
html.js .premium-voice.expanded .services-grid .service-block:nth-child(5) { transition-delay: 240ms; }
html.js .premium-voice.expanded .services-grid .service-block:nth-child(6) { transition-delay: 300ms; }
html.js .premium-voice.expanded .services-grid .service-block:nth-child(7) { transition-delay: 360ms; }
html.js .premium-voice.expanded .services-grid .service-block:nth-child(8) { transition-delay: 420ms; }

.premium-trigger { cursor: pointer; }
.service-block * {
    text-align: left;
}

.service-block h2 {
    margin: 0 0 4px 0;
    font-size: calc(26px * 0.7);
    text-align: left;
    padding-left: 0;
    text-indent: 0;
    letter-spacing: 0.2px;
}
.service-block { --title-icon-pad: 28px; }
.service-block h2 { position: relative; padding-left: var(--title-icon-pad, 40px); }
.service-block h2::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 20px; height: 20px;
    border-radius: var(--radius);
    background-color: rgba(255,255,255,0.1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}
.service--commercial h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E");
}
.service--corporate h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}
.service--animation h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3 7h18v4H3z'/%3E%3Cpath d='M6 7l3-3 3 3 3-3 3 3'/%3E%3C/svg%3E");
}
.service--narration h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M20 22H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20z'/%3E%3C/svg%3E");
}
.service--wellness h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 22C6 21 2 17 2 12 2 7 6 3 11 2c3 7 7 11 11 11-1 5-5 9-11 9z'/%3E%3C/svg%3E");
}
.service--music h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}
.service--usage h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}
.service--addons h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E");
}

.service-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-block li {
    margin-bottom: 2px;
    font-size: calc(24px * 0.7);
    padding: 2px 0;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}
.service-block > :not(h2) { margin-left: 2ch; }
.service-block li + li { border-top: 0; }

.service-block li,
.service-block li * {
    text-decoration: none !important;
}
.service-block li span {
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: 0;
    color: inherit;
    font-weight: inherit;
}

@media (max-width: 768px) {
    .premium-voice { padding: 0 20px; align-items: flex-start; }
    .premium-voice .premium-trigger { margin-left: 0; align-self: flex-start; }
    .premium-voice h1 {
        font-size: 2rem;
    }
    .premium-trigger__text h2 {
        font-size: 1rem; 
    }

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

.work-with-me {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    padding: 20px;
    scroll-margin-top: clamp(24px, 6vw, 72px);
}

.work-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 640px;
}
.work-content h2 {
    font-size: 4.4rem;
    margin: 0;
    background: linear-gradient(135deg, #2fb0c0 0%, #3197A6 55%, #277d88 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.contact-item {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.contact-item .contact-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}

.contact-item h3 {
    margin-bottom: 8px;
    font-size: calc(22px * 0.9);
    color: #3197A6;
}

.contact-item a {
    font-size: calc(24px * 0.9);
    text-decoration: none;
    background: linear-gradient(135deg, #2fb0c0 0%, #3197A6 55%, #277d88 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.contact-item a:hover,
.contact-item a:focus-visible {
    color: transparent;
    text-decoration: underline;
}

.socials a .social-icon { width: 28px; height: 28px; display: block; }

.socials ul {
    display: flex;
    gap: 18px;  
    margin: 0;
    list-style: none;
    padding: 0;
}


.socials a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #ffffff;
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: transform 150ms ease, opacity 200ms ease;
}
.socials a:hover,
.socials a:focus-visible {
    transform: translateY(-1px);
    opacity: 0.8;
}
@media (max-width: 768px) {
    .work-with-me {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .work-content {
        order: 2;
        gap: 26px;
    }


    .socials ul {
        justify-content: center;
    }

    .microphone-fullwidth .work-with-me {
        position: static;
        inset: auto;
        padding: 0 20px 28px;
    }
    .microphone-fullwidth .work-content {
        margin: 0 auto !important;
        max-width: 100%;
    }
    .microphone-fullwidth .work-content h2 {
        font-size: 3.0rem;
        white-space: normal;
    }
    .microphone-fullwidth .contact-item a {
        font-size: calc(17px * 0.9);
    }
    .microphone-fullwidth .contact-item .contact-icon {
        width: 24px;
        height: 24px;
    }
    .microphone-fullwidth .contact-item span {
        font-size: 1.6rem;
        margin-right: 6px;
    }
    .microphone-fullwidth .site-footer {
        position: static;
        padding: 2px 20px;
        background: transparent;
    }
    .microphone-fullwidth .site-footer__note {
        transform: none;
    }
    .microphone-fullwidth .socials a { width: 48px; height: 48px; }
    .microphone-fullwidth .socials a .social-icon { width: 26px; height: 26px; }
}

/* Tablet layout: avoid squeezing the player into a narrow half-column. */
@media (min-width: 769px) and (max-width: 1024px) {
    .description {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "desc"
            "image"
            "headline"
            "info";
        row-gap: clamp(32px, 6vw, 64px);
    }

    .description__content {
        grid-area: desc;
        grid-column: 1;
        width: 100%;
        max-width: 680px;
        min-height: auto;
    }

    .description__image {
        grid-area: image;
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 720px;
        justify-self: center;
        justify-content: center;
        overflow: hidden;
    }

    .description__image img {
        width: auto;
        max-width: 100%;
        max-height: 680px;
    }

    .global-voice__headline,
    .global-voice__content {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .global-voice__headline .voice-demos {
        margin-top: var(--voice-player-gap);
    }
}

.microphone-fullwidth {
    padding-top: 0;
    position: relative;
    background: none;
    width: 100%;
}
.microphone-fullwidth picture,
.microphone-fullwidth picture img {
    display: block;
    width: 100%;
    height: auto;
}
.microphone-fullwidth::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: clamp(240px, 36vh, 460px);
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(to top,
            rgba(0,0,0,0.14) 0%,
            rgba(0,0,0,0.05) 38%,
            rgba(0,0,0,0.0) 100%),
        linear-gradient(to bottom,
            rgba(255,255,255,1) 0%,
            rgba(247,252,249,0.75) 32%,
            rgba(240,248,244,0.15) 68%,
            rgba(255,255,255,0) 100%);
}

.microphone-fullwidth picture img,
.microphone-fullwidth > img {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%);
}


.microphone-fullwidth .work-content {
    padding-top: 0;
}

.microphone-fullwidth > img {
    width: 100%;
    display: block;
}

.microphone-fullwidth .work-with-me {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: clamp(24px, 5vw, 64px) 50px;
    pointer-events: none;
    z-index: 2; 
}

.microphone-fullwidth .work-with-me .work-content {
    margin: 0;
    margin-left: 0;
    margin-bottom: calc(clamp(48px, 9vw, 140px) + 120px);
    max-width: min(640px, 72vw);
    pointer-events: auto;
    background: none;
}

.microphone-fullwidth .site-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 20px 22px;
    background: transparent;
    z-index: 3;
}

.microphone-fullwidth .site-footer__note {
    font-size: 0.9rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.75);
    transform: translate(220px, 15px);
}

.microphone-fullwidth::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 100%),
        linear-gradient(to bottom,
            rgba(255,255,255,0.68) 0%,
            rgba(255,255,255,0.45) 35%,
            rgba(255,255,255,0) 100%
        );
    -webkit-backdrop-filter: saturate(1.02) blur(12px);
    backdrop-filter: saturate(1.02) blur(12px);
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 0.32;
}

@media (min-width: 431px) and (max-width: 480px) {
    .banner-content h1 { font-size: clamp(4.8rem, 13.5vw, 6rem); }
    .banner-content p { font-size: clamp(1.25rem, 4vw, 1.55rem); }
    .trusted-by__title { letter-spacing: 0.65em; word-spacing: 0.5em; }
    .global-voice__headline > h2 { font-size: 1.8rem; }
}

@media (min-width: 481px) and (max-width: 600px) {
    .banner-content h1 { font-size: clamp(5.2rem, 12vw, 6.6rem); }
    .banner-content p { font-size: clamp(1.4rem, 3.5vw, 1.7rem); }
    .trusted-by__title { letter-spacing: 0.75em; word-spacing: 0.6em; }
    .description__content .description__name { font-size: 3.2rem; }
    .description__content h2 { font-size: 1.9rem; }
}

@media (min-width: 601px) and (max-width: 840px) {
    .banner { padding: clamp(32px, 6vw, 72px) 32px 0 32px; }
    .banner-content h1 { font-size: clamp(7rem, 9.5vw, 9.5rem); }
    .banner-content p { font-size: clamp(1.6rem, 2.4vw, 2rem); }
    .trusted-by__title { letter-spacing: 0.8em; word-spacing: 0.6em; }
    .description { padding: 0 32px; column-gap: 20px; }
    .description__content .description__name { font-size: clamp(4rem, 6vw, 5rem); }
    .description__content h2 { font-size: clamp(2rem, 3.5vw, 2.4rem); }
    .description__content p { font-size: clamp(1.1rem, 2.4vw, 1.3rem); }
    .global-voice__headline > h2 { font-size: clamp(2rem, 3.2vw, 2.5rem); }
    .work-content h2 { font-size: clamp(3rem, 4.5vw, 3.8rem); }
}

@media (min-width: 841px) and (max-width: 1280px) {
    .banner { padding: clamp(40px, 6vw, 96px) 40px 0 40px; }
    .banner-content h1 { font-size: clamp(8rem, 10vw, 10.5rem); }
    .banner-content p { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
    .description { padding: 0 40px; }
    .description__content .description__name { font-size: clamp(4.6rem, 5.2vw, 5.4rem); }
    .description__content h2 { font-size: clamp(2.2rem, 2.8vw, 2.6rem); }
    .global-voice__headline > h2 { font-size: clamp(2.4rem, 2.8vw, 2.9rem); }
    .work-content h2 { font-size: clamp(3.4rem, 3.8vw, 4.1rem); }
}

@media (min-width: 1281px) and (max-width: 1440px) {
    .banner-content h1 { font-size: clamp(10rem, 9vw, 12rem); }
    .banner-content p { font-size: clamp(1.9rem, 2.4vw, 2.2rem); }
    .description { padding: 0 48px; }
    .description__content .description__name { font-size: clamp(5.2rem, 4.8vw, 5.8rem); }
}

@media (min-width: 1441px) {
    body { max-width: 1800px; }
}

@media (max-width: 430px) {
    .banner-content { padding: 16px; }
    .banner-content h1 {
        font-size: clamp(4.4rem, 16.5vw, 5.6rem);
        line-height: 0.9;
    }
    .banner-content p {
        font-size: clamp(1.25rem, 4.8vw, 1.6rem);
        line-height: 1.2;
    }
    .banner-content .btn {
        min-height: 52px;
        padding: 0 1.4rem;
    }

    .trusted-by__title {
        font-size: 1.05rem;
        letter-spacing: 0.6em;
        word-spacing: 0.5em;
    }

    .description { padding: 0 16px; }
    .description__content .description__name { font-size: clamp(2.4rem, 10vw, 2.9rem); }
    .description__content h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.7rem);
        line-height: 1.15;
    }
    .description__content p {
        font-size: clamp(1rem, 4.2vw, 1.15rem);
        line-height: 1.45;
    }
    .description__image img { max-height: 320px; }

    .global-voice__headline > h2 {
        font-size: clamp(1.4rem, 6vw, 1.75rem);
        line-height: 1.25;
    }
    .global-voice__item h3 { font-size: clamp(1.1rem, 4.8vw, 1.3rem); }
    .global-voice__item p { font-size: clamp(1.05rem, 4.6vw, 1.25rem); }

    .work-content { gap: 20px; }
    .microphone-fullwidth .work-content h2 { font-size: clamp(2.3rem, 9vw, 2.8rem); }
    .microphone-fullwidth .contact-item a { font-size: 0.95rem; }
    .microphone-fullwidth .socials a { width: 44px; height: 44px; }
    .microphone-fullwidth .socials a .social-icon { width: 24px; height: 24px; }
    .microphone-fullwidth .site-footer__note { font-size: 0.8rem; }
}

@media (max-width: 360px) {
    .banner-content h1 { font-size: clamp(4rem, 17.5vw, 5rem); }
    .banner-content p { font-size: 1.15rem; }
    .banner-content .btn { min-height: 48px; font-size: 0.9rem; }

    .description__content .description__name { font-size: 2.2rem; }
    .description__content h2 { font-size: 1.25rem; }
    .description__image img { max-height: 280px; }

    .global-voice__headline > h2 { font-size: 1.3rem; }
    .work-content h2 { font-size: 2.1rem; }
    .microphone-fullwidth .contact-item a { font-size: 0.9rem; }
}

/* Keep contacts in normal flow when the photo is not tall enough for the overlay. */
@media (max-width: 1100px) {
    .microphone-fullwidth .work-with-me {
        position: static;
        inset: auto;
        padding: 32px clamp(20px, 5vw, 50px);
        pointer-events: auto;
    }

    .microphone-fullwidth .work-with-me .work-content {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    .microphone-fullwidth .site-footer {
        position: static;
        padding: 8px 20px 24px;
    }

    .microphone-fullwidth .site-footer__note {
        transform: none;
        color: rgba(75, 73, 73, 0.72);
    }
}

@media (max-width: 768px) {
    .microphone-fullwidth .work-with-me {
        padding: 24px 20px 28px;
    }

    .microphone-fullwidth .work-with-me .work-content {
        max-width: 100%;
    }

    .microphone-fullwidth .work-content h2 {
        white-space: normal;
    }

    .microphone-fullwidth .contact-item {
        justify-content: center;
        min-width: 0;
    }

    .microphone-fullwidth .contact-item a {
        overflow-wrap: anywhere;
    }
}

/* Final responsive flow: CSS owns layout; no runtime offsets are required. */
.description,
.description__content,
.description__image,
.global-voice__headline,
.global-voice__content,
.voice-demos,
.voice-demos .vd,
.vd-layout,
.vd-hero,
.vd-queue {
    min-width: 0;
}

.global-voice__headline .voice-demos {
    margin-top: var(--voice-player-gap, var(--cta-gap));
}

.global-voice__headline .voice-demos .vd {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.vd-art-stack {
    width: min(100%, 292px);
}

.vd-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.global-voice__content .premium-voice {
    margin: 0;
}

.global-voice__content .premium-panel {
    width: 100%;
    max-width: 100%;
    left: auto;
    transform: none;
    margin-top: clamp(24px, 4vw, 56px);
    padding-inline: clamp(16px, 3vw, 32px);
}

.global-voice__items {
    margin-top: var(--voice-player-gap, var(--cta-gap));
}

@media (max-width: 1280px) {
    .description {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "desc"
            "image"
            "headline"
            "info";
        row-gap: clamp(32px, 6vw, 72px);
    }

    .description__content {
        grid-area: desc;
        grid-column: 1;
        width: 100%;
        max-width: 680px;
        min-height: auto;
    }

    .description__image {
        grid-area: image;
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 760px;
        justify-self: center;
        justify-content: center;
        overflow: hidden;
    }

    .description__image img {
        width: auto;
        max-width: 100%;
        max-height: 720px;
    }

    .global-voice__headline,
    .global-voice__content {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .global-voice__headline .voice-demos {
        margin-top: clamp(36px, 6vw, 72px);
    }

    .global-voice__items {
        margin-top: clamp(36px, 6vw, 72px);
    }

    .global-voice__content .premium-trigger {
        max-width: 100%;
    }

    .microphone-fullwidth .work-with-me {
        position: static;
        inset: auto;
        padding: 32px clamp(20px, 5vw, 50px);
        pointer-events: auto;
    }

    .microphone-fullwidth .work-with-me .work-content {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    .microphone-fullwidth .site-footer {
        position: static;
        padding: 8px 20px 24px;
    }

    .microphone-fullwidth .site-footer__note {
        transform: none;
        color: rgba(75, 73, 73, 0.72);
    }
}

@media (max-width: 480px) {
    .voice-demos .vd {
        padding: 16px;
    }

    .vd-header,
    .vd-hero,
    .vd-queue {
        padding-inline: 14px;
    }

    .premium-trigger__text h2 {
        font-size: 0.9rem;
        line-height: 1.25;
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .vd-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}