@font-face{font-family:"Poppins";
src:url("fonts/poppins-regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

@font-face{font-family:"Poppins";
src:url("fonts/poppins-600.woff2") format("woff2");
font-weight:600;
font-style:normal;
font-display:swap;
}

@font-face{font-family:"Inconsolata";
src:url("fonts/inconsolata-variable.woff2") format("woff2-variations");
font-weight:200 900;
font-style:normal;
font-display:swap;
}

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

html,body{min-height:100vh;
overflow-x:hidden;
font-family:"Poppins",sans-serif;
background:linear-gradient(270deg,#4fa9ff 0%,#2651ff 100%);
color:white;
}

/* Mobile viewport stability: avoid hard-locking height to 100vh (can break scroll and jump on address-bar changes) */
body{min-height:100vh;
min-height:100svh;
}
@supports (height:100dvh){
  body{min-height:100dvh;
  }
}

.gradiend-container{min-height:100%;
}

.onebox{display:flex;
justify-content:center;
align-items:flex-start;
padding:180px 0px 120px;
max-width:1600px;
margin:0 auto;
box-sizing:border-box;
}

.onebox-container{display:flex;
justify-content:space-between;
align-items:flex-start;
width:100%;
gap:60px;
}

.onebox-left{position:relative;
top:30px;
left:-60px;
flex:1;
max-width:750px;
display:flex;
flex-direction:column;
align-items:flex-start;
}

.p6{font-size:88px;
font-weight:600;
margin-bottom:17px;
white-space:nowrap;
}

.p7{font-size:24px;
font-weight:400;
margin-top:17px;
margin-bottom:50px;
line-height:1.6;
max-width:580px;
width:100%;
word-break:break-word;
overflow-wrap:break-word;
text-align:left;
}

.onebox-right{position:relative;
top:-40px;
left:-60px;
flex:1;
display:flex;
justify-content:flex-end;
align-items:flex-start;
}

.photo-ph-pc{width:851px;
height:712px;
object-fit:contain;
display:flex;
}

.twobox{display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
padding:100px 60px;
flex-wrap:wrap;
gap:60px;
width:100%;
max-width:1800px;
margin:0 auto;
box-sizing:border-box;
}

.imgp1{position:relative;
top:-170px;
left:0px;
width:589px;
height:564px;
border-radius:12px;
object-fit:cover;
flex-shrink:0;
}

.twobox-right{position:relative;
top:-170px;
left:0px;
flex:1;
max-width:831px;
display:flex;
flex-direction:column;
justify-content:center;
}

.p10{font-weight:600;
font-size:52px;
margin-bottom:30px;
line-height:1.2;
}

.p11,.p12,.p13{font-size:20px;
margin-bottom:20px;
line-height:1.6;
}

.threebox{width:100%;
max-width:1596px;
margin:0 auto;
padding:160px 60px 60px;
box-sizing:border-box;
text-align:center;
}










@media (max-width:1670px){
.onebox-left{left:40px;
}
.p6{font-size:75px;
}
.p7{font-size:22px;
}
.p10{font-size:48px;
}
.p11,.p12,.p13{font-size:20px;
max-width:800px;
}
.photo-ph-pc{display:flex;
position:relative;
top:-30px;
left:60px;
width:712px;
height:712px;
}
}

@media (max-width:1730px){
.onebox-left{left:40px;
}
.p6{font-size:75px;
}
.p7{font-size:22px;
}
.photo-ph-pc{display:flex;
position:relative;
top:-30px;
left:60px;
width:672px;
height:672px;
}
}

@media (max-width:1554px){
.p10{font-size:44px;
}
.p11,.p12,.p13{font-size:18px;
max-width:700px;
}
}

@media (max-width:1499px){
.p10{font-size:40px;
}
.p11,.p12,.p13{font-size:17px;
max-width:650px;
}
}

@media (max-width:1440px){
.p10{font-size:33px;
}
.p11,.p12,.p13{font-size:17px;
max-width:550px;
}
.photo-ph-pc{transform:translate(0%,15%);
display:flex;
opacity:1;
width:clamp(300px,100vw,700px);
height:auto;
object-fit:contain;
margin:0 auto;
transition:all 0.3s ease;
}
.onebox{padding:70px 0px 120px;
}
.p13{opacity:0%;
}
.imgp1{height:534px;
}
.onebox-container{display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
gap:40px;
position:static;
margin-top:100px;
}
.onebox-left{position:static;
left:auto;
top:auto;
transform:none;
max-width:100%;
align-items:center;
text-align:center;
}
.p7{text-align:center;
margin:0 auto 50px auto;
}
.twobox-right{top:-105px;
}
}

@media (max-width:1322px){
.imgp1{display:none;
}
.p10,.p11,.p12{position:static !important;
margin:0 auto 30px auto;
text-align:center;
width:100%;
}
}

@media (max-width:1205px){
.onebox-left{left:0px;
}
}

@media (max-width:1000px){
.onebox-left{position:static !important;
margin:0 auto 30px auto;
text-align:center;
width:100%;
}
}

@media (max-width:920px){
.onebox-left{position:relative;
left:50%;
transform:translateX(-50%);
max-width:750px;
display:flex;
flex-direction:column;
align-items:flex-start;
}
.onebox-left{position:static;
left:auto;
top:auto;
transform:none;
max-width:100%;
align-items:center;
text-align:center;
}
}

@media (max-width:750px){
.onebox-left{position:static;
left:auto;
top:auto;
transform:none;
max-width:100%;
align-items:center;
text-align:center;
}
.p6{margin:0 auto 30px auto;
font-size:60px;
}
.p7{font-size:18px;
}
.p11{max-width:450px;
margin:0 auto;
font-size:17px;
}
.p12{max-width:450px;
margin:0 auto 30px auto;
top:30px;
position:relative;
font-size:17px;
}
.p10{max-width:600px;
font-size:40px;
margin:0 auto 30px auto;
position:relative;
}
}

@media (max-width:700px){
.onebox-left{position:static;
left:auto;
top:auto;
transform:none;
max-width:100%;
align-items:center;
text-align:center;
}
.p6{margin:0 auto 30px auto;
font-size:50px;
}
.p7{font-size:17px;
max-width:550px;
}
}

@media (max-width:640px){
.onebox-left{position:static;
left:auto;
top:auto;
transform:none;
max-width:100%;
align-items:center;
text-align:center;
}
.p6{margin:0 auto 30px auto;
font-size:48px;
}
.p7{font-size:20px;
width:480px;
}
}

@media (max-width:593px){
.p6{margin:0 auto 20px auto !important;
font-size:clamp(28px,6.5vw,52px) !important;
}
.p7{text-align:center !important;
margin:0 auto 40px auto !important;
font-size:clamp(13px,2.4vw,22px) !important;
max-width:600px !important;
}
.p7{width:450px;
}
}

@media (max-width:526px){
.onebox-left{position:static;
left:auto;
top:auto;
transform:none;
max-width:100%;
align-items:center;
text-align:center;
}
.p6{margin:0 auto 20px auto !important;
font-size:clamp(28px,6.5vw,52px) !important;
}
.p7{width:350px;
text-align:center !important;
margin:0 auto 40px auto !important;
font-size:clamp(13px,2.4vw,22px) !important;
max-width:600px !important;
}
}

@media (max-width:480px){
.onebox-left{margin-top:65px;
position:relative;
left:auto;
top:auto;
transform:translateY(-45%);
max-width:100%;
align-items:center;
text-align:center;
}
.p6{font-size:38px;
}
.p7{font-size:16px;
width:325px;
}
.p6{margin:0 auto 20px auto !important;
font-size:clamp(34px,6.5vw,52px) !important;
}
.p7{text-align:center !important;
margin:0 auto 40px auto !important;
font-size:clamp(13px,2.4vw,22px) !important;
max-width:600px !important;
}
@media (max-width:480px){.onebox-right{top:-90px;
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin-top:0;
}
.photo-ph-pc{opacity:1;
display:flex;
transform:translate(0%,0%);
max-width:clamp(250px,100vw,450px);
margin-top:0px;
height:auto;
object-fit:contain;
}
.onebox-container{display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}
}
.p11{max-width:450px;
margin:0 auto;
font-size:17px;
}
.p12{max-width:450px;
margin:0 auto 30px auto;
top:30px;
position:relative;
font-size:17px;
}
.p10{max-width:300px;
font-size:30px;
margin-top:-360px;
position:relative;
}
.twobox-right{margin-bottom:-200px;
}
.threebox{max-width:500px;
justify-content:center;
}
}

@media (max-width:459px){
.onebox-left{position:relative;
left:auto;
top:auto;
transform:translateY(-45%);
max-width:100%;
align-items:center;
text-align:center;
}
.p6{font-size:38px;
}
.p7{font-size:16px;
width:325px;
}
.p6{margin:0 auto 20px auto !important;
font-size:clamp(34px,6.5vw,52px) !important;
}
.p7{text-align:center !important;
margin:0 auto 40px auto !important;
font-size:clamp(13px,2.4vw,22px) !important;
max-width:600px !important;
}
@media (max-width:445px){.p10{font-size:24px;
}
}
@media (max-width:393px){.p10{font-size:17px;
}
}
.p11{max-width:450px;
margin:0 auto;
font-size:17px;
}
.p12{max-width:450px;
margin:0 auto 30px auto;
top:30px;
position:relative;
font-size:15px;
}
.p10{max-width:300px;
font-size:24px;
margin-top:-360px;
position:relative;
}
.twobox-right{margin-bottom:-200px;
}
.threebox{max-width:500px;
justify-content:center;
}
}

@media (max-width:450px){
}

@media (max-width:492px){
}

@media (max-width:376px){
}

@media (max-width:401px){
.p10{font-size:27px;
}
.p11{font-size:15px;
width:340px;
}
}

@media (max-width:400px){
}

@media (max-width:360px){
.p10{font-size:22px;
}
.p11{width:290px;
font-size:13px;
}
.p12{margin-top:15px;
width:290px;
font-size:13px;
}
}

.modal.hidden{display:none;
}

.platform-cardd.gradiend-container.active::before{top:102px;
height:calc(100vh - 102px);
z-index:996;
}

@media (max-width:435px){
}

@media (min-width:961px){
.gradiend-container.active::before{display:none !important;
}
}

/* =========================
   TUTORIAL ZONE (NEW CONCEPT)
   Replace your old video/steps CSS with this block
   ========================= */

.threebox.tutorial-zone{
  /* важно: если где-то глобально центрируется текст — убираем именно тут */
  text-align:left;
}

.tutorial-grid{
  max-width: 2240px;
  margin: -280px auto 90px;
  padding: clamp(16px, 3vw, 40px);

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
}

/* --- Base card (Apple-ish glass, without “box inside box”) --- */
.tcard{
  position: relative;
  border-radius: 22px;
  padding: clamp(16px, 2vw, 22px);

  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.20);

  box-shadow:
    0 26px 70px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #fff;
  font-family: "Poppins", sans-serif;
}

/* тонкая “премиум” засветка сверху (не выглядит как рамка) */
.tcard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(
    900px 260px at 20% 0%,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.00) 70%
  );
  opacity: .9;
}

