/* ===== home-hero ===== */
/* ===== Home hero (Figma 159:3025 / 159:3097 / 263:823; mobile 383:823, 159:4463, 159:4467) ===== */
.hero{position:relative;height:1230px;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#FF92AA -15.05%,#FF5572 85.4%,#FFFFFF 100%)}
.hero__header-slot{min-height:108px} /* spacer: the fixed header lives outside the hero (its overflow:hidden would clip it in Safari) */

.hero__content{position:relative;width:954px;max-width:calc(100% - 32px);margin:29px auto 0;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:12px 16px 12px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-weight:500;font-size:16px;line-height:22px} /* ponytail: Figma GLASS effect approximated with backdrop blur */
.hero__avatars{display:flex}
.hero__avatars img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff}
.hero__avatars img+img{margin-left:-6px}
.hero__title{margin-top:16px;font-weight:600;font-size:72px;line-height:80px;letter-spacing:-2.16px}
.hero__pp{font-family:'Playpen Sans',cursive} /* Figma styles this one space with Playpen Sans; it adds the extra line height */
.hero__text{margin-top:24px;font-size:24px;line-height:30px;color:#F4F6F9}
.hero__stores{display:flex;gap:16px;margin-top:36px}
.hero__store{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;border-radius:32px;
  background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.12);color:#0E0F10;font-weight:600;font-size:16px;line-height:22px;white-space:nowrap}

/* decorative stage in Figma page coords */
.hero__stage{position:absolute;top:0;left:calc(50% - 960px);width:1920px;height:100%;pointer-events:none}
.hero__stage>*{position:absolute}
.hero__glow{left:720px;top:901px;width:479px;height:445px;border-radius:50%;background:#EF4769;filter:blur(50px)}
.hero__clouds{inset:0;overflow:hidden}
.hero__cloud{position:absolute;max-width:none;object-fit:cover}
.hero__cloud--flip{transform:scaleX(-1)}
.hero__sparkles{position:absolute;left:0;top:333px;max-width:none}
.hero__clouds--mobile{display:none}

.hero__device{left:772px;top:576px;width:377px;height:654px}
.hero__phone{position:absolute;left:23px;top:0;width:335px;height:654px;border-radius:32px;overflow:hidden;
  box-shadow:0 0 0 12px rgba(255,255,255,.8)}
.hero__phone img{width:100%;max-width:none;margin-top:-12.943%} /* Figma imageTransform: crop starts at 4.61% of image height */
.hero__due{position:absolute;left:0;top:293px;width:377px;height:96px;padding:16px;border-radius:18px;
  background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;
  display:flex;flex-direction:column;gap:16px}
.hero__due-row{display:flex;justify-content:space-between;align-items:center}
.hero__due-row p{display:flex;flex-direction:column;gap:4px}
.hero__due-row .hero__due-left{align-items:flex-end;gap:2px}
.hero__due b{font-weight:500;font-size:16px;line-height:19.4px;color:#202939}
.hero__due span{font-size:14px;line-height:16.9px;color:#808084}
.hero__bars{position:relative;height:6px}
.hero__bars i{position:absolute;top:0;height:6px;border-radius:30px}

.hero__rating{left:1121px;top:742px;width:322px;padding:16px 24px;border-radius:100px;
  background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__rating-stars{display:flex;gap:4px}
.hero__rating p{width:100%;text-align:center;font-family:'Playpen Sans',cursive;font-weight:600;font-size:20px;line-height:30px;white-space:pre}
.hero__bubble{display:flex;align-items:center;justify-content:center;border-radius:100px;
  background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* boxes are the unrotated Figma sizes, centred on the rotated bounding-box centre */
.hero__bubble--247{left:642.38px;top:910px;width:95px;height:70px;transform:rotate(-.259rad);font-weight:700;font-size:24px;line-height:30px}
.hero__bubble--foot{left:1228.39px;top:584.39px;width:82px;height:82px;transform:rotate(.4313rad)}
.hero__bubble--lotus{left:510.28px;top:717.28px;width:120px;height:120px;transform:rotate(-.1906rad)}
.hero__bubble--nurse{left:629.22px;top:582.22px;width:76px;height:76px;transform:rotate(.1809rad)}

@media (max-width:1024px){
  /* mobile frame 390 wide; Figma y minus the 44px iOS status bar */
  .hero{height:1113px}
  .hero__header-slot{min-height:44px}
  .hero__content{width:auto;max-width:none;margin:40px 16px 0}
  .hero__badge{width:100%;justify-content:center;font-size:14px;line-height:22px}
  .hero__avatars img{width:20px;height:20px;box-shadow:0 0 0 1px #fff}
  .hero__title{min-height:153px;font-size:40px;line-height:48.4px;letter-spacing:-1.2px} /* Figma line box with the Playpen space is 153 */
  .hero__text{font-size:15px;line-height:18.2px}
  .hero__stores{flex-direction:column;align-self:stretch;margin-top:32px}

  .hero__stage{left:calc(50% - 195px);width:390px}
  .hero__glow{left:12px;top:861px;width:366px;height:340px;filter:blur(38.24px)}
  .hero__clouds--desktop,.hero__rating,.hero__bubble{display:none}
  .hero__clouds--mobile{display:block;overflow:visible}
  .hero__device{left:51px;top:613px;transform:scale(.7648);transform-origin:0 0}
  .hero__phone{height:724.4px} /* 554px after scale; mobile phone is taller than desktop */
}

/* ===== Motion: glass bubbles float, sparkles twinkle (uses `translate`, so the bubbles' rotate stays) ===== */
.hero__bubble,.hero__rating{animation:hero-float 7s ease-in-out infinite}
.hero__bubble--foot{animation-duration:6s;animation-delay:-1.5s}
.hero__bubble--lotus{animation-duration:8s;animation-delay:-3s}
.hero__bubble--nurse{animation-duration:6.5s;animation-delay:-4.5s}
.hero__bubble--247{animation-duration:7.5s;animation-delay:-2s}
.hero__rating{animation-duration:9s}
@keyframes hero-float{50%{translate:0 -12px}}
.hero__sparkles{animation:hero-twinkle 2.8s ease-in-out infinite alternate}
@keyframes hero-twinkle{from{opacity:.45}to{opacity:1}}

.hero__store-short{display:none} /* short store labels are for the mobile row */
.hero__title b{font-weight:inherit}

/* ===== Mobile typography (deliberate deviation from the 390 Figma frame, agreed with the client):
   section titles 28/34 so they outrank card titles, card titles 18/24, roomier hero subtitle ===== */
@media (max-width:1024px){
  /* Mobile hero, editorial layout (client brief: closer to a "phone on a blob, glass chips around, proof, then CTA"
     story — built only from the hero's own elements; desktop untouched).
     Order: badge → title (light + bold) → text → store buttons (stay above the fold) → phone stage (blob, chips) */
  .hero{display:flex;flex-direction:column;height:auto}
  .hero__content{display:contents}
  .hero__badge{order:1;align-self:center;width:auto;margin:28px 20px 0;gap:6px;padding:6px 12px 6px 6px;font-size:12px;line-height:18px}
  .hero__title{order:2;min-height:0;margin:18px 20px 0;font-weight:400;font-size:34px;line-height:38px;letter-spacing:-1.1px;text-wrap:balance}
  .hero__title b{display:block;font-weight:700}
  .hero__pp{line-height:0} /* the Playpen space must not grow the line box */
  .hero__text{order:3;align-self:center;max-width:340px;margin:14px 24px 0;font-size:15px;line-height:22px;color:rgba(255,255,255,.92);text-wrap:pretty}

  /* the stage keeps its 390 Figma coordinates; shifted so the phone top (613) lands on the stage top */
  .hero__stage{order:5;position:relative;left:auto;top:auto;width:390px;height:458px;margin:36px auto 0;
    transform-origin:195px 613px;transform:translateY(-613px) scale(.9)}
  .hero__glow{display:none} /* client: no blob/glow behind the phone on mobile */
  /* glass chips around the phone (above the clouds); the rating pill stays desktop-only */
  .hero__bubble--lotus,.hero__bubble--foot{display:flex;z-index:2}
  .hero__bubble--lotus{left:-10px;top:918px;width:100px;height:100px}
  .hero__bubble--lotus img{width:46px;height:46px}
  .hero__bubble--foot{left:304px;top:690px}

  /* store buttons right under the text so they are visible without scrolling */
  .hero__badge,.hero__title,.hero__text,.hero__stores{position:relative;z-index:3} /* the transformed stage paints above plain flow content */
  .hero__stores{order:4;flex-direction:row;align-self:center;width:calc(100% - 40px);max-width:420px;gap:10px;margin:24px 20px 0}
  .hero__store{flex:1;min-width:0;height:50px;padding:0 12px;gap:8px;font-size:15px;line-height:20px;white-space:nowrap;
    box-shadow:0 10px 24px rgba(199,30,70,.18)}
  .hero__store-full{display:none}
  .hero__store-short{display:inline}
}

/* ===== home-tools ===== */
/* ===== Home: Tools (Figma 159:3151 desktop, 159:4471 mobile) ===== */
.tools{padding-top:200px}
.tools__title{margin-bottom:64px;font-weight:600;font-size:56px;line-height:64px;letter-spacing:-1.12px;text-align:center;color:#0E0F10}
.tools__title span{line-height:0;/* Playpen metrics would grow the line box */font-family:'Playpen Sans',cursive;font-weight:600;color:#FF738B}
.tools__list{display:flex;flex-direction:column;gap:40px}

.tools__card{position:relative;height:546px;overflow:hidden;border-radius:48px}
.tools__card--1{background:linear-gradient(169.8deg,#FFEFF0 3.9%,#FEEFF7 52.5%,#FDF0FD 95.7%)}
.tools__card--2{background:linear-gradient(110deg,#F0FDFB 5%,#FDFFE8 52.1%,#EBF8E4 103%)}
.tools__card--3{background:linear-gradient(115.4deg,#EBE3FF 8.8%,#FFECF1 56.3%,#FFE9C9 96.9%)}
.tools__card--4{background:linear-gradient(110.8deg,#FEFFDC 0%,#F6F8E4 47.6%,#F8EBE4 97.6%)}

.tools__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;width:466px;margin:64px 0 0 64px}
.tools__card--2 .tools__text{width:522px}
.tools__card--3 .tools__text,.tools__card--4 .tools__text{width:423px}
.tools__name{font-weight:600;font-size:40px;line-height:48px;color:#0E0F10}
.tools__desc{font-weight:500;font-size:16px;line-height:22px;color:#6B6B6B}

/* phone screenshot: Figma image crop = width-fit, shifted up (imageTransform) */
.tools__phone{position:absolute;width:348px;height:725px;overflow:hidden;border-radius:32px}
.tools__phone img{width:100%;height:auto;max-width:none}
.tools__card--1 .tools__phone{right:225px;top:50px;width:349px;box-shadow:0 0 0 4px #FECDD3}
.tools__card--1 .tools__phone img{margin-top:-81px}
.tools__card--2 .tools__phone{right:225px;top:64px;border-radius:36px;box-shadow:0 0 0 4.5px #B1E1A3}
.tools__card--2 .tools__phone img{margin-top:-81px}
.tools__card--3 .tools__phone{right:226px;top:66px;box-shadow:0 0 0 4px #BBB4FA}
.tools__card--3 .tools__phone img{margin-top:-33px}
.tools__card--4 .tools__phone{right:223px;top:50px;box-shadow:0 0 0 4px #FFCCB5}
.tools__card--4 .tools__phone img{margin-top:-71.5px}

.tools__pill{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 24px;border-radius:47.29px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px #fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600;font-size:18px;line-height:21.8px;color:#202123;text-align:center;white-space:nowrap}
.tools__pill small{font-size:12px;line-height:15px;color:#48494D}
.tools__card--1 .tools__pill{padding:12px 32px;background:rgba(255,255,255,.8);box-shadow:none}
.tools__card--1 .tools__pill--a{right:498px;top:380px}
.tools__card--1 .tools__pill--b{right:79px;top:273px}
.tools__card--2 .tools__pill--a{right:524px;top:354px}
.tools__card--2 .tools__pill--b{right:90px;top:268px}
.tools__card--3 .tools__pill--a{right:571px;top:273px}
.tools__card--3 .tools__pill--b{right:46px;top:185px}
.tools__card--4 .tools__pill--a{right:551px;top:312px;width:114px}
.tools__card--4 .tools__pill--b{right:99px;top:159px}

.tools__img{position:absolute;max-width:none;object-fit:cover}
.tools__card--1 .tools__img{left:0;top:287px;width:314px;height:287px}
.tools__card--2 .tools__img{left:-1px;top:342px;width:367px;height:204px}
.tools__card--3 .tools__img{left:0;top:320px;width:374px;height:249px}
.tools__card--4 .tools__img{left:21px;top:298px;width:312px;height:260px;object-fit:fill}

@media (max-width:1024px){
    .tools{padding-top:56px}
    .tools__title{margin-bottom:27px;font-size:24px;line-height:normal;letter-spacing:-.48px} /* Figma: intrinsic line height; its mixed-font line is 3px taller (68 vs 65) */
    .tools__title span{line-height:normal}
    .tools__list{gap:24px}
    .tools__card--1{margin-bottom:-8px} /* Figma: t1→t2 gap 16, others 24 */

    .tools__card{height:auto;min-height:180px;padding:24px 16px;border-radius:24px}
    .tools__card--1{min-height:178px;border-radius:16px;background:linear-gradient(172.2deg,#FFEFF0 -2.8%,#FDF0FD 101.9%)}
    .tools__card--2{min-height:209px;background:linear-gradient(119.3deg,#F0FDFB 4.7%,#FDFFE8 51.5%,#EBF8E4 102.1%)}
    .tools__card--3{background:linear-gradient(122.2deg,#EBE3FF 7.9%,#FFECF1 56.4%,#FFE9C9 97.8%)}
    .tools__card--4{background:linear-gradient(116.7deg,#FEFFDC 0%,#F6F8E4 47.6%,#F8EBE4 97.6%)}

    .tools__text,.tools__card--2 .tools__text,.tools__card--3 .tools__text,.tools__card--4 .tools__text{width:230px;margin:0;gap:8px}
    .tools__card--1 .tools__text{width:232px} /* ponytail: +2px so browser Inter wraps to Figma's 5 lines */
    .tools__name{font-size:20px;line-height:24.2px}
    .tools__card--1 .tools__name{font-size:18px;line-height:21.8px}
    .tools__desc{font-size:14px;line-height:20px}

    .tools__phone,.tools__pill{display:none}
    .tools__card--1 .tools__img{left:auto;right:-19px;top:70px;width:147px;height:135px}
    .tools__card--2 .tools__img{left:auto;right:-35px;top:105px;width:181px;height:101px}
    .tools__card--3 .tools__img{left:auto;right:-23px;top:89px;width:151px;height:101px}
    .tools__card--4 .tools__img{left:auto;right:-8px;top:63px;width:152px;height:126px}
}

/* ===== Mobile typography (deliberate deviation from the 390 Figma frame, agreed with the client):
   section titles 28/34 so they outrank card titles, card titles 18/24, roomier hero subtitle ===== */
@media (max-width:1024px){
  /* mobile type scale: section 28/34 · card title 20/26 · body 14/20 · small 12/16 */
  .tools__title{margin-bottom:28px;font-size:28px;line-height:34px}
  .tools__list{gap:16px}
  .tools__card--1{margin-bottom:0}                       /* one gap for all cards (Figma had 16 then 24) */
  /* same text column in every card, kept clear of the illustrations (text ends at 230, images start at ≥236) */
  .tools__text,.tools__card--2 .tools__text,.tools__card--3 .tools__text,.tools__card--4 .tools__text,.tools__card--1 .tools__text{width:214px}
  .tools__card--1 .tools__img{right:-25px}
  .tools__card--2 .tools__img{right:-40px;width:160px;height:89px}
  .tools__card--3 .tools__img{right:-29px}
  .tools__card--4 .tools__img{right:-14px;width:136px;height:113px}
  .tools__name,.tools__card--1 .tools__name{font-size:20px;line-height:26px;letter-spacing:-.2px} /* Figma: 18 on the first card, 20 on the rest */
  .tools__desc{font-size:14px;line-height:20px}
}

/* ===== home-why ===== */
/* ===== Nega aynan Mom+ (159:3206) ===== */
.why {
    position: relative;
    z-index: 1; /* video sits above the evidence background */
    padding-top: 200px;
}

.why__title,
.evidence__title {
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -1.12px;
    text-align: center;
}

.why__title {
    font-weight: 700;
    color: #0F172A;
}

.evidence__title {
    font-weight: 600;
    color: #0E0F10;
}

.why__title span,
.evidence__title span {
    font-family: 'Playpen Sans', cursive;
    font-weight: 600;
    color: #FF738B;
    line-height: 0; /* Playpen metrics would otherwise grow the 64px line box */
}

.why__grid {
    display: flex;
    gap: 16px;
    margin-top: 64px;
}

.why__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.why__item--fixed {
    flex: 0 0 443px;
}

.why__icon {
    width: 42px;
    height: 42px;
}

.why__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.why__item-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: #0E0F10;
}

.why__text {
    font-size: 16px;
    line-height: 22px;
    color: #48494D;
}

.why__text--narrow {
    max-width: 426px;
}

.why__br-mob {
    display: none;
}

.why__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #F43F5E;
}

.why__link img {
    width: 24px;
    height: 24px;
}

.why__video {
    position: relative;
    margin-top: 48px;
    aspect-ratio: 1440 / 724;
    border-radius: 48px;
    box-shadow: 0 0 0 8px #fff; /* Figma: 8px white stroke, outside */
    overflow: hidden;
}

.why__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(51, 51, 51, .15);
    pointer-events: none;
}

.why__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Figma places the control 21.5px right / 14.5px above the video centre */
.why__play {
    position: absolute;
    z-index: 1;
    top: calc(50% - 82px);
    left: calc(50% - 46px);
    display: grid;
    place-items: center;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .36); /* two nested Figma glass layers, 20% white each */
}

.why__play img {
    width: 60px;
    height: 60px;
}

/* ===== Isbotlarga asoslangan (159:3224) + background (159:3203) ===== */
.evidence {
    position: relative;
    isolation: isolate;
    padding-top: 158px;
    overflow-x: clip; /* full-bleed logos; background still spills vertically */
}

/* page y 4691–5732, starts behind the video above */
.evidence__bg {
    position: absolute;
    z-index: -1;
    top: -501px;
    left: 0;
    width: 100%;
    height: 1041px;
    isolation: isolate;
    background: linear-gradient(180deg, #FFEEEF 38.9%, #FFFFFF 100%);
    pointer-events: none;
}

.evidence__texture {
    position: absolute;
    top: 0;
    left: calc(50% - 823px); /* Figma group is shifted 13px left */
    width: 1621px;
    max-width: none;
    height: 929px;
    mix-blend-mode: color-burn;
}

.evidence__logos {
    display: flex;
    gap: 16px;
    width: max-content;
    margin: 64px 0 0 calc(50% - 1092px); /* row x=-132 on the 1920 frame */
}

.evidence__logos img {
    flex: none;
    width: 348px;
    height: 150px;
}

@media (max-width: 1024px) {
    .why {
        padding-top: 56px;
    }

    .why__title,
    .evidence__title,
    .why__title span,
    .evidence__title span {
        font-size: 24px;
        line-height: normal;
        letter-spacing: -.48px;
    }

    .why__title span,
    .evidence__title span {
        letter-spacing: normal;
    }

    .why__grid {
        flex-direction: column;
        gap: 32px;
        margin-top: 32px;
    }

    .why__item,
    .why__item--fixed {
        flex: none;
        gap: 16px;
    }

    .why__icon {
        width: 36px;
        height: 36px;
    }

    .why__body {
        gap: 8px;
    }

    .why__body--wide-gap {
        gap: 12px;
    }

    .why__item-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 22px; /* Figma 21.8 */
    }

    .why__br-mob {
        display: inline;
    }

    .why__text {
        font-size: 14px;
    }

    .why__text--narrow {
        max-width: none;
    }

    .why__video {
        margin-top: 32px;
        aspect-ratio: 358 / 180;
        border-radius: 24px;
        box-shadow: none;
    }

    .why__play {
        top: calc(50% - 32px);
        left: calc(50% - 32px);
        width: 64px;
        height: 64px;
    }

    .why__play img {
        width: 32px;
        height: 32px;
    }

    .evidence {
        padding-top: 56px;
    }

    .evidence__title {
        padding: 0 16px;
    }

    /* page y 3018–3372 */
    .evidence__bg {
        top: -110px;
        height: 354px;
    }

    .evidence__texture {
        left: auto;
        right: -2px;
        width: 316px;
        height: 181px;
    }

    .evidence__logos {
        gap: 6.7px;
        width: auto;
        margin: 24px 0 0;
        padding: 0 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .evidence__logos::-webkit-scrollbar {
        display: none;
    }

    .evidence__logos img {
        width: 146px;
        height: 63px;
    }
}

/* ===== Motion ===== */
.why__play{transition:scale .25s ease}
.why__play:hover{scale:1.08}
.why__play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:why-pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes why-pulse{from{scale:1;opacity:.8}to{scale:1.45;opacity:0}}
@media (max-width:1024px){
    .evidence__logos.marquee{width:max-content;padding:0;overflow:visible}
}

/* ===== Mobile typography (deliberate deviation from the 390 Figma frame, agreed with the client):
   section titles 28/34 so they outrank card titles, card titles 18/24, roomier hero subtitle ===== */
@media (max-width:1024px){
  .why__title,.evidence__title{font-size:28px;line-height:34px}
  .why__title span,.evidence__title span{font-size:inherit;line-height:inherit} /* "Mom+"/"Ongli onalik" were stuck at 24px */

  /* "Nega aynan Mom+": compact left-aligned cards instead of a long centred column —
     icon tile on the left, title / text / link on the right; no forced line breaks */
  .why__grid{gap:12px;margin-top:24px}
  .why__item,.why__item--fixed{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:10px;align-items:start;
    padding:18px 16px 16px;border-radius:20px;background:linear-gradient(160deg,#FFF5F7 0%,#FFF9FB 100%);text-align:left}
  .why__icon{grid-row:1 / span 2;width:44px;height:44px;padding:9px;border-radius:14px;background:#fff;
    box-shadow:0 6px 16px rgba(244,63,94,.10)}
  .why__body,.why__body--wide-gap{align-items:flex-start;gap:6px}
  .why__item-title{font-size:17px;line-height:22px;letter-spacing:-.1px;text-wrap:pretty}
  .why__item-title br{display:none}
  .why__text{font-size:14px;line-height:20px;color:#5F6066}
  .why__link{grid-column:2;justify-self:start;gap:4px;font-size:14px;line-height:20px}
  .why__link img{width:18px;height:18px}

  .why__video{margin-top:24px;aspect-ratio:16 / 11}

  /* "Isbotlarga asoslangan": logos fade in/out at the screen edges instead of being cut;
     the mask sits on a static wrapper so it doesn't travel with the marquee */
  .evidence__rail{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
  /* the pink band starts under the video (Figma started it mid-video), fading in from white */
  .evidence__bg{top:0;height:212px;background:linear-gradient(180deg,#FFFFFF 0%,#FFEEEF 34%,#FFFFFF 100%)}
  .evidence__texture{display:none} /* sat behind the video in Figma; on the moved band it shows as pixel blotches */
}

/* ===== home-social ===== */
/* ===== Reviews: "Mom+ bilan onalik qanday o‘zgardi?" ===== */
.reviews {
    padding-top: 200px;
    overflow: hidden; /* full-bleed rows */
}

.reviews__title {
    font-weight: 700;
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -1.12px;
    text-align: center;
    color: #0E0F10;
}

.reviews__brand {
    font-family: 'Playpen Sans', cursive;
    font-weight: 600;
    line-height: 0; /* Playpen metrics would otherwise grow the 64px line box */
    color: #FF738B;
}

.reviews__rows {
    margin-top: 64px;
}

.reviews__row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
}

/* Figma: rows start at x=-360 and x=-663 on the 1920 frame */
.reviews__row--1 { margin-left: calc(50% - 1320px); }
.reviews__row--2 { margin-left: calc(50% - 1623px); margin-top: 25px; }

.reviews__list { display: none; }

.reviews__card {
    --nh: 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
    width: 591px;
    padding: 23px; /* 24 − 1px border: Figma's inside stroke doesn't shift content */
    border: 1px solid #FFF1F2;
    border-radius: 24px;
    background: #F7F7F7;
}

.reviews__card--plain {
    height: 244px;
    gap: 0;
    justify-content: space-between;
}

.reviews__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reviews__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
}

.reviews__date {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #959599;
}

/* Figma text boxes are fixed-height with "truncate ending": box keeps --th, inner span clamps to --l lines */
.reviews__text {
    height: var(--th);
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #0E0F10;
}

.reviews__text span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--l);
    overflow: hidden;
}

.reviews__name {
    min-height: var(--nh);
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #0F172A;
}

.reviews__store {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
}

.reviews__store-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
}

.reviews__store-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16.9px;
    color: #0E0F10;
}

.reviews__store-name { color: #0088FF; }
.reviews__store-when { color: #BABABC; }

/* ===== Media ===== */
.media {
    padding-top: 200px;
}

.media__inner {
    display: flex;
    align-items: center;
    gap: 134px;
}

.media__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 591px;
    flex-shrink: 0;
}

.media__title {
    font-weight: 600;
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -1.12px;
    color: #0E0F10;
}

.media__lead {
    font-size: 24px;
    line-height: 30px;
    color: #48494D;
}

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

.media__logos img {
    flex: 1;
    min-width: 0;
    height: auto;
}

/* Media logos run as a marquee (six logos no longer fit the 715px slot) inside a soft-edged window */
.media__rail{flex:1;min-width:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.media__rail .media__logos{flex:none;width:max-content}
.media__rail .media__logos img{flex:none;width:166px;height:166px}

/* ===== Articles: "Birgalikda o’rganamiz" ===== */
.articles {
    padding: 200px 0 217px; /* bottom = gap to the CTA block (7920 → 8137) */
}

.articles__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
}

.articles__title {
    font-weight: 600;
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -1.12px;
    color: #0E0F10;
}

.articles__all {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 12px 24px;
    border: 1px solid #FECDD3;
    border-radius: 32px;
    background: #FF738B;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    white-space: nowrap;
}

.articles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
    margin-top: 56px;
}

.articles__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.articles__img {
    width: 100%;
    height: 195px;
    border-radius: 12px;
    object-fit: cover;
}

.articles__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.articles__card-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #0E0F10;
}

.articles__card-text {
    font-size: 16px;
    line-height: 22px;
    color: #48494D;
}

/* ===== Mobile (390 frame) ===== */
@media (max-width: 1024px) {
    .reviews {
        padding: 57px 16px 0;
    }

    .reviews__title {
        max-width: 309px;
        margin: 0 auto;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: -0.48px;
    }

    .reviews__brand {
        line-height: 34px; /* Figma: "Mom+" has intrinsic line height → line 1 is 34px, title 63px */
    }

    .reviews__rows { display: none; }

    .reviews__list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 32px;
    }

    .reviews__card {
        width: auto;
        gap: 16px;
        padding: 15px;
    }

    .reviews__date {
        font-size: 14px;
    }

    .reviews__name {
        font-size: 20px;
        line-height: 24.2px;
    }

    .reviews__store--posted {
        height: 34px;
    }

    .reviews__store--posted .reviews__store-logo {
        width: 32px;
        height: 32px;
    }

    .reviews__store--posted .reviews__store-meta {
        gap: 0;
    }

    .media {
        padding-top: 56px;
    }

    .media__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 0 17px; /* Figma frame is 356 wide here (x=18), not 358 */
    }

    .media__text {
        width: auto;
        gap: 16px;
    }

    .media__title {
        font-size: 24px;
        line-height: 29px;
        letter-spacing: -0.48px;
        text-align: center;
    }

    .media__lead {
        font-size: 16px;
        line-height: 19px; /* Figma 19.4 → 2 lines = 38px box */
    }

    .media__logos {
        gap: 8px;
    }

    .articles {
        padding: 57px 0 113px; /* bottom = gap to the CTA block (6347 → 6460) */
    }

    .articles__head {
        justify-content: center;
    }

    .articles__title {
        font-size: 24px;
        line-height: 29px;
        letter-spacing: -0.48px;
    }

    .articles__all { display: none; }

    .articles__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 24px;
    }

    .articles__card:nth-child(n+5) { display: none; }
}

/* ===== Motion ===== */
.articles__card,.reviews__card{transition:translate .25s ease,box-shadow .25s ease}
.articles__card:hover{translate:0 -4px}
.reviews__card:hover{translate:0 -3px;box-shadow:0 12px 28px rgba(14,15,16,.06)}

/* ===== Mobile typography (deliberate deviation from the 390 Figma frame, agreed with the client):
   section titles 28/34 so they outrank card titles, card titles 18/24, roomier hero subtitle ===== */
@media (max-width:1024px){
  .reviews__title,.media__title,.articles__title{font-size:28px;line-height:34px}
  /* "Birgalikda o’rganamiz" cards: one soft-grey card per article — photo flush on top, text inside with padding */
  .articles__grid{gap:16px}
  .articles__card{gap:0;overflow:hidden;border-radius:24px;background:#F5F5F7}
  .articles__img{height:auto;aspect-ratio:358 / 200;border-radius:0}
  .articles__body{gap:6px;padding:16px 20px 20px}
  .articles__card-title{font-size:18px;line-height:24px;letter-spacing:-.2px}
  .articles__card-text{font-size:14px;line-height:20px;color:#76777C;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

  /* Reviews: swipeable row (CSS scroll-snap) instead of five stacked cards; the next card peeks in.
     Equal-height cards: text clamps at 4 lines, name + store sit at the bottom */
  .reviews__list{flex-direction:row;gap:12px;margin:24px -16px 0;padding:4px 16px 12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reviews__list::-webkit-scrollbar{display:none}
  .reviews__list .reviews__card{flex:0 0 84%;display:flex;flex-direction:column;gap:12px;padding:18px 16px 16px;border-radius:20px;scroll-snap-align:start}
  .reviews__list .reviews__body{gap:10px}
  .reviews__list .reviews__text{height:auto;font-size:15px;line-height:22px;font-weight:400;color:#2A2B2F}
  .reviews__list .reviews__text span{-webkit-line-clamp:4;line-clamp:4}
  .reviews__list .reviews__name{margin-top:auto;font-size:16px;line-height:22px;font-weight:600;height:auto}
  .reviews__list .reviews__date{font-size:12px;line-height:16px}
  .reviews__list .reviews__store-meta,.reviews__list .reviews__store-name,.reviews__list .reviews__store-when{font-size:12px;line-height:16px}

  /* Media: full-bleed logo marquee like "Isbotlarga asoslangan" */
  .media__rail{margin:0 -17px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
  .media__rail .media__logos{gap:12px}
  .media__rail .media__logos img{width:104px;height:104px}
  .media__lead{text-align:center} /* title is centred, the lead was left-aligned */
}