html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* Tokeny dokumentuje design manuál /brand (Pages/Brand.razor.cs a wwwroot/brand/holec-ai-dark.md), při změně uprav i ty.
   Web je jen tmavý. Paleta pro papír a světlé podklady je samostatná, viz /brand/light. */
:root {
--font-body: "Geist", "Inter", system-ui, sans-serif;
--font-display: "Geist", "Inter", system-ui, sans-serif;
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
--container: 1120px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--color-bg: #101216;
--color-bg-gradient: linear-gradient(180deg, #101216 0%, #13161B 38%, #16181D 72%, #1A191C 100%);
--color-bg-menu: linear-gradient(165deg, #12151A 0%, #161A20 55%, #1D1A18 100%);
--color-header-bg: rgba(13, 15, 19, 0.78);
--color-text: #F7F3EE;
--color-text-secondary: #D2CAC0;
--color-text-muted: #A69D92;
--color-text-subtle: #7E766D;
--color-primary: #FFA67A;
--color-primary-hover: #FFC2A1;
--color-primary-strong: #F58A57;
--color-primary-deep: #C2643B;
--color-primary-soft: #FFE6D9;
--color-cta: #FFC940;
--color-cta-hover: #FFDA70;
--color-cta-strong: #FFA826;
--color-cta-text: #1B1405;
--color-success: #7FDCA0;
--color-warning: #F2C14E;
--color-error: #FF6B5B;
--color-live: #FF8A5C;
--color-surface: rgba(255, 244, 235, 0.045);
--color-surface-hover: rgba(255, 244, 235, 0.075);
--color-surface-strong: rgba(255, 244, 235, 0.11);
--color-border: rgba(255, 236, 222, 0.1);
--color-border-strong: rgba(255, 236, 222, 0.2);
--color-form-surface: linear-gradient(150deg, rgba(30, 34, 41, 0.88) 0%, rgba(17, 20, 25, 0.9) 100%);
--color-field-bg: #12161C;
--color-field-bg-focus: #171C24;
--color-field-border: #353D48;
--color-field-border-focus: #FFB08A;
--color-placeholder: #7E766D;
--color-form-divider: rgba(255, 236, 222, 0.08);
--gradient-brand: linear-gradient(100deg, #FFC940 0%, #FFA67A 48%, #F58A57 100%);
--shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.32);
--shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
--shadow-primary: 0 16px 40px rgba(245, 138, 87, 0.26);
--shadow-cta: 0 12px 32px rgba(255, 168, 38, 0.3);
--radius-card: 16px;
--radius-control: 12px;
--radius-small: 8px;
--rgb-primary: 255, 166, 122;
--rgb-primary-strong: 245, 138, 87;
--rgb-primary-deep: 194, 100, 59;
--rgb-cta: 255, 201, 64;
--rgb-success: 127, 220, 160;
--rgb-error: 255, 107, 91;
--rgb-live: 255, 138, 92;
--link-color: var(--color-primary);
}

@property --border-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}

.fa-solid, .fa-regular, .fa-brands {
opacity: 1;
filter: saturate(1.3) contrast(1.08) brightness(1.06) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

.ico-grand-check {
color: var(--color-success);
text-shadow: 0 0 18px rgba(var(--rgb-success), 0.35);
}

.ico-shield {
color: #7AA7FF;
text-shadow: 0 0 22px rgba(122, 167, 255, 0.45);
}

.fa-check {
color: var(--color-success);
text-shadow: 0 0 18px rgba(var(--rgb-success), 0.35);
}

.fa-star {
color: var(--color-cta);
text-shadow: 0 0 20px rgba(var(--rgb-cta), 0.4);
}

#cta {
position: absolute;
visibility: hidden;
margin-top: -80px;
}

html {
scroll-padding-top: 6rem;
scrollbar-color: rgba(255, 236, 222, 0.2) transparent;
-webkit-text-size-adjust: 100%;

&::after {
content: "";
position: absolute;
top: 4.5rem;
right: 0;
z-index: -1;
width: 576px;
height: 574px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='576' height='574' viewBox='0 0 576 574' fill='none'%3E%3Cpath d='M467.65 5L515.29 32.5L515.29 87.5L467.65 115L420.02 87.5L420.02 32.5Z' fill='%23C9AE8E' fill-opacity='0.06' stroke='%23C9AE8E' stroke-opacity='0.2'/%3E%3Cpath d='M431.73 39.26l0 48.4M437.71 42.71l0 48.4M443.7 46.17l0 48.4M449.69 49.63l0 48.4M455.68 53.09l0 48.4M461.67 56.54l0 48.4M467.65 66.91l41.92 -24.2M467.65 73.83l41.92 -24.2M467.65 80.74l41.92 -24.2M467.65 87.66l41.92 -24.2M467.65 94.57l41.92 -24.2M467.65 101.49l41.92 -24.2M431.73 32.34l41.92 24.2M437.71 28.89l41.92 24.2M443.7 25.43l41.92 24.2M449.69 21.97l41.92 24.2M455.68 18.51l41.92 24.2M461.67 15.06l41.92 24.2' stroke='%23D8BE9C' stroke-opacity='0.36' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M415.69 95L463.32 122.5L463.32 177.5L415.69 205L368.06 177.5L368.06 122.5Z' fill='%23E6E2DC' fill-opacity='0.09' stroke='%23E6E2DC' stroke-opacity='0.126'/%3E%3Cpath d='M519.62 95L567.25 122.5L567.25 177.5L519.62 205L471.98 177.5L471.98 122.5Z' fill='%23B9B4AE' fill-opacity='0.09' stroke='%23B9B4AE' stroke-opacity='0.126'/%3E%3Cpath d='M363.73 185L411.36 212.5L411.36 267.5L363.73 295L316.1 267.5L316.1 212.5Z' fill='%23C9AE8E' fill-opacity='0.14' stroke='%23C9AE8E' stroke-opacity='0.196'/%3E%3Cpath d='M467.65 185L515.29 212.5L515.29 267.5L467.65 295L420.02 267.5L420.02 212.5Z' fill='%23E6E2DC' fill-opacity='0.09' stroke='%23E6E2DC' stroke-opacity='0.126'/%3E%3Cpath d='M311.77 275L359.4 302.5L359.4 357.5L311.77 385L264.14 357.5L264.14 302.5Z' fill='%23B9B4AE' fill-opacity='0.09' stroke='%23B9B4AE' stroke-opacity='0.126'/%3E%3Cpath d='M415.69 275L463.32 302.5L463.32 357.5L415.69 385L368.06 357.5L368.06 302.5Z' fill='%23C9AE8E' fill-opacity='0.06' stroke='%23C9AE8E' stroke-opacity='0.2'/%3E%3Cpath d='M379.76 309.26l0 48.4M385.75 312.71l0 48.4M391.74 316.17l0 48.4M397.73 319.63l0 48.4M403.72 323.09l0 48.4M409.7 326.54l0 48.4M415.69 336.91l41.92 -24.2M415.69 343.83l41.92 -24.2M415.69 350.74l41.92 -24.2M415.69 357.66l41.92 -24.2M415.69 364.57l41.92 -24.2M415.69 371.49l41.92 -24.2M379.76 302.34l41.92 24.2M385.75 298.89l41.92 24.2M391.74 295.43l41.92 24.2M397.73 291.97l41.92 24.2M403.72 288.51l41.92 24.2M409.7 285.06l41.92 24.2' stroke='%23D8BE9C' stroke-opacity='0.36' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M259.81 365L307.44 392.5L307.44 447.5L259.81 475L212.18 447.5L212.18 392.5Z' fill='%23E6E2DC' fill-opacity='0.09' stroke='%23E6E2DC' stroke-opacity='0.126'/%3E%3Cpath d='M363.73 365L411.36 392.5L411.36 447.5L363.73 475L316.1 447.5L316.1 392.5Z' fill='%23C9AE8E' fill-opacity='0.14' stroke='%23C9AE8E' stroke-opacity='0.196'/%3E%3Cpath d='M311.77 455L359.4 482.5L359.4 537.5L311.77 565L264.14 537.5L264.14 482.5Z' fill='%23B9B4AE' fill-opacity='0.09' stroke='%23B9B4AE' stroke-opacity='0.126'/%3E%3Cg fill='%23D8BE9C' fill-opacity='0.3'%3E%3Cpath transform='translate(395.69 130.0) scale(1.6667)' d='M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02 5.937 22.02.939 18.492.078 16.997A.641.641 0 0 1 0 16.741v-2.869a.883.883 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.098 10.098 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98c2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.841.841 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256Zm-11.75-5.992h-.344a4.359 4.359 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492-1.725 0-2.989-.359-3.782-1.259a2.137 2.137 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.359 4.359 0 0 1-.355-.508Zm2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm3.313-6.185c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z'/%3E%3Cpath transform='translate(499.62 130.0) scale(1.6667)' d='m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z'/%3E%3Cpath transform='translate(447.65 220.0) scale(1.6667)' fill-rule='evenodd' d='M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z'/%3E%3C/g%3E%3C/svg%3E") right top / contain no-repeat;
mask-image: linear-gradient(205deg, #000000 40%, transparent 92%);
-webkit-mask-image: linear-gradient(205deg, #000000 40%, transparent 92%);
opacity: 0.45;
pointer-events: none;

@media (max-width: 768px) {
top: 4rem;
width: 300px;
height: 299px;
opacity: 0.3;
}
}
}

body {
overflow-x: hidden;
min-height: 100vh;
padding: 20px;
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.75;
color: var(--color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: var(--color-bg-gradient);
background-color: var(--color-bg);

&::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='103.92' viewBox='0 0 60 103.92'%3E%3Cpath d='M0 17.32L30 0L60 17.32M0 17.32V51.96L30 69.28L60 51.96V17.32M30 69.28V103.92' fill='none' stroke='%23FFECDE' stroke-opacity='0.055' stroke-width='1'/%3E%3C/svg%3E");
background-position: center top;
background-size: 60px 103.92px;
mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000000 0%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000000 0%, transparent 78%);
pointer-events: none;
}

&::after {
content: "";
position: fixed;
top: -25vh;
left: -15vw;
z-index: -2;
width: 130vw;
height: 100vh;
background: radial-gradient(38% 48% at 74% 32%, rgba(var(--rgb-primary-strong), 0.2) 0%, transparent 70%), radial-gradient(32% 42% at 18% 22%, rgba(var(--rgb-cta), 0.1) 0%, transparent 70%), radial-gradient(28% 36% at 52% 64%, rgba(122, 140, 255, 0.06) 0%, transparent 70%);
animation: aurora-drift 28s ease-in-out infinite alternate;
pointer-events: none;
}
}

::selection {
color: var(--color-text);
background: rgba(var(--rgb-primary-strong), 0.4);
}

:focus-visible {
outline: 2px solid var(--color-cta);
outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.03em;
text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, p {
margin-top: 2rem;
}

p {
text-wrap: pretty;
}

strong {
font-weight: 700;
}

code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.92em;
}

/* Textový odkaz: bez podtržení, po najetí se linka protáhne zleva doprava a odjede doprava.
   Karty, navigace a ikonové odkazy linku vypínají přes background: none. Odkaz s ikonou
   posune začátek linky za ikonu pomocí --link-underline-offset. */
a {
color: var(--link-color);
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
transition: color 0.2s ease, background-size 0.3s var(--ease-out);

&:where(:hover, :focus-visible) {
color: var(--color-primary-hover);
background-position: var(--link-underline-offset, 0%) 100%;
background-size: calc(100% - var(--link-underline-offset, 0%)) 1px;
}
}

a:has(> img) {
background: none;
}

.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
overflow: hidden;
isolation: isolate;
padding: 0.75rem 1.4rem;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-cta-text);
text-decoration: none;
text-shadow: none;
letter-spacing: -0.005em;
background: linear-gradient(135deg, var(--color-cta) 0%, var(--color-cta-strong) 100%);
border: 1px solid rgba(var(--rgb-cta), 0.9);
border-radius: var(--radius-control);
box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease, border-color 0.2s ease;
cursor: pointer;

&::after {
content: "";
position: absolute;
top: 0;
left: -80%;
z-index: -1;
width: 55%;
height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
transform: skewX(-20deg);
transition: left 0.7s var(--ease-out);
pointer-events: none;
}

&:hover, &:active {
color: var(--color-cta-text);
background: linear-gradient(135deg, var(--color-cta-hover) 0%, var(--color-cta) 100%);
border: 1px solid rgba(var(--rgb-cta), 1);
box-shadow: 0 18px 44px rgba(var(--rgb-cta), 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}

&:hover::after {
left: 130%;
}

&:active {
transform: translateY(0);
}

&:disabled {
opacity: 0.6;
transform: none;
cursor: progress;
}
}

.button.outline {
color: var(--color-cta);
background: rgba(var(--rgb-cta), 0.04);
border: 1px solid rgba(var(--rgb-cta), 0.6);
box-shadow: none;

&:hover, &:active {
color: var(--color-cta-text);
background: linear-gradient(135deg, var(--color-cta) 0%, var(--color-cta-strong) 100%);
border: 1px solid var(--color-cta);
box-shadow: var(--shadow-cta);
}
}

.button.secondary {
color: var(--color-primary-soft);
background: linear-gradient(135deg, rgba(var(--rgb-primary), 0.18) 0%, rgba(var(--rgb-primary-strong), 0.22) 100%);
border: 1px solid rgba(var(--rgb-primary), 0.5);
box-shadow: 0 10px 24px rgba(var(--rgb-primary), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);

&:hover, &:active {
color: var(--color-text);
background: linear-gradient(135deg, rgba(var(--rgb-primary), 0.3) 0%, rgba(var(--rgb-primary-strong), 0.36) 100%);
border: 1px solid rgba(var(--rgb-primary), 0.75);
box-shadow: var(--shadow-primary);
}
}

.conquer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;

@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 0;

.youtube:first-of-type {
margin-bottom: 1rem;
}
}
}

.youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
border-radius: 14px;
box-shadow: 0 0 0 1px var(--color-border), 0 20px 50px rgba(0, 0, 0, 0.4);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;

iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 14px;
}
}

.conquer .youtube:hover {
box-shadow: 0 0 0 1px rgba(var(--rgb-primary), 0.4), 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--rgb-primary-strong), 0.15);
transform: translateY(-3px);
}

.youtube.M1 {
padding-bottom: 65%;
}

.statcounter {
display: none;
}

header, main, nav, footer, .main-content {
box-sizing: border-box;
width: 100%;
max-width: var(--container);
margin: auto;
}

.site-header {
position: sticky;
top: 0;
z-index: 1000;
box-sizing: border-box;
width: calc(100% + 40px);
max-width: none;
margin: -20px -20px 20px;
padding: 0 20px;

&::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-header-bg);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
}

.header-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-sizing: border-box;
max-width: var(--container);
min-height: 4.5rem;
margin: 0 auto;
padding: 0.9rem 0;
}

.header-brand {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 2.5rem;
padding-left: 3.2rem;

a {
display: flex;
align-items: center;
font-family: var(--font-display);
font-size: 1.12rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
letter-spacing: -0.03em;
background: none;

&::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 2.5rem;
height: 2.5rem;
background: url("./miroslav-holec.png") center 25% / cover no-repeat;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3.5px rgba(var(--rgb-primary-strong), 0.85), 0 6px 18px rgba(0, 0, 0, 0.4);
transform: translateY(-50%);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

&:hover {
color: var(--color-primary-hover);
}

&:hover::before {
box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3.5px var(--color-cta), 0 8px 22px rgba(var(--rgb-primary-strong), 0.4);
transform: translateY(-50%) scale(1.05);
}
}
}

