/* =========================================================
   YELLOW EDITION — YANDEX EDA LANDING
   warm yellow UI • compact • modern • glassmorphism
========================================================= */

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

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

html{
    scroll-behavior:smooth;
}

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

    background:
        linear-gradient(180deg,#fff7bf 0%,#ffe082 100%);

    color:#2b2b2b;

    line-height:1.5;

    overflow-x:hidden;
}

/* ================= SCROLL ================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#ffb300;
    border-radius:20px;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{
    width:100%;
    max-width:1220px;
    margin:0 auto;
    padding:0 18px;
}

/* =========================================================
   HEADER
========================================================= */

.header-container{
    position:sticky;
    top:0;
    z-index:999;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:14px 24px;

    background:rgba(255,245,180,.72);

    backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(255,193,7,.35);

    box-shadow:
        0 6px 20px rgba(255,179,0,.18);
}

.header-brand h2{
    font-size:24px;
    font-weight:900;
}

.header-brand h2 a{
    text-decoration:none;
    color:#1f1f1f;
}

.header-brand p{
    color:#7a5a00;
    font-size:13px;
}

/* =========================================================
   MENU
========================================================= */

.header-menu{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.header-menu a{
    text-decoration:none;

    color:#3b2c00;

    font-size:15px;
    font-weight:700;

    padding:10px 15px;

    border-radius:14px;

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

    transition:.25s;
}

.header-menu a:hover{
    background:#ffca28;

    transform:translateY(-2px);
}

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

.cool-btn,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none;

    padding:16px 26px;

    border-radius:18px;

    font-size:16px;
    font-weight:800;

    color:#2d2100;

    background:
        linear-gradient(135deg,#fff176,#ffca28);

    border:1px solid rgba(255,193,7,.45);

    box-shadow:
        0 12px 28px rgba(255,179,0,.28),
        inset 0 1px 0 rgba(255,255,255,.6);

    transition:.3s;

    position:relative;
    overflow:hidden;
}

.cool-btn::before,
.btn::before{
    content:"";

    position:absolute;
    top:0;
    left:-120%;

    width:100%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;
}

.cool-btn:hover::before,
.btn:hover::before{
    left:120%;
}

.cool-btn:hover,
.btn:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 36px rgba(255,179,0,.35);
}

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

.hero-section{
    position:relative;

    padding:90px 20px 70px;

    overflow:hidden;
	
	 padding:90px 20px 70px;

    background-image:url("images/kurer-avto.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;

    overflow:hidden;
	
}

.hero-section::before{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.45) 0%,
        transparent 70%);

    top:-220px;
    right:-220px;
}

.hero-content{
    position:relative;

    max-width:980px;
    margin:0 auto;

    text-align:center;
}

.hero-title{
    font-size:66px;
    font-weight:900;

    line-height:1.05;

    margin-bottom:18px;

    color:#2b2100;

    text-shadow:
        0 3px 12px rgba(255,255,255,.45);
}

.hero-subtitle{
    font-size:26px;
    color:#6e5400;

    margin-bottom:34px;
}

/* =========================================================
   SECTIONS
========================================================= */

section{
    padding:25px 18px;
}

/* =========================================================
   TITLES
========================================================= */

.section-title,
.requirements-title,
.apps-title,
.docs-title,
.how-title,
.faq-title,
.title,
.cities-title{
    text-align:center;

    font-size:42px;
    font-weight:900;

    color:#2f2200;

    margin-bottom:36px;
}

