body,
html {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important
}

#noise-canvas,
.navbar {
position: fixed;
top: 0;
left: 0
}

.back-content,
.card-3d,
.card-body,
.hero-wrapper,
.m-cover,
.main-title,
.main-title-wrapper,
.new-section,
.side-back,
.story-quote,
.t-header-box,
.tariff-card,
body {
position: relative
}

.nav-btn-3d,
.nav-logo,
.nav-text-btn,
.rev-name-box h3,
.reviews-headline,
body {
color: var(--blue-bright)
}

.main-title,
.vsl-headline {
-webkit-text-fill-color: transparent
}

.btn-outline,
.file-card-label,
.rev-name-box h3,
.reviews-headline,
.tg-user {
text-transform: uppercase
}

.back-content,
.btn-tariff,
.file-card-inner,
.folder-file-card,
.hero-wrapper,
.navbar,
.side {
box-sizing: border-box
}

.card-3d,
.faq-answer-modern,
.faq-item-modern,
.hero-card,
.m-cover,
.rev-img,
.reviews-section,
.side,
.story-section-new,
.tariff-card,
.video-box,
.video-box .plyr,
.zig-zag-visual {
overflow: hidden
}

@font-face {
font-family: Gramatika;
src: local("Gramatika"), local("Inter");
font-display: swap
}

:root {
--bg-cream: #f4f2ee;
--blue-deep: #00388d;
--blue-bright: #0045a6;
--accent: #fa2d1a;
--folder-front: linear-gradient(180deg, #5ca0f2 0%, #007aff 100%);
--folder-back: #2b5e96;
--white: #ffffff;
--black: #050505;
--light-blue: #e0e6ff;
--border: rgba(0, 69, 166, 0.15);
--radius: clamp(16px, 3vw, 32px);
--ease-smooth: cubic-bezier(0.23, 1, 0.32, 1)
}

html {
scroll-behavior: smooth
}

body {
font-family: Gramatika, Inter, sans-serif;
margin: 0;
padding: 0;
background-color: var(--bg-cream);
user-select: none;
-webkit-font-smoothing: antialiased
}

main {
display: block;
width: 100%
}

.brand-group {
display: inline-flex;
align-items: baseline;
gap: .15em;
line-height: 1
}

#tariffs,
.brand-main,
.section-title-center {
font-weight: 900
}

.brand-sub {
font-size: .5em;
opacity: .6;
font-weight: 800;
letter-spacing: -.02em
}

#noise-canvas {
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: .15;
mix-blend-mode: multiply
}

.navbar {
width: 100%;
padding: clamp(15px, 2vw, 20px) clamp(20px, 4vw, 40px);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
background: rgba(244, 242, 238, .85);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid rgba(0, 69, 166, .05);
animation: fadeInDown 1.4s var(--ease-smooth) forwards
}

.hero-card,
.nav-accent-btn {
background-color: var(--blue-bright)
}

.nav-logo {
font-weight: 900;
font-size: clamp(1.4em, 2vw, 1.8em);
text-decoration: none;
letter-spacing: -.05em
}

.nav-accent-btn,
.nav-text-btn {
font-weight: 700;
text-decoration: none
}

.nav-buttons {
display: flex;
gap: clamp(10px, 2vw, 20px);
align-items: center
}

.nav-text-btn {
font-size: clamp(.9rem, 1.5vw, 1rem);
opacity: .85;
transition: opacity .4s var(--ease-smooth)
}

.nav-text-btn:hover {
opacity: 1
}

.nav-accent-btn {
padding: clamp(10px, 1.5vw, 12px) clamp(20px, 3vw, 32px);
border-radius: 100px;
font-size: clamp(.85em, 1.5vw, .9em);
transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
color: #fff;
box-shadow: 0 4px 15px rgba(0, 69, 166, .2)
}

.core-translation,
.main-title {
font-family: Inter, sans-serif;
font-weight: 900
}

.card-shadow-container,
.hero-card {
border-radius: var(--radius);
position: relative
}

.nav-accent-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 69, 166, .35)
}

.hero-wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(80px, 10vh, 100px) clamp(15px, 2vw, 20px) 0;
z-index: 10
}

.hero-card,
.hero-content {
display: flex;
flex-direction: column;
width: 100%
}

.hero-card,
.row-line {
justify-content: center
}

.card-shadow-container {
width: 100%;
max-width: 1440px;
height: clamp(500px, 82vh, 900px);
box-shadow: 0 60px 120px -20px rgba(0, 20, 60, .4), 0 0 0 1px rgba(255, 255, 255, .1);
animation: 1s cubic-bezier(.16, 1, .3, 1) forwards scaleIn;
z-index: 1
}

.hero-card {
height: 100%;
align-items: center;
background-image: radial-gradient(circle at center, rgba(255, 255, 255, .1) 0, rgba(0, 0, 0, .2) 100%), linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 100% 100%, 40px 40px, 40px 40px;
box-shadow: inset 0 0 80px rgba(0, 0, 0, .3)
}

.hero-content {
z-index: 10;
text-align: center;
margin-top: -40px;
pointer-events: none;
align-items: center
}

@keyframes shimmer {
    0% {
background-position: -200% 0
    }
    100% {
background-position: 200% 0
    }
}

.main-title-wrapper {
display: inline-block;
font-size: clamp(4rem, 14vw, 15rem);
margin: 0;
padding: 0;
z-index: 10
}

.main-title {
font-size: 1em;
line-height: .85;
letter-spacing: -.06em;
margin: 0;
background: linear-gradient(110deg, #fff 45%, #e0e6ff 50%, #fff 55%);
background-size: 250% 100%;
-webkit-background-clip: text;
animation: 8s linear infinite shimmer;
filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .3));
z-index: 2
}

.core-translation {
position: absolute;
right: 0;
bottom: -.65em;
font-size: .35em;
color: rgba(255, 255, 255, .15);
line-height: 1;
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -.02em
}