.brand-subtitle {
display: flex;
align-items: center;
margin-top: 0.2rem;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
line-height: 1.2;
color: var(--color-text-muted);
letter-spacing: 0.02em;
}

.header-menu {
display: flex;
align-items: center;
gap: 0.2rem;
margin: 0;
padding: 0;
font-size: 0.95rem;
list-style: none;

li a {
display: block;
padding: 0.45rem 0.8rem;
font-family: var(--font-display);
font-weight: 500;
line-height: 1.4;
color: var(--color-text-secondary);
letter-spacing: -0.01em;
background: none;
border: 1px solid transparent;
border-radius: 10px;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

&:hover {
color: var(--color-text);
background: var(--color-surface-hover);
}

&.active {
color: var(--color-text);
background: rgba(var(--rgb-primary), 0.12);
border-color: rgba(var(--rgb-primary), 0.28);
box-shadow: inset 0 0 14px rgba(var(--rgb-primary), 0.08);
}
}

li a.header-menu-plus:not(.active) {
color: var(--color-primary);
background: rgba(var(--rgb-primary), 0.07);
border-color: rgba(var(--rgb-primary), 0.18);

&:hover {
color: var(--color-primary-hover);
background: rgba(var(--rgb-primary), 0.15);
border-color: rgba(var(--rgb-primary), 0.35);
}
}

}

