body, a { background: unset; color: unset; }



@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('index.inter.woff2') format('woff2');
}



* {
    margin:                             0;
    padding:                            0;
    box-sizing:                         border-box;
    user-select:                        none !important;
}



html {
 /* scroll-behavior:                    smooth; */  /* smooth enabled via javascript to navigation links only */
    scroll-padding-top:                 80px; /* offset from top (from navigation) */
    scrollbar-gutter:                   stable; /* prevent move page when scrollbar hidden */
}



body {
    font-family:                        'Inter', sans-serif;
    font-weight:                        400;
    letter-spacing:                     0.2px;
    background:                         #050505;
    color:                              #ffffff;
    overflow-x:                         hidden;
    padding-top:                        100px;
    cursor:                             default;
    margin:                             0;
    min-height:                         100vh;
    display: flex;
    flex-direction: column;
}



body::before {
    width:                              100vw;
    content:                            '';
    position:                           fixed;
    inset:                              0;
    background-image:                   radial-gradient(rgba(0, 255, 255, 0.18), rgba(0, 102, 255, 0.10), rgba(5, 5, 5, 0.95)), url('index.jpg');
    background-position:                center; 
    background-size:                    cover;
    filter:                             brightness(0.55);
    z-index:                            -3;
}



a {
    text-decoration:                    none;
}






/* BACKGROUND GLOW GRADIENT */

.background-glow {
    position:                           fixed;
    width:                              600px;
    height:                             600px;
    border-radius:                      20%;
    filter:                             blur(120px);
    z-index:                            -1;
}

.glow1 {
    top:                                -200px;
    left:                               -200px;
    background:                         rgba(0, 255, 255, 0.10);
}

.glow2 {
    bottom:                             -250px;
    right:                              -200px;
    background:                         rgba(0 ,100, 255, 0.12);
}






/* NAVIGATION */

.navigation {
    position:                           fixed;
    top:                                0;
    left:                               0;
    width:                              100vw;
    z-index:                            9999;
    background:                         rgba(5, 5, 5, 0.92);
    backdrop-filter:                    none; // blur(18px);
    -webkit-backdrop-filter:            none; // blur(18px);
    border-bottom:                      1px solid rgba(255, 255, 255, 0.06);
}

.navigation-inner {
    max-width:                          1400px;
    margin:                             auto;
    display:                            flex;
    justify-content:                    space-between;
    align-items:                        center;
    padding:                            22px 40px;
}

.navigation-logo,
.navigation-logo a {
    font-size:                          22px;
    font-weight:                        400;
    color:                              #00ffff;
    letter-spacing:                     1px;
//  text-shadow:                        0 0 20px rgba(0,255,255,0.4);
}

.navigation-logo-icon,
.navigation-logo-icon a {
    color:                              #00ffff;
    vertical-align:                     2px;
}

.navigation-logo-text,
.navigation-logo-text a {
    color:                              #ffffff;
}

.navigation-links {
    display:                            flex;
    gap:                                35px;
}

.navigation-links a {
    color:                              #ffffff;
 /* transition:                         0.1s; */
}

.navigation-links a:hover {
    color:                              #00ffff;
}

.navigation-links a.active {
    color:                              #00ffff;
}






/* MAIN FOR ALL SECTIONS */

main {
    flex:                               1;
}






/* SECTION: HOME */

.home {
    min-height:                         100vh;
    position:                           relative;
    scroll-margin-top:                  100px; /* maring from top what need adjustment */
}

.home-content {
    max-width:                          1400px;
    margin:                             auto;
    display:                            grid;
    grid-template-columns:              1fr 500px;
    gap:                                80px;
    align-items:                        center;
    padding:                            100px 40px;
}

.tag {
    color:                              #00ffff;
    letter-spacing:                     5px;
    font-size:                          13px;
}

.home h1 {
    font-weight:                        400;
    margin-top:                         20px;
    font-size:                          82px; /* font-size: 64px;  */      
    line-height:                        1.05; /* line-height: 1.1; */    
    max-width:900px;
}

.description {
    margin-top:                         35px;
    font-size:                          21px;
    line-height:                        1.8;
    color:                              #999999;
    max-width:                          700px;
}

.home-buttons {
    margin-top:                         50px;
    display:                            flex;
    gap:                                20px;
}



.button-primary {
    font-weight:                        400;
    display:                            inline-block;
    border:                             1px solid #00ffff;
    background:                         #00ffff;
    color:                              #000000;
    padding:                            18px 34px;
    border-radius:                      14px;
    text-decoration:                    none;
 /* transition:                         0.1s; */
}

.button-primary:hover {
 /* transform:                          translateY(-4px); */
    border-color:                       #00ffff;
    color:                              #00ffff;
    background:                         rgba(100, 255, 255, 0.15);
    box-shadow:                         0 0 15px rgba(0, 255, 255, 0.15);
}



.button-secondary {
    font-weight:                        400;
    display:                            inline-block;
    border:                             1px solid rgba(255, 255, 255, 0.1);
    padding:                            18px 34px;
    border-radius:                      14px;
    text-decoration:                    none;
    color:                              #ffffff;
    background:                         rgba(255, 255, 255, 0.05);
 /* transition:                         0.1s; */
}

.button-secondary:hover {
    border-color:                       #00ffff;
    color:                              #00ffff;
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.08);
}






.button-main {
    font-weight:                        400;
    display:                            inline-block;
    border:                             1px solid rgba(255, 255, 255, 0.1);
    padding:                            10px 26px;
    border-radius:                      10px;
    text-decoration:                    none;
    color:                              #ffffff;
    background:                         rgba(255, 255, 255, 0.08);
 /* transition:                         0.1s; */
    border-color:                       rgba(255, 255, 255, 0.85);
    color:                              rgba(255, 255, 255, 0.86)
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.08);
}

.button-main:hover {
    border-color:                       #00ffff;
    color:                              #00ffff;
    background:                         rgba(0, 255, 255, 0.08);
    box-shadow:                         0 0 15px rgba(0, 255, 255, 0.15);
}





















/* TERMINAL */

.terminal {
    background:                         rgba(255, 255, 255, 0.05);
    border:                             1px solid rgba(255, 255, 255, 0.08);
    border-radius:                      24px;
    padding:                            30px;
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.05);
}

.terminal-WHITE {
    background:                         rgba(255, 255, 255, 1.05);
    border:                             1px solid rgba(255, 255, 255, 0.08);
    border-radius:                      24px;
    padding:                            30px;
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.05);
}

.terminal-header {
    display:                            flex;
    gap:                                10px;
    margin-bottom:                      25px;
}

.dot {
    width:                              12px;
    height:                             12px;
    border-radius:                      50%;
}

.red {
    background:                         #ff4d4d;
}

.yellow {
    background:                         #ffaa00;
}

.green {
    background:                         #00ff99;
}

.terminal pre {
    color:                              #00ffff;
    line-height:                        2;
    font-size:                          15px;
}






/* SECTION: ALL */

.expertise,
.apps,
.contact {
    scroll-margin-top:                  -20px; /* marign from top what needs adjustment */
    max-width:                          1400px;
    margin:                             auto;
    padding:                            140px 40px;
}

.section-header p {
    color:                              #00ffff;
    letter-spacing:                     5px;
    font-size:                          13px;
}

.section-header h2 {
    font-weight:                        400;
    margin-top:                         20px;
    font-size:                          64px;
    line-height:                        1.1;
    max-width:                          900px;
}






/* SECTION: EXPERTISE */

.expertise-grid {
    margin-top:                         70px;
    display:                            grid;
    grid-template-columns:              repeat(auto-fit, minmax(350px, 1fr)); /* repeat(3, 1fr); */
    gap:                                30px;
}

.glass-card {
    background:                         rgba(255, 255, 255, 0.05);
    border:                             1px solid rgba(255, 255, 255, 0.08);
    border-radius:                      28px;
    padding:                            35px 35px 22px 35px;
 /* transition:                         0.1s; */
}

.glass-card:hover{
 /* transform:                          translateY(-6px); */
    border-color:                       rgba(0, 255, 255, 0.3);
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.08);
}

.glass-card h3 {
    font-weight:                        400;
    font-size:                          28px;
}

.glass-card p {
    margin-top:                         20px;
    color:                              #999999;
    line-height:                        1.8;
    font-size:                          17px;
}






/* SECTION: APPS */

.apps-grid {
    margin-top:                         70px;
    display:                            grid;
    grid-template-columns:              repeat(3,1fr);
    gap:                                30px;
}

.app-card {
    overflow:                           hidden;
    background:                         rgba(255, 255, 255, 0.05);
    border:                             1px solid rgba(255, 255, 255, 0.08);
    border-radius:                      30px;
    text-decoration:                    none;
    color:                              #ffffff;
 /* transition:                         0.1s; */
}

.app-card:hover {
 /* transform:                          translateY(-8px); */
    border-color:                       rgba(0, 255, 255, 0.3);
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.08);
}

.app-image {
    height:                             260px;
    background-size:                    cover;
    background-position:                center;
}

.app-content {
    padding:                            35px 35px 35px 35px;
}

.version {
    color:                              #00ffff;
    font-size:                          14px;
}

.app-card h3 {
    font-weight:                        400;
    margin-top:                         18px;
    font-size:                          34px;
}

.app-card p {
    margin-top:                         18px;
    color:                              #999999;
    line-height:                        1.8;
    font-size:                          17px;
}

.card-link {
    margin-top:                         30px;
    color:                              #00ffff;
}






/* SECTION: CONTACT */

.contact-box {
    background:                         rgba(255, 255, 255, 0.05);
    border:                             1px solid rgba(255, 255, 255, 0.08);
    border-radius:                      35px;
    padding:                            90px;
    text-align:                         center;
}

.contact-box p:first-child {
    color:                              #00ffff;
    letter-spacing:                     5px;
    font-size:                          13px;
}

.contact-box h2 {
    font-weight:                        400;
    margin-top:                         20px;
    font-size:                          64px;
}

.contact-description {
    margin:                             30px auto 0;
    max-width:                          700px;
    color:                              #999999;
    font-size:                          20px;
    line-height:                        1.8;
}

.contact-buttons {
    margin-top:                         50px;
    display:                            flex;
    justify-content:                    center;
    gap:                                20px;
}






/* SECTION: FOOTER */

footer {
    border-top:                         1px solid rgba(255, 255, 255, 0.05);
    padding:                            40px;
}

.footer {
    max-width:                          1400px;
    margin:                             auto;
    display:                            flex;
    justify-content:                    space-between;
    color:                              #777777;
}

.footer-loadtime {
    display:                            inline;
    letter-spacing:                     0px;
    opacity:                            0.35;
}













































.formular {
    display:                            block;
    width:                              100%;
    padding:                            0.375rem 0.75rem;
    font-size:                          1rem;
    font-weight:                        400;
    line-height:                        1.5;
    color:                              #bbb;
    background-clip:                    padding-box;
    border:                             1px solid #ced4da;
    -webkit-appearance:                 none;
    -moz-appearance:                    none;
    appearance:                         none;
    border-radius:                      0.25rem;
    transition:                         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family:                        Arial, sans-serif;
    font-size:                          14px;
    background:                         rgba(255, 255, 255, 0.065); // rgba(255, 255, 255, 0.05);
    border:                             1px solid rgba(255, 255, 255, 0.11); // 1px solid rgba(255, 255, 255, 0.08);
    
    
    
margin: 0; padding: 8px 0 8px 12px; cursor: text; position: relative; color: #ccc; XXXborder-color: rgba(0, 255, 255, 0.2);    
    
resize: none; overflow-y: auto;    
    
white-space: pre-wrap;    
    
    
    
    
    
    
    
}


.formular a {
    color:                              #00ffff;
    text-decoration:                    underline;
}



.formular:focus {
    color:                              #fff;
    border-color:                       rgba(0, 255, 255, 0.3);
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.08);
    outline:                            0;
}



.formular:disabled,
.formular[readonly] {
//    background-color:                   #e9ecef;
//    opacity:                             1;
}









































/* RESPONSIVE */

@media(max-width:1100px){

    .home-content {
        grid-template-columns:          1fr;
    }

    .expertise-grid,
    .apps-grid {
        grid-template-columns:          1fr;
    }



    .formular{
        margin:                        15px 0px;
    }




}











@media(max-width:768px){

    .navigation-inner {
        padding:                            22px 40px 22px 30px;
    }
    
    .navigation-links {
        font-size:                          18px;
        gap:                                25px;
    }    
    
    .navigation-logo a {
        font-size:                          22px;
    }

    

    .home-content,
    .expertise,
    .apps,
    .contact{
        padding:                        90px 40px;
    }

    .home h1{
        font-weight:                    400;
        font-size:                      52px;
    }

    .section-header h2,
    .contact-box h2 {
        font-weight:                    400;
        font-size:                      42px;
    }

    .home-buttons,
    .contact-buttons {
//        flex-direction:                 column;
    }

    .contact-box {
        padding:                        50px 25px;
    }


    .footer {
        font-size:                      16px;
    }



    .container{
        padding:                        10px 20px;
    }

    .formular{
        margin:                        15px 0px;
    }




    .expertise-grid {
//        gap:                                25px;
    } 
      
    .glass-card {
        padding:                            26px 36px 18px 36px;  // hore vpravo dole vlavo
//        font-size:                          17px;
    }    
        
    .glass-card p {
//        margin-top:                         20px;
//        line-height:                        1;
//        font-size:                          17px;
    }    
    
    
    .glass-card h3 {
//        font-size:                          26px;
    }        
    
    
    
    

}





















































/* svetly rezim */

/*
body {
    background:                         #f2faf5;
    color:                              #0d1f15;
}

body::before {
    background-image:                   radial-gradient(
                                            rgba(29, 184, 105, 0.14),
                                            rgba(10,  80,  40, 0.08),
                                            rgba(242,250,245, 0.96)
                                        ), url('index2.jpg');
    filter:                             brightness(0.99);
}

.glow1 { background: rgba(29, 184, 105, 0.14); }
.glow2 { background: rgba(10,  80,  40, 0.12); }

.navigation {
    background:                         rgba(242, 250, 245, 0.92);
    border-bottom:                      1px solid rgba(0, 0, 0, 0.06);
}
.navigation-logo,
.navigation-logo a        { color: #1db869; text-shadow: none; }
.navigation-logo-text,
.navigation-logo-text a   { color: #0d1f15; }
.navigation-links a       { color: #0d1f15; }
.navigation-links a:hover,
.navigation-links a.active { color: #1db869; }

.tag,
.section-header p,
.contact-box p:first-child,
.version,
.card-link                { color: #1db869; }

.home h1,
.section-header h2,
.contact-box h2           { color: #0d1f15; }

.description,
.glass-card p,
.app-card p,
.contact-description      { color: #5a7a65; }

.glass-card {
    background:                         rgba(0, 0, 0, 0.04);
    border:                             1px solid rgba(0, 0, 0, 0.08);
}
.glass-card:hover {
    border-color:                       rgba(29, 184, 105, 0.35);
    box-shadow:                         0 0 40px rgba(29, 184, 105, 0.08);
}

.app-card {
    background:                         rgba(0, 0, 0, 0.04);
    border:                             1px solid rgba(0, 0, 0, 0.08);
    color:                              #0d1f15;
}
.app-card:hover {
    border-color:                       rgba(29, 184, 105, 0.35);
    box-shadow:                         0 0 40px rgba(29, 184, 105, 0.08);
}

.terminal {
    background:                         rgba(0, 0, 0, 0.05);
    border:                             1px solid rgba(0, 0, 0, 0.08);
    box-shadow:                         0 0 40px rgba(29, 184, 105, 0.05);
}

.terminal pre {
    color:                              #1db869;
}

.button-primary {
    background:                         #1db869;
    border:                             1px solid #1db869;
    color:                              #ffffff;
}

.button-primary:hover {
    background:                         rgba(29, 184, 105, 0.12);
    border-color:                       #1db869;
    color:                              #1db869;
    box-shadow:                         0 0 15px rgba(29, 184, 105, 0.15);
}

.button-secondary {
    background:                         rgba(0, 0, 0, 0.04);
    border:                             1px solid rgba(0, 0, 0, 0.10);
    color:                              #0d1f15;
}

.button-secondary:hover {
    border-color:                       rgba(29, 184, 105, 0.5);
    color:                              #1db869;
    box-shadow:                         none;
}

.contact-box {
    background:                         rgba(0, 0, 0, 0.04);
    border:                             1px solid rgba(0, 0, 0, 0.08);
}

footer        { border-top: 1px solid rgba(0, 0, 0, 0.06); }
.footer       { color: #7a9a82; }
*/















































/* svetlejsi motiv */

body {
    background:                         #051010;
}

body::before {
    filter:                             brightness(0.70);
}

.navigation {
    background:                         rgba(0, 12, 12, 0.94);
    border-bottom:                      1px solid rgba(255, 255, 255, 0.045);}

.glass-card {
    background:                         rgba(255, 255, 255, 0.06);
    border:                             1px solid rgba(255, 255, 255, 0.10);
}

.app-card {
    background:                         rgba(255, 255, 255, 0.06);
    border:                             1px solid rgba(255, 255, 255, 0.10);
}

.terminal {
    background:                         rgba(255, 255, 255, 0.06);
    border:                             1px solid rgba(255, 255, 255, 0.10);
}

.contact-box {
    background:                         rgba(255, 255, 255, 0.06);
    border:                             1px solid rgba(255, 255, 255, 0.10);
}

.description,
.glass-card p,
.app-card p,
.contact-description {
    color:                              #a0a0a0;
}

.footer {
    color:                              #cccccc;
}


.button-secondary {
    border:                             1px solid rgba(255, 255, 255, 0.12);
    background:                         rgba(255, 255, 255, 0.05);
}

.button-main {
    border:                             1px solid rgba(255, 255, 255, 0.12);
    background:                         rgba(255, 255, 255, 0.08);
    border-color:                       rgba(255, 255, 255, 0.85);
    box-shadow:                         0 0 40px rgba(0, 255, 255, 0.08);
}

















/* este svetlejsi motiv */

body {
    background:                         #071414;
}

body::before {
    filter:                             brightness(0.83);
}

.terminal {
    background:                         rgba(255, 255, 255, 0.065);
    border:                             1px solid rgba(255, 255, 255, 0.11);
}

.description,
.glass-card p,
.app-card p,
.contact-description {
    color:                              #c0c0c0;
}