.subtitle-block {
margin-top: clamp(60px, 8vw, 10px);
font-family: Caveat, cursive;
font-weight: 700;
font-size: clamp(2.5rem, 4vw, 4rem);
line-height: 1.1;
color: #fff;
transform: rotate(-3deg);
text-shadow: 0 4px 15px rgba(0, 0, 0, .2);
display: flex;
flex-direction: column;
align-items: center;
width: 100%
}

.row-line {
display: flex;
align-items: baseline;
gap: 15px;
width: 100%;
margin-left: 20px
}

.highlight-word-container {
min-width: clamp(180px, 20vw, 250px);
width: clamp(180px, 20vw, 250px);
text-align: left;
display: inline-block
}

.highlight-word {
color: var(--accent);
text-shadow: 0 0 15px rgba(250, 45, 26, .4);
display: inline-block;
transition: opacity .4s;
will-change: opacity
}

.sticker-img {
position: absolute;
cursor: grab;
z-index: 50;
-webkit-user-drag: none;
transition: filter .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35));
touch-action: none
}

.sticker-img:hover {
z-index: 2000 !important;
filter: drop-shadow(0 50px 80px rgba(0, 0, 0, .6))
}

.sticker-img:active,
.track-3d:active {
cursor: grabbing
}

.s-camera {
top: -5%;
left: -8%;
width: clamp(400px, 40vw, 600px);
transform: rotate(-12deg)
}

.s-camera:hover {
transform: rotate(-12deg) scale(1.05)
}

.s-pencil {
top: -12%;
right: 5%;
width: clamp(60px, 6vw, 80px);
transform: rotate(50deg)
}

.s-pencil:hover {
transform: rotate(50deg) scale(1.05)
}

.s-ssd {
bottom: 10%;
right: 12%;
width: clamp(90px, 8vw, 120px);
transform: rotate(20deg)
}

.s-ssd:hover {
transform: rotate(20deg) scale(1.05)
}

.s-clapper {
bottom: 8%;
left: 4%;
width: clamp(200px, 22vw, 320px);
transform: rotate(-15deg);
z-index: 60
}

.s-clapper:hover {
transform: rotate(-15deg) scale(1.05) !important;
filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .5))
}

.folder-bridge {
position: relative;
z-index: 100;
margin-top: -230px;
margin-bottom: 80px;
display: flex;
justify-content: center;
align-items: flex-end;
height: clamp(200px, 30vw, 320px);
perspective: 1200px;
pointer-events: none
}

.mac-folder-realistic {
pointer-events: auto;
position: relative;
width: 266px;
height: 212px;
cursor: pointer;
transition: transform .4s cubic-bezier(.16, 1, .3);
transform-style: preserve-3d
}

.mac-folder-realistic:hover {
transform: translateY(-10px) scale(1.02)
}

.folder-cards {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
pointer-events: none
}

.folder-file-card {
position: absolute;
width: 130px;
height: 170px;
left: 25%;
bottom: 25px;
border-radius: 8px;
padding: 10px;
opacity: 0;
transition: .5s cubic-bezier(.16, 1, .3, 1);
transform-origin: bottom center;
box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
pointer-events: auto;
cursor: pointer;
will-change: transform, opacity
}

.mac-folder-realistic::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 180%;
z-index: 10;
background: 0 0;
pointer-events: auto
}

.mac-folder-realistic:hover .folder-cards {
z-index: 20
}

.file-card-inner {
width: 100%;
height: 100%;
border-radius: 6px;
padding: 12px 10px;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, .3);
box-shadow: inset 0 2px 10px rgba(255, 255, 255, .1)
}

.file-card-stripe {
width: 80%;
height: 6px;
background: rgba(255, 255, 255, .4);
border-radius: 3px
}

.file-card-grid {
width: 100%;
height: 40px;
border-radius: 4px;
background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 5px, transparent 5px, transparent 10px)
}

.file-card-label {
color: #fff;
font-weight: 800;
font-size: 10px;
margin-top: auto;
letter-spacing: .5px
}

.mac-folder-realistic:hover .card-1 {
opacity: 1;
transform: translate(-70px, -40px) rotate(-12deg);
transition-delay: 0.1s
}

.mac-folder-realistic:hover .card-2 {
opacity: 1;
transform: translate(0, -80px) rotate(0);
transition-delay: 50ms
}

.mac-folder-realistic:hover .card-3 {
opacity: 1;
transform: translate(70px, -40px) rotate(12deg);
transition-delay: 0.15s
}

.folder-back-shape {
position: absolute;
width: 100%;
height: 100%;
background: var(--folder-back);
border-radius: 13.42px;
z-index: 1;
-webkit-mask: url("https://framerusercontent.com/images/u6NHrizsQWk4u5sqIM2DGhO2EI.svg") center/cover no-repeat;
mask: url("https://framerusercontent.com/images/u6NHrizsQWk4u5sqIM2DGhO2EI.svg") center/cover no-repeat;
filter: drop-shadow(0 -2px 0 rgb(73, 152, 204)) drop-shadow(0 20px 40px rgba(0, 40, 100, .3)) drop-shadow(0 0 1px rgba(0, 0, 0, .3))
}

.folder-front-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 78%;
background: var(--folder-front);
border-radius: 6px 6px 13.42px 13.42px;
z-index: 3;
transform-origin: bottom;
transition: transform .6s cubic-bezier(.16, 1, .3, 1);
box-shadow: inset 0 2px 5px rgba(255, 255, 255, .3), 0 -5px 15px rgba(0, 0, 0, .1);
border-top: 1px solid rgba(255, 255, 255, .2)
}

.mac-folder-realistic:hover .folder-front-shape {
transform: rotateX(-25deg) scaleY(.95)
}

.vsl-section {
padding: clamp(40px, 5vw, 60px) 20px clamp(60px, 8vw, 80px);
text-align: center;
position: relative;
z-index: 5
}

