/* PageKeys — полный адаптив: телефоны, планшеты, ноутбуки, landscape */

/* ============ GLOBAL ============ */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
}
body{
  min-width:0;
  overflow-x:clip;
}
img,picture,video,canvas,svg{max-width:100%}
table{max-width:100%}
:is(input,select,textarea):focus-visible,
button:focus-visible,
a:focus-visible,
.case-tab:focus-visible,
.quiz-opt:focus-visible,
.hc-tab:focus-visible{
  outline:2px solid rgba(var(--gold-rgb),.55);
  outline-offset:2px;
}

/* iOS: не зумит при фокусе в полях */
@media (max-width:768px){
  .hc-form input,.hc-form-quick input,.final-form input,
  .modal-form-wrap input,.kp-modal-form-wrap input,.exit-form-wrap input,
  .plan-modal-form-wrap input,.audit-offer-form input,.fld input{
    font-size:16px!important;
  }
}

/* Мобильная производительность: без тяжёлых blur-эффектов */
@media (max-width:768px){
  .amb::before,.amb::after{filter:none;opacity:.45;animation:none}
  .hdr.stuck{backdrop-filter:none}
}

/* Удобные зоны нажатия */
@media (pointer:coarse){
  .btn,.case-tab,.quiz-opt,.hc-tab,.hdr-burger,.promo-cta,.promo-close,
  .quiz-back,.quiz-skip,.modal-x,.case-cta,.float-tg{
    min-height:44px;
  }
  .hdr-burger{min-width:44px}
  .float-tg{min-width:44px}
}

/* ============ TEAM — FULL ADAPTIVE ============ */

/* Desktop: левая колонка липнет, факты в ряд */
@media (min-width:1101px){
  .team-visual{
    position:sticky;
    top:calc(72px + env(safe-area-inset-top,0px));
  }
  .team-facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:14px 0 16px;
  }
  .team-facts .tf{
    align-items:center;
    gap:8px;
    padding:10px 10px;
  }
  .team-facts .tf .ic{width:30px;height:30px;font-size:14px;border-radius:8px}
  .team-facts .tf b{font-size:12px;margin-bottom:0}
  .team-facts .tf small{font-size:10px;line-height:1.25}
  .team-head .h2{white-space:nowrap}
}

/* Планшет landscape: две колонки вместо одной */
@media (min-width:900px) and (max-width:1100px){
  .team{
    grid-template-columns:minmax(240px,34%) minmax(0,1fr);
    gap:clamp(24px,3vw,40px);
    align-items:start;
  }
  .team-visual{
    position:sticky;
    top:calc(68px + env(safe-area-inset-top,0px));
  }
  .team-photo{
    max-width:100%;
    margin:0;
  }
  .team-facts{margin:14px 0 16px}
  .team-head .h2{white-space:nowrap;font-size:clamp(24px,2.2vw,29px)}
}

/* Планшет portrait: стек + факты в ряд */
@media (max-width:899px){
  .team{
    grid-template-columns:1fr;
    gap:clamp(24px,5vw,36px);
  }
  .team-visual{width:100%;max-width:min(480px,100%);margin:0 auto}
  .team-visual-meta{display:none}
  .team-photo{
    max-width:100%;
    margin:0 auto;
  }
  .team-head{text-align:center}
  .team-head .eyebrow{justify-content:center}
  .team-head .eyebrow::before{display:none}
  .team-identity{text-align:center}
  .team-facts{margin:14px 0 16px}
}

@media (min-width:600px) and (max-width:899px){
  .team-facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .team-facts .tf{
    align-items:center;
    gap:8px;
    padding:10px 10px;
  }
  .team-facts .tf .ic{width:30px;height:30px;font-size:14px;border-radius:8px}
  .team-facts .tf b{font-size:12px;margin-bottom:0}
  .team-facts .tf small{font-size:10px;line-height:1.25}
}

@media (min-width:520px) and (max-width:599px){
  .team-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .team-facts .tf:last-child{grid-column:1/-1}
}

/* ============ LARGE TABLET / SMALL LAPTOP 900–1100 ============ */
@media (max-width:1000px){
  .roi-grid{grid-template-columns:1fr 1fr}
  .pricing-more{padding:28px 24px}
  .cta-strip-in{flex-direction:column;align-items:stretch}
  .cta-strip-in .btn{width:100%;justify-content:center}
}

