/* Shared base for index / blog / article. Design: 1920 desktop, 390 mobile (≤1024px). */
@font-face{font-family:'Gilroy';src:url(../fonts/Gilroy-SemiBold.woff) format('woff');font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:#0E0F10;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

/* 1440 content + 2×24 gutter; 358 content + 2×16 on mobile */
.container{max-width:1488px;margin:0 auto;padding:0 24px}
@media (max-width:1024px){.container{padding:0 16px}}

/* ===== shared components: header, menu, promo, cta, app banner ===== */
/* ===== Shared components: header, menu, store buttons, promo, cta (footer + download), app banner ===== */

/* --- Header (desktop: home 159:3074, inner 159:3637) --- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;transition:background .3s,padding .3s}
.header--home{background:transparent} /* the hero reserves its height (.hero__header-slot) */
.header:not(.header--home)+main{margin-top:80px} /* inner pages: reserve the fixed header's height */
.header__logo-dark{display:none}
/* After scrolling the header turns into a floating white "island": pill radius like the site's buttons,
   the CTA nested 10px inside it so the curves run parallel; soft shadow to lift it off white sections */
.header__inner{transition:height .3s,padding .3s,border-radius .3s,box-shadow .3s,background .3s}
.header.is-scrolled{padding-top:12px;background:transparent}
.header.is-scrolled .header__inner{height:64px;padding:0 10px 0 28px;border-radius:32px;background:#fff;
  box-shadow:0 10px 30px rgba(14,15,16,.08),0 0 0 1px rgba(14,15,16,.04)}
.header--home.is-scrolled .header__nav a,.header--home.is-scrolled .lang__btn{color:#0E0F10}
.header--home.is-scrolled .header__btn{background:#FF738B;color:#fff;font-size:16px}
.header--home.is-scrolled .header__logo-light{display:none}
.header--home.is-scrolled .header__logo-dark{display:block}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:80px}
.header--home .header__inner{height:108px}
.header__logo img{width:145px;height:44px}
.header__nav{display:flex;gap:48px}
.header__nav a,.lang__btn{font-weight:500;font-size:18px;line-height:22px;color:#0E0F10}
.header--home .header__nav a,.header--home .lang__btn{color:#fff}
.header__actions{display:flex;align-items:center;gap:24px}
.header__btn{padding:11px 11px 11px 15px;border:1px solid #FECDD3;border-radius:32px;background:#FF738B;color:#fff;font-weight:600;font-size:16px;line-height:22px;white-space:nowrap}
.header--home .header__btn{background:#fff;color:#FF738B;font-size:18px}
.header__burger{display:none}
.menu{display:none}

/* --- Store buttons (CTA 159:3633, promo 159:3717) --- */
.store-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:16px 24px;border-radius:32px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.04);font-weight:600;font-size:16px;line-height:22px;color:#0E0F10;white-space:nowrap}
.store-btn img{width:24px;height:24px}
.store-btn--raised{box-shadow:0 4px 24px rgba(0,0,0,.12)}

/* --- Promo card (blog t1 159:3696 / article t1 159:4107); place inside .container --- */
.promo{position:relative;overflow:hidden;height:546px;padding:121px 0 0 64px;border-radius:48px;background:linear-gradient(170deg,#FFEFF0 0%,#FDF0FD 100%)}
.promo__title{width:507px;font-weight:600;font-size:40px;line-height:48px;color:#0E0F10}
.promo__list{margin-top:24px;list-style:none;display:flex;flex-direction:column;gap:12px}
.promo__list li{display:flex;align-items:flex-start;gap:8px;font-weight:500;font-size:16px;line-height:22px;color:#6B6B6B}
.promo__list img{flex:none;width:24px;height:24px}
.promo__buttons{margin-top:40px;display:flex;gap:16px}
.promo__buttons .store-btn{width:274px;padding:16px 0}
.promo__buttons .store-btn+.store-btn{width:245px}
/* ponytail: phone screen is the old 4× export of the clipped mockup (stroke included), not live layers */
.promo__phone{position:absolute;left:879px;top:46px;width:401px;height:500px}
.store-btn__short{display:none}

/* --- CTA: footer links + "Fursatni boy bermang!" (home 159:3305+159:3626, blog 159:3904+159:3966, article 159:4021+159:4082) --- */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta__bg{position:absolute;z-index:-1;left:0;right:0;top:15px;bottom:0;isolation:isolate;background:radial-gradient(67.9% 67.9% at 50% 100%,#FFEEEF 0%,#FFFFFF 100%)}
/* texture 1:1 crop of Figma imageTransform; Figma image filters approximated */
.cta__texture{position:absolute;left:0;top:39px;width:calc(100% - 25px);height:1085px;background:url(../images/common/cta-texture.webp) 0 55.56%/100% 119.64% no-repeat;mix-blend-mode:color-burn;filter:contrast(1.3) saturate(1.53)}
.cta__bg::after{content:"";position:absolute;left:calc(50% - 180px);top:831px;width:470px;height:248px;background:#fff;filter:blur(50px)}
.cta__nav{display:grid;grid-template-columns:199px 256px 230px 224px 197px 1fr;column-gap:24px;padding-bottom:48px;border-bottom:1px solid #E0E4E9}
.cta__logo img{width:199px;height:44px}
.cta__stores,.cta__social{display:none} /* mobile only: quick download under the logo, social links above the copyright */
.cta__col{display:flex;flex-direction:column;gap:12px}
.cta__col-title{padding:0;text-align:left;font-weight:600;font-size:16px;line-height:22px;color:#202123;pointer-events:none}
.cta__links{list-style:none;display:flex;flex-direction:column;gap:12px}
.cta__links a{display:block;white-space:nowrap;font-weight:500;font-size:16px;line-height:22px;color:#626367}
.cta__copy{margin-top:48px;font-family:'Gilroy','Inter',sans-serif;font-weight:600;font-size:14px;line-height:20px;color:#959599;text-align:center}
.cta__stage{position:relative;overflow:hidden;margin-top:54px;padding:577px 0 48px}
.cta__phone{position:absolute;max-width:none}
.cta__phone--dashboard{left:calc(50% - 152px);top:0;width:355px;height:733px}
.cta__phone--community{left:calc(50% - 552px);top:104px;width:344px;height:709px}
.cta__phone--analysis{left:calc(50% + 248px);top:104px;width:347px;height:716px}
.cta__glow,.cta__fade{position:absolute;width:1440px;height:615px;background:radial-gradient(100% 100% at 50% 100%,#FFF7FA 60.4%,rgba(255,247,250,0) 100%)}
.cta__glow{left:calc(50% - 720px);top:246px}
.cta__fade{left:calc(50% - 753px);top:166px}
/* design boxes sit 31/38px right of center — kept as in Figma */
.cta__title{position:relative;width:954px;margin-left:calc(50% - 446px);font-weight:700;font-size:56px;line-height:64px;letter-spacing:-1.12px;text-align:center;color:#0E0F10}
.cta__buttons{position:relative;display:flex;gap:16px;width:max-content;margin:36px 0 0 calc(50% - 243px)}

/* --- App banner (article mobile 159:5389) --- */

@media (max-width:1024px){
    /* header (159:4380 home, 159:4782 inner); web y = frame y − 44 (iOS status bar) */
    .header__inner,.header--home .header__inner{height:44px;padding-top:12px}
    .header:not(.header--home)+main{margin-top:44px}
    .header.is-scrolled{padding:10px 12px 0}
    .header.is-scrolled .header__inner,.header--home.is-scrolled .header__inner{height:52px;padding:0 10px 0 16px;border-radius:26px}
    .header--home.is-scrolled .header__burger{background:#FF738B}
    .header__logo img{width:105px;height:32px}
    .header__nav,.header__actions{display:none}
    .header__burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.25px;width:32px;height:32px;border-radius:999px;background:#FF738B}
    .header--home .header__burger{background:rgba(255,255,255,.12)}
    .header__burger span{width:15px;height:1.5px;border-radius:1px;background:#fff}
    .menu{display:flex;flex-direction:column;gap:16px;position:absolute;top:100%;left:16px;right:16px;margin-top:8px;padding:16px;border-radius:24px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.08);
      opacity:0;visibility:hidden;translate:0 -8px;transform-origin:top right;scale:.98;transition:opacity .25s,translate .25s,scale .25s,visibility 0s .25s}
    .menu.is-open{opacity:1;visibility:visible;translate:none;scale:none;transition:opacity .25s,translate .25s,scale .25s}
    .menu a{font-weight:500;font-size:16px;line-height:22px;color:#0E0F10}
    .menu .menu__btn{padding:12px 16px;border-radius:32px;background:#FF738B;color:#fff;font-weight:600;text-align:center}

    /* promo (159:4850) */
    .promo{height:auto;padding:24px 16px 0;border-radius:24px}
    .promo__title{width:auto;font-size:24px;line-height:29px}
    .promo__buttons{flex-direction:column}
    .promo__buttons .store-btn,.promo__buttons .store-btn+.store-btn{width:100%}
    .promo__phone{position:static;width:calc(100% + 6.6px);max-width:none;height:auto;margin:36.7px 0 0 -3.3px} /* PNG includes the 3.3px outer stroke */

    /* cta (159:4737 / 159:5054+5087+5053 / 159:5402+5435+5401) */
    .cta__bg{display:none}
    .cta__nav{display:flex;flex-direction:column;gap:8px;padding-bottom:9px}
    .cta__logo{margin-bottom:16px}
    .cta__col{gap:0}
    .cta__col-title{display:flex;align-items:center;justify-content:space-between;height:48px;padding:12px 0 11px;border-bottom:1px solid #E0E4E9;pointer-events:auto;cursor:pointer}
    .cta__col:last-child .cta__col-title{padding-bottom:12px;border-bottom:0}
    .cta__col-title::after{content:"";width:10px;height:10px;margin:0 7px 4px 0;border-right:1.5px solid #727272;border-bottom:1.5px solid #727272;transform:rotate(45deg);transition:transform .3s,margin .3s}
    .cta__col.is-open .cta__col-title::after{margin-bottom:-4px;transform:rotate(-135deg)}
    .cta__links{max-height:0;overflow:hidden;padding:0;transition:max-height .35s ease,padding .35s ease}
    .cta__col.is-open .cta__links{max-height:420px;padding:12px 0}
    .cta__copy{margin-top:24px;font-family:'Inter',sans-serif;font-weight:500}
    .cta__stage{margin-top:46px;padding:379px 0 45px}
    .cta__phone--community{z-index:1;left:calc(50% - 279px);top:75px;width:246px;height:508px}
    .cta__phone--analysis{z-index:2;left:calc(50% + 54px);top:70px;width:249px;height:513px}
    .cta__phone--dashboard{z-index:3;left:calc(50% - 118px);top:0;width:255px;height:525px}
    .cta__glow{display:none}
    .cta__fade{z-index:4;left:calc(50% - 549px);top:119px;width:1032px;height:464px}
    .cta__title{z-index:5;width:255px;margin-left:calc(50% - 115px);font-size:24px;line-height:29px;letter-spacing:-.48px;white-space:nowrap}
    .cta__buttons{z-index:5;flex-direction:column;gap:11.47px;width:min(354px,calc(100% - 32px));margin:23px 0 0 max(16px,calc(50% - 168px))}
    .cta__buttons .store-btn{height:48px;padding:11.47px 17.2px;gap:5.73px;border-radius:22.93px;box-shadow:0 8.6px 17.2px rgba(0,0,0,.04);font-size:11.47px;line-height:15.8px}
    .cta__buttons .store-btn img{width:17px;height:17px}

}

/* ===== Language switcher (no design in Figma — follows the site's pill/card style) ===== */
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:6px;padding:8px 4px;border-radius:999px}
.lang__btn::after{content:"";width:7px;height:7px;margin:-3px 0 0 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;transition:rotate .25s,margin .25s}
.lang.is-open .lang__btn::after{rotate:-135deg;margin-top:3px}
.lang__list{position:absolute;top:calc(100% + 12px);right:-12px;z-index:20;min-width:200px;padding:8px;list-style:none;border-radius:16px;background:#fff;box-shadow:0 16px 40px rgba(14,15,16,.12),0 0 0 1px rgba(14,15,16,.04);
  opacity:0;visibility:hidden;translate:0 -6px;scale:.97;transform-origin:top right;transition:opacity .2s,translate .2s,scale .2s,visibility 0s .2s}
.lang.is-open .lang__list{opacity:1;visibility:visible;translate:none;scale:none;transition:opacity .2s,translate .2s,scale .2s}
.lang__list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:10px;font-weight:500;font-size:16px;line-height:22px;color:#0E0F10;transition:background .15s,color .15s}
.lang__list a span{font-size:13px;color:#9A9BA0;transition:color .15s}
.lang__list a:hover,.lang__list a:focus-visible{background:#FFF1F2;outline:none}
.lang__list a[aria-current]{color:#FF738B}
.lang__list a[aria-current] span{color:#FF738B}
.lang__list a[aria-current] span::before{content:"✓ ";font-weight:700}
.menu__lang{display:flex;gap:4px;padding:4px;border-radius:999px;background:#F5F5F7}
.menu__lang a{flex:1;padding:8px 0;border-radius:999px;text-align:center;font-weight:600;font-size:14px;line-height:20px;color:#626367;transition:background .2s,color .2s}
.menu__lang a[aria-current]{background:#fff;color:#FF738B;box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* ===== Burger → close icon ===== */
.header__burger span{transition:translate .25s,rotate .25s,opacity .2s}
.header__burger[aria-expanded="true"] span:nth-child(1){translate:0 4.75px;rotate:45deg}
.header__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.header__burger[aria-expanded="true"] span:nth-child(3){translate:0 -4.75px;rotate:-45deg}

/* ===== Hover / focus states ===== */
.header__nav a,.cta__links a{transition:color .2s,opacity .2s}
.header__nav a:hover{color:#FF738B}
.header--home .header__nav a:hover{color:#fff;opacity:.75}
.cta__links a:hover{color:#FF738B}
.header__btn,.menu__btn,.store-btn,.hero__store{transition:translate .2s,box-shadow .2s,filter .2s}
.header__btn:hover,.store-btn:hover,.hero__store:hover{translate:0 -2px;box-shadow:0 10px 24px rgba(255,115,139,.25)}
.header__btn:active,.store-btn:active,.hero__store:active{translate:none}
a:focus-visible,button:focus-visible{outline:2px solid #FF738B;outline-offset:3px}

/* ===== Smooth <details> (Chromium; others just open instantly) ===== */
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
details[open]::details-content{block-size:auto}

/* ===== Scroll reveal: only when JS has marked the page (no JS → everything visible) ===== */
.js-motion .reveal{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js-motion .reveal.is-in{opacity:1;translate:none}

/* ===== Marquee rows (reviews, logos): JS duplicates the items once ===== */
.marquee{animation:marquee var(--dur,60s) linear infinite}
.marquee--reverse{animation-direction:reverse}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--gap,0px) / 2))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-motion .reveal{opacity:1;translate:none}
}

/* ===== 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){
  .promo__title,.cta__title{font-size:28px;line-height:34px}

  /* Promo "Sizga kerak bo‘lgan yordam": compact card — benefit icons in white tiles, store buttons in one row
     with short labels, the phone smaller and fading into the card instead of a 500px cut-off screenshot */
  .promo{padding:24px 20px 0}
  .promo__title{font-weight:700;letter-spacing:-.5px;text-wrap:balance}
  .promo__list{margin-top:18px;gap:10px}
  .promo__list li{align-items:center;gap:12px;font-size:14px;line-height:20px;color:#4A4B50}
  .promo__list img{width:36px;height:36px;padding:7px;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(244,63,94,.10)}
  .promo__buttons{flex-direction:row;gap:10px;margin-top:22px}
  .promo__buttons .store-btn,.promo__buttons .store-btn+.store-btn{flex:1;width:auto;min-width:0;height:50px;padding:0 12px;font-size:15px;line-height:20px;white-space:nowrap}
  .store-btn__full{display:none}
  .store-btn__short{display:inline}
  .promo__shot{display:block;height:300px;margin-top:28px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .promo__phone{display:block;width:250px;margin:0 auto}

  /* Footer accordions: separate soft tiles (like the site's cards) instead of a ruled list;
     the open one tints pink; text on the mobile scale (title 15/22, links 14/20) */
  .cta__nav{gap:8px;padding-bottom:20px}
  .cta__col{border-radius:16px;background:#F5F5F7;transition:background .25s}
  .cta__col.is-open{background:#FFF1F3}
  .cta__col-title,.cta__col:last-child .cta__col-title{height:52px;padding:0 16px;border-bottom:0;font-size:15px;line-height:22px;transition:color .2s}
  .cta__col.is-open .cta__col-title{color:#F43F5E}
  .cta__col-title::after{width:8px;height:8px;margin:0 4px 3px 0;border-color:#9A9BA0}
  .cta__col.is-open .cta__col-title::after{margin-bottom:-3px;border-color:#F43F5E}
  .cta__links{gap:12px;padding:0 16px}
  .cta__col.is-open .cta__links{padding:2px 16px 18px}
  .cta__links a{font-size:14px;line-height:20px;white-space:normal}
  .cta__logo{margin-bottom:12px}
  .cta__stores{display:flex;gap:10px;margin-bottom:16px}
  .cta__stores .store-btn{flex:1;min-width:0;height:50px;padding:0 12px;font-size:15px;line-height:20px;white-space:nowrap;
    border:1px solid #ECECF0;box-shadow:0 8px 20px rgba(14,15,16,.05)}
  .cta__social{display:flex;justify-content:center;gap:10px;margin-top:16px}
  .cta__social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#F5F5F7;transition:background .2s,translate .2s}
  .cta__social a:hover{background:#FFF1F3;translate:0 -2px}
  .cta__social img{width:22px;height:22px}

  /* "Fursatni boy bermang!" + its store buttons duplicate the stores under the footer logo — desktop only */
  .cta__stage{display:none}
  .cta__copy{padding-bottom:32px}
}