:root {
    --bg: linear-gradient(180deg, #35169D 0%, #190B41 100%);
    --fg: #FEC94A;
    --muted: rgba(255,255,255,.7);
    --muted2: rgba(255,255,255,.6);
    --card: rgba(255,255,255,.06);
    --ring: rgba(255,255,255,.12);
    --accent:#6d48ff;
    --accent-2:#7a55ff;
    --primary:#f59e0b; /* amber-500 */
  }
  
  * { box-sizing: border-box; margin: 0; padding: 0; }
  
  /* ключевая часть */
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* убираем горизонтальную прокрутку */
    background: var(--bg, linear-gradient(180deg, #35169D 0%, #190B41 100%));
    color: white;
    font-family: 'Rubik Wet Paint', sans-serif;
    scroll-behavior: smooth;
   
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  
  body {
    min-height: 100vh;            /* фон будет на всю высоту */
    background: none;
    background-attachment: fixed; /* градиент не «съезжает» при скролле */
    background-repeat: no-repeat;
    background-size: cover;       /* растягивает фон */
    color: var(--fg);
    font-family: 'Rubik Wet Paint', cursive;
    line-height: 1.6;
  }
  
  /* ---------- Общая сетка ---------- */
  .aip-root{ position:relative; min-height:100vh; overflow-x:hidden; }
  
  /* Псевдоэлемент рисует фон на всю область окна и остаётся позади контента */
  .aip-root::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    transform: translateY(calc(var(--scroll, 0px) / 10));
    /* опционально */
    will-change: transform;
  }
  
  /* ---------- NAV в одном стиле ---------- */
  .aip-nav{
    max-width:1200px; margin:0 auto; padding:24px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .aip-brand{ display:flex; align-items:center; gap:12px; }
  .aip-badge{
    display:grid; place-items:center; padding:10px; border-radius:16px;
    background: transparent;
    border:1px solid var(--fg);
    box-shadow:none;
  }
  .aip-badge-icon{ width:24px; height:24px; color:var(--fg); }
  .aip-brand-text{ font-weight:700; opacity:.95; }
  
  /* вторичная кнопка — только обводка и тот же цвет */
  .aip-ghost-btn{
    padding:10px 16px; border-radius:999px;
    background:transparent;
    border:1px solid var(--fg);
    color:var(--fg); text-decoration:none; font-weight:700;
  }
  .aip-ghost-btn:hover{ background:rgba(254,201,74,.1); }
  
  /* ---------- HERO и типографика в одном стиле ---------- */
  .aip-hero{
    max-width:1200px; margin:0 auto; padding:24px 24px 12px;
    display:grid; grid-template-columns:1fr; gap:40px;
  }
  @media(min-width:768px){
    .aip-hero{ grid-template-columns:1.1fr .9fr; gap:64px; padding-top:8px; padding-bottom:24px; }
  }
  
  .aip-title{
    font-size:44px; line-height:1.05; font-weight:900;
    -webkit-text-stroke: 4px #462A99;
    text-shadow:0 4px 16px rgba(0,0,0,.05);
  }
  @media(min-width:1024px){ .aip-title{ font-size:64px; }}
  
  .aip-h2,
  .aip-sub,
  .aip-desc{
    font-size:16px;
    font-weight:400;
    margin:12px 0;
    color:var(--fg);
    opacity:.95;
  }
  
  .aip-h2{
    margin-top:20px;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-left:3px solid var(--fg);
    padding-left:10px;
  }
  
  /* список */
  .aip-feature-list{
    list-style:none; padding:0; margin:12px 0 0;
    display:flex; flex-direction:column; gap:10px;
  }
  .aip-feature{
    position:relative; padding-left:18px; margin:0;
    color:var(--fg);
  }
  .aip-feature::before{
    content:"•"; position:absolute; left:0; top:0;
    line-height:1.2; font-weight:700; color:var(--fg);
  }
  
  /* ---------- CTA и кнопки ---------- */
  .aip-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
  
  .aip-store-btn{
    display:inline-flex; align-items:center; gap:10px;
    border-radius:16px; padding:12px 18px;
    background:#522EB7; color:var(--fg);
    text-decoration:none; font-weight:900; letter-spacing:.02em;
    transition:transform .15s ease, filter .2s ease;
  }
  .aip-store-btn:hover{ transform:scale(1.1); color:var(--fg); }
  .aip-store-btn:active{ transform:scale(.99); color:var(--fg); }
  .aip-apple{ width:22px; height:22px; }
  .aip-hint{ font-size:12px; color:rgba(254,201,74,.75); }
  
  /* ---------- Иконка/карточка приложения ---------- */
  .aip-icon-wrap{ width:100%; max-width:520px; margin:0 auto; }
  .aip-icon-card{
    border-radius:28px; padding:14px;
    background:transparent;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
  }
  .aip-icon{
    width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:22px;
    background: radial-gradient(120% 120% at 20% 0%, rgba(254,201,74,.18), rgba(254,201,74,.08), transparent);
  }
  
  /* ---------- Скриншоты ---------- */
  .aip-shots{ max-width:1200px; margin:0 auto; padding:0 24px 80px; }
  .aip-shots .aip-h2 { margin-bottom:10px; }
  .aip-shots-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  @media(min-width:768px){ .aip-shots-grid{ grid-template-columns:repeat(4,1fr); gap:16px; } }
  .aip-shot{
    position:relative; overflow:hidden; border-radius:22px;
    background:transparent;
  }
  .aip-shot-img{ width:100%; aspect-ratio:9/19.5; object-fit:cover; transition:transform .3s ease; display:block; }
  .aip-shot:hover .aip-shot-img{ transform:scale(1.04); }
  
  /* ---------- Баннер внутри секции ---------- */
  .aip-banner{
    margin-top:28px;
    padding:18px 20px;
    border:1px solid var(--fg);
    border-radius:18px;
    background:rgba(255,255,255,.04);
  }
  .aip-h3{ font-size:20px; margin-bottom:6px; }
  .aip-banner-sub{ font-size:14px; opacity:.9; }
  
  /* ---------- Фоновые «glow» (по желанию) ---------- */
  .aip-glow{
    position:fixed; pointer-events:none; filter:blur(60px); opacity:.5; mix-blend-mode:screen;
  }
  .aip-glow-1{ width:380px; height:380px; background:#6d48ff; top:-60px; left:-60px; }
  .aip-glow-2{ width:420px; height:420px; background:#f59e0b; bottom:10%; right:-80px; }
  .aip-glow-3{ width:300px; height:300px; background:#7a55ff; bottom:-80px; left:15%; }