.tcard-head{
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.tcard-kicker{
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.tcard-title{
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(22px, 1.6vw + 14px, 36px);
}

/* =========================
   VIDEO
   ========================= */

.tvideo-frame{
  position: relative;
  z-index: 1;

  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;

  background: rgba(0,0,0,0.18);
  box-shadow: 0 18px 52px rgba(0,0,0,0.28);
}

.tvideo-frame lite-youtube,
.tvideo-frame lite-youtube iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.tvideo-noscript{
  margin: 12px 0 0 0;
  font-size: 14px;
}

.tvideo-noscript a{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   STEPS (clean timeline feel)
   ========================= */

.qsteps{
  position: relative;
  z-index: 1;

  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 0;
}

.qstep{
  position: relative;
  padding: 14px 0 14px 56px;
}

.qstep + .qstep{
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* номер как аккуратный “node”, плюс тонкая вертикальная линия */
.qstep::before{
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 14px;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;

  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 28px rgba(0,0,0,0.18);
}

.qstep:not(:last-child)::after{
  content:"";
  position: absolute;
  left: 20px;
  top: 58px;
  bottom: -14px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.05) 100%
  );
  opacity: .8;
}

.qstep-text{
  margin: 0;
  font-size: clamp(15px, 0.55vw + 12px, 18px);
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}

/* CTA — строгий системный pill (не “кнопка из 2012”) */
.qstep-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 10px;
  padding: 6px 12px;
  border-radius: 999px;

  font-weight: 650;
  font-size: 0.95em;
  text-decoration: none;
  color: #fff;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);

  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.qstep-cta:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  opacity: .98;
}

.qstep-cta:focus-visible{
  outline: 3px solid rgba(255,255,255,0.45);
  outline-offset: 3px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px){
  .tutorial-grid{
    grid-template-columns: 1fr;
    margin: -300px auto 90px;
    padding: 0;
  }

  .tcard-head{
    text-align: center;
  }

  .qstep{
    padding-left: 54px;
  }
}

@media (max-width: 768px){
  .threebox.tutorial-zone{
    padding-left: 20px;
    padding-right: 20px;
  }

  .tutorial-grid{
    max-width: 520px; /* как у founder-mobile */
  }
}

/* твоя логика для мобил — оставляем */
@media (max-width: 480px){
  .threebox{
    padding: 160px 20px 60px;
  }

  .tcard{
    border-radius: 20px;
  }

  .tvideo-frame{
    border-radius: 14px;
  }
}

/* если у пользователя reduced motion */
@media (prefers-reduced-motion: reduce){
  .qstep-cta{ transition: none; }
}


/* =========================
   CTA Buttons (NEW SYSTEM)
   Classes used in HTML:
   - .cta-row
   - .cta-btn .cta-primary / .cta-secondary
   ========================= */

:root{
  --cta-blue-1:#2f6bff;
  --cta-blue-2:#1f55e6;
  --cta-blue-text:#1f55e6;
  --cta-white:#ffffff;
  --cta-shadow-1:rgba(0,0,0,.22);
  --cta-shadow-2:rgba(0,0,0,.30);
}

/* Layout: grid prevents random wrapping + keeps perfect symmetry */
.cta-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  align-items:center;
  width:100%;
  max-width:780px; /* 2 buttons * ~370 + gap */
}

