/* =====================================================
   STEJOWEB 2026
   Premium Dark Theme
===================================================== */

:root{

--bg:#090909;
--bg2:#111111;
--card:#171717;
--card2:#1d1d1d;

--gold:#d9b45a;
--gold2:#f5dda1;

--text:#ffffff;
--text2:#c8c8c8;

--border:rgba(255,255,255,.08);

--radius:22px;

--shadow:
0 20px 45px rgba(0,0,0,.35);

--transition:.35s;

}

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

html{

scroll-behavior:smooth;

}

body{

background:
radial-gradient(circle at top,#1d1710 0%,#090909 45%);

font-family:'Inter',sans-serif;

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:min(1180px,92%);

margin:auto;

padding:0 15px;

}

.site-header .navigation{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding:0 15px;
}

.site-header{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(18px);

background:rgba(9,9,9,.70);

border-bottom:1px solid rgba(255,255,255,.05);

}

.navigation{

display:flex;

justify-content:space-between;

align-items:center;

height:82px;

}

.brand{

display:flex;

align-items:center;

gap:14px;

font-size:26px;

font-weight:800;

letter-spacing:1px;

}

.brand-mark{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:linear-gradient(135deg,var(--gold),#8f6d2b);

}

.brand-mark svg{

width:22px;

fill:white;

}

.nav-links{

display:flex;

gap:35px;

align-items:center;

}

.nav-links a{

transition:var(--transition);

font-weight:500;

}

.nav-links a:hover{

color:var(--gold2);

}

.nav-cta{

padding:12px 22px;

border-radius:14px;

background:linear-gradient(135deg,var(--gold),#b9892d);

color:#111;

font-weight:700;

}

.nav-cta:hover{

transform:translateY(-2px);

box-shadow:0 12px 30px rgba(217,180,90,.35);

}

/* =====================================================
   HERO
===================================================== */

.hero{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:80px;

min-height:calc(100vh - 82px);

position:relative;

}

.hero::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-220px;
    top:-180px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(217,180,90,.18),
        transparent 70%);
    filter:blur(45px);
    animation:heroGlow 8s ease-in-out infinite alternate;
    z-index:-1;
    pointer-events:none;

    display:none;
}
.hero{
    overflow:hidden;
}

.eyebrow{

display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;

color:var(--gold2);

font-size:14px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

}

.eyebrow span{

width:40px;

height:2px;

background:var(--gold);

}

.hero h1{

font-size:68px;

line-height:1.05;

font-weight:800;

margin-bottom:30px;

}

.hero h1 em{

font-style:normal;

color:var(--gold2);

}

.hero-text{

font-size:20px;

max-width:620px;

color:var(--text2);

margin-bottom:45px;

}

.hero-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.button{

padding:16px 32px;

border-radius:14px;

font-weight:700;

transition:.35s;

display:inline-flex;

align-items:center;

justify-content:center;

will-change:transform;

}

.button-primary{

background:linear-gradient(135deg,var(--gold),#b78528);

color:#111;

}

.button-primary:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 20px 45px rgba(217,180,90,.35);
}
.button-quiet{

border:1px solid rgba(255,255,255,.12);

background:rgba(255,255,255,.03);

}

.button-quiet:hover{

border-color:var(--gold);

background:rgba(255,255,255,.06);

}

.hero-panel{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:26px;

padding:28px;

backdrop-filter:blur(18px);

box-shadow:var(--shadow);

transition:.35s;

}

.hero-panel:hover{

transform:translateY(-8px);

border-color:rgba(217,180,90,.35);

}

.panel-topline{

display:flex;

align-items:center;

margin-bottom:25px;

font-size:14px;

color:#d5d5d5;

}

.panel-topline span:last-child{

margin-left:auto;

color:var(--gold2);

font-weight:700;

}

.pulse-dot{

width:10px;

height:10px;

background:#62ff62;

border-radius:50%;

margin-right:12px;

animation:pulse 2s infinite;

}

.panel-grid{

display:grid;

gap:18px;

}

.mini-card{

display:flex;

align-items:center;

gap:18px;

padding:18px;

border-radius:18px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.05);

transition:.3s;

}

.mini-card:hover{

transform:translateX(6px);

border-color:rgba(217,180,90,.30);

}

