/* ==========================================================
   TECHCOM Template v1.0
   style.css
========================================================== */

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
    color:#303030;
    background:#ffffff;
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

:root{

    --primary:#0054a6;
    --secondary:#0b223d;
    --accent:#f58220;

    --white:#ffffff;
    --light:#f5f7fb;
    --text:#444;

    --radius:22px;

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

    --transition:.35s;

    --container:1450px;

}


/***************************************************
    CONTAINER
****************************************************/

.tc-container{
    width:100%;
    max-width:var(--container);
    margin:auto;
    padding:0 25px;
}


/***************************************************
    HERO
****************************************************/

.tc-hero{
    position:relative;
    width:100%;
    height:620px;
    overflow:hidden;
    background:#0b223d url("../images/hero/hero.webp") center center no-repeat;
    background-size:cover;
}

.tc-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,30,60,.80),
            rgba(0,45,80,.45),
            rgba(0,45,80,.05)
        );
}

.tc-hero:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:30px;
    background:linear-gradient(to bottom, rgba(1,27,53,0) 0%, rgba(1,27,53,.65) 55%, #011b35 100%);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    pointer-events:none;
}

.tc-hero-inner{
    position:relative;
    height:100%;
}

.tc-hero-logo{
    position:absolute;
    top:5px;
    left:25px;
    z-index:3;
}

.tc-hero-content{
    position:relative;
    z-index:2;
    padding-top:110px;
    max-width:1000px;
    color:#fff;
}

.tc-page{
    width:100%;
    overflow:hidden;
}

.tc-hero h1{
    font-size:56px;
    line-height:1.1;
    margin-bottom:26px;
    font-weight:700;
    white-space:nowrap;
}

.tc-hero p{
    font-size:23px;
    margin-bottom:45px;
    color:#d7dbe0;
}

.tc-hero-logo img{
    width:220px;
    display:block;
}

.tc-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:40px;

    background:var(--accent);

    color:#fff;

    font-size:18px;

    font-weight:700;

    transition:var(--transition);

}

.tc-btn:hover{

    transform:translateY(-3px);

}


/***************************************************
    SEKCE
****************************************************/

section{

    padding:100px 0;

}

.tc-title{
    text-align:center;
    margin-bottom:70px;
}

.tc-services .tc-title{
    margin-bottom:30px;
}

.tc-title h2{
    font-size:48px;
    color:var(--white);
}
.tc-title p{
    font-size:18px;
    color:#c9d2e2;
    margin-top:12px;
}

/***************************************************
    GRID
****************************************************/

.tc-grid{

    display:grid;

    gap:30px;

}

.tc-grid-5{

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

}

.tc-grid-3{

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

}


/***************************************************
    CARD
****************************************************/

.tc-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.tc-card:hover{

    transform:translateY(-10px);

}

.tc-card-image{

    overflow:hidden;

    height:260px;

}

.tc-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.tc-card:hover .tc-card-image img{

    transform:scale(1.08);

}

.tc-card-body{

    position:relative;

    padding:35px;

}

.tc-card-icon{

    position:absolute;

    top:-40px;

    left:35px;

    width:78px;

    height:78px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

}

.tc-card-icon img{

    width:38px;

}

.tc-card h3{

    margin-top:30px;

    margin-bottom:15px;

    font-size:28px;

    color:var(--secondary);

}

.tc-card p{

    color:#666;

    min-height:90px;

}

.tc-card-more{

    margin-top:30px;

    display:flex;

    justify-content:flex-end;

}

.tc-card-more span{

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    transition:.3s;

}

.tc-card:hover .tc-card-more span{

    transform:translateX(5px);

}


/***************************************************
    CONTENT
****************************************************/

.tc-content{

    padding:100px 0;

}


/***************************************************
    FOOTER
****************************************************/

