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

:root {
    --primary: #ff6b9d;
    --secondary: #c06c84;
    --accent: #ffeaf3;
    --dark: #2d2d2d;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background: #fafafa;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 107, 157, 0.1);
    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}

nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.contact-btn {
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 107, 157, 0.4);
}

/* ===== HERO (фикс видимости фоновой картинки) ===== */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    overflow: hidden;
    border-radius: 0 0 30px 30px;

    /* фоллбек если изображение не загрузилось */
    background: linear-gradient(135deg, #ff6b9d 0%, #c06c84 100%);
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* было 0.15 — почти не видно */
    opacity: 1;

    z-index: 0;
    transform: scale(1.02);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    /* было 0.9 — полностью “убивает” фото */
    background: linear-gradient(
        135deg,
        rgba(255, 107, 157, 0.55) 0%,
        rgba(192, 108, 132, 0.55) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    text-align: center;
    color: white;
}

.hero-badge {
    display: inline-block;
    padding: 10px 25px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    opacity: 0.95;
    margin-bottom: 3rem;
}

.btn-primary {
    display: inline-block;
    padding: 18px 45px;
    background: white;
    color: var(--primary);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    margin: 0 10px;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 100px 20px;
}

.section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 3rem;
}

.stats {
    background: white;
    padding: 80px 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    text-align: center;
    padding: 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--accent) 0%, #fff 100%);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.bento-card {
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s;
}

.bento-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(255, 107, 157, 0.15);
}

.bento-card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.bento-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bento-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
}

.program-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s;
}

.program-card:hover {
    transform: translateY(-10px);
}

.program-card-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    position: relative;
}

.program-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.program-card-number {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary);
}

.program-card-content {
    padding: 2rem;
}

.program-card-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.pricing-section {
    background: linear-gradient(135deg, var(--accent) 0%, #fff 100%);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.4s;
}

.pricing-card.featured {
    border: 3px solid var(--primary);
    transform: scale(1.05);
}

.pricing-card:hover {
    transform: translateY(-15px) scale(1.02);
}

.pricing-badge {
    position: absolute;
    top: -15px;
    right: 30px;
    padding: 10px 25px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border-radius: 50px;
    font-weight: 700;
}

.pricing-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.pricing-price {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pricing-old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 1.8rem;
    margin-left: 15px;
}

.pricing-availability {
    background: var(--accent);
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    color: var(--secondary);
    margin: 1.5rem 0;
}

.pricing-features {
    list-style: none;
    margin: 2.5rem 0;
}

.pricing-features li {
    padding: 15px 0 15px 35px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 900;
    font-size: 1.4rem;
}

.pricing-cta {
    display: block;
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s;
    margin-top: 2rem;
    border: none;
    cursor: pointer;
}

.pricing-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 107, 157, 0.4);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
}

.testimonial-card {
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.testimonial-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    overflow: hidden;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-rating {
    color: #ffc107;
    font-size: 1.1rem;
}

.testimonial-text {
    color: #666;
    line-height: 1.8;
    font-style: italic;
}

/* Footer */
footer {
    background: var(--dark);
    color: white;
    padding: 4rem 20px 2rem;
    text-align: center;
}

/* У p по умолчанию margin — лучше контролировать самим */
footer p {
    margin: 0.6rem 0;
}

.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s;
    white-space: nowrap;
}

.social-link:hover {
    background: var(--primary);
}