.hamburger {
position: relative;
z-index: 1001;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 2.6rem;
height: 2.6rem;
padding: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 11px;
transition: background 0.2s ease, border-color 0.2s ease;
cursor: pointer;

&:hover {
background: var(--color-surface-hover);
border-color: var(--color-border-strong);
}
}

.hamburger-line {
display: block;
width: 18px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transform-origin: center;
transition: transform 0.35s var(--ease-out), opacity 0.2s ease;
}

.hamburger.is-active .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}

.hamburger.is-active .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

.menu-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: none;
width: 100%;
height: 100%;
background: rgba(5, 6, 8, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);

&.is-visible {
display: block;
animation: fade-in 0.3s ease both;
}
}

section {
padding-bottom: 4rem;
}

section h1 {
font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.04em;
}

section h2 {
padding-bottom: 0.5rem;
font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
line-height: 1.2;
}

section ul li i {
margin-right: 0.45rem;
margin-left: 2px;
}

section.hero {
position: relative;
padding-top: 2.5rem;
padding-bottom: 2rem;

> div {
max-width: 560px;
margin-bottom: 2rem;

@media (max-width: 768px) {
max-width: none;
margin-bottom: 0;
}
}

> div:first-child > * {
animation: rise-in 0.8s var(--ease-out) both;
}

> div:first-child > :nth-child(2) {
animation-delay: 0.08s;
}

> div:first-child > :nth-child(3) {
animation-delay: 0.16s;
}

> div:first-child > :nth-child(n + 4) {
animation-delay: 0.24s;
}

h1 {
font-weight: 500;
color: var(--color-text-secondary);
}

p {
font-size: 1.12rem;
line-height: 1.75;
color: var(--color-text-secondary);
}

p.explanation {
font-size: 0.9rem;
line-height: 1.7;
color: var(--color-text-muted);
}
}

div.news-container > div.info {
h1 {
font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.25rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.04em;
}

> p {
font-size: 1.12rem;
color: var(--color-text-secondary);
}
}

section.hero h1 small, div.news-container > div.info h1 small {
display: flex;
align-items: center;
gap: 0.55rem;
width: fit-content;
margin-bottom: 1.1rem;
padding: 0.3rem 0.8rem;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-primary-hover);
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(var(--rgb-primary), 0.08);
border: 1px solid rgba(var(--rgb-primary), 0.24);
border-radius: 999px;

&::before {
content: "//";
content: "//" / "";
color: var(--color-cta);
letter-spacing: 0;
}
}

section.hero h1 strong, div.news-container > div.info h1 strong {
font-weight: 700;
color: transparent;
background: linear-gradient(100deg, var(--color-cta) 0%, var(--color-primary) 30%, var(--color-primary-strong) 55%, var(--color-primary) 78%, var(--color-cta) 100%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-pan 9s linear infinite;
}

section.hero:not(.article-hero) h1::after {
content: "";
display: inline-block;
width: 0.08em;
height: 0.82em;
margin-left: 0.14em;
vertical-align: -0.06em;
background: var(--color-cta);
border-radius: 2px;
box-shadow: 0 0 14px rgba(var(--rgb-cta), 0.7);
animation: caret-blink 1.1s steps(1, end) infinite;
}

section.hero.video {
display: grid;
grid-template-columns: 10fr 8fr;
align-items: center;
column-gap: 3rem;

@media (max-width: 1000px) {
grid-template-columns: 1fr;
}

> div:nth-of-type(2) {
margin-top: 1.5rem;
}
}

section.hero > div:has(> .youtube) {
position: relative;
max-width: none;
padding: 2.1rem 0.5rem 0.5rem;
background: linear-gradient(180deg, rgba(32, 36, 44, 0.92) 0%, rgba(18, 21, 26, 0.92) 100%);
border: 1px solid var(--color-border-strong);
border-radius: 18px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 70px rgba(var(--rgb-primary-strong), 0.14);
animation: rise-in 0.9s var(--ease-out) 0.15s both;

&::before {
content: "";
position: absolute;
top: 0.8rem;
left: 0.95rem;
width: 0.6rem;
height: 0.6rem;
background: var(--color-error);
border-radius: 50%;
box-shadow: 1rem 0 0 var(--color-cta), 2rem 0 0 var(--color-success);
opacity: 0.85;
}

&::after {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
background: conic-gradient(from var(--border-angle), transparent 0deg, rgba(var(--rgb-cta), 0.9) 50deg, rgba(var(--rgb-primary-strong), 0.6) 90deg, transparent 140deg, transparent 360deg);
border-radius: inherit;
mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
-webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
animation: border-spin 7s linear infinite;
pointer-events: none;
}

.youtube {
border-radius: 12px;
box-shadow: none;

iframe {
border-radius: 12px;
}
}
}

section.events {
ul {
display: grid;
margin-top: 1rem;
padding: 0.4rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);
}

ul li {
position: relative;
display: grid;
grid-template-columns: 1.1rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.3rem 0.75rem;
padding: 0.7rem 1rem;
line-height: 1.5;
border-radius: 10px;
transition: background 0.2s ease;

&:hover, &:has(a:focus-visible) {
background: var(--color-surface-hover);
}

&:hover a {
color: var(--color-primary-hover);
}

& + li::before {
content: "";
position: absolute;
top: 0;
left: 1rem;
right: 1rem;
border-top: 1px dashed var(--color-form-divider);
pointer-events: none;
transition: opacity 0.2s ease;
}

&:hover::before, &:has(a:focus-visible)::before, &:hover + li::before, &:has(a:focus-visible) + li::before {
opacity: 0;
}
}

ul li i {
margin: 0;
color: var(--color-primary);
}

ul li a {
font-weight: 500;
background: none;

&::after {
content: "";
position: absolute;
inset: 0;
}
}

ul li span {
justify-self: end;
padding: 0.15rem 0.65rem;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--color-text-muted);
white-space: nowrap;
background: rgba(255, 244, 235, 0.03);
border: 1px solid var(--color-border);
border-radius: 999px;

@media screen and (max-width: 520px) {
grid-column: 2;
justify-self: start;
}
}

