/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; }

/* Container */
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header { background: linear-gradient(135deg, #00778a 0%, #005a66 100%); padding: 15px 0; }
.header-content { display: flex; align-items: center; gap: 15px; }
.logo { height: 55px; width: auto; border-radius: 30% / 50%; object-fit: cover; }
.site-title { color: #fff; font-size: 1.8rem; font-weight: 600; margin: 0; }

/* Typography */
h1, h2, h3 { font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 30px; }
h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 30px; }
h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 20px; }
p { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: 1rem; line-height: 1.8; }

/* Colors */
.accent { color: #7c5d0e; }
.teal { color: #00778a; }
.highlight { color: #00707d; margin-top: 30px; text-align: center; }

/* Hero Section */
.hero { padding: 60px 0; text-align: center; }

/* Intensive Section */
.intensive { padding: 60px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
.intensive-content { max-width: 700px; margin: 0 auto; text-align: center; }
.btn { display: block; width: fit-content; padding: 12px 24px; background: #00778a; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; transition: background 0.2s; margin: 20px auto 0; }
.btn:hover { background: #005a66; }

/* Description Section */
.description { padding: 60px 0; }
.description .container { max-width: 800px; }

/* Target Audience Section */
.target-audience { padding: 60px 0; background: #fafafa; text-align: center; }
.target-audience .subtitle { font-size: 1.2rem; color: #434343; margin-bottom: 40px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; }
.card { text-align: center; padding: 30px 20px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.card-icon { font-size: 3rem; display: block; margin-bottom: 15px; }
.card p { margin: 0; }

/* How It Works Section */
.how-it-works { padding: 60px 0; }
.how-it-works .intro { margin-bottom: 30px; }
.benefits-list { list-style: none; padding-left: 0; }
.benefits-list li { position: relative; padding-left: 40px; font-size: 1.15rem; line-height: 1.8; margin-bottom: 12px; }
.benefits-list li::before { content: '★'; position: absolute; left: 0; color: #b07d00; font-size: 1.3rem; }

/* Schedule Section */
.schedule { padding: 60px 0; background: linear-gradient(135deg, #00778a 0%, #005a66 100%); color: #fff; text-align: center; }
.schedule h2 { color: #fff; }
.schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; margin-bottom: 40px; }
.schedule-item { background: rgba(255,255,255,0.1); padding: 25px; border-radius: 10px; }
.schedule-item .label { display: block; font-size: 0.9rem; text-transform: uppercase; opacity: 0.8; margin-bottom: 10px; }
.schedule-item .value { display: block; font-size: 1.3rem; font-weight: 600; }
.dates p { font-size: 1.3rem; margin-bottom: 10px; text-transform: uppercase;}

/* Payment Section */
.payment { padding: 60px 0; background: #f5f5f5; }
.payment-card { max-width: 450px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.payment-summary { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.payment-title { font-size: 1.2rem; color: #666; margin-bottom: 10px; }
.payment-amount { font-size: 2.5rem; font-weight: 700; color: #00778a; }
.payment h3 { font-size: 1.1rem; margin-bottom: 15px; }
.payment-options { display: flex; gap: 10px; margin-bottom: 25px; }
.payment-button { flex: 1; padding: 12px; border: 2px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.2s; }
.payment-button:hover { border-color: #00778a; }
.payment-button.active { border-color: #00778a; background: #00778a; color: #fff; }
.payment-form label { display: block; font-size: 0.9rem; color: #666; margin-bottom: 5px; margin-top: 15px; }
.payment-form input[type="text"] { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; }
.payment-form input[type="text"]:focus { outline: none; border-color: #00778a; }
.agreement { margin-top: 20px; }
.agreement-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #666; cursor: pointer; }
.agreement-label input { margin-top: 3px; }
.agreement-label a { color: #00778a; }
.submit-btn { width: fit-content; padding: 15px; margin: 20px auto 0; display: block; background: #00778a; color: #fff; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background 0.2s; text-decoration: none; }
.submit-btn:hover:not(:disabled) { background: #005a66; }
.submit-btn:disabled { background: #ccc; cursor: not-allowed; }

/* Footer */
footer { padding: 30px 0; text-align: center; color: #666; font-size: 0.9rem; }

/* Responsive */
@media (max-width: 640px) {
    .container { padding: 0 15px; }
    section { padding: 40px 0; }
    .benefits-list li { padding-left: 35px; font-size: 1rem; }
    .payment-card { padding: 20px; }
}
/* ===== Стиль таблицы и текстового расписания ===== */
.schedule .dates {
    margin-top: 40px;
    /* display: flex; */
    justify-content: center;
}

.schedule .dates table {
    width: 100%;
    max-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    color: #333;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.schedule .dates tr {
    transition: all 0.25s ease;
}

.schedule .dates tr:not(:last-child) td {
    border-bottom: 1px solid #eee;
}

.schedule .dates tr:hover {
    background: #f1fbfc;
}

.schedule .dates td {
    padding: 22px 30px;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.schedule .dates td:first-child {
    font-weight: 700;
    color: #00778a;
    width: 45%;
}

.schedule .dates td:last-child {
    text-align: right;
    color: #444;
}