:root{
    /* Light default (luxusne, predajne, svetle) */
    --bg: #f6f8fb;
    --bg2:#eef3fb;
    --card:#ffffff;
    --card2:#fbfcff;
    --stroke: rgba(15, 23, 42, .10);
    --text:#0f172a;
    --muted: rgba(15,23,42,.70);
    --muted2: rgba(15,23,42,.55);

    --brand:#1f6feb;     /* elegantná modrá */
    --brand2:#0ea5e9;    /* cyan highlight */
    --gold:#c8a24b;      /* jemný “lux” akcent */

    --ok:#16a34a; --err:#ef4444;
    --radius:18px;
    --shadow: 0 18px 60px rgba(15, 23, 42, .10);
    --shadow2: 0 10px 30px rgba(15, 23, 42, .08);
    --ring: 0 0 0 4px rgba(31,111,235,.18);

    --navBg: rgba(255,255,255,.78);
    --navBlur: blur(14px) saturate(160%);
}

/* Dark theme overrides */
html[data-theme="dark"]{
    --bg:#070B1A;
    --bg2:#090F25;
    --card: rgba(255,255,255,.08);
    --card2: rgba(255,255,255,.10);
    --stroke: rgba(255,255,255,.14);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --muted2: rgba(255,255,255,.55);

    --brand:#3aa6ff;
    --brand2:#7c4dff;
    --gold:#e7c36a;

    --shadow: 0 18px 60px rgba(0,0,0,.35);
    --shadow2: 0 12px 30px rgba(0,0,0,.25);
    --ring: 0 0 0 4px rgba(58,166,255,.22);

    --navBg: rgba(7,11,26,.62);
    --navBlur: blur(14px) saturate(160%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:
            radial-gradient(1200px 600px at 20% 10%, rgba(31,111,235,.12), transparent 60%),
            radial-gradient(900px 500px at 80% 20%, rgba(14,165,233,.10), transparent 55%),
            radial-gradient(900px 650px at 50% 90%, rgba(200,162,75,.08), transparent 55%),
            linear-gradient(180deg, var(--bg), var(--bg2));
    color:var(--text);
    overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px, 92vw); margin-inline:auto}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}

/* NAV */
header{
    position:sticky; top:0; z-index:50;
    background: var(--navBg);
    backdrop-filter: var(--navBlur);
    border-bottom: 1px solid var(--stroke);
}
.nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0; gap:12px;
}
.brand{
    display:flex; align-items:center; gap:10px; min-width:220px;
}
.logo{
    width:42px;height:42px;border-radius:14px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 12px 30px rgba(31,111,235,.22);
    display:grid; place-items:center;
    /*border: 1px solid var(--stroke);*/
}
.logo svg{width:22px;height:22px;fill:white}
.brand .t{display:flex; flex-direction:column; line-height:1.1}
.brand strong{font-size:14px; letter-spacing:.2px}
.brand span{font-size:12px; color:var(--muted2)}

.menu{display:flex; gap:18px; align-items:center}
.menu a{
    padding:10px 12px;
    border-radius:12px;
    color:var(--muted);
    transition:.2s ease;
}
.menu a:hover{
    color:var(--text);
    background: rgba(15,23,42,.06);
}
html[data-theme="dark"] .menu a:hover{
    background: rgba(255,255,255,.06);
}

.nav-cta{display:flex; gap:10px; align-items:center}

.btn{
    appearance:none;border:none; cursor:pointer;
    color:#fff;
    font-weight:800;
    padding:12px 14px;
    border-radius:14px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 16px 40px rgba(31,111,235,.18);
    transition: transform .12s ease, filter .12s ease;
    white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.03)}
.btn:active{transform: translateY(0)}

.btn.secondary{
    background: var(--card);
    color: var(--text);
    border:1px solid var(--stroke);
    box-shadow: var(--shadow2);
    font-weight:700;
}