/* ===== Mobile fixes ===== */
@media (max-width: 768px) {
    nav {
        padding: 0.8rem 1rem;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    .logo {
        font-size: 1.05rem;
        line-height: 1.15;
        max-width: 52vw;
        white-space: normal;
    }

    .nav-links {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
    }

    .contact-btn {
        padding: 10px 14px;
        font-size: 0.95rem;
        border-radius: 999px;
    }

    section {
        padding: 70px 16px;
    }

    .hero {
        padding: 110px 16px 40px;
        min-height: 88vh;
    }

    .btn-primary {
        padding: 14px 24px;
        font-size: 1rem;
        margin: 8px 6px;
    }

    .pricing-grid,
    .program-grid,
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        padding: 2rem;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    footer {
        padding: 2rem 16px 1.25rem;
    }

    .footer-socials {
        gap: 0.75rem;
        margin: 1rem 0;
    }

    .social-link {
        padding: 10px 14px;
        font-size: 0.95rem;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1rem;
        max-width: 58vw;
    }

    .contact-btn {
        padding: 9px 12px;
        font-size: 0.92rem;
    }

    .hero h1 {
        line-height: 1.15;
    }

    footer {
        padding: 1.25rem 14px 1rem;
    }

    footer p {
        margin: 0.4rem 0;
        line-height: 1.35;
        font-size: 0.95rem;
    }

    .social-link {
        padding: 8px 12px;
        font-size: 0.92rem;
    }
}

/* ===== Form UI in site style (master-class / offline modal) ===== */
.mc-form { padding: 0; }
.mc-field { margin-bottom: 14px; }

.mc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 720px) {
    .mc-row { grid-template-columns: 1fr; }
}

.mc-label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dark);
}

.mc-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 107, 157, 0.22);
    background: linear-gradient(135deg, var(--accent) 0%, #fff 70%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    font-size: 16px;
    outline: none;
    transition: all 0.25s;
}

.mc-input:focus {
    border-color: rgba(255, 107, 157, 0.55);
    box-shadow: 0 0 0 5px rgba(255, 107, 157, 0.12);
    transform: translateY(-1px);
}

.mc-input::placeholder {
    color: rgba(45,45,45,0.45);
}

.mc-hint {
    margin-top: 12px;
    font-size: 0.92rem;
    color: rgba(45,45,45,0.6);
    text-align: center;
    line-height: 1.4;
}

select.mc-input { cursor: pointer; }

/* ===== Modal (чтобы не вылезало снизу) ===== */
.modal{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2000;
    padding: 18px;
}

.modal .modal-content{
    position: relative;
    max-width: 560px;
    width: calc(100% - 28px);
    margin: 8vh auto 0;
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(255, 107, 157, 0.12);
    box-shadow: 0 20px 70px rgba(0,0,0,0.18);
    padding: 22px;
}

.modal .close{
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 28px;
    cursor: pointer;
    color: rgba(45,45,45,0.6);
}

.modal .close:hover{
    color: rgba(45,45,45,0.9);
}
/* ===== Offline cards images ===== */
.offline-card{
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-top: 14px;
}

.offline-card__img{
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.offline-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.offline-card__top{
  display:flex;
  gap:10px;
  justify-content: space-between;
  align-items:center;
  padding: 14px 16px 0;
}

.offline-card__body{
  padding: 10px 16px 16px;
}

.offline-title{
  margin: 10px 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
}

.offline-desc{
  color: #666;
  margin: 0 0 10px;
  line-height: 1.6;
}

.offline-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: rgba(45,45,45,0.75);
  font-weight: 600;
  font-size: 0.95rem;
}

.offline-time-pill,
.offline-price-pill{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,107,157,0.12);
  color: var(--secondary);
  font-weight: 800;
}

.offline-cta{
  margin: 10px 16px 16px;
  width: calc(100% - 32px);
}

/* ===== Benefits (icons as images) - premium эффект ===== */
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

.benefit-card{
  position:relative;
  overflow:hidden;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border: 1px solid rgba(255,107,157,0.14);
  box-shadow: 0 10px 45px rgba(0,0,0,0.06);
  padding: 22px;
  display:flex;
  gap: 18px;
  align-items:flex-start;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.benefit-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 70px rgba(255,107,157,0.14);
  border-color: rgba(255,107,157,0.28);
}

.benefit-icon{
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,107,157,0.18), rgba(192,108,132,0.14));
  border: 1px solid rgba(255,107,157,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

.benefit-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.03);
}

.benefit-card:hover .benefit-icon img{
  transform: scale(1.10);
  filter: saturate(1.2) contrast(1.05);
}

.benefit-emoji{
  font-size: 2rem;
  line-height: 1;
}

.benefit-content{
  flex:1 1 auto;
}

