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

:root{
    --bg:#eef3f7;
    --card:#ffffff;
    --text:#18202d;
    --muted:#5f6b7a;
    --accent:#d9ad7c;
    --accent-light:#f6eadf;
    --dark:#18202d;
    --border:#e4eaf0;
    --shadow:0 24px 60px rgba(24,32,45,.08);
}

body{
    font-family:Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
}

.site{
    display:flex;
    min-height:100vh;
}

/* LEFT PANEL */

.sidebar{
    position:fixed;
    left:28px;
    top:28px;
    width:285px;
    height:calc(100vh - 56px);
    background:var(--accent);
    border-radius:28px;
    padding:28px;
    overflow-y:auto;
}

.logo{
    text-align:center;
    margin-bottom:28px;
}

.logo img{
    width:115px;
    height:115px;
    object-fit:contain;
    border-radius:20px;
    margin-bottom:18px;
}

.logo h1{
    font-size:27px;
    line-height:1.15;
}

.logo p{
    margin-top:10px;
    font-size:16px;
}

.menu{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.menu a{
    text-decoration:none;
    background:white;
    color:var(--text);
    padding:15px 18px;
    border-radius:15px;
    font-size:17px;
    transition:.25s;
}

.menu a:hover,
.menu a.active{
    background:var(--dark);
    color:white;
    transform:translateX(5px);
}

/* MAIN */

.content{
    margin-left:340px;
    width:calc(100% - 340px);
    padding:28px;
    overflow:hidden;
}

.page-card{
    background:var(--card);
    border-radius:32px;
    padding:64px;
    margin-bottom:28px;
    box-shadow:var(--shadow);
}

/* HERO */

.hero{
    min-height:calc(100vh - 56px);
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:56px;
}

.badge{
    display:inline-block;
    background:var(--accent-light);
    color:#9b6b3f;
    padding:11px 18px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:24px;
}

.hero h2{
    font-size:clamp(24px,2.8vw,40px);
    line-height:1.3;
    font-weight:600;
    letter-spacing:-0.3px;
    margin-bottom:10px;
    max-width:650px;
}

.quote-author{
    font-size:20px;
    font-style:italic;
    color:#b57b43;
    margin-bottom:35px;
}

.lead{
    font-size:22px;
    line-height:1.65;
    color:var(--muted);
    max-width:720px;
}

.hero-visual{
    background:var(--accent-light);
    border-radius:30px;
    padding:42px;
    position:relative;
}

.hero-visual img{
    width:100%;
    border-radius:22px;
}

.float-card{
    position:absolute;
    left:-20px;
    bottom:32px;
    background:white;
    padding:18px 22px;
    border-radius:18px;
    box-shadow:var(--shadow);
    font-weight:800;
}

/* BUTTONS */

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:34px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:56px;
    padding:0 26px;
    border-radius:16px;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
}

.btn img{
    width:22px;
    height:22px;
    object-fit:contain;
}

.btn-dark{
    background:var(--dark);
    color:white;
}

.btn-accent{
    background:var(--accent);
    color:var(--dark);
}

.btn-light{
    background:white;
    color:var(--dark);
}

/* TEXT */

.section-title{
    font-size:clamp(32px,3.3vw,44px);
    line-height:1.18;
    margin-bottom:18px;
}

.section-subtitle{
    font-size:21px;
    line-height:1.65;
    color:var(--muted);
    max-width:900px;
}

.big-text p{
    font-size:20px;
    line-height:1.85;
    color:var(--muted);
    margin-bottom:22px;
}

/* GRIDS */

.grid{
    display:grid;
    gap:22px;
    margin-top:34px;
}

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

.info-card{
    background:#f7fafc;
    border:1px solid var(--border);
    border-radius:24px;
    padding:28px;
}

.info-card h3{
    font-size:24px;
    margin-bottom:12px;
}

.info-card p,
.info-card li{
    font-size:18px;
    line-height:1.6;
    color:var(--muted);
}

.info-card ul{
    padding-left:20px;
}

/* TIMELINE */

.timeline{
    display:grid;
    gap:20px;
    margin-top:34px;
}

.timeline-item{
    background:#f7fafc;
    border-left:6px solid var(--accent);
    border-radius:22px;
    padding:28px;
}