.vsl-headline {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.04em;
color: var(--blue-bright);
margin-bottom: 24px;
background: linear-gradient(135deg, #0045a6 0, #002a66 100%);
-webkit-background-clip: text
}

.vsl-subhead {
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-weight: 500;
color: #444;
line-height: 1.4;
margin-bottom: 60px;
max-width: 700px;
margin-left: auto;
margin-right: auto
}

.video-box {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: 0 0 !important;
border-radius: var(--radius);
box-shadow: 0 50px 100px -20px rgba(0, 56, 141, .3);
position: relative;
line-height: 0
}

.video-box .plyr {
border-radius: 32px;
width: 100%;
height: 100%;
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, .25);
border: none !important
}

.btn-outline {
display: inline-block;
text-decoration: none;
font-weight: 900;
font-size: clamp(1.2rem, 2vw, 1.8rem);
color: var(--blue-bright);
border: 3px solid var(--blue-bright);
padding: clamp(15px, 2vw, 20px) clamp(40px, 5vw, 60px);
border-radius: 100px;
transition: .5s var(--ease-smooth);
background: 0 0;
cursor: pointer;
font-family: inherit;
outline: 0;
line-height: 1;
appearance: none;
-webkit-appearance: none
}

.btn-outline:hover {
background: var(--blue-bright);
color: #fff;
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 69, 166, .2)
}

.btn-buy {
margin-top: 60px
}

:root {
--plyr-color-main: #fa2d1a;
--card-width: clamp(280px, 80vw, 400px);
--card-height: clamp(585px, 75vh, 780px);
--slider-gap: clamp(20px, 4vw, 50px);
--transition-speed: 0.9s
}

.story-section-new {
position: relative;
width: 100%;
height: 900px;
perspective: 2000px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-cream)
}

.track-3d {
display: flex;
gap: var(--slider-gap);
position: absolute;
left: 50%;
top: 50%;
transform: translate(calc(var(--card-width)/ -2), -50%);
transform-style: preserve-3d;
transition: transform var(--transition-speed) var(--ease-smooth);
will-change: transform;
cursor: grab;
touch-action: pan-y
}

.card-3d {
width: var(--card-width);
height: var(--card-height);
background: #fff;
border-radius: 40px;
flex-shrink: 0;
opacity: .5;
transform: scale(.85) rotateY(15deg);
filter: blur(4px) grayscale(80%);
transition: all var(--transition-speed) var(--ease-smooth);
box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
display: flex;
flex-direction: column;
will-change: transform, opacity;
pointer-events: none
}

.card-3d.active {
opacity: 1;
transform: scale(1.05) rotateY(0);
filter: blur(0) grayscale(0);
z-index: 50;
box-shadow: 0 40px 100px -20px rgba(0, 69, 166, .25);
pointer-events: auto
}

.card-img-container {
    width: 100%;
    height: 50%; 
    flex: 0 0 50%; 
    overflow: hidden;
    position: relative;
    pointer-events: none;
    /* ДОБАВЛЕНО: красивый цвет-заглушка, пока фото грузится */
    background-color: #e0e6ff; 
}

.card-img,
.rev-img img,
.zig-zag-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; 
    /* ДОБАВЛЕНО: браузер не будет ждать скачивания, чтобы отрисовать рамку */
    color: transparent; 
}

.black-bar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%); /* <--- Изменили на -50% */
    z-index: 10;
    background: var(--black);
    color: #fff;
    text-align: center;
    padding: 16px 0;
}

.black-bar h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
}

.card-body {
padding: 32px 30px;
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: left;
z-index: 2
}

#tariffs,
.back-content,
.btn-tariff,
.footer-legal,
.modules-header,
.reviews-footer,
.s-pill,
.s-script,
.section-subtitle-small,
.section-title-center,
.t-header-box {
text-align: center
}

.card-body::before {
content: '"';
position: absolute;
top: 10px;
left: 20px;
font-size: 6rem;
font-family: Gramatika, sans-serif;
color: rgba(0, 69, 166, .05);
z-index: -1;
pointer-events: none;
line-height: 1
}

.story-quote {
font-size: 1.15rem;
line-height: 1.5;
color: var(--black);
font-weight: 500;
margin-top: 10px;
z-index: 2;
pointer-events: none
}

.m-cover-text,
.reviews-headline {
text-align: center;
line-height: 1
}

.nav-btn-3d:hover,
.s-pill {
background: var(--blue-bright);
color: #fff
}

.story-quote strong {
color: var(--blue-bright);
font-weight: 800;
background: rgba(0, 69, 166, .06);
padding: 2px 6px;
border-radius: 4px
}

.slider-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    pointer-events: none;
    margin-top: 35px; /* <--- ДОБАВИЛИ ЭТО, чтобы отодвинуть статистику от черной плашки вниз */
}

.s-pill {
padding: 10px;
border-radius: 12px;
font-weight: 800
}

.s-script {
font-family: Caveat, cursive;
color: var(--accent);
font-size: 1.1rem
}

.s-logo {
width: 40px;
height: 40px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: auto auto 0;
font-size: .7rem;
font-weight: 700;
opacity: .85;
color: var(--black)
}

.nav-container-3d {
position: absolute;
width: calc(var(--card-width) + 220px);
display: flex;
justify-content: space-between;
z-index: 100;
pointer-events: none
}

.grid-reviews,
.reviews-headline {
margin: 0 auto;
z-index: 5;
position: relative;
max-width: 1200px
}

.nav-btn-3d {
pointer-events: auto;
width: 70px;
height: 70px;
border-radius: 50%;
border: none;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: .4s;
box-shadow: 0 10px 20px rgba(0, 0, 0, .1)
}

.nav-btn-3d:hover {
transform: scale(1.1)
}

.reviews-section {
padding: 120px 0;
border-top: 1px solid var(--border);
background-color: var(--bg-cream);
background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px), url("https://www.transparenttextures.com/patterns/stardust.png");
background-size: 50px 50px, auto;
position: relative;
transition: background-color .8s var(--ease-smooth)
}

