/* ── Source Han Serif TC (local, CJK unicode-range only) ─────── */
@font-face {
  font-family: 'SourceHanSerifTC';
  src: url('../assets/fonts/SourceHanSerifTC-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}

@font-face {
  font-family: 'SourceHanSerifTC';
  src: url('../assets/fonts/SourceHanSerifTC-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}

/* Speak Up Chinese — курсы китайского языка */
:root {
  --color-primary: #CF031D;
  --color-text: #1a1a1a;
  --color-text-muted: #4a4a4a;
  --font-main: 'Inter Tight', sans-serif;
}

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

#smooth-wrapper {
  transform: translateZ(0);
  backface-visibility: hidden;
}

#smooth-content {
  -webkit-font-smoothing: antialiased;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: #fff;
}

/* Header */

.header{
  position: fixed;
  z-index: 99;
  width: 100%;
  background: #fff;
  box-shadow: 0 8px 22px 0 rgba(78, 134, 255, 0.10);
}

.container{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.header_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 34.5px;
}

.header__logo {
  display: block;
  flex-shrink: 0;
}

.header__logo img {
  display: block;
  height: 36px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 4.4px;
  margin-left: auto;
}

.header__link {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 8px 16px;
}

.header__link:hover {
  color: var(--color-primary);
}

.header__link--active {
  color: var(--color-primary);
}

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 30px;
  color: #fff;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 44px;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid #CF031D;
  background-color: #CF031D;
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  transition: background-position 0.45s ease, color 0.45s ease;
}

.header__cta:hover {
  background-position: 0% center;
  color: #CF031D;
}

.header__cta:active {
  transform: scale(0.98);
}

.header__cta-icon {
  flex-shrink: 0;
  width: 10px;
  height: 17px;
  fill: currentColor;
  transition: fill 0.45s ease;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background-image: url("../assets/hero-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  padding-top: 90px;
  display: flex;
  align-items: stretch;
}

.hero > .container {
  display: flex;
  align-items: stretch;
  flex: 1;
}

.hero__wrapper{
  position: relative;
  background-color: #fff;
  width: 100%;
  align-self: stretch;
  min-height: 100%;
  max-width: 615px;
  padding-top: 175px;
}


.hero__wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: -156px; /* ровно ширина svg */
  transform: translateX(0.5px);
  width: 156px;
  height: 100vh;

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 724' preserveAspectRatio='none'><path d='M0.5 458.16L155.5 0.160156V723.16H0.5V458.16Z' fill='white'/></svg>") no-repeat center / 100% 100%;
}

.hero__wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: -82px; 
  transform: translateX(-0.5px);
  width: 82px;
  height: 100vh;

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 725' preserveAspectRatio='none'><path d='M80.5 362.107L0.5 724.107V0.107422L80.5 362.107Z' fill='white'/></svg>") no-repeat center / 100% 100%;
}

.hero__wrapper::before,
.hero__wrapper::after {
  height: 100vh;
  background-size: 100% 100%;
}