.benefit-title{
  margin: 2px 0 8px;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.benefit-desc{
  margin: 0;
  color: rgba(45,45,45,0.70);
  line-height: 1.75;
  font-size: 1.02rem;
}

.benefit-glow{
  position:absolute;
  inset:-40px -60px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(255,107,157,0.32), transparent 60%);
  transform: translate3d(0,0,0);
  pointer-events:none;
  filter: blur(2px);
  opacity: .9;
}

.benefit-card::after{
  content:"";
  position:absolute;
  inset:auto -80px -90px auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(192,108,132,0.22), transparent 60%);
  pointer-events:none;
}

@media (max-width: 720px){
  .benefit-card{
    padding: 18px;
    gap: 14px;
  }
  .benefit-icon{
    width: 66px;
    height: 66px;
    border-radius: 18px;
  }
}

/* Benefits: иконка-картинка внутри bento */
.benefit-icon--img{
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.benefit-icon--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.1) contrast(1.05);
}

.bento-card:hover .benefit-icon--img img{
  transform: scale(1.10);
  filter: saturate(1.25) contrast(1.07);
}

.benefit-fallback{
  width: 44px;
  height: 44px;
  display:block;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.20));
}

/* Shared public visual layer: landing page, course catalogue and course pages. */
.public-page { background:#fbf8fa; color:#2d2530; }
.public-page .container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.92); border-bottom:1px solid #f0e4ea; backdrop-filter:blur(18px); }
.site-nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-logo { color:#2d2530; text-decoration:none; font-weight:800; letter-spacing:-.03em; font-size:1.05rem; }
.site-nav-links { display:flex; align-items:center; gap:24px; }
.site-nav-links a { text-decoration:none; font-size:.92rem; font-weight:650; transition:color .2s,transform .2s,box-shadow .2s,background .2s; }
.nav-context-link { color:#6e6370; padding:10px 2px; }
.nav-context-link:hover { color:var(--primary); }
.nav-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 16px; border-radius:999px; white-space:nowrap; }
.nav-button:hover { transform:translateY(-1px); }
.nav-button-primary { color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow:0 8px 18px rgba(255,107,157,.18); }
.nav-button-outline { color:#9b4f6d; border:1px solid #f1cbd9; background:#fff; }
.nav-button-outline:hover { color:var(--primary); border-color:var(--primary); background:#fff8fb; }
.site-nav-links .nav-account { color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow:0 8px 18px rgba(255,107,157,.18); }
.nav-social-icon { width:40px; height:40px; display:inline-grid; place-items:center; color:#9b4f6d; border:1px solid #f1cbd9; border-radius:50%; background:#fff; }
.nav-social-icon svg { width:19px; height:19px; fill:currentColor; stroke:currentColor; stroke-width:1.8; }
.nav-social-icon svg rect,.nav-social-icon svg circle { fill:none; }
.nav-social-icon svg .social-dot { fill:currentColor; stroke:none; }
.nav-social-icon:hover { color:var(--primary); border-color:var(--primary); background:#fff8fb; transform:translateY(-1px); }
.nav-toggle { display:none; border:0; background:transparent; font-size:1.4rem; color:#2d2530; }
.eyebrow { display:inline-block; color:var(--primary); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; margin-bottom:14px; }
.catalog-hero,.course-landing-hero { overflow:hidden; background:radial-gradient(circle at 82% 20%,#ffd7e6 0,transparent 32%),linear-gradient(135deg,#fff 0%,#fff0f6 100%); }
.catalog-hero-inner,.course-landing-grid { min-height:470px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:64px; padding:80px 0; }
.catalog-hero h1,.course-landing-hero h1 { max-width:720px; margin:0 0 20px; font-size:clamp(2.4rem,5vw,4.8rem); line-height:1.02; letter-spacing:-.06em; color:#2c1f2a; }
.catalog-hero p,.course-lead { max-width:620px; color:#756976; font-size:1.15rem; line-height:1.7; margin:0 0 30px; }
.catalog-hero-card { padding:34px; border:1px solid rgba(255,107,157,.2); border-radius:28px; background:rgba(255,255,255,.72); box-shadow:0 24px 70px rgba(192,108,132,.15); display:flex; flex-direction:column; gap:10px; }
.catalog-hero-card strong { font-size:1.35rem; }.catalog-hero-card span:last-child { color:#806f7b; }
.catalog-hero-icon { width:60px; height:60px; display:grid; place-items:center; border-radius:20px; color:#fff; font-size:2rem; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.section { padding:92px 0; }.section-light { background:#fff; }.section-accent { background:linear-gradient(135deg,#fff0f6,#f9e2eb); }
.section-heading-row { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.section-title-left { margin:0; color:#2c1f2a; font-size:clamp(2rem,3vw,3rem); letter-spacing:-.045em; line-height:1.08; }
.section-lead { max-width:390px; margin:0; color:#806f7b; line-height:1.6; }
.course-catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.catalog-card { overflow:hidden; display:flex; flex-direction:column; border:1px solid #f0e4ea; border-radius:24px; background:#fff; box-shadow:0 12px 35px rgba(55,30,45,.06); transition:transform .25s,box-shadow .25s; }
.catalog-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(255,107,157,.16); }
.catalog-card-media { position:relative; display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden; color:var(--primary); font-size:3rem; background:linear-gradient(135deg,#ffe4ef,#f5d9e4); text-decoration:none; }
.catalog-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }.catalog-card:hover .catalog-card-media img { transform:scale(1.05); }
.catalog-card-badge { position:absolute; top:14px; left:14px; padding:7px 11px; border-radius:999px; color:#fff; background:rgba(45,37,48,.72); font-size:.7rem; font-weight:700; }
.catalog-card-body { display:flex; flex:1; flex-direction:column; padding:24px; }.catalog-card h3 { margin:0 0 10px; font-size:1.2rem; line-height:1.2; }.catalog-card h3 a { color:#2d2530; text-decoration:none; }
.catalog-card p { flex:1; color:#806f7b; line-height:1.55; margin:0 0 18px; }.catalog-meta { display:flex; flex-wrap:wrap; gap:8px; color:#9b8994; font-size:.76rem; margin-bottom:22px; }.catalog-meta span { padding:6px 8px; border-radius:8px; background:#fbf3f7; }
.catalog-card-footer { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }.catalog-card-footer strong { color:var(--primary); font-size:1.35rem; }.catalog-card-footer del { color:#b9a9b1; font-size:.8rem; }.catalog-card-footer .btn-secondary { margin-left:auto; }
.btn-primary,.btn-secondary,.btn-ghost { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 22px; border-radius:999px; text-decoration:none; font-weight:750; transition:transform .2s,box-shadow .2s,background .2s; }
.btn-primary { color:#fff; border:0; background:linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow:0 12px 24px rgba(255,107,157,.2); }.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(255,107,157,.3); }
.btn-secondary { min-height:38px; padding:9px 14px; color:var(--primary); border:1px solid #f2c9d9; background:#fff; font-size:.82rem; }.btn-ghost { color:#7e6271; border:1px solid #ead3de; background:rgba(255,255,255,.65); }.btn-wide { width:100%; }
.empty-state-card { padding:50px; text-align:center; color:#806f7b; border:1px dashed #e8c8d7; border-radius:24px; background:#fff; }
.feature-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }.feature-strip>div { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; }.feature-strip-icon { grid-row:span 2; width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--primary); background:#fff; font-size:.75rem; font-weight:800; }.feature-strip strong { font-size:1rem; }.feature-strip span:last-child { color:#806f7b; font-size:.86rem; }
.site-footer { padding:48px 0; color:#d9c8d2; background:#2d2530; }.site-logo-light { color:#fff; }.site-footer-grid { display:grid; grid-template-columns:1.5fr 1fr auto; gap:30px; align-items:start; }.site-footer p { max-width:280px; color:#a998a5; line-height:1.6; }.footer-links { display:flex; flex-direction:column; gap:10px; }.footer-links a { color:#d9c8d2; text-decoration:none; }.footer-meta { color:#a998a5; font-size:.82rem; }
.back-link,.text-link { display:inline-block; margin-bottom:24px; color:#8c6d7d; text-decoration:none; font-size:.9rem; }.course-landing-grid { min-height:600px; }.course-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }.course-stat-row { display:flex; flex-wrap:wrap; gap:24px; color:#8d7b86; font-size:.9rem; }.course-stat-row strong { display:block; color:#2d2530; font-size:1.25rem; }
.course-cover-card { overflow:hidden; border-radius:28px; background:#fff; box-shadow:0 25px 70px rgba(100,45,70,.18); }.course-cover-card img,.course-cover-placeholder { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }.course-cover-placeholder { display:grid; place-items:center; color:var(--primary); font-size:5rem; background:linear-gradient(135deg,#ffe0ed,#f2cfdd); }.course-cover-price { display:flex; justify-content:space-between; align-items:end; gap:12px; padding:20px 24px; }.course-cover-price>div { display:flex; align-items:baseline; gap:9px; }.course-price { color:var(--primary); font-size:1.8rem; font-weight:800; }.course-cover-price del { color:#aa9aa3; font-size:.85rem; }.course-cover-price>span { max-width:130px; color:#8d7b86; font-size:.75rem; text-align:right; }
.course-content-grid { display:grid; grid-template-columns:1fr 340px; gap:70px; align-items:start; }.module-list { display:grid; gap:12px; margin-top:30px; }.module-card { padding:20px 22px; border:1px solid #f0e4ea; border-radius:18px; background:#fff; }.module-card summary { display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; cursor:pointer; list-style:none; font-weight:750; }.module-card summary::-webkit-details-marker { display:none; }.module-number { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--primary); background:#fff0f6; font-size:.78rem; }.module-card summary small { color:#a18e99; font-weight:500; }.module-card p { margin:14px 0 0 52px; color:#806f7b; line-height:1.6; }
.course-side-card { position:sticky; top:96px; padding:28px; border:1px solid #efdce5; border-radius:24px; background:#fff; box-shadow:0 15px 40px rgba(55,30,45,.06); }.course-side-card h3 { margin-top:0; font-size:1.3rem; }.check-list { display:grid; gap:12px; padding:0; margin:0 0 24px; list-style:none; color:#6e5d68; }.check-list li::before { content:'✓'; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:9px; border-radius:50%; color:#fff; background:var(--primary); font-size:.7rem; }.preview-note { display:grid; gap:4px; padding:14px; margin-bottom:18px; border-radius:14px; background:#fff4f8; color:#7c5265; font-size:.82rem; }.preview-note strong { color:var(--primary); }.final-cta { max-width:760px; text-align:center; }.final-cta h2 { margin:0 auto 24px; font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; letter-spacing:-.05em; }
@media (max-width:900px) { .course-catalog-grid { grid-template-columns:repeat(2,1fr); }.catalog-hero-inner,.course-landing-grid { grid-template-columns:1fr; gap:30px; padding:64px 0; }.catalog-hero-card { max-width:460px; }.course-content-grid { grid-template-columns:1fr; gap:32px; }.course-side-card { position:static; } }
@media (max-width:640px) { .public-page .container { width:min(100% - 28px,1180px); }.site-nav { min-height:62px; }.nav-toggle { display:block; }.site-nav-links { display:none; position:absolute; left:14px; right:14px; top:68px; flex-direction:column; align-items:stretch; gap:0; padding:10px; border:1px solid #f0e4ea; border-radius:16px; background:#fff; box-shadow:0 16px 35px rgba(55,30,45,.12); }.site-nav-links.is-open { display:flex; }.site-nav-links a { padding:12px; }.course-catalog-grid,.feature-strip,.site-footer-grid { grid-template-columns:1fr; }.section { padding:64px 0; }.section-heading-row { display:block; }.section-lead { margin-top:14px; }.catalog-hero h1,.course-landing-hero h1 { font-size:2.7rem; }.course-cover-price { align-items:start; flex-direction:column; }.course-cover-price>span { max-width:none; text-align:left; }.module-card summary { grid-template-columns:38px 1fr; }.module-card summary small { grid-column:2; }.module-card p { margin-left:0; } }

/* Course request form */
.request-card { max-width:820px; padding:42px; border:1px solid #f0e0e8; border-radius:28px; background:#fff; box-shadow:0 18px 50px rgba(55,30,45,.07); }
.request-card h2 { margin-bottom:12px; }.request-card>div:first-child p { max-width:620px; color:#806f7b; line-height:1.6; }
.course-request-form { margin-top:28px; }.request-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.course-request-form label { display:block; margin-bottom:16px; color:#493846; font-size:.85rem; font-weight:700; }
.course-request-form input,.course-request-form textarea { display:block; width:100%; margin-top:7px; padding:13px 14px; border:1px solid #eadde4; border-radius:12px; outline:none; background:#fdfbfc; color:#30242d; font:inherit; font-weight:400; resize:vertical; }
.course-request-form input:focus,.course-request-form textarea:focus { border-color:#ff6b9d; background:#fff; box-shadow:0 0 0 4px rgba(255,107,157,.12); }
.request-alert { padding:14px 16px; margin-top:18px; border-radius:12px; font-size:.9rem; }.request-alert-success { color:#17633a; background:#eaf8f0; }.request-alert-error { color:#8b2635; background:#fff0f0; }
.course-pricing-section { background:#fff8fb; }.course-plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.course-plan-card { position:relative; padding:26px; border:1px solid #f0dce6; border-radius:20px; background:#fff; }.course-plan-card.is-featured { border:2px solid var(--primary); }.course-plan-card h3 { margin:0 0 8px; }.course-plan-card p { min-height:42px; color:#806f7b; }.course-plan-card>strong { display:block; margin:20px 0; color:var(--primary); font-size:1.6rem; }.course-plan-badge { position:absolute; top:-12px; right:18px; padding:5px 10px; border-radius:999px; color:#fff; background:var(--primary); font-size:.7rem; font-weight:800; }
.journey-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.journey-card { padding:26px; border:1px solid rgba(255,255,255,.8); border-radius:22px; background:rgba(255,255,255,.72); }.journey-card>span { display:grid; place-items:center; width:40px; height:40px; margin-bottom:22px; border-radius:13px; color:var(--primary); background:#fff; font-weight:800; font-size:.8rem; }.journey-card h3 { margin:0 0 8px; }.journey-card p { margin:0; color:#806f7b; line-height:1.55; }
.faq-section { background:#fff; }.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }.faq-list { display:grid; gap:10px; }.faq-list details { padding:20px 22px; border:1px solid #f0e4ea; border-radius:16px; background:#fff; }.faq-list summary { cursor:pointer; color:#3b2d38; font-weight:750; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { content:'+'; float:right; color:var(--primary); font-size:1.2rem; }.faq-list details[open] summary::after { content:'−'; }.faq-list p { margin:12px 0 0; color:#806f7b; line-height:1.6; }
@media (max-width:640px) { .request-card { padding:26px 18px; }.request-form-grid,.course-plans-grid { grid-template-columns:1fr; } }

/* Final course CTA: compact, clear and visually separate from the curriculum. */
#course-request { padding:78px 0; background:linear-gradient(135deg,#fff4f8 0%,#f9edf3 100%); }
#course-request .request-card { max-width:900px; padding:48px 54px; border:1px solid rgba(255,107,157,.16); border-radius:30px; background:rgba(255,255,255,.86); box-shadow:0 24px 70px rgba(104,54,78,.12); }
#course-request .request-card>div:first-child { max-width:650px; margin:0 auto; text-align:center; }
#course-request .request-card .eyebrow { margin-bottom:10px; }
#course-request .request-card h2 { margin:0; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.055em; line-height:1.05; }
#course-request .request-card>div:first-child p { max-width:560px; margin:16px auto 0; color:#806f7b; line-height:1.65; }
#course-request .course-request-form { max-width:650px; margin:30px auto 0; padding:26px; border:1px solid #f0e1e8; border-radius:20px; background:#fff; box-shadow:0 12px 28px rgba(55,30,45,.05); }
#course-request .course-request-form label { color:#594351; }
#course-request .course-request-form .btn-primary { width:100%; border:0; cursor:pointer; }
#course-request .request-alert { max-width:650px; margin:22px auto 0; }
@media (max-width:640px) { #course-request { padding:56px 0; } #course-request .request-card { padding:34px 16px; border-radius:24px; } #course-request .course-request-form { padding:20px 16px; margin-top:24px; } .journey-grid,.faq-layout { grid-template-columns:1fr; gap:28px; } }