/* ============ TABLET PORTRAIT ≤820 ============ */
@media (max-width:820px){
  .hero-grid{display:flex;flex-direction:column;gap:28px}
  .hero-price{font-size:14px;line-height:1.55}
  .hero-price b{white-space:normal}
  .team-cta .btn{width:100%;justify-content:center}
  .cmp-cta .btn{width:100%;max-width:400px}
  .pricing-more-links a{flex:1 1 calc(50% - 10px);text-align:center;min-width:140px}
  .pricing-more-actions .btn{width:100%;justify-content:center}
  .proof-maps .btn{width:100%;max-width:400px}
  .sh .btn.btn-lg{width:100%;justify-content:center}
  .not-for{grid-template-columns:1fr}
  #roi .roi{grid-template-columns:1fr;padding:24px 20px;gap:20px}
  #roi .roi-grid{grid-template-columns:1fr 1fr}
  #roi .roi-n{font-size:clamp(30px,7vw,38px)}
  .audit-head{flex-direction:column;gap:10px}
  .audit-score{font-size:32px}

  .audit-offer{
    grid-template-columns:1fr;
    gap:24px;
    padding:24px 20px;
  }
  .audit-offer-l,.audit-offer-form-wrap{width:100%;min-width:0}
  .audit-offer .h2{font-size:clamp(28px,7vw,40px);line-height:1.08}
  .audit-offer-form-wrap{padding:20px 18px}
  .audit-offer-form .btn-lg{width:100%;justify-content:center;white-space:normal}

  /* why us */
  #why .why-grid{grid-template-columns:1fr;gap:12px;width:100%;max-width:100%}
  #why .why{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    column-gap:14px;
    row-gap:4px;
    align-items:start;
    padding:18px 20px;
    width:100%;
    box-sizing:border-box;
  }
  #why .why-ic{grid-column:1;grid-row:1 / span 2;width:44px;height:44px;margin-bottom:0;font-size:18px;border-radius:12px}
  #why .why h3{grid-column:2;grid-row:1;font-size:18px;margin-bottom:0;line-height:1.25;min-width:0}
  #why .why p{grid-column:2;grid-row:2;font-size:14px;line-height:1.5;min-width:0}
}

