:root{

    --bg:#050505;
    --bg2:#0d0d0d;

    --lime:#0021da;
    --lime-soft:#ffd900;

    --text:#ffffff;
    --muted:#8f8f8f;

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

}

/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    min-height:100vh;

    background:
    radial-gradient(
        circle at 80% 15%,
        rgba(2, 125, 196, 0.12),
        transparent 35%
    ),

    radial-gradient(
        circle at 15% 80%,
        rgba(26, 24, 158, 0.08),
        transparent 40%
    ),

    #050505;

    color:var(--text);
    font-family:Inter,Segoe UI,sans-serif;

    overflow-x:hidden;
}

/* ===========================
   SIDEBAR
=========================== */

.sidebar-contact{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.sidebar-contact p{
    color:#b8c7ff;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.28em;
    line-height:1;
    text-align:center;
    text-transform:uppercase;
}


.sidebar{

    position:fixed;

  margin: 30px 30px;
    border-radius: 20px;
    top:0;
    left:0;

    width:260px;
    height:90vh;

    z-index:100;

    backdrop-filter:blur(30px);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );

    border-right:
    1px solid rgba(255, 187, 0, 0.918);

    padding:40px 25px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.logo{

    position:relative;

    display:flex;
    align-items:center;
    gap:6px;

    min-height:84px;
    padding:14px;

    border-radius:18px;

    isolation:isolate;
    overflow:hidden;

    background:
    linear-gradient(135deg, rgba(255, 217, 0, .16), transparent 32%),
    linear-gradient(145deg, rgba(0, 102, 255, .28), rgba(255, 255, 255, .04) 54%, rgba(5, 5, 5, .22));

    border:
    1px solid rgba(255, 208, 0, .22);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 45px rgba(0, 0, 0, .28),
    0 0 32px rgba(255, 208, 0, .10);
}

.logo::before{

    content:"";

    position:absolute;
    inset:9px;

    border-radius:14px;

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

    pointer-events:none;
}

.logo::after{

    content:"";

    position:absolute;
    top:12px;
    right:-32px;

    width:92px;
    height:8px;

    background:
    repeating-linear-gradient(
        135deg,
        rgba(255, 217, 0, .9) 0 9px,
        rgba(5, 5, 5, .72) 9px 17px
    );

    transform:rotate(32deg);

    opacity:.95;

    box-shadow:
    0 0 24px rgba(255, 217, 0, .26);
}

.logo-mark{

    width:58px;
    height:58px;

    display:grid;
    place-items:center;
    flex:0 0 auto;

    border-radius:14px;
    overflow:hidden;

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

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 28px rgba(255, 208, 0, .25),
    0 10px 22px rgba(0, 0, 0, .32);
}

.logo-mark img{

    width:100%;
    height:100%;

    object-fit:contain;

    filter:
    drop-shadow(0 3px 8px rgba(0, 0, 0, .42));
}

.logo-copy{

    min-width:0;
    margin-top: 5px;
   
}

.logo h2{

    color:#ffffff;

    font-size:1.22rem;
    line-height:.95;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-weight:900;
    white-space:nowrap;

    text-shadow:
    0 0 18px rgba(0, 102, 255, .65);
}

.logo h2 span{

    color:#ffbb00;
}

.logo p{

    margin-top:8px;

    color:#b8c7ff;

    font-size:.72rem;
    font-weight:700;
    letter-spacing:.38em;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
}

/* ===========================
   NAV
=========================== */

.sidebar nav{

    position:relative;

    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:10px;
    padding:10px 0;
}

.sidebar nav a{

    position:relative;

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;

    color:rgba(255,255,255,.78);

    padding:14px 16px;

    border-radius:14px;

    overflow:hidden;

    background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));

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

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055);

    transform:translateX(0);

    transition:
    color .35s,
    border-color .35s,
    box-shadow .35s,
    background .35s,
    transform .35s;
}

.sidebar nav a::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 217, 0, .16) 24%,
        rgba(0, 102, 255, .18) 48%,
        transparent 72%
    );

    transform:translateX(-115%);

    transition:transform .65s ease;
}

.sidebar nav a::after{

    content:"";

    position:absolute;
    right:14px;

    width:7px;
    height:7px;

    border-top:
    2px solid currentColor;
    border-right:
    2px solid currentColor;

    opacity:0;

    transform:
    translateX(-8px)
    rotate(45deg);

    transition:
    opacity .35s,
    transform .35s;
}