/* Button base */
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  width:100%;
  height:clamp(58px, 4.6vw, 77px);
  padding:0 22px;

  border-radius:14px;
  font-weight:700;
  letter-spacing:.2px;
  font-size:clamp(16px, 1.15vw, 22px);

  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  box-shadow:0 12px 30px var(--cta-shadow-1);
}

.cta-btn:focus-visible{
  outline:3px solid rgba(47,107,255,.45);
  outline-offset:3px;
}

.cta-btn:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}

/* Primary */
.cta-primary{
  background:linear-gradient(180deg,var(--cta-blue-1) 0%, var(--cta-blue-2) 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
}

.cta-primary:hover{
  transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.03);
  box-shadow:0 18px 44px var(--cta-shadow-2);
}

/* Secondary */
.cta-secondary{
  background:var(--cta-white);
  color:var(--cta-blue-text);
  border:1px solid rgba(31,85,230,.22);
  box-shadow:0 11px 28px rgba(0,0,0,.20);
}

.cta-secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(31,85,230,.32);
  box-shadow:0 16px 38px rgba(0,0,0,.26);
}

/* Breakpoints: only 2 (stable, no “every 10px” jitter) */

@media (max-width:900px){
.cta-row{max-width:720px; gap:18px;}
}

@media (max-width:600px){
.cta-row{
    grid-template-columns:1fr;
    max-width:420px;
    justify-items:center;
  }
.cta-btn{
    height:clamp(54px, 12vw, 70px);
    font-size:clamp(15px, 4vw, 20px);
  }
}