.mini-icon{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

border-radius:14px;

background:linear-gradient(135deg,#2b2416,#4b3a16);

}

.mini-card b{

margin-left:auto;

font-size:22px;

color:var(--gold2);

}

.panel-footer{

display:flex;

align-items:center;

margin-top:30px;

font-size:14px;

color:#bbb;

}

.panel-line{

flex:1;

height:1px;

background:rgba(255,255,255,.08);

margin:0 18px;

}

/* =====================================================
   SERVICES
===================================================== */

.services-section{

background:linear-gradient(
180deg,
transparent,
rgba(255,255,255,.02),
transparent);

}

.section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-heading h2{

font-size:54px;

margin-bottom:25px;

font-weight:800;

}

.section-heading h2 em{

font-style:normal;

color:var(--gold2);

}

.section-heading p{

color:var(--text2);

font-size:18px;

line-height:1.8;

}

.services-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.service-box{

background:linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:30px;

transition:.35s;

position:relative;

overflow:hidden;

}

.service-box::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
var(--gold),
transparent);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.service-box:hover{

transform:translateY(-12px);

border-color:rgba(217,180,90,.30);

box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.service-box:hover::before{

transform:scaleX(1);

}

.service-icon{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

border-radius:20px;

margin-bottom:30px;

color:#d4af37;

background:linear-gradient(
135deg,
#2d2414,
#55401d);

}

.service-box h3{

font-size:24px;

margin-bottom:18px;

}

.service-box p{

color:var(--text2);

line-height:1.8;

}

/* =====================================================
   PROJECTS
===================================================== */

.projects-section{

padding:120px 0;

background:
linear-gradient(
180deg,
transparent,
rgba(255,255,255,.015),
transparent);

}

.project-card{

background:linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

border:1px solid rgba(255,255,255,.08);

border-radius:26px;

overflow:hidden;

transition:.35s;

position:relative;

}

.project-card:hover{
    transform:translateY(-12px) scale(1.02);
    border-color:rgba(217,180,90,.45);
    box-shadow:
        0 25px 55px rgba(0,0,0,.35),
        0 0 25px rgba(217,180,90,.15);
}
.project-image::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(217,180,90,.20),
    transparent 70%);
    filter:blur(18px);
    animation:projectGlow 7s ease-in-out infinite alternate;

    display:none;
}
.project-content h3{

font-size:30px;

margin-bottom:16px;

}

.project-content p{

color:var(--text2);

line-height:1.8;

}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,255,0,.5);

}

70%{

box-shadow:0 0 0 12px rgba(0,255,0,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,255,0,0);

}

}

@keyframes heroGlow{

from{

transform:scale(1);

opacity:.45;

}

to{

transform:scale(1.18);

opacity:.95;

}

}

@keyframes projectGlow{

from{

transform:translateY(-10px);

}

to{

transform:translateY(18px);

}

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

gap:60px;

}

.services-grid{

grid-template-columns:repeat(2,1fr);

}

.projects-grid{

grid-template-columns:repeat(2,1fr);

}

}

.hero h1{

font-size:46px;

}

.section-heading h2{

font-size:38px;

}

.services-grid{

grid-template-columns:1fr;

}

.projects-grid{

grid-template-columns:1fr;

}

.hero-actions{

flex-direction:column;

}

.button{

width:100%;

}
.nav-links.active{
display:flex;
}

}

/* ===== STATS ===== */

.stats-section{
    padding:70px 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.stat-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:35px;
    text-align:center;
    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-8px);
    border-color:#4f8cff;
    box-shadow:0 15px 35px rgba(79,140,255,.25);
}

.stat-card h2{
    font-size:3rem;
    font-weight:800;
    color:#4f8cff;
    margin-bottom:10px;
}

.stat-card p{
    color:#cfd6e6;
    font-size:1rem;
}

.service-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:28px;
transition:.3s;
}
.service-card:hover{
transform:translateY(-8px);
}

.contact-form{
display:flex;
flex-direction:column;
gap:20px;
margin-top:50px;
}

.contact-form input,
.contact-form textarea{
background:#181818;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
padding:18px;
color:#fff;
font-size:16px;
font-family:inherit;
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border-color:#d9b45a;
}

.contact-form button{
width:100%;
}
.call-button{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    z-index:9999;
    transition:.3s;
}

.call-button:hover{
    transform:scale(1.08);
}

@media (min-width:769px){
    .call-button{
        display:none;
    }
}


