/* CSS Variables */
:root {
    --primary-blue: #0B66D0;
    --light-blue: #E6F4FF;
    --feature-text: #9AA3AD;
    --muted-text: #B0B8C0;
    --accent-yellow: #FFB13B;
    --card-shadow: rgba(11, 60, 112, 0.06);
    --text-dark: #23303A;
    --text-darker: #222831;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
    font-weight: 500;
}

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

/* Header Styles */
.header {
    padding: 30px 0;
    background-color: #ffffff;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.navigation {
    display: flex;
    gap: 40px;
}

.nav-link {
    text-decoration: none;
    color: #A8ABB6;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #114770;
}

.logo img {
  max-height: 30px;
  display: block;
}

/* Hero Section */
.hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 0 40px 0;
}

.hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #0E204D;
    margin: 30px auto 35px;
    width: 475px;
    height: 120px;
}

.title-part {
    color: #114770;
    display:inline-block;
    line-height: 1.4;
}

/* Subheading pod nagłówkiem */
.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #9AA3B2;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 24px;
}

/* Przycisk - Go to App Store */
.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: #4D9FFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
}

.hero-button:hover {
    color: #2A7FEF;
}

.hero-description {
    font-size: 20px;
    color: #A8ABB6;
    font-weight: 600;
    margin-bottom: 100px;
    max-width: 600px;
    margin-left: auto;
    margin-right: 20px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #71C2FF;
    font-size: 18px;
    font-weight: 600;
    transition: transform 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    color: #114770;
}

.cta-icon {
    font-size: 20px;
}

.cta-icon svg {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
}

/* Features Section */
.features {
    padding: 40px 0 80px 0;
    background-color: #ffffff;
}

.features-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.feature-card {
    background: #FFF;
    width: 297.91px;
    height: 311px;
    padding: 40px 30px;
    border-radius: 50px;
    text-align: center;
    box-shadow: inset 0 0 6px 0 #AEE0FF !important;
    filter: none !important;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.feature-card:hover {
    box-shadow: inset 0 0 6px 0 #71C2FF !important;
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
    text-align: center;
    width: 100%;
}

.feature-icon svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.feature-title {
    color: #114770;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.feature-description {
    color: #A8ABB6;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.highlight {
    color: #71C2FF;
    font-weight: 600
}

/* Responsive Design */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        gap: 20px;
    }
    
    .navigation {
        gap: 30px;
    }
    
    .hero-title {
        font-size: 34;
        width: 90%;
        max-width: 475px;
        height: auto;
        margin: 40px auto 30px;
    }
    
    .hero-description {
        font-size: 18px;
    }
    
    .features-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    .feature-card {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 30px;
        width: 100%;
        max-width: 475px;
        height: auto;
        margin: 30px auto 30px;
    }
    
    .hero-description {
        font-size: 17px;
        width: 90%;
    }
    
    .navigation {
        gap: 20px;
    }
    
  .nav-link {
    font-size: 16px;
  }
  
  .neatBreakline {
    display: none;
  }
}

/* ========== LEARNING METHODS – Figma layout ========== */
.learning-methods-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.lm-wrap{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:48px; max-width:1080px; margin:0 auto; padding:0 16px;
}
.lm-left{ flex:1; min-width:300px; }
.lm-right{ width:360px; flex-shrink:0; display:flex; justify-content:center; }