/*.theme-toggle{*/
/*    display:flex; align-items:center; gap:10px;*/
/*    padding:10px 12px;*/
/*    border-radius:14px;*/
/*    border:1px solid var(--stroke);*/
/*    background: var(--card);*/
/*    box-shadow: var(--shadow2);*/
/*    cursor:pointer;*/
/*    user-select:none;*/
/*}*/
/*.theme-toggle .pill{*/
/*    width:44px; height:26px;*/
/*    border-radius:999px;*/
/*    border:1px solid var(--stroke);*/
/*    background: linear-gradient(180deg, var(--card2), var(--card));*/
/*    position:relative;*/
/*}*/
/*.theme-toggle .knob{*/
/*    position:absolute; top:50%;*/
/*    width:20px; height:20px; border-radius:999px;*/
/*    transform: translateY(-50%);*/
/*    left:3px;*/
/*    background: linear-gradient(135deg, var(--brand), var(--brand2));*/
/*    box-shadow: 0 8px 18px rgba(31,111,235,.20);*/
/*    transition: left .18s ease;*/
/*}*/
/*html[data-theme="dark"] .theme-toggle .knob{ left:21px; }*/

.burger{
    display:none;
    width:44px;height:44px;border-radius:14px;
    background: var(--card);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow2);
    align-items:center; justify-content:center;
    cursor:pointer;
}
.burger svg{width:22px;height:22px;fill:var(--text)}
.mobile-panel{
    display:none;
    padding:10px 0 16px;
    border-top:1px solid var(--stroke);
}
.mobile-panel a{
    display:block;
    padding:12px 12px;
    border-radius:14px;
    color:var(--muted);
}
.mobile-panel a:hover{background: rgba(15,23,42,.06); color:var(--text)}
html[data-theme="dark"] .mobile-panel a:hover{background: rgba(255,255,255,.06)}
.mobile-panel.open{display:block}

/* PARALLAX (W3Schools style) */
.parallax{
    position:relative;
    min-height: 78vh;
    display:flex;
    align-items:center;
    padding: 84px 0 64px;
    overflow:hidden;

    /* Parallax priamo na elemente */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* overlay pre čitateľnosť textu (ľahší v light, tmavší v dark) */
.parallax::before{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;
    background:
            linear-gradient(180deg,
            rgba(255,255,255,.35),
            rgba(255,255,255,.85)
            );
}
html[data-theme="dark"] .parallax::before{
    background:
            radial-gradient(1200px 520px at 30% 20%, rgba(58,166,255,.28), transparent 60%),
            linear-gradient(180deg, rgba(7,11,26,.25), rgba(7,11,26,.85));
}

/* LIGHT */
html[data-theme="light"] .parallax.hero{
    background-image: url("../images/parallex/light/hero.jpg");
}
html[data-theme="light"] .parallax.mid{
    background-image: url("../images/parallex/light/VPETME4zVWM.jpg");
}
html[data-theme="light"] .parallax.cta{
    background-image: url("../images/parallex/light/highway.jpg");
}
html[data-theme="light"] .parallax.end{
    background-image: url("../images/parallex/light/city_trafic.jpg");
}

/* DARK */
html[data-theme="dark"] .parallax.hero{
    background-image: url("../images/parallex/dark/hero.jpg");
}
html[data-theme="dark"] .parallax.mid{
    background-image: url("../images/parallex/dark/kDP_lvDzh2c.jpg");
}
html[data-theme="dark"] .parallax.cta{
    background-image: url("../images/parallex/dark/krakow.jpg");
}
html[data-theme="dark"] .parallax.end{
    background-image: url("../images/parallex/dark/katowice_airport.jpg");
}


/* Vnútro hero */
.hero-wrap{
    position:relative;
    z-index:1;
}

.hero-content{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
    align-items:center;
}

.headline{
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.02;
    margin:0 0 10px;
    letter-spacing: -.8px;
}

.sub{
    margin:0 0 18px;
    color: var(--muted);
    font-size: 16px;
    max-width: 62ch;
}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin: 0 0 18px;}
.chip{
    padding:10px 12px;
    border-radius:999px;
    background: rgba(255,255,255,.75);
    border:1px solid var(--stroke);
    color: var(--muted);
    font-size: 13px;
    box-shadow: var(--shadow2);
}
html[data-theme="dark"] .chip{
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: none;
}

