:root{
          --bgTop: #FBF7F0;
          --bgMid: #F5EDE1;
          --bgBot: #EFE4D4;

          --card: rgba(255,255,255,.74);
          --card2: rgba(255,255,255,.92);

          --text: #14110D;
          --muted: rgba(20,17,13,.62);
          --line: rgba(20,17,13,.10);

          --shadow: 0 18px 55px rgba(0,0,0,.10);
          --shadow2: 0 10px 25px rgba(0,0,0,.08);
          --r: 22px;

          /* зелёный только как акцент */
          --accent: #1FAE5B;
          --accent2:#17C964;

          /* камень */
          --stoneInk: #6E6357;
          --stoneInk2:#8A7F73;
        }

                *{box-sizing:border-box}
                html,body{height:100%}
                body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
  color:var(--text);
  background:
    radial-gradient(1100px 640px at 18% 8%, rgba(31,174,91,.08), transparent 60%),
    radial-gradient(900px 520px at 85% 18%, rgba(23,201,100,.06), transparent 60%),
    linear-gradient(180deg, var(--bgTop), var(--bgMid) 55%, var(--bgBot));
  overflow-x:hidden;
}


                /* subtle pattern */
 body:before{
  content:"";
  position:fixed;
  inset:-2px;
  pointer-events:none;
  z-index:-1;

  background-image: url("/bg.svg");
  background-repeat: repeat;
  background-size: 520px 520px; /* крупнее = спокойнее, мельче = плотнее */
  opacity: 0.48;                /* “каменный” характер */

  /* делаем теплее и мягче */
  filter: sepia(0.22) saturate(1.05) contrast(1.02);
}


                a{color:inherit}
                .wrap{max-width:1180px;margin:0 auto;padding:0 20px}

                /* top bar */
                .top{
                  position:sticky; top:0; z-index:20;
                  backdrop-filter: blur(14px);
                  background: linear-gradient(180deg, rgba(251,250,247,.88), rgba(251,250,247,.55));
                  border-bottom:1px solid rgba(17,19,23,.08);
                }
                .top .row{
                  height:64px; display:flex; align-items:center; justify-content:space-between;
                  gap:14px;
                }
                .brand{
                  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;
                }
                .logo{
  width:34px;
  height:34px;
  border-radius:12px;
  background: rgb(255 0 0 / 85%);
  border:1px solid rgba(20,17,13,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.logo img{
  width:82%;
  height:82%;
  object-fit:contain;
}
                .nav{
                  display:flex; gap:14px; align-items:center; color:var(--muted);
                  font-weight:600; font-size:14px;
                }
                .nav a{
                  text-decoration:none;
                  padding:8px 10px;
                  border-radius:12px;
                }
                .nav a:hover{background:rgba(17,19,23,.05); color:rgba(17,19,23,.85)}
                .ctaTop{
                  display:flex; gap:10px; align-items:center;
                }

                /* buttons */
                .btn{
                  display:inline-flex; align-items:center; justify-content:center;
                  gap:10px;
                  padding:12px 16px;
                  border-radius:16px;
                  border:1px solid rgba(17,19,23,.10);
                  background: rgba(255,255,255,.70);
                  box-shadow: var(--shadow2);
                  text-decoration:none;
                  font-weight:800;
                  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
                  user-select:none;
                  white-space:nowrap;
                }
                .btn:hover{transform: translateY(-1px); box-shadow: 0 16px 35px rgba(0,0,0,.12)}
                .btnPrimary{
  border:1px solid rgba(31,174,91,.22);
  background: linear-gradient(135deg, #1FAE5B, #1AAE62);
  color:white;
  box-shadow: 0 18px 45px rgba(31,174,91,.18);
}

                .btnPrimary:hover{box-shadow: 0 22px 55px rgba(31,174,91,.28)}
                .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(138,127,115,.10);
  border:1px solid rgba(138,127,115,.20);
  color: rgba(20,17,13,.78);
  font-weight:900;
  font-size:13px;
}


                /* hero */
                .hero{
  padding:46px 0 22px;
  position:relative;
}

.hero:after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:280px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), transparent);
  pointer-events:none;
}

                .heroGrid{
                  display:grid;
                  grid-template-columns: 1.1fr .9fr;
                  gap:28px;
                  align-items:center;
                }
                h1{
                  margin:14px 0 10px;
                  font-size:52px;
                  line-height:1.04;
                  letter-spacing:-.9px;
                }
                .lead{
                  margin:0;
                  color:rgba(17,19,23,.72);
                  font-size:18px;
                  line-height:1.45;
                  max-width:56ch;
                }
                .heroActions{
                  margin-top:18px;
                  display:flex;
                  gap:12px;
                  flex-wrap:wrap;
                  align-items:center;
                }
                .hint{
                  color:rgba(17,19,23,.55);
                  font-weight:700;
                  font-size:13px;
                  margin-top:10px;
                }

                /* phone mock */
                .phoneStack{
                  position:relative;
                  min-height:560px;
                }
                .phone{
                  position:absolute;
                  width:300px;
                  border-radius:30px;
                  overflow:hidden;
                  box-shadow: var(--shadow);
                  border:1px solid rgba(17,19,23,.10);
                  background: rgba(255,255,255,.9);
                }
                .phone img{display:block; width:100%; height:auto}
                .p1{ right:0; top:0; transform: rotate(2deg); }
                .p2{ left:26px; top:72px; transform: rotate(-2deg); }
                .p3{ right:44px; top:300px; transform: rotate(1deg); width:265px; opacity:.98; }
                .glow{
                  position:absolute; inset:-30px -30px -30px -30px;
                  background: radial-gradient(420px 220px at 70% 20%, rgba(31,174,91,.20), transparent 55%),
                              radial-gradient(420px 220px at 20% 70%, rgba(23,201,100,.14), transparent 55%);
                  filter: blur(2px);
                  z-index:-1;
                }

                /* sections */
                section{padding:26px 0}
                .cards3{
                  display:grid;
                  grid-template-columns: repeat(3, 1fr);
                  gap:16px;
                }
                .card{
  border-radius: var(--r);
  background: rgba(255,255,255,.70);
  border:1px solid rgba(20,17,13,.10);
  box-shadow: var(--shadow2);
  padding:18px 18px;
  backdrop-filter: blur(12px);
}

                .card h3{
                  margin:0 0 6px;
                  font-size:16px;
                  letter-spacing:-.2px;
                }
                .card p{
                  margin:0;
                  color:rgba(17,19,23,.68);
                  line-height:1.45;
                  font-weight:600;
                  font-size:14px;
                }
                .icon{
                  width:40px;height:40px;border-radius:14px;
                  display:grid;place-items:center;
                  background: rgba(31,174,91,.12);
                  border:1px solid rgba(31,174,91,.20);
                  margin-bottom:10px;
                }

                .split{
                  display:grid;
                  grid-template-columns: 1fr 1fr;
                  gap:16px;
                }
                .big{
                  padding:22px;
                }
                .bigTitle{
                  display:flex; align-items:center; justify-content:space-between; gap:10px;
                  margin-bottom:10px;
                }
                .bigTitle h2{
                  margin:0;
                  font-size:24px;
                  letter-spacing:-.3px;
                }
                ul.clean{
                  list-style:none;
                  padding:0; margin:12px 0 0;
                  display:grid; gap:10px;
                }
                ul.clean li{
                  display:flex; gap:10px; align-items:flex-start;
                  color:rgba(17,19,23,.74);
                  font-weight:700;
                  line-height:1.35;
                }
                .dot{
                  margin-top:6px;
                  width:10px;height:10px;border-radius:999px;
                  background: linear-gradient(135deg, var(--green), var(--green2));
                  flex: 0 0 10px;
                  box-shadow: 0 8px 18px rgba(31,174,91,.25);
                }
                .subnote{
                  margin-top:12px;
                  color:rgba(17,19,23,.55);
                  font-weight:700;
                  font-size:13px;
                }

                /* download */
                .download{
                  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
                  border:1px solid rgba(17,19,23,.10);
                  box-shadow: var(--shadow);
                  border-radius: 28px;
                  padding:22px;
                  display:grid;
                  grid-template-columns: 1fr auto;
                  gap:18px;
                  align-items:center;
                  overflow:hidden;
                  position:relative;
                }
                .download:before{
                  content:"";
                  position:absolute; inset:-40px -40px -40px -40px;
                  background:
                    radial-gradient(520px 240px at 15% 20%, rgba(31,174,91,.18), transparent 55%),
                    radial-gradient(520px 240px at 85% 70%, rgba(23,201,100,.14), transparent 55%);
                  z-index:-1;
                }
                .download h2{margin:0 0 6px; font-size:26px; letter-spacing:-.4px}
                .download p{margin:0; color:rgba(17,19,23,.66); font-weight:700; line-height:1.4}
                .storeBtns{
                  display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;
                }
                .storeBtns img{
                  height:56px; width:auto;
                  border-radius:14px;
                  box-shadow: var(--shadow2);
                  border:1px solid rgba(17,19,23,.08);
                  background:white;
                  display:block;
                  transition: transform .15s ease, box-shadow .15s ease;
                }
                .storeBtns a:hover img{transform: translateY(-1px); box-shadow: 0 16px 35px rgba(0,0,0,.12)}

                /* footer */
                .logo--footer{
  width:30px;
  height:30px;
  border-radius:10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

.logo--footer img{
  width:80%;
  height:80%;
  object-fit:contain;
  opacity:0.95;
}

                footer{
                  padding:26px 0 36px;
                  color: rgba(17,19,23,.60);
                  font-weight:700;
                  font-size:14px;
                }
                .footGrid{
                  display:grid;
                  grid-template-columns: 1fr 1fr;
                  gap:12px;
                  border-top:1px solid rgba(17,19,23,.10);
                  padding-top:18px;
                }
                .mono{font-variant-numeric: tabular-nums}
                .small{font-size:13px; color: rgba(17,19,23,.55); font-weight:700}

                /* responsive */
                @media (max-width: 980px){
                  .heroGrid{grid-template-columns: 1fr; }
                  .phoneStack{min-height:520px}
                  .p1{position:relative; right:auto; top:auto; margin-left:auto; transform: rotate(1deg)}
                  .p2,.p3{display:none}
                  h1{font-size:44px}
                  .cards3{grid-template-columns: 1fr; }
                  .split{grid-template-columns: 1fr; }
                  .download{grid-template-columns: 1fr; }
                  .storeBtns{justify-content:flex-start}
                  .nav{display:none}
                }