/* ── Декоративные звёзды и стрелка ────────────────── */
.hero__deco-star,
.hero__deco-arrow {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.hero__deco-star--big {
  width: 34px;
  height: 30px;
  left: calc(50% - 444px);
  top: 221px;
}

.hero__deco-star--small {
  width: 20px;
  height: 18px;
  left: calc(50% - 407px);
  top: 218px;
}

.hero__deco-arrow {
  width: 82px;
  height: 54px;
  left: calc(50% - 741px);
  top: 480px;
  transform: rotate(118.94deg);
}

.hero__bonus{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  gap: 8px;
  border-radius: 33554400px;
  border: 1px solid #E5E7EB;
  background: linear-gradient(0deg, #F6FDFF 0%, #F6FDFF 100%), #F9FAFB;
  color: #4A5565;
  font-size: 14px;
  width: 100%;
  max-width: 215px;
  font-weight: 300;
  height: 40px;
  margin-bottom: 32px;
}

.hero__title{
  font-size: 64px;
  font-weight: 800;
  color: #0C3249;
  margin-bottom: 30px;
  line-height: 70px; /* 109.375% */
  letter-spacing: -0.5px;
}

.hero__title span {
  position: relative;
  display: inline-block;
  color: #ffffff;
  padding: 4px 20px 8px 0;
  z-index: 0;
}

.hero__title span::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -23px;
  width: 402.658px;
  height: 77.707px;
  transform: rotate(178.604deg) scaleY(-1);
  z-index: -1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 397.404 77.2007' preserveAspectRatio='none'><path d='M0.366022 14.3041C-1.38643 7.95385 3.3733 1.67353 9.96086 1.64399L376.595 0.000101859C381.422 -0.0215398 385.575 3.4076 386.467 8.15114L397.229 65.3517C398.415 71.6604 393.435 77.4375 387.021 77.1933L21.1131 63.2643C16.7587 63.0986 13.013 60.1323 11.8538 55.9318L0.366022 14.3041Z' fill='url(%23g)'/><defs><linearGradient id='g' x1='21.8452' y1='18.7561' x2='124.123' y2='194.482' gradientUnits='userSpaceOnUse'><stop stop-color='%238AC3F8'/><stop offset='1' stop-color='%239CD2FF'/></linearGradient></defs></svg>") no-repeat center / 100% 100%;
}

.hero__description{
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 60px;
}

.hero__buttons{
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__buttons-try{
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 18px 30px;
  border-radius: 44px;
  border: 1px solid #CF031D;
  background-color: #CF031D;
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  transition: background-position 0.45s ease, color 0.45s ease;
  text-decoration: none;
  color: #fff;
  transition: .3s ease;
}

.hero__buttons-try:hover{
  background-position: 0% center;
  color: #CF031D;
}

.hero__buttons-try svg{
  transition: .3s ease;
}

.hero__buttons-try:hover > svg{
  stroke: #CF031D;
  transform: rotate(-45deg);
  transition: .3s ease;
}
.hero__buttons-try:hover > svg path{
  stroke: #CF031D;
}

.hero__buttons-format{
  padding: 18px 30px;
  border-radius: 44px;
  border: 1px solid #D1D5DC;

  /* Градиент сразу есть */
  background-image: linear-gradient(to right, #fff 50%, #DBEFFF 50%);
  background-size: 200% 100%;
  background-position: 0% center;

  text-decoration: none;
  color: #101828;

  transition: background-position 0.45s ease, color 0.45s ease;
}

.hero__buttons-format:hover{
  background-position: 100% center;
}


/* ─── ScrollSmoother обязательная обёртка ──────────────────────────────────── */
#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

#smooth-content {
  overflow: visible;
  width: 100%;
}

/* ─── Секция ─────────────────────────────────────────────────────────────── */
.about__us {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding-top: 200px;
  padding-bottom: 140px;
  margin-top: -1px;
}

.about__us .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ─── Контейнер логотипа ─────────────────────────────────────────────────── */
.logo-animated {
  position: relative;
  z-index: 0;
  width: min(550px, 85vw);
  aspect-ratio: 733 / 684;
  margin: 0 auto;
  overflow: visible;
}

.logo-part-top,
.logo-part-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  will-change: transform;
}

.logo-part-top {
  top: 0;
}

.logo-part-bottom {
  top: calc(100% * 101 / 684 + 10px);
}

.logo-part-top svg,
.logo-part-bottom svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Hero центральный текстовый блок ──────────────────────────────────────── */
.hero__center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  pointer-events: none;
}

.hero__center-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 60px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero__center-red {
  color: #CF031D;
}

.hero__center-blue {
  color: #0C3249;
}



.hero__center-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 10px 22px;
}

.hero__center-badge svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero__center-badge > span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  font-size: inherit;
}

.hero__center-desc {
  color: #9C9EA7;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
}

.why__us{
  padding: 200px 0;
  perspective: 1000px;
}

.why__us-svg{
  margin-bottom: 64px;
}

.why__us-title{
  color: #0C3249;
  font-size: 44px;
  font-weight: 800;
  line-height: 60px; /* 136.364% */
  letter-spacing: -0.5px;
}

.why__badge {
  position: relative;
  display: inline-block;
  color: #ffffff;
  padding: 4px 20px 8px 0;
  z-index: 0;
}

.why__badge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  right: -16px;
  z-index: -1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 238 65' preserveAspectRatio='none'><path d='M237.394 9.99977C237.394 4.34333 232.706 -0.187149 227.053 0.00567126L12.5785 7.32106C7.48987 7.49462 3.34409 11.4639 2.94948 16.5402L0.0307627 54.0881C-0.441996 60.17 4.59379 65.2544 10.6799 64.84L228.073 50.0396C233.32 49.6824 237.394 45.3219 237.394 40.0626L237.394 9.99977Z' fill='url(%23wbg)'/><defs><linearGradient id='wbg' x1='232.612' y1='9.74028' x2='131.025' y2='144.074' gradientUnits='userSpaceOnUse'><stop stop-color='%239CD2FF'/><stop offset='1' stop-color='%238AC3F8'/></linearGradient></defs></svg>") no-repeat center / 100% 100%;
}