.glass{
    background: rgba(255,255,255,.78);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    backdrop-filter: blur(14px) saturate(140%);
}
html[data-theme="dark"] .glass{
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.14);
}

.quick{display:grid; gap:10px;}
.mini{
    display:flex; justify-content:space-between; gap:10px;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--stroke);
    background: rgba(255,255,255,.72);
}
html[data-theme="dark"] .mini{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
}

/* CONTENT SECTIONS */
section.content{padding: 66px 0}
.section-title{
    font-size: 28px; margin:0 0 12px;
    letter-spacing: -.3px;
}
.lead{color:var(--muted); margin:0 0 24px; max-width: 76ch}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}

.card{
    background: var(--card);
    border:1px solid var(--stroke);
    border-radius: var(--radius);
    padding:16px;
    box-shadow: var(--shadow2);
}
html[data-theme="dark"] .card{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
}

.service{display:flex; gap:12px; align-items:flex-start;}
.icon{
    width:44px;height:44px;border-radius:14px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(31,111,235,.14), rgba(200,162,75,.14));
    border:1px solid var(--stroke);
    flex:0 0 auto;
}
html[data-theme="dark"] .icon{
    /*background: linear-gradient(135deg, rgba(58,166,255,.22), rgba(32,227,178,.18));*/
    /*border:1px solid rgba(255,255,255,.12);*/
}

.service h3{margin:0 0 6px;font-size:16px}
.service p{margin:0;color:var(--muted)}

/* Controls + Tables */
.controls{display:flex; flex-direction:column; gap:12px;}

.row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-start; /* namiesto flex-end */
}
.row > .field{flex:1; min-width: 240px}

.help{
    margin-top:8px;
    min-height: 18px;   /* rezervuje miesto, aby sa nič nehýbalo */
    font-size: 13px;
    color: var(--muted2);
}

label{display:block; margin:0 0 8px; color:var(--muted); font-size:13px}

select, input, textarea{
    width:100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: #fff;
    color: var(--text);
    outline: none;
    transition: .12s ease;
    box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea{
    background: rgba(10,16,40,.55);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: none;
    color: var(--text);
}
select:focus, input:focus, textarea:focus{
    box-shadow: var(--ring);
    border-color: rgba(31,111,235,.55);
}
textarea{resize: vertical}

table{width:100%; border-collapse:separate; border-spacing:0}
th, td{
    padding: 12px 14px;
    border-bottom: 1px solid var(--stroke);
    text-align:left;
    vertical-align:top;
}
thead th{
    position:sticky; top:0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--stroke);
    z-index:1;
}
html[data-theme="dark"] thead th{
    background: rgba(10,16,40,.85);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.price{font-weight:800}
.note{font-size: 13px; color: var(--muted2)}

/* Toggle (dir-toggle) */
.dir-toggle{
    position:relative;
    display:inline-flex;
    gap:6px;
    padding:6px;
    border-radius:999px;
    background: rgba(255,255,255,.90);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow2);
    flex-wrap:wrap;
    max-width:100%;
}
html[data-theme="dark"] .dir-toggle{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:none;
    backdrop-filter: blur(10px);
}
.dir-toggle input{
    position:absolute;
    width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path: inset(50%);
    white-space:nowrap;
}
.dir-toggle label{
    cursor:pointer;
    user-select:none;
    padding:10px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    color: var(--muted);
    display:flex; align-items:center; gap:8px;
    white-space:nowrap;
    transition: .12s ease;
}
.dir-toggle label:hover{background: rgba(15,23,42,.06); color:var(--text)}
html[data-theme="dark"] .dir-toggle label:hover{background: rgba(255,255,255,.06); color:var(--text)}

