.header{
    background-color: #DD0031;
}
.headerWrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.nav{

}
.ham{
    display: none;
}

.nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-left: 0;
    margin: 0;
}

.nav li{
    list-style: none;
}

.nav a{
    color: #fff;
    text-decoration: none;
}

.stopScroll{
    overflow: hidden;
}
.logo{
    position: relative;
    z-index: 1000;
    
}

.logo img{
    width: 200px;
}
@media screen and (max-width: 800px) {
    .nav{
        position: fixed;
        inset: 0;
        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -webkit-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -moz-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -ms-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -o-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
}
    .nav.active{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}


    .nav ul{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ham {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 400ms;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        z-index: 1000;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}
.ham8 .top {
  stroke-dasharray: 40 160;
}
}




/* ------------ Base ------------ */
:root{
  --bg: #fcfcff;
  --card: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --line: #ececf3;
  --accent: #dd0031;
  --accent-2: #ff6b6b;
  --shadow: 0 10px 30px rgba(20,20,30,.08);
  --radius: 18px;
}

* { box-sizing: border-box; scroll-behavior: smooth;}
html, body { height: 100%; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font: 500 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{ width:min(1120px, 92vw); margin-inline:auto; }
.site{ position:relative; overflow:hidden; }

/* Decorative background blobs */
.bg-blobs{
  position: fixed;
  inset: -20vh -10vw auto -10vw;
  height: 120vh;
  pointer-events: none;
  background:
    radial-gradient(120px 120px at 12% 18%, #ffd7d7 0, transparent 60%),
    radial-gradient(180px 180px at 85% 12%, #e7f5ff 0, transparent 60%),
    radial-gradient(220px 220px at 80% 70%, #fff0f5 0, transparent 60%),
    radial-gradient(160px 160px at 20% 80%, #f3fff6 0, transparent 60%);
  filter: blur(24px) saturate(1.1);
  z-index: -1;
}

/* ------------ Buttons, pills, badges ------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border-radius:999px; gap:.6rem; text-decoration:none;
  border:1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer; font-weight:700;
}
.btn--primary{ background: var(--accent); color:#fff; border-color: transparent; box-shadow: 0 8px 18px rgba(221,0,49,.2); }
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(221,0,49,.24); }
.btn--ghost{ background:#fff; color:var(--text); }
.btn--ghost:hover{ transform: translateY(-1px); }

.pill{
  display:inline-block; padding:.55rem .9rem; border:1px solid var(--line);
  border-radius:999px; text-decoration:none; color:var(--text); background:#fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pill:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

.badge{
  display:inline-block; padding:.35rem .6rem; border-radius:8px;
  background:#fff1f3; color:var(--accent); font-size:.78rem; font-weight:700;
  border:1px solid #ffe0e6;
}

/* ------------ Hero ------------ */
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 40px);
  align-items: center; padding: clamp(40px, 6vw, 80px) 0 24px;
}
.hero__title{
  font-size: clamp(36px, 6.5vw, 68px);
  line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 900;
}
.accent{ color: var(--accent); }
.hero__subtitle{ color: var(--muted); margin: 0 0 18px; font-size: clamp(16px, 2.5vw, 20px); }
.hero__cta{ display:flex; gap:.8rem; margin: 14px 0 18px; flex-wrap: wrap; }
.hero__bullets{ margin: 10px 0 0; padding: 0 0 0 1.1rem; color:var(--muted); }
.hero__bullets li{ margin:.25rem 0; }

.hero__graphics{
  position:relative; min-height: 420px;
}
.gcard{
  position:absolute; background:var(--card); border:1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); overflow:hidden;
  animation: float 9s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-8px) }
}
.gcard--code{ top:0; right:10%; width:min(460px, 86%); }
.gcard--code figcaption{
  padding:.6rem .9rem; font-size:.85rem; background:#fbfbff; border-bottom:1px solid var(--line);
}
.gcard--code pre{ margin:0; padding:1rem; overflow:auto; font-size:.85rem; line-height:1.35; background:#fff; }
.copy-btn{
  position:absolute; top:8px; right:8px; border:none; border-radius:999px; background:#fff; color:var(--text);
  padding:.45rem .7rem; box-shadow: var(--shadow); cursor:pointer; font-weight:700;
}
.gcard--component{
  bottom:12%; left:-4%; width: 240px; padding:16px; display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start;
}
.chip{
  padding:.45rem .7rem; border:1px dashed #ffd5de; background:#fff6f8; border-radius:999px; font-weight:700; color:var(--accent);
}
.gcard--chart{
  right:-6%; bottom:-6%; width: 240px; padding:12px;
}

/* ------------ Tools strip ------------ */
.tools{ padding: 10px 0 34px; }
.tools__label{ color:var(--muted); font-size:.9rem; display:block; margin-bottom:8px; }
.tools__list{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0;
}
.tool{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.tool svg{ width:28px; height:28px; }
.tool span{ font-weight:700; }

/* ------------ Featured demos ------------ */
.section-head{
  display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.featured{ padding: 26px 0 10px; }
.scroller{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 16px;
   scroll-snap-type: x mandatory; padding-bottom: 8px; }
.scroller::-webkit-scrollbar{ height: 10px; }
.scroller::-webkit-scrollbar-thumb{ background: #e9e9ef; border-radius: 999px; }

.nav-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:18px; line-height:0;
  box-shadow: var(--shadow);
}

.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  scroll-snap-align:center; display:flex; flex-direction:column; box-shadow: var(--shadow);
}
.thumb{ aspect-ratio: 16/9; background:#f7f7fb; }
.thumb--grad{
  background: radial-gradient(200px 140px at 20% 10%, #ffd7d7, transparent 60%),
              radial-gradient(200px 140px at 90% 70%, #e7f5ff, transparent 60%),
              linear-gradient(180deg,#fff, #f7f7fb);
}
.thumb.a1{ background-image: linear-gradient(135deg, #ffe0e6, #fff), radial-gradient(120px 80px at 70% 40%, #ffd7d7, transparent 60%); background-blend-mode: multiply; }
.thumb.a2{ background-image: linear-gradient(135deg, #e7f5ff, #fff); }
.thumb.a3{ background-image: linear-gradient(135deg, #f3fff6, #fff); }
.thumb.a4{ background-image: linear-gradient(135deg, #fff5f5, #fff); }

.card__body{ padding: 14px 14px 16px; }
.card__body h3{ margin: 6px 0 6px; font-size: 1.05rem; }
.card__body p{ color: var(--muted); margin: 0 0 8px; }
.link{ color: var(--accent); font-weight:700; text-decoration:none; }
.link:hover{ text-decoration: underline; }

/* ------------ Topics ------------ */
.topics{ padding: 34px 0 10px; }
.topic-cloud{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:10px; }

/* ------------ Articles ------------ */
.articles{ padding: 28px 0 10px; }
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.post{
  grid-column: span 6;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow);
}
.post__title{ margin:0 0 6px; font-size: 1.1rem; }
.post__title a{ color: var(--text); text-decoration:none; }
.post__title a:hover{ color: var(--accent); }
.post__excerpt{ margin:0 0 10px; color:var(--muted); }
.post__meta{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.9rem; }

/* ------------ Newsletter ------------ */
.newsletter{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items:center;
  padding: 42px 0 24px;
}
.newsletter__box{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3.2vw, 26px);
  box-shadow: var(--shadow);
}
.form{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.form__field{ flex: 1 1 260px; display:flex; flex-direction:column; gap:8px; }
.form__label{ font-weight:700; }
input[type="email"]{
  border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem; outline: none; background:#fff;
}
input[type="email"]:focus{ border-color: #ffd5de; box-shadow: 0 0 0 4px #fff1f3; }
.form__note{ margin:4px 0 0; color:var(--muted); font-size:.9rem; }
.form__success{ margin:.3rem 0 0; font-weight:700; color:#2e7d32; min-height: 1.25em; }

.newsletter__art{
  border-radius: var(--radius); overflow:hidden; border:1px dashed #ffe0e6; background:#fff7f9; display:flex; align-items:center; justify-content:center;
  padding: 8px; box-shadow: var(--shadow);
}
.newsletter__art svg{ width: 100%; height: auto; }

/* ------------ Footer ------------ */
.footer{
    background-color: #DD0031;
    padding: 20px 0;
    color: #fff;
}

.footerWrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
/* ------------ Utilities ------------ */
.visually-hidden{
  position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap; clip-path: inset(50%); border: 0; padding: 0; margin: -1px;
}

/* ------------ Responsive ------------ */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .hero__graphics{ order: -1; min-height: 340px; }
  .newsletter{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .tools__list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .post{ grid-column: span 12; }
}


/* ---------- Showcase ---------- */
.showcase{ padding: 30px 0 10px; }
.thumb.s1{ background-image: radial-gradient(140px 120px at 20% 20%, #ffe0e6, transparent 60%), linear-gradient(135deg,#fff,#f7f7fb); }
.thumb.s2{ background-image: radial-gradient(140px 120px at 80% 30%, #e7f5ff, transparent 60%), linear-gradient(135deg,#fff,#f7f7fb); }
.thumb.s3{ background-image: radial-gradient(140px 120px at 30% 80%, #f3fff6, transparent 60%), linear-gradient(135deg,#fff,#f7f7fb); }
.thumb.s4{ background-image: radial-gradient(140px 120px at 70% 70%, #fff5f5, transparent 60%), linear-gradient(135deg,#fff,#f7f7fb); }

/* ---------- Resources ---------- */
.resources{ padding: 34px 0 10px; }
.resgrid{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.rescard{
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  border: 1px solid #111;
  width: 250px;
  height: 400px;
  border-radius:12px;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  -ms-border-radius:12px;
  -o-border-radius:12px;
}
.rescard__icon{
  width:64px; height:64px; border-radius:16px;
  display:grid; place-items:center; background:
    radial-gradient(70px 70px at 30% 30%, #ffd7d7, transparent 60%),
    #fff7f9;
  border:1px dashed #ffe0e6;
}
.rescard h3{ margin:2px 0 6px; font-size:1.05rem; }
.rescard p{ margin:0 0 10px; color:var(--muted); }
.rescard .btn{ justify-self:start; }

/* ---------- Learning Path / Timeline ---------- */
.path{ padding: 34px 0 16px; }
.timeline{
  position:relative;
  display:grid; gap:16px;
  grid-template-columns: repeat(5, minmax(140px,1fr));
  align-items:start; padding-top:14px;
}
.timeline__rail{
  position:absolute; left:0; right:0; top:22px; height:6px; width:100%;
  pointer-events:none;
}
.step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:14px; box-shadow: var(--shadow);
  transform: translateY(10px); margin-top: 10px; height: 220px;
}
.step__dot{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: var(--accent); border:3px solid #fff; box-shadow: 0 0 0 4px #ffe6ec;
  top:-18px; left:calc(50% - 7px);
}
.step h3{ margin:0 0 6px; font-size:1rem; }
.step p{ margin:0; color:var(--muted); }

/* ---------- Responsive for new sections ---------- */
@media (max-width: 980px){
  .rescard{ grid-column: span 12; }
  .timeline{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 22px; }
  .timeline__rail{ display:none; }
}
@media (max-width: 620px){
  .timeline{ grid-template-columns: 1fr; }
}


.intoLinks {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        
        span {
          width: 8px;
          height: 8px;
          background-color: #fff;
          border-radius: 50%;
        }
        a {
          transition: 0.3s all linear;
          transform-origin: left;
          color: #fff;
          text-decoration: none;
        }
        a:hover {
          text-decoration: underline;
        }
      }
      @media screen and (max-width: 750px) {
        .intoLinks {
          flex-direction: column;
          span {
            display: none;
          }
        }
      }


    .f-social{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        i{
            color: #fff;
        }
    }


    .reserved{
        text-align: center;
        opacity: 0.5;
    }


.cards.scroller{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cards.scroller .card{
    width: 250px;
    height: 400px;
}

@media screen and (max-width: 800px) {
    .cards.scroller .card{
        width: 90%;
    }

    .rescard{
        width: 90%;
        height: 350px;
    }

    .step{
        height: fit-content;
    }
    .hero__graphics{
        display: none;
    }
    .card img{
      width: 100%;
      object-position: center;
      object-fit: cover;
      height: 150px;
    }
}

/*   НАСТРОЙКА SCROLL-BAR   */
::-webkit-scrollbar {
    width: 0.7em;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #DD0031;
    border: 2px solid #fff;
}


::-webkit-scrollbar-thumb:active {
    background-color: #DD0031;
}

.partnersWrapper{
  display: flex;
  flex-direction: column;
}
.partnersLinks{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  a{
    transition: .3s all linear;
    -webkit-transition: .3s all linear;
    -moz-transition: .3s all linear;
    -ms-transition: .3s all linear;
    -o-transition: .3s all linear;
}

  img{
    width: 220px;
  }
}

.partnersLinks a:hover{
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
}

.card img{
  width: 100%;
  object-position: center;
  object-fit: cover;
  height: 150px;
}

#featured .card{
  height: fit-content;
}



@media screen and (max-width: 800px) {
    .cards.scroller .card{
        width: 90%;
    }

    .rescard{
        width: 90%;
        height: 350px;
    }

    .step{
        height: fit-content;
    }
    .hero__graphics{
        display: none;
    }
    .card img{
      width: 100%;
      object-position: center;
      object-fit: cover;
      height: 200px;
    }
    .partnersLinks img{
      width: 180px;
    }
}

.expertReview a{
  color: red;
}
.expertReview p{
  border-left: 5px solid red;
  padding-left: 20px;

  span{
    font-style: italic;
    opacity: .6;
  }
}