@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url(//laser-land.ru/wp-content/uploads/laserland-arena-dronov/fonts/Rubik-Regular.woff2) format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url(//laser-land.ru/wp-content/uploads/laserland-arena-dronov/fonts/Rubik-Medium.woff2) format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap; src: url(//laser-land.ru/wp-content/uploads/laserland-arena-dronov/fonts/Rubik-Bold.woff2) format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 900; font-display: swap; src: url(//laser-land.ru/wp-content/uploads/laserland-arena-dronov/fonts/Rubik-Black.woff2) format("woff2"); }
#ll-arena-dronov-landing {
--ll-darkblue:        #00244A;   
--ll-darkblue-80:     #13375C;
--ll-darkblue-60:     #416487;
--ll-darkblue-40:     #5D7E9E;
--ll-darkblue-20:     #90AAC2;
--ll-cyan:            #00AAD4;   
--ll-cyan-80:         #3BBBDB;
--ll-cyan-60:         #71D0E8;
--ll-cyan-40:         #A6E8F7;
--ll-cyan-20:         #C4F5FF;
--ll-orange:          #FF7800;   
--ll-orange-80:       #FF9333;
--ll-orange-60:       #FFAE66;
--ll-orange-40:       #FFC999;
--ll-orange-20:       #FFE4CC;
--ll-violet:          #C374BC;   
--ll-violet-80:       #D68BD0;
--ll-violet-60:       #DEA0D9;
--ll-violet-40:       #E8B5E5;
--ll-violet-20:       #EDD1EB;
--ll-pink:            #EE3164;   
--ll-pink-80:         #EE4F79;
--ll-pink-60:         #F07395;
--ll-pink-40:         #F29BB3;
--ll-pink-20:         #FFC9D8;
--ll-green:           #9DC443;   
--ll-green-80:        #B2D660;
--ll-green-60:        #C2E07C;
--ll-green-40:        #D3ED98;
--ll-green-20:        #E5F5BF;
--ll-yellow:          #FFBE2B;   
--ll-yellow-80:       #FFC952;
--ll-yellow-60:       #FFD780;
--ll-yellow-40:       #FFE09C;
--ll-yellow-20:       #FFEDC4;
--ll-pink-deep:       #B5005C;   
--ll-pink-mid:        #C8396D;
--ll-violet-deep:     #7664A5;
--ll-violet-mid:      #9783B9;
--ll-yellow-deep:     #E6AD19;
--ll-yellow-mid:      #F3CE12;
--ll-cyan-mid:        #41ACE7;
--ll-cyan-light:      #73BDEE;
--ll-green-deep:      #77A652;
--ll-green-mid:       #9BBE55;
--ll-orange-deep:     #F39200;   
--ll-pattern-underlay: rgb(27,39,71);
--bg:                 var(--ll-darkblue);
--bg-soft:            var(--ll-darkblue-80);
--surface:            #FFFFFF;
--surface-muted:      #F4F6FA;
--pattern-bg:         var(--ll-pattern-underlay);
--fg1:                #FFFFFF;                
--fg2:                rgba(255,255,255,.72);
--fg3:                rgba(255,255,255,.48);
--fg-on-light-1:      #00244A;                
--fg-on-light-2:      #416487;
--fg-on-light-3:      #90AAC2;
--link:               var(--ll-cyan);
--link-hover:         var(--ll-cyan-80);
--cta:                var(--ll-orange);
--cta-hover:          var(--ll-orange-80);
--divider:            rgba(255,255,255,.12);
--divider-on-light:   rgba(0,36,74,.10);
--font-display:  "Rubik", "Roboto", Arial, system-ui, sans-serif;
--font-body:     "Rubik", "Roboto", Arial, system-ui, sans-serif;
--font-web:      "Roboto", "Rubik", Arial, system-ui, sans-serif;
--font-fallback: Arial, Helvetica, sans-serif;
--fw-light:    300;
--fw-regular:  400;
--fw-medium:   500;
--fw-semibold: 600;
--fw-bold:     700;
--fw-black:    800;
--fs-12: 12px;
--fs-14: 14px;
--fs-16: 16px;
--fs-18: 18px;
--fs-20: 20px;
--fs-24: 24px;
--fs-32: 32px;
--fs-40: 40px;
--fs-56: 56px;
--fs-72: 72px;
--fs-96: 96px;
--fs-140: 140px;   
--lh-tight:   1.05;
--lh-snug:    1.15;
--lh-normal:  1.4;
--lh-relaxed: 1.6;
--tracking-tight:  -0.02em;
--tracking-normal:  0em;
--tracking-wide:    0.04em;
--tracking-cap:     0.08em;   
--radius-0: 0;
--radius-2: 2px;
--radius-4: 4px;
--radius-8: 8px;
--radius-pill: 999px;
--space-2:  2px;
--space-4:  4px;
--space-8:  8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-56: 56px;
--space-72: 72px;
--logo-x: 12px;        
--logo-clearspace: calc(var(--logo-x) * 2);  
--shadow-sm: 0 1px 2px rgba(0,36,74,.10);
--shadow-md: 0 6px 18px rgba(0,36,74,.18);
--shadow-lg: 0 18px 40px rgba(0,36,74,.28);
--h1-size: var(--fs-72);  --h1-weight: var(--fw-bold);     --h1-lh: var(--lh-tight);
--h2-size: var(--fs-56);  --h2-weight: var(--fw-bold);     --h2-lh: var(--lh-tight);
--h3-size: var(--fs-32);  --h3-weight: var(--fw-semibold); --h3-lh: var(--lh-snug);
--h4-size: var(--fs-24);  --h4-weight: var(--fw-medium);   --h4-lh: var(--lh-snug);
--eyebrow-size: var(--fs-12); --eyebrow-weight: var(--fw-bold);
--p-size:  var(--fs-16);  --p-weight:  var(--fw-regular);  --p-lh:  var(--lh-relaxed);
--small-size: var(--fs-14); --small-weight: var(--fw-regular);
--code-size:  var(--fs-14);
}
#ll-arena-dronov-landing .ll-h1, #ll-arena-dronov-landing h1.ll {
font-family: var(--font-display);
font-weight: var(--h1-weight);
font-size: var(--h1-size);
line-height: var(--h1-lh);
letter-spacing: var(--tracking-tight);
}
#ll-arena-dronov-landing .ll-h2, #ll-arena-dronov-landing h2.ll {
font-family: var(--font-display);
font-weight: var(--h2-weight);
font-size: var(--h2-size);
line-height: var(--h2-lh);
letter-spacing: var(--tracking-tight);
}
#ll-arena-dronov-landing .ll-h3, #ll-arena-dronov-landing h3.ll {
font-family: var(--font-display);
font-weight: var(--h3-weight);
font-size: var(--h3-size);
line-height: var(--h3-lh);
}
#ll-arena-dronov-landing .ll-h4, #ll-arena-dronov-landing h4.ll {
font-family: var(--font-display);
font-weight: var(--h4-weight);
font-size: var(--h4-size);
line-height: var(--h4-lh);
}
#ll-arena-dronov-landing .ll-eyebrow {
font-family: var(--font-display);
font-weight: var(--eyebrow-weight);
font-size: var(--eyebrow-size);
text-transform: uppercase;
letter-spacing: var(--tracking-cap);
color: var(--ll-orange);
}
#ll-arena-dronov-landing .ll-body, #ll-arena-dronov-landing p.ll {
font-family: var(--font-body);
font-size: var(--p-size);
line-height: var(--p-lh);
}
#ll-arena-dronov-landing .ll-small { font-size: var(--small-size); }
#ll-arena-dronov-landing .ll-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--code-size); }
#ll-arena-dronov-landing .ll-bg-pattern {
background-color: var(--pattern-bg);
background-image: url(/wp-content/uploads/laserland-arena-dronov/laserland-arena-dronov/css/assets/brand-pattern.png);
background-size: cover;
background-position: top right;   
background-repeat: no-repeat;
color: var(--fg1);
}
#ll-arena-dronov-landing .drone-arena {
container-type: inline-size;
container-name: arena;
margin: 0 auto;
width: 100%;
background: #04081a;
color: var(--fg1);
font-family: var(--font-display);
position: relative;
overflow: hidden;
}
#ll-arena-dronov-landing .drone-arena__container {
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__container { padding: 0 48px; }
}
@container arena (min-width: 1100px) {
#ll-arena-dronov-landing .drone-arena__container { padding: 0 72px; max-width: 1280px; }
}
#ll-arena-dronov-landing .drone-arena__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ll-cyan);
margin: 0 0 16px;
display: inline-flex;
align-items: center;
gap: 10px;
}
#ll-arena-dronov-landing .drone-arena__eyebrow::before {
content: "";
width: 28px; height: 1px;
background: linear-gradient(90deg, transparent, var(--ll-cyan));
}
#ll-arena-dronov-landing .drone-arena__h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: 30px;
line-height: 1.02;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #fff;
margin: 0 0 14px;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__h2 { font-size: 48px; }
}
@container arena (min-width: 1100px) {
#ll-arena-dronov-landing .drone-arena__h2 { font-size: 64px; }
}
#ll-arena-dronov-landing .drone-arena__lead {
font-size: 16px;
line-height: 1.55;
color: rgba(255,255,255,.72);
max-width: 680px;
margin: 0 0 28px;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__lead { font-size: 18px; }
}
#ll-arena-dronov-landing .drone-arena__section {
position: relative;
padding: 64px 0;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__section { padding: 96px 0; }
}
#ll-arena-dronov-landing .drone-arena__section--dim { background: linear-gradient(180deg, #04081a 0%, #06102b 100%); }
#ll-arena-dronov-landing .drone-arena__section--deep { background: #020512; }
#ll-arena-dronov-landing .drone-arena__section--blue { background: var(--ll-darkblue); }
#ll-arena-dronov-landing .drone-arena__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
border: 0;
border-radius: 4px;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: transform 80ms ease, background 200ms ease, box-shadow 200ms ease;
white-space: nowrap;
}
#ll-arena-dronov-landing .drone-arena__btn:active { transform: scale(0.97); }
#ll-arena-dronov-landing .drone-arena__btn--primary {
background: var(--ll-orange);
color: #fff;
box-shadow: 0 10px 32px -10px rgba(255,120,0,.6), 0 0 0 0 rgba(255,120,0,.4);
}
#ll-arena-dronov-landing .drone-arena__btn--primary:hover {
background: var(--ll-orange-80);
box-shadow: 0 14px 40px -10px rgba(255,120,0,.8);
}
#ll-arena-dronov-landing .drone-arena__btn--ghost {
background: rgba(0,170,212,.08);
color: var(--ll-cyan);
border: 1px solid rgba(0,170,212,.35);
box-shadow: inset 0 0 24px rgba(0,170,212,.08);
}
#ll-arena-dronov-landing .drone-arena__btn--ghost:hover {
background: rgba(0,170,212,.16);
border-color: rgba(0,170,212,.6);
}
#ll-arena-dronov-landing .drone-arena__btn--neon {
background: linear-gradient(180deg, #ff3d8a 0%, #d61b6a 100%);
color: #fff;
box-shadow: 0 0 20px rgba(238,49,100,.5), 0 0 60px rgba(238,49,100,.25);
}
#ll-arena-dronov-landing .drone-arena__btn--neon:hover { filter: brightness(1.08); }
#ll-arena-dronov-landing .drone-arena__btn--lg { padding: 18px 28px; font-size: 16px; }
#ll-arena-dronov-landing .drone-arena__btn--block { width: 100%; }
#ll-arena-dronov-landing .drone-arena__site-chrome {
background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px);
border: 1px dashed rgba(255,255,255,.18);
padding: 18px 24px;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
text-align: center;
display: flex; align-items: center; justify-content: center;
gap: 14px;
}
#ll-arena-dronov-landing .drone-arena__site-chrome img { height: 22px; opacity: 0.8; }
#ll-arena-dronov-landing .drone-arena__site-chrome span { display: inline-block; }
#ll-arena-dronov-landing .drone-arena__site-chrome--footer { min-height: 120px; flex-direction: column; gap: 6px; padding: 32px 24px; }
#ll-arena-dronov-landing .drone-arena__hero {
position: relative;
isolation: isolate;
padding: 56px 0 72px;
background:
radial-gradient(60% 80% at 80% 10%, rgba(0,170,212,.18), transparent 60%),
radial-gradient(50% 70% at 10% 90%, rgba(238,49,100,.22), transparent 60%),
linear-gradient(180deg, #060c25 0%, #03061a 100%);
overflow: hidden;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__hero { padding: 88px 0 104px; }
}
#ll-arena-dronov-landing .drone-arena__hero::before {
content: "";
position: absolute;
inset: auto 0 -20% 0;
height: 70%;
background:
linear-gradient(to bottom, transparent 0%, #04081a 90%),
repeating-linear-gradient(to right, rgba(0,170,212,.18) 0 1px, transparent 1px 80px),
repeating-linear-gradient(to bottom, rgba(0,170,212,.18) 0 1px, transparent 1px 80px);
background-blend-mode: normal, normal, normal;
transform: perspective(800px) rotateX(64deg);
transform-origin: top;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
#ll-arena-dronov-landing .drone-arena__hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 0%, rgba(0,170,212,.15), transparent 40%);
pointer-events: none;
z-index: 0;
}
#ll-arena-dronov-landing .drone-arena__hero-inner {
position: relative;
z-index: 2;
display: grid;
gap: 40px;
}
@container arena (min-width: 980px) {
#ll-arena-dronov-landing .drone-arena__hero-inner { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; }
}
#ll-arena-dronov-landing .drone-arena__hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(0,170,212,.4);
background: rgba(0,170,212,.08);
color: var(--ll-cyan);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
#ll-arena-dronov-landing .drone-arena__hero-eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ll-cyan);
box-shadow: 0 0 12px var(--ll-cyan);
}
#ll-arena-dronov-landing .drone-arena__hero-h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: 44px;
line-height: 0.95;
letter-spacing: -0.025em;
text-transform: uppercase;
color: #fff;
margin: 18px 0 16px;
text-wrap: balance;
}
#ll-arena-dronov-landing .drone-arena__hero-h1 span, #ll-arena-dronov-landing .drone-arena__hero-h1 em { white-space: nowrap; }
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__hero-h1 { font-size: 72px; }
}
@container arena (min-width: 1100px) {
#ll-arena-dronov-landing .drone-arena__hero-h1 { font-size: 104px; }
}
#ll-arena-dronov-landing .drone-arena__hero-h1 em {
font-style: normal;
background: linear-gradient(180deg, var(--ll-cyan) 0%, #00e2ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 40px rgba(0,170,212,.4);
}
#ll-arena-dronov-landing .drone-arena__hero-sub {
font-size: 16px;
line-height: 1.55;
color: rgba(255,255,255,.78);
margin: 0 0 12px;
max-width: 520px;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__hero-sub { font-size: 19px; }
}
#ll-arena-dronov-landing .drone-arena__hero-extra {
font-size: 14px;
color: rgba(255,255,255,.5);
margin: 0 0 28px;
}
#ll-arena-dronov-landing .drone-arena__hero-actions {
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
#ll-arena-dronov-landing .drone-arena__hero-stats {
display: flex; gap: 28px;
margin-top: 36px;
flex-wrap: wrap;
}
#ll-arena-dronov-landing .drone-arena__hero-stat {
font-family: var(--font-display);
}
#ll-arena-dronov-landing .drone-arena__hero-stat strong {
display: block;
font-size: 28px;
font-weight: 800;
color: #fff;
line-height: 1;
margin-bottom: 6px;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__hero-stat strong { font-size: 36px; }
}
#ll-arena-dronov-landing .drone-arena__hero-stat span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,.5);
}
#ll-arena-dronov-landing .drone-arena__hero-stat--accent strong { color: var(--ll-cyan); text-shadow: 0 0 20px rgba(0,170,212,.5); }
#ll-arena-dronov-landing .drone-arena__hero-media {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 6px;
overflow: hidden;
background:
radial-gradient(80% 80% at 30% 30%, rgba(0,170,212,.22), transparent 60%),
radial-gradient(70% 70% at 80% 90%, rgba(238,49,100,.22), transparent 60%),
repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 16px),
#050924;
border: 1px solid rgba(0,170,212,.25);
box-shadow:
0 0 0 1px rgba(255,255,255,.02) inset,
0 30px 80px -20px rgba(0,170,212,.35),
0 0 60px -20px rgba(238,49,100,.3);
}
#ll-arena-dronov-landing .drone-arena__hero-media-track {
position: absolute;
inset: 0;
background:
linear-gradient(transparent, transparent),
repeating-linear-gradient(90deg, rgba(0,170,212,.12) 0 1px, transparent 1px 40px),
repeating-linear-gradient(0deg, rgba(0,170,212,.08) 0 1px, transparent 1px 40px);
mix-blend-mode: screen;
}
#ll-arena-dronov-landing .drone-arena__hero-media-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
color: rgba(255,255,255,.5);
}
#ll-arena-dronov-landing .drone-arena__hero-media-label-icon {
width: 64px; height: 64px;
border: 1px dashed rgba(0,170,212,.4);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--ll-cyan);
}
#ll-arena-dronov-landing .drone-arena__hero-media-label-text {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
text-align: center;
}
#ll-arena-dronov-landing .drone-arena__hero-media-label-text strong { display: block; color: rgba(255,255,255,.8); font-weight: 700; margin-bottom: 4px; }
#ll-arena-dronov-landing .drone-arena__hero-corner {
position: absolute;
width: 96px; height: 96px;
opacity: 0.95;
pointer-events: none;
z-index: 1;
}
#ll-arena-dronov-landing .drone-arena__hero-corner--tl { top: 24px; left: 24px; transform: rotate(0deg); }
#ll-arena-dronov-landing .drone-arena__hero-corner--br { right: 24px; bottom: 24px; transform: rotate(180deg); }
#ll-arena-dronov-landing .drone-arena__benefits {
display: grid; gap: 16px;
grid-template-columns: 1fr;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__benefits { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
#ll-arena-dronov-landing .drone-arena__benefit {
position: relative;
padding: 28px 22px;
border: 1px solid rgba(0,170,212,.18);
background: linear-gradient(180deg, rgba(0,170,212,.06), rgba(0,170,212,.02));
border-radius: 4px;
overflow: hidden;
}
#ll-arena-dronov-landing .drone-arena__benefit::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--ll-cyan), transparent);
}
#ll-arena-dronov-landing .drone-arena__benefit-num {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(0,170,212,.6);
margin-bottom: 12px;
}
#ll-arena-dronov-landing .drone-arena__benefit-title {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
#ll-arena-dronov-landing .drone-arena__benefit-text {
font-size: 15px;
line-height: 1.5;
color: rgba(255,255,255,.66);
margin: 0;
}
#ll-arena-dronov-landing .drone-arena__benefit:nth-child(2) { background: linear-gradient(180deg, rgba(238,49,100,.06), rgba(238,49,100,.02)); border-color: rgba(238,49,100,.2); }
#ll-arena-dronov-landing .drone-arena__benefit:nth-child(2)::before { background: linear-gradient(90deg, var(--ll-pink), transparent); }
#ll-arena-dronov-landing .drone-arena__benefit:nth-child(2) .drone-arena__benefit-num { -webkit-text-stroke-color: rgba(238,49,100,.65); }
#ll-arena-dronov-landing .drone-arena__benefit:nth-child(3) { background: linear-gradient(180deg, rgba(255,190,43,.06), rgba(255,190,43,.02)); border-color: rgba(255,190,43,.2); }
#ll-arena-dronov-landing .drone-arena__benefit:nth-child(3)::before { background: linear-gradient(90deg, var(--ll-yellow), transparent); }
#ll-arena-dronov-landing .drone-arena__benefit:nth-child(3) .drone-arena__benefit-num { -webkit-text-stroke-color: rgba(255,190,43,.7); }
#ll-arena-dronov-landing .drone-arena__formats {
display: grid; gap: 14px; grid-template-columns: 1fr;
}
@container arena (min-width: 640px) {
#ll-arena-dronov-landing .drone-arena__formats { grid-template-columns: repeat(2, 1fr); }
}
@container arena (min-width: 1000px) {
#ll-arena-dronov-landing .drone-arena__formats { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
#ll-arena-dronov-landing .drone-arena__format {
position: relative;
display: flex; flex-direction: column;
gap: 14px;
padding: 24px;
border-radius: 4px;
background: linear-gradient(180deg, #0a1230, #06091e);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: border-color .2s, transform .2s;
cursor: pointer;
}
#ll-arena-dronov-landing .drone-arena__format:hover {
border-color: rgba(0,170,212,.5);
transform: translateY(-2px);
}
#ll-arena-dronov-landing .drone-arena__format::after {
content: "";
position: absolute;
inset: auto -40% -40% auto;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(0,170,212,.18), transparent 70%);
pointer-events: none;
transition: opacity .2s;
opacity: 0;
}
#ll-arena-dronov-landing .drone-arena__format:hover::after { opacity: 1; }
#ll-arena-dronov-landing .drone-arena__format-icon {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(0,170,212,.35);
border-radius: 4px;
background: rgba(0,170,212,.06);
color: var(--ll-cyan);
flex-shrink: 0;
}
#ll-arena-dronov-landing .drone-arena__format--pink .drone-arena__format-icon { border-color: rgba(238,49,100,.4); background: rgba(238,49,100,.06); color: var(--ll-pink); }
#ll-arena-dronov-landing .drone-arena__format--violet .drone-arena__format-icon { border-color: rgba(195,116,188,.4); background: rgba(195,116,188,.06); color: var(--ll-violet); }
#ll-arena-dronov-landing .drone-arena__format--green .drone-arena__format-icon { border-color: rgba(157,196,67,.4); background: rgba(157,196,67,.06); color: var(--ll-green); }
#ll-arena-dronov-landing .drone-arena__format--yellow .drone-arena__format-icon { border-color: rgba(255,190,43,.4); background: rgba(255,190,43,.06); color: var(--ll-yellow); }
#ll-arena-dronov-landing .drone-arena__format--orange .drone-arena__format-icon { border-color: rgba(255,120,0,.4); background: rgba(255,120,0,.06); color: var(--ll-orange); }
#ll-arena-dronov-landing .drone-arena__format-title {
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.01em;
color: #fff;
margin: 0;
}
#ll-arena-dronov-landing .drone-arena__format-text {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,.65);
margin: 0;
flex: 1;
}
#ll-arena-dronov-landing .drone-arena__format-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ll-cyan);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
}
#ll-arena-dronov-landing .drone-arena__format-link svg { transition: transform .2s; }
#ll-arena-dronov-landing .drone-arena__format:hover .drone-arena__format-link svg { transform: translateX(4px); }
#ll-arena-dronov-landing .drone-arena__split {
display: grid; gap: 36px;
align-items: center;
grid-template-columns: 1fr;
}
@container arena (min-width: 900px) {
#ll-arena-dronov-landing .drone-arena__split { grid-template-columns: 1fr 1fr; gap: 56px; }
#ll-arena-dronov-landing .drone-arena__split--reverse > :first-child { order: 2; }
}
#ll-arena-dronov-landing .drone-arena__split-media {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(0,170,212,.2);
background:
radial-gradient(50% 80% at 50% 0%, rgba(0,170,212,.15), transparent 70%),
radial-gradient(50% 80% at 50% 100%, rgba(238,49,100,.18), transparent 70%),
#050924;
}
#ll-arena-dronov-landing .drone-arena__split-media--pink {
border-color: rgba(238,49,100,.3);
background:
radial-gradient(50% 80% at 50% 0%, rgba(238,49,100,.2), transparent 70%),
radial-gradient(50% 80% at 50% 100%, rgba(195,116,188,.2), transparent 70%),
#0a0518;
}
#ll-arena-dronov-landing .drone-arena__split-media-grid {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px);
}
#ll-arena-dronov-landing .drone-arena__split-media-label {
position: absolute;
bottom: 16px; left: 16px;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
background: rgba(4,8,26,.6);
padding: 6px 10px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 2px;
}
#ll-arena-dronov-landing .drone-arena__split-media-svg {
position: absolute;
inset: 12% 10%;
opacity: 0.95;
filter: drop-shadow(0 0 22px rgba(0,170,212,.35));
}
#ll-arena-dronov-landing .drone-arena__split-content .drone-arena__h2 { color: #fff; }
#ll-arena-dronov-landing .drone-arena__packages {
display: grid; gap: 16px;
grid-template-columns: 1fr;
}
@container arena (min-width: 900px) {
#ll-arena-dronov-landing .drone-arena__packages { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 20px; }
}
#ll-arena-dronov-landing .drone-arena__package {
position: relative;
background: linear-gradient(180deg, #0a1230, #06091e);
border: 1px solid rgba(255,255,255,.08);
border-radius: 4px;
padding: 28px 24px 24px;
display: flex; flex-direction: column;
}
#ll-arena-dronov-landing .drone-arena__package-name {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin: 0 0 8px;
}
#ll-arena-dronov-landing .drone-arena__package-title {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
margin: 0 0 16px;
letter-spacing: -0.01em;
}
#ll-arena-dronov-landing .drone-arena__package-meta {
display: flex; gap: 16px; flex-wrap: wrap;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed rgba(255,255,255,.12);
}
#ll-arena-dronov-landing .drone-arena__package-meta-item span {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,.45);
margin-bottom: 4px;
}
#ll-arena-dronov-landing .drone-arena__package-meta-item strong {
font-size: 20px;
font-weight: 700;
color: #fff;
}
#ll-arena-dronov-landing .drone-arena__package-meta-item--price strong { color: var(--ll-cyan); }
#ll-arena-dronov-landing .drone-arena__package-list {
list-style: none;
padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column; gap: 10px;
flex: 1;
}
#ll-arena-dronov-landing .drone-arena__package-list li {
position: relative;
padding-left: 22px;
font-size: 14px;
color: rgba(255,255,255,.78);
line-height: 1.45;
}
#ll-arena-dronov-landing .drone-arena__package-list li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 12px; height: 12px;
background: linear-gradient(135deg, var(--ll-cyan), transparent);
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
#ll-arena-dronov-landing .drone-arena__package--featured {
background:
linear-gradient(180deg, rgba(238,49,100,.16), rgba(195,116,188,.08) 40%, #0a0518 100%);
border: 1px solid rgba(238,49,100,.45);
box-shadow: 0 30px 80px -30px rgba(238,49,100,.5), 0 0 0 1px rgba(238,49,100,.1) inset;
transform: scale(1);
}
@container arena (min-width: 900px) {
#ll-arena-dronov-landing .drone-arena__package--featured { transform: scale(1.04); z-index: 2; }
}
#ll-arena-dronov-landing .drone-arena__package--featured .drone-arena__package-list li::before {
background: linear-gradient(135deg, var(--ll-pink), var(--ll-violet));
}
#ll-arena-dronov-landing .drone-arena__package-badge {
position: absolute;
top: -10px; left: 24px;
background: linear-gradient(90deg, var(--ll-pink), var(--ll-violet));
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 2px;
box-shadow: 0 8px 24px -6px rgba(238,49,100,.6);
}
#ll-arena-dronov-landing .drone-arena__steps {
display: grid; gap: 14px;
grid-template-columns: 1fr;
counter-reset: step;
position: relative;
}
@container arena (min-width: 720px) {
#ll-arena-dronov-landing .drone-arena__steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@container arena (min-width: 1000px) {
#ll-arena-dronov-landing .drone-arena__steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
#ll-arena-dronov-landing .drone-arena__step {
position: relative;
padding: 24px 22px 24px 22px;
background: linear-gradient(180deg, #0a1230, #06091e);
border: 1px solid rgba(255,255,255,.06);
border-radius: 4px;
counter-increment: step;
}
#ll-arena-dronov-landing .drone-arena__step::before {
content: "0" counter(step);
position: absolute;
top: 18px; right: 22px;
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: transparent;
-webkit-text-stroke: 1.5px rgba(0,170,212,.55);
line-height: 1;
}
#ll-arena-dronov-landing .drone-arena__step-icon {
width: 44px; height: 44px;
border-radius: 4px;
background: rgba(0,170,212,.08);
border: 1px solid rgba(0,170,212,.3);
color: var(--ll-cyan);
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
#ll-arena-dronov-landing .drone-arena__step-title {
font-size: 17px;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
#ll-arena-dronov-landing .drone-arena__step-text {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,.62);
margin: 0;
}
#ll-arena-dronov-landing .drone-arena__org {
display: grid; gap: 16px;
grid-template-columns: 1fr;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__org { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
#ll-arena-dronov-landing .drone-arena__org-card {
padding: 28px 24px;
background: linear-gradient(180deg, #0a1230, #06091e);
border-left: 3px solid var(--ll-cyan);
border-radius: 0 4px 4px 0;
}
#ll-arena-dronov-landing .drone-arena__org-card:nth-child(2) { border-left-color: var(--ll-pink); }
#ll-arena-dronov-landing .drone-arena__org-card:nth-child(3) { border-left-color: var(--ll-orange); }
#ll-arena-dronov-landing .drone-arena__org-card h3 {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 10px;
color: #fff;
letter-spacing: -0.01em;
}
#ll-arena-dronov-landing .drone-arena__org-card p {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,.65);
margin: 0;
}
#ll-arena-dronov-landing .drone-arena__school-formats {
display: grid; gap: 14px; margin-top: 28px;
}
@container arena (min-width: 700px) {
#ll-arena-dronov-landing .drone-arena__school-formats { grid-template-columns: 1fr 1fr; gap: 20px; }
}
#ll-arena-dronov-landing .drone-arena__school-card {
padding: 24px 22px;
border: 1px solid rgba(0,170,212,.2);
background: rgba(0,170,212,.04);
border-radius: 4px;
}
#ll-arena-dronov-landing .drone-arena__school-card--alt {
border-color: rgba(238,49,100,.25);
background: rgba(238,49,100,.04);
}
#ll-arena-dronov-landing .drone-arena__school-card-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ll-cyan);
font-weight: 700;
margin-bottom: 10px;
display: block;
}
#ll-arena-dronov-landing .drone-arena__school-card--alt .drone-arena__school-card-label { color: var(--ll-pink); }
#ll-arena-dronov-landing .drone-arena__school-card h4 {
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 10px;
color: #fff;
}
#ll-arena-dronov-landing .drone-arena__school-card p {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,.7);
margin: 0 0 18px;
}
#ll-arena-dronov-landing .drone-arena__extras {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 28px;
}
@container arena (min-width: 760px) {
#ll-arena-dronov-landing .drone-arena__extras { grid-template-columns: repeat(3, 1fr); }
}
@container arena (min-width: 1000px) {
#ll-arena-dronov-landing .drone-arena__extras { grid-template-columns: repeat(6, 1fr); }
}
#ll-arena-dronov-landing .drone-arena__extra {
padding: 18px 14px;
text-align: center;
background: linear-gradient(180deg, #0a1230, #06091e);
border: 1px solid rgba(255,255,255,.06);
border-radius: 4px;
}
#ll-arena-dronov-landing .drone-arena__extra-icon {
width: 40px; height: 40px;
margin: 0 auto 10px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
background: rgba(0,170,212,.08);
color: var(--ll-cyan);
}
#ll-arena-dronov-landing .drone-arena__extra:nth-child(2) .drone-arena__extra-icon { background: rgba(238,49,100,.08); color: var(--ll-pink); }
#ll-arena-dronov-landing .drone-arena__extra:nth-child(3) .drone-arena__extra-icon { background: rgba(255,190,43,.08); color: var(--ll-yellow); }
#ll-arena-dronov-landing .drone-arena__extra:nth-child(4) .drone-arena__extra-icon { background: rgba(255,120,0,.08); color: var(--ll-orange); }
#ll-arena-dronov-landing .drone-arena__extra:nth-child(5) .drone-arena__extra-icon { background: rgba(195,116,188,.08); color: var(--ll-violet); }
#ll-arena-dronov-landing .drone-arena__extra:nth-child(6) .drone-arena__extra-icon { background: rgba(157,196,67,.08); color: var(--ll-green); }
#ll-arena-dronov-landing .drone-arena__extra-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,.78);
}
#ll-arena-dronov-landing .drone-arena__safety {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@container arena (min-width: 640px) {
#ll-arena-dronov-landing .drone-arena__safety { grid-template-columns: repeat(2, 1fr); }
}
@container arena (min-width: 1000px) {
#ll-arena-dronov-landing .drone-arena__safety { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
#ll-arena-dronov-landing .drone-arena__safety-card {
padding: 22px 20px;
background: rgba(0,170,212,.04);
border: 1px solid rgba(0,170,212,.18);
border-radius: 4px;
}
#ll-arena-dronov-landing .drone-arena__safety-icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
color: var(--ll-cyan);
border: 1px solid rgba(0,170,212,.35);
border-radius: 4px;
background: rgba(0,170,212,.04);
}
#ll-arena-dronov-landing .drone-arena__safety-card h4 {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
#ll-arena-dronov-landing .drone-arena__safety-card p {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,.62);
margin: 0;
}
#ll-arena-dronov-landing .drone-arena__gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@container arena (min-width: 720px) {
#ll-arena-dronov-landing .drone-arena__gallery {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
gap: 14px;
}
}
#ll-arena-dronov-landing .drone-arena__gallery-cell {
position: relative;
aspect-ratio: 1 / 1;
background: #0a1230;
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.06);
}
@container arena (min-width: 720px) {
#ll-arena-dronov-landing .drone-arena__gallery-cell { aspect-ratio: auto; }
#ll-arena-dronov-landing .drone-arena__gallery-cell--wide { grid-column: span 2; }
#ll-arena-dronov-landing .drone-arena__gallery-cell--tall { grid-row: span 2; }
}
#ll-arena-dronov-landing .drone-arena__gallery-cell img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(1.05) brightness(0.85);
transition: transform .4s ease, filter .3s;
}
#ll-arena-dronov-landing .drone-arena__gallery-cell:hover img { transform: scale(1.04); filter: saturate(1.15) brightness(1); }
#ll-arena-dronov-landing .drone-arena__gallery-cell::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0,36,74,.5));
pointer-events: none;
}
#ll-arena-dronov-landing .drone-arena__gallery-cell-label {
position: absolute;
bottom: 10px; left: 12px;
z-index: 2;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255,255,255,.85);
}
#ll-arena-dronov-landing .drone-arena__faq-list {
display: flex; flex-direction: column;
gap: 12px;
max-width: 920px;
margin: 0;
padding: 0;
}
#ll-arena-dronov-landing .drone-arena__faq-item {
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.08);
border-radius: 4px;
overflow: hidden;
}
#ll-arena-dronov-landing .drone-arena__faq-item[open] { border-color: rgba(0,170,212,.3); background: rgba(0,170,212,.04); }
#ll-arena-dronov-landing .drone-arena__faq-item summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-size: 15px;
font-weight: 600;
color: #fff;
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
}
#ll-arena-dronov-landing .drone-arena__faq-item summary::-webkit-details-marker { display: none; }
#ll-arena-dronov-landing .drone-arena__faq-item summary::after {
content: "+";
font-size: 24px;
font-weight: 300;
color: var(--ll-cyan);
flex-shrink: 0;
line-height: 1;
transition: transform .2s;
}
#ll-arena-dronov-landing .drone-arena__faq-item[open] summary::after { content: "−"; }
#ll-arena-dronov-landing .drone-arena__faq-answer {
padding: 0 22px 20px;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,.7);
}
#ll-arena-dronov-landing .drone-arena__seo {
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,.55);
max-width: 880px;
}
#ll-arena-dronov-landing .drone-arena__seo p { margin: 0 0 14px; }
#ll-arena-dronov-landing .drone-arena__seo p:last-child { margin-bottom: 0; }
#ll-arena-dronov-landing .drone-arena__seo strong { color: rgba(255,255,255,.85); font-weight: 600; }
#ll-arena-dronov-landing .drone-arena__centers {
display: grid;
gap: 24px;
grid-template-columns: 1fr;
}
@container arena (min-width: 1000px) {
#ll-arena-dronov-landing .drone-arena__centers { grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: start; }
}
#ll-arena-dronov-landing .drone-arena__centers-map {
position: relative;
aspect-ratio: 4 / 3;
background:
radial-gradient(circle at 50% 60%, rgba(0,170,212,.18), transparent 70%),
repeating-linear-gradient(0deg, rgba(0,170,212,.08) 0 1px, transparent 1px 36px),
repeating-linear-gradient(90deg, rgba(0,170,212,.08) 0 1px, transparent 1px 36px),
#050a22;
border: 1px solid rgba(0,170,212,.2);
border-radius: 4px;
overflow: hidden;
}
#ll-arena-dronov-landing .drone-arena__centers-map-label {
position: absolute;
top: 16px; left: 16px;
background: rgba(4,8,26,.7);
padding: 8px 12px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255,255,255,.6);
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
}
#ll-arena-dronov-landing .drone-arena__centers-map-pin {
position: absolute;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--ll-cyan);
box-shadow: 0 0 0 4px rgba(0,170,212,.25), 0 0 18px var(--ll-cyan);
transform: translate(-50%,-50%);
}
#ll-arena-dronov-landing .drone-arena__centers-map-pin::after {
content: "";
position: absolute;
inset: -10px;
border: 1px dashed rgba(0,170,212,.4);
border-radius: 50%;
animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}
#ll-arena-dronov-landing .drone-arena__centers-list {
display: flex; flex-direction: column;
gap: 10px;
margin: 0; padding: 0; list-style: none;
}
#ll-arena-dronov-landing .drone-arena__center {
padding: 16px 18px;
background: linear-gradient(180deg, #0a1230, #06091e);
border: 1px solid rgba(255,255,255,.06);
border-radius: 4px;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 16px;
align-items: center;
}
#ll-arena-dronov-landing .drone-arena__center-name {
font-size: 16px;
font-weight: 700;
color: #fff;
margin: 0;
}
#ll-arena-dronov-landing .drone-arena__center-addr {
grid-column: 1 / -1;
font-size: 13px;
color: rgba(255,255,255,.6);
line-height: 1.4;
}
#ll-arena-dronov-landing .drone-arena__center-meta {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ll-cyan);
font-weight: 700;
}
#ll-arena-dronov-landing .drone-arena__center button {
grid-row: 1;
background: transparent;
border: 1px solid rgba(0,170,212,.4);
color: var(--ll-cyan);
padding: 8px 14px;
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
transition: background .2s, color .2s;
white-space: nowrap;
}
#ll-arena-dronov-landing .drone-arena__center button:hover { background: var(--ll-cyan); color: #00244a; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0 }
to { transform: translateY(0); opacity: 1 }
}
#ll-arena-dronov-landing .drone-arena__hero-media--composed {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
min-height: 320px;
overflow: visible;
background: radial-gradient(60% 60% at 50% 60%, rgba(0, 170, 212, 0.18), transparent 70%),
radial-gradient(45% 45% at 80% 30%, rgba(238, 49, 100, 0.14), transparent 70%);
}
#ll-arena-dronov-landing .drone-arena__hero-pilot {
position: absolute;
top: 0;
right: 0;
width: 60%;
max-width: 440px;
height: auto;
object-fit: contain;
object-position: top right;
z-index: 2;
filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45));
}
#ll-arena-dronov-landing .drone-arena__hero-drone {
position: absolute;
top: 8%;
left: -6%;
width: 56%;
max-width: 400px;
height: auto;
object-fit: contain;
z-index: 3;
filter: drop-shadow(0 18px 24px rgba(0, 170, 212, .45));
animation: drone-float 4.2s ease-in-out infinite;
will-change: transform;
transform-origin: 40% 60%;
}
@keyframes drone-float {
0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
25%      { transform: translate3d(-6px, -8px, 0) rotate(-1.5deg); }
50%      { transform: translate3d(0, -14px, 0) rotate(1.5deg); }
75%      { transform: translate3d(6px, -8px, 0) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
#ll-arena-dronov-landing .drone-arena__hero-drone { animation: none; }
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__hero-drone { animation: none; }
#ll-arena-dronov-landing .drone-arena__hero-media--composed { aspect-ratio: 4 / 3; min-height: 260px; }
#ll-arena-dronov-landing .drone-arena__hero-pilot { width: 54%; top: 0; right: 0; }
#ll-arena-dronov-landing .drone-arena__hero-drone { width: 52%; top: 8%; left: -2%; bottom: auto; }
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__section { padding: 40px 0; }
#ll-arena-dronov-landing .drone-arena__hero { padding: 56px 0 64px; }
#ll-arena-dronov-landing .drone-arena__benefits { gap: 10px; }
#ll-arena-dronov-landing .drone-arena__benefit { padding: 16px 16px; }
#ll-arena-dronov-landing .drone-arena__benefit-num { font-size: 28px; margin-bottom: 6px; }
#ll-arena-dronov-landing .drone-arena__benefit-title { font-size: 16px; margin-bottom: 4px; }
#ll-arena-dronov-landing .drone-arena__benefit-text { font-size: 13px; line-height: 1.4; }
#ll-arena-dronov-landing .drone-arena__h2 { font-size: 26px; margin-bottom: 10px; }
#ll-arena-dronov-landing .drone-arena__lead { font-size: 14px; margin-bottom: 18px; }
#ll-arena-dronov-landing .drone-arena__eyebrow { font-size: 11px; margin-bottom: 10px; }
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__formats {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
margin: 0 -20px;
padding: 4px 20px 20px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-padding: 0 20px;
}
#ll-arena-dronov-landing .drone-arena__formats::-webkit-scrollbar { display: none; }
#ll-arena-dronov-landing .drone-arena__format {
flex: 0 0 78%;
max-width: 320px;
scroll-snap-align: start;
padding: 18px;
}
#ll-arena-dronov-landing .drone-arena__format-title { font-size: 17px; }
#ll-arena-dronov-landing .drone-arena__format-text { font-size: 13px; line-height: 1.4; }
}
#ll-arena-dronov-landing .drone-arena__package .drone-arena__btn {
box-sizing: border-box;
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
white-space: normal;       
word-break: keep-all;
}
#ll-arena-dronov-landing .drone-arena__package .drone-arena__btn--block {
width: 100%;
}
#ll-arena-dronov-landing .drone-arena__package {
overflow: hidden;
box-sizing: border-box;
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__package { padding: 20px 18px 18px; }
#ll-arena-dronov-landing .drone-arena__package-title { font-size: 22px; }
#ll-arena-dronov-landing .drone-arena__package-list { gap: 6px; font-size: 13px; }
#ll-arena-dronov-landing .drone-arena__package .drone-arena__btn {
font-size: 13px;
padding: 12px 14px;
letter-spacing: 0.04em;
}
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__steps {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
margin: 0 -20px;
padding: 4px 20px 20px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-padding: 0 20px;
}
#ll-arena-dronov-landing .drone-arena__steps::-webkit-scrollbar { display: none; }
#ll-arena-dronov-landing .drone-arena__step {
flex: 0 0 78%;
max-width: 320px;
scroll-snap-align: start;
padding: 18px;
}
#ll-arena-dronov-landing .drone-arena__step-title { font-size: 16px; }
#ll-arena-dronov-landing .drone-arena__step-text { font-size: 13px; line-height: 1.4; }
}
#ll-arena-dronov-landing .drone-arena__split-media picture, #ll-arena-dronov-landing .drone-arena__split-media-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
#ll-arena-dronov-landing .drone-arena__split-media-photo {
object-fit: cover;
object-position: center center;     
}
#ll-arena-dronov-landing .drone-arena__split-media-photo[src*="racing"] { object-position: center bottom; }
#ll-arena-dronov-landing .drone-arena__split-media-photo[src*="solo"] { object-position: center 65%; }
#ll-arena-dronov-landing .drone-arena__split-media-photo[src*="birthday"] { object-position: center 30%; }
#ll-arena-dronov-landing .drone-arena__split-media-photo[src*="school"] { object-position: center 50%; }
#ll-arena-dronov-landing .drone-arena__split-media {
position: relative;
}
#ll-arena-dronov-landing .drone-arena__price-badge {
position: absolute;
right: 18px;
bottom: 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 12px 18px;
background: linear-gradient(135deg, var(--ll-orange), var(--ll-orange-deep, #f39200));
border-radius: 4px;
box-shadow:
0 10px 30px -8px rgba(255, 120, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
color: #fff;
z-index: 4;
pointer-events: none;
}
#ll-arena-dronov-landing .drone-arena__price-badge-label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
margin-bottom: 2px;
}
#ll-arena-dronov-landing .drone-arena__price-badge-value {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.01em;
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__price-badge { right: 10px; bottom: 10px; padding: 10px 14px; }
#ll-arena-dronov-landing .drone-arena__price-badge-value { font-size: 18px; }
}
#ll-arena-dronov-landing .drone-arena__section--packages > .drone-arena__container > .drone-arena__eyebrow, #ll-arena-dronov-landing .drone-arena__section--packages > .drone-arena__container > .drone-arena__h2, #ll-arena-dronov-landing .drone-arena__section--packages > .drone-arena__container > .drone-arena__lead {
text-align: center;
}
#ll-arena-dronov-landing .drone-arena__section--packages > .drone-arena__container > .drone-arena__eyebrow {
display: inline-flex;
width: 100%;
justify-content: center;
}
#ll-arena-dronov-landing .drone-arena__section--packages > .drone-arena__container > .drone-arena__lead {
margin-left: auto;
margin-right: auto;
}
#ll-arena-dronov-landing .drone-arena__packages { padding-top: 24px; }
#ll-arena-dronov-landing .drone-arena__package { overflow: visible !important; position: relative; }
#ll-arena-dronov-landing .drone-arena__package--featured { overflow: visible !important; }
#ll-arena-dronov-landing .drone-arena__package-badge {
position: absolute;
top: -16px;                      
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
z-index: 5;
box-shadow: 0 8px 20px -4px rgba(238, 49, 100, 0.45);
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__package-badge { top: -14px; }
}
#ll-arena-dronov-landing .drone-arena__gallery {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
margin: 0 -20px;          
padding: 4px 20px 28px;
scrollbar-width: thin;
scrollbar-color: rgba(0,170,212,.4) transparent;
-webkit-overflow-scrolling: touch;
scroll-padding: 0 20px;
grid-template-columns: none !important;   
grid-auto-rows: auto !important;
}
#ll-arena-dronov-landing .drone-arena__gallery::-webkit-scrollbar { height: 8px; }
#ll-arena-dronov-landing .drone-arena__gallery::-webkit-scrollbar-thumb {
background: rgba(0,170,212,.4);
border-radius: 4px;
}
#ll-arena-dronov-landing .drone-arena__gallery::-webkit-scrollbar-track { background: transparent; }
#ll-arena-dronov-landing .drone-arena__gallery-cell {
flex: 0 0 auto;
width: 440px;
aspect-ratio: 4 / 3 !important;
scroll-snap-align: start;
display: block;
}
#ll-arena-dronov-landing .drone-arena__gallery-cell--wide, #ll-arena-dronov-landing .drone-arena__gallery-cell--tall {
width: 440px;
grid-column: auto !important;
grid-row: auto !important;
}
#ll-arena-dronov-landing .drone-arena__gallery-cell img {
width: 100%;
height: 100%;
object-fit: cover;
}
@container arena (min-width: 1100px) {
#ll-arena-dronov-landing .drone-arena__gallery { padding: 4px 0 32px; margin: 0; }
#ll-arena-dronov-landing .drone-arena__gallery-cell, #ll-arena-dronov-landing .drone-arena__gallery-cell--wide, #ll-arena-dronov-landing .drone-arena__gallery-cell--tall { width: 480px; }
}
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__gallery-cell, #ll-arena-dronov-landing .drone-arena__gallery-cell--wide, #ll-arena-dronov-landing .drone-arena__gallery-cell--tall { width: 78%; max-width: 320px; }
}
#ll-arena-dronov-landing .drone-arena__centers-map--ya {
position: relative;
aspect-ratio: 4 / 3;
background: #050a22;                            
border: 1px solid rgba(0, 170, 212, 0.18);
border-radius: 4px;
overflow: hidden;
min-height: 360px;
}
#ll-arena-dronov-landing .drone-arena__centers-map--ya > * {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
}
#ll-arena-dronov-landing .drone-arena__centers-map--ya iframe {
border: 0;
display: block;
}
#ll-arena-dronov-landing .drone-arena__centers-map--ya .drone-arena__centers-map-label { display: none; }
@container arena (min-width: 1000px) {
#ll-arena-dronov-landing .drone-arena__centers-list {
max-height: 720px;
overflow-y: auto;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(0,170,212,.4) transparent;
}
#ll-arena-dronov-landing .drone-arena__centers-list::-webkit-scrollbar { width: 6px; }
#ll-arena-dronov-landing .drone-arena__centers-list::-webkit-scrollbar-thumb {
background: rgba(0,170,212,.4);
border-radius: 3px;
}
}
#ll-arena-dronov-landing .drone-arena__center {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"name btn"
"addr btn"
"page page";
align-items: center;
gap: 4px 12px;
padding: 14px 16px;
}
#ll-arena-dronov-landing .drone-arena__center-name { grid-area: name; }
#ll-arena-dronov-landing .drone-arena__center-meta { grid-area: addr; }
#ll-arena-dronov-landing .drone-arena__center-page { grid-area: page; font-size: 12px; }
#ll-arena-dronov-landing .drone-arena__center-btn {
grid-area: btn;
align-self: center;
padding: 10px 18px;
background: var(--ll-cyan);
color: #04081a;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s, transform 0.1s;
}
#ll-arena-dronov-landing .drone-arena__center-btn:hover { background: var(--ll-cyan-80); }
#ll-arena-dronov-landing .drone-arena__center-btn:active { transform: scale(0.97); }
@container arena (max-width: 759px) {
#ll-arena-dronov-landing .drone-arena__center {
grid-template-columns: 1fr;
grid-template-areas:
"name"
"addr"
"page"
"btn";
gap: 6px;
padding: 14px;
}
#ll-arena-dronov-landing .drone-arena__center-btn { width: 100%; text-align: center; padding: 12px 14px; }
}