/* Tiny-screen polish: add side breathing room so CTAs align with headline/text */

@media (max-width:420px){
.cta-row{
    width:calc(100% - 52px); /* 26px per side */
    margin-left:auto;
    margin-right:auto;
    padding:0;
  }
}

/* Stable CTA width on small screens (prevents edge-to-edge squeeze) */

@media (max-width:600px){
.cta-row{
    width:min(420px, calc(100vw - 48px)); /* 24px per side */
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:420px){
.cta-row{
    width:min(420px, calc(100vw - 52px)); /* 26px per side */
  }
}


@media (max-width:420px){
}
/* Visually hidden but accessible (SEO + a11y friendly) */
.sr-only{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  border:0 !important;
  clip-path:inset(50%) !important;
}
.dl-anchor{width:100%;position:relative}
.dl-stack{
  position:absolute;
  left:0;right:0;top:0;
  z-index:5;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-radius:18px;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;

  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,255,.90));
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  max-height:46px;
  padding:0;
  transform:translateY(-2px);
  opacity:.99;
  will-change:max-height,padding,transform,opacity;
}
.dl-stack .cta-btn{width:100%}

/* внутренние CTA — чуть "вдавленные", чтобы читалось как шаг 2 */
.dl-stack .cta-btn.cta-secondary{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(64,102,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70),0 10px 24px rgba(0,0,0,.10);
  border-radius:14px;
  height:46px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

/* "слипшийся" эффект: верхняя кнопка чуть доминирует, нижняя как будто выезжает из-под неё */
.dl-stack .cta-btn.cta-secondary:first-child{
  background:rgba(255,255,255,.80);
}
.dl-apk-wrap .cta-btn.cta-secondary{
  background:rgba(248,250,255,.78);
  margin-top:-6px;            /* визуально "из-под" */
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}

/* интерактив */
.dl-stack .cta-btn.cta-secondary:hover{filter:brightness(1.02)}
.dl-stack .cta-btn.cta-secondary:active{transform:translateY(1px);filter:brightness(.99)}
.dl-stack .cta-btn.cta-secondary:focus-visible{
  outline:2px solid rgba(255,255,255,.60);
  outline-offset:3px;
}

/* мягкий внутренний паддинг — чтобы выглядело как отдельный UI-блок */
.dl-stack.is-open{animation:dlExpand .26s ease-out both}
.dl-stack.is-open>.cta-btn{animation:dlIn .16s ease-out .10s both}
.dl-apk-wrap{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
}
.dl-stack.is-open .dl-apk-wrap{animation:dlSecond .22s ease-out .14s both}
.dl-stack.is-closing{animation:dlCollapse .24s ease-in both;pointer-events:none}
.dl-stack.is-closing .dl-apk-wrap{animation:dlSecondOut .16s ease-in both}

/* ===== твои keyframes НЕ трогаю ===== */
@keyframes dlExpand{
  from{max-height:46px;padding:0;transform:translateY(-2px)}
  to{max-height:136px;padding:10px;transform:translateY(0)}
}
@keyframes dlIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes dlSecond{
  from{max-height:0;opacity:0;transform:translateY(-10px)}
  to{max-height:70px;opacity:1;transform:translateY(0)}
}
@keyframes dlCollapse{
  from{max-height:136px;padding:10px;transform:translateY(0);opacity:1}
  to{max-height:46px;padding:0;transform:translateY(-2px);opacity:.98}
}
@keyframes dlSecondOut{
  from{max-height:60px;opacity:1;transform:translateY(0)}
  to{max-height:0;opacity:0;transform:translateY(-10px)}
}

@media (max-width:768px){
  .dl-stack{border-radius:16px;max-height:44px}
  .dl-stack .cta-btn.cta-secondary{height:44px;border-radius:13px}
  .dl-apk-wrap .cta-btn.cta-secondary{margin-top:0px}
  @keyframes dlExpand{
    from{max-height:44px;padding:0;transform:translateY(-2px)}
    to{max-height:132px;padding:10px;transform:translateY(0)}
  }
  @keyframes dlSecond{
    from{max-height:0;opacity:0;transform:translateY(-10px)}
    to{max-height:68px;opacity:1;transform:translateY(0)}
  }
  @keyframes dlCollapse{
    from{max-height:132px;padding:10px;transform:translateY(0);opacity:1}
    to{max-height:44px;padding:0;transform:translateY(-2px);opacity:.98}
  }
}

@media (prefers-reduced-motion:reduce){
  .dl-stack.is-open,.dl-stack.is-closing,.dl-stack.is-open>.cta-btn,.dl-stack.is-open .dl-apk-wrap,.dl-stack.is-closing .dl-apk-wrap{animation:none!important}
  .dl-stack{transform:none!important}
}
/* =========================
   Founder cinematic block (MOBILE ONLY) + slideshow
   Refactor: stable breakpoints + no nested @media
   ========================= */

.founder-mobile{
  display:none; /* enabled on <=768px */
}

/* Hide desktop visual up to 1322px to avoid layout conflicts (your intended rule) */
@media (max-width: 1322px){
  .twobox .imgp1{ display:none; }
}

/* ===== MOBILE (<=768): cinematic card + slider ===== */
@media (max-width: 768px){

  .founder-mobile{
    display:block;
    position:relative;
    isolation:isolate;
    color:#fff;

    width:min(520px, calc(100vw - 40px));
    margin:-120px auto 210px auto;  /* <-- baseline cinematic offset */
    aspect-ratio: 3 / 4;
    border-radius:18px;
    overflow:hidden;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
  }

  /* media layer */
  .founder-mobile__media{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    touch-action: pan-y;
  }

  .founder-mobile__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:50% 18%;

    opacity:0;
    transform: translate3d(14px, 0, 0) scale(1.035);
    transform-origin: 50% 30%;

    will-change: opacity, transform;
    backface-visibility:hidden;

    transition:
      opacity .52s ease,
      transform .95s cubic-bezier(.16, 1, .3, 1);

    pointer-events:none;
  }

  .founder-mobile__img.is-active{
    opacity:1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* scrims */
  .founder-mobile::before,
  .founder-mobile::after{
    content:"";
    position:absolute;
    left:0; right:0;
    pointer-events:none;
    z-index:1;
  }

  .founder-mobile::before{
    top:0;
    height:42%;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.18) 45%,
      rgba(0,0,0,0.00) 100%
    );
  }

  .founder-mobile::after{
    bottom:0;
    height:55%;
    background: linear-gradient(
      0deg,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.28) 50%,
      rgba(0,0,0,0.00) 100%
    );
  }

  /* overlays */
  .founder-mobile__top,
  .founder-mobile__bottom{
    position:absolute;
    left:0; right:0;
    z-index:2;
    padding-left:18px;
    padding-right:18px;
  }

  .founder-mobile__top{
    top:0;
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom:10px;
  }

  .founder-mobile__title{
    margin:0;
    font-family:"Poppins", sans-serif;
    font-weight:600;
    font-size:clamp(26px, 7vw, 44px);
    line-height:1.08;
    letter-spacing:0.2px;
    text-shadow:0 10px 30px rgba(0,0,0,0.45);
  }

  .founder-mobile__bottom{
    bottom:0;
    padding-top:12px;
    padding-bottom: 16px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .founder-mobile__manifest{
    margin:0;
    font-size:clamp(14px, 3.9vw, 17px);
    line-height:1.45;
    max-width:34ch;
    min-height:3.2em;
    text-shadow:0 10px 28px rgba(0,0,0,0.55);
  }

  .founder-mobile__sign{
    height:34px;
    display:flex;
    align-items:flex-start;
  }

  .founder-mobile__sign img{
    height:34px;
    width:auto;
    max-width:220px;
    opacity:0.95;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
  }

  .founder-mobile__sign.is-empty img{
    opacity:0;
  }

  /* text fade for JS class */
  .founder-mobile__title,
  .founder-mobile__manifest,
  .founder-mobile__sign{
    will-change: opacity, transform;
    transition: opacity .24s ease, transform .44s cubic-bezier(.16, 1, .3, 1);
  }

  .founder-mobile.fm-text-out .founder-mobile__title,
  .founder-mobile.fm-text-out .founder-mobile__manifest,
  .founder-mobile.fm-text-out .founder-mobile__sign{
    opacity:0;
    transform: translate3d(0, 6px, 0);
  }

  /* hide desktop layout on mobile */
  .twobox .imgp1{ display:none !important; }
  .twobox .twobox-right{
    display:none !important;
    position:static !important;
    top:auto !important;
    left:auto !important;
    margin:0 !important;
  }

  .twobox{
    padding:70px 20px 30px !important;
    gap:0 !important;
  }

  /* dots (above scrims) */
  .fm-dots{
    position:absolute;
    right:18px;
    bottom: 16px;
    z-index:4;
    pointer-events:auto;

    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;

    border-radius:999px;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.16);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .fm-dot{
    position:relative;
    width:7px;
    height:7px;
    border-radius:999px;
    border:0;
    padding:0;
    background:rgba(255,255,255,0.38);
    cursor:pointer;
    outline:none;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .25s ease;
  }

  .fm-dot:active{ transform: scale(0.92); }

  .fm-dot.is-active{
    width:18px;
    background:rgba(255,255,255,0.22);
    overflow:hidden;
  }

  .fm-dot__fill{
    position:absolute;
    inset:0;
    width:0%;
    border-radius:999px;
    background:rgba(255,255,255,0.92);
  }

  .fm-dot.is-active .fm-dot__fill{
    animation: fmFill var(--fmDur, 4200ms) linear forwards;
  }

  @keyframes fmFill{
    from{ width:0%; }
    to{ width:100%; }
  }
}