@media screen and (max-width: 520px) {
ul li {
grid-template-columns: 1.1rem minmax(0, 1fr);
}
}
}

section.me {
background-image: url("./img/copilot-certified.png");
background-repeat: no-repeat;
background-position: 100% 50px;
background-size: 28%;

@media (max-width: 950px) {
background-image: none;
}

p {
margin-top: 0;
color: var(--color-text-secondary);
}

h2 + p {
margin-top: 0.5rem;
}

> div {
max-width: 660px;
}

div div.photo {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1.75rem;
margin-top: 2.5rem;

@media only screen and (max-width: 520px) {
grid-template-columns: 1fr;
}
}

div div.photo img {
width: 140px;
height: 140px;
padding: 4px;
object-fit: cover;
background: conic-gradient(from 200deg, var(--color-cta), var(--color-primary-strong), var(--color-primary-deep), var(--color-cta));
border-radius: 50%;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 40px rgba(var(--rgb-primary-strong), 0.25);

@media only screen and (max-width: 520px) {
display: none;
}
}

div div.photo ul li {
padding: 0.15rem 0;
}

div div.photo div span {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.5rem;
margin-top: 1rem;
font-weight: 600;
}

div div.photo div span a {
margin-right: 0.75rem;
}
}

section.reference {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
max-width: none;

@media (max-width: 900px) {
grid-template-columns: 1fr;
}

> h2 {
grid-column: 1 / -1;
margin-bottom: 0.25rem;
}

> div {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.25rem;
isolation: isolate;
padding: 1.5rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);

&::before {
content: "\201C";
content: "\201C" / "";
display: block;
height: 1.6rem;
font-family: var(--font-display);
font-size: 3.6rem;
font-weight: 700;
line-height: 1;
color: var(--color-primary);
opacity: 0.85;
}

&::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, -20%), rgba(var(--rgb-primary), 0.12) 0%, transparent 60%);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

&:hover::after {
opacity: 1;
}

p {
flex-grow: 1;
margin-top: 0;
font-size: 0.98rem;
line-height: 1.7;
color: var(--color-text-secondary);
}

span {
padding-top: 1rem;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--color-text-muted);
border-top: 1px dashed var(--color-form-divider);

i {
margin-right: 1px;
font-size: 0.8rem;
}

i:nth-child(5) {
margin-right: 10px;
}
}
}
}

section.freetext {
max-width: 780px;

@media (max-width: 768px) {
max-width: 100%;
}

h1 {
margin-bottom: 1rem;
}

h2, h3 {
margin: 1rem 0 0.5rem 0;
padding: 0;
}

h3 {
font-size: 1.2rem;
font-weight: 600;
}

p {
margin: 0 0 2rem 0;
color: var(--color-text-secondary);
}

ul {
margin-bottom: 2rem;
margin-left: 2rem;

@media (max-width: 520px) {
margin-left: 0;
}
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
margin-bottom: 2rem;

img {
width: 100%;
border-radius: 12px;
}
}
}

section.form {
position: relative;
display: grid;
grid-template-columns: 3fr 2fr;
margin-top: 3rem;
margin-bottom: 6rem;
padding: 2.5rem 2rem;
background: var(--color-form-surface);
border: 1px solid rgba(var(--rgb-primary), 0.2);
border-radius: 20px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);

&::before {
content: "";
position: absolute;
top: -1px;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--rgb-cta), 0.9) 35%, rgba(var(--rgb-primary-strong), 0.9) 65%, transparent 100%);
box-shadow: 0 0 18px rgba(var(--rgb-cta), 0.6);
pointer-events: none;
}

@media (max-width: 950px) {
grid-template-columns: 1fr;
}

@media (max-width: 768px) {
margin: 0 -8px;
padding: 1.75rem 1.25rem;
border-radius: 16px;
}

form div {
position: relative;
display: inline-block;
margin-right: 1rem;

.validation-message {
position: absolute;
top: 20px;
right: 0;
display: flex;
margin: 0;
}

.vop {
display: flex;
margin: 0.35rem 0 0 1.7rem;
}
}

form label {
display: block;
margin-top: 1rem;
padding: 0 0 4px 2px;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-secondary);
letter-spacing: 0.01em;
}

form label.required::after {
content: " *";
color: var(--color-error);
}

form input, form textarea, form select {
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.85rem 1rem;
font-family: var(--font-body);
font-size: var(--rz-body-font-size, inherit);
color: var(--color-text);
background: var(--color-field-bg);
border: var(--color-field-border) 1px solid;
border-radius: var(--radius-control);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
transition: border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

&:hover {
border-color: #4A5361;
}
}

form textarea {
min-height: 7rem;
resize: vertical;
}

form input::placeholder, form textarea::placeholder {
color: var(--color-placeholder);
opacity: 1;
}

form input[type=checkbox] {
display: inline;
width: auto;
margin-right: 0;
padding: 0;
accent-color: var(--color-cta);
}

form input[type=checkbox] + label {
display: inline;
margin-top: 0;
}

form input:focus, form textarea:focus, form select:focus {
outline: none;
background: var(--color-field-bg-focus);
border: var(--color-field-border-focus) 1px solid;
box-shadow: 0 0 0 4px rgba(var(--rgb-primary), 0.14), 0 0 24px rgba(var(--rgb-primary-strong), 0.12);
}