.reviews-section::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .12;
pointer-events: none;
z-index: 1
}

.reviews-section.reviews-active {
background-color: #0047ff !important
}

.reviews-headline {
font-size: clamp(2rem, 3.5vw, 3.5rem);
padding: 0 clamp(20px, 4vw, 50px) clamp(40px, 6vw, 80px);
font-weight: 900;
letter-spacing: -.04em;
transition: color .8s var(--ease-smooth)
}

.reviews-section.reviews-active .reviews-headline {
color: #fff !important
}

.grid-reviews {
display: grid;
grid-template-columns: repeat(3, 260px);
justify-content: center;
gap: 80px 60px;
padding: 0 20px
}

.modules-grid,
.tariffs-grid {
grid-template-columns: repeat(3, 1fr)
}

.back-content,
.side-front {
display: flex;
flex-direction: column
}

.review-item {
width: 260px;
height: 400px;
perspective: 2000px;
position: relative;
transition: transform .6s var(--ease-smooth);
will-change: transform;
transform: translateY(var(--target-y, 0)) rotate(var(--target-rot, 0deg))
}

.card-inner,
.m-cover::before,
.side,
.tariff-badge {
position: absolute
}

.back-content,
.card-inner,
.side {
width: 100%;
height: 100%
}

.review-item:first-child {
--target-rot: -4deg
}

.review-item:nth-child(2) {
--target-rot: 3deg;
--target-y: -15px
}

.review-item:nth-child(3) {
--target-rot: -2.5deg;
--target-y: 10px
}

.review-item:nth-child(4) {
--target-rot: 4deg
}

.review-item:nth-child(5) {
--target-rot: -3deg;
--target-y: -5px
}

.review-item:nth-child(6) {
--target-rot: 2deg
}

.review-item:hover {
z-index: 100
}

.card-inner {
transition: transform 1.2s var(--ease-smooth);
transform-style: preserve-3d;
will-change: transform
}

.review-item:hover .card-inner,
.side-back {
transform: rotateY(180deg)
}

.side {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
}

.side-front {
background: #fff;
padding: 10px
}

.rev-img {
flex-grow: 1;
border-radius: 12px 12px 4px 4px
}

.rev-info {
padding: 15px 5px;
display: flex;
justify-content: space-between;
align-items: center
}

.rev-name-box h3 {
font-weight: 900;
font-size: 1.1rem;
margin: 0
}

.rev-name-box p {
font-size: .65rem;
font-weight: 800;
opacity: .5;
color: #000;
margin: 0
}

.rev-income {
font-weight: 900;
color: var(--accent);
font-size: 1rem
}

.side-back {
background-color: #000;
display: flex;
align-items: center;
justify-content: center
}

.side-back::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background-image: var(--rev-bg);
background-size: cover;
background-position: center;
filter: blur(12px) brightness(.4);
transform: scaleX(-1);
z-index: 1
}

.back-content {
z-index: 2;
padding: 30px;
justify-content: center;
align-items: center
}

.side-back h4 {
font-family: Caveat;
font-size: 2.2rem;
color: #fff;
margin: 0 0 10px;
transform: rotate(-2deg)
}

.side-back p,
.tg-user {
color: var(--bg-cream)
}

.side-back p {
font-size: .9rem;
line-height: 1.4;
margin: 0;
font-weight: 500
}

.tg-user {
margin-top: 20px;
font-weight: 900;
font-size: .7rem;
opacity: .85
}

.reviews-footer {
padding: 80px 0
}

.reviews-footer .btn-outline {
color: var(--blue-bright);
border-color: var(--blue-bright);
box-shadow: 0 10px 30px rgba(0, 0, 0, .2)
}

.reviews-section.reviews-active .reviews-footer .btn-outline {
color: var(--bg-cream);
border-color: var(--bg-cream)
}

.modules-grid,
.modules-section {
border-top: 1px solid var(--border)
}

.bonus-card-wrap,
.module-card:nth-child(3n+1) {
border-left: 1px solid var(--border)
}

.bonus-card-wrap,
.module-card {
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border)
}

.reviews-footer .btn-outline:hover {
background: var(--bg-cream);
color: var(--blue-bright);
box-shadow: 0 0 50px rgba(255, 255, 255, .4);
transform: translateY(-5px) scale(1.05)
}

.reveal,
.stagger-item {
opacity: 0;
transform: translateY(calc(var(--target-y, 0) + 50px)) scale(calc(var(--target-scale, 1) - .03)) rotate(var(--target-rot, 0deg));
filter: blur(8px);
transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth), filter 1s var(--ease-smooth);
will-change: transform, opacity, filter;
pointer-events: none
}

.reveal.reveal-active,
.stagger-item.reveal-active {
opacity: 1;
transform: translateY(var(--target-y, 0)) scale(var(--target-scale, 1)) rotate(var(--target-rot, 0deg));
filter: blur(0px);
pointer-events: auto
}

.blur-word {
display: inline-block;
filter: blur(12px);
opacity: 0;
transform: translateY(-15px);
transition: all 1s var(--ease-smooth)
}

.blur-word.visible {
filter: blur(0px);
opacity: 1;
transform: translateY(0)
}

.modules-section {
background: var(--bg-cream);
padding-bottom: 100px
}

.modules-header {
padding: clamp(60px, 8vw, 100px) 20px clamp(40px, 5vw, 60px);
max-width: 1200px;
margin: 0 auto
}

.modules-header h2 {
font-size: clamp(2.2rem, 3.5vw, 4rem);
font-weight: 900;
color: var(--blue-bright);
margin: 0;
letter-spacing: -.04em
}

.t-list li,
.t-list-icons li {
font-weight: 600;
font-size: .95rem
}

.modules-grid {
display: grid;
max-width: 100%;
margin: 0 auto
}

