/* =====================================
   ОРАНЖЕРЕЯ ЧУДЕС
   MAIN STYLE
===================================== */

:root{

    --green:#4CAF36;
    --orange:#F58220;
    --pink:#D92A7A;
    --blue:#29A8E0;
    --yellow:#F4D000;

    --bg:#FFFDF8;
    --surface:#FFFFFF;

    --text:#222222;
    --text-light:#666666;

    --border:#ECECEC;

    --radius:24px;
    --shadow:
        0 10px 35px rgba(0,0,0,.06);

    --container:1280px;
}

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

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

    color:var(--text);

    background:var(--bg);

    line-height:1.6;

    overflow-x:hidden;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* CONTAINER */

.container{

    width:min(
        var(--container),
        calc(100% - 40px)
    );

    margin:auto;
}

/* TYPOGRAPHY */

h1,
h2,
h3{

    font-family:'Comfortaa',cursive;
    font-weight:700;
    line-height:1.15;
}

h1{
    font-size:clamp(40px,6vw,76px);
}

h2{
    font-size:clamp(32px,4vw,56px);
    text-align:center;
    margin-bottom:30px;
}

h3{
    font-size:22px;
}

.section-text{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:var(--text-light);

    font-size:18px;
}

/* BUTTONS */

.btn{

    display:inline-flex;

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

    padding:16px 34px;

    border-radius:999px;

    font-weight:600;

    transition:.25s ease;
}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--orange),
        #ff9a40
    );

    color:#fff;
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(245,130,32,.35);
}

.btn-secondary{

    border:2px solid var(--orange);

    color:var(--orange);

    background:#fff;
}

.btn-secondary:hover{

    background:var(--orange);

    color:#fff;
}

/* HEADER */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(16px);

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

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

.header-inner{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.logo img{

    height:60px;

    width:auto;
}

.nav{

    display:flex;

    gap:28px;
}

.nav a{

    color:var(--text);

    font-weight:500;
}

.nav a:hover{

    color:var(--orange);
}

/* HERO */

.hero{

    padding-top:160px;
    padding-bottom:120px;
}

.hero-grid{

    display:grid;

    grid-template-columns:
        1.1fr 1fr;

    gap:70px;

    align-items:center;
}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:999px;

    background:#fff;

    box-shadow:var(--shadow);

    margin-bottom:28px;

    font-size:14px;
}

.hero p{

    margin-top:25px;

    margin-bottom:40px;

    font-size:20px;

    color:var(--text-light);
}

.hero-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;
}

.hero-image{

    position:relative;
}

.hero-image img{

    border-radius:40px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.12);
}

/* STATS */

.stats{

    padding:90px 0;
}

.stats-grid{

    display:grid;

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

    gap:25px;
}

.stat{

    background:#fff;

    border-radius:30px;

    padding:40px 20px;

    text-align:center;

    box-shadow:var(--shadow);
}

.number{

    font-size:48px;

    font-weight:700;

    color:var(--orange);

    margin-bottom:10px;
}

.label{

    color:var(--text-light);
}

/* SECTIONS */

.about,
.programs,
.gallery,
.team,
.branches,
.contacts{

    padding:120px 0;
}

/* PROGRAMS */

.program-grid{

    margin-top:50px;

    display:grid;

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

    gap:24px;
}

.program-card{

    background:#fff;

    padding:35px;

    border-radius:30px;

    box-shadow:var(--shadow);

    transition:.3s;
}

.program-card:hover{

    transform:translateY(-8px);
}

.icon{

    font-size:40px;

    margin-bottom:18px;
}

/* GALLERY */

.gallery-grid{

    margin-top:50px;

    display:grid;

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

    gap:20px;
}

.gallery-grid img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:24px;

    transition:.3s;
}

.gallery-grid img:hover{

    transform:scale(1.03);
}

/* TEAM */

.team-grid{

    margin-top:50px;

    display:grid;

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

    gap:24px;
}

.team-card{

    background:#fff;

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--shadow);

    text-align:center;
}

.team-card img{

    width:100%;

    aspect-ratio:1/1.15;

    object-fit:cover;
}

.team-card h3{

    margin-top:20px;
}

.team-card p{

    color:var(--text-light);

    margin-bottom:24px;
}

/* BRANCHES */

.branches{

    background:#fafafa;
}

.branch-grid{

    margin-top:50px;

    display:grid;

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

    gap:24px;
}

.branch-card{

    background:#fff;

    border-radius:30px;

    padding:35px;

    box-shadow:var(--shadow);
}

.branch-card h3{

    margin-bottom:15px;

    color:var(--orange);
}

/* CTA */

.cta{

    padding:120px 0;

    background:
    linear-gradient(
        135deg,
        rgba(245,130,32,.08),
        rgba(41,168,224,.08)
    );
}

/* FORM */

.lead-form{

    max-width:700px;

    margin:40px auto 0;

    display:flex;

    flex-direction:column;

    gap:18px;
}

.lead-form input,
.lead-form select,
.lead-form textarea{

    width:100%;

    padding:18px;

    border-radius:18px;

    border:1px solid #ddd;

    font-size:16px;

    background:#fff;
}

.lead-form textarea{

    min-height:140px;

    resize:vertical;
}

.checkbox{

    display:flex;

    gap:12px;

    align-items:flex-start;

    font-size:14px;
}

/* CONTACTS */

.contact-grid{

    margin-top:50px;

    display:grid;

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

    gap:24px;
}

.contact-grid > div{

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:var(--shadow);

    text-align:center;
}

.contact-grid a{

    color:var(--orange);

    font-weight:600;
}

/* FOOTER */

.footer{

    background:#1e1e1e;

    color:#fff;

    padding:70px 0;

    text-align:center;
}

.footer-logo{

    font-family:'Comfortaa';

    font-size:32px;

    margin-bottom:20px;
}

/* MOBILE */

@media (max-width:1024px){

.hero-grid,
.program-grid,
.team-grid,
.branch-grid,
.contact-grid,
.stats-grid{

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

@media (max-width:768px){

.nav{
    display:none;
}

.hero{

    padding-top:130px;
}

.hero-grid{

    grid-template-columns:1fr;
}

.program-grid,
.team-grid,
.branch-grid,
.contact-grid,
.stats-grid,
.gallery-grid{

    grid-template-columns:1fr;
}

.hero-buttons{

    flex-direction:column;
}

.btn{

    width:100%;
}

h2{

    margin-bottom:20px;
}
}