/* Rozbalovací seznam: kde prohlížeč umí appearance: base-select, má vlastní tmavou nabídku.
   Jinde zůstává nativní nabídka (tmavá díky color-scheme) a pole dostane jen vlastní šipku. */
form:not(.admin-layout *) select {
font-variant-numeric: tabular-nums;
color-scheme: dark;
cursor: pointer;

@supports not (appearance: base-select) {
-webkit-appearance: none;
appearance: none;
padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A69D92' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: right 1rem center;
background-size: 1rem 1rem;
background-repeat: no-repeat;

&:hover, &:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23FFA67A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
}

@supports (appearance: base-select) {
display: flex;
align-items: center;
gap: 0.75rem;
appearance: base-select;
line-height: normal;

&::picker-icon {
flex-shrink: 0;
width: 1rem;
height: 1rem;
content: "";
color: var(--color-text-muted);
background: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: color 0.2s ease, rotate 0.3s var(--ease-out);
}

&:hover::picker-icon, &:focus-visible::picker-icon {
color: var(--color-primary);
}

&:open {
background-color: var(--color-field-bg-focus);
border-color: var(--color-field-border-focus);
box-shadow: 0 0 0 4px rgba(var(--rgb-primary), 0.14), 0 0 24px rgba(var(--rgb-primary-strong), 0.12);

&::picker-icon {
color: var(--color-primary);
rotate: 180deg;
}
}

&::picker(select) {
appearance: base-select;
margin: 0.5rem 0;
padding: 0.3rem;
color: var(--color-text);
background: var(--color-field-bg-focus);
border: 1px solid var(--color-field-border);
border-radius: var(--radius-control);
box-shadow: var(--shadow-card);
transition: opacity 0.2s ease, translate 0.3s var(--ease-out);

@starting-style {
opacity: 0;
translate: 0 -6px;
}
}

option {
gap: 0.75rem;
padding: 0.65rem 0.7rem;
color: var(--color-text-secondary);
border-radius: var(--radius-small);
transition: background-color 0.2s ease, color 0.2s ease;
cursor: pointer;

&:hover, &:focus-visible {
outline: none;
color: var(--color-text);
background: var(--color-surface-hover);
}

&:checked {
font-weight: 600;
color: var(--color-text);
background: rgba(var(--rgb-primary), 0.1);
}

&::checkmark {
order: 1;
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin-left: auto;
content: "";
color: var(--color-primary);
background: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
}
}
}

form button {
margin-top: 1.25rem;
padding: 0.85rem 1.6rem;
border-radius: var(--radius-control);
cursor: pointer;
}

form h2 {
margin-top: 0;
font-size: 1.6rem;
}

div.info {
padding-left: 2rem;
border-left: var(--color-form-divider) 1px solid;

@media (max-width: 950px) {
margin-top: 2rem;
padding-top: 2rem;
padding-left: 0;
border-top: var(--color-form-divider) 1px solid;
border-left: 0;
}

ul li {
padding: 0.2rem 0;
color: var(--color-text-secondary);
}

i {
margin-right: 0.45rem;
}

.day {
margin: 0 0 1rem 0;
font-weight: 700;
}

.price {
margin-left: 0;
font-family: var(--font-display);
font-size: 2.2rem;
font-weight: 700;
line-height: 1;
color: var(--color-cta);
letter-spacing: -0.04em;
text-shadow: 0 0 30px rgba(var(--rgb-cta), 0.35);

span:not(.early-bird-badge) {
margin: 0;
padding: 0;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: 0;
text-shadow: none;
}

.early-bird-badge {
display: inline-flex;
align-items: center;
margin-left: 0.35rem;
padding: 0.1rem 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
color: var(--color-primary-hover);
white-space: nowrap;
vertical-align: middle;
letter-spacing: 0;
text-shadow: none;
background: rgba(var(--rgb-primary), 0.12);
border: 1px solid rgba(var(--rgb-primary), 0.3);
border-radius: 999px;
}

.pay {
max-width: 100%;
margin-top: 20px;
margin-left: -15px;
}
}
}
}

/* Tlumená validace: pole podtrhne jemná červená vlnovka jako varování v IDE a vedle popisku je tichá nápověda.
   Při psaní vlnovka ustoupí focusu a po úpravě pole js/forms.js nastaví data-resolved, takže nápověda zmizí. */