.timeline-item h3{
    font-size:25px;
    margin-bottom:12px;
}

.timeline-item p{
    font-size:19px;
    line-height:1.7;
    color:var(--muted);
}

/* ACHIEVEMENTS */

.proof-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:34px;
}

.proof-item{
    background:var(--accent-light);
    border-radius:20px;
    padding:24px;
    font-size:19px;
    line-height:1.55;
}

.cert-gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    margin-top:34px;
}

.cert-card{
    background:#f7fafc;
    border:1px solid var(--border);
    border-radius:24px;
    padding:18px;
    cursor:pointer;
    transition:.25s;
}

.cert-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

.cert-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:18px;
    margin-bottom:18px;
}

.cert-card h3{
    font-size:22px;
    margin-bottom:8px;
}

.cert-card p{
    font-size:16px;
    color:var(--muted);
    line-height:1.5;
}

/* MODAL */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.82);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.modal.active{
    display:flex;
}

.modal img{
    max-width:90%;
    max-height:90vh;
    border-radius:18px;
    background:white;
}

/* CONTACT BLOCK */

.contact-card{
    background:var(--dark);
    color:white;
    border-radius:32px;
    padding:70px 80px;
    text-align:center;
    overflow:hidden;
    margin-bottom:28px;
}

.contact-card h2{
    font-size:clamp(28px,3vw,42px);
    line-height:1.25;
    max-width:900px;
    margin:0 auto 25px;
}

.contact-card p{
    font-size:22px;
    line-height:1.6;
    opacity:.85;
    max-width:700px;
    margin:0 auto;
}

.contact-card .actions{
    justify-content:center;
}

.footer{
    text-align:center;
    color:var(--muted);
    padding:20px;
    font-size:15px;
}

/* MOBILE */

@media(max-width:1100px){
    .site{
        display:block;
    }

    .sidebar{
        position:static;
        width:auto;
        height:auto;
        margin:16px;
    }

    .content{
        margin-left:0;
        width:100%;
        padding:16px;
    }

    .hero{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .proof-list,
    .cert-gallery{
        grid-template-columns:1fr;
    }

    .page-card,
    .contact-card{
        padding:34px;
    }

    .lead,
    .section-subtitle{
        font-size:19px;
    }
}

@media(max-width:700px){

    body{
        background:#eef3f7;
    }

    .sidebar{
        margin:10px;
        padding:22px;
        border-radius:24px;
    }

    .logo img{
        width:90px;
        height:90px;
        margin-bottom:12px;
    }

    .logo h1{
        font-size:22px;
    }

    .logo p{
        font-size:14px;
    }

    .menu{
        gap:9px;
    }

    .menu a{
        padding:13px 15px;
        font-size:16px;
        text-align:center;
    }

    .content{
        padding:10px;
    }

    .page-card{
        padding:26px;
        border-radius:24px;
        margin-bottom:18px;
    }

    .hero{
        gap:28px;
    }

    .badge{
        font-size:14px;
        padding:9px 14px;
        margin-bottom:18px;
    }

    .hero h2{
        font-size:28px;
        line-height:1.3;
    }

    .quote-author{
        font-size:18px;
        margin-bottom:25px;
    }

    .lead{
        font-size:18px;
        line-height:1.6;
    }

    .actions{
        flex-direction:column;
        gap:12px;
    }

    .btn{
        width:100%;
        font-size:17px;
    }

    .hero-visual{
        padding:26px;
    }

    .float-card{
        left:20px;
        bottom:20px;
        font-size:14px;
        padding:12px 16px;
    }

    .section-title{
        font-size:28px;
    }

    .section-subtitle{
        font-size:18px;
    }

    .info-card{
        padding:22px;
    }

    .info-card h3{
        font-size:21px;
    }

    .info-card p,
    .info-card li{
        font-size:17px;
    }

    .proof-item{
        font-size:17px;
    }

    .cert-card img{
        height:240px;
    }

    .contact-card{
        padding:32px 24px;
        border-radius:24px;
    }

    .contact-card h2{
        font-size:27px;
    }

    .contact-card p{
        font-size:18px;
    }

    .footer{
        font-size:14px;
    }
}