.sh,
.ml,
.se,
.so,
.sw {
   --kek: #0b5cd5;
   --kek-sotet: #0a4fb8;
   --tinta: #0d1b33;
   --halk: #5a6a85;
   --szurke: #e7e9ec;
   --vonal: rgba(13, 27, 51, 0.1);
   color: var(--tinta);
}

.sz-in {
   max-width: var(--tartalom);
   margin: 0 auto;

   padding: 0 clamp(16px, 3vw, 32px);
}

.sh {

   --sh-fent: calc(var(--fejlec-magas) + var(--t-m));
   --sh-lent: var(--t-3xl);
   --sh-res: 120px;

   --sh-sugar: 76px;
   padding: var(--sh-fent) 0 var(--sh-lent);
   border-radius: 0 0 clamp(32px, 4vw, var(--sh-sugar)) clamp(32px, 4vw, var(--sh-sugar));
   background: var(--kek);
   color: #fff;
   text-align: left;
}

.sh-racs {
   display: grid;
   gap: var(--sh-res);
   align-items: center;
}

@media (min-width: 1000px) {
   .sh-racs {
      grid-template-columns: minmax(0, 0.90fr) minmax(0, 1.10fr);
   }
}

.sh-szemold {
   margin: 0 0 16px;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.8);
}

.sh-cim {
   margin: 0 0 20px;
   max-width: var(--cim-hero-szeles);
  text-wrap: balance;
   font-size: var(--cim-hero);
   font-weight: 600;
   line-height: 1.0;
   letter-spacing: -0.035em;
}

.sh-lead {
   margin: 0;
   max-width: 46ch;
   font-size: clamp(16px, 1.3vw, 19px);
   line-height: 1.55;
   color: rgba(255, 255, 255, 0.84);
}

.sh-gombok {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 28px 0 0;
}

.sh-gomb {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 48px;
   padding: 0 24px;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.sh-gomb--teli {
   background: #fff;
   color: var(--kek);
}

.sh-gomb--keret {
   border: 1px solid rgba(255, 255, 255, 0.45);
   color: #fff;
}

@media (hover: hover) {
   .sh-gomb--teli:hover {
      background: rgba(255, 255, 255, 0.88);
   }

   .sh-gomb--keret:hover {
      border-color: #fff;
      background: rgba(255, 255, 255, 0.1);
   }
}

.sh-gomb svg {
   width: 18px;
   height: 18px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.sh-lista-cim {
   margin: 0 0 18px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.7);
}

.sh-lista {
   display: grid;
   gap: 14px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.sh-lista li {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   font-size: 16px;
   line-height: 1.45;
   color: rgba(255, 255, 255, 0.9);
}

.sh-lista li::before {
   content: '';
   flex: none;
   width: 7px;
   height: 7px;
   margin-top: 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.55);
}

.se {

   --se-szeles: 100%;
   --se-res: 24px;

   padding: var(--t-l) 0;
}

.se-fej {
   max-width: 760px;
   margin: 0 auto clamp(32px, 4vw, 56px);
   text-align: center;
}

.se-szemold {
   margin: 0 0 14px;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--kek);
}

.se-cim {
   margin: 0 0 16px;
   font-size: var(--cim-szekcio);
  max-width: var(--cim-szeles);

  margin-inline: auto;
  text-wrap: balance;
   font-weight: 600;
   line-height: 1.12;
   letter-spacing: -0.03em;
}

.se-racs {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--se-res);
   max-width: var(--se-szeles);
   margin: 0 auto;
}

@media (min-width: 900px) {
   .se-racs {
      grid-template-columns: repeat(2, 1fr);
   }
}

.se-kartya {
   padding: clamp(26px, 2.6vw, 40px);
   border-radius: 28px;
   background: var(--szurke);
}

.se-kartya--havi {
   background: var(--kek);
   color: #fff;
}

.se-cimke {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin: 0 0 18px;
   padding: 6px 13px;
   border-radius: 999px;
   background: rgba(13, 27, 51, 0.06);
   font-size: 12.5px;
   font-weight: 600;
}

.se-kartya--havi .se-cimke {
   background: rgba(255, 255, 255, 0.16);
}

.se-nev {
   margin: 0 0 8px;
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -0.02em;
}

.se-mit {
   margin: 0 0 24px;
   font-size: 15.5px;
   line-height: 1.55;
   color: var(--halk);
}

.se-kartya--havi .se-mit {
   color: rgba(255, 255, 255, 0.82);
}

.se-lepesek {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.se-lepesek li {
   display: grid;
   grid-template-columns: 26px minmax(0, 1fr);
   gap: 12px;
   align-items: start;
   font-size: 15.5px;
   line-height: 1.45;
}

.se-lepesek b {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;

   width: 26px;
   height: 26px;
   margin-top: -2px;

   border-radius: 50%;
   background: var(--kek);
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
   font-variant-numeric: tabular-nums;
}

.se-kartya--havi .se-lepesek b {
   background: #fff;
   color: var(--kek);
}

.so {
  --so-kivul: var(--t-l);
  --so-hasab: 0.74;
  --so-res: 88px;
  --so-ikon: 22px;
  padding: var(--so-kivul) 0;
}
.so-racs {
  display: grid;
  gap: var(--so-res);
  align-items: center;
}
@media (min-width: 1000px) {
  .so-racs {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  }
}

.so-szemold {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kek);
}
.so-cim {
  margin: 0 0 16px;
  max-width: var(--cim-szeles);
  text-wrap: balance;
  font-size: var(--cim-szekcio);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.so-lead {
  margin: 0;
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--halk);
}