.section-title::after,
.requirements-title::after,
.apps-title::after,
.docs-title::after,
.how-title::after,
.faq-title::after,
.title::after,
.cities-title::after{
    content:"";

    display:block;

    width:110px;
    height:5px;

    margin:16px auto 0;

    border-radius:999px;

    background:
        linear-gradient(90deg,#ffb300,#fff176);
}

/* =========================================================
   GRID
========================================================= */

.benefits-container,
.grid{
    display:grid;

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

    gap:18px;

    max-width:1200px;
    margin:0 auto;
}

/* =========================================================
   CARDS
========================================================= */

.benefit-card,
.card,
.acc-card,
.req-card,
.apps-card,
.docs-card,
.how-card,
.info-card,
.faq-item{
    background:
        #ffc000;

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    box-shadow:
        0 10px 26px rgba(255,179,0,.14);

    transition:.3s;
}

.benefit-card:hover,
.card:hover,
.acc-card:hover,
.faq-item:hover{
    transform:translateY(-6px);

    box-shadow:
        0 18px 40px rgba(255,179,0,.24);
}

/* =========================================================
   BENEFITS
========================================================= */

.benefit-card{
    padding:24px;
}

.benefit-card h3{
    font-size:24px;
    margin-bottom:18px;
}

.benefit-card ul{
    list-style:none;
}

.benefit-card li{
    position:relative;

    padding-left:30px;

    margin-bottom:14px;

    color:#6d5400;
}

.benefit-card li::before{
    content:"✔";

    position:absolute;
    left:0;
    top:0;

    color:#ff9800;
}

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

.req-card,
.apps-card,
.docs-card,
.how-card,
.info-card{
    max-width:960px;
    margin:0 auto;

    padding:32px;

    display:flex;
    flex-direction:column;

    gap:14px;
}

.req-item,
.docs-item,
.how-step,
.info-block,
.app-item{
    display:flex;
    align-items:flex-start;

    gap:16px;

    padding:18px;

    border-radius:20px;

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

    transition:.25s;
	margin-bottom: 10px;
}

.req-item:hover,
.docs-item:hover,
.how-step:hover,
.info-block:hover,
.app-item:hover{
    background:#fff7cf;

    transform:translateX(5px);
}

/* =========================================================
   ICONS
========================================================= */

.req-check,
.docs-icon,
.how-icon,
.app-icon{
    width:54px;
    height:54px;

    min-width:54px;

    border-radius:18px;

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

    font-size:26px;

    background:
        linear-gradient(135deg,#fff59d,#ffca28);

    box-shadow:
        0 8px 18px rgba(255,179,0,.24);
}

.req-check::before{
    content:"📋";
}

.docs-icon::before{
    content:"📄";
}

.how-icon::before{
    content:"🚀";
}

.app-icon::before{
    content:"📱";
}

/* =========================================================
   FAQ
========================================================= */

.faq-list{
    max-width:900px;
    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:14px;
}

.faq-item{
    overflow:hidden;
}

.faq-item summary{
    cursor:pointer;

    list-style:none;

    padding:20px;

    font-size:18px;
    font-weight:800;

    color:#2d2100;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.faq-item summary::after{
    content:"+";

    font-size:24px;

    transition:.3s;
}

.faq-item[open] summary::after{
    transform:rotate(45deg);
}

.faq-content{
    padding:0 20px 20px;

    color:#6e5400;
}

.faq-content p{
    margin-bottom:12px;
}

/* =========================================================
   GUIDE
========================================================= */

.list{
    display:flex;
    flex-direction:column;

    gap:14px;

    list-style:none;
}

.list li{
    background:rgba(255,255,255,.45);

    padding:16px 18px;

    border-radius:18px;

    font-weight:600;
}

/* =========================================================
   CITY BLOCK
========================================================= */

.cities-wrapper{
    padding:60px 20px;
}

.cities-wrapper details{
    max-width:1100px;
    margin:0 auto;
}

.cities-wrapper summary{
    cursor:pointer;

    display:flex;
    justify-content:space-between;

    padding:18px 22px;

    border-radius:20px;

    font-size:20px;
    font-weight:800;

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

    box-shadow:
        0 8px 24px rgba(255,179,0,.15);
}

.city{
    background:rgba(255,255,255,.55);

    padding:14px;

    border-radius:14px;

    text-align:center;

    font-weight:700;

    transition:.25s;
}

.city:hover{
    background:#fff3b0;

    transform:translateY(-3px);
}

/* =========================================================
   TAGS
========================================================= */

.courier-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    gap:12px;

    padding:40px 20px;
}

.tag{
    text-decoration:none;

    padding:10px 16px;

    border-radius:999px;

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

    color:#3a2a00;

    font-size:14px;
    font-weight:700;

    transition:.25s;
}

.tag:hover{
    background:#ffca28;

    transform:translateY(-2px);
}

/* =========================================================
   CTA
========================================================= */

.cta-section{
    padding:80px 20px;

    background:
        linear-gradient(180deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.05));
}

.cta-container{
    max-width:920px;
    margin:0 auto;

    text-align:center;
}

.cta-title{
    font-size:42px;
    font-weight:900;

    color:#2d2100;

    margin-bottom:14px;
}

.cta-subtitle{
    font-size:20px;
    color:#6d5400;

    margin-bottom:30px;
}

.cta-row{
    display:flex;
    justify-content:center;

    margin-bottom:26px;
}

.btn-telegram{
    background:
        linear-gradient(135deg,#2AABEE,#229ED9);

    color:#fff;
}

.btn-primary{
    background:#2d2100;
    color:#fff;
}

.icon{
    width:20px;
    height:20px;
}

/* =========================================================
   FLOAT EFFECT
========================================================= */

@keyframes float{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0px);
    }
}

.cool-btn{
    animation:float 3s ease-in-out infinite;
}

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

@media(max-width:1100px){

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

    .header-container{
        flex-wrap:wrap;
        justify-content:center;
    }
}

@media(max-width:768px){

    section{
        padding:42px 14px;
    }

    .hero-title{
        font-size:40px;
    }

    .hero-subtitle{
        font-size:20px;
    }

    .section-title,
    .requirements-title,
    .apps-title,
    .docs-title,
    .how-title,
    .faq-title,
    .title,
    .cities-title{
        font-size:30px;
    }

    .benefits-container,
    .grid{
        grid-template-columns:1fr;
    }

    .header-menu{
        justify-content:center;
    }

    .cool-btn,
    .btn{
        width:100%;
    }

    .cta-title{
        font-size:30px;
    }
}










.grid{
    display:flex;

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

    flex-wrap:wrap;

    gap:18px;

    max-width:1200px;

    margin:0 auto;
}
.acc-card{
    width:320px;
}


.hero-section{
    position:relative;

    min-height:700px;

    padding:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    overflow:hidden;
}


.hero-content{
    position:absolute;

    top:40px;
    left:40px;

    z-index:2;

    max-width:650px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    text-align:left;
}

.hero-title{
    color:#fff;

    font-size:64px;
    line-height:1.05;

    margin-bottom:18px;
}

.hero-subtitle{
    color:#f5f5f5;

    font-size:24px;

    margin-bottom:28px;
}