.module-card {
background: var(--bg-cream);
display: flex;
flex-direction: column
}

.m-cover {
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background-color: #050505
}

.m-cover::before {
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("https://www.transparenttextures.com/patterns/stardust.png");
opacity: .4;
pointer-events: none;
mix-blend-mode: overlay
}

.m-cover-text {
font-family: Gramatika, Inter, sans-serif;
font-weight: 900;
font-style: italic;
font-size: 2.2rem;
color: #fff;
text-transform: lowercase;
z-index: 2;
text-shadow: 0 10px 30px rgba(0, 0, 0, .5)
}

.m-info {
padding: 40px 30px;
flex-grow: 1;
background: 0 0
}

.m-duration {
color: var(--accent);
font-weight: 700;
font-size: .95rem;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px
}

.m-title,
.t-list li,
.t-list-icons li {
color: var(--black)
}

.m-duration svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2
}

.m-title {
font-size: 1.5rem;
font-weight: 800;
margin: 0 0 15px;
letter-spacing: -.02em
}

.m-desc {
font-size: .95rem;
line-height: 1.6;
color: #444;
margin: 0;
font-weight: 500
}

.c1 {
background: radial-gradient(circle at center, #0045a6 0, #001a40 100%)
}

.c2 {
background: radial-gradient(circle at center, #fa2d1a 0, #300000 100%)
}

.c3 {
background: radial-gradient(circle at center, #ff5e00 0, #4a1a00 100%)
}

.c4 {
background: radial-gradient(circle at center, #2b5e96 0, #050505 100%)
}

.c5 {
background: radial-gradient(circle at center, #fa2d1a 0, #111 100%)
}

.c6 {
background: radial-gradient(circle at center, #007aff 0, #001a40 100%)
}

.bonus-grid {
border-top: none
}

.bonus-card-wrap {
grid-column: 2;
background: var(--bg-cream);
display: flex;
flex-direction: column
}

#tariffs {
margin-top: 40px;
padding-bottom: 100px;
font-size: 2rem
}

.new-section {
padding: clamp(60px, 8vw, 100px) 20px;
max-width: 1200px;
margin: 0 auto
}

.section-title-center {
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--blue-bright);
margin-bottom: 20px;
letter-spacing: -.04em;
line-height: 1
}

.section-subtitle-small,
.t-header-title {
font-size: .9rem;
font-weight: 800;
text-transform: uppercase
}

.section-subtitle-small {
letter-spacing: 2px;
color: var(--accent);
margin-bottom: 10px
}

.tariffs-grid {
display: grid;
gap: 20px;
margin-top: 60px;
align-items: stretch
}

.tariff-card {
--target-scale: 1;
--target-y: 0px;
transform: scale(var(--target-scale)) translateY(var(--target-y));
background: #fff;
border-radius: var(--radius);
padding: 35px 30px;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth)
}

.tariff-card.mentor,
.tariff-card.popular {
color: #fff;
border: 1px solid rgba(255, 255, 255, .1)
}

.tariff-card:hover {
--target-y: -10px;
box-shadow: 0 30px 60px rgba(0, 69, 166, .15)
}

.tariff-card.popular {
background: var(--blue-deep);
--target-scale: 1.03;
z-index: 2;
box-shadow: 0 40px 80px rgba(0, 0, 0, .3)
}

.tariff-card.popular:hover {
--target-scale: 1.06
}

.tariff-card.mentor {
background: var(--blue-bright)
}

.t-header-box {
background: rgba(0, 69, 166, .05);
border-radius: 24px;
padding: 20px 15px;
margin-bottom: 25px
}

.popular .t-header-box {
background: rgba(255, 255, 255, .1)
}

.mentor .t-header-box {
background: rgba(255, 255, 255, .15)
}

.t-header-title {
letter-spacing: 1px;
margin-bottom: 5px;
opacity: .85;
color: #333
}

.mentor .t-header-title,
.popular .t-header-title {
color: rgba(255, 255, 255, .85)
}

.t-header-name {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 900;
margin: 0;
line-height: 1;
color: var(--blue-bright);
display: flex;
justify-content: center
}

.mentor .t-header-name,
.mentor .t-section-title,
.popular .t-header-name,
.popular .t-section-title {
color: #fff
}

.tariff-badge {
top: -15px;
right: -10px;
background: var(--accent);
color: #fff;
font-family: Caveat, cursive;
font-size: 1.2rem;
padding: 6px 16px;
border-radius: 100px;
transform: rotate(-3deg);
box-shadow: 0 5px 15px rgba(250, 45, 26, .4);
z-index: 10;
white-space: nowrap
}

.btn-tariff,
.icon-circle {
background: var(--blue-bright);
display: flex
}

.t-section {
margin-bottom: 20px
}

.t-section-title {
font-size: 1.3rem;
font-weight: 900;
color: var(--blue-bright);
margin: 0 0 15px;
letter-spacing: -.02em
}

.t-list,
.t-list-icons {
list-style: none;
padding: 0;
margin: 0;
text-align: left
}

.t-list li {
padding: 6px 0
}

.mentor .t-list li,
.mentor .t-list-icons li,
.popular .t-list li,
.popular .t-list-icons li {
color: rgba(255, 255, 255, .9)
}

.t-list-icons li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0
}

.footer-links a:hover,
.zz-desc strong {
color: var(--accent)
}

.icon-circle {
width: 22px;
height: 22px;
border-radius: 50%;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.icon-circle svg {
width: 11px;
height: 11px;
fill: #fff
}

.mentor .icon-circle,
.popular .icon-circle {
background: #fff
}

.popular .icon-circle svg {
fill: var(--blue-deep)
}

.mentor .icon-circle svg {
fill: var(--blue-bright)
}

.crossed {
text-decoration: line-through;
opacity: .5
}

.crossed .icon-circle {
background: rgba(0, 69, 166, .25) !important
}

.mentor .crossed .icon-circle,
.popular .crossed .icon-circle {
background: rgba(255, 255, 255, .3) !important
}

.crossed .icon-circle svg {
fill: #fff !important
}

.t-divider {
border: none;
border-top: 1px solid rgba(0, 69, 166, .15);
margin: 25px 0
}

.mentor .t-divider,
.popular .t-divider {
border-top: 1px solid rgba(255, 255, 255, .15)
}

.btn-tariff {
margin-top: auto;
width: 100%;
padding: 18px;
border-radius: 100px;
border: none;
color: #fff;
font-weight: 800;
font-size: 1.1rem;
cursor: pointer;
transition: .3s;
text-decoration: none;
align-items: center;
justify-content: center;
gap: 10px
}

.btn-tariff:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 69, 166, .2)
}

.popular .btn-tariff {
background: #fff;
color: var(--blue-deep)
}

.mentor .btn-tariff:hover,
.popular .btn-tariff:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, .2)
}

