:root{

    --primary-color:#2c5282;
    --primary-light:#ebf8ff;

    --accent-color:#3182ce;

    --text-color:#2d3748;

    --bg-color:#f7fafc;

    --white:#ffffff;

    --transition:all .3s ease;
}

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    "Segoe UI",
    sans-serif;

    background:var(--bg-color);

    color:var(--text-color);

    line-height:1.6;
}

.container{

    width:90%;

    max-width:1200px;

    margin:0 auto;
}

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

.site-header{

    background:white;

    border-bottom:1px solid #e2e8f0;

    position:sticky;

    top:0;

    z-index:1000;
}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:72px;
}

.logo{

    text-decoration:none;

    color:var(--primary-color);

    font-size:2rem;

    font-weight:700;
}

.main-nav{

    display:flex;

    gap:2rem;

    align-items:center;
}

.main-nav a{

    text-decoration:none;

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

.btn-nav{

    background:var(--primary-light);

    color:var(--primary-color);

    padding:.6rem 1rem;

    border-radius:6px;
}

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

.chat-hero{

    background:
    linear-gradient(
        145deg,
        #ffffff,
        var(--primary-light)
    );

    text-align:center;

    padding:6rem 0 5rem;
}

.hero-content{

    max-width:850px;

    margin:auto;
}

.sub-badge{

    display:inline-block;

    background:var(--primary-color);

    color:white;

    padding:.35rem .8rem;

    border-radius:20px;

    text-transform:uppercase;

    letter-spacing:.5px;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:1rem;
}

.chat-hero h1{

    font-size:
    clamp(
        2.6rem,
        5vw,
        4.5rem
    );

    color:var(--primary-color);

    margin-bottom:1rem;
}

.chat-hero p{

    color:#4a5568;

    font-size:1.15rem;

    max-width:700px;

    margin:auto;
}

/* ==================================
   INFO
================================== */

.chat-intro{

    padding:4rem 0;
}

.info-card{

    background:white;

    border-radius:12px;

    padding:3rem;

    border:1px solid #e2e8f0;
}

.info-card h2{

    color:var(--primary-color);

    margin-bottom:1rem;
}

/* ==================================
   STEPS
================================== */

.steps-section{

    padding:5rem 0;
}

.steps-section h2{

    text-align:center;

    color:var(--primary-color);

    margin-bottom:3rem;

    font-size:2rem;
}

.steps-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:2rem;
}

.step-card{

    background:white;

    border-radius:12px;

    padding:2rem;

    text-align:center;

    border:1px solid #e2e8f0;
}

.step-card span{

    width:60px;
    height:60px;

    margin:0 auto 1rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary-color);

    font-weight:700;

    font-size:1.3rem;
}

.step-card h3{

    color:var(--primary-color);

    margin-bottom:.75rem;
}

/* ==================================
   TOPICS
================================== */

.topics-section{

    padding:5rem 0;

    background:white;
}

.topics-section h2{

    text-align:center;

    color:var(--primary-color);

    margin-bottom:2rem;
}

.topic-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1rem;

    max-width:900px;

    margin:auto;
}

.topic-grid div{

    background:var(--primary-light);

    color:var(--primary-color);

    padding:.8rem 1.2rem;

    border-radius:999px;

    font-weight:600;
}

/* ==================================
   VALUES
================================== */

.values-section{

    padding:5rem 0;
}

.values-section h2{

    text-align:center;

    color:var(--primary-color);

    margin-bottom:2rem;
}

.value-list{

    list-style:none;

    max-width:700px;

    margin:auto;
}

.value-list li{

    background:white;

    border:1px solid #e2e8f0;

    padding:1rem 1.2rem;

    margin-bottom:1rem;

    border-radius:10px;
}

/* ==================================
   QUEUE
================================== */

.queue-section{

    padding:5rem 0;
}

.queue-card{

    max-width:650px;

    margin:auto;

    text-align:center;

    background:white;

    padding:3rem;

    border-radius:16px;

    border:1px solid #e2e8f0;

    box-shadow:
    0 10px 30px rgba(0,0,0,.03);
}

.queue-card h2{

    color:var(--primary-color);

    margin-bottom:1rem;
}

.queue-card p{

    margin-bottom:2rem;

    color:#64748b;
}

.queue-btn{

    display:inline-block;

    background:var(--primary-color);

    color:white;

    text-decoration:none;

    padding:1rem 2rem;

    border-radius:8px;

    font-weight:700;
}

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

.faq-mini{

    padding:5rem 0;
}

.faq-mini h2{

    text-align:center;

    color:var(--primary-color);

    margin-bottom:2rem;
}

.mini-faq-item{

    background:white;

    border:1px solid #e2e8f0;

    border-radius:12px;

    padding:1.5rem;

    max-width:800px;

    margin:0 auto 1rem;
}

.mini-faq-item h3{

    color:var(--primary-color);

    margin-bottom:.5rem;
}

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

.footer{

    background:#0f172a;

    color:white;

    text-align:center;

    padding:40px;
}

/* ==================================
   RESPONSIVE
================================== */

@media(max-width:992px){

    .steps-grid{

        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .main-nav{

        display:none;
    }

    .chat-hero h1{

        font-size:2.3rem;
    }

}

.opening-hours{

    padding:5rem 0;
}

.opening-hours h2{

    text-align:center;

    color:var(--primary-color);

    margin-bottom:.75rem;
}

.hours-intro{

    text-align:center;

    color:#64748b;

    margin-bottom:2rem;
}

.hours-card{

    max-width:700px;

    margin:auto;

    background:white;

    border:1px solid #e2e8f0;

    border-radius:14px;

    overflow:hidden;
}

.hours-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 1.5rem;

    border-bottom:1px solid #edf2f7;
}

.hours-row:last-child{

    border-bottom:none;
}

.hours-row strong{

    color:var(--primary-color);
}