.nav-icon{

    position:relative;
    z-index:1;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;
    flex:0 0 auto;

    border-radius:10px;

    color:#ffbb00;

    font-size:.72rem;
    font-weight:900;
    letter-spacing:.08em;

    background:
    linear-gradient(145deg, rgba(0, 102, 255, .30), rgba(255, 217, 0, .08));

    border:
    1px solid rgba(255, 208, 0, .16);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 18px rgba(0, 102, 255, .12);

    transition:
    color .35s,
    background .35s,
    border-color .35s,
    box-shadow .35s,
    transform .35s;
}

.sidebar nav a span:last-child{

    position:relative;
    z-index:1;

    font-size:.96rem;
    font-weight:750;
    letter-spacing:.02em;
}

.sidebar nav a:hover{

    transform:
    translateX(7px);
}

.sidebar nav a:hover,
.sidebar nav a.active{

    color: #ffbb00;

    background:
    linear-gradient(90deg, rgba(255, 187, 0, .15), rgba(0, 102, 255, .13));

    border-color:
    rgba(255, 208, 0, .32);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 26px rgba(255, 230, 0, .13),
    0 12px 28px rgba(0, 0, 0, .24);
}

.sidebar nav a:hover::before,
.sidebar nav a.active::before{

    transform:translateX(115%);
}

.sidebar nav a:hover::after,
.sidebar nav a.active::after{

    opacity:1;

    transform:
    translateX(0)
    rotate(45deg);
}

.sidebar nav a:hover .nav-icon,
.sidebar nav a.active .nav-icon{

    color:#050505;

    background:
    linear-gradient(135deg, #ffe45c, #ffbb00 55%, #c48c00);

    border-color:
    rgba(255,255,255,.28);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 24px rgba(255, 208, 0, .28);

    transform:
    scale(1.06)
    rotate(-4deg);
}

.sidebar nav a.active{

    transform:translateX(7px);
}

.sidebar nav a.active .nav-icon{

    animation:
    navPulse 2.4s ease-in-out infinite;
}

@keyframes navPulse{

    0%,100%{
        box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 0 20px rgba(255, 208, 0, .22);
    }

    50%{
        box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 0 34px rgba(255, 208, 0, .42);
    }
}

@media (prefers-reduced-motion: reduce){

    .sidebar nav a,
    .sidebar nav a::before,
    .sidebar nav a::after,
    .nav-icon{
        transition:none;
    }

    .sidebar nav a.active .nav-icon{
        animation:none;
    }
}

/* ===========================
   TELEFON
=========================== */

.phone-btn{

    position:relative;

    width:90%;
    min-height:40px;
    padding:5px 7px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    overflow:hidden;

    border-radius:16px;

    color:#e4e3e3;
    text-decoration:none;


    background-color: #0a134646;

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

    box-shadow:
    0 18px 32px rgba(0,0,0,.30),
    0 0 30px rgba(255, 208, 0, .24);

    font-size:.98rem;
    font-weight:900;
    letter-spacing:.02em;
    white-space:nowrap;

    isolation:isolate;

    transform:translateY(0);

    transition:
    transform .35s,
    box-shadow .35s,
    filter .35s;
}

.phone-btn::before{

    content:"";

    position:absolute;
    inset:0;
    z-index:-1;

    background:
    linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 166, 0, 0.34) 42%,
        transparent 68%
    );

    transform:translateX(-130%);

    transition:transform .7s ease;
}

.phone-btn:hover{

    transform:
    translateY(-3px)
    scale(1.02);

    filter:saturate(1.08);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 24px 42px rgba(0,0,0,.34),
    0 0 42px rgba(255, 208, 0, .34);
}

.phone-btn:hover::before{
    transform:translateX(130%);
}

.phone-btn:focus-visible{
    outline:
    3px solid rgba(184, 199, 255, .92);

    outline-offset:4px;
}

.phone-icon{

    position:relative;

    width:32px;
    height:32px;

    display:grid;
    place-items:center;
    flex:0 0 auto;

    border-radius:10px;

    background:
   rgba(255, 208, 0, .24);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22);
}

.phone-icon::before{

    content:"";

    width:13px;
    height:13px;

    border:
    3px solid #050505;

    border-top:0;
    border-left:0;

    border-radius:
    2px 2px 7px 2px;

    transform:
    rotate(18deg)
    translateY(-1px);
}

/* ===========================
   KOPARKA
=========================== */