@media (max-width: 480px){
.founder-mobile{
    width:min(520px, calc(100vw - 40px));
    margin:-260px auto 128px auto;  /* <-- baseline cinematic offset */
  }

}
/* Reduced motion — NOT nested (stable parsing) */
@media (prefers-reduced-motion: reduce){
  .founder-mobile__img{
    transition:none !important;
    transform:none !important;
  }
  .founder-mobile__title,
  .founder-mobile__manifest,
  .founder-mobile__sign{
    transition:none !important;
    transform:none !important;
  }
  .fm-dot.is-active .fm-dot__fill{
    animation:none !important;
    width:100% !important;
  }
}

/* ===== DESKTOP (>=1323): show founder image ===== */
@media (min-width: 1323px){
  .twobox .imgp1{
    display:block;
    background-image: url("images/Other/founder-mobile-3x4.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 35%;
  }
}
/* =========================
   RELIABLE PREDICTIONS (tuned)
   ========================= */

.rp-section{ width:100%; }

.rp-wrap{
  width:100%;
  max-width:1800px;
  margin:0 auto;
  padding:100px 60px;
  box-sizing:border-box;
}

.rp-grid{
  display:grid;
  grid-template-columns:minmax(360px,0.92fr) minmax(460px,1.08fr);
  gap:clamp(28px,4vw,60px);
  align-items:center;

  grid-template-areas:
    "visual title"
    "visual copy";
}

.rp-titleblock{ grid-area:title; }
.rp-visual{ grid-area:visual; position:relative; display:flex; justify-content:center; }
.rp-copy{ grid-area:copy; }

.rp-title{
  margin:0;
  font-weight:650;
  letter-spacing:-0.02em;
  line-height:1.06;
  font-size:clamp(34px,1.8vw + 18px,54px);
  color:#fff;
  font-family:"Poppins",sans-serif;
}

.rp-lead,
.rp-more{
  margin:0 0 14px 0;
  font-size:clamp(15px,0.55vw + 12px,18px);
  line-height:1.58;
  color:rgba(255,255,255,0.92);
  font-family:"Poppins",sans-serif;
}

.rp-more{ color:rgba(255,255,255,0.86); }

.rp-cta{ margin-top:18px; }

/* Было слишком крупно: 720px / 42vw
   Делаем примерно в 1.38 раза меньше */
.rp-phone{
  position:relative;
  width:min(520px, 32vw);
  margin:0;
}

.rp-phone-img{
  width:100%;
  height:auto;
  display:block;
  opacity:0;
  filter:none;
  transform: translateZ(0);
}
.rp-phone-img.rp-img-ready{
  opacity:1;
  filter:drop-shadow(0 26px 70px rgba(0,0,0,0.34));
  transition: opacity .18s ease;
}

@media (min-width: 769px) and (max-width: 1322px){
  /* прячем визуал как у founder */
  .rp-visual{ display:none; }

  /* делаем одну колонку */
  .rp-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy";
    align-items: start;
  }

  /* центрируем и ограничиваем ширину как “читабельную колонку” */
  .rp-titleblock,
  .rp-copy{
    position: static !important;
    text-align: center;
    width: 100%;
    max-width: 520px;              /* <-- ключ: колонка уже, выглядит гармонично */
    margin-left: auto;
    margin-right: auto;
  }

  /* аккуратные вертикальные отступы (похоже на твой p10/p11/p12) */
  .rp-titleblock{ margin: 0 auto -16px auto; }
  .rp-copy{ margin: 0 auto 0 auto; }

  /* чтобы сами параграфы не “растягивались” */
  .rp-lead,
  .rp-more{
    margin-left: auto;
    margin-right: auto;
  }

  /* CTA по центру (сейчас у тебя это и бесит) */
  .rp-cta{
    width: 100%;
    max-width: 920px; 
    margin: 22px auto 0 auto;

    justify-content: center;       /* <-- если .cta-row flex, это сработает */
    align-items: center;
  }
}