.mentor .btn-tariff {
background: #fff;
color: var(--blue-bright)
}

.btn-arrow {
font-weight: 900;
font-size: 1.3rem;
margin-top: -2px
}

.zig-zag-wrapper {
display: flex;
flex-direction: column;
gap: clamp(60px, 8vw, 120px);
margin-top: clamp(40px, 6vw, 80px)
}

.zig-zag-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(40px, 6vw, 80px)
}

.zig-zag-row.reverse {
flex-direction: row-reverse
}

.zig-zag-content {
flex: 1;
max-width: 480px
}

.zig-zag-visual {
  flex-shrink: 0;
  width: 480px;         /* Делаем блок шире */
  height: auto;
  aspect-ratio: 16 / 9; /* Строгая пропорция 16:9 */
  background-color: var(--white);
  border-radius: 24px;  /* Чуть аккуратнее для такого формата */
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 69, 166, .1);
  transition: transform .6s var(--ease-smooth);
  overflow: hidden;     /* Чтобы фото не вылезало за углы */
}

.zig-zag-visual:hover {
transform: scale(1.02);
box-shadow: 0 40px 80px rgba(0, 69, 166, .2)
}

.visual-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e0e6ff 0, #fff 100%);
display: flex;
align-items: center;
justify-content: center
}

.zz-title {
font-family: Gramatika, Inter, sans-serif;
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 900;
color: var(--blue-bright);
line-height: 1;
margin-bottom: 24px;
letter-spacing: -.04em
}

.zz-desc {
font-size: 1.15rem;
line-height: 1.6;
color: #444;
font-weight: 500
}

.zz-desc strong {
font-weight: 700
}

.faq-grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 1000px;
margin: 60px auto 0
}

.faq-item-modern {
background: var(--white);
border: 1px solid var(--border);
border-radius: 20px;
transition: .3s
}

.faq-item-modern:hover {
border-color: var(--blue-bright);
box-shadow: 0 10px 30px rgba(0, 69, 166, .08)
}

.faq-item-modern.active {
border-color: var(--blue-bright);
background: #fafafc
}

.faq-question-modern {
padding: 24px 30px;
font-weight: 700;
font-size: 1.1rem;
color: var(--blue-deep);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center
}

.faq-icon-modern {
width: 24px;
height: 24px;
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
transition: transform .3s var(--ease-smooth)
}

.faq-item-modern.active .faq-icon-modern {
transform: rotate(45deg);
stroke: var(--blue-bright)
}

.faq-answer-modern {
max-height: 0;
transition: .3s;
padding: 0 30px
}

.faq-answer-modern p {
padding-bottom: 24px;
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: #444
}

.site-footer {
background: var(--blue-deep);
color: rgba(255, 255, 255, .6);
padding: 80px 20px 40px;
margin-top: 100px;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius)
}

.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px
}

.footer-col h4 {
color: #fff;
font-weight: 900;
font-size: clamp(1.1rem, 1.5vw, 1.2rem);
margin-top: 0;
margin-bottom: 20px
}

.footer-links a {
display: block;
color: rgba(255, 255, 255, .85);
text-decoration: none;
margin-bottom: 10px;
font-size: .95rem;
transition: color .3s
}

.footer-legal {
font-size: .85rem;
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, .1)
}

.hero-btn-overlap {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
z-index: 1000;
text-decoration: none;
font-weight: 900;
color: #fff;
font-size: clamp(1.2rem, 2vw, 1.8rem);
padding: clamp(15px, 2vw, 20px) clamp(40px, 5vw, 60px);
border-radius: 100px;
text-transform: uppercase;
white-space: nowrap;
transition: .3s;
background: rgba(0, 0, 0, .25);
border: 1px solid rgba(255, 255, 255, .3);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
text-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

.hero-btn-overlap:hover {
background: var(--blue-bright);
border-color: var(--blue-bright);
transform: translate(-50%, calc(50% - 4px));
box-shadow: 0 15px 30px rgba(0, 69, 166, .4)
}

@media (max-width:1300px) {
.s-camera {
width: 450px;
left: -5%;
top: 0
    }
.s-camera:hover {
transform: rotate(-12deg) scale(1.05)
    }
.s-ssd {
right: 5%;
bottom: 5%
    }
}

@media (max-width:1200px) {
.s-camera {
width: 350px;
left: -20px;
top: 20px;
transform: rotate(-12deg) scale(.8)
    }
.s-camera:hover {
transform: rotate(-12deg) scale(.85)
    }
.s-pencil {
width: 60px;
right: 20px;
transform: rotate(50deg) scale(.8)
    }
.s-pencil:hover {
transform: rotate(50deg) scale(.85)
    }
.s-ssd {
width: 90px;
right: 20px;
bottom: 20px;
transform: rotate(20deg) scale(.8)
    }
.s-ssd:hover {
transform: rotate(20deg) scale(.85)
    }
.s-clapper {
width: 180px;
left: 20px;
bottom: 60px;
transform: rotate(-15deg) scale(.9)
    }
}

@media (max-width:1024px) {
.grid-reviews {
grid-template-columns: repeat(2, 260px)
    }
.modules-header h2 {
font-size: 4vw
    }
.modules-grid {
grid-template-columns: repeat(2, 1fr)
    }
.module-card:nth-child(3n+1) {
border-left: none
    }
.bonus-card-wrap,
.module-card:nth-child(odd) {
border-left: 1px solid var(--border)
    }
.bonus-card-wrap {
grid-column: 1/span 2;
width: 50%;
margin: 0 auto;
border-right: 1px solid var(--border)
    }
.tariffs-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin-left: auto;
margin-right: auto
    }
.tariff-card.popular {
--target-scale: 1
    }
.section-title-center {
font-size: 2.5rem
    }
.zig-zag-wrapper {
gap: 80px
    }
.zig-zag-row {
flex-direction: column !important;
gap: 30px;
text-align: left
    }
.zig-zag-content {
max-width: 100%
    }
.zig-zag-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Тоже 16:9 для телефонов */
}.zz-title {
font-size: 2rem
    }
