/* ALDECO — styl verejnej stranky.
   Vytiahnute z home.php 2026-08-21: 28 KB CSS sa posielalo v KAZDEJ odpovedi
   znova, hoci statika ma `expires 1y, immutable`. Verziu drzi ASSET_V
   v application/config/constants.php — pri zmene vzhladu ju treba zdvihnut. */

		@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/asset/fonts/web/Inter-Light.woff2') format('woff2')}
		@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/asset/fonts/web/Inter-Regular.woff2') format('woff2')}
		@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/asset/fonts/web/Inter-Medium.woff2') format('woff2')}
		@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/asset/fonts/web/Inter-SemiBold.woff2') format('woff2')}
		@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/asset/fonts/web/Inter-Bold.woff2') format('woff2')}
		@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/asset/fonts/web/Inter-ExtraBold.woff2') format('woff2')}

		:root {
			--c-bg: #0f172a;
			--c-surface: #1e293b;
			--c-surface2: #172033;
			--c-border: rgba(255,255,255,0.08);
			--c-accent: #10b981;
			--c-accent2: #059669;
			--c-accent-soft: rgba(16,185,129,0.15);
			--c-text: #ffffff;
			--c-text-muted: rgba(255,255,255,0.65);
			--c-text-dim: rgba(255,255,255,0.4);
			--c-card-hover-shadow: rgba(0,0,0,0.4);
			--c-success: #10b981;
			--font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
		}

		html.light {
			--c-bg: #ffffff;
			--c-surface: #f8fafc;
			--c-surface2: #f1f5f9;
			--c-border: #e2e8f0;
			--c-accent-soft: rgba(16,185,129,0.07);
			--c-text: #0f172a;
			--c-text-muted: #475569;
			--c-text-dim: #64748b;
			--c-card-hover-shadow: rgba(16,185,129,0.12);
			--c-success: #059669;
		}

		*{margin:0;padding:0;box-sizing:border-box}

		body {
			font-family: var(--font);
			background: var(--c-bg);
			color: var(--c-text);
			line-height: 1.6;
			overflow-x: hidden;
		}

		/* ===== NAVBAR ===== */
		.navbar-main {
			position: fixed;
			top: 0; left: 0; right: 0;
			z-index: 1000;
			padding: 1rem 0;
			transition: all 0.35s ease;
			background: transparent;
		}
		.navbar-main.scrolled {
			background: rgba(15,23,42,0.92);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			box-shadow: 0 1px 30px rgba(0,0,0,0.25);
			padding: 0.5rem 0;
			border-bottom: 1px solid var(--c-border);
		}
		.nav-logo {
			height: 38px;
			/* Bez `width:auto` si prehliadac vezme sirku z HTML atributu a logo
			   sa vodorovne stlaci — obrazok ma pomer 7,78:1, atributy hovorili
			   3,5:1. Oprava 2026-08-21. */
			width: auto;
			transition: all 0.3s ease;
		}
		.nav-logo:hover { transform: scale(1.03); }
		.nav-logo-light {
			filter: brightness(0) invert(1);
		}
		.nav-logo-light:hover {
			filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(16,185,129,0.5));
		}
		.nav-logo-dark { display: none; }
		.nav-logo-dark:hover {
			filter: drop-shadow(0 0 12px rgba(16,185,129,0.5));
		}
		.nav-links {
			list-style: none;
			display: flex;
			gap: 1.8rem;
			margin: 0; padding: 0;
			align-items: center;
		}
		.nav-links a {
			color: rgba(255,255,255,0.75);
			text-decoration: none;
			font-size: 0.9rem;
			font-weight: 500;
			transition: color 0.3s ease;
			position: relative;
			letter-spacing: 0.2px;
		}
		.nav-links a::after {
			content: '';
			position: absolute;
			bottom: -4px; left: 0;
			width: 0; height: 2px;
			background: linear-gradient(90deg,var(--c-accent),var(--c-accent2));
			transition: width 0.3s ease;
		}
		.nav-links a:hover { color: #fff; }
		.nav-links a:hover::after { width: 100%; }
		.btn-intranet {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			padding: 0.55rem 1.3rem;
			background: linear-gradient(135deg,var(--c-accent),var(--c-accent2));
			color: #fff !important;
			border: none;
			border-radius: 10px;
			font-weight: 600;
			font-size: 0.85rem;
			text-decoration: none;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(16,185,129,0.3);
		}
		.btn-intranet:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(16,185,129,0.45);
			color: #fff;
		}
		.btn-intranet::after { display: none; }

		/* Lang + Theme controls */
		.lang-switcher {
			background: rgba(255,255,255,0.08);
			border: 1px solid rgba(255,255,255,0.15);
			color: #fff;
			border-radius: 6px;
			padding: 0.3rem 0.4rem;
			font-size: 0.82rem;
			font-family: var(--font);
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
			appearance: none;
			-webkit-appearance: none;
			text-align: center;
			min-width: 46px;
		}
		.lang-switcher:hover, .lang-switcher:focus {
			background: rgba(255,255,255,0.15);
			border-color: var(--c-accent);
			outline: none;
		}
		.lang-switcher option { background: var(--c-surface); color: #fff; }

		.btn-theme-landing {
			background: rgba(255,255,255,0.08);
			border: 1px solid rgba(255,255,255,0.15);
			color: rgba(255,255,255,0.75);
			border-radius: 6px;
			padding: 0.35rem 0.5rem;
			cursor: pointer;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
		}
		.btn-theme-landing:hover { background: rgba(255,255,255,0.15); color: #fff; }
		.btn-theme-landing::after { display: none; }
		.btn-theme-landing .t-sun,
		.btn-theme-landing .t-moon { display: none; }
		html:not(.light) .btn-theme-landing .t-sun { display: block; }
		html.light .btn-theme-landing .t-moon { display: block; }

		/* Mobile nav */
		.nav-toggle {
			display: none;
			background: none; border: none;
			cursor: pointer; padding: 0.5rem;
		}
		.nav-toggle span {
			display: block;
			width: 22px; height: 2px;
			background: #fff;
			margin: 5px 0;
			transition: all 0.3s ease;
		}

		/* ===== AMBIENT ORBS ===== */
		.orb {
			position: absolute;
			border-radius: 50%;
			filter: blur(100px);
			pointer-events: none;
			z-index: 0;
			opacity: 0.35;
		}
		.orb-1 { width: 600px; height: 600px; background: var(--c-accent); top: -180px; left: -150px; }
		.orb-2 { width: 500px; height: 500px; background: var(--c-accent2); bottom: -150px; right: -120px; }
		.orb-3 { width: 350px; height: 350px; background: #06b6d4; top: 35%; right: -80px; opacity: 0.18; }

		/* ===== HERO GRID PATTERN ===== */
		.hero-grid {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background-image:
				linear-gradient(rgba(16,185,129,0.06) 1px, transparent 1px),
				linear-gradient(90deg, rgba(16,185,129,0.06) 1px, transparent 1px);
			background-size: 60px 60px;
			mask-image: radial-gradient(ellipse 70% 50% at 50% 40%, black 20%, transparent 70%);
			-webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 40%, black 20%, transparent 70%);
			pointer-events: none;
			z-index: 0;
		}

		/* ===== PARTICLES ===== */
		.particles {
			position: fixed;
			top: 0; left: 0;
			width: 100%; height: 100%;
			z-index: 0;
			pointer-events: none;
		}
		.particle {
			position: absolute;
			width: 2px; height: 2px;
			background: rgba(255,255,255,0.2);
			border-radius: 50%;
			animation: particleFloat 20s infinite;
		}
		@keyframes particleFloat {
			0%,100% { transform: translateY(0) translateX(0); opacity: 0; }
			10% { opacity: 0.7; }
			90% { opacity: 0.7; }
			100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
		}
		.particle:nth-child(1){left:10%;animation-delay:0s;animation-duration:16s}
		.particle:nth-child(2){left:25%;animation-delay:2s;animation-duration:19s}
		.particle:nth-child(3){left:40%;animation-delay:4s;animation-duration:22s}
		.particle:nth-child(4){left:55%;animation-delay:1s;animation-duration:17s}
		.particle:nth-child(5){left:70%;animation-delay:3s;animation-duration:20s}
		.particle:nth-child(6){left:85%;animation-delay:5s;animation-duration:18s}

		/* ===== HERO ===== */
		.hero {
			position: relative;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 7rem 1rem 4rem;
			overflow: hidden;
		}
		.hero-bg {
			position: absolute;
			top: 0; left: 50%;
			transform: translateX(-50%);
			width: 100%; max-width: 1400px; height: 100%;
			background: url('/asset/img/hero/tech-bg.webp') center center no-repeat;
			background-size: cover;
			opacity: 0.1;
			mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
			-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
			pointer-events: none;
		}
		@supports not (background-image: url('x.webp')) {
			.hero-bg { background-image: url('/asset/img/hero/tech-bg.jpg'); }
		}
		@media (max-width: 768px) {
			.hero-bg { background-image: url('/asset/img/hero/tech-bg-800.webp'), url('/asset/img/hero/tech-bg-800.jpg'); }
		}
		.hero-content { position: relative; z-index: 1; }
		.hero-badge {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.45rem 1.2rem;
			background: var(--c-accent-soft);
			border: 1px solid rgba(16,185,129,0.2);
			border-radius: 50px;
			font-size: 0.75rem;
			font-weight: 700;
			color: var(--c-accent);
			margin-bottom: 2rem;
			letter-spacing: 1px;
			text-transform: uppercase;
		}
		.hero h1 {
			font-size: 4.2rem;
			font-weight: 800;
			margin-bottom: 0.8rem;
			background: linear-gradient(135deg, #fff 0%, var(--c-accent) 50%, #a5b4fc 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			line-height: 1.1;
			letter-spacing: -1px;
		}
		.hero .tagline {
			font-size: 1.35rem;
			color: var(--c-text-muted);
			font-weight: 400;
			margin-bottom: 1.5rem;
			letter-spacing: 0.3px;
		}
		.hero .description {
			font-size: 1.05rem;
			color: var(--c-text-muted);
			max-width: 640px;
			margin: 0 auto 2.5rem;
			line-height: 1.8;
		}
		.hero-actions {
			display: flex;
			gap: 1rem;
			justify-content: center;
			flex-wrap: wrap;
		}
		.btn-cta {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.85rem 2rem;
			background: linear-gradient(135deg,var(--c-accent),var(--c-accent2));
			color: #fff;
			border: none;
			border-radius: 12px;
			font-size: 1rem;
			font-weight: 600;
			text-decoration: none;
			transition: all 0.3s ease;
			box-shadow: 0 4px 20px rgba(16,185,129,0.35);
		}
		.btn-cta:hover {
			transform: translateY(-3px);
			box-shadow: 0 10px 30px rgba(16,185,129,0.5);
			color: #fff;
		}
		.btn-cta-outline {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.85rem 2rem;
			background: rgba(255,255,255,0.06);
			color: var(--c-text);
			border: 1.5px solid rgba(255,255,255,0.2);
			border-radius: 12px;
			font-size: 1rem;
			font-weight: 600;
			text-decoration: none;
			transition: all 0.3s ease;
			backdrop-filter: blur(4px);
		}
		.btn-cta-outline:hover {
			border-color: var(--c-accent);
			color: var(--c-accent);
			background: var(--c-accent-soft);
			transform: translateY(-2px);
		}
		.hero-trust {
			display: flex;
			justify-content: center;
			gap: 1.5rem;
			margin-top: 3rem;
			flex-wrap: wrap;
			padding-top: 2rem;
			border-top: 1px solid var(--c-border);
			max-width: 550px;
			margin-left: auto;
			margin-right: auto;
		}
		.hero-trust span {
			font-size: 0.8rem;
			color: var(--c-text-muted);
			font-weight: 500;
			letter-spacing: 0.2px;
			display: flex;
			align-items: center;
			gap: 0.4rem;
		}
		.hero-trust svg { color: var(--c-accent); opacity: 0.7; }

		/* ===== ANIMATIONS ===== */
		@keyframes fadeUp {
			from { opacity: 0; transform: translateY(30px); }
			to { opacity: 1; transform: translateY(0); }
		}
		.fade-in {
			opacity: 0;
			transform: translateY(30px);
			transition: opacity 0.7s ease, transform 0.7s ease;
		}
		.fade-in.visible {
			opacity: 1;
			transform: translateY(0);
		}
		.hero-content > * {
			animation: fadeUp 0.8s ease-out both;
		}
		.hero-content > *:nth-child(1) { animation-delay: 0s; }
		.hero-content > *:nth-child(2) { animation-delay: 0.1s; }
		.hero-content > *:nth-child(3) { animation-delay: 0.2s; }
		.hero-content > *:nth-child(4) { animation-delay: 0.3s; }
		.hero-content > *:nth-child(5) { animation-delay: 0.4s; }
		.hero-content > *:nth-child(6) { animation-delay: 0.5s; }

		/* ===== STATS ===== */
		.stats-section {
			position: relative;
			z-index: 1;
			padding: 3.5rem 0;
			background: var(--c-surface);
			border-top: 1px solid var(--c-border);
			border-bottom: 1px solid var(--c-border);
		}
		.stat-item {
			text-align: center;
			padding: 1.2rem 1rem;
			position: relative;
		}
		.stat-item::after {
			content: '';
			position: absolute;
			right: 0; top: 25%; height: 50%;
			width: 1px;
			background: var(--c-border);
		}
		.row > *:last-child .stat-item::after { display: none; }
		.stat-number {
			font-size: 2.8rem;
			font-weight: 800;
			background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			line-height: 1.15;
			margin-bottom: 0.4rem;
		}
		.stat-label {
			font-size: 0.82rem;
			color: var(--c-text-muted);
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		/* ===== ABOUT ===== */
		.about-section {
			position: relative;
			z-index: 1;
			background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent2) 100%);
			padding: 5.5rem 0;
		}
		.about-section h2 {
			font-size: 2.2rem;
			font-weight: 700;
			margin-bottom: 1.8rem;
			color: #fff;
		}
		.about-section p {
			font-size: 1.05rem;
			color: rgba(255,255,255,0.85);
			line-height: 1.9;
			max-width: 800px;
		}
		.about-section .btn-outline-light {
			border-radius: 10px;
			font-weight: 600;
			padding: 0.65rem 1.6rem;
			transition: all 0.3s ease;
		}
		.about-section .btn-outline-light:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(255,255,255,0.15);
		}
		.about-features {
			display: flex;
			gap: 2rem;
			margin-top: 2rem;
			flex-wrap: wrap;
		}
		.about-feature {
			display: flex;
			align-items: center;
			gap: 0.6rem;
			color: rgba(255,255,255,0.9);
			font-weight: 500;
			font-size: 0.9rem;
		}
		.about-feature svg { flex-shrink: 0; }

		/* ===== SECTION COMMON ===== */
		.section-title {
			font-size: 2.2rem;
			font-weight: 700;
			text-align: center;
			margin-bottom: 0.6rem;
		}
		.section-subtitle {
			text-align: center;
			color: var(--c-text-muted);
			font-size: 1.05rem;
			margin-bottom: 3.5rem;
			max-width: 600px;
			margin-left: auto;
			margin-right: auto;
		}
		.section-divider {
			width: 50px;
			height: 3px;
			background: linear-gradient(90deg,var(--c-accent),var(--c-accent2));
			border: none;
			opacity: 1;
			margin: 0.8rem auto 1.2rem;
		}

		/* ===== SERVICES ===== */
		.services-section {
			position: relative;
			z-index: 1;
			padding: 6rem 0;
			background: var(--c-bg);
		}
		.service-card {
			background: var(--c-surface);
			border: 1px solid var(--c-border);
			border-radius: 16px;
			padding: 2rem;
			height: 100%;
			transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}
		.service-card::before {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0;
			height: 3px;
			background: linear-gradient(90deg,var(--c-accent),var(--c-accent2));
			transform: scaleX(0);
			transition: transform 0.4s ease;
		}
		.service-card:hover::before { transform: scaleX(1); }
		.service-card:hover {
			transform: translateY(-8px);
			border-color: rgba(16,185,129,0.25);
			box-shadow: 0 25px 50px var(--c-card-hover-shadow);
		}
		.service-icon-wrap {
			width: 52px;
			height: 52px;
			border-radius: 12px;
			background: var(--c-accent-soft);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1.2rem;
			transition: transform 0.3s ease;
		}
		.service-card:hover .service-icon-wrap {
			transform: scale(1.08) rotate(2deg);
		}
		.service-icon-wrap svg {
			width: 26px;
			height: 26px;
			color: var(--c-accent);
		}
		.service-card h3 {
			font-size: 1.15rem;
			font-weight: 700;
			margin-bottom: 0.6rem;
		}
		.service-card p {
			color: var(--c-text-muted);
			font-size: 0.9rem;
			line-height: 1.7;
			margin: 0;
			flex: 1;
		}

		/* ===== CTA BAND ===== */
		.cta-section {
			position: relative;
			z-index: 1;
			padding: 5rem 0;
			background: var(--c-surface);
			text-align: center;
		}
		.cta-section h2 {
			font-size: 2rem;
			font-weight: 700;
			margin-bottom: 1rem;
		}
		.cta-section p {
			color: var(--c-text-muted);
			font-size: 1.05rem;
			max-width: 550px;
			margin: 0 auto 2rem;
		}

		/* ===== CONTACT ===== */
		.contact-section {
			position: relative;
			z-index: 1;
			padding: 6rem 0;
			background: var(--c-bg);
		}
		.contact-card {
			background: var(--c-surface);
			border: 1px solid var(--c-border);
			border-radius: 14px;
			padding: 1.8rem;
			height: 100%;
			transition: all 0.3s ease;
		}
		.contact-card:hover {
			border-color: rgba(16,185,129,0.25);
			transform: translateY(-4px);
			box-shadow: 0 16px 40px var(--c-card-hover-shadow);
		}
		.contact-card:hover .contact-icon {
			background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
		}
		.contact-card:hover .contact-icon svg { color: #fff; }
		.contact-icon {
			width: 40px;
			height: 40px;
			border-radius: 10px;
			background: var(--c-accent-soft);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1rem;
			transition: all 0.3s ease;
		}
		.contact-icon svg { width: 20px; height: 20px; color: var(--c-accent); }
		.contact-label {
			font-size: 0.72rem;
			color: var(--c-text-dim);
			text-transform: uppercase;
			letter-spacing: 1.5px;
			font-weight: 600;
			margin-bottom: 0.6rem;
		}
		.contact-value {
			font-size: 0.9rem;
			line-height: 1.9;
		}
		.contact-value a {
			color: var(--c-accent);
			text-decoration: none;
			transition: color 0.3s ease;
			font-weight: 500;
		}
		.contact-value a:hover { opacity: 0.8; }

		/* ===== CONTACT FORM ===== */
		.form-section {
			position: relative;
			z-index: 1;
			padding: 5rem 0;
			background: var(--c-surface);
		}
		.form-wrapper {
			max-width: 600px;
			margin: 0 auto;
		}
		.form-wrapper .form-floating { margin-bottom: 1.2rem; }
		.form-wrapper .form-control {
			background: rgba(255,255,255,0.05);
			border: 1px solid rgba(255,255,255,0.12);
			color: #fff;
			border-radius: 10px;
			font-family: var(--font);
			font-size: 0.95rem;
		}
		.form-wrapper .form-control:focus {
			background: rgba(255,255,255,0.08);
			border-color: var(--c-accent);
			color: #fff;
			box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
		}
		.form-wrapper .form-floating > label {
			color: var(--c-text-muted);
			font-size: 0.95rem;
		}
		.form-wrapper .form-floating > .form-control:focus ~ label,
		.form-wrapper .form-floating > .form-control:not(:placeholder-shown) ~ label {
			color: var(--c-accent);
		}
		.form-wrapper textarea.form-control { min-height: 140px; }

		/* ===== Formulár: náhrada primitív, ktoré odišli s Bootstrapom =====
		   Markup je písaný pre Bootstrap 5 (.form-floating, .form-control,
		   .form-check). Bootstrap sa z landingu odstránil vo v3.20, ale nahradili
		   sa len FARBY, nie ROZLOŽENIE. Dôsledok bol vidieť na živom webe:
		     · polia mali default šírku ~240 px namiesto celej šírky,
		     · popisky sa vykreslili VEDĽA polí, nie nad nimi,
		     · `.u-visually-hidden` nebolo definované nikde, čo landing načíta
		       (je len v app.css intranetu), takže honeypot `#website` bol
		       VIDITEĽNÝ — návštevník doň mohol napísať a jeho správa by sa
		       ticho zahodila ako spam.
		   Audit 2026-08-21. */
		.u-visually-hidden {
			position: absolute;
			width: 1px; height: 1px;
			padding: 0; margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
		.form-wrapper .form-control {
			display: block;
			width: 100%;
			padding: 1.6rem 0.9rem 0.5rem;
			line-height: 1.3;
			-webkit-appearance: none;
			appearance: none;
			transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
		}
		.form-wrapper textarea.form-control { padding-top: 1.8rem; resize: vertical; }
		.form-wrapper .form-floating { position: relative; }
		.form-wrapper .form-floating > label {
			position: absolute;
			top: 0; left: 0;
			padding: 1rem 0.9rem;
			pointer-events: none;
			transform-origin: 0 0;
			transition: transform 0.15s ease-out, color 0.15s ease-out;
		}
		/* Pole je prázdne len vtedy, keď je vidieť placeholder — preto majú všetky
		   polia `placeholder=" "`. Bez toho by popisok nikdy neodplával nahor. */
		.form-wrapper .form-floating > .form-control:focus ~ label,
		.form-wrapper .form-floating > .form-control:not(:placeholder-shown) ~ label {
			transform: scale(0.78) translateY(-0.45rem);
		}
		.form-wrapper .form-check {
			display: flex;
			align-items: flex-start;
			gap: 0.6rem;
		}
		.form-wrapper .form-check-input {
			flex: 0 0 auto;
			width: 1.05rem; height: 1.05rem;
			margin-top: 0.15rem;
			accent-color: var(--c-accent);
			border-radius: 4px;
		}
		.gdpr-check { margin: 1.2rem 0 1.5rem; }
		.gdpr-check .form-check-input {
			background-color: rgba(255,255,255,0.1);
			border-color: rgba(255,255,255,0.25);
			cursor: pointer;
		}
		.gdpr-check .form-check-input:checked {
			background-color: var(--c-accent);
			border-color: var(--c-accent);
		}
		.gdpr-check .form-check-input:focus {
			box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
		}
		.gdpr-check .form-check-label {
			color: var(--c-text-muted);
			font-size: 0.82rem;
			line-height: 1.6;
			cursor: pointer;
		}
		.gdpr-check .form-check-label a { color: var(--c-accent); text-decoration: underline; }
		.btn-form-cta {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.8rem 2rem;
			background: linear-gradient(135deg,var(--c-accent),var(--c-accent2));
			color: #fff;
			border: none;
			border-radius: 10px;
			font-size: 1rem;
			font-weight: 600;
			font-family: var(--font);
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(16,185,129,0.3);
		}
		.btn-form-cta:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(16,185,129,0.45);
		}
		.btn-form-cta:disabled { opacity: 0.7; cursor: not-allowed; }
		.form-msg-ok { color: #4ade80; font-weight: 600; margin-top: 1rem; }
		.form-msg-err { color: #f87171; font-weight: 600; margin-top: 1rem; }
		.btn-show-form {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.8rem 2rem;
			background: linear-gradient(135deg,var(--c-accent),var(--c-accent2));
			color: #fff;
			border: none;
			border-radius: 10px;
			font-size: 1rem;
			font-weight: 600;
			font-family: var(--font);
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(16,185,129,0.3);
			text-decoration: none;
		}
		.btn-show-form:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(16,185,129,0.45);
			color: #fff;
		}

		/* ===== FOOTER ===== */
		footer {
			position: relative;
			z-index: 1;
			background: var(--c-surface);
			border-top: 1px solid var(--c-border);
			padding: 3.5rem 0 2rem;
		}
		.footer-brand {
			font-size: 1.1rem;
			font-weight: 700;
			margin-bottom: 0.6rem;
		}
		.footer-desc {
			font-size: 0.85rem;
			color: var(--c-text-muted);
			line-height: 1.7;
			max-width: 280px;
		}
		.footer-title {
			font-size: 0.72rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1.5px;
			color: var(--c-text-dim);
			margin-bottom: 1rem;
		}
		.footer-links {
			list-style: none;
			padding: 0; margin: 0;
		}
		.footer-links li { margin-bottom: 0.4rem; }
		.footer-links a {
			color: var(--c-text-muted);
			text-decoration: none;
			font-size: 0.88rem;
			transition: color 0.3s;
		}
		.footer-links a:hover { color: var(--c-accent); }
		.footer-info {
			font-size: 0.85rem;
			color: var(--c-text-muted);
			line-height: 1.8;
		}
		.footer-bottom {
			border-top: 1px solid var(--c-border);
			margin-top: 2.5rem;
			padding-top: 1.5rem;
			text-align: center;
			color: var(--c-text-dim);
			font-size: 0.82rem;
		}
		.footer-bottom a {
			color: var(--c-text-muted);
			text-decoration: none;
			transition: color 0.3s;
		}
		.footer-bottom a:hover { color: var(--c-accent); }
		.footer-mail-link { color: var(--c-accent); text-decoration: none; }
		.footer-mail-link:hover { text-decoration: underline; }

		/* ===== SCROLL TO TOP ===== */
		.scroll-top {
			position: fixed;
			bottom: 2rem; right: 2rem;
			width: 44px; height: 44px;
			background: linear-gradient(135deg,var(--c-accent),var(--c-accent2));
			color: #fff;
			border: none;
			border-radius: 50%;
			font-size: 1.2rem;
			cursor: pointer;
			z-index: 999;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(16,185,129,0.3);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.scroll-top.visible { opacity: 1; visibility: visible; }
		.scroll-top:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(16,185,129,0.5);
		}

		/* ===== COOKIE ===== */
		.cookie-banner {
			position: fixed;
			bottom: 0; left: 0; right: 0;
			background: rgba(15,23,42,0.97);
			backdrop-filter: blur(20px);
			border-top: 1px solid var(--c-border);
			padding: 1rem 2rem;
			z-index: 10000;
			transform: translateY(100%);
			transition: transform 0.3s ease;
		}
		.cookie-banner.show { transform: translateY(0); }
		.cookie-banner p { color: var(--c-text-muted); font-size: 0.85rem; margin: 0; }
		.cookie-banner a { color: var(--c-accent); text-decoration: underline; }
		.cookie-btn {
			background: linear-gradient(135deg,var(--c-accent),var(--c-accent2));
			color: #fff;
			border: none;
			border-radius: 8px;
			padding: 0.45rem 1.2rem;
			font-weight: 600;
			font-size: 0.85rem;
			cursor: pointer;
			white-space: nowrap;
			transition: all 0.3s ease;
		}
		.cookie-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }

		/* ===== RESPONSIVE ===== */
		@media (max-width: 991px) {
			.nav-links { display: none; }
			.nav-toggle { display: block; }
			.nav-links.open {
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 100%; left: 0; right: 0;
				background: rgba(15,23,42,0.98);
				backdrop-filter: blur(20px);
				padding: 1.5rem 2rem;
				gap: 1rem;
				border-bottom: 1px solid var(--c-border);
			}
		}
		@media (max-width: 768px) {
			.hero h1 { font-size: 2.6rem; }
			.hero .tagline { font-size: 1.15rem; }
			.hero { padding: 7rem 1rem 4rem; min-height: auto; }
			.about-section, .services-section, .contact-section, .form-section, .cta-section { padding: 4rem 0; }
			.stat-number { font-size: 2rem; }
			.stat-item::after { display: none; }
			.hero-trust { gap: 1rem; }
			.about-features { gap: 1rem; }
			.orb { display: none; }
		}
		@media (max-width: 480px) {
			.hero h1 { font-size: 2rem; letter-spacing: -0.5px; }
			.form-wrapper { padding: 1.5rem 1rem; }
			.form-wrapper .form-control { font-size: 16px; }
			textarea.form-control { min-height: 120px; }
			.btn-form-cta { width: 100%; }
		}

		/* ===== LIGHT MODE ===== */
		html.light .navbar-main.scrolled {
			background: rgba(255,255,255,0.92);
			box-shadow: 0 1px 30px rgba(0,0,0,0.06);
			border-bottom-color: var(--c-border);
		}
		html.light .nav-links a { color: #64748b; }
		html.light .nav-links a:hover { color: #1e293b; }
		html.light .nav-logo-light { display: none; }
		html.light .nav-logo-dark { display: block; }
		html.light .nav-toggle span { background: #1e293b; }
		html.light .nav-links.open {
			background: rgba(255,255,255,0.98);
			border-bottom-color: var(--c-border);
		}
		html.light .particle { background: rgba(16,185,129,0.15); }
		html.light .orb { opacity: 0.12; }
		html.light .hero-grid {
			background-image:
				linear-gradient(rgba(16,185,129,0.08) 1px, transparent 1px),
				linear-gradient(90deg, rgba(16,185,129,0.08) 1px, transparent 1px);
		}
		html.light .btn-cta-outline {
			background: rgba(0,0,0,0.02);
			border-color: #cbd5e1;
			color: var(--c-text);
			backdrop-filter: none;
		}
		html.light .btn-cta-outline:hover {
			border-color: var(--c-accent);
			color: var(--c-accent);
			background: rgba(16,185,129,0.06);
		}
		html.light .hero-trust { border-top-color: #e2e8f0; }
		html.light .hero h1 {
			background: linear-gradient(135deg, #1e293b 0%, var(--c-accent) 50%, var(--c-accent2) 100%);
			-webkit-background-clip: text;
			background-clip: text;
		}
		html.light .hero-bg { opacity: 0.18; filter: saturate(0.3) contrast(1.3) brightness(0.6); }
		html.light .btn-theme-landing {
			background: rgba(0,0,0,0.04);
			border-color: #cbd5e1;
			color: #64748b;
		}
		html.light .btn-theme-landing:hover {
			background: rgba(0,0,0,0.08);
			color: #1e293b;
		}
		html.light .lang-switcher {
			background: rgba(0,0,0,0.04);
			border-color: #cbd5e1;
			color: #64748b;
		}
		html.light .lang-switcher:hover { background: rgba(0,0,0,0.08); }
		html.light .lang-switcher option { background: #fff; color: #1e293b; }
		html.light .cookie-banner {
			background: rgba(255,255,255,0.97);
			border-top-color: var(--c-border);
		}
		html.light .cookie-banner a { color: var(--c-accent); }
		html.light .form-section { background: var(--c-surface); }
		html.light .form-wrapper .form-control {
			background: #fff;
			border-color: #cbd5e1;
			color: #1e293b;
		}
		html.light .form-wrapper .form-control:focus {
			background: #fff;
			color: #1e293b;
		}
		html.light .form-wrapper .form-floating > label { color: #64748b; }
		html.light .form-wrapper .form-floating > .form-control:focus ~ label,
		html.light .form-wrapper .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--c-accent); }
		html.light .gdpr-check .form-check-input { background-color: #fff; border-color: #cbd5e1; }
		html.light .gdpr-check .form-check-label { color: #64748b; }
		html.light .gdpr-check .form-check-label a { color: var(--c-accent); }
		html.light .form-msg-ok { color: #059669; }
		html.light .form-msg-err { color: #dc2626; }
		html.light footer { border-top-color: var(--c-border); }

		/* Skip to content */
		.skip-to-content {
			position: absolute;
			top: -40px; left: 0;
			background: var(--c-accent);
			color: #fff;
			padding: 0.5rem 1rem;
			z-index: 10001;
			transition: top 0.3s;
			text-decoration: none;
		}
		.skip-to-content:focus { top: 0; color: #fff; }

		/* ===== REDUCED MOTION ===== */
		@media (prefers-reduced-motion: reduce) {
			*, *::before, *::after {
				animation-duration: 0.01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: 0.01ms !important;
			}
			/* Samotné skrátenie prechodu nestačí — `.fade-in` má `opacity: 0`
			   a odkrýva ho až JS. Bez tohto by človek s obmedzeným pohybom
			   videl prázdnu stránku, kým sa nespustí observer. */
			.fade-in { opacity: 1 !important; transform: none !important; }
		}

/* ============================================================================
   REDIZAJN 2026-08-21 — „celní deklarace"
   ----------------------------------------------------------------------------
   Predtym: #0f172a slate + #10b981 emerald + Inter. To je presne ta paleta,
   ktoru ma kazda druha technologicka stranka — nic z nej nehovori, ze tato
   firma robi namornu logistiku a colny sazobnik.

   Smer: pristavny terminal v noci. Hlboka NAMORNA modrozelen (nie slate — ma
   zelenkavy nadych), znackova zelena zostava, ale uz nie ako vypln celej
   plochy — len tam, kde nieco znamena (CTA, aktivny stav). Pribuda SIGNALNA
   ORANZOVA kontajnerov a pristavnych zeriavov pre technicke udaje a cisla.
   Typografia: Bricolage Grotesque na nadpisy (charakter), JetBrains Mono na
   kody a stitky — kod sazobnika je ich produkt, tak nech je aj videt.

   Fonty su self-hostovane. CSP ma `font-src 'self'`, takze CDN by sa nenacitalo
   — a zaroven na stranku nechodi ziadna poziadavka na Google.
   ========================================================================== */

@font-face{font-family:'Bricolage';font-style:normal;font-weight:400 800;font-display:swap;src:url('/asset/fonts/web/Bricolage-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage';font-style:normal;font-weight:400 800;font-display:swap;src:url('/asset/fonts/web/Bricolage-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrainsMono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/asset/fonts/web/JetBrainsMono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrainsMono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/asset/fonts/web/JetBrainsMono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
	--c-bg:#04161c;
	--c-surface:#0a242c;
	--c-surface2:#071d24;
	--c-border:rgba(125,222,201,.13);
	--c-accent:#10c497;
	--c-accent2:#0a8f70;
	--c-accent-soft:rgba(16,196,151,.14);
	--c-signal:#ff7a45;
	--c-signal-soft:rgba(255,122,69,.14);
	--c-text:#e8f4f1;
	--c-text-muted:rgba(232,244,241,.64);
	--c-text-dim:rgba(232,244,241,.38);
	--c-success:#10c497;
	--font-display:'Bricolage','Bricolage Grotesque',Georgia,serif;
	--font-mono:'JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html.light{
	--c-bg:#eef3f2;
	--c-surface:#ffffff;
	--c-surface2:#e4ecea;
	--c-border:rgba(6,40,45,.12);
	--c-accent:#0a8f70;
	--c-accent2:#076b54;
	--c-accent-soft:rgba(10,143,112,.1);
	--c-signal:#d2521f;
	--c-signal-soft:rgba(210,82,31,.1);
	--c-text:#062229;
	--c-text-muted:rgba(6,34,41,.66);
	--c-text-dim:rgba(6,34,41,.42);
}

/* ---------- Typografia ---------- */
h1,h2,h3,.hero-title,.section-title,.cta-title,.footer-brand{
	font-family:var(--font-display);
	font-weight:700;
	letter-spacing:-.028em;
	text-wrap:balance;
}
.hero-title{ font-size:clamp(2.9rem,7.5vw,6rem); line-height:.94; }
.section-title{ font-size:clamp(2rem,4.6vw,3.4rem); line-height:1; }
.cta-title{ font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.05; }

/* Stitok sekcie ako riadok z formulara: mono, prestrkane, s linkou. */
.hero-badge,.contact-label,.footer-title{
	font-family:var(--font-mono);
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
}
.hero-badge{
	background:transparent;
	border:0;
	border-top:1px solid var(--c-signal);
	border-radius:0;
	padding:.7rem 0 0;
	color:var(--c-signal);
	font-size:.68rem;
	display:inline-block;
}
.section-subtitle{ font-size:1.05rem; max-width:52ch; margin-inline:auto; }

/* ---------- Namorna atmosfera: graticula + zrno ---------- */
.hero::before{
	content:"";
	position:absolute; inset:0;
	background-image:
		linear-gradient(var(--c-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
	background-size:88px 88px;
	mask-image:radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 78%);
	-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 78%);
	opacity:.55;
	pointer-events:none;
	z-index:0;
}
.hero-bg{ opacity:.20; filter:saturate(.55) contrast(1.1); }
.hero{ background:radial-gradient(ellipse 120% 90% at 50% -10%, #0b3a3f 0%, var(--c-bg) 62%); }

/* ---------- Tlacidla ---------- */
.btn-cta,.btn-form-cta,.btn-intranet,.btn-show-form{
	font-family:var(--font);
	font-weight:600;
	letter-spacing:-.01em;
	border-radius:2px;
	transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease;
}
.btn-cta,.btn-form-cta{
	background:var(--c-accent);
	box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 30px -12px rgba(16,196,151,.75);
}
.btn-cta:hover,.btn-form-cta:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 16px 36px -12px rgba(16,196,151,.9); }
.btn-cta-outline{
	border-radius:2px;
	border:1px solid var(--c-border);
	background:transparent;
	transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-cta-outline:hover{ border-color:var(--c-signal); color:var(--c-signal); transform:translateY(-2px); }
.btn-intranet{ border-radius:2px; }

/* ---------- Karty ---------- */
.service-card,.contact-card,.form-wrapper{
	border-radius:3px;
	border:1px solid var(--c-border);
	background:var(--c-surface2);
	position:relative;
	transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.service-card::after{
	content:"";
	position:absolute; left:0; top:0; height:2px; width:0;
	background:var(--c-signal);
	transition:width .28s cubic-bezier(.2,.7,.3,1);
}
.service-card:hover{ transform:translateY(-3px); border-color:rgba(125,222,201,.28); }
.service-card:hover::after{ width:100%; }
.service-card h3{ font-size:1.15rem; letter-spacing:-.02em; }

/* ---------- Cisla a udaje mono ---------- */
.stat-number,.contact-value,.hero-trust,.about-feature{ font-variant-numeric:tabular-nums; }
.stat-number{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.03em; }
.hero-trust{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; }
.contact-value{ font-family:var(--font-mono); font-size:.86rem; line-height:1.75; }
.contact-label{ color:var(--c-signal); font-size:.64rem; }

/* ---------- Rytmus ---------- */
.about-section,.services-section,.contact-section,.form-section{ padding:6.5rem 0; }
.cta-section{ padding:5rem 0; }
.section-header{ margin-bottom:3.5rem; }

/* ---------- Cookie lista: nech neprekryva obsah ---------- */
.cookie-banner{
	left:auto; right:1rem; bottom:1rem;
	max-width:26rem;
	border:1px solid var(--c-border);
	border-radius:3px;
	background:var(--c-surface);
	box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
	font-size:.82rem;
}

@media (max-width:640px){
	.cookie-banner{ left:1rem; right:1rem; max-width:none; }
	.about-section,.services-section,.contact-section,.form-section{ padding:4rem 0; }
}

/* ---------- Prec s klisé ----------
   `.orb` boli tri velke rozmazane farebne skvrny cez cely hero — ta istá
   ozdoba, akú má kazda druha stranka, a zalievala plochu zelenou tak, ze
   z fotky terminalu nebolo nic. Namiesto nich: jeden tichy svetelny zdroj
   zhora, aby mala plocha hlbku, ale nie farebnu kasu. */
.orb{ display:none; }

/* Gradientovy text v nadpise (biela → zelena → levandulova) je dalsie klisé
   a pri tejto velkosti sa zle cita. Nazov firmy je znacka, nie ozdoba. */
.hero-title{
	background:none !important;
	-webkit-background-clip:initial !important;
	background-clip:initial !important;
	-webkit-text-fill-color:initial !important;
	color:var(--c-text);
}
.hero-title .accent,.hero-title em{ color:var(--c-accent); font-style:normal; }

/* Mriezka uz na stranke bola — nechavam tu jej, len ju prefarbujem do namornej
   a stlmim. Dve mriezky cez seba robia moaré. */
.hero::before{ display:none; }
.hero-grid{
	background-image:
		linear-gradient(var(--c-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-border) 1px, transparent 1px) !important;
	background-size:92px 92px !important;
	mask-image:radial-gradient(ellipse 90% 70% at 50% 38%, #000 25%, transparent 80%);
	-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 38%, #000 25%, transparent 80%);
	opacity:.9;
}
.hero-bg{ opacity:.26; filter:saturate(.4) contrast(1.15) brightness(.9); }
.hero{
	background:
		radial-gradient(ellipse 70% 50% at 50% -5%, rgba(16,196,151,.16) 0%, transparent 70%),
		radial-gradient(ellipse 120% 90% at 50% 0%, #072a31 0%, var(--c-bg) 60%);
}

/* ---------- Hero: obsahova hierarchia ----------
   Meno firmy je podpis (je aj v logu v navigacii), nadpis patri tomu, co firma
   predava. `.tagline` uz nie je potrebna — jej text sa presunul do <h1>. */
.hero-kicker{
	font-family:var(--font-mono);
	font-size:.72rem;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--c-text-dim);
	margin:1.6rem 0 .9rem;
}
.hero-content .tagline{ display:none; }
.hero-title{
	margin:0 0 1.4rem;
	max-width:16ch;
	margin-inline:auto;
}
.hero-content .description{ max-width:56ch; margin-inline:auto; }
.hero-trust{ margin-top:3rem; }

/* Nastup obsahu po nacitani — nezavisi na scrollovani ani na observeri,
   takze funguje aj pri prvom pohlade nad zlomom. */
@media (prefers-reduced-motion: no-preference){
	.hero-badge,.hero-kicker,.hero-title,.hero-content .description,.hero-actions,.hero-trust{
		animation:heroIn .7s cubic-bezier(.2,.7,.3,1) backwards;
	}
	.hero-kicker{ animation-delay:.05s }
	.hero-title{ animation-delay:.12s }
	.hero-content .description{ animation-delay:.2s }
	.hero-actions{ animation-delay:.28s }
	.hero-trust{ animation-delay:.36s }
}
@keyframes heroIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------- Sluzby ako sadzobnikovy zoznam ----------
   Sest rovnakych kariet v mriezke 3x2 je usporiadanie, ktore nehovori nic
   o tom, co je to za firmu — a citalo sa zle, lebo kazda karta bola rovnako
   dolezita. Sadzobnik je pritom presne ten dokument, s ktorym tato firma
   pracuje: cislovane polozky pod sebou, kod vlavo, popis vpravo, tenke linky.
   Redizajn 2026-08-21. */
.services-section .row{ counter-reset:sluzba; display:block; margin:0; }
.services-section .row > [class*="col-"]{
	flex:none; max-width:none; width:100%; padding:0;
}
.services-section .service-card{
	counter-increment:sluzba;
	display:grid;
	grid-template-columns:4.5rem minmax(11rem,15rem) 1fr;
	align-items:start;
	gap:0 2rem;
	background:transparent;
	border:0;
	border-top:1px solid var(--c-border);
	border-radius:0;
	padding:1.9rem .75rem;
	transition:background .22s ease, padding-left .22s cubic-bezier(.2,.7,.3,1);
}
.services-section .row > [class*="col-"]:last-child .service-card{ border-bottom:1px solid var(--c-border); }
.services-section .service-card::after{ display:none; }
.services-section .service-card::before{
	content:"0" counter(sluzba);
	font-family:var(--font-mono);
	font-weight:600;
	font-size:.95rem;
	letter-spacing:.02em;
	color:var(--c-signal);
	padding-top:.15rem;
}
.services-section .service-card:hover{
	background:linear-gradient(90deg, var(--c-signal-soft), transparent 55%);
	padding-left:1.5rem;
}
.services-section .service-card h3{
	margin:0;
	font-size:1.28rem;
	line-height:1.2;
	color:var(--c-text);
}
.services-section .service-card p{
	margin:0;
	color:var(--c-text-muted);
	font-size:.95rem;
	line-height:1.65;
	max-width:60ch;
}
/* Ikona uz nenesie informaciu, ktoru by cislo a nazov nedali — ostava ako
   tichy znak pri nazve, nie ako 56px stvorec navrchu karty. */
.services-section .service-icon-wrap{
	grid-column:2; grid-row:1;
	width:auto; height:auto;
	background:none; border:0; margin:0 0 .5rem;
	display:block;
}
.services-section .service-icon-wrap svg{ width:20px; height:20px; color:var(--c-accent); opacity:.85; }
.services-section .service-card h3{ grid-column:2; grid-row:2; }
.services-section .service-card p{ grid-column:3; grid-row:1 / span 2; }

@media (max-width:860px){
	.services-section .service-card{
		grid-template-columns:3.2rem 1fr;
		gap:0 1.2rem;
		padding:1.5rem .25rem;
	}
	.services-section .service-icon-wrap{ grid-column:2; grid-row:1; }
	.services-section .service-card h3{ grid-column:2; grid-row:2; font-size:1.12rem; }
	.services-section .service-card p{ grid-column:2; grid-row:3; margin-top:.5rem; }
	.services-section .service-card:hover{ padding-left:.75rem; }
}

/* Nadpis sekcie zarovnany vlavo — vycentrovany nadpis nad zoznamom pod sebou
   nema kam ukotvit oko. */
.services-section .section-title,
.services-section .section-subtitle{ text-align:left; margin-inline:0; }
.services-section .section-divider{ margin-inline:0; }

/* Cislo polozky musi mat vlastne miesto v mriezke — bez explicitneho umiestnenia
   ho automaticke ukladanie roztiahlo cez cely riadok a nebolo ho vidiet. */
.services-section .service-card::before{
	grid-column:1;
	grid-row:1 / span 2;
}
/* Hover: namiesto posunu celeho riadku (posuval aj popis) staci znacka pri hrane
   a jemne podfarbenie. Riadok tak pri prechode mysou neposkakuje. */
.services-section .service-card{
	box-shadow:inset 0 0 0 0 var(--c-signal);
	transition:background .22s ease, box-shadow .22s ease;
}
.services-section .service-card:hover{
	padding-left:.75rem;
	box-shadow:inset 3px 0 0 0 var(--c-signal);
	border-top-color:var(--c-border);
}
@media (max-width:860px){
	.services-section .service-card::before{ grid-row:1 / span 3; }
	.services-section .service-card:hover{ padding-left:.25rem; }
}

/* Povodne `.service-card::before` bol ozdobny pruzok: `position:absolute`,
   `transform:scaleX(0)` a az na hover `scaleX(1)`. Moje cislo polozky ten
   pseudoprvok prebralo, ale zdedilo aj absolutne umiestnenie a nulovu sirku —
   preto sa cisla objavovali len pri prechode mysou a cez riadok isla zelena
   linka. Tu sa vlastnosti pruzka rusia. */
.services-section .service-card::before{
	position:static;
	transform:none;
	height:auto;
	background:none;
	inset:auto;
	transition:color .22s ease;
}
.services-section .service-card:hover::before{ transform:none; color:var(--c-signal); }
.services-section .service-card:hover{ transform:none; }

/* ---------- Kontaktne karty: odkaz na pokracovanie ---------- */
.contact-card{ display:flex; flex-direction:column; }
.contact-more{
	margin-top:auto;
	padding-top:1rem;
	font-family:var(--font-mono);
	font-size:.74rem;
	letter-spacing:.06em;
	color:var(--c-signal);
	text-decoration:none;
	transition:opacity .18s ease, transform .18s ease;
}
.contact-more:hover{ opacity:.75; transform:translateX(3px); }
.contact-hint{ color:var(--c-text-dim); font-size:.78rem; font-family:var(--font); }

/* ---------- Podstranka s udajmi (fakturacne udaje, pravne texty) ----------
   Ta ista paleta a typografia ako landing, len uzsia miera na citanie. */
.page-doc{ background:var(--c-bg); color:var(--c-text); font-family:var(--font); }
.doc-wrap{ max-width:44rem; margin:0 auto; padding:3.5rem 1.5rem 5rem; }
.doc-back{
	display:inline-block; margin-bottom:2.5rem;
	font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em;
	color:var(--c-text-muted); text-decoration:none;
}
.doc-back:hover{ color:var(--c-accent); }
.doc-title{
	font-family:var(--font-display); font-weight:700;
	font-size:clamp(2.2rem,5vw,3.2rem); line-height:1; letter-spacing:-.03em;
	margin:.9rem 0 1rem;
}
.doc-lead{ color:var(--c-text-muted); font-size:1.02rem; line-height:1.7; max-width:60ch; margin:0 0 3rem; }
.doc-block{ margin:0 0 3rem; }
.doc-block h2{
	font-family:var(--font-display); font-size:1.35rem; letter-spacing:-.02em;
	margin:0 0 1.2rem; padding-bottom:.7rem; border-bottom:1px solid var(--c-border);
}
.doc-dl{ display:grid; grid-template-columns:minmax(9rem,13rem) 1fr; gap:.85rem 1.5rem; margin:0; }
.doc-dl dt{
	font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
	text-transform:uppercase; color:var(--c-text-dim); padding-top:.15rem;
}
.doc-dl dd{ margin:0; line-height:1.6; }
.doc-code{ font-family:var(--font-mono); font-size:.95rem; letter-spacing:.01em; }
.doc-note{ color:var(--c-text-muted); margin:0 0 1.2rem; font-size:.94rem; }
.doc-warn{
	margin:1.6rem 0 0; padding:1rem 1.1rem;
	border-left:3px solid var(--c-signal);
	background:var(--c-signal-soft);
	color:var(--c-text-muted); font-size:.9rem; line-height:1.65;
}
.doc-foot{
	margin-top:4rem; padding-top:1.4rem; border-top:1px solid var(--c-border);
	font-family:var(--font-mono); font-size:.74rem; color:var(--c-text-dim);
}
.doc-foot a{ color:var(--c-text-muted); text-decoration:none; }
.doc-foot a:hover{ color:var(--c-accent); }
.page-doc a{ color:var(--c-accent); }
@media (max-width:560px){ .doc-dl{ grid-template-columns:1fr; gap:.25rem 0 } .doc-dl dd{ margin-bottom:.9rem } }

/* Odkaz spat a stitok stranky patria na samostatne riadky. */
.doc-back{ display:block; }
.page-doc .hero-badge{ display:block; margin:0 0 .2rem; }
/* `.doc-foot` chytal pozadie z inej sekcie — patka je len linka a text. */
.doc-foot{ background:none; padding-left:0; padding-right:0; }

/* ---------- Svetla tema: hero ----------
   Tmave namorne prechody sa do svetlej temy nesmu prelievat — v lavom hornom
   rohu z toho bola tmava skvrna a fotka terminalu robila stred kalny. */
html.light .hero{
	background:
		radial-gradient(ellipse 70% 50% at 50% -5%, rgba(10,143,112,.10) 0%, transparent 70%),
		linear-gradient(180deg, #e7eeec 0%, var(--c-bg) 55%);
}
html.light .hero-bg{ opacity:.09; filter:saturate(.3) contrast(1.05); }
html.light .hero-kicker{ color:var(--c-text-dim); }
html.light .hero-title{ color:var(--c-text); }

/* Navigacia mala vo svetlej teme prilis slaby kontrast (svetlosiva na svetlom). */
html.light .nav-links a{ color:#0d3f43; }
html.light .nav-links a:hover{ color:var(--c-accent2); }
html.light .lang-btn,html.light .btn-theme-landing{ color:#0d3f43; border-color:var(--c-border); }
html.light .hero-trust{ color:var(--c-text-muted); }

/* Logo je siroky napis (pomer 7,78:1) — na uzkych displejoch mu treba nizsiu
   vysku, inak vytlaci hamburger mimo obrazovku. */
@media (max-width:900px){ .nav-logo{ height:30px } }
@media (max-width:420px){ .nav-logo{ height:26px } }