/* ============ MOBILE ≤680 ============ */
@media (max-width:680px){
  .section{padding:clamp(44px,11vw,64px) 0}
  .section.tight{padding:clamp(40px,9vw,56px) 0}
  .h2{font-size:clamp(30px,8.5vw,42px)}
  .lead{font-size:16px}

  /* header */
  .promo-bar{display:none}
  .hdr-in{
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }
  .hdr-phone b{font-size:13px;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* hero form */
  .hc-tabs{grid-template-columns:1fr;gap:6px}
  .hc-tab{padding:12px 14px;font-size:13px;text-align:center}
  .hc-h{font-size:clamp(22px,6vw,28px);line-height:1.15}
  .hc-sub{font-size:13.5px;line-height:1.5}
  .form-micro-trust{flex-direction:column;gap:6px}
  .form-micro-trust span{font-size:10.5px}

  /* compare → карточки */
  .cmp-table{
    border:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
  }
  .cmp-table .cmp-row.cmp-head{display:none}
  .cmp-table .cmp-row:not(.cmp-head){
    display:flex;
    flex-direction:column;
    min-width:0!important;
    border:1px solid var(--line);
    border-radius:16px;
    margin-bottom:12px;
    overflow:hidden;
    background:rgba(16,13,7,.45);
  }
  .cmp-table .cmp-row:not(.cmp-head):last-child{margin-bottom:0}
  .cmp-table .cmp-cell{
    border-right:0;
    border-bottom:1px solid var(--line);
    justify-content:space-between;
    text-align:left;
    padding:12px 16px;
    font-size:13px;
    width:100%;
  }
  .cmp-table .cmp-cell:last-child{border-bottom:0}
  .cmp-table .cmp-cell.cmp-label{
    background:rgba(0,0,0,.28);
    font-size:14px;
    font-weight:600;
    justify-content:flex-start;
  }
  .cmp-table .cmp-row:not(.cmp-head) .cmp-cell:not(.cmp-label){
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .cmp-table .cmp-row:not(.cmp-head) .cmp-cell:not(.cmp-label)::before{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    flex:0 0 auto;
  }
  .cmp-table .cmp-row:not(.cmp-head) .cmp-cell:nth-child(2)::before{content:'Шаблон'}
  .cmp-table .cmp-row:not(.cmp-head) .cmp-cell:nth-child(3)::before{content:'Фриланс'}
  .cmp-table .cmp-row:not(.cmp-head) .cmp-cell:nth-child(4)::before{content:'PageKeys'}

  /* case filters — горизонтальный скролл */
  .case-tabs{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-4px;
    margin-right:-4px;
    padding:0 4px 6px;
    mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
  }
  .case-tabs::-webkit-scrollbar{display:none}
  .case-tab{flex:0 0 auto;white-space:nowrap}

  /* CTA blocks */
  .cta-strip{padding:22px 18px}
  .cta-strip-in{align-items:stretch}
  .cta-strip-l .h3{font-size:21px}
  .audit-offer-sec .audit-offer{padding:20px 16px;gap:20px}
  .audit-offer-list{margin-top:16px;gap:10px}
  .audit-offer-list li{font-size:14px}
  .audit-offer-form-wrap{padding:18px 16px;border-radius:16px}
  .audit-offer-form .btn-lg{padding:16px 20px;font-size:15px;line-height:1.35}
  .faq-side-cta{padding:18px 16px 20px}
  .faq-trust li{padding:12px 14px}
  .pains-cta{padding:22px 18px}
  .pricing-more{padding:24px 18px;margin-top:28px}
  .pricing-more-lead{font-size:19px}
  .pricing-more-links{flex-direction:column}
  .pricing-more-links a{width:100%;flex:none}

  /* ROI */
  #roi .roi{grid-template-columns:1fr;gap:18px;padding:20px 16px;width:100%;box-sizing:border-box}
  #roi .roi-l{min-width:0}
  #roi .roi-l .h2{font-size:clamp(22px,6.2vw,30px);margin-top:12px!important;line-height:1.12}
  #roi .roi-l .lead{font-size:14px;margin-top:10px!important;line-height:1.5}
  #roi .roi-calc{gap:12px;min-width:0}
  #roi .roi-label{font-size:13px;line-height:1.4}
  #roi .roi-grid{grid-template-columns:1fr 1fr;gap:10px}
  #roi .roi-box{padding:14px 10px}
  #roi .roi-box small{font-size:10px;line-height:1.35}
  #roi .roi-n{font-size:clamp(28px,8vw,36px)}
  #roi .roi-diff{font-size:13px}
  #roi .roi-calc .btn{padding:14px 18px;font-size:14px}

  /* team */
  .team{gap:22px}
  .team-visual{max-width:100%}
  .team-head{text-align:left}
  .team-head .eyebrow{justify-content:flex-start}
  .team-head .eyebrow::before{display:block}
  .team-identity{text-align:left}
  .team-head .h2{font-size:clamp(26px,7vw,34px);margin-top:14px}
  .team-head .lead{font-size:15px;margin-top:14px;line-height:1.55}
  .team-identity{margin-top:12px}
  .team-founder{font-size:18px}
  .team-facts{grid-template-columns:1fr;gap:12px;margin:16px 0 18px}
  .team-facts .tf{padding:16px 18px;gap:14px;align-items:center;border-radius:14px}
  .team-facts .tf .ic{width:42px;height:42px;font-size:17px;border-radius:11px}
  .team-facts .tf b{font-size:16px;margin-bottom:3px;line-height:1.3}
  .team-facts .tf small{font-size:14px;line-height:1.4}
  .team-facts .tf:last-child{grid-column:auto}
  .team-cta .btn{width:100%;justify-content:center;margin-top:0}
  .team-photo{
    width:100%;
    max-width:100%;
    margin:0;
  }
  .team-badge{left:12px;bottom:12px;padding:8px 12px;font-size:10px}

  /* niches */
  .clients{padding:32px 0 28px}
  .clients-top{margin-bottom:22px}
  .clients-lead{max-width:none;font-size:14px}
  .niche-marquee-set{gap:10px;padding-right:10px}
  .niche-tag{font-size:17px;padding:10px 16px 10px 20px}
  .niche-tag--lg{font-size:20px}
  .niche-tag--sm{font-size:10px}

  /* partners / proof */
  .partners{gap:8px}
  .partner{font-size:12px;padding:12px 16px}
  .proof-step{padding:18px 16px}
  .proof-doc{padding:16px}

  /* safe area */
  .float-tg{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .social-proof{bottom:calc(24px + env(safe-area-inset-bottom,0px))}

  /* modals fullscreen-ish */
  .modal{align-items:flex-end;padding:0;overflow:hidden}
  .modal-dialog,.plan-modal-dialog,.kp-modal-dialog,.exit-dialog{
    width:100%;
    max-width:100%;
    max-height:94vh;
    max-height:94dvh;
    border-radius:20px 20px 0 0;
    margin:0;
  }
  .modal-plan{align-items:flex-end;padding:0}
  .plan-modal-l,.plan-modal-r,.exit-l,.exit-r{padding:22px 18px}
  .modal-case-full{align-items:flex-end;padding:0}
  .case-modal-shell{
    width:100%;
    max-width:100%;
    height:94dvh;
    max-height:94dvh;
    border-radius:18px 18px 0 0;
    overflow:hidden;
  }
  #case-modal .case-modal-split{
    grid-template-columns:1fr;
    overflow-y:auto;
    overflow-x:hidden;
  }
  #case-modal .case-modal-preview{
    max-height:min(38vh,340px);
    min-height:160px;
  }
  #case-modal .case-modal-side{
    border-left:0;
    border-top:1px solid var(--line);
    min-width:0;
  }
  #case-modal .case-modal-actions{flex-direction:column;gap:8px}
  #case-modal .case-modal-actions .btn{width:100%;justify-content:center}

  /* KP modal — одна колонка, скролл внутри */
  .kp-modal-dialog{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    max-height:min(94dvh,calc(100dvh - env(safe-area-inset-bottom,0px)));
  }
  .kp-modal-dialog .modal-x{
    top:max(12px,env(safe-area-inset-top,0px));
    right:max(12px,env(safe-area-inset-right,0px));
  }
  .kp-modal-grid{
    grid-template-columns:1fr;
    min-height:0;
    flex:1;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .kp-modal-l{
    padding:20px 18px 16px;
    padding-top:max(20px,env(safe-area-inset-top,0px));
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .kp-modal-l::after{display:none}
  .kp-modal-l .h3{font-size:clamp(22px,6.5vw,28px)}
  .kp-modal-lead{max-width:none;font-size:14px;margin-bottom:16px}
  .kp-modal-gifts{gap:8px}
  .kp-modal-gifts li{padding:10px 12px}
  .kp-modal-gifts b{font-size:13px}
  .kp-modal-gifts small{font-size:11px}
  .kp-modal-foot{margin-top:16px;padding-top:14px;flex-direction:column;align-items:flex-start;gap:10px}
  .kp-modal-r{
    padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));
    align-items:stretch;
  }
  .kp-modal-form-h{font-size:clamp(20px,5.5vw,24px)}
  .kp-modal-form-sub{font-size:13px;margin-bottom:16px}
  .kp-modal-form-wrap input{font-size:16px;padding:14px 16px}
  .kp-modal-form-wrap form{gap:10px}
  .kp-audit-l{font-size:12px;line-height:1.4}

  /* why us — одна колонка, иконка слева */
  #why .why-grid{grid-template-columns:1fr;gap:10px;width:100%;max-width:100%}
  #why .why{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    column-gap:14px;
    row-gap:4px;
    align-items:start;
    padding:16px 18px;
    border-radius:16px;
    width:100%;
    box-sizing:border-box;
  }
  #why .why-ic{
    grid-column:1;
    grid-row:1 / span 2;
    width:44px;
    height:44px;
    margin-bottom:0;
    font-size:18px;
    border-radius:12px;
  }
  #why .why h3{grid-column:2;grid-row:1;font-size:17px;margin-bottom:0;line-height:1.25;min-width:0}
  #why .why p{grid-column:2;grid-row:2;font-size:14px;line-height:1.5;min-width:0}

  /* portfolio */
  .portfolio-hero{padding-top:88px}
  .portfolio-back{margin-bottom:14px}
  .portfolio-cta .btn{width:100%;justify-content:center}
  .pstat-n{font-size:clamp(22px,6vw,28px)}
  .portfolio-stats .pstat-hi{grid-column:1/-1;border-right:0}

  /* footer */
  .ft-grid{gap:28px}
  .ft-phone{font-size:clamp(20px,5.5vw,24px)}
  .ft h5{margin-bottom:12px}
}