:is(.validation-message, .vop):not(.admin-layout *) {
display: flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
line-height: 1.3;
color: color-mix(in srgb, var(--color-error) 65%, var(--color-text-muted));
letter-spacing: 0.01em;
transition: opacity 0.3s ease, translate 0.3s var(--ease-out);
animation: hint-in 0.4s var(--ease-out) 0.15s backwards;

&::before {
content: "";
flex-shrink: 0;
width: 0.8rem;
height: 0.8rem;
background: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.6 1.9A1.6 1.6 0 0 1 9.4 1.9L15.3 12.5A1.6 1.6 0 0 1 13.9 15H2.1A1.6 1.6 0 0 1 0.7 12.5ZM8 5.2A0.9 0.9 0 0 0 7.1 6.1V9.4A0.9 0.9 0 0 0 8.9 9.4V6.1A0.9 0.9 0 0 0 8 5.2ZM8 11.3A1 1 0 1 0 8 13.3A1 1 0 1 0 8 11.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.6 1.9A1.6 1.6 0 0 1 9.4 1.9L15.3 12.5A1.6 1.6 0 0 1 13.9 15H2.1A1.6 1.6 0 0 1 0.7 12.5ZM8 5.2A0.9 0.9 0 0 0 7.1 6.1V9.4A0.9 0.9 0 0 0 8.9 9.4V6.1A0.9 0.9 0 0 0 8 5.2ZM8 11.3A1 1 0 1 0 8 13.3A1 1 0 1 0 8 11.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
}

[data-resolved] :is(.validation-message, .vop) {
opacity: 0;
translate: 0 -3px;
pointer-events: none;
}

form:not(.admin-layout *) :is(input, textarea, select)[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='4'%3E%3Cdefs%3E%3Cpattern id='w' width='8' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 2Q2 0 4 2T8 2' fill='none' stroke='%23E07C6E' stroke-opacity='0.7' stroke-width='1.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='4' fill='url(%23w)'/%3E%3C/svg%3E"), linear-gradient(0deg, rgba(var(--rgb-error), 0.05) 0%, transparent 60%);
background-position: left 14px bottom 5px, left bottom;
background-size: calc(100% - 28px) 4px, 100% 100%;
background-repeat: no-repeat;
animation: squiggle-draw 0.7s var(--ease-out) 0.1s backwards;

&:focus, &[data-resolved] {
background-image: none;
}
}

form:not(.admin-layout *) input[type="checkbox"][aria-invalid="true"] {
outline: 2px solid rgba(var(--rgb-error), 0.45);
outline-offset: 2px;

&[data-resolved] {
outline: none;
}
}

.site-footer {
position: relative;
isolation: isolate;
overflow: hidden;
margin: 2rem auto 2.5rem;
padding: 0 2.5rem;
font-size: 0.9rem;
line-height: 1.6;
color: var(--color-text-muted);
background: linear-gradient(90deg, transparent 0%, rgba(var(--rgb-cta), 0.75) 35%, rgba(var(--rgb-primary-strong), 0.75) 65%, transparent 100%) center top / 70% 1px no-repeat, linear-gradient(180deg, rgba(25, 28, 34, 0.92) 0%, rgba(17, 19, 24, 0.95) 100%);
border: 1px solid var(--color-border);
border-radius: 24px;
box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.04);

&::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='103.92' viewBox='0 0 60 103.92'%3E%3Cpath d='M0 17.32L30 0L60 17.32M0 17.32V51.96L30 69.28L60 51.96V17.32M30 69.28V103.92' fill='none' stroke='%23FFECDE' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E");
background-position: right top;
background-size: 60px 103.92px;
mask-image: radial-gradient(ellipse 50% 90% at 100% 0%, #000000 0%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse 50% 90% at 100% 0%, #000000 0%, transparent 85%);
pointer-events: none;
}

&::after {
content: "";
position: absolute;
top: -45%;
left: -15%;
z-index: -1;
width: 65%;
height: 130%;
background: radial-gradient(closest-side, rgba(var(--rgb-primary-strong), 0.13) 0%, transparent 100%);
pointer-events: none;
}

@media (max-width: 768px) {
padding: 0 1.25rem;
border-radius: 18px;
}
}

.footer-top {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(3, auto);
gap: 2.25rem 3.5rem;
padding: 2.75rem 0 2.5rem;

@media (max-width: 950px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 520px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1.25rem;
padding: 2rem 0;
}
}

.footer-contact {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 1.25rem;

> img {
width: 64px;
height: 64px;
padding: 2px;
object-fit: cover;
background: linear-gradient(135deg, var(--color-cta) 0%, var(--color-primary-strong) 100%);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(var(--rgb-primary), 0.07), 0 10px 30px rgba(var(--rgb-primary-strong), 0.25);
}

h2 {
margin-top: 0.35rem;
font-size: 1.55rem;
color: var(--color-text);
}

p {
max-width: 28rem;
margin-top: 0.5rem;
font-size: 0.95rem;
color: var(--color-text-secondary);
}

@media (max-width: 950px) {
grid-column: 1 / -1;
}

@media (max-width: 520px) {
grid-template-columns: 1fr;
gap: 1rem;

> img {
width: 56px;
height: 56px;
}
}
}

.footer-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.75rem;
margin-top: 1.4rem;

.button {
padding: 0.7rem 1.4rem;
}
}

.footer-contact-links {
display: grid;
gap: 0.3rem;

a {
--link-underline-offset: 1.55rem;
display: inline-flex;
align-items: center;
justify-self: start;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: 0.88rem;
color: var(--color-text-secondary);

i {
width: 1rem;
color: var(--color-primary);
}

&:hover {
color: var(--color-primary-hover);
}

&[href^="tel:"]:hover i {
animation: phone-ring 0.6s ease-in-out;
}
}
}

.footer-links > p, .footer-partners > p {
margin: 0;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
line-height: 1.4;
color: var(--color-text-subtle);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.14em;
}

.footer-links {
width: auto;
margin: 0;
padding-top: 0.4rem;

> p {
margin-bottom: 1rem;
}

ul {
display: grid;
gap: 0.5rem;
}

a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--color-text-secondary);
white-space: nowrap;

i {
width: 1rem;
color: var(--color-text-subtle);
transition: color 0.2s ease;
}

&:has(> i) {
--link-underline-offset: 1.55rem;
}

&:hover {
color: var(--color-text);
}

&:hover i {
color: var(--color-primary);
}
}
}

.footer-social {
@media (max-width: 520px) {
grid-column: 1 / -1;

ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
}
}

.footer-partners {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 2rem;
margin: 0 -2.5rem;
padding: 1.1rem 2.5rem;
background: rgba(0, 0, 0, 0.16);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);

@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 0.85rem;
margin: 0 -1.25rem;
padding: 1rem 1.25rem;
}
}

.footer-marquee {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, #000000 7%, #000000 93%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 7%, #000000 93%, transparent 100%);

@media (prefers-reduced-motion: reduce) {
mask-image: none;
-webkit-mask-image: none;
}
}

