/*🐿️ CSS: (Flex12-3D) / Ardilla-CMS /  https://github.com/rullan-ardilla/flex12-3D © TM͡๏̯͡๏ rullan.in.ua --[19.07.2026]  2.17rem or 34.7px 
| ☘ R O O T | ---- corner-shape: bevel; -----| */
/* === FONT FIX (correct path) === */
@font-face {font-family: 'Handjet'; src: url('/0-templates/acess/font/all/Handjet-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap;}
@font-face {font-family: 'Tektur'; src: url('/0-templates/acess/font/all/Tektur-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap;}
/* =========================
   1. ROOT
========================= */
:root {
--neon: #50e2db;
--azure: #02d9ff;
--blue: #3a7bd5;
--purple: #703ad5;
--black: #272a30;
--rad:  0;

/* Dark */
--c-dark: rgba(26, 29, 32, 1);
--c-dark-80: rgba(26, 29, 32, 0.8);
--c-dark-60: rgba(26, 29, 32, 0.6);
--c-dark-40: rgba(26, 29, 32, 0.4);
--c-dark-20: rgba(26, 29, 32, 0.25);
--c-dark-10: rgba(26, 29, 32, 0.1);
/* Gray */
--c-gray: rgba(148, 162, 176, 1);
--c-gray-80: rgba(148, 162, 176, 0.8);
--c-gray-60: rgba(148, 162, 176, 0.6);
--c-gray-40: rgba(148, 162, 176, 0.4);
--c-gray-20: rgba(148, 162, 176, 0.25);
--c-gray-10: rgba(148, 162, 176, 0.1);

/* White */
--c-white: rgba(255, 255, 255, 1);
--c-white-80: rgba(255, 255, 255, 0.85);
--c-white-60: rgba(255, 255, 255, 0.6);
--c-white-40: rgba(255, 255, 255, 0.4);
--c-white-20: rgba(255, 255, 255, 0.2);
--c-white-10: rgba(255, 255, 255, 0.1);

/* Biruz */
--c-biruz: rgba(22, 128, 153, 1);
--c-biruz-80: rgba(22, 128, 153, 0.8);
--c-biruz-60: rgba(22, 128, 153, 0.6);
--c-biruz-40: rgba(22, 128, 153, 0.4);
--c-biruz-20: rgba(22, 128, 153, 0.2);
--c-biruz-10: rgba(22, 128, 153, 0.1);

/* Blue */
--c-blue: rgba(2, 217, 255, 1);
--c-blue-80: rgba(2, 217, 255, 0.8);
--c-blue-60: rgba(2, 217, 255, 0.6);
--c-blue-40: rgba(2, 217, 255, 0.4);
--c-blue-20: rgba(2, 217, 255, 0.2);
--c-blue-10: rgba(2, 217, 255, 0.1);

/* Red */
--c-red: rgba(255, 76, 76, 1);
--c-red-80: rgba(255, 76, 76, 0.8);
--c-red-60: rgba(255, 76, 76, 0.6);
--c-red-40: rgba(255, 76, 76, 0.4);
--c-red-20: rgba(255, 76, 76, 0.2);
--c-red-10: rgba(255, 76, 76, 0.1);

/* Yellow */
--c-yellow: rgba(255, 193, 7, 1);
--c-yellow-80: rgba(255, 193, 7, 0.8);
--c-yellow-60: rgba(255, 193, 7, 0.6);
--c-yellow-40: rgba(255, 193, 7, 0.4);
--c-yellow-20: rgba(255, 193, 7, 0.2);
--c-yellow-10: rgba(255, 193, 7, 0.1);

/* Green */
--c-green: rgba(40, 199, 111, 1);
--c-green-80: rgba(40, 199, 111, 0.8);
--c-green-60: rgba(40, 199, 111, 0.6);
--c-green-40: rgba(40, 199, 111, 0.4);
--c-green-20: rgba(40, 199, 111, 0.2);
--c-green-10: rgba(40, 199, 111, 0.1);

/* Purple */
--c-purple: rgba(124, 77, 255, 1);
--c-purple-80: rgba(124, 77, 255, 0.8);
--c-purple-60: rgba(124, 77, 255, 0.6);
--c-purple-40: rgba(124, 77, 255, 0.4);
--c-purple-20: rgba(124, 77, 255, 0.2);
--c-purple-10: rgba(124, 77, 255, 0.1);

--gapb1: 22.07px; --gapb2: 28.07px; --gapb3: 35.71px; --gapb4: 45.42px; --gapb5: 57.77px; --gapb6: 73.48px; --gapb7: 93.47px; 
--gap: 17.35px; 
--gapm1: 13.64px; --gapm2: 10.72px; --gapm3: 8.43px; --gapm4: 6.62px; --gapm5: 5.20px; --gapm6: 4px; --gapm7: 3.22px;
--col-1: 8.3333%; --col-2: 16.6667%; --col-3: 25%; --col-4: 33.3333%; --col-5: 41.6667%; --col-6: 50%; --col-7: 58.3333%; --col-8: 66.6667%; --col-9: 75%; --col-10: 83.3333%; --col-11: 91.6667%; --col-12: 100%;
--gap-1: calc(var(--gap) / 2); --gap-2: calc((2 * var(--gap)) / 3); --gap-3: calc((3 * var(--gap)) / 4); --gap-4: calc((4 * var(--gap)) / 5); --gap-5: calc((5 * var(--gap)) / 6); --gap-6: calc((6 * var(--gap)) / 7); --gap-7: calc((7 * var(--gap)) / 8); --gap-8: calc((8 * var(--gap)) / 9); --gap-9: calc((9 * var(--gap)) / 10); --gap-10: calc((10 * var(--gap)) / 11); --gap-11: calc((11 * var(--gap)) / 12);

}

.s0 {background: linear-gradient(135deg, var(--c-white-10), var(--c-white-20));}
.s1 {background: linear-gradient(135deg, var(--c-gray-80), var(--c-gray-20));}
.s2 {background: linear-gradient(135deg, var(--c-dark-80), var(--c-dark-20));}
.s3 {background: linear-gradient(135deg, var(--c-red-80), var(--c-red-20));}
.s4 {background: linear-gradient(135deg, var(--c-blue-80), var(--c-blue-20));}
.s5 {background: linear-gradient(135deg, var(--c-purple-80), var(--c-purple-20));}
.s6 {background: linear-gradient(135deg, var(--c-biruz-80), var(--c-biruz-20));}
.s7 {background: linear-gradient(135deg, var(--c-green-80), var(--c-green-20));}
.s8 {background: linear-gradient(135deg, var(--c-yellow-80), var(--c-yellow-20));}

/* =========================
  Fractional Gap Grid 
========================= */
.col-100, [class^="col-"] {width: 100%;}
/* 2. Rows with 2 elements (subtract --gap-1) */
.col-1-11 > .c-1  {width: calc(var(--col-1)  - var(--gap-1));}
.col-1-11 > .c-11 {width: calc(var(--col-11) - var(--gap-1));}
.col-2-10 > .c-2  {width: calc(var(--col-2)  - var(--gap-1));}
.col-2-10 > .c-10 {width: calc(var(--col-10) - var(--gap-1));}
.col-3-9  > .c-3  {width: calc(var(--col-3)  - var(--gap-1));}
.col-3-9  > .c-9  {width: calc(var(--col-9)  - var(--gap-1));}
.col-4-8  > .c-4  {width: calc(var(--col-4)  - var(--gap-1));}
.col-4-8  > .c-8  {width: calc(var(--col-8)  - var(--gap-1));}
.col-5-7  > .c-5  {width: calc(var(--col-5)  - var(--gap-1));}
.col-5-7  > .c-7  {width: calc(var(--col-7)  - var(--gap-1));}
.col-6-6  > .c-6  {width: calc(var(--col-6)  - var(--gap-1));}
/*
.col-1-1-1-9 > .c-1, .col-1-1-2-8 > .c-1, .col-1-1-3-7 > .c-1, .col-1-1-4-6 > .c-1, .col-1-1-5-5 > .c-1, .col-1-2-2-7 > .c-1, .col-1-2-3-6 > .c-1, .col-1-2-4-5 > .c-1, .col-1-3-3-5 > .c-1, .col-1-3-4-4 > .c-1 {width: calc(var(--col-1) - var(--gap-3));}
.col-1-1-10 > .c-1, .col-1-2-9 > .c-1, .col-1-3-8 > .c-1, .col-1-4-7 > .c-1, .col-1-5-6 > .c-1 {width: calc(var(--col-1) - var(--gap-2));}
.col-1-1-1-1-8 > .c-1, .col-1-1-1-2-7 > .c-1, .col-1-1-1-3-6 > .c-1, .col-1-1-1-4-5 > .c-1, .col-1-1-2-2-6 > .c-1, .col-1-1-2-3-5 > .c-1, .col-1-1-2-4-4 > .c-1, .col-1-1-3-3-3 > .c-1 {width: calc(var(--col-1) - var(--gap-4));}
.col-1-1-1-2-7 > .c-2, .col-1-1-2-2-6 > .c-2, .col-1-1-2-3-5 > .c-2, .col-1-2-2-2-5 > .c-2, .col-1-2-2-3-4 > .c-2 {width: calc(var(--col-2) - var(--gap-4));}
.col-1-1-1-3-6 > .c-3, .col-1-1-2-3-5 > .c-3, .col-1-1-3-3-3 > .c-3, .col-1-2-2-3-4 > .c-3, .col-1-2-3-3-3 > .c-3 {width: calc(var(--col-3) - var(--gap-4));}
.col-1-1-1-4-5 > .c-4, .col-1-1-2-4-4 > .c-4, .col-1-2-2-3-4 > .c-4 {width: calc(var(--col-4) - var(--gap-4));}
.col-1-1-1-4-5 > .c-5, .col-1-1-2-3-5 > .c-5, .col-1-2-2-2-5 > .c-5 {width: calc(var(--col-5) - var(--gap-4));}
.col-1-1-2-8 > .c-2, .col-1-2-2-7 > .c-2, .col-1-2-3-6 > .c-2, .col-1-2-4-5 > .c-2 {width: calc(var(--col-2) - var(--gap-3));}
.col-1-1-5-5 > .c-5, .col-1-2-4-5 > .c-5, .col-1-3-3-5 > .c-5 {width: calc(var(--col-5) - var(--gap-3));}
.col-1-1-1-1-1-7 > .c-1 {width: calc(var(--col-1) - var(--gap-5));}
.col-1-1-1-1-1-7 > .c-7 {width: calc(var(--col-7) - var(--gap-5));}
*/
/* 3. Rows with 3 elements (subtract --gap-2) */
.col-1-2-9 > .c-2, .col-2-2-8 > .c-2, .col-2-3-7 > .c-2, .col-2-4-6 > .c-2, .col-2-5-5 > .c-2 {width: calc(var(--col-2) - var(--gap-2));}
.col-1-3-8 > .c-3, .col-2-3-7 > .c-3, .col-3-3-6 > .c-3, .col-3-4-5 > .c-3 {width: calc(var(--col-3) - var(--gap-2));}
.col-1-4-7 > .c-4, .col-2-4-6 > .c-4, .col-3-4-5 > .c-4, .col-4-4-4 > .c-4 {width: calc(var(--col-4) - var(--gap-2));}
.col-1-5-6 > .c-5, .col-2-5-5 > .c-5, .col-3-4-5 > .c-5 {width: calc(var(--col-5) - var(--gap-2));}
.col-1-5-6 > .c-6, .col-2-4-6 > .c-6, .col-3-3-6 > .c-6 {width: calc(var(--col-6) - var(--gap-2));}
.col-1-4-7 > .c-7, .col-2-3-7 > .c-7 {width: calc(var(--col-7) - var(--gap-2));}
.col-1-3-8 > .c-8, .col-2-2-8 > .c-8 {width: calc(var(--col-8) - var(--gap-2));}
.col-1-2-9 > .c-9 {width: calc(var(--col-9) - var(--gap-2));}
.col-1-1-10 > .c-10 {width: calc(var(--col-10) - var(--gap-2));}
/* 4. Rows with 4 elements (subtract --gap-3) */
.col-2-2-2-6 > .c-2, .col-2-2-3-5 > .c-2, .col-2-2-4-4 > .c-2, .col-2-3-3-4 > .c-2 {width: calc(var(--col-2) - var(--gap-3));}
.col-1-1-3-7 > .c-3, .col-1-2-3-6 > .c-3, .col-1-3-3-5 > .c-3, .col-2-2-3-5 > .c-3, .col-2-3-3-4 > .c-3, .col-3-3-3-3 > .c-3 {width: calc(var(--col-3) - var(--gap-3));}
.col-1-1-4-6 > .c-4, .col-1-2-4-5 > .c-4, .col-1-3-4-4 > .c-4, .col-2-2-4-4 > .c-4, .col-2-3-3-4 > .c-4 {width: calc(var(--col-4) - var(--gap-3));}
.col-2-2-3-5 > .c-5 {width: calc(var(--col-5) - var(--gap-3));}
.col-1-1-4-6 > .c-6, .col-1-2-3-6 > .c-6, .col-2-2-2-6 > .c-6 {width: calc(var(--col-6) - var(--gap-3));}
.col-1-1-3-7 > .c-7, .col-1-2-2-7 > .c-7 {width: calc(var(--col-7) - var(--gap-3));}
.col-1-1-2-8 > .c-8 {width: calc(var(--col-8) - var(--gap-3));}
.col-1-1-1-9 > .c-9 {width: calc(var(--col-9) - var(--gap-3));}
/* 5. Rows with 5 elements (subtract --gap-4) */
.col-2-2-2-2-4 > .c-2, .col-2-2-2-3-3 > .c-2 {width: calc(var(--col-2) - var(--gap-4));}
.col-2-2-2-3-3 > .c-3 {width: calc(var(--col-3) - var(--gap-4));}
.col-2-2-2-2-4 > .c-4 {width: calc(var(--col-4) - var(--gap-4));}
/* 6. Rows with 6 elements (subtract --gap-5) */
.col-2-2-2-2-2-2 > .c-2 {width: calc(var(--col-2) - var(--gap-5));}
/* 7. ALIGN  */
.order-1 {order: 1;} .order-2 {order: 2;} .order-3 {order: 3;} .order-4 {order: 4;} .order-5 {order: 5;} .order-6 {order: 6;}
[class^="row-"], .row{display:flex; flex-flow: row wrap; width:100%; justify-content: space-between; gap:var(--gap);}
.row-s  {justify-content: flex-start;}
.row-sc  {justify-content: flex-start;align-items: center;}
.row-c  {justify-content: center;}
.row-cc  {justify-content: center;align-items: center;}
.row-e  {justify-content: flex-end;}
.row-sa {justify-content: space-around;}
.row-as  {align-items: flex-start;}
.row-ac  {align-items: center;}
.row-ae  {align-items: flex-end;}
.row-at {align-items: stretch;}
.row-reverse {flex-direction: row-reverse;}
.nowrap, .row.nowrap {flex-wrap: nowrap;}
/*-----------------------
.div-3-kolonku{flex: 1 1 calc(33.333% - var(--gap));} 
------------------------ */

/* =========================
   9. HELPERS
========================= */
.radius {border-radius:var(--gapm1); corner-shape: bevel;}
.radius-1 {border-radius: var(--gapm1) 0 var(--gapm1) 0; corner-shape: bevel;}
.radius-2 {border-radius: 0 var(--gapm1) 0 var(--gapm1); corner-shape: bevel;}
.radius-t {border-radius: var(--gapm1) var(--gapm1) 0 0; corner-shape: bevel;}
.radius-b {border-radius: 0 0 var(--gapm1) var(--gapm1); corner-shape: bevel;}

.w-100 {width: 100%;}
.h-100 {height: 100%;}
.a-center {text-align: center;width:100%;vertical-align: baseline;}
.hidden, .nodispl, .wiewnot {display:none;}
.rel, .relative {position:relative;}
/* =========================
   10. DIRECTION
========================= */
[class^="str-"], .clear {min-width:100%;max-width:100%;height:1px;display:block;position:relative;float:none;clear: both;}
.str-1 {height: var(--gap);}.str-2 {height: calc(2 * var(--gap));}.str-3 {height: calc(3 * var(--gap));}.str-4 {height: calc(4 * var(--gap));}.str-5{height: calc(5 * var(--gap));}.str-6{height: calc(6 * var(--gap));}


/* end| R O O T  ----------------------- */

/*-------------------------------------- */

/* ⏰  29.01.2026 - CSS-grid: (Flex12-3D)
|  ☘ R E S E T | --------------------------------------------- */
html {margin:0; padding:0;}
body {padding:0;margin:0; line-height: 1; color:var(--text); font-family: 'Tektur', monospace; font-optical-sizing: auto; font-size:12px; letter-spacing: .04em; font-weight: 400; min-height: 100vh;  overflow-x: hidden;}
div, section, header, article, main, aside, footer, #video-fon, button, nav, ol, ul, li, a, s, u, i, sup, sub, span, input, textarea, *::before, *::after {max-width:100%; border-style: none; -webkit-box-sizing:border-box;-moz-box-sizing:border-box; box-sizing:border-box;margin:0; padding:0;}
figure, iframe{width:100%;max-width:100%;padding:0; margin:0;}
table {caption-side: bottom;border-collapse: collapse; font-size: 16px; color:gray;}
caption {padding-top: 0.5rem;padding-bottom: 0.5rem;color: var(--c-biruz);text-align: left;}
th {text-align: inherit;text-align: -webkit-match-parent;}
tbody, tfoot, tr, td, th {border-color: inherit;border-style: solid;border-width: 0;}
thead{background: var(--c-blue-20);}
td, th {border-bottom: 1px solid gray; padding:8px 10px;}
tr:nth-child(even){background: rgba(101, 140, 184, 0.1);}
tr:hover {background: rgba(33, 77, 111, 0.1);}
s{text-decoration:none;font-style:normal;margin:0;}
img {max-width:100%;}
h1, h2, h3, h4, h5, h6, .big-zag {color:var(--text); text-transform: uppercase; line-height:1; -webkit-box-sizing:border-box; box-sizing:border-box;
font-family: "Handjet", Tahoma, Arial, sans-serif; font-weight: 300; letter-spacing: .04em;display:inline-block; margin:0;padding:0; text-decoration:none;}
h1{font-size:2.6em;}
h2{font-size:2.4em;}
h3{font-size:2.2em;}
h4{font-size:2.0em;}
h5{font-size:1.9em;}
h6{font-size:1.8em;}
.text-left   {text-align: left;}
.text-center {text-align: center;}
.text-right  {text-align: right;}

p {text-align:justify; margin:0 0 var(--gapm1) 0; font-size: 14px; line-height: 1.4; letter-spacing: .07em;}
b, strong{font-weight:700;}
.quote {position:relative; margin: var(--gapm1) 0; line-height:1.3; font-weight:100; padding: var(--gapm1) 0  var(--gapm1) var(--gap); quotes: "\201c" "\201d" "\2018" "\2019"; font-size:1.1em; font-style: italic;border-left: 2px solid var(--c-red);}
.quote::before {content: open-quote;font-size:3em; color:var(--c-red); position:absolute; top:-3px; left:-1px;}
.quote::after {content: close-quote;font-size:3em; color:var(--c-red); position:absolute; bottom:-10px; right:10px;height:28px;}
.quote-v2 {quotes: "\00AB\00A0" "\00A0\00BB";}
.code-label {padding: 8px 20px;font-size: 11px;font-weight: 800;color: var(--c-blue-60);background: rgba(255, 255, 255, 0.8);border-bottom: 1px solid gray;text-transform: uppercase;letter-spacing: 2px;display: flex;align-items: center;gap: 12px;font-family: 'Handjet', sans-serif;}
.code-label .icon {width: 16px;height: 16px;}
pre.blockkod {margin: 0;padding: var(--gapm3);overflow-x: auto;background-color: rgba(248, 250, 252, 0.5); background-image: linear-gradient(rgba(0, 150, 255, 0.03) 1px, transparent 1px),    linear-gradient(90deg, rgba(0, 150, 255, 0.03) 1px, transparent 1px);background-size: 8px 8px;position: relative;}
pre.blockkod code {font-family: "Consolas", "Monaco", monospace;font-size: 11px;color: #1a202c;line-height: 1.4;position: relative;z-index: 1;}
pre.blockkod code::selection {background: var(--c-blue-20);color: var(--c-biruz);}
a {display: inline-block;color:var(--c-biruz-80); text-decoration:none;}
p > a::before{content: '→'; color: inherit; font-size:12px; margin-right:4px; }
a:hover, button:hover {color:var(--c-purple-80); cursor:pointer;}
a:not([href]):not([class]), a:not([href]):not([class]):hover {color: inherit;text-decoration: none;}
hr {margin: var(--gapm1) 0; height:1px; background-color: #eee; border: 0;opacity: 0.9;}
select, textarea, input {background:var(--bg-input); color:var(--text); position:relative; font-size:14px; font-weight: 400; letter-spacing: 1px; border: 1px solid var(--br-gray); padding:var(--gapm2); border-radius: var(--gapm3); corner-shape: bevel;  display: inline-block; line-height:1;}
textarea {height: auto; margin: 0; overflow: auto; vertical-align: top; resize: vertical;}
textarea:focus, select:active, select:focus, .uneditable-input:focus, input:focus, input:active,
input:target, input:focus-visible {outline: none;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;}
/* приховуємо стрілочки вверх вниз */
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
label {position:relative; display: inline-flex; gap:var(--gap); align-items: center; cursor: pointer; user-select: none;  padding: 5px;}
input[type="checkbox"] {appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: var(--gapm4); corner-shape: bevel; position: relative; cursor: pointer; border: 1px solid gray; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); margin: 0; background: var(--c-gray-10); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box;}
input[type="checkbox"]:checked {background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-biruz) 100%); border-color: transparent; box-shadow: 0 3px 6px rgba(2, 217, 255, 0.35);}
input[type="checkbox"]:checked::after {content: '✓'; display: block; position: absolute; left:5px; top: 4px; font-size: 13px; line-height: 1;}
select{padding:6px 16px 6px 6px;}
select option {border: none; outline: none;}
ul, ol{list-style: none; margin:var(--gapm1) 0; padding:0 0 0 var(--gapm1);}
li{padding:var(--gapm1) 0 4px var(--gapm1); line-height: 1.2; letter-spacing: 1px;position: relative;}
ul li::after {content:''; width:12px; height:12px; border: 1px solid var(--c-biruz-40); position: absolute;  left: 0px; top:12px; 
padding: 2px; background-clip: content-box; transform-origin: top left; transform: rotate(45deg);}
ol{counter-reset: list;}
ol li::after {content: counter(list); counter-increment: list; color: var(--c-biruz-40); position: absolute; left: -5px; top: 10px;}
.texkontyr {text-shadow: #1a202c 1px 1px 0, #1a202c -1px -1px 0, #1a202c -1px 1px 0, #1a202c 1px -1px 0;}
.texkontyr-m {text-shadow: 0px 1px 1px #1a202c;}
.section{width: 1980px; max-width: 1980px;  margin:0 auto;}
/* end| R E S E T  ----- corner-shape: bevel; --------------------- */

/* 3-D transform */
.scaleleft {transform: perspective(120px) rotateY(6deg) skewX(0.0deg) scale(1.0, 0.9);}
.video-fon {position: fixed;top: 0; left: 0;right: 0; bottom: 0; width: 100%; height: 100%;  object-fit: cover; z-index: -1; }

.left-3d-m {transform: perspective(1000px) rotateY(-27deg); transition: transform 0.6s ease;}