.project-image{
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:64px;
    background:linear-gradient(135deg,#1d1d1d,#2d2d2d);
}

.project-content{
    padding:30px;
}

.service-box,
.project-card,
.module-card{
    transition:all .35s ease;
}

.service-box:hover,
.module-card:hover{
    transform:translateY(-8px);
}


/* ===== LOGO ===== */

.brand-logo{
    height:42px;
    width:auto;
    display:block;
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    padding-left:8px;
}

.brand-text{
    font-size:18px;
    font-weight:800;
    color:#ffffff;
    letter-spacing:1px;
}

.site-header .brand{
    display:flex;
    align-items:center;
}

.site-footer {
    text-align: center;
}

.site-footer .brand{
    display:flex;
    align-items:center;
    justify-content:center;
}

.reviews{
    padding:40px 20px 90px;
    text-align: center;
}
.reviews h2{
    font-size:42px;
    margin-bottom:15px;
    color:#ffffff;
    text-align: center;
}

.reviews-subtitle {
    text-align: center;
    color: #dcdcdc;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.6;
}
.reviews-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    max-width:1200px;
    margin:auto;
}

.review-card{
    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.review-card:hover{
    transform:translateY(-8px);
}

.stars{
    font-size:28px;
    color:#FFD700;
    margin-bottom:20px;
}

.review-card p{
    line-height:1.8;
    color:#333;
}

.review-card h3{
    margin-top:25px;
    color:#0d47a1;
}
.reviews-subtitle{
    color: #dcdcdc !important;
    font-size: 15px;
    opacity: 1 !important;
}

.site-footer .footer-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:15px;
    text-align:center;

}

.site-footer p{
    text-align: center;
    width: 100%;
    margin: 15px 0;
}

.site-footer .brand{
    justify-content: center;
}

.footer-content p{
    margin:0;
    text-align:center;
}

.back-top{
    display:inline-block;
    margin-top:10px;
}

/* ==========================
   MOBILE
========================== */

.menu-toggle{
    display:none !important;
}

@media (max-width:768px){

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

main,
section,
header,
footer{
    width:100%;
    max-width:100%;
}
.site-header{
    padding:10px 0;
}

.navigation{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:12px;
    height:auto;
    padding:0 15px;
    flex-wrap:wrap;
    overflow:hidden;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding-left:0;
}

.brand-logo{
    height:38px;
    width:auto;
}

.brand-text{
    font-size:16px;
    white-space:nowrap;
}

.nav-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;

    width:100%;
    margin:10px 0 0;
    padding:0;

    position:static;
    background:transparent;
    box-shadow:none;
}

.nav-links a{
    flex:0 0 auto;
    font-size:14px;
    padding:4px 6px;
}
.nav-cta{
    display:none;
}

.hero,
.container,
.services-grid,
.projects-grid,
.modules-grid,
.reviews-grid,
.review-card{
    width:100%;
    max-width:100%;
}

.hero{
    grid-template-columns:1fr;
    gap:40px;
    min-height:auto;
    padding:50px 0;
}

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

.hero-actions{
    flex-direction:column;
}

.button{
    width:100%;
}

.services-grid,
.projects-grid,
.modules-grid,
.reviews-grid{
    grid-template-columns:1fr;
}

img{
    max-width:100%;
    height:auto;
}

*{
    box-sizing:border-box;
}
}

html,
body{
    overflow-x:hidden;
}

body{
    position:relative;
}
/* ===== OPRAVA CHROME MOBILE HORIZONTAL SCROLL ===== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
}

main,
section,
header,
footer{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

.container{
    width:min(1180px,92%);
    max-width:100%;
    margin:auto;
}

.hero,
.hero-panel,
.projects-grid,
.services-grid,
.modules-grid,
.reviews-grid{
    max-width:100%;
    overflow:hidden;
}

.hero::before,
.project-image::after{
    pointer-events:none;
    max-width:100%;
}

img,
video,
iframe{
    max-width:100%;
    height:auto;
    display:block;
}

@media (max-width:768px){

    *{
        max-width:100%;
    }

    .hero{
        grid-template-columns:1fr;
        gap:35px;
        overflow:hidden;
    }

    .hero-panel{
        overflow:hidden;
    }

    .navigation{
        width:100%;
        overflow:hidden;
    }

    .brand{
        min-width:0;
    }

    .brand-text{
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

.service-icon i{
    font-size:34px;
    color:#d9b45a;
}

.service-box:hover .service-icon i{
    transform:scale(1.12);
    transition:.3s;
}

/* ===== Scroll Animations ===== */

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}
.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.section-heading h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    margin:18px auto 0;
    border-radius:10px;
    background:linear-gradient(90deg,#d9b45a,#f5dda1);
}