.tc-footer{
    background:#FFFFFF;
    color:#0d2038;
    padding:60px 0 0;
}
.tc-footer-points{
    display:flex;
    background:#0a1626;
    border-radius:18px;
    padding:34px 10px;
    margin-bottom:40px;
}
.tc-footer-point{
    display:flex;
    align-items:flex-start;
    gap:16px;
    flex:1;
    padding:0 16px;
    border-right:1px solid rgba(255,255,255,.12);
}
.tc-footer-point:last-child{
    border-right:none;
}
.tc-footer-icon{
    width:54px; 
    height:54px;
    flex-shrink:0;
}
.tc-footer-icon.orange{ color:#ff9b2d; }
.tc-footer-icon.blue{ color:#2f9cff; }
.tc-footer-icon.cyan{ color:#22d0ff; }
.tc-footer-icon.purple{ color:#8d5dff; }
.tc-footer-point-text h4{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#fff;
    margin:0 0 6px;
}
.tc-footer-point-text p{
    font-size:13px;
    color:#9aa7b8;
    margin:0;
    line-height:1.5;
}
.tc-footer-bottom{
    border-top:1px solid rgba(0,0,0,.08);
    padding:22px 0;
    text-align:center;
}
.tc-footer-bottom p{
    margin:0;
    font-size:13px;
    color:#7a8494;
}
/***************************************************
    ANIMACE
****************************************************/

.fade-up{

    opacity:0;

    transform:translateY(40px);

}

.fade-up.show{

    opacity:1;

    transform:none;

    transition:.7s;

}

/*==================================================
    NAŠE SLUŽBY
==================================================*/

.tc-services{
background:linear-gradient(
        180deg,
        #011b35 0%,
        #37bff4 100%
    );
    padding:10px 0 10px;
}

.tc-services-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
}

.tc-service-card{

    display:flex;
    flex-direction:column;

    background:#0c1f39;

    border-radius:22px;

    overflow:hidden;

    text-decoration:none;

    color:#fff;

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

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

    transition:.35s;

}

.tc-service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.50);

}

.tc-service-image{

    height:260px;
    overflow:hidden;
    position:relative;

}

.tc-service-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:.5s;

}

.tc-service-card:hover img{

    transform:scale(1.08);

}

.tc-service-image:after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:120px;

    background:linear-gradient(to top,#0c1f39,transparent);

}

.tc-service-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:28px 28px 22px;
}
.tc-service-content h3{
    color:#fff;
    font-size:22px;
    margin:0 0 15px;
}
.tc-service-content p{
    flex:1;
    color:#c6d0de;
    line-height:1.6;
    font-size:15px;
    margin:0;
}

.blue{border-color:#2f9cff;}
.purple{border-color:#8d5dff;}
.orange{border-color:#ff9b2d;}
.cyan{border-color:#22d0ff;}
.green{border-color:#00d3a8;}

/*==================================================
    RYCHLÝ PŘÍSTUP
==================================================*/
.tc-quicklinks{
    background:linear-gradient(180deg, #37bff4 0%, #FFFFFF 100%);
    padding:10px 0;
}

.tc-quick-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.tc-quick-tile{

    display:flex;
    flex-direction:column;

    background:#fff;

    border-radius:var(--radius);

    padding:50px 30px 35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.tc-quick-tile:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.14);

}

.tc-quick-icon{

    width:64px;
    height:64px;

    margin:0 auto 22px;

    border-radius:50%;

    background:var(--primary);

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

    flex-shrink:0;

}

.tc-quick-icon svg{

    width:26px;
    height:26px;

}

.tc-quick-tile h3{

    font-size:19px;

    color:var(--secondary);

    margin-bottom:12px;

}

.tc-quick-tile p{

    color:#666;

    font-size:14px;

    line-height:1.5;

    flex:1;

    margin-bottom:24px;

}

.tc-quick-more{
    color:var(--accent);

    font-weight:700;

    font-size:14px;

    transition:var(--transition);

}

.tc-quick-tile:hover .tc-quick-more{

    color:var(--primary);

}

/* ==========================================================
   SPOLEČNÉ SEKCE
========================================================== */

.tc-section{
    padding:10px 0;
}
.tc-services{
    padding:10px 0 60px;
}

.tc-usermenu{
    background:#0d2038;
    border-radius:14px;
    padding:6px 10px;
    margin:0 auto 30px;
    max-width:870px;
}
.tc-usermenu ul{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
}
.tc-usermenu li{
    display:flex;
}
.tc-usermenu a{
    display:block;
    padding:12px 18px;
    font-size:14px;
    font-weight:600;
    color:#dbe4ee;
    text-decoration:none;
    border-radius:8px;
    transition:var(--transition);
}
.tc-usermenu a:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}
.tc-usermenu li.active a{
    background:var(--primary);
    color:#fff;
}
.tc-refs-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin:40px 0;
}
.tc-about{
    padding:20px 0;
}
.tc-about-intro{
    max-width:760px;
    margin:0 auto 60px;
    text-align:center;
}
.tc-about-intro h2{
    font-size:36px;
    color:var(--secondary);
    margin-bottom:24px;
}
.tc-about-intro p{
    font-size:16px;
    line-height:1.7;
    color:var(--text);
    margin-bottom:18px;
}
.tc-doclist{
    list-style:none;
    margin:30px 0;
    padding:0;
    max-width:720px;
}
.tc-doc-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid #eef1f6;
    text-decoration:none;
    transition:var(--transition);
    border-radius:10px;
}
.tc-doc-item:hover{
    background:var(--light);
}
.tc-doc-icon{
    width:22px;
    height:22px;
    flex-shrink:0;
    color:var(--accent);
}
.tc-doc-item span{
    font-size:15px;
    color:var(--secondary);
    font-weight:500;
}
.tc-doc-item .tc-doc-alt{
    margin-left:auto;
    font-size:12px;
    font-weight:700;
    color:var(--primary);
    text-transform:uppercase;
}
.tc-doc-note{
    max-width:720px;
    font-size:12px;
    line-height:1.6;
    color:#8a97a8;
    margin-top:40px;
}

.tc-page-intro{
    max-width:760px;
    margin:20px auto 50px;
    text-align:center;
}
.tc-page-intro h1{
    font-size:36px;
    color:var(--secondary);
    margin-bottom:20px;
}
.tc-page-intro p{
    font-size:16px;
    line-height:1.7;
    color:var(--text);
}
.tc-category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:60px;
}
.tc-category-card{
    display:block;
    background:#0c1f39;
    border-radius:22px;
    overflow:hidden;
    text-decoration:none;
    border:2px solid rgba(255,255,255,.08);
    box-shadow:0 20px 45px rgba(0,0,0,.20);
    transition:.35s;
}
.tc-category-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.30);
}
.tc-category-image{
    height:180px;
    overflow:hidden;
}
.tc-category-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}
.tc-category-card:hover .tc-category-image img{
    transform:scale(1.08);
}
.tc-category-card h4{
    text-align:center;
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:18px 10px;
    margin:0;
}
.tc-benefits{
    background:var(--light);
    border-radius:var(--radius);
    padding:50px;
    margin-bottom:50px;
}
.tc-benefits h2{
    font-size:26px;
    color:var(--secondary);
    margin-bottom:30px;
    text-align:center;
}
.tc-benefits-list{
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 40px;
    padding:0;
    max-width:900px;
    margin:0 auto;
}
.tc-benefits-list.tc-cols-1{
    grid-template-columns:1fr;
    max-width:520px;
}
.tc-benefits-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:15px;
    line-height:1.5;
    color:var(--secondary);
}
.tc-benefits-list svg{
    width:22px;
    height:22px;
    flex-shrink:0;
    color:var(--primary);
    margin-top:1px;
}
.tc-page-cta{
    text-align:center;
    margin-bottom:20px;
}
.tc-page-cta a{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    font-size:15px;
    padding:16px 34px;
    border-radius:12px;
    text-decoration:none;
    transition:var(--transition);
}
.tc-page-cta a:hover{
    background:var(--primary);
}

.tc-info-block{
    max-width:820px;
    margin:0 auto 30px;
}
.tc-info-block h3{
    font-size:20px;
    color:var(--secondary);
    margin-bottom:12px;
}
.tc-info-block p{
    font-size:15px;
    line-height:1.7;
    color:var(--text);
}
.tc-pricing-section{
    margin:60px 0;
}
.tc-pricing-section h2{
    font-size:26px;
    color:var(--secondary);
    text-align:center;
    margin-bottom:8px;
}
.tc-pricing-section h3.tc-pricing-sub{
    font-size:16px;
    font-weight:700;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.5px;
    text-align:center;
    margin-bottom:30px;
}
.tc-pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    max-width:900px;
    margin:0 auto;
}
.tc-pricing-grid.tc-cols-2{
    grid-template-columns:repeat(2,1fr);
    max-width:620px;
}
.tc-pricing-grid.tc-cols-4{
    grid-template-columns:repeat(4,1fr);
    max-width:1100px;
}
.tc-price-card.tc-price-custom{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.tc-price-custom p{
    padding:24px 18px;
    font-size:14px;
    line-height:1.5;
    color:var(--secondary);
    font-weight:700;
    margin:0;
}
.tc-price-card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    text-align:center;
    transition:var(--transition);
}
.tc-price-card:hover{
    transform:translateY(-6px);
}
.tc-price-card h4{
    background:var(--secondary);
    color:#fff;
    font-size:14px;
    letter-spacing:.5px;
    padding:16px 10px;
    margin:0;
}
.tc-price-row{
    display:flex;
    justify-content:space-between;
    padding:12px 20px;
    border-bottom:1px solid #eef1f6;
    font-size:14px;
    color:var(--text);
}
.tc-price-row b{
    color:var(--secondary);
}
.tc-price-amount{
    padding:22px 10px 26px;
    font-size:26px;
    font-weight:800;
    color:var(--primary);
}
.tc-price-amount small{
    display:block;
    font-size:12px;
    font-weight:400;
    color:#8a97a8;
    margin-top:4px;
}
.tc-pricing-note{
    text-align:center;
    font-size:13px;
    color:#8a97a8;
    margin-top:20px;
}
.tc-pricing-note a{
    color:var(--primary);
    font-weight:600;
}