.footer-marquee-track {
display: flex;
width: max-content;
animation: footer-marquee 50s linear infinite;

&:hover {
animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
width: auto;
animation: none;
}
}

.footer-logos {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 3rem;
padding-right: 3rem;

img {
height: 22px;
opacity: 0.5;
filter: grayscale(1) brightness(1.4);
transition: opacity 0.3s ease, filter 0.3s ease;

&:hover {
opacity: 1;
filter: grayscale(0) brightness(1.1);
}
}

@media (prefers-reduced-motion: reduce) {
flex-wrap: wrap;
gap: 1rem 2.25rem;
padding-right: 0;

&[aria-hidden] {
display: none;
}
}
}

.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.75rem;
padding: 1.15rem 0 1.25rem;
font-size: 0.8rem;
color: var(--color-text-subtle);

@media (max-width: 768px) {
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
}
}

.footer-donation {
display: inline-flex;
align-items: center;
gap: 0.35rem;

i {
color: #FF6B81;
opacity: 0.85;
animation: heartbeat 2.4s ease-in-out infinite;
}

a {
color: var(--color-text-secondary);

&:hover {
color: var(--color-text);
}
}
}

.footer-payments {
height: 22px;
margin-left: auto;
opacity: 0.6;
filter: grayscale(1);
transition: opacity 0.3s ease, filter 0.3s ease;

&:hover {
opacity: 1;
filter: none;
}

@media (max-width: 768px) {
margin-left: 0;
}
}

.footer-version {
font-family: var(--font-mono);
font-size: 0.68rem;
white-space: nowrap;
opacity: 0.45;
}

@keyframes aurora-drift {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(-3vw, 2vh, 0) scale(1.06);
}
100% {
transform: translate3d(2vw, -1vh, 0) scale(1.02);
}
}

@keyframes rise-in {
from {
opacity: 0;
translate: 0 18px;
}
to {
opacity: 1;
translate: none;
}
}

@keyframes reveal-up {
from {
opacity: 0;
translate: 0 28px;
}
to {
opacity: 1;
translate: none;
}
}

@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes gradient-pan {
from {
background-position: 0% 50%;
}
to {
background-position: 220% 50%;
}
}

@keyframes caret-blink {
0%, 55% {
opacity: 1;
}
56%, 100% {
opacity: 0;
}
}

@keyframes border-spin {
to {
--border-angle: 360deg;
}
}

@keyframes status-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}

@keyframes hint-in {
from {
opacity: 0;
translate: 0 3px;
}
}

@keyframes squiggle-draw {
from {
background-size: 0 4px, 100% 0;
}
}

@keyframes heartbeat {
0%, 70%, 100% {
transform: scale(1);
}
78% {
transform: scale(1.18);
}
86% {
transform: scale(1);
}
92% {
transform: scale(1.12);
}
}

@keyframes footer-marquee {
to {
transform: translateX(-50%);
}
}

@keyframes phone-ring {
0%, 100% {
transform: rotate(0);
}
20%, 60% {
transform: rotate(-14deg);
}
40%, 80% {
transform: rotate(14deg);
}
}

@keyframes aurora-dim {
to {
opacity: 0.55;
}
}

@keyframes hex-parallax {
to {
translate: 0 270px;
}
}

@supports (animation-timeline: scroll()) {
body::after {
animation: aurora-drift 28s ease-in-out infinite alternate, aurora-dim linear both;
animation-timeline: auto, scroll(root block);
animation-range: normal, 0 900px;
}

@media (prefers-reduced-motion: no-preference) {
html::after {
animation: hex-parallax linear both;
animation-timeline: scroll(root block);
animation-range: 0 900px;
}
}
}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
main > section:not(.hero) > h2, section.events ul, section.me div.photo, section.reference > div, section.form, .conquer .youtube {
animation: reveal-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 22%;
}
}
}

@media screen and (max-width: 900px) {
.brand-subtitle {
display: none;
}
}

@media screen and (max-width: 768px) {
.header-nav {
min-height: 4rem;
padding: 0.7rem 0;
}

.hamburger {
display: flex;
}

.header-menu {
position: fixed;
top: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
overflow-y: auto;
width: min(320px, 86vw);
height: 100vh;
height: 100dvh;
padding: 5.5rem 1.25rem 1.5rem;
box-sizing: border-box;
background: var(--color-bg-menu);
border-left: 1px solid var(--color-border);
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
transform: translateX(100%);
transition: transform 0.45s var(--ease-out);

li {
opacity: 0;
transform: translateX(18px);
transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}

li a {
padding: 0.8rem 1rem;
font-size: 1.1rem;
}
}

.header-menu.is-open {
transform: translateX(0);

li {
opacity: 1;
transform: none;
}

li:nth-child(2) {
transition-delay: 0.05s;
}

li:nth-child(3) {
transition-delay: 0.1s;
}

li:nth-child(4) {
transition-delay: 0.15s;
}

li:nth-child(5) {
transition-delay: 0.2s;
}

li:nth-child(n + 6) {
transition-delay: 0.25s;
}
}

section {
padding-bottom: 3rem;
}
}

@media only screen and (max-width: 520px) {
body {
font-size: 1rem;
}

h1 {
font-size: 1.85rem !important;
overflow-wrap: break-word;
}

h2 {
font-size: 1.35rem !important;
}

h3 {
font-size: 1.12rem !important;
}

.button {
padding: 0.7rem 1.1rem;
font-size: 0.95rem;
}

header {
padding-bottom: 1rem;
}

section {
padding-bottom: 2.25rem;
}

section.hero {
padding-top: 1.25rem;
}

.header-brand {
padding-left: 2.9rem;

a {
font-size: 1.05rem;
}

a::before {
width: 2.25rem;
height: 2.25rem;
}
}
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}