.dir-toggle .dot{width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.6}
.dir-toggle input:checked + label{
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color: white;
    box-shadow: 0 16px 32px rgba(31,111,235,.18);
}
html[data-theme="dark"] .dir-toggle input:checked + label{
    box-shadow: 0 18px 40px rgba(58,166,255,.18);
}
.dir-toggle input:checked + label .dot{opacity:1}

/* Footer */
footer{
    padding: 34px 0;
    border-top: 1px solid var(--stroke);
    background: rgba(255,255,255,.55);
}
html[data-theme="dark"] footer{
    background: rgba(0,0,0,.15);
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Mobile: parallax fallback */
@media (max-width: 920px){
    .menu{display:none}
    .burger{display:flex}
    .hero-content{grid-template-columns: 1fr}
    .grid3{grid-template-columns: 1fr}
    .grid2{grid-template-columns: 1fr}
    .row > .field{min-width: 100%}

    .parallax{
        min-height: 78vh;
        padding: 78px 0 52px;
        background-attachment: scroll; /* iOS/Android fallback */
    }
}

.divider{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(15,23,42,.18), transparent);
    margin: 14px 0;
}
html[data-theme="dark"] .divider{
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.theme-icon{
    font-size:14px;
    line-height:1;
    opacity:.55;
    transition: opacity .18s ease, transform .18s ease;
}

html[data-theme="light"] .theme-icon.sun{
    opacity:1;
    transform: scale(1.05);
}

html[data-theme="dark"] .theme-icon.moon{
    opacity:1;
    transform: scale(1.05);
}

/* Theme switch */
.theme-switch{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    font: inherit;

    position:relative;
    width:84px;
    height:34px;
    border-radius:999px;

    border:1px solid var(--stroke);
    background: var(--card);
    box-shadow: var(--shadow2);

    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color: transparent;

    padding:0;
    margin:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    line-height:0; /* dôležité proti “nafukovaniu” */
}

.theme-switch:focus-visible{
    outline:none;
    box-shadow: var(--shadow2), var(--ring);
}

.theme-switch .icon{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    font-size:14px;
    line-height:1;
    pointer-events:none;
    opacity:0;
    transition: opacity .18s ease, transform .18s ease;
    border: none !important;
    background: none !important;
}

.theme-switch .icon.left{ left:10px; }
.theme-switch .icon.right{ right:10px; }

.theme-switch .knob{
    position:absolute;
    top:3px;
    left:3px; /* light */
    width:28px;
    height:28px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 10px 22px rgba(31,111,235,.20);
    transition: left .18s ease, transform .18s ease;
}

/* Light: knob vľavo + vidno mesiac vpravo */
html[data-theme="light"] .theme-switch .icon.right{
    opacity:1;
    transform: translateY(-50%) scale(1.06);
}

/* Dark: knob vpravo + vidno slnko vľavo */
html[data-theme="dark"] .theme-switch .knob{
    left: calc(100% - 31px);
}
html[data-theme="dark"] .theme-switch .icon.left{
    opacity:1;
    transform: translateY(-50%) scale(1.06);
}

/* Contact box v burger menu */

.mobile-contact{
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--stroke);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* fallback pre veľmi úzke mobily */
@media (max-width: 360px){
    .mobile-contact{
        grid-template-columns: 1fr;
    }
}

.mc-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--stroke);
    background: var(--card);
    box-shadow: var(--shadow2);
}

html[data-theme="dark"] .mc-item{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: none;
}

.mc-ic{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background: linear-gradient(135deg, rgba(31,111,235,.14), rgba(200,162,75,.14));
    border:1px solid var(--stroke);
    flex:0 0 auto;
}

html[data-theme="dark"] .mc-ic{
    background: linear-gradient(135deg, rgba(58,166,255,.22), rgba(124,77,255,.18));
    border:1px solid rgba(255,255,255,.12);
}

.mc-txt{display:flex; flex-direction:column; line-height:1.1}
.mc-txt strong{font-size:14px}
.mc-txt small{font-size:12px; color:var(--muted)}