.why__us-subtitle{
  margin-top: 20px;
  color: #9C9EA7;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}

.why__us-left{
  width: 100%;
  max-width: 274px;
  will-change: transform;
  backface-visibility: hidden;
}

.why__us-wrapper{
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.why__us-right{
  flex: 1;
  min-width: 0;
}

.why__us-cards{
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  width: 100%;
}

.why__us-card{
  border-radius: 58px;
  padding: 50px 30px 80px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform-origin: top center;
  will-change: transform;
}

.why__us-cards__icon{
  margin-bottom: 10px;
}

.why__us-cards__title{
  margin-bottom: 28px;
  color: #444;
  font-weight: 700;
  font-size: 30px;
}

.why__us-cards__subtitle{
  color: #9C9EA7;
  font-size: 20px;
  font-weight: 400;
  line-height: 27px; /* 135% */
  letter-spacing: 1px;
}

.why__us-card--1{
  border: 5px solid rgba(145, 200, 250, 0.10);
  background: #F6FDFF;
}
.why__us-card--2{
  border: 5px solid rgba(145, 200, 250, 0.10);
  background: #FFF9F3;
  box-shadow: 0 8px 22px 0 rgba(78, 134, 255, 0.10);
}
.why__us-card--3{
  border: 5px solid rgba(145, 200, 250, 0.10);
  background: #F6FDFF;
}
.why__us-card--4{
  border: 5px solid rgba(145, 200, 250, 0.10);
  background: #F3F9FF;
}
.why__us-card--5{
  border: 5px solid rgba(145, 200, 250, 0.10);
  background: #FFF4F8;
}

/* ─── Game Section ─────────────────────────────────────────────────────────── */
.game {
  padding: 120px 0;
  background: #fff;
}

.game__header {
  text-align: center;
  margin-bottom: 65px;
}

.game__title {
  font-size: 44px;
  font-weight: 800;
  color: #0C3249;
  line-height: 1.3;
  margin-bottom: 20px;
}

.game__badge {
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 4px 20px 8px 0;
  margin-left: 10px;
  z-index: 0;
}

.game__badge-bg {
  position: absolute;
  top: 50%;
  left: -16px;
  right: -6px;
  width: calc(100% + 22px);
  height: 100%;
  transform: translateY(-50%);
  z-index: -1;
  pointer-events: none;
}

.game__sticker {
  position: absolute;
  top: -18px;
  right: -30px;
  width: 62px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.game__desc {
  font-family: 'SourceHanSerifTC', var(--font-main);
  color: #9C9EA7;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 55px;
}

.game__word {
  position: relative;
  display: inline-block;
}

.game__word-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.game__word-pinyin {
  color: #4A5565;
  font-size: 29px;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

.game__word-chars {
  font-family: 'SourceHanSerifTC', var(--font-main);
  font-size: 36px;
  font-weight: 700;
  color: #0C3249;
  text-align: center;
}

.game__sound {
  position: absolute;
  left: calc(100% + 29px);
  bottom: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.game__field-wrap {
  position: relative;
  max-width: 786px;
  margin: 0 auto 48px;
}

.game__field-wrap > svg {
  width: 100%;
  height: auto;
  display: block;
}

.game__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: url('../assets/cursor.svg') 12 0, crosshair;
  z-index: 2;
}

.game__char {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.game__char--left {
  left: 0;
  width: 50%;
}

.game__char--right {
  right: 0;
  width: 50%;
}

.game__char svg {
  max-width: 65%;
  max-height: 75%;
  width: auto;
  height: auto;
}

.game__cta-wrap {
  display: flex;
  justify-content: center;
}

.game__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 40px;
  border-radius: 44px;
  border: 1.5px solid #CF031D;
  background: #CF031D;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s ease;
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  transition: background-position 0.45s ease, color 0.45s ease;
}

.game__cta:hover {
  background-position: 0% center;
  color: #CF031D;
}

.game__cta svg{
  transition: 0.3s ease;
}

.game__cta:hover > svg{
  transform: rotate(-45deg);
}


/* ── Courses ─────────────────────────────────────────── */
.courses {
  padding: 120px 0 180px;
  background: #fff;
}

.courses__head {
  margin-bottom: 40px;
}

.courses__free {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 33554400px;
  border: 1px solid #E5E7EB;
  background: linear-gradient(0deg, #F6FDFF 0%, #F6FDFF 100%), #F9FAFB;
  margin-bottom: 32px;
  padding: 10px 20px;
}

.courses__title-row {
  margin-bottom: 14px;
}

.courses__title {
  font-size: 44px;
  font-weight: 800;
  color: #0C3249;
  line-height: 60px;
  letter-spacing: -0.5px;
  margin: 0;
}

.courses__title-hl {
  position: relative;
  display: inline-block;
  line-height: 1;
  color: #fff;
  isolation: isolate;
  vertical-align: baseline;
}

.courses__title-hl-bg {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 5px)) translateX(7px);
  left: -14px;
  right: -14px;
  height: 54px;
  z-index: -1;
}

.courses__stars {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.star-big {
  position: relative;
  top: -40px;
}

.star-small {
  position: relative;
  top: -60px;
  left: -6px;
}

.courses__sub {
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 440px;
  line-height: 1.6;
}

/* Cards grid */
.courses__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.course-card {
  position: relative;
  border-radius: 40px;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  padding: 30px 40px;
  transition: .3s ease all;
  background-color: #DBEFFF;
  background: linear-gradient(0deg, #F3F9FF 0%, #F3F9FF 100%), linear-gradient(0deg, #FFF9F3 0%, #FFF9F3 100%), #FFF;
}

.course-card:hover{
  border-radius: 40px;
  box-shadow: 0 20px 25px -5px rgba(58, 159, 242, 0.10), 0 8px 10px -6px rgba(87, 117, 141, 0.10);
  border: 1px solid #FFF;
  background-color: #ffffff;
  transition: .3s ease all;
}

.course-card:nth-child(1){
  border: 5px solid rgba(207, 3, 29, 0.10);
  background: #FFF;
}

.course-card:nth-child(1):hover{
  border-radius: 40px;
  border: 5px solid rgba(207, 3, 29, 0.20);
  background: #FFF;
  box-shadow: 0 20px 25px -5px rgba(240, 186, 166, 0.20), 0 8px 10px -6px rgba(240, 186, 166, 0.10);
}

.course-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.course-card__badge {
  border-radius: 33554400px;
  background: #DBEFFF;
  display: flex;
  height: 24px;
  padding: 4px 12px;
  align-items: center;
  gap: 8px;
  color: var(--Deep-Blue, #101828);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 133.333% */
}

.course-card:nth-child(1) .course-card__badge{
  background: #9CD2FF;
  color: var(--White, #FFF);
}

.course-card__pic {
  position: absolute;
  right: 37px;
  top: -38px;
  flex-shrink: 0;
}

.course-card__title {
  font-size: 34px;
  font-style: normal;
  font-weight: 800;
  line-height: 36px; /* 105.882% */
  letter-spacing: -1px;
  color: #0C3249;
  margin-bottom: 10px;
}

.course-card__desc {
  color: #6A7282;
  font-family: "Inter Tight";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
  min-height: 40px;
  margin-bottom: 30px;
}

.course-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 44px;
  border: 1px solid #D1D5DC;
  color: #101828;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s ease all;
  align-self: flex-start;
  width: 100%;
  background-color: #fff;
  background-image: linear-gradient(to right, #fff 50%, #DBEFFF 50%);
  background-size: 200% 100%;
  background-position: 0% center;
  transition: background-position 0.45s ease, color 0.45s ease;
}

.course-card__btn:hover{
  background-position: 100% center;
}



.course-card__btn svg{
  transition: 0.3s ease all;
}

.course-card__btn:hover > svg{
  transform: rotate(-45deg);
}



.course-card__btn--red {
  background-color: #CF031D;
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-position: 100% center;
  color: #fff;
  border-color: #CF031D;
  transition: background-position 0.45s ease, color 0.45s ease;
}
.course-card__btn--red:hover {
  background-position: 0% center;
  color: #CF031D;
}





/* ─── Reviews ────────────────────────────────────────────────────────────── */
.reviews {
  padding: 80px 0;
  background: #FEF4EB;
  overflow: hidden;
}

.reviews__head {
  text-align: center;
  margin-bottom: 48px;
}

.reviews__title {
  font-size: 44px;
  font-weight: 800;
  color: #0C3249;
  line-height: 60px;
  letter-spacing: -0.5px;
  margin: 0;
  display: inline-block;
}

.reviews__title-hl {
  position: relative;
  display: inline-block;
  color: #fff;
  isolation: isolate;
  vertical-align: baseline;
}

.reviews__title-hl-bg {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 3px));
  left: -10px;
  right: -10px;
  height: 65px;
  z-index: -1;
}

/* Slider */
.reviews__slider-outer {
  overflow: visible;
  padding: 16px 0;
  margin-bottom: 36px;
}

.reviews__track {
  display: flex;
  gap: 35px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Review Card */
.review-card {
  flex-shrink: 0;
  border-radius: 38px;
  background: var(--White, #FFF);
  box-shadow: 5px 8px 27px 0 rgba(240, 186, 166, 0.50);
  padding: 30px 30px 25px 30px;
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 567px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease, margin 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  transform-origin: center;
}

.review-card.is-side {
  transform: scale(0.723);
  opacity: 0.5;
  margin: 0 -48.457px;
}

.review-card__name {
  font-family: 'SourceHanSerifTC', var(--font-main);
  font-size: 18px;
  font-weight: 700;
  color: #0C3249;
  margin-bottom: 30px;
}

.review-card__quote-open {
  display: block;
  transform: rotate(180deg);
  margin-bottom: 17px;
}

.review-card__text {
  font-size: 15px;
  line-height: 22px;
  color: #4B5563;
  margin: 0;
  max-height: 269px;
  display: -webkit-box;
  -webkit-line-clamp: 12;
  line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__quote-close {
  display: block;
  margin-left: auto;
  margin-top: 12px;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  margin-top: auto;
}

.review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #DFF0FF;
  color: #3A80CC;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-card__author-name {
  font-size: 14px;
  font-weight: 600;
  color: #0C3249;
}

/* Card hover & expanded */
.review-card:not(.is-side) {
  cursor: pointer;
}

.review-card:not(.is-side):not(.is-expanded):hover {
  box-shadow: 5px 8px 27px 0 rgba(240, 186, 166, 0.50), 0 0 0 5px rgba(207, 3, 29, 0.20);
}

/* Overlay */
.reviews__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #FEF4EB;
  opacity: .5;
  z-index: 999;
  cursor: pointer;
}

.reviews__overlay.is-visible {
  display: block;
}

/* Expanded card */
.review-card.is-expanded {
  position: fixed;
  /* top / left / width animated by JS → CSS transition */
  height: 567px;
  z-index: 1000;
  cursor: default;
  margin: 0 !important;
  transform: none !important;
  transition: top 0.4s ease, left 0.4s ease, width 0.4s ease !important;
  overflow: hidden;
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 24px;
}

.review-card.is-expanded .review-card__author {
  grid-column: 1;
  grid-row: 1 / -1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0 20px 0 0;
  border-top: none;
  border-right: 1px solid #F0F0F0;
}

.review-card.is-expanded .review-card__name {
  grid-column: 2;
  grid-row: 1;
}

.review-card.is-expanded .review-card__quote-open {
  grid-column: 2;
  grid-row: 2;
}

.review-card.is-expanded .review-card__text {
  grid-column: 2;
  grid-row: 3;
  display: block;
  max-height: none;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow-y: auto;
}

.review-card.is-expanded .review-card__quote-close {
  grid-column: 2;
  grid-row: 4;
  margin-left: 0;
}

.review-card.is-expanded .review-card__text::-webkit-scrollbar {
  width: 4px;
}
.review-card.is-expanded .review-card__text::-webkit-scrollbar-track {
  background: #FEF4EB;
  border-radius: 2px;
}
.review-card.is-expanded .review-card__text::-webkit-scrollbar-thumb {
  background: rgba(207, 3, 29, 0.25);
  border-radius: 2px;
}
.review-card.is-expanded .review-card__text {
  scrollbar-color: rgba(207, 3, 29, 0.25) #FEF4EB;
  scrollbar-width: thin;
}

/* Controls */
.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 350px;
  width: 100%;
  margin: 40px auto 0;
}

.reviews__nav {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(207, 3, 29, 0.40);
  color: #CF031D;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.2s;
}

.reviews__nav svg {
  display: block;
  flex-shrink: 0;
}

.reviews__nav:not(:disabled):hover {
  background: #f7c0c5;
}

.reviews__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.reviews__all-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 28px;
  border-radius: 44px;
  border: 1.5px solid #CF031D;
  color: #CF031D;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s ease ;
  margin-left: 12px;
  width: 100%;
  max-width: 209px;
  line-height: 1;
}

.reviews__all-link svg {
  display: block;
  flex-shrink: 0;
}

.reviews__all-link:hover {
  background: #CF031D;
  color: #fff;
}

/* ─── Form Section ───────────────────────────────────────────────────────── */
.form {
  padding: 180px 200px;
}

.form__card {
  display: flex;
  justify-content: space-between;
  border-radius: 24px;
  overflow: hidden;
  min-height: 560px;
  background: url('../assets/form-bg.png') center / cover no-repeat;
  position: relative;
  padding: 64px;
}

/* Left */
.form__left {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.form__headline {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 16px;
}

.form__sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
}

.form__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form__perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

/* Right */
.form__right {
  border-radius: 16px;
  background: #FFF;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 456px;
}

.form__title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.form__title {
  font-size: 22px;
  font-weight: 800;
  color: #0C3249;
  line-height: 1.25;
  margin: 0;
}

.form__title-hl {
  position: relative;
  display: inline-block;
  color: #fff;
  vertical-align: baseline;
  line-height: 1;
  z-index: 0;
  padding: 0 8px;
}

.form__title-hl-bg {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  left: 0;
  right: -8px;
  height: 37px;
  z-index: -1;
}

.form__stars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  padding-top: 4px;
  margin-left: -6px;
}

.form__stars .star-big  { position: relative; top: -2px; }
.form__stars .star-small { position: relative; top: -10px; }

.form__desc {
  font-size: 14px;
  color: #4A5565;
  font-weight: 300;
  line-height: 20px;
  margin: 0 0 32px;
}

.form__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.form__input {
  width: 100%;
  padding: 4px 12px;
  border-radius: 8px;
  height: 36px;
  border: 1px solid #E5E7EB;
  background: linear-gradient(0deg, #F3F9FF 0%, #F3F9FF 100%), #F3F3F5;
  font-size: 14px;
  color: #717182;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  caret-color: #CF031D;
  cursor: text;
}

.form__input::placeholder { color: #9CA3AF; }
.form__input:focus { border-color: #9CD2FF; }

.form__messengers-label {
  color: #6A7282;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px;
  margin: 8px 0 0;
}

.form__messengers {
  display: flex;
  gap: 12px;
  margin-top: -2px;
}

.form__messenger {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #FFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.form__messenger:hover,
.form__messenger.is-active {
  background: rgba(207, 3, 29, 0.08);
  border-color: #CF031D;
}

.form__submit {
  width: 100%;
  padding: 5.333px 20px;
  border-radius: 44px;
  border: 1px solid #CF031D;
  background-color: #CF031D;
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: background-position 0.45s ease, color 0.45s ease;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 48px;
}

.form__submit:hover {
  background-position: 0% center;
  color: #CF031D;
}

.form__submit-arrow {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.form__submit:hover .form__submit-arrow {
  transform: rotate(-45deg);
}

.form__privacy {
  font-size: 12px;
  color: #9CA3AF;
  text-align: center;
  margin: 0;
  margin-top: 4px;
}

.form__privacy a {
  color: #9CA3AF;
  text-decoration: underline;
}
/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  background: linear-gradient(135deg, #FF8391 14.9%, #FF4658 87.3%);
  padding: 56px 0 32px;
  color: #fff;
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.footer__col--brand {
  flex: 0 0 auto;
}

.footer__col--nav {
  width: 236px;
  flex-shrink: 0;
  margin-left: 268px;
}

.footer__col--contacts {
  width: 236px;
  flex-shrink: 0;
  margin-left: 48px;
}

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer__logo img { display: block; }

.footer__desc {
  font-size: 14px;
  line-height: 20px;
  color: rgba(255,255,255,0.75);
  max-width: 260px;
  margin: 0;
}

.footer__socials {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer__social {
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.footer__social:hover { opacity: 1; }

.footer__col-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
}

.footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__nav a {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__nav a:hover { color: #fff; }

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

.footer__contact {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__contact svg { flex-shrink: 0; }

.footer__contact a {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__contact a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
}

.footer__copy {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.footer__policy {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__policy:hover { color: #fff; }