body {font-size: 16px; font-family: 'Lato', sans-serif; color: #444444; line-height: 1.5; background: #ffffff; margin: 0; padding: 0;}
img {max-width: 100%;}
h1, h2, h3, h4 {font-family: 'Space Grotesk', sans-serif; font-weight: 400; letter-spacing: -1px; color: #0bb0e8; padding: 0; margin: 0 0 0.8em 0; line-height: 1.2;}
h1 {font-size: 56px;}
h2 {font-size: 32px;}
h3 {font-size: 22px;}
p {margin: 0 0 16px 0; padding: 0; line-height: 1.6;}
a {color: #0bb0e8;}

/* Header / Hero */
header {width: 100%; min-height: 100vh; background: #04161e; display: flex; flex-direction: column; position: relative; overflow: hidden;}
.header-video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.header-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(rgba(11,176,232,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,176,232,0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,18,30,0.60) 0%, rgba(0,10,20,0.90) 100%);
    background-size: 60px 60px, 60px 60px, 100% 100%;
}
header nav {position: absolute; top: 0; z-index: 3; width: 100%; text-align: center; box-sizing: border-box;}
header nav ul {display: block; list-style: none; text-align: center; margin: 0; padding: 0;}
header nav ul li {display: inline-block; margin: 24px 30px 0 30px;}
header nav ul li a {text-decoration: none; color: rgba(255,255,255,0.85); font-family: 'Space Grotesk', sans-serif; font-size: 16px; letter-spacing: 0.5px;}
header nav ul li a:hover {color: #ffffff; text-decoration: underline;}

.hero {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 100px 20px 80px 20px; position: relative; z-index: 2;}
.hero h1 {color: #ffffff; letter-spacing: -1px; margin-bottom: 0.25em;}
.hero .tagline {color: #c0c4d8; font-size: 17px; margin-bottom: 0.4em; letter-spacing: 0.5px;}
.hero .location {color: #5aaec8; font-size: 15px; margin-bottom: 2.5em;}
.btn-cta {display: inline-flex; align-items: center; gap: 10px; background: #ffffff; color: #0bb0e8; padding: 14px 32px; border-radius: 3px; text-decoration: none; font-family: 'Space Grotesk', sans-serif; font-size: 18px; letter-spacing: 0.3px; transition: background 0.15s, color 0.15s;}
.btn-cta:hover {background: #cdf1fc; color: #0bb0e8;}
.btn-cta img {width: 18px; height: 18px; filter: invert(25%) sepia(30%) saturate(600%) hue-rotate(196deg) brightness(85%) contrast(95%);}

/* Burger button (hidden on desktop) */
.burger {display: none; flex-direction: column; justify-content: center; gap: 6px; position: absolute; top: 18px; right: 18px; z-index: 10; background: none; border: none; cursor: pointer; padding: 6px;}
.burger span {display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.35s ease, opacity 0.25s ease;}
.burger.is-open span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.burger.is-open span:nth-child(2) {opacity: 0; transform: scaleX(0);}
.burger.is-open span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}

@media only screen and (max-width: 700px) {
    .burger {display: flex;}

    /* Full-screen overlay, hidden by default */
    header nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        position: fixed;
        inset: 0;
        background: rgba(2,14,22,0.97);
        z-index: 9;
        list-style: none;
        margin: 0; padding: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    header nav ul.is-open {opacity: 1; pointer-events: auto;}

    /* Items start offset and invisible, animate in one by one */
    header nav ul li {
        display: block;
        margin: 0;
        opacity: 0;
        transform: translateY(-18px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    header nav ul.is-open li:nth-child(1) {opacity: 1; transform: none; transition-delay: 0.08s;}
    header nav ul.is-open li:nth-child(2) {opacity: 1; transform: none; transition-delay: 0.16s;}
    header nav ul.is-open li:nth-child(3) {opacity: 1; transform: none; transition-delay: 0.24s;}
    header nav ul.is-open li:nth-child(4) {opacity: 1; transform: none; transition-delay: 0.32s;}

    header nav ul li a {display: block; padding: 16px 0; font-size: 28px; color: #fff; letter-spacing: 0.5px;}

    .hero h1 {font-size: 38px;}
    .hero .tagline {font-size: 15px;}
}

/* Sections */
section {max-width: 900px; margin: 60px auto; padding: 0 20px;}
section + section {border-top: 1px solid #ebebeb; padding-top: 60px; margin-top: 0;}
@media only screen and (max-width: 700px) {
    section {max-width: 90%; margin: 40px auto;}
    section + section {padding-top: 40px;}
}

/* Services grid */
.services-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px;}
@media only screen and (max-width: 700px) {
    .services-grid {grid-template-columns: 1fr;}
}
.service-card {background: #f0faff; border-top: 3px solid #0bb0e8; padding: 20px 22px;}
.service-card h3 {font-size: 19px; margin-bottom: 0.6em;}
.service-card h4 {color: #333333;}
.service-card p:last-child {margin-bottom: 0;}

/* Tables */
table {border-collapse: collapse; width: 100%; margin-bottom: 28px;}
table tr:nth-child(2n + 1) td {background: #f0f0f0;}
table td {padding: 10px 20px; vertical-align: top;}

/* Carousel */
.carousel-wrapper {position: relative;}
.carousel-track {display: flex; gap: 16px; overflow-x: scroll; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: none; -ms-overflow-style: none;}
.carousel-track::-webkit-scrollbar {display: none;}
.carousel-item {flex: 0 0 auto; width: 240px; background: #f0faff; border-top: 3px solid #0bb0e8; cursor: pointer; scroll-snap-align: start; transition: transform 0.15s;}
.carousel-item:hover {transform: translateY(-3px);}
.carousel-item img {width: 100%; height: 170px; object-fit: cover; display: block;}
.carousel-caption {padding: 10px 12px; font-size: 13px; color: #555; margin: 0; line-height: 1.3;}
.carousel-btn {position: absolute; top: 85px; background: rgba(11,176,232,0.85); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.15s; padding: 0 0 2px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.18);}
.carousel-btn:hover {background: #0990c2;}
.carousel-btn--left {left: -21px;}
.carousel-btn--right {right: -21px;}
@media only screen and (max-width: 700px) {
    .carousel-btn--left {left: 4px;}
    .carousel-btn--right {right: 4px;}
    .carousel-item {width: 200px;}
}

/* Lightbox */
#lightbox {display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 1000; align-items: center; justify-content: center; padding: 24px;}
.lightbox-inner {display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 90vw; max-height: 90vh;}
#lightbox-img {max-width: 100%; max-height: calc(90vh - 56px); object-fit: contain; display: block;}
#lightbox-caption {color: rgba(255,255,255,0.7); font-size: 14px; text-align: center; margin: 0;}
#lightbox-close {position: absolute; top: 14px; right: 18px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.65;}
#lightbox-close:hover {opacity: 1;}
.lightbox-arrow {position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: #fff; border: none; border-radius: 50%; width: 52px; height: 52px; font-size: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; padding: 0 0 2px 0;}
.lightbox-arrow:hover {background: rgba(255,255,255,0.22);}
.lightbox-arrow--left {left: 20px;}
.lightbox-arrow--right {right: 20px;}
@media only screen and (max-width: 700px) {
    #lightbox {padding: 16px;}
    .lightbox-arrow--left {left: 8px;}
    .lightbox-arrow--right {right: 8px;}
}
body.no-scroll {overflow: hidden;}

/* Contact */
.contact-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px;}
@media only screen and (max-width: 700px) {
    .contact-grid {grid-template-columns: 1fr;}
}
.contact-card {background: #f0faff; border-top: 3px solid #0bb0e8; padding: 32px 28px; text-align: center;}
.contact-portrait {width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 16px;}
.contact-card h3 {margin-bottom: 0.2em;}
.contact-role {color: #888; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px;}
.contact-card p {margin-bottom: 6px;}
.contact-card p:last-child {margin-bottom: 0;}

/* Footer */
footer {background: #04161e; color: #5aaec8; text-align: center; padding: 28px 20px; font-size: 14px; margin-top: 80px;}
footer p {margin: 0; color: #5aaec8;}

/* ── Tech ornaments ─────────────────────────────────────────────── */

/* Dot grid across page background */
body {
    background-image: radial-gradient(circle, rgba(11,176,232,0.10) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
}

/* Diamond node prefix on section h2 headings */
section h2 {display: flex; align-items: center; gap: 14px; flex-wrap: wrap;}
section h2::before {
    content: '';
    flex: 0 0 9px;
    height: 9px;
    background: #0bb0e8;
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px rgba(11,176,232,0.20);
}

/* Circuit-corner SVG ornament on cards */
.service-card {position: relative; overflow: hidden;}
.contact-card {position: relative; overflow: hidden;}
.service-card::after, .contact-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 56px; height: 56px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M52 4 L52 52 L4 52' stroke='%230bb0e8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='52' cy='4' r='2.5' fill='%230bb0e8'/%3E%3Ccircle cx='4' cy='52' r='2.5' fill='%230bb0e8'/%3E%3Ccircle cx='52' cy='52' r='2' fill='none' stroke='%230bb0e8' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat bottom right;
    opacity: 0.25;
    pointer-events: none;
}

/* Ghost circuit watermark in O nás and Reference sections */
#o-nas {position: relative;}
#reference {position: relative;}
#o-nas::after, #reference::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 180px; height: 180px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpath d='M30 90 L70 90 L70 40 L130 40' stroke='%230bb0e8' stroke-width='2' fill='none'/%3E%3Cpath d='M130 40 L130 120 L160 120' stroke='%230bb0e8' stroke-width='2' fill='none'/%3E%3Cpath d='M70 90 L70 150 L110 150' stroke='%230bb0e8' stroke-width='2' fill='none'/%3E%3Cpath d='M130 120 L100 120 L100 160' stroke='%230bb0e8' stroke-width='2' fill='none'/%3E%3Ccircle cx='70' cy='90' r='4' fill='%230bb0e8'/%3E%3Ccircle cx='130' cy='40' r='4' fill='none' stroke='%230bb0e8' stroke-width='2'/%3E%3Ccircle cx='130' cy='120' r='3.5' fill='%230bb0e8'/%3E%3Ccircle cx='30' cy='90' r='3' fill='%230bb0e8'/%3E%3Ccircle cx='160' cy='120' r='3' fill='%230bb0e8'/%3E%3Ccircle cx='70' cy='150' r='3' fill='none' stroke='%230bb0e8' stroke-width='2'/%3E%3Ccircle cx='100' cy='160' r='3' fill='%230bb0e8'/%3E%3Ccircle cx='110' cy='150' r='3' fill='%230bb0e8'/%3E%3C/svg%3E") no-repeat top right;
    opacity: 0.07;
    pointer-events: none;
}