.so-lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.so-elem {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 4px;
  border-top: 1px solid var(--vonal);
}
.so-elem:last-child {
  border-bottom: 1px solid var(--vonal);
}
@media (hover: hover) {
  .so-elem:hover {
    background: rgba(13, 27, 51, 0.02);
  }
}
.so-nev {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
}
.so-nev svg {
  width: var(--so-ikon);
  height: var(--so-ikon);
  flex: none;
  fill: none;
  stroke: var(--kek);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.so-mondat {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--halk);
}

@media (max-width: 680px) {
  .so-elem {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.sw {

   --sw-fent: calc(var(--t-xl) / 2);
   --sw-lent: calc(var(--t-xl) / 2);
   --sw-jobb: 0px;

   --sw-doboz-szeles: 100%;

   --sw-kep: 1.6fr;

   padding: var(--t-xl) 0;
}

.sw-lap {
   padding: var(--sw-fent) 0 var(--sw-lent);

   border-radius: clamp(28px, 5vw, 72px);
   background: var(--szurke);
}

.sw-in {
   max-width: var(--tartalom);
   margin: 0 auto;
   padding: 0 clamp(16px, 3vw, 32px);
}

.sw-racs {
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(28px, 3.5vw, 48px);

   align-items: start;
}

@media (min-width: 900px) {
   .sw-racs {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, var(--sw-kep));
   }
}

.sw-fej {
   max-width: 760px;
   margin: 0 auto clamp(28px, 3.4vw, 48px);
   text-align: center;
}

.sw-szemold {
   margin: 0 0 14px;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--kek);
}

.sw-cim {

   margin: 0 0 14px;
   font-size: var(--cim-szekcio);
   max-width: var(--cim-szeles);
   margin-inline: auto;
   text-wrap: balance;
   font-weight: 600;
   line-height: 1.12;
   letter-spacing: -0.03em;
}

@media (min-width: 900px) {
   .sw-szoveg {
      padding-top: clamp(16px, 1.6vw, 26px);
   }
}

.sw-leir {
   margin: 0 0 26px;
   max-width: 46ch;
   font-size: 16px;
   line-height: 1.6;
   color: var(--halk);
}

.sw-also {
   display: block;
}

.sw {
   --kek: #0b5cd5;
   --kek-sotet: #0b4fbe;
}

.sw-cta {
   margin-top: 26px;
   background: var(--kek);
   color: #fff;
   text-decoration: none;
   transition: background-color 0.2s ease;
}

@media (hover: hover) {
   .sw-cta:hover {
      background: var(--kek-sotet);
   }
}

.sw-lista {
   display: flex;
   flex-direction: column;
   gap: var(--sw-sor-res, 11px);
   margin: 0;
   padding: 0;
   list-style: none;
}

.sw-lista li {
   display: grid;
   grid-template-columns: 18px minmax(0, 1fr);
   gap: 10px;
   align-items: start;
   width: var(--sw-doboz-szeles);
   font-size: 15.5px;
   line-height: 1.45;
}

.sw-lista svg {
   width: 18px;
   height: 18px;
   margin-top: 1px;
   color: var(--kek);
}

.sw-lista svg circle {
   fill: currentColor;
   stroke: none;
}

.sw-lista svg path {
   fill: none;
   stroke: #fff;
   stroke-width: 2.4;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.sw[data-doboz='feher'] {
   --sw-doboz-hatter: #fff;
}

.sw[data-doboz='szurke'] {
   --sw-doboz-hatter: #f2f4f7;
}

.sw[data-doboz='feher'] .sw-lista,
.sw[data-doboz='szurke'] .sw-lista {
   --sw-sor-res: 8px;
}

.sw[data-doboz='feher'] .sw-lista li,
.sw[data-doboz='szurke'] .sw-lista li {
   grid-template-columns: 20px minmax(0, 1fr);
   gap: 11px;
   align-items: center;
   padding: 13px 18px;
   border-radius: 12px;
   background: var(--sw-doboz-hatter);
   font-size: 15px;
   line-height: 1.4;
}

.sw[data-doboz='feher'] .sw-lista svg,
.sw[data-doboz='szurke'] .sw-lista svg {
   width: 20px;
   height: 20px;
   margin-top: 0;
}

.sw-kep {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: var(--sw-jobb);
   padding: clamp(16px, 1.6vw, 26px);
   border-radius: 44px;
   background: #fff;
}

.sw-kep img {
   display: block;
   width: 100%;
   height: auto;
}

@media (max-width: 999px) {
   .sh {
      --sh-res: var(--t-m);
   }
}

main > section[class].so {
   background: var(--szurke);
   border-radius: clamp(28px, 5vw, 72px);
   margin-top: var(--t-xl);
   padding-bottom: var(--t-xl);
}

.so-racs {
   align-items: start;
}

.so-elem {
   border-top-color: rgba(13, 27, 51, 0.14);
}
.so-elem:first-child {
   border-top: 0;
   padding-top: 0;
}

@media (max-width: 999px) {
   .so-racs {

      gap: var(--t-m);
   }
}