/* ============ SMALL PHONES ≤480 ============ */
@media (max-width:480px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .hdr-in{gap:10px}
  .logo-img{max-width:min(150px,44vw)}
  .hdr-phone{display:none}
  .hdr-right .hdr-burger{margin-left:0}
  .hero-l .h1,.hero-title{font-size:clamp(34px,9.8vw,44px)}
  .hero-meta{flex-direction:column;align-items:flex-start}
  .hero-ava{padding-left:0;border-left:0;margin-top:4px}
  .trust-strip-in{grid-template-columns:1fr}
  .trust-pill{padding:14px 10px}
  .pr-price{font-size:clamp(32px,9vw,38px)}
  .pr-rb{top:12px;right:12px;font-size:9px;padding:5px 10px}
  .guar-seal{width:120px;height:120px}
  .guar-seal b{font-size:36px}
  .guar-conds li{font-size:13px}
  .rv-q{font-size:17px}
  .final p{font-size:16px}
  .final-perks .p{font-size:14px}
  .btn,.btn-lg{padding:15px 22px;font-size:14px}
  /* KP modal — компактнее на маленьких экранах */
  .kp-modal-l{padding:16px 16px 14px}
  .kp-modal-r{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .kp-modal-tag{font-size:10px;padding:6px 12px;margin-bottom:12px}
  .kp-modal-gifts li{gap:10px}
  .kp-modal-gifts .ic{width:24px;height:24px;font-size:12px}
  #why .why{grid-template-columns:40px 1fr;column-gap:12px;padding:14px 16px}
  #why .why-ic{width:40px;height:40px;font-size:16px}
  #why .why h3{font-size:16px}
  #why .why p{font-size:13px}
  .proof-steps{gap:10px}
  .case-content{padding:18px 16px 20px}
  .case-row-kpi{gap:10px}
  .steps-panel{padding:18px 14px}
  .st{padding:22px 16px 26px}
  .st-n{font-size:40px}
  .team-head .h2{font-size:clamp(24px,7.2vw,30px)}
  .team-founder{font-size:17px}
}

/* ============ EXTRA SMALL ≤360 ============ */
@media (max-width:360px){
  .hero-trust-i{font-size:11px}
  .hero-trust-i .ic{width:20px;height:20px;font-size:10px}
  .quiz-q{font-size:18px}
  .quiz-opt{padding:14px 12px;font-size:13px}
  .hc-tag{font-size:10px}
  .promo-text{font-size:11.5px}
  .social-proof{left:8px;right:8px;padding:12px 32px 12px 12px}
  .float-tg{right:12px;width:44px;height:44px}
}

/* ============ LANDSCAPE PHONES ============ */
@media (max-height:520px) and (orientation:landscape){
  .hero-card{max-height:70vh;overflow-y:auto}
  .hdr-drawer-head{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .hdr-drawer-in{gap:10px;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px))}
  .drawer-link{padding:9px 10px}
  .hdr-drawer-trust b{font-size:17px}
  .modal-dialog,.plan-modal-dialog,.kp-modal-dialog,.exit-dialog{max-height:88dvh}
  .section{padding:40px 0}
  .portfolio-hero{padding-top:72px}
  #team .team{
    grid-template-columns:minmax(200px,34%) minmax(0,1fr);
    gap:18px;
    align-items:start;
  }
  #team .team-visual{max-width:none;margin:0}
  #team .team-photo{
    margin:0;
    max-width:100%;
  }
  #team .team-head{text-align:left}
  #team .team-head .eyebrow{justify-content:flex-start}
  #team .team-head .eyebrow::before{display:block}
  #team .team-identity{text-align:left}
  #team .team-facts{grid-template-columns:1fr;gap:12px;margin:16px 0}
  #team .team-facts .tf{padding:14px 16px}
  #team .team-facts .tf b{font-size:15px}
  #team .team-facts .tf small{font-size:13px}
}

/* ============ LARGE DESKTOP ≥1440 ============ */
@media (min-width:1440px){
  .wrap{max-width:1280px}
  .hero-grid{gap:48px}
  .team{gap:60px}
}

/* ============ HOVER-ONLY DEVICES ============ */
@media (hover:none){
  .tilt-card:hover{transform:none!important}
  .btn-gold:hover{transform:none}
  .case:hover .case-shot{transform:none}
  .pain:hover,.serv:hover,.pr:hover,.rv:hover{transform:none}
}

/* ============ REDUCED MOTION + RESPONSIVE ============ */
@media (prefers-reduced-motion:reduce){
  .marq-row,.clients-track,.niche-marquee-track{animation:none}
}

@media (max-width:680px){
  .form-consent{font-size:12px;gap:10px}
  .form-consent input{width:18px;height:18px;min-width:18px}
  .ft-legal-links{justify-content:flex-start}
  body.cookie-banner-on .float-tg{bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .cookie-banner-in{flex-direction:column;align-items:stretch}
  .cookie-banner-actions{justify-content:space-between;width:100%}
}