:root { --acid: #ff693d; --ink: #0d0908; --panel: #17100e; --soft: #b8a9a2; --line: rgba(255,239,230,.15); --line-acid: rgba(255,105,61,.42); }
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--ink); color: #f5f5ef; font-family: Manrope, Arial, sans-serif; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: var(--acid); color: var(--ink); font-weight: 800; transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100%, 1480px); margin: auto; padding: 0 clamp(16px, 2.25vw, 32px); }
.mono, .eyebrow, .nav, .package span, .terminal { font-family: "Space Grotesk", monospace; }
.site-head { position: sticky; z-index: 30; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(16px, 2.25vw, 32px); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,8,8,.82); backdrop-filter: blur(18px); }
.brand-lockup { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.brand-mark { display: block; width: 126px; height: 42px; background: var(--acid); -webkit-mask: url('./assets/onda-logo-cutout.png') center / contain no-repeat; mask: url('./assets/onda-logo-cutout.png') center / contain no-repeat; }
.brand-bee { width: 39px; height: 32px; object-fit: contain; }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 22px); color: #c7c8bf; font-size: .7rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.nav a { position: relative; padding: 8px 0; transition: color .2s; }
.nav a:not(.nav-cta):after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; transform: scaleX(0); transform-origin: left; background: var(--acid); content: ""; transition: transform .22s ease; }
.nav a:hover, .nav a.active { color: var(--acid); }
.nav a:hover:after, .nav a.active:after { transform: scaleX(1); }
.nav .nav-cta { padding: 9px 13px; border: 1px solid var(--acid); border-radius: 99px; color: var(--acid); transition: color .2s, background .2s, transform .2s; }
.nav .nav-cta:hover { transform: translateY(-1px); background: var(--acid); color: var(--ink); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.menu-toggle i, .menu-toggle:before, .menu-toggle:after { display: block; width: 16px; height: 1px; margin: 4px auto; background: currentColor; content: ""; transition: transform .2s, opacity .2s; }
.menu-toggle i { margin-top: 0; }
.site-head.menu-open .menu-toggle:before { transform: translateY(5px) rotate(45deg); }.site-head.menu-open .menu-toggle i { opacity: 0; }.site-head.menu-open .menu-toggle:after { transform: translateY(-5px) rotate(-45deg); }
.eyebrow { margin: 0 0 20px; color: var(--acid); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.page-hero { position: relative; display: flex; min-height: clamp(540px, 68svh, 760px); align-items: flex-end; overflow: hidden; padding: 104px 0 62px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 75% 32%, rgba(200,255,0,.14), transparent 21%), linear-gradient(125deg, #080808 0%, #080808 55%, #11150c 100%); }
.page-hero:before { position: absolute; inset: 0; background-image: linear-gradient(rgba(200,255,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(200,255,0,.05) 1px, transparent 1px); background-size: 64px 64px; content: ""; mask-image: linear-gradient(90deg, transparent 30%, #000 90%); }
.page-hero:after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.96) 0%, rgba(8,8,8,.58) 42%, rgba(8,8,8,.12) 74%, rgba(8,8,8,.55)); content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; max-width: 780px; }
.hero-copy h1, .section-title { max-width: 1050px; margin: 0; font: 600 clamp(3.65rem, 8.4vw, 8.8rem)/.82 "Space Grotesk", sans-serif; letter-spacing: -.105em; text-transform: uppercase; }
.hero-copy h1 em, .section-title em { color: var(--acid); font-style: normal; }
.hero-copy>p:last-child { max-width: 555px; margin: 29px 0 0; color: #c7c8bf; font-size: 1rem; line-height: 1.62; }
.hero-orbits { position: absolute; z-index: 0; right: clamp(-180px, -6vw, -30px); bottom: 28px; width: min(58vw, 830px); height: 430px; }
.hero-orbits:after { position: absolute; inset: 7% 3% 0 9%; border: 1px solid rgba(200,255,0,.22); border-radius: 50%; content: ""; }
.hero-orbits video { position: absolute; z-index: 1; width: min(25vw, 290px); aspect-ratio: 2.05; border: 1px solid rgba(200,255,0,.45); border-radius: 50%; object-fit: cover; filter: saturate(.82) contrast(1.08); box-shadow: 0 16px 60px rgba(0,0,0,.35); }
.hero-orbits video:nth-child(1) { top: 10px; left: 2%; transform: rotate(-8deg); }.hero-orbits video:nth-child(2) { top: 136px; left: 36%; transform: rotate(7deg); }.hero-orbits video:nth-child(3) { top: 262px; left: 8%; transform: rotate(-3deg); }
.cta { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; margin-top: 31px; padding: 12px 19px; border: 1px solid var(--acid); border-radius: 99px; background: transparent; color: var(--acid); font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: transform .2s, color .2s, background .2s; }
.cta:hover { transform: translateY(-2px); background: var(--acid); color: var(--ink); }
.section { padding: clamp(70px, 8vw, 120px) 0; border-bottom: 1px solid var(--line); }
.section-grid { display: grid; grid-template-columns: minmax(150px, .74fr) minmax(0, 3.25fr); gap: clamp(25px, 5vw, 85px); }
.section-title { font-size: clamp(2.8rem, 6.5vw, 6.8rem); }
.lead { max-width: 700px; margin: 30px 0 0; color: var(--soft); font-size: 1rem; line-height: 1.65; }
.numbers, .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 58px; background: var(--line); }
.numbers>div, .steps>div { min-height: 185px; padding: 22px; background: var(--ink); }
.numbers strong { display: block; color: var(--acid); font: 600 clamp(2.3rem, 4vw, 4.5rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.09em; }
.numbers span, .steps p { display: block; margin-top: 10px; color: var(--soft); font-size: .78rem; line-height: 1.48; }
.split-list { margin-top: 54px; border-top: 1px solid var(--line); }
.split-list article { display: grid; grid-template-columns: 66px minmax(180px, 1.1fr) minmax(160px, 1fr); gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .25s, background .25s; }
.split-list article:hover { padding-right: 14px; padding-left: 14px; background: rgba(200,255,0,.065); }
.split-list small { color: var(--acid); font: 600 .74rem "Space Grotesk", monospace; }.split-list h3 { margin: 0; font: 600 clamp(1.55rem, 3vw, 3.2rem)/.88 "Space Grotesk", sans-serif; letter-spacing: -.075em; text-transform: uppercase; }.split-list p { margin: 0; color: var(--soft); font-size: .88rem; line-height: 1.55; }
.quote-band { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .55fr); gap: 40px; margin: 12px 0; padding: clamp(32px, 6vw, 80px) clamp(16px, 4vw, 66px); background: var(--acid); color: var(--ink); }
.quote-band .eyebrow { grid-column: 1 / -1; margin: 0; color: var(--ink); }.quote-band h2 { margin: 0; font: 600 clamp(3rem, 7.6vw, 8rem)/.82 "Space Grotesk", sans-serif; letter-spacing: -.1em; text-transform: uppercase; }.quote-band>p { align-self: end; max-width: 400px; margin: 0; font-size: .95rem; line-height: 1.55; }.quote-band .cta { align-self: end; width: fit-content; margin: 16px 0 0; border-color: var(--ink); color: var(--ink); }.quote-band .cta:hover { background: var(--ink); color: var(--acid); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 50px; }.card { min-height: 275px; padding: 23px; border: 1px solid var(--line); background: linear-gradient(140deg, #151610, #0d0d0b); }.card small { color: var(--acid); font: 600 .7rem "Space Grotesk", monospace; }.card h3 { margin: 62px 0 11px; font: 600 clamp(1.6rem, 2.8vw, 2.8rem)/.9 "Space Grotesk", sans-serif; letter-spacing: -.07em; text-transform: uppercase; }.card p { margin: 0; color: var(--soft); font-size: .84rem; line-height: 1.52; }
.factory-packages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 43px; }.package { display: flex; min-height: 176px; flex-direction: column; padding: 17px; border: 1px solid var(--line); background: #10110e; color: #fff; text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }.package:hover { transform: translateY(-3px); border-color: rgba(200,255,0,.7); }.package.active { border-color: var(--acid); background: rgba(200,255,0,.09); }.package span { color: var(--acid); font-size: .68rem; font-weight: 700; }.package b { margin-top: auto; font-size: .95rem; }.package strong { margin-top: 7px; color: #d7d8cf; font-size: .74rem; }
.calculator { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; margin-top: 14px; }.controls, .result { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); background: #11120e; }.control-row { margin-top: 25px; }.control-row label, .control-row>span { display: block; margin-bottom: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.duration { display: flex; gap: 8px; }.duration button { flex: 1; padding: 14px; border: 1px solid var(--line); background: transparent; color: #fff; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }.duration button.active, .duration button:hover { border-color: var(--acid); background: rgba(200,255,0,.07); color: var(--acid); }.duration b, .duration small { display: block; }.duration small { margin-top: 5px; color: var(--soft); font-size: .68rem; }.publish { display: grid; grid-template-columns: 1fr auto auto; gap: 13px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.publish p { margin: 0; font-size: .84rem; font-weight: 700; }.publish small { display: block; margin-top: 4px; color: var(--soft); font-size: .68rem; }.publish strong { color: var(--acid); font-size: .78rem; }.switch { position: relative; width: 44px; height: 25px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }.switch i { position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: #898b81; transition: .2s; }.switch.active { border-color: var(--acid); }.switch.active i { left: 23px; background: var(--acid); }.quantity { display: grid; grid-template-columns: 1fr 94px; gap: 13px; align-items: center; }.quantity input[type=range] { accent-color: var(--acid); width: 100%; }.quantity input[type=number] { width: 100%; padding: 11px; border: 1px solid var(--line); background: #080808; color: var(--acid); font-weight: 700; }.result { display: flex; flex-direction: column; }.terminal { display: flex; justify-content: space-between; color: var(--acid); font-size: .67rem; font-weight: 700; letter-spacing: .06em; }.result>p { margin: 39px 0 22px; font: 600 1.7rem/.9 "Space Grotesk", sans-serif; letter-spacing: -.06em; text-transform: uppercase; }.result dl { margin: 0; }.result dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }.result dt, .result dd { margin: 0; font-size: .75rem; }.result dt { color: var(--soft); }.result dd { text-align: right; }.total { margin-top: auto; padding-top: 25px; border-top: 1px solid var(--acid); }.total span { display: block; color: var(--soft); font-size: .7rem; text-transform: uppercase; }.total strong { display: block; margin-top: 9px; color: var(--acid); font: 600 clamp(2.1rem,4vw,3.7rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.08em; }.price-note { margin: 15px 0 0; color: var(--soft); font-size: .74rem; line-height: 1.52; }
.steps { grid-template-columns: repeat(4, 1fr); }.steps b { color: var(--acid); font: 600 .75rem "Space Grotesk", monospace; }.steps h3 { margin: 46px 0 0; font: 600 1.3rem/.95 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.academy-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; margin-top: 48px; }.program { padding: 26px; border: 1px solid var(--line); background: #12130f; }.program ol { margin: 0; padding: 0; list-style: none; }.program li { display: grid; grid-template-columns: 55px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }.program li:first-child { border-top: 0; }.program b { color: var(--acid); font: 600 .74rem "Space Grotesk", monospace; }.program h3 { margin: 0; font-size: 1rem; }.program p { margin: 6px 0 0; color: var(--soft); font-size: .8rem; line-height: 1.5; }.academy-offer { padding: 31px; background: var(--acid); color: var(--ink); }.academy-offer h3 { margin: 35px 0; font: 600 clamp(2.5rem,5vw,4.8rem)/.85 "Space Grotesk", sans-serif; letter-spacing: -.09em; text-transform: uppercase; }.academy-offer p { font-size: .86rem; line-height: 1.55; }.academy-offer .cta { border-color: var(--ink); color: var(--ink); }.academy-offer .cta:hover { background: var(--ink); color: var(--acid); }
.create-choices { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: 50px; background: var(--line); }.create-choices article { min-height: 260px; padding: 25px; background: var(--ink); transition: background .25s; }.create-choices article:hover { background: #15170e; }.create-choices h3 { margin: 66px 0 9px; font: 600 clamp(1.9rem,3.8vw,3.8rem)/.88 "Space Grotesk", sans-serif; letter-spacing: -.085em; text-transform: uppercase; }.create-choices p { max-width: 360px; margin: 0; color: var(--soft); font-size: .84rem; line-height: 1.54; }
.site-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 68px clamp(16px,2.25vw,32px) 28px; }.site-footer .brand-mark { width: clamp(200px,34vw,480px); height: clamp(70px,11vw,166px); }.site-footer .brand-bee { width: clamp(62px,8vw,120px); height: clamp(52px,7vw,100px); }.site-footer p { margin: 0; color: var(--soft); font-size: .68rem; line-height: 1.55; text-align: right; text-transform: uppercase; }.footer-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: #d8d8d0; font-size: .72rem; }.footer-links a:hover { color: var(--acid); }
.mascot-float { position: fixed; z-index: 25; right: 18px; bottom: 18px; width: 75px; opacity: .96; pointer-events: none; filter: drop-shadow(0 7px 18px rgba(0,0,0,.38)); animation: bob 4s ease-in-out infinite; }@keyframes bob { 50% { transform: translateY(-11px) rotate(-4deg); } }
@media (max-width: 880px) { .site-head { min-height: 63px; }.brand-mark { width: 104px; height: 36px; }.brand-bee { width: 31px; height: 27px; }.menu-toggle { display: block; }.nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: grid; gap: 0; max-height: 0; overflow: hidden; padding: 0 16px; border-bottom: 1px solid transparent; background: rgba(8,8,8,.97); opacity: 0; transition: max-height .28s ease, opacity .2s, padding .2s, border-color .2s; }.site-head.menu-open .nav { max-height: 360px; padding-top: 10px; padding-bottom: 16px; border-color: var(--line); opacity: 1; }.nav a { padding: 13px 0; }.nav .nav-cta { width: fit-content; margin-top: 6px; padding: 10px 14px; }.page-hero { min-height: 560px; padding: 88px 0 42px; }.hero-copy h1 { font-size: clamp(3.5rem, 15vw, 5.8rem); }.hero-copy>p:last-child { font-size: .93rem; }.hero-orbits { right: -185px; bottom: -1px; width: 590px; opacity: .62; }.hero-orbits video { width: 190px; }.section { padding: 60px 0; }.section-grid, .quote-band { grid-template-columns: 1fr; gap: 22px; }.section-title { font-size: clamp(2.8rem, 13vw, 4.8rem); }.numbers, .cards, .factory-packages, .steps { grid-template-columns: repeat(2,1fr); }.split-list article { grid-template-columns: 34px 1fr; gap: 13px; }.split-list p { grid-column: 2; }.quote-band { padding: 35px 18px; }.quote-band h2 { font-size: clamp(3.2rem, 14vw, 5.7rem); }.quote-band>p { grid-row: 3; }.calculator, .academy-grid { grid-template-columns: 1fr; }.create-choices { grid-template-columns: 1fr; }.site-footer { padding: 45px 16px 22px; }.site-footer p { display: none; }.mascot-float { width: 56px; right: 12px; bottom: 12px; } }
@media (max-width: 520px) { .shell { padding: 0 16px; }.page-hero { min-height: 575px; }.eyebrow { font-size: .68rem; }.numbers, .cards, .factory-packages, .steps { grid-template-columns: 1fr; }.numbers>div, .steps>div { min-height: 145px; }.factory-packages { gap: 6px; }.package { min-height: 132px; }.package b { margin-top: 20px; }.duration { flex-direction: column; }.publish { grid-template-columns: 1fr auto; }.publish>div { grid-column: 1 / -1; }.quantity { grid-template-columns: 1fr 78px; }.controls, .result, .program { padding: 18px; }.result>p { margin-top: 28px; }.hero-orbits { opacity: .45; }.site-footer .brand-mark { width: 210px; height: 74px; }.site-footer .brand-bee { width: 60px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Визуальные системы направлений ONDA */
.section-hero { position: relative; min-height: clamp(560px, 72svh, 790px); overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.section-hero .shell { position: relative; z-index: 2; display: grid; min-height: inherit; grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr); align-items: end; gap: 40px; padding-top: 112px; padding-bottom: 62px; }
.section-hero-copy { max-width: 760px; }.section-hero-copy h1 { margin: 0; font: 600 clamp(3.8rem, 8.8vw, 9.8rem)/.8 "Space Grotesk", sans-serif; letter-spacing: -.105em; text-transform: uppercase; }.section-hero-copy h1 em { color: var(--acid); font-style: normal; }.section-hero-copy > p:not(.eyebrow) { max-width: 560px; margin: 29px 0 0; color: #d2d3ca; font-size: 1rem; line-height: 1.62; }
.hero-data { align-self: stretch; display: grid; grid-template-columns: repeat(2, 1fr); align-content: end; gap: 1px; margin-top: 36px; background: var(--hero-line, rgba(200,255,0,.42)); }.hero-data > div { min-height: 126px; padding: 18px; background: var(--hero-panel, rgba(11,12,9,.88)); }.hero-data b { display: block; color: var(--hero-accent, var(--acid)); font: 600 clamp(1.65rem, 3vw, 3rem)/.9 "Space Grotesk", sans-serif; letter-spacing: -.075em; text-transform: uppercase; }.hero-data span { display: block; margin-top: 9px; color: #b9bbb0; font-size: .72rem; line-height: 1.4; }
.hero-visual { position: relative; min-height: 390px; align-self: center; }.hero-watermark { position: absolute; z-index: -1; right: -2vw; bottom: -4vw; color: rgba(255,255,255,.045); font: 700 clamp(7rem, 20vw, 22rem)/.68 "Space Grotesk", sans-serif; letter-spacing: -.13em; pointer-events: none; }
.studio-hero { --hero-line: rgba(200,255,0,.46); --hero-panel: rgba(10,12,8,.89); background: radial-gradient(circle at 80% 28%, rgba(200,255,0,.19), transparent 23%), linear-gradient(124deg, #080808 0%, #10150d 100%); }.studio-hero:before { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49%, rgba(200,255,0,.1) 49%, rgba(200,255,0,.1) calc(49% + 1px), transparent calc(49% + 1px)), linear-gradient(rgba(200,255,0,.055) 1px, transparent 1px); background-size: auto, 100% 74px; content: ""; }
.studio-frame { position: absolute; inset: 14% 0 5% 4%; border: 1px solid rgba(200,255,0,.48); transform: rotate(-5deg); }.studio-frame:before, .studio-frame:after { position: absolute; border: 1px solid rgba(200,255,0,.33); content: ""; }.studio-frame:before { inset: 12% 11%; transform: rotate(10deg); }.studio-frame:after { top: 39%; right: -6%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,0,.4) 0 6%, transparent 7% 13%, rgba(200,255,0,.2) 14% 15%, transparent 16%); }
.factory-hero { --hero-line: rgba(219,231,124,.6); --hero-panel: rgba(18,20,12,.94); background: radial-gradient(circle at 76% 28%, rgba(219,231,124,.14), transparent 25%), #0a0b08; }.factory-hero:before { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(219,231,124,.075) 1px, transparent 1px), linear-gradient(rgba(219,231,124,.075) 1px, transparent 1px); background-size: 38px 38px; content: ""; mask-image: linear-gradient(90deg, transparent 25%, #000 65%); }.factory-grid { position: absolute; inset: 6% 0 4% 2%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 2px; transform: perspective(900px) rotateY(-12deg) rotateX(5deg); }.factory-grid i { display: block; border: 1px solid rgba(219,231,124,.48); background: rgba(219,231,124,.05); }.factory-grid i:nth-child(3n) { background: rgba(200,255,0,.28); }.factory-grid i:nth-child(5n) { background: #12160c; }
.academy-hero .academy-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(275px,.58fr); }.academy-statline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 36px; background: rgba(200,255,0,.38); }.academy-statline div { padding: 15px; background: #10120c; }.academy-statline b { display: block; color: var(--acid); font: 600 1.65rem/.9 "Space Grotesk", sans-serif; }.academy-statline span { display: block; margin-top: 6px; color: var(--soft); font-size: .66rem; line-height: 1.35; }
.create-hero { --hero-line: rgba(200,255,0,.36); --hero-panel: rgba(14,16,11,.9); background: radial-gradient(circle at 78% 35%, rgba(200,255,0,.14), transparent 26%), linear-gradient(135deg, #080808 0%, #10110d 100%); }.create-film { position: absolute; inset: 8% -8% 4% 0; display: flex; align-items: center; gap: 12px; transform: rotate(-5deg); }.create-film article { position: relative; flex: 0 0 min(29vw, 275px); aspect-ratio: .72; overflow: hidden; border: 1px solid rgba(200,255,0,.48); background: #16180f; }.create-film video { width: 100%; height: 100%; object-fit: cover; opacity: .76; filter: saturate(.74) contrast(1.1); }.create-film span { position: absolute; right: 12px; bottom: 12px; color: #fff; font: 600 .62rem "Space Grotesk", monospace; letter-spacing: .08em; }
.explainer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 52px; background: var(--line); }.explainer-grid article { min-height: 200px; padding: 21px; background: var(--ink); }.explainer-grid b { display: block; color: var(--acid); font: 600 1.9rem/.9 "Space Grotesk", sans-serif; letter-spacing: -.07em; }.explainer-grid h3 { margin: 42px 0 7px; font: 600 1.05rem/.95 "Space Grotesk", sans-serif; text-transform: uppercase; }.explainer-grid p { margin: 0; color: var(--soft); font-size: .76rem; line-height: 1.48; }
.compact-section { padding: clamp(62px, 7vw, 102px) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 880px) { .section-hero .shell { grid-template-columns: 1fr; gap: 18px; padding-top: 96px; padding-bottom: 42px; }.section-hero .hero-visual { position: absolute; right: -130px; bottom: -30px; left: 44%; width: 620px; height: 410px; opacity: .65; }.section-hero-copy { padding-bottom: 30px; }.section-hero-copy h1 { font-size: clamp(3.55rem, 15vw, 6.2rem); }.hero-data { max-width: 540px; }.create-film article { flex-basis: 178px; }.academy-statline { max-width: 530px; } .explainer-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .section-hero { min-height: 610px; }.section-hero .shell { padding-top: 91px; padding-bottom: 34px; }.section-hero .hero-visual { right: -200px; left: 36%; opacity: .4; }.hero-data > div { min-height: 104px; padding: 13px; }.hero-data b { font-size: 1.35rem; }.hero-data span { font-size: .63rem; }.academy-statline { grid-template-columns: 1fr; gap: 1px; }.explainer-grid { grid-template-columns: 1fr; }.explainer-grid article { min-height: 158px; }.explainer-grid h3 { margin-top: 28px; } }