/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){
  .rp-wrap{
    margin:-160px auto 10px auto;  /* <-- baseline cinematic offset */
    padding:64px 20px 86px;
  }

  .rp-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "visual"
      "copy";
    gap:14px; /* более “плотно”, ровнее */
  }

  .rp-titleblock,
  .rp-copy{
    text-align:center;
  }

  /* Заголовок чуть больше и “выше” по ощущению */
  .rp-title{
    font-size:clamp(26px, 7.2vw, 38px);
    white-space:nowrap;
    margin-bottom:2px;
  }

  /* Ровнее расстояния title↔image↔copy */
  .rp-visual{ margin-top:4px; }
  .rp-copy{ margin-top:26px; }

  .rp-phone{
    width:min(520px, calc(100vw - 40px));
    margin:0 auto;
  }

  .rp-more{ display:none; }

  .rp-cta{
    margin-left:auto;
    margin-right:auto;
    margin-top:44px;
  }
}

@media (max-width: 480px){
  .rp-title{ font-size:clamp(25px, 7.6vw, 36px); }
}
/* =========================
   SIMPLE GRAY FOOTER
   ========================= */
.sf-footer{
  width:100%;
  background:#2B2F36;
  border-top:1px solid rgba(255,255,255,0.14);
}

.sf-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:22px 20px 18px;
  box-sizing:border-box;
  text-align:left;
}

.sf-brand{
  display:flex;
  align-items:left;
  justify-content:left;
  gap:10px;
  margin-bottom:14px;
}

.sf-logo{
  display:block;
  border-radius:999px;
}

.sf-name{
  font-family:"Poppins",sans-serif;
  font-weight:650;
  letter-spacing:-0.01em;
  color:#fff;
  font-size:16px;
}

.sf-legal{
  display:flex;
  justify-content:left;
  flex-wrap:wrap;
  gap:10px 18px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,0.16);
  border-bottom:1px solid rgba(255,255,255,0.16);
}

.sf-link{
  font-family:"Poppins",sans-serif;
  font-size:12.5px;
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  text-underline-offset:3px;
}

.sf-link:hover{
  text-decoration:underline;
  color:#fff;
}

.sf-link:focus-visible{
  outline:3px solid rgba(255,255,255,0.55);
  outline-offset:3px;
  border-radius:10px;
}

.sf-bottom{
  margin-top:12px;
}

.sf-line{
  font-family:"Poppins",sans-serif;
  font-size:12px;
  line-height:1.5;
  color:rgba(255,255,255,0.85);
}

.sf-line + .sf-line{ margin-top:4px; }

.sf-mail{
  color:#fff;
  text-decoration:none;
  text-underline-offset:3px;
}

.sf-mail:hover{ text-decoration:underline; }

/* чуть компактнее на очень маленьких */
@media (max-width:380px){
  .sf-wrap{ padding:20px 16px 16px; }
  .sf-legal{ gap:8px 14px; }
}