.faq-grid-2col {
grid-template-columns: 1fr;
max-width: 600px
    }
}

@media (max-width:768px) {
.hero-wrapper,
.navbar,
.row-line {
width: 100% !important
    }
.folder-bridge,
.hero-wrapper,
.navbar {
max-width: 100% !important
    }
.bonus-card-wrap,
.module-card:nth-child(odd) {
border-left: none
    }
.navbar {
left: 0 !important;
top: 0 !important;
padding: 15px 20px !important;
background: rgba(244, 242, 238, .85) !important
    }
.nav-buttons {
gap: 0 !important;
margin: 0 !important;
padding: 0 !important
    }
.nav-text-btn {
display: none !important
    }
.nav-accent-btn {
display: inline-block !important;
padding: 10px 20px !important;
font-size: .9rem !important;
margin: 0 !important;
white-space: nowrap !important
    }
.hero-wrapper {
height: auto !important;
padding: 80px 15px 0 !important
    }
.card-shadow-container {
height: 872px !important;
min-height: 872px !important;
max-height: 872px !important;
width: 100% !important
    }
.hero-content {
margin: 0 !important;
z-index: 100 !important;
padding-bottom: 40px !important
    }
.s-camera,
.s-pencil {
z-index: 10 !important
    }
.main-title-wrapper {
font-size: clamp(4.5rem, 28vw, 8rem) !important;}
.main-title {
font-size: 1em !important;
line-height: .8 !important;
animation: none !important
    }
.core-translation {
right: 0% !important; /* Сдвигаем на 50% */
bottom: -.65em !important; /* Чуть опустили, чтобы не сливалось */
    }
.subtitle-block {
font-size: clamp(2rem, 8vw, 3rem) !important;
margin-top: clamp(45px, 12vw, 60px) !important
    }
.row-line {
display: flex !important;
justify-content: center !important;
align-items: baseline !important;
gap: 12px !important;
margin-left: 0 !important;
padding-right: 0 !important
    }
.highlight-word-container {
width: 180px !important;
min-width: 180px !important;
text-align: left !important;
display: inline-block !important;
flex-shrink: 0 !important
    }
.s-camera {
width: clamp(160px, 40vw, 220px) !important;
top: 18% !important; /* Спускаем ближе к заголовку */
left: -2% !important;
transform: rotate(-15deg) !important;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)) !important;
    }
.s-pencil {
width: clamp(70px, 15vw, 90px) !important; /* Жестко ограничиваем размер карандаша */
height: auto !important;
top: 15% !important;
right: 5% !important;
transform: rotate(35deg) !important;
filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .3)) !important;
    }
.s-clapper {
width: clamp(140px, 35vw, 190px) !important;
bottom: 22% !important; /* Поднимаем выше со дна */
left: 0% !important;
transform: rotate(-12deg) !important;
filter: drop-shadow(0 25px 50px rgba(0, 0, 0, .45)) !important;
z-index: 120 !important;
    }
.s-ssd {
width: clamp(80px, 20vw, 110px) !important;
bottom: 26% !important;
right: 8% !important;
transform: rotate(20deg) !important;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)) !important;
z-index: 115 !important;
    }
.s-camera {
width: clamp(220px, 55vw, 300px) !important;
top: 40px !important;
left: -20px !important;
transform: rotate(-12deg) !important;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)) !important
    }
.s-pencil {
width: clamp(50px, 12vw, 70px) !important;
height: auto !important;
top: -50px !important;
right: 10px !important;
transform: rotate(45deg) !important;
filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .3)) !important
    }
.s-clapper {
width: clamp(160px, 45vw, 230px) !important;
bottom: 160px !important; 
left: -10px !important;
transform: rotate(-15deg) !important;
filter: drop-shadow(0 25px 50px rgba(0, 0, 0, .45)) !important;
z-index: 120 !important
    }
.s-ssd {
width: clamp(100px, 25vw, 130px) !important;
bottom: 120px !important;
right: 5px !important;
transform: rotate(15deg) !important;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)) !important;
z-index: 115 !important
    }
.folder-bridge {
margin-top: -120px !important;
margin-bottom: 60px !important;
transform: none !important;
position: relative;
z-index: 105 !important
    }
.mac-folder-realistic {
width: 238px !important;
height: 190px !important;
margin: 0 auto !important
    }
.folder-file-card {
width: 110px !important;
height: 135px !important;
bottom: 10px !important;
left: 28% !important
    }
.mac-folder-realistic.is-open .folder-cards {
z-index: 20 !important
    }
.mac-folder-realistic.is-open .card-1 {
opacity: 1 !important;
transform: translate(-70px, -40px) rotate(-12deg) !important;
transition-delay: 0.1s !important
    }
.mac-folder-realistic.is-open .card-2 {
opacity: 1 !important;
transform: translate(0, -80px) rotate(0) !important;
transition-delay: 50ms !important
    }
.mac-folder-realistic.is-open .card-3 {
opacity: 1 !important;
transform: translate(70px, -40px) rotate(12deg) !important;
transition-delay: 0.15s !important
    }
.mac-folder-realistic.is-open .folder-front-shape {
transform: rotateX(-25deg) scaleY(.95) !important
    }
.vsl-section {
padding: 40px 15px 40px !important;
overflow-x: hidden !important
    }
.vsl-headline {
font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
margin-bottom: 15px !important;
word-wrap: break-word !important;
hyphens: auto !important
    }
.vsl-subhead {
font-size: 1.1rem !important;
margin-bottom: 40px !important
    }
.btn-outline {
font-size: 1.2rem !important;
padding: 15px 40px !important
    }
.reviews-headline {
font-size: clamp(1.5rem, 6vw, 2rem) !important;
padding: 0 15px 40px !important
    }
.modules-header h2 {
font-size: 2.5rem !important
    }
.modules-grid {
grid-template-columns: 1fr
    }
.bonus-card-wrap {
grid-column: 1;
width: 100%;
border-right: none
    }
.grid-reviews {
grid-template-columns: 280px;
gap: 40px
    }
.review-item {
--target-rot: 0deg !important;
--target-y: 0px !important;
width: 280px
    }
.faq-question-modern {
padding: 20px
    }
.footer-content {
flex-direction: column
    }
.story-section-new {
width: 100% !important;
max-width: 100vw !important;
overflow: hidden !important
    }
.nav-container-3d {
width: 100% !important;
left: 0 !important;
padding: 0 15px !important;
box-sizing: border-box !important
    }
.nav-btn-3d {
width: 45px !important;
height: 45px !important;
background: rgba(255, 255, 255, .9) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, .2) !important
    }
.reveal,
.stagger-item {
filter: none !important
    }
.hero-btn-overlap {
font-size: 1rem !important;
padding: 15px 30px !important;
border: none !important
    }

.reviews-section { padding: 40px 0 !important; }
.reviews-footer { padding: 40px 0 !important; }
.modules-section { padding-bottom: 40px !important; }
.modules-header { padding: 40px 20px !important; }
.new-section { padding: 40px 15px !important; }
#tariffs { margin-top: 40px !important; padding-bottom: 40px !important; }
.zig-zag-wrapper { margin-top: 40px !important; gap: 40px !important; }
.faq-grid-2col { margin-top: 40px !important; }
.site-footer { margin-top: 40px !important; padding: 40px 20px !important; }

}

@media (max-width:400px) {
.navbar {
padding: 15px !important
    }
.nav-accent-btn {
padding: 8px 16px !important;
font-size: .85rem !important
    }
.main-title-wrapper {
font-size: clamp(3.5rem, 26vw, 4.5rem) !important /* Было 2rem, стало 3.5rem */ }
.main-title {
font-size: 1em !important
    }
.highlight-word-container {
width: 150px !important;
min-width: 150px !important
    }
.row-line {
gap: 8px !important
    }
.review-item:hover .card-inner {
transform: none !important
    }
.review-item.flipped .card-inner {
transform: rotateY(180deg) !important
    }
}

.video-section-large {
position: relative;
max-width: 1350px !important;
margin: 0 auto;
padding: 40px 20px 120px;
z-index: 5
}

.video-section-large::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
width: 90%;
height: 90%;
background: radial-gradient(circle at center, rgba(0, 69, 166, .08) 0, transparent 60%);
filter: blur(60px);
z-index: -1;
pointer-events: none
}

.video-section-title {
text-align: center;
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 900;
color: var(--blue-bright);
margin-bottom: 10px;
letter-spacing: -.04em;
line-height: 1;
position: relative
}

.video-section-subtitle {
text-align: center;
font-size: clamp(1.2rem, 2vw, 1.8rem);
font-weight: 800;
color: var(--accent);
margin-bottom: 60px;
line-height: 1.3;
position: relative
}

.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
position: relative
}

.video-item {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
position: relative;
z-index: 2;
transition: transform .6s cubic-bezier(.16, 1, .3, 1)
}

.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #050505;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px -15px rgba(0, 20, 60, .25), 0 0 0 1px rgba(0, 69, 166, .1);
transition: .6s cubic-bezier(.16, 1, .3, 1)
}

.video-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 2px 4px rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(255, 255, 255, .05);
border-radius: 20px;
pointer-events: none;
z-index: 10
}

.video-item:hover {
transform: translateY(-10px) scale(1.02);
z-index: 10
}

.video-item:hover .video-wrapper {
box-shadow: 0 0 40px rgba(0, 69, 166, .4), 0 30px 60px -10px rgba(0, 69, 166, .5), 0 0 0 3px var(--blue-bright)
}

.video-item:hover .video-title {
color: var(--accent);
transition: color .4s var(--ease-smooth)
}

.video-title {
color: var(--blue-bright);
transition: color .4s var(--ease-smooth);
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
font-weight: 900;
color: var(--blue-bright);
margin: 0;
text-align: center;
letter-spacing: -.02em;
line-height: 1.2
}

.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.01)
}

.video-wrapper video:focus {
outline: 0
}

@media (max-width:1024px) {
.video-grid {
grid-template-columns: repeat(2, 1fr)
    }
.video-item:nth-child(3) {
grid-column: 1/span 2;
max-width: 70%;
margin: 0 auto
    }
}

@media (max-width:768px) {
.video-section-large {
padding-bottom: 40px
    }
.video-grid {
grid-template-columns: 1fr;
gap: 50px
    }
.video-item:nth-child(3) {
grid-column: 1;
max-width: 100%
    }
.video-title {
font-size: 1.5rem
    }
.video-wrapper,
.video-wrapper::after {
border-radius: 16px
    }
}

section.reviews-section {
background: var(--bg-cream) !important;
opacity: 1 !important;
visibility: visible !important
}