.lm-head{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.lm-badge{
  display:inline-grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:#FFF4E9; box-shadow:0 0 0 1px #FFE7CC inset;
  font-size:16px;
}
.lm-title{ margin:0; color:#1b2430; font-size:26px; font-weight:600; }
.lm-desc{ margin:8px 0 28px; color:#9aa3b2; line-height:2.0; max-width:560px; font-size:20px; }

.lm-grid{
  display:grid; grid-template-columns:repeat(3, minmax(180px,1fr));
  gap:14px; max-width:640px;
}

.lm-pill-ico{ font-size:16px; }

.lm-phone{
  width:340px; min-height:280px; padding:24px; border-radius:24px;
  background:#fff; border:1px solid #ffe9d6; box-shadow:0 8px 30px rgba(0,0,0,.06);
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
}
.lm-phone-head{ font-size:12px; color:#9aa3b2; }
.lm-input{
  height:40px; border-radius:999px; border:1px solid #e8ecf3; padding:0 14px;
  outline:none;
}
.lm-input:focus{ border-color:#b9d8ff; box-shadow:0 0 0 3px rgba(113,194,255,.25); }
.lm-verify{
  height:34px; border:0; border-radius:999px; background:#96c7ff;
  color:#fff; font-weight:600; cursor:pointer;
  transition:filter .15s ease, transform .15s ease;
}
.lm-verify:hover{ filter:brightness(.95); transform:translateY(-1px); }

/* ========== PRONUNCIATION – Figma layout ========== */
.pronunciation {
    background-color: #FFFFFF;
    padding: 40px 0;
}

.pr-wrap{
  display:flex; gap:56px; align-items:center; justify-content:center;
  max-width:1080px; margin:0 auto; padding:24px 16px;
}
.pr-left{ flex-shrink:0; }
.pr-right{ flex:1; min-width:300px; }

.pr-card{
  width:280px; min-height:320px; padding:18px; border-radius:22px;
  background:#fff; border:1px solid #ffe9d6; box-shadow:0 8px 30px rgba(0,0,0,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
.pr-hint{ margin:4px 0 0; color:#6c7a89; font-size:13px; text-align:center; }
.pr-mic{
  width:60px; height:60px; border-radius:18px; border:0; cursor:pointer;
  background:#ffa726; color:#fff; font-size:26px; display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(255,167,38,.35);
  transition:transform .12s ease, filter .12s ease;
}
.pr-mic:hover{ transform:translateY(-1px); filter:brightness(.98); }

.pr-bottom{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pr-skipbar{
  flex:1; height:24px; border-radius:999px; background:#e6f0ff;
  display:flex; align-items:center; padding:0 12px; color:#3b82f6; font-size:12px; font-weight:500;
}
.pr-skip-label{ line-height:1; }
.pr-coin{ font-size:16px; }

.pr-title-row{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.pr-speaker{ font-size:18px; display:inline-block; background:transparent; border:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.pr-title{ margin:0; color:#1b2430; font-size:26px; font-weight:700; }
.pr-desc{ margin:10px 0 0; color:#9aa3b2; line-height:1.6; max-width:520px; font-size:20px; }

/* ========== Responsive tweaks ========== */
@media (max-width:1200px){
  .lm-right{ width:320px; }
  .lm-grid{ grid-template-columns:repeat(3, minmax(160px,1fr)); }
}
@media (max-width:900px){
  .lm-wrap, .pr-wrap{ flex-direction:column; gap:28px; }
  .lm-right, .pr-left{ width:100%; display:flex; justify-content:center; }
  .lm-phone{ width:min(420px, 100%); }
  .lm-grid{ grid-template-columns:repeat(2, minmax(160px,1fr)); max-width:none; }
  .pr-card{ width:min(320px, 100%); }
  .pr-right{ text-align:left; }
}
@media (max-width:600px){
  .lm-grid{ grid-template-columns:1fr; }
}

/* Pricing Section Styles */
.pricing-section {
    background-color: #FFFFFF;
    padding: 80px 0;
}

.pricing-section .container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 24px;
}

.pricing-intro {
    text-align: center;
    margin-bottom: 60px;
}

.plans-row {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    justify-content: center;
}

.plan {
    flex: 1;
    max-width: 420px;
}

.plan--free {
    padding-right: 20px;
}


.plan--pro {
    background-color: #FFFFFF;
    border-radius: 45px;
    padding: 32px;
    box-shadow: inset 0px 0px 6px 0px #AEE0FF;
    transition: box-shadow 0.15s ease ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;
}

.plan--pro:hover {
  box-shadow: inset 0px 0px 6px 0px #71C2FF;
}

.plan-title {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.features-list {
    list-style: none;
    margin-bottom: 32px;
    padding-left: 12px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.check-icon {
    flex-shrink: 0;
}

.feature-text {
    font-weight: 500;
    font-size: 18px;
    color: var(--feature-text);
    line-height: 1.6;
}

.price-row {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 16px;
    grid-gap: 20px;
}


/* Responsive Design for Pricing */
@media (max-width: 900px) {
    .plans-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .plan {
        width: 100%;
        max-width: none;
    }
    
    .plan--free {
        padding-right: 0;
    }
    
    .plan--pro {
        transform: none;
        margin-bottom: 20px;
    }    
}

@media (max-width: 768px) {
    .pricing-section {
        padding: 60px 0;
    }
    
    .pricing-section .container {
        padding: 0 24px;
    }
    
    .centerTitle {
        font-size: 28px;
    }
        
    .feature-text {
        font-size: 16px;
    }
        
    .plan--pro {
        padding: 20px;
    }
}

/* ========== Focus-visible for accessibility ========== */
.lm-pill:focus-visible,
.lm-input:focus-visible,
.lm-verify:focus-visible,
.pr-mic:focus-visible,
.pr-skipbar:focus-visible {
  outline: 2px solid #9ccfff;
  outline-offset: 2px;
}

/* ---------- UNIWERSALNA SIATKA 1:1 DLA OBU SEKCJI ---------- */
.lm-wrap, .pr-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* równe kolumny */
  column-gap: 56px;                 /* stały gutter */
  align-items: start;
  max-width: 1100px;                /* ta sama szerokość obu sekcji */
  margin: 0 auto;
  padding: 0 16px;
}

/* LEWE I PRAWE KOLUMNY – rozciąganie i czyste marginesy */
.lm-left, .pr-left { min-width: 0; }
.lm-right, .pr-right { min-width: 0; }

/* ---------- LEARNING METHODS ---------- */
/* wyrównanie prawej karty (telefon) i limit szerokości */
.lm-right { display:flex; justify-content:flex-start; }
.lm-phone{
  width: 100%;
  max-width: 360px;     /* stały limit, żeby nie „puchło" */
  margin-top: 4px;      /* delikatne wyrównanie optyczne */
}

/* odstęp między opisem a gridem */
.lm-desc { margin: 12px 0 28px; }

/* GRID PIGUŁEK: 2 kolumny zawsze na desktopie */
.lm-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* równe słupki */
  gap: 14px 18px;
  max-width: 540px;                 /* żeby nie wyszło za szeroko */
}

/* Chip ikony ma stały rozmiar – optyczna spójność */
.lm-pill-ico{ 
  width:20px; 
  height:20px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Usuń obrysy z SVG */
.lm-pill-ico svg {
  stroke: none;
  stroke-width: 0;
  outline: none;
  border: none;
}

/* Przycisk Verify – nie na pełną szerokość */
.lm-verify{
  width: 60%;
  min-width: 180px;  /* żeby nie zrobił się zbyt mały */
}

/* ---------- PRONUNCIATION ---------- */
.pr-left { display:flex; }
.pr-card{
  width: 100%;
  max-width: 300px;        /* stała szerokość karty jak w Figmie */
  margin-top: 4px;
}

/* Kolumna tekstowa – spójne marginesy i szerokość linii */
.pr-right { max-width: 520px; }

/* ---------- RWD ---------- */
@media (max-width: 1024px){
  .lm-wrap, .pr-wrap{
    column-gap: 40px;
    max-width: 1000px;
  }
}
@media (max-width: 900px){
  .lm-wrap, .pr-wrap{
    grid-template-columns: 1fr;     /* pod sobą na tablet/mobile */
    row-gap: 28px;
  }
  .lm-right, .pr-left{ justify-content:center; }
  .lm-phone, .pr-card{ max-width: 360px; }
  .lm-grid{ max-width: none; }
}
@media (max-width: 600px){
  .lm-grid{ grid-template-columns: 1fr; } /* pigułki w 1 kolumnie */
  .learning-card-mockup{ 
    width: 100%;
    max-width: 280px;
    height: auto;
    min-height: 280px;
    border-radius: 30px;
  }
}

/* ===== Learning methods – warm/neutral look jak w Figmie ===== */
.lm-wrap{
  /* kolumny już 1:1 – zwiększamy tylko „powietrze" między nimi */
  column-gap: 64px;
  max-width: 1100px;
}

.lm-head { margin-bottom: 30px; }
.lm-title { margin: 0; }
.lm-desc { margin: 10px 0 24px; color: #9AA3B2; }

/* Grid pigułek – więcej oddechu między kolumnami */
.lm-grid{
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 16px;
  max-width: 480px;
}

/* Pigułki – pomarańczowy obrys dla wszystkich */

/* Chip na ikonę – przezroczyste tło */
.lm-pill-ico{
  background: transparent;
  border: none;
}

/* Karta „phone" – cieplejszy cień i obrys */
.lm-phone{
  max-width: 360px;
  border: 1px solid #FFE7CC;            /* ciepły obrys */
  box-shadow: 0 18px 50px rgba(255, 197, 150, .18);
  padding: 22px;
  border-radius: 20px;
}
.lm-phone-head{ color:#9AA3B2; }

/* Input – neutralna ramka */
.lm-input{
  border:1px solid #E6EAF2;
}
.lm-input:focus{
  border-color:#D8E6FF;
  box-shadow:0 0 0 3px rgba(113,194,255,.18);
}

/* Verify – ~88% szerokości, jak na projekcie */
.lm-verify{
  width: 88%;
  min-width: 220px;
  height: 34px;
  border-radius: 999px;
  background: #9EC4FF;
}

/* Badge przy tytule – ciepły chip */
.lm-badge{
  background:#FFF4E9;
  box-shadow: 0 0 0 1px #FFE7CC inset;
}

/* Ten sam szeroki kontener dla obu sekcji */
.lm-wrap, .pr-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  align-items: start;
}

/* >>> KLUCZ: prawa kolumna doklejona do prawej krawędzi */
.lm-right{
  justify-self: end;            /* grid: przysuń element do prawej krawędzi */
  display: flex;                
  justify-content: flex-end;    /* fallback gdyby w jakimś miejscu był flex */
  width: 100%;
}

/* Kontener na zdjęcie użytkownika */
.user-photo-container {
  width: 100%;
  max-width: 284px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-photo {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

/* Karta z ćwiczeniem językowym */
.learning-card-mockup {
  width: 284px;
  height: 425px;
  background: #FFFFFF;
  border-radius: 50px;
  padding: 24px;
  box-shadow: inset 0px 0px 6px #FFE4BB;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.learning-card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.learning-card-header {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #114770;
  line-height: 1.4;
  font-family: 'Poppins', sans-serif;
}

.learning-card-input input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #EAECEE;
  border-radius: 12px;
  font-size: 16px;
  color: #114770;
  background: #F8FAFB;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.learning-card-input input:focus {
  border-color: #71C2FF;
  background: white;
}

.learning-card-button {
  width: 100%;
  padding: 14px 24px;
  background: #71C2FF;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: flex-end;
}

.learning-card-button:hover {
  background: #5BA3E8;
  transform: translateY(-1px);
}

/* Learning methods – layout 1:1 i wyrównanie prawej kolumny */
.lm-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr; /* dwie równe kolumny */
  column-gap: 64px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  align-items: start;
}

/* Prawa kolumna doklejona do prawego brzegu */
.lm-right{
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
}

/* Wygląd zdjęcia jak karta z Figmy */
.user-photo{
  width: 300px;                 /* zmniejszone z 360px */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 40px;
  border: 1px solid #FFE7CC;    /* ciepły obrys */
  box-shadow: 0 22px 60px rgba(255,197,150,.22); /* ciepły cień */
  object-fit: cover;
  margin: 0;
}

/* RWD – na mobile pod sobą i wyśrodkowane */
@media (max-width: 900px){
  .lm-wrap{ grid-template-columns: 1fr; row-gap: 32px; }
  .lm-right{ justify-self: center; }
  .user-photo{ width: min(300px, 100%); }
}

/* ===== Learning methods – układ jak na makiecie ===== */

/* docelowy „frame" sekcji */
.lm-wrap{
  display: grid;
  grid-template-columns: 536px 284px; /* LEWA 536px | PRAWA 284px */
  column-gap: 64px;                   /* stały gutter */
  align-items: start;                 /* wyrównanie do góry */
  max-width: 1000px;                  /* całość jak na screenie */
  min-height: 425px;                  /* wysokość ramy */
  margin: 0 auto;
  padding: 0 16px;                    /* delikatny wewnętrzny padding */
}

/* lewa kolumna – pilnuj dokładnej szerokości */
.lm-left{ width: 536px; max-width: 536px; }

/* tytuł + opis – drobne oddechy */
.lm-head{ margin-bottom: 30px; }
.lm-title{ margin: 0; }
.lm-desc{ margin: 10px 0 40px; color:#9aa3b2; line-height:1.6; }

/* GRID pigułek: 2 kolumny, szerokość jak na screenie (~401px) */
.lm-grid{
  width: 401px;               /* kluczowe – wymusza docelową szerokość bloku */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 16px;
}

.lm-pill{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  height:55px; padding:0 14px; border-radius:999px;
  background:#fff; color:#393A3E; font-weight:600; cursor:pointer;
  font-size: 18px;
  box-shadow: inset 0px 0px 6px 0px rgba(255, 228, 187, 1);
  transition:transform .15s ease, box-shadow .15s ease;
  border: none;
  font-family: Poppins;
}

.lm-pill:hover{
  box-shadow: inset 0 0px 4px 0px #FF9800;
}

/* prawa kolumna – obraz jako karta 284x~425, doklejona do prawej */
.lm-right{
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 284px;               /* pilnuj szerokości kolumny */
}
.user-photo{
  width: 284px;               /* dokładna szerokość mockupu */
  max-width: 284px;
  height: auto;               /* wysokość wynikowa ~425px przy tym obrazie */
  border-radius: 36px;
  border: 1px solid #FFE7CC;
  box-shadow: 0 28px 80px rgba(255,197,150,.22);
  display: block;
  object-fit: cover;
  margin: 0;
}

/* RWD – na tablet/telefon pod sobą, środek */
@media (max-width: 1100px){
  .lm-wrap{ padding: 0 12px; }
}
@media (max-width: 900px){
  .lm-wrap{
    grid-template-columns: 1fr;
    row-gap: 28px;
    max-width: 560px;         /* zawęź dla czytelności */
    min-height: unset;
  }
  .lm-left, .lm-grid{ width: 100%; max-width: 100%; }
  .lm-grid{ grid-template-columns: 1fr 1fr; }
  .lm-right{ justify-self: center; width: auto; }
  .user-photo{ width: min(320px, 100%); max-width: min(320px, 100%); }
}

/* ========== Learning methods — MOBILE (≤ 600px) ========== */
@media (max-width: 600px){

  /* 1) Układ: jedna kolumna, równe odstępy, brak poziomego scrolla */
  .lm-wrap{
    grid-template-columns: 1fr;      /* stack */
    row-gap: 24px;
    column-gap: 0;
    max-width: 100%;
    padding: 0 24px;                 /* zmieniono z 16px na 24px */
    overflow: hidden;
  }
  .lm-left, .lm-right{ width: 100%; max-width: 100%; }

  /* 2) Tytuł i opis — odrobinę mniejsze, lepsza czytelność */
  .lm-title{ font-size: 24px; line-height: 1.2; margin-bottom: 24px; } /* zwiększono margin-bottom z 20px na 24px */
  .lm-desc{ font-size: 18px; line-height: 1.6; margin: 0 0 16px; } /* zmieniono line-height z 1.7 na 1.6 */

  /* 3) Grid pigułek — na telefonie 1 kolumna, duże hit-area */
  .lm-grid{
    width: 100%;                     /* nie blokuj szerokości */
    grid-template-columns: 1fr;      /* 1 kolumna */
    row-gap: 12px;
    column-gap: 0;
  }
  .lm-pill{
    height: 52px;                    /* wygodne dotykiem */
    font-size: 15px;
  }

  /* 4) Karta/obraz po prawej — wyśrodkowana, mniejszy cień, brak „poświaty" */
  .lm-right{ justify-self: center; justify-content: center; }
  .user-photo{
    width: min(340px, 100%);
    max-width: 100%;
    border-radius: 28px;
    box-shadow: 0 14px 36px rgba(255, 197, 150, 0.16); /* lżejszy cień */
    margin: 4px auto 0;
  }
}

/* Dodatkowy breakpoint na małe telefony (≤ 360px) */
@media (max-width: 360px){
  .lm-title{ font-size: 22px; }
  .lm-pill{ height: 50px; font-size: 14px; }
  .user-photo{ width: 100%; border-radius: 24px; }
}

/* ===== PRICING – layout jak w Figmie ===== */

/* Cała rama sekcji – szerokość optyczna 916px */
.pricing-section{
  padding: 72px 0;
}
.pricing-section > .container{
  max-width: 916px;           /* kluczowa szerokość */
  margin: 0 auto;
  padding: 0 16px;
}

/* Tytuł z chipem */
.pricing-intro{ margin-bottom: 60px; }
.pricing-title-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pricing-icon{
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: #EAF2FF;             /* jasny niebieski chip */
  border: 1px solid #D6E6FF;
  font-size: 16px;
}

.pricing-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}
.pricing-subtitle{
  margin: 0 0 35px;
  font-size: 18px; color: #9AA3B2; font-weight: 500;
}

/* Dwa boxy po ~400px, równy gutter */
.plans-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;                /* optyczny dystans jak na screenie */
  align-items: start;
  justify-content: center;
}
.plan{
  width: 400px; max-width: 100%;
  padding: 0;                      /* padding wewnętrzny ustawimy niżej */
  text-align: left;
}
.plan-title{
  margin: 24px 0 20px;
  font-size: 20px; font-weight: 600; color: #1B2430;
}

/* Lista punktów */
.check-icon svg{ width: 16px; height: 16px; }

/* FREE – płasko, bez obrysu/cienia, z wewnętrznym paddingiem */
.plan--free{
  background: transparent;
  border: none; box-shadow: none;
  padding: 24px;
}

/* Przypis pod całą sekcją planów */
.pricing-foot{ margin-top: 18px; text-align: center; }

/* ===== Responsywność ===== */
@media (max-width: 960px){
  .pricing-section > .container{ max-width: 680px; }
  .plans-row{ column-gap: 48px; }
}
@media (max-width: 760px){
  .plans-row{ grid-template-columns: 1fr; row-gap: 24px; }
  .plan{ width: 100%; }
  .plan--pro{ padding: 20px; }
  .plan--free{ padding: 20px; }
  .centerTitle{ font-size: 28px; }
}

/* ===== Learning methods — MOBILE NARROW BUTTONS ===== */
@media (max-width: 600px){
  /* węższy blok z przyciskami + wyśrodkowanie */
  .lm-grid{
    width: 100%;
    max-width: 320px;          /* <<< docelowa szerokość całej kolumny z przyciskami */
    margin: 0 auto;            /* wyśrodkuj */
    grid-template-columns: 1fr;/* 1 kolumna */
    row-gap: 12px;
  }

  /* same przyciski – niższe i lżejsze */
  .lm-pill{
    width: 100%;
    height: 46px;              /* było 52 – zmniejszamy */
    padding: 0 14px;           /* ciaśniejsze boki */
    font-size: 16px;
    border-radius: 999px;
  }

  /* mniejszy chip z ikoną, żeby całość była zgrabna */
  .lm-ico-chip{
    width: 22px;
    height: 22px;
  }

  /* tytuł/opis też lekko węższe dla równowagi */
  .lm-left{
    max-width: 360px;
    margin: 0 auto;
  }
}

/* dodatkowy próg dla bardzo małych ekranów */
@media (max-width: 360px){
  .lm-grid{ max-width: 300px; }
  .lm-pill{ height: 44px; font-size: 15px; padding: 0 12px; }
  .lm-ico-chip{ width: 20px; height: 20px; }
}

/* ===== Pronunciation — lewy obraz zamiast karty (tylko ta sekcja) ===== */
.pr-left{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 0;
}

.pr-photo{
  width: 300px;                 /* możesz podnieść do 320–340px, jeśli potrzeba */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(255, 197, 150, 0.22);
  object-fit: cover;
  margin: 0;
}

/* RWD — wyśrodkuj obraz na telefonach, bez ruszania prawej kolumny */
@media (max-width: 900px){
  .pr-left{ justify-content: center; }
  .pr-photo{ width: min(340px, 100%); border-radius: 24px; }
}

/* Karta ma pilnować prawego brzegu, bez dodatkowych marginesów */
.lm-phone{
  width: 100%;
  max-width: 360px;             /* szerokość karty – możesz zmienić na 380px */
  margin: 0;                    /* usuń ewentualne marginesy */
}

/* Dla spójności – prawa kolumna Pronunciation też trzyma prawy brzeg */
.pr-right{ justify-self: end; }

/* RWD bez zmian logiki – na mobile pod sobą */
@media (max-width: 900px){
  .lm-wrap, .pr-wrap{
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .lm-right{ justify-self: center; }
  .lm-phone{ max-width: 360px; }
  .user-photo-container{ max-width: 100%; }
  .learning-card-mockup{ 
    max-width: 100%; 
    width: min(284px, 100%);
    height: auto;
    min-height: 300px;
  }
}
/* Ikona Learning methods - zdjęcie zamiast SVG */
.learning-methods-icon {
    width: 27px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
}

/* ===== Pronunciation — taka sama szerokość jak Learning Methods ===== */
.pronunciation .container,
.pr-wrap{
  max-width: 1000px;   /* taka sama jak lm-wrap */
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== Pronunciation — ramka 284x425 z obrazem 227x385 ===== */
.pr-frame{
  width: 284px;
  height: 425px;
  border-radius: 36px;
  box-shadow: 0 28px 80px rgba(255,197,150,.22);
  background: #fff;

  /* 425-385 = 40 -> po 20px góra/dół; 284-227 = 57 -> ~28px lewo/prawo */
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                           /* nic nie wychodzi poza ramkę */
}

.pr-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;                           /* wypełnia pole po paddingu */
  border-radius: 22px;                         /* mniejszy promień niż ramka */
  display: block;
  box-shadow: none;                            /* cień pozostaje na ramce */
  border: none;                                /* usunięto obrys z obrazu */
}

/* RWD: na telefonach wyśrodkuj i lekko zmniejsz */
@media (max-width: 900px){
  .pronunciation .container, .pr-wrap{
    max-width: 560px;         /* taka sama jak lm-wrap */
    padding: 0 12px;
  }
  .pr-left{ justify-content: center; }
  .pr-frame{ width: min(320px, 100%); height: auto; padding: 18px 24px; }
  .pr-photo{ height: auto; }
}

/* ===== Pricing – korekty wyglądu PRO jak w makiecie ===== */

/* Tytuł wyśrodkowany i ciemnoniebieski */
.plan--pro .plan-title{
  text-align: center;
  color: #17427A;
  font-size: 22px;
  margin: 8px 0 20px !important;
}


.plan--pro .check-icon svg{
  width: 16px; height: 16px;
  fill: #9EC2FF;                            /* jaśniejszy niebieski kropki */
}

/* Opcjonalnie: usuń nadmierne promieniowanie tła, jeśli gdzieś było dodane globalnie */
.plan--pro::before{ content:none !important; }

/* upewnij się, że prawy bok nie wymusza łamania */
.plan--pro{ text-align: left; }   /* żadnego centrowania na karcie */

/* Kontener Pro Plan - kafelek + napis */
.plan-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 375px;
  margin: 0 auto;
}

/* Napis POD kafelkiem - wyśrodkowany */
.plan-container .pricing-note{
  text-align: center;
  margin: 35px 0 0 0;
  font-size: 14px;
  color: #9AA3B2;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
}

/* ===== Learning methods — ramka 284x425 z obrazem 227x385 ===== */
.lm-frame{
  width: 284px;
  height: 425px;
  border-radius: 36px;
  box-shadow: 0 28px 80px rgba(255,197,150,.22);
  background: #fff;

  /* 425-385 = 40 -> po 20px góra/dół; 284-227 = 57 -> ~28px lewo/prawo */
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                           /* nic nie wychodzi poza ramkę */
}

.lm-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;                           /* wypełnia pole po paddingu */
  border-radius: 22px;                         /* mniejszy promień niż ramka */
  display: block;
  box-shadow: none;                            /* cień pozostaje na ramce */
}

/* RWD: na telefonach wyśrodkuj i lekko zmniejsz */
@media (max-width: 900px){
  .lm-right{ justify-self: center; }
  .lm-frame{ width: min(320px, 100%); height: auto; padding: 18px 24px; }
  .lm-photo{ height: auto; }
}

/* ===== Pricing – ALIGN ONLY: wyrównanie pionowe tytułów i list ===== */

/* 1) Obie kolumny: ta sama wewnętrzna rama i start od tej samej wysokości */
.plans-row{
  display: grid !important;                 /* wymusza grid zamiast flex */
  grid-template-columns: 1fr 1fr !important;
  column-gap: 80px !important;
  align-items: start !important;
}

/* 2) Ujednolicone paddingi wewnątrz obu planów */
.plan{
  padding: 28px !important;      /* taki sam top/bottom/side – klucz do wyrównania */
}

/* 2b) SPECJALNIE dla Pro Plan - wymusza padding */
.plan--pro{
  padding: 28px !important;      /* nadpisuje wszystkie inne paddingi */
}

/* 3) Tytuły w obu kartach zaczynają się na tej samej wysokości */
.plan .plan-title{
  margin: 8px 0 18px !important; /* identyczny margines nad/po tytule */
}

/* 5) Dla pewności: brak przypadkowych marginesów na pierwszym elemencie listy */
.plan .features-list > li:first-child{
  margin-top: 0 !important;
}

/* ===== Pricing — desktop-only alignment (bez !important) ===== */
@media (min-width: 960px){
  /* 2 kolumny + wyrównanie do góry */
  .pricing-section .plans-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    align-items: start;
  }

  /* spójne paddingi obu planów */
  .pricing-section .plan{
    padding: 28px;
  }
  .pricing-section .plan--pro{
    padding: 28px; /* nadpisze wcześniejsze, bo jest później i bardziej precyzyjne */
  }

  /* tytuły i listy startują równo */
  .pricing-section .plan .plan-title{
    margin: 8px 0 18px;
  }

  .pricing-section .plan .features-list > li:first-child{
    margin-top: 0;
  }
}

/* Zostaw istniejące mobile:
   @media (max-width: 760px){ .plans-row { grid-template-columns: 1fr; ... } }
   – dzięki temu na telefonach nadal jest 1 kolumna. */

/* ===== Contact / Support Section ===== */
.contact-section {
    padding: 80px 0;
    background: #FFFFFF;
}

.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #b0b0b0;
    margin: 0 0 12px 0;
}

.contact-title-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.contact-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #cfe8ff;
    border: none;
}

.contact-icon svg {
    width: 36px;
    height: 36px;
    display: block;
}

.contact-title {
    font-size: 32px;
    font-weight: 700;
    color: #05244f;
    margin: 0;
}

.contact-form {
    max-width: 1000px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.contact-disclaimer {
    font-size: 14px;
    color: #6B7280;
    margin: 20px 0 30px 0;
    text-align: center;
}

.contact-link {
    color: #5cbcff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #48a7ef;
    text-decoration: underline;
}

.contact-button,
.contact-actions .btn {
    display: block;
    width: 180px;
    height: 44px;
    background: #5cbcff;
    color: #FFFFFF;
    border: none;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.contact-button:hover,
.contact-actions .btn:hover {
    background: #48a7ef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(92, 188, 255, 0.3);
}

.contact-button:active,
.contact-actions .btn:active {
    transform: translateY(0);
}

/* Responsive Design for Contact Section */
@media (max-width: 768px) {
    .contact-section {
        padding: 60px 20px;
    }
    
    .contact-title {
        font-size: 28px;
    }
    
    .contact-input,
    .contact-textarea {
        width: 100%;
        padding: 16px 20px;
    }
    
    .contact-button {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: 40px 20px;
    }
    
    .contact-title {
        font-size: 24px;
    }
    
    .contact-subtitle {
        font-size: 14px;
    }
}

/* ===== Contact section: left align for consent + button ===== */

/* Blok z tekstem zgody – wyrównanie do lewej i ta sama szerokość co inputy */
.contact-section .contact-consent,
.contact-section .consent,
.contact-section .legal,
.contact-section .agreement,
.contact-section .contact-note {
  max-width: 1000px;      /* jak inputy/textarea */
  margin: 12px auto 0;    /* wycentrowany blok, ale TEKST w środku do lewej */
  text-align: left;
}

/* Wiersz z przyciskiem – pod lewą krawędzią pól */
.contact-section .contact-actions,
.contact-section .actions,
.contact-section .submit-row {
  max-width: 1000px;
  margin: 16px auto 0;
  display: flex;
  justify-content: flex-start;  /* lewo */
  align-items: center;
}

/* Sam przycisk zostaje bez zmian rozmiaru/stylu – tylko upewniamy się, że nie centruje się sam */
.contact-section .contact-actions .btn,
.contact-section .actions .btn,
.contact-section .submit-row .btn,
.contact-section button[type="submit"] {
  margin: 0;                 /* żadnego auto-center */
}

/* Mobile: nadal 100% szerokości, ale wyrównanie tekstu i przycisku pozostaje do lewej */
@media (max-width: 768px){
  .contact-section .contact-consent,
  .contact-section .consent,
  .contact-section .legal,
  .contact-section .agreement,
  .contact-section .contact-note,
  .contact-section .contact-actions,
  .contact-section .actions,
  .contact-section .submit-row {
    max-width: 100%;
    padding: 0 20px;
  }
}

/* ===== Footer ===== */
.site-footer{
  padding: 32px 0 60px;
  font-family: 'Poppins', sans-serif;
  color: #6F7785;
}

.site-footer .footer-note{
  max-width: 1000px;
  margin: 0 auto 24px;
  padding-top: 16px;
  border-top: 2px solid #E7ECF3; /* subtelna linia jak na wzorze */
}

.site-footer .footer-note p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #9AA3B2;
}

/* Grid 4 kolumny, szerokość 1000px jak na screenie */
.site-footer .footer-links{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* ~4 równe kolumny (ok. 220–250px) */
  column-gap: 48px;
  row-gap: 20px;
}

.site-footer .footer-col h4{
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #303B4A;
}

.site-footer .footer-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-col li{
  margin: 10px 0;
  font-size: 16px;
}

.site-footer .footer-col a{
  text-decoration: none;
  color: #9AA3B2;
  transition: color .2s ease;
}

.site-footer .footer-col a:hover{
  color: #5B8BF4; /* delikatny niebieski hover */
}

/* Responsywność */
@media (max-width: 1024px){
  .site-footer .footer-links{
    max-width: 90%;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .site-footer{
    padding-bottom: 40px;
  }
  .site-footer .footer-links{
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .site-footer .footer-note{
    padding-left: 24px;  /* wyrównanie z linkami w footerze */
  }
}

/* Kafelki – wyłącznie obrys + inner shadow jak w Figmie */
.feature-card:focus,
.feature-card:active{
  box-shadow: inset 0 0 6px 0 #AEE0FF !important;
}

/* === KARTY: taki sam obrys + inner shadow jak w Figmie === */
/* Figma: Inner shadow, X:0 Y:0 Blur:6, Spread:0, Color #FFE4BB */

.lm-frame,
.pr-frame{
  width: 284px !important;
  height: 425px !important;
  border-radius: 50px !important;                    /* zmieniono z 36px na 50px */
  background: #FFFFFF;
  box-shadow: inset 0 0 6px 0 #FFE4BB !important;  /* INNER shadow */

  /* usuń WSZYSTKIE zewnętrzne cienie/poświaty */
  filter: none !important;
}

/* na wszelki wypadek wyłącz glow dodawany w innych stanach */
.lm-frame:hover,
.lm-frame:focus,
.lm-frame:active,
.pr-frame:hover,
.pr-frame:focus,
.pr-frame:active{
  box-shadow: inset 0 0 6px 0 #FFE4BB !important;   /* tylko inner shadow */
}

/* jeżeli glow był dodawany przez pseudo-elementy – wyłącz */
.lm-frame::before,
.lm-frame::after,
.pr-frame::before,
.pr-frame::after{
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Learning methods — typografia etykiet przycisków */
.learning-methods-section .learning-method-btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;          /* SemiBold */
  font-size: 18px;
  line-height: 1;            /* 100% */
  letter-spacing: 0;         /* 0% */
  color: #393A3E;            /* z figmy */
}

/* Zachowaj te same parametry także na hover/active/focus */
.learning-methods-section .learning-method-btn:hover,
.learning-methods-section .learning-method-btn:focus,
.learning-methods-section .learning-method-btn:active {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  color: #393A3E;
}

/* Pricing title – zgodnie z figmą */
.pricing-section {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;         /* SemiBold */
  font-size: 28px;
  line-height: 1;           /* 100% */
  letter-spacing: 0;
  color: #114770;
  text-align: center;       /* jak w figmie */
}

.centerTitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;         /* SemiBold */
  font-size: 28px;
  line-height: 1;           /* 100% */
  letter-spacing: 0;
  color: #114770;
  text-align: center;       /* jak w figmie */
}

/* Figma: tytuł 24px / SemiBold */
.fig-title-24{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;           /* SemiBold */
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0;
  color: #393A3E;
  margin: 0 0 12px;           /* nie zmieniaj layoutu, tylko lekki odstęp pod tytułem */
}

/* Wspólny wrapper: ikona + tytuł w jednej linii i wyrównane pionowo */
.section-heading{
  display: flex;
  align-items: center;    /* klucz: idealne wyrównanie pionowe */
  gap: 10px;              /* zmieniono z 12px na 10px - jak w Pronunciation */
}

/* Ikony w nagłówkach: ten sam rozmiar i brak przeskoków linii */
.section-heading .section-icon,
.section-heading svg.section-icon{
  width: 28px;            /* ujednolicone – dostosuj do swojego designu */
  height: 28px;
  flex: 0 0 auto;
  display: block;         /* usuwa niewidoczne „dziury" jak dla inline images */
}

/* Zapobiega „skakaniu" przez inne style linii */
.section-heading .fig-title-24{
  line-height: 1;         /* 100% jak w Figma, literalnie 1 */
  margin: 0;              /* nagłówek bez dodatkowego przesunięcia */
}

/* Jeśli ikony są font-iconami lub inline-SVG z baseline:
   wymuś środek pionowy względem linii tekstu */
.section-heading .section-icon{
  vertical-align: middle; /* dla inline SVG/font-iconów */
}

/* ===== Contact / Help – Figma exact ===== */
.contact-section { 
  text-align: left;     /* nic nie centrować */
}

.contact-head {
  margin-bottom: 24px;
}

/* Podtytuł: "Still have questions?" */
.contact-eyebrow{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;          /* SemiBold */
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0;
  color: #A8ABB6;
  margin: 0 0 12px 0;
}

/* Tytuł: "We're here for you" + ikona po lewej */
.contact-title{
  display: inline-flex;
  align-items: center;
  gap: 12px;                 /* odstęp ikona–tekst jak w Figma */
  margin: 0 0 20px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;          /* SemiBold */
  font-size: 28px;
  line-height: 100%;
  letter-spacing: 0;
  color: #114770;            /* #114770 – Figma */
}

/* Kółko z „i" – lekki niebieski, bez cieni */
.contact-title__icon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  color: #114770;
  background: linear-gradient(180deg, #CDE6FF 0%, #AEE0FF 100%);
  box-shadow: none;          /* żadnych cieni */
}

/* Responsywność – na małych zostawiamy te same proporcje */
@media (max-width: 540px){
  .contact-title{ font-size: 26px; }
  .contact-eyebrow{ font-size: 18px; }
}

/* ===== Contact (figma look) ===== */
.contact-section{
  --contact-max: 1000px;
  --contact-blue: #114770;     /* tytuł */
  --contact-grey: #A8ABB6;     /* subtitel */
  --contact-border: #E7F3FF;   /* obrys pól */
  --contact-btn: #73BDFB;      /* przycisk */
  padding: 80px 24px;
}
.contact-intro{
  text-align: center;
  margin-bottom: 28px;
}
.contact-eyebrow{
  font-size: 18px; color: #9AA3B2; font-weight: 500;
  line-height: 100%;
  color: var(--contact-grey);
  margin: 0 0 35px;
}
.contact-title{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins',sans-serif;
  font-weight: 600;     /* SemiBold */
  font-size: 26px;      /* zmieniono z 28px na 26px - jak pricing-title */
  line-height: 100%;
  color: var(--contact-blue);
  margin: 0;
}
.contact-title-icon{
  display: inline-grid;
  place-items: center;
  width: 26px;          /* zmieniono z 36px na 26px - jak ikona Pronunciation */
  height: 26px;         /* zmieniono z 36px na 26px - jak ikona Pronunciation */
  border-radius: 50%;
  background: #BFE1FF;
  color: #114770;
  font-weight: 700;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.contact-form{
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* WYRÓWNANIE DO LEWEJ */
  gap: 16px;
  max-width: calc(var(--contact-max) + 48px);
}

.contact-input,
.contact-textarea {
  box-shadow: inset 0 0 6px 0 #AEE0FF;
  width: 100%;
  max-width: var(--contact-max);
  border-radius: 30px;
  background: #fff;
  padding: 0 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #393A3E;
  transition: box-shadow .2s ease;
  outline: none;
  border: none;
}
.contact-input{
  height: 60px;
}
.contact-textarea{
  min-height: 250px;
  padding-top: 18px;
  resize: vertical;
}
.contact-input:focus,
.contact-textarea:focus{
  border-color: #CFE9FF;
  box-shadow: inset 0 0 6px 0 #71C2FF;
}

.contact-legal{
  max-width: var(--contact-max);
  width: 100%;
  text-align: center;         /* wyśrodkowane, jak na figmie */
  font-family: 'Poppins',sans-serif;
  font-size: 14px;
  color: #7E8796;
  margin: 6px 0 0;
}
.contact-legal a{ color: #4CA2FF; text-decoration: none; }
.contact-legal a:hover{ text-decoration: underline; }

.contact-submit{
  width: 180px;
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: var(--contact-btn);
  color: #fff;
  font-family: 'Poppins',sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-submit:hover{ filter: brightness(0.95); }

/* Mobile: pełna szerokość, ale dalej na środku */
@media (max-width: 1100px){
  .contact-input, .contact-textarea{ max-width: 100%; }
  .contact-legal{ padding: 0 12px; }
}

/* CONTACT: left-align consent text + button */
.contact-section .contact-legal,
.help-section .help-note,
.contact-form .form-note,
.contact-section .form-note {
  text-align: left;
  margin-left: 0;
}

/* wiersz z notką i przyciskiem ma startować od lewej */
.contact-section .contact-actions,
.help-section .help-actions,
.contact-form .form-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;          /* odstęp między tekstem a przyciskiem, jeśli są w jednym wierszu */
}

/* sam przycisk bez centrowania */
.contact-section .contact-actions .btn,
.help-section .help-actions .btn,
.contact-form .form-actions .btn,
.contact-section .contact-submit .btn {
  margin-left: 0;
}

/* na wąskich ekranach nadal left */
@media (max-width: 640px) {
  .contact-section .contact-legal,
  .help-section .help-note,
  .contact-form .form-note,
  .contact-section .form-note {
    text-align: left;
  }
  .contact-section .contact-actions,
  .help-section .help-actions,
  .contact-form .form-actions,
  .contact-section .contact-submit {
    justify-content: flex-start;
  }
}

/* FORCE: przycisk Send wyrównany do lewej jak tekst powyżej */
.contact-section .contact-submit {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Learning Methods Popups */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.popup-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 30px;
  color: #666;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-close:hover {
  color: #333;
}

.popup-image {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}

/* === CONTACT — LEWE WYRÓWNANIE NOTEKI I PRZYCISKU === */
/* Ten kontener to ten sam, w którym masz pola input/textarea */
.contact-form,
.help-section .contact-form,
.contact-section .contact-form {
  max-width: 1000px;      /* dopasuj do swojej szerokości */
  margin: 0 auto;
  padding: 0 24px;        /* taki sam padding jak pola */
  box-sizing: border-box;
  text-align: left;       /* zbij ewentualne centrowanie */
}

/* Ustaw notkę i przycisk jako osobne wiersze, start od lewej */
.contact-form .form-note,
.contact-form .contact-legal,
.contact-form .form-actions {
  margin-left: 0;
  text-align: left;
  padding-left: 0;        /* tu NIE dodajemy dodatkowego wcięcia */
}

/* Przycisk osobno - bez text-align: left, żeby nie blokować centrowania */
.contact-form .contact-submit {
  margin-left: 0;
  padding-left: 0;
}

/* Wiersz z przyciskiem — bez centrowania, bez auto-marginesów */
.contact-form .form-actions,
.contact-form .contact-submit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.contact-form .form-actions .btn,
.contact-form .contact-submit .btn,
.contact-form button[type="submit"] {
  margin-left: 0 !important;      /* zbija auto-centrowanie */
  transform: none !important;     /* gdyby ktoś go „przesuwał" */
}

/* Upewnij się, że inputy/textarea i notka/akcje startują z tej samej linii */
.contact-form .field,
.contact-form .form-note,
.contact-form .form-actions {
  padding-left: 0;
}

/* Mobile też left (bez centrum) */
@media (max-width: 640px) {
  .contact-form { padding: 0 16px; }
  .contact-form .form-actions { justify-content: flex-start; }
}

/* Contact: przycisk pod tekstem legal, wyrównany do lewej */
.contact-section .contact-legal {
  margin-top: 8px;
  font-size: 14px;
  color: #9AA3B2;
  text-align: left;           /* ważne – nie centrować */
}

.contact-section .contact-send-row {
  display: flex;
  justify-content: flex-start; /* od lewej */
  align-items: center;
  margin-top: 16px;
}

.contact-section .contact-send-btn {
  height: 44px;
  padding: 0 36px;
  border-radius: 22px;
  background: #74B9FF;        /* ten sam niebieski co reszta */
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.contact-section .contact-send-btn:hover {
  transform: translateY(-1px);
  opacity: .95;
}

.contact-section .contact-send-btn:active {
  transform: translateY(0);
  opacity: 1;
}

/* Responsywność – nic nie centruj na mobile */
@media (max-width: 640px) {
  .contact-section .contact-legal,
  .contact-section .contact-send-row {
    text-align: left;
    justify-content: flex-start;
  }
}

/* Mobile: wyrównanie wielkości nagłówków – taki sam breakpoint jak dla LM */
@media (max-width: 600px) {
  /* dopasuj dokładnie do selektorów, które masz w HTML */
  .pr-title,
  .pr-title-row h2,
  #pronunciation .section-title {
    font-size: 24px; /* tyle ma Learning methods na mobile */
  }
}

/* ===== Pronunciation – MOBILE alignment to match Learning methods ===== */
@media (max-width: 760px) {
  /* 1) Kontener sekcji – taki sam wewnętrzny odstęp jak w Learning methods */
  .pronunciation { 
    padding-left: 24px;              /* zmieniono z 16px na 24px */
    padding-right: 24px;             /* zmieniono z 16px na 24px */
  }

  /* 2) Wiersz tytułu z ikoną – taki sam układ jak w LM */
  .pronunciation .pr-title-row {
    display: flex;
    align-items: center;   /* ikona i tekst na jednej linii, równo w pionie */
    gap: 12px;             /* identyczny odstęp jak w LM */
    margin-bottom: 30px;   /* taki sam dół jak w LM */
  }

  /* 3) Sam tytuł – ta sama wielkość/ciężar co LM na mobile */
  .pronunciation .pr-title {
    font-size: 24px;       /* jak LM na mobile */
    font-weight: 600;      /* SemiBold jak w projekcie */
    line-height: 1.2;
    margin: 0;
  }

  /* 4) Akapit(y) – takie same parametry i odstępy jak LM */
  .pronunciation .pr-desc,
  .pronunciation p {
    font-size: 18px;       /* jak LM na mobile (nie 16px) */
    line-height: 1.6;      /* jak LM na mobile */
    margin: 8px 0 16px 0;  /* ten sam rytm pionowy jak LM */
  }

  /* 5) Karta/makieta po lewej – nad tekstem, jak w LM, z tym samym odstępem */
  .pronunciation .pr-frame {
    margin: 0 auto 18px;   /* wyśrodkuj kartę i daj taki sam dół jak w LM */
    max-width: 284px;      /* szerokość jak wcześniej na mobile */
  }
}

/* ===== Pricing — MOBILE FIXES (POPRAWKA) ===== */
@media (max-width: 760px) {
  /* Sekcja i rząd planów: pełna szerokość z bezpiecznymi paddingami */
  .pricing-section { padding: 20px 16px; }
  
  /* NADPISZ problematyczną regułę z !important */
  .plans-row{
    display: grid !important;
    grid-template-columns: 1fr !important; /* 1 kolumna zamiast 2 */
    row-gap: 24px !important;
    column-gap: 0 !important; /* usuń column-gap */
    align-items: start !important;
  }

  /* Wspólne: usuń twarde szerokości z kart */
  .plan{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px 16px 20px;
    box-sizing: border-box;
  }

  /* Pro Plan — pewne nadpisania, jeśli były !important */
  .plan--pro{
    width: 95% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
  }

  /* Tytuł sekcji */
  .centerTitle{
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 16px;
    padding: 0 4px;
  }

  .plan .monthly-price{ font-size: 16px; }
  .plan .yearly-price{ font-size: 22px; }
}

/* ===== Bardzo małe ekrany ===== */
@media (max-width: 480px) {
  .pricing-section { padding: 16px 12px; }
  .centerTitle{ font-size: 26px; }
  .plan{ padding: 12px 12px 16px; }
  .plan .monthly-price{ font-size: 15px; }
  .plan .yearly-price{ font-size: 20px; }
}

/* Pricing icon – responsive sizing & alignment */
.pricing-title-row{
  display: inline-flex;
  align-items: center;      /* pionowe wyrównanie */
  gap: 8px;                 /* trochę ciaśniej niż 10px */
}

/* nie pozwól, by ikona się rozciągała */
.pricing-icon{
  flex: 0 0 auto;
  display: flex;              /* zmieniono z inline-grid na flex */
  align-items: center;        /* dodano align-items: center */
  justify-content: center;    /* dodano justify-content: center */
  width: auto;           
  height: auto;          
  border-radius: 0;      
  background: none;      
  border: none;          
  transform: translateY(0);   
}

.pricing-icon svg{
  width: 28px;   /* zwiększono z 20px na 28px - większy SVG */
  height: 28px;  /* zwiększono z 20px na 28px - większy SVG */
  display: block;
  pointer-events: none;
}

/* <= 760px: zmniejszamy symbol */
@media (max-width: 760px){
  .pricing-icon{ width: auto; height: auto; } /* bez zmian w kontenerze */
  .pricing-icon svg{ width: 24px; height: 24px; } /* zmniejszono z 16px na 24px */
}

/* <= 480px: jeszcze ciut mniejsza ikona */
@media (max-width: 480px){
  .pricing-icon{ width: auto; height: auto; } /* bez zmian w kontenerze */
  .pricing-icon svg{ width: 20px; height: 20px; } /* zmniejszono z 14px na 20px */
}

/* Ikonka $ + tytuł – poprawne wyrównanie na mobile */
@media (max-width: 760px) {
  .pricing-title-row{
    display: flex;               /* zamiast inline-flex */
    align-items: center;          /* wyśrodkuj pionowo względem pełnej wysokości h2 */
    justify-content: center;      /* trzymaj oba elementy centralnie */
    gap: 4px;                    /* zmniejszono z 10px na 4px - bliżej litery N */
  }

  /* Opcjonalnie: minimalnie zmniejsz chip, żeby ładniej wyglądał przy mniejszym tytule */
  .pricing-icon{
    width: 28px;                 /* zmieniono z 32px na 28px - taki sam jak Learning methods */
    height: 28px;                /* zmieniono z 32px na 28px - taki sam jak Learning methods */
    transform: translateY(-1px);  /* dodano -1px dla lepszego wyrównania z literą N */
  }

  /* SVG ma taki sam rozmiar jak w Learning methods */
  .pricing-icon svg{
    width: 28px;                 /* zmieniono z 24px na 28px - taki sam jak Learning methods */
    height: 28px;                /* zmieniono z 24px na 28px - taki sam jak Learning methods */
  }

  /* Upewnij się, że h2 może się normalnie zawijać */
  .centerTitle{
    white-space: normal;
    text-align: center;
  }
  
  
}

@media (max-width: 900px) {
  .pr-wrap {
    .pr-left { order: 1 };
    .pr-right { order: 0 };
  }
}