.excavator{

    position:fixed;

    left:-100px;
    top:60%;

    width:950px;

    opacity:1;

    pointer-events:none;

    z-index:2;

    transform:
    translateY(-50%);

    filter:
    drop-shadow(
        0 0 40px rgba(255, 230, 0, 0.3)
    )
    drop-shadow(
        0 0 120px rgba(255, 174, 0, 0.15)
    );

    animation:
    floatMachine 8s ease-in-out infinite;
}

@keyframes floatMachine{

    0%,100%{

        transform:
        translateY(-50%)
        rotate(-10deg);
    }

    50%{

        transform:
        translateY(calc(-50% - 15px))
        rotate(10deg);
    }
}

/* ===========================
   MAIN
=========================== */

main{

    margin-left:260px;

    position:relative;

    z-index:10;
}

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

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding-left:140px;
    padding-right:80px;
}

.hero-content{

    max-width:850px;
}

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    margin: 30px 0px;

 color: #ffbb00;

    background:
    rgba(255, 208, 0, 0.11);

    border:
    1px solid rgba(198,255,0,.15);
}

.hero h1{

    font-size:6rem;

    line-height:1;

    margin-bottom:25px;

    font-weight:900;
}

.hero h1 span{

    display:block;

    color: #ffbb00;

     text-shadow:
    0 0 25px #00177e94;
}

.hero p{

    max-width:650px;

    font-size:1.25rem;

    color:#b7b7b7;

    margin-bottom:40px;
}

/* ===========================
   BUTTONS
=========================== */

.hero-buttons{

    display:flex;
    gap:20px;
}

.btn{

    padding:16px 30px;

    border-radius:16px;

    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    color: #ffbb00;

 border: 1px solid #ffbb00;

 background-color: #0a134646;
 
 backdrop-filter: blur(12px);

width: 200px;
height: 50px;

    text-decoration:none;

     border-color:
    rgba(255, 208, 0, 0.35);

    box-shadow:
    0 0 25px rgba(255, 230, 0, 0.12);

    transition:.35s;

    margin: 20px 0px;
}




/* ===========================
   GLASS
=========================== */

.glass{

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

    backdrop-filter:
    blur(20px);

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

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

.stats{

    padding:0 80px 120px;

    display:grid;

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

    gap:25px;
}

.stat{

    padding:40px;

    border-radius:25px;

    text-align:center;
}

.stat h3{

    font-size:3rem;

    color:var(--lime);

    margin-bottom:10px;
}

/* ===========================
   OFERTA
=========================== */

#machines{

    padding:120px 80px;
}

.section-title{

    margin-bottom:60px;
}

.section-title span{

    color: #ffbb00;

    letter-spacing:4px;
}

.section-title h2{

    margin-top:10px;

    font-size:4rem;
}

.cards{

    display:grid;

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

    gap:25px;
}

.machine-card{

    padding:35px;

    border-radius:24px;

    transition:.35s;
}

.machine-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(255, 208, 0, 0.35);

    box-shadow:
    0 0 25px rgba(255, 230, 0, 0.12);
}

.machine-card h3{

    margin-bottom:15px;
}

.machine-card p{

   color: #ffbb00;
}

/* ===========================
   FOOTER
=========================== */


footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
 border-top:
    1px solid rgba(255,255,255,.08);
    color:#888;

    margin: 20px 0px;
}

.footer-info{

    width: 100%;
    margin: 10px 30px;
    padding: 10px;
    gap:20px;
    display:flex;
    flex-direction: row;
    justify-content:space-around;
border-bottom:
    1px solid rgba(255,255,255,.08);

    color:#888;
}

.footer-info div{
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    padding: 0px 10px;
}

.company-name{
     border-top:
    1px solid rgba(255, 255, 255, 0.301);
    margin: 10px;
    border-radius: 18px;
    padding: 5px;
      box-shadow:
    0 -7px 25px 3px rgba(43, 177, 43, 0.12);
}





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

@media(max-width:1200px){

    .excavator{
        width:700px;
    }

    .hero h1{
        font-size:4rem;
    }

    .cards{
        grid-template-columns:
        repeat(2,1fr);
    }
}

@media(max-width:900px){

    .sidebar{

        width:100%;
        height:auto;

        position:relative;
    }

    main{
        margin-left:0;
    }

    .excavator{
        display:none;
    }

    .hero{

        min-height:auto;

        padding:80px 25px;
    }

    .hero h1{
        font-size:3rem;
    }

    .stats{

        grid-template-columns:1fr;

        padding:25px;
    }

    .cards{
        grid-template-columns:1fr;
    }

    footer{

        flex-direction:column;

        gap:15px;

        padding:30px;
    }
}