:root{ --bg:#f6f7fb; --bg2:#eef1f6; --card:#ffffff; --text:#0f172a; --muted:#5b6676; --muted2:#7b8797; --line:rgba(15,23,42,.10); --line2:rgba(15,23,42,.08); --accent:#ff6a00; --accent2:#ffb200; --ok:#12b981; --radius:26px; --radius2:20px; --shadow: 0 32px 90px rgba(15,23,42,.10); --shadow2: 0 16px 44px rgba(15,23,42,.10); --shadow3: 0 10px 22px rgba(15,23,42,.08); --max:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background: radial-gradient(1100px 700px at 16% 8%, rgba(255,106,0,.18), transparent 60%), radial-gradient(1000px 650px at 86% 14%, rgba(255,178,0,.14), transparent 60%), radial-gradient(900px 700px at 52% 100%, rgba(18,185,129,.10), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg2)); overflow-x:hidden; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .container{max-width:var(--max);margin:0 auto;padding:0 18px} /* subtle premium noise */ .noise{ position:fixed; inset:0; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode:multiply; z-index:0; } /* atoms */ .pill{ display:inline-flex;align-items:center;gap:8px; padding:8px 12px;border-radius:999px; border:1px solid var(--line2); background:rgba(255,255,255,.78); color:var(--muted); font-size:12px; box-shadow:0 10px 22px rgba(15,23,42,.06); user-select:none; } .dot{ width:8px;height:8px;border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 0 0 6px rgba(255,106,0,.12); } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 14px;border-radius:14px; font-weight:900;font-size:13px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.92); color:var(--text); box-shadow:var(--shadow3); transition:.18s ease; cursor:pointer; white-space:nowrap; } .btn:hover{transform:translateY(-1px);background:#fff} .btn:active{transform:translateY(0) scale(.99)} .btnSmall{padding:10px 12px;border-radius:12px;font-size:12px} .btnPrimary{ border-color:rgba(255,106,0,.40); background:linear-gradient(135deg, rgba(255,106,0,.98), rgba(255,178,0,.95)); color:#111; box-shadow:0 18px 44px rgba(255,106,0,.16); } .btnPrimary:hover{filter:saturate(1.07)} .btnGhost{ background:rgba(255,255,255,.72); border-color:rgba(15,23,42,.10); box-shadow:none; } /* nav */ .nav{ position:sticky;top:0;z-index:999; background:rgba(246,247,251,.62); backdrop-filter:blur(16px); border-bottom:1px solid rgba(15,23,42,.08); } .navInner{display:flex;align-items:center;gap:14px;padding:12px 0} .brand{display:flex;align-items:center;gap:10px} .logo{ width:36px;height:36px;border-radius:14px; background: radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.72), transparent 55%), linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 14px 30px rgba(255,106,0,.22); } .brandTitle{font-weight:900;font-size:13px;line-height:1.1;letter-spacing:.2px} .brandSub{font-size:11px;color:rgba(15,23,42,.55);font-weight:700} .menu{margin-left:auto;display:flex;gap:10px;align-items:center} .menu a{ color:var(--muted); font-size:13px; padding:8px 10px;border-radius:12px; transition:.2s; } .menu a:hover{color:var(--text);background:rgba(15,23,42,.05)} .burger{ display:none;margin-left:auto; width:44px;height:44px;border-radius:14px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.9); box-shadow:var(--shadow3); align-items:center;justify-content:center; cursor:pointer; } .burger span{ width:18px;height:2px;background:var(--text); position:relative;display:block;border-radius:2px; } .burger span:before,.burger span:after{ content:"";position:absolute;left:0; width:18px;height:2px;background:var(--text); border-radius:2px; } .burger span:before{top:-6px} .burger span:after{top:6px} .mobileMenu{ display:none;padding:12px 0 16px; border-top:1px solid rgba(15,23,42,.08); } .mobileMenu a{ display:block;padding:10px 12px;border-radius:12px; color:var(--muted); } .mobileMenu a:hover{background:rgba(15,23,42,.05);color:var(--text)} .mobileMenu .row{display:flex;gap:10px;padding:10px 0 0} .mobileMenu .row .btn{flex:1} /* sections */ section{padding:34px 0; position:relative; z-index:1;} .sectionHead{ display:flex;align-items:flex-end;justify-content:space-between; gap:14px;margin-bottom:14px; } .h2{margin:0;font-size:30px;letter-spacing:-.45px} .sub{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6;max-width:66ch} /* hero */ .hero{padding:58px 0 18px; position:relative; z-index:1;} .heroGrid{ display:grid; grid-template-columns: 1.08fr .92fr; gap:18px; align-items:stretch; } .panel{ border:1px solid rgba(15,23,42,.10); background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; position:relative; } .panel:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(560px 300px at 0% 0%, rgba(255,106,0,.14), transparent 60%), radial-gradient(560px 300px at 100% 12%, rgba(255,178,0,.12), transparent 60%), radial-gradient(760px 320px at 50% 120%, rgba(18,185,129,.10), transparent 62%); opacity:.9; pointer-events:none; } .panel > *{position:relative;z-index:2} .heroLeft{padding:30px} .h1{ margin:14px 0 12px; font-size:48px; line-height:1.02; letter-spacing:-1.15px; } .grad{ background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .lead{ margin:0; color:var(--muted); font-size:15px; line-height:1.65; max-width:64ch; } .heroActions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .heroMeta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px} .metaPill{ display:inline-flex;align-items:center;gap:8px; padding:9px 12px;border-radius:999px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.86); box-shadow:0 10px 22px rgba(15,23,42,.06); } /* right: preview + qr (premium) */ .heroRight{padding:18px;display:flex;flex-direction:column;gap:12px} .previewTop{display:flex;gap:12px} .phone{ flex:1; border-radius:24px; border:1px solid rgba(15,23,42,.10); background:linear-gradient(180deg,#fff,#f7f8fd); box-shadow:var(--shadow2); overflow:hidden; min-height:320px; position:relative; } .phoneHeader{ height:50px; display:flex; align-items:center; padding:0 14px; gap:8px; border-bottom:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.96); font-size:12px; color:rgba(15,23,42,.78); } .circle{width:10px;height:10px;border-radius:50%;background:rgba(15,23,42,.14)} .addr{margin-left:auto;color:rgba(15,23,42,.55);font-size:11px} .phoneBody{padding:12px 12px 14px} .thumbRow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .thumb{ border-radius:18px; border:1px solid rgba(15,23,42,.10); background: radial-gradient(90px 60px at 20% 10%, rgba(255,106,0,.12), transparent 60%), linear-gradient(180deg,#fff,#fbfcff); padding:12px; min-height:110px; display:flex;flex-direction:column;justify-content:space-between; box-shadow:0 12px 22px rgba(15,23,42,.08); transition:.18s; } .thumb:hover{transform:translateY(-2px)} .thumb b{font-size:13px} .thumb span{font-size:11px;color:rgba(15,23,42,.58)} .thumb .price{margin-top:10px;font-weight:900;font-size:18px;letter-spacing:-.2px} .thumb .price i{font-style:normal;color:rgba(15,23,42,.55);font-weight:800;margin-right:6px;font-size:12px} .qrCard{ width:198px; border-radius:24px; border:1px solid rgba(15,23,42,.10); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80)); box-shadow:var(--shadow2); overflow:hidden; padding:12px; display:flex;flex-direction:column;gap:10px; position:relative; } .qrCard:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(240px 170px at 10% 0%, rgba(255,106,0,.10), transparent 62%), radial-gradient(260px 180px at 110% 20%, rgba(255,178,0,.08), transparent 62%); opacity:.9; pointer-events:none; } .qrCard > *{position:relative;z-index:2} .qrImg{ width:100%; aspect-ratio:1/1; border-radius:18px; border:1px solid rgba(15,23,42,.10); background:#fff; overflow:hidden; box-shadow:0 12px 26px rgba(15,23,42,.10); display:flex;align-items:center;justify-content:center; } .qrImg img{width:100%;height:100%;object-fit:cover} .qrCap{font-size:12px;color:rgba(15,23,42,.66);line-height:1.35} .qrCap b{color:var(--text)} .qrInput{display:flex;gap:8px;align-items:center} .input{ width:100%; padding:10px 12px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:#fff; color:var(--text); outline:none; font-size:12px; box-shadow:0 10px 20px rgba(15,23,42,.06); } .input::placeholder{color:rgba(15,23,42,.35)} #makeQr{ min-width:52px; border-color:rgba(255,106,0,.30); background:rgba(255,106,0,.10); box-shadow:none; } #makeQr:hover{background:rgba(255,106,0,.14)} .miniNote{ border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.86); border-radius:20px; padding:14px; box-shadow:var(--shadow3); } .miniNote p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.6} /* premium cards */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .card{ border:1px solid rgba(15,23,42,.10); background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow2); position:relative; overflow:hidden; transition:.18s; } .card:hover{transform:translateY(-2px)} .card:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(260px 160px at 10% 0%, rgba(255,106,0,.10), transparent 62%), radial-gradient(300px 180px at 100% 20%, rgba(255,178,0,.08), transparent 62%); opacity:.9; pointer-events:none; } .card > *{position:relative;z-index:2} .icon{ width:46px;height:46px;border-radius:16px; display:flex;align-items:center;justify-content:center; font-size:18px;font-weight:900; background:linear-gradient(135deg, rgba(255,106,0,.16), rgba(255,178,0,.10)); border:1px solid rgba(255,106,0,.22); box-shadow:0 10px 18px rgba(255,106,0,.10); margin-bottom:12px; } .card h3{margin:0 0 8px;font-size:15px;letter-spacing:-.15px} .card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6} /* stats row */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .stat{ border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.82); border-radius:22px; padding:16px; box-shadow:var(--shadow3); } .stat b{font-size:18px;letter-spacing:-.2px} .stat span{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.45} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .stepNum{ width:36px;height:36px;border-radius:14px; display:flex;align-items:center;justify-content:center; font-weight:900; background:rgba(255,255,255,.9); border:1px solid rgba(15,23,42,.12); box-shadow:var(--shadow3); margin-bottom:10px; } /* pricing */ .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch} .plan{ border:1px solid rgba(15,23,42,.10); background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80)); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow2); position:relative; overflow:hidden; transition:.18s; } /* ===== Category chips (demo) ===== */ .catChips{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; } .chip{ border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.86); color:rgba(15,23,42,.75); padding:9px 12px; border-radius:999px; font-weight:900; font-size:12px; cursor:pointer; box-shadow:0 10px 18px rgba(15,23,42,.06); transition:.18s ease; } .chip:hover{transform:translateY(-1px); background:#fff} .chip.active{ border-color:rgba(255,106,0,.38); background:linear-gradient(135deg, rgba(255,106,0,.18), rgba(255,178,0,.12)); color:rgba(15,23,42,.92); box-shadow:0 16px 28px rgba(255,106,0,.10); } .plan:hover{transform:translateY(-2px)} .plan:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(280px 190px at 15% 0%, rgba(255,106,0,.10), transparent 62%), radial-gradient(320px 220px at 110% 10%, rgba(255,178,0,.08), transparent 62%); opacity:.9; pointer-events:none; } .plan > *{position:relative;z-index:2} .tag{ display:inline-flex;align-items:center;gap:8px; padding:7px 10px;border-radius:999px; font-size:11px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.86); color:rgba(15,23,42,.86); } .planTitle{margin:10px 0 6px;font-size:18px;font-weight:900;letter-spacing:-.25px} .price{margin:0;font-size:36px;font-weight:900;letter-spacing:-.8px} .per{font-size:12px;color:var(--muted);margin-top:4px} .list{ margin:14px 0 14px; padding:0;list-style:none; display:flex;flex-direction:column;gap:10px; color:rgba(15,23,42,.88); font-size:13px; } .list li{display:flex;gap:10px;align-items:flex-start} .check{ width:18px;height:18px;border-radius:6px; background:rgba(18,185,129,.12); border:1px solid rgba(18,185,129,.22); display:flex;align-items:center;justify-content:center; flex:0 0 18px;margin-top:1px; } .check:before{content:"✓";color:rgba(18,185,129,.95);font-weight:900;font-size:12px} .planActions{display:flex;gap:10px;flex-wrap:wrap} .planBest{ border-color:rgba(255,106,0,.26); box-shadow:0 34px 100px rgba(255,106,0,.14); transform:translateY(-4px); } .planBest:hover{transform:translateY(-6px)} .badgeBest{ position:absolute;top:14px;right:14px; padding:7px 10px;border-radius:999px; background:linear-gradient(135deg, rgba(255,106,0,.98), rgba(255,178,0,.95)); color:#111;font-weight:900;font-size:11px; box-shadow:0 16px 30px rgba(255,106,0,.18); z-index:3; } .muted{color:var(--muted2)} /* comparison (sells) */ .compare{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .cmp{ border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.82); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow3); } .cmp h3{margin:0 0 10px;font-size:15px;letter-spacing:-.15px} .cmp ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:13px} .cmp li{display:flex;gap:10px} .xmark,.vmark{ width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center; flex:0 0 18px;margin-top:1px;font-weight:900;font-size:12px; border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.9); } .vmark{border-color:rgba(18,185,129,.25);background:rgba(18,185,129,.10);color:rgba(18,185,129,.95)} .xmark{border-color:rgba(255,106,0,.25);background:rgba(255,106,0,.08);color:rgba(255,106,0,.95)} /* FAQ */ details{ border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.84); border-radius:18px; padding:12px 14px; box-shadow:var(--shadow3); } details + details{margin-top:10px} summary{ cursor:pointer;list-style:none; font-weight:900;font-size:13px; display:flex;align-items:center;justify-content:space-between;gap:10px; } summary::-webkit-details-marker{display:none} .chev{ width:28px;height:28px;border-radius:12px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.92); color:rgba(15,23,42,.85); transition:.2s;flex:0 0 28px; } details[open] .chev{transform:rotate(180deg)} details p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.62} /* CTA + footer */ .cta{ border:1px solid rgba(15,23,42,.10); background: radial-gradient(560px 280px at 15% 0%, rgba(255,106,0,.14), transparent 62%), radial-gradient(560px 280px at 90% 10%, rgba(255,178,0,.12), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow2); display:flex;align-items:center;justify-content:space-between;gap:12px; overflow:hidden; } .cta h3{margin:0;font-size:18px;letter-spacing:-.25px} .cta p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6} .ctaRight{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} footer{ padding:24px 0 34px; border-top:1px solid rgba(15,23,42,.08); color:rgba(15,23,42,.70); font-size:12px; } .footGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start} .footLinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .footLinks a{ padding:8px 10px;border-radius:12px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.82); box-shadow:0 10px 18px rgba(15,23,42,.06); transition:.18s; color:rgba(15,23,42,.82); } .footLinks a:hover{background:#fff;transform:translateY(-1px)} /* Modal */ .modalBack{ position:fixed; inset:0; background:rgba(0,0,0,.40); display:none; align-items:center; justify-content:center; padding:18px; z-index:2000; } .modal{ width:min(560px, 100%); border-radius:24px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.98); box-shadow:0 30px 90px rgba(0,0,0,.35); overflow:hidden; } .modalHead{ padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(15,23,42,.10); } .modalHead b{font-size:13px} .x{ width:38px; height:38px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.95); color:var(--text); cursor:pointer; box-shadow:var(--shadow3); } .modalBody{padding:16px} .formGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px} .formRow{display:flex; flex-direction:column; gap:6px} .label{font-size:12px; color:rgba(15,23,42,.75)} .help{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5} .modalActions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap} /* Responsive (existing) */ @media (max-width:980px){ .heroGrid{grid-template-columns:1fr} .previewTop{flex-direction:column} .qrCard{width:100%} .grid3{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .pricing{grid-template-columns:1fr} .compare{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .h1{font-size:40px} } @media (max-width:720px){ .menu{display:none} .burger{display:flex} .mobileMenu{display:none} .mobileMenu.show{display:block} .heroLeft{padding:22px} .h1{font-size:34px} .formGrid{grid-template-columns:1fr} .footGrid{grid-template-columns:1fr} .footLinks{justify-content:flex-start} .cta{flex-direction:column;align-items:flex-start} .ctaRight{justify-content:flex-start} .stats{grid-template-columns:1fr} } /* ===== Preview with photos ===== */ .thumbsPhotos{gap:12px} .thumbPhoto{ padding:12px; min-height:132px; } .thumbTop{ display:flex; gap:12px; align-items:center; } .thumbImg{ width:64px; height:64px; border-radius:16px; overflow:hidden; border:1px solid rgba(15,23,42,.10); box-shadow:0 12px 22px rgba(15,23,42,.10); background:#fff; flex:0 0 64px; } .thumbImg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); } .thumbTxt b{ display:block; font-size:14px; letter-spacing:-.15px; } .thumbTxt span{ display:block; margin-top:4px; font-size:12px; color:rgba(15,23,42,.60); line-height:1.25; } .thumbPhoto .price{ margin-top:12px; font-size:18px; } .thumbPhoto:hover .thumbImg img{ transform:scale(1.06); transition:.22s ease; } /* ===== Promo (sale) block — compact & centered ===== */ .promoCard{ max-width:520px; margin:8px auto 16px; padding:12px 14px; display:flex; align-items:center; gap:10px; border-radius:18px; background: radial-gradient(120px 70px at 0% 0%, rgba(255,106,0,.18), transparent 60%), linear-gradient(135deg, rgba(255,106,0,.12), rgba(255,178,0,.08)); border:1px solid rgba(255,106,0,.32); box-shadow:0 14px 26px rgba(255,106,0,.16); } .promoIcon{ width:36px; height:36px; border-radius:12px; font-size:18px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(255,106,0,.30); box-shadow:0 6px 14px rgba(255,106,0,.16); } .promoText b{ font-size:14px; letter-spacing:-.15px; } .promoText span{ display:block; margin-top:3px; font-size:12px; color:rgba(15,23,42,.65); } .promoBadge{ margin-left:auto; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:900; background:#fff; color:#ff6a00; border:1px solid rgba(255,106,0,.30); } @media (max-width:520px){ .promoCard{ max-width:100%; padding:11px 12px; } } /* ===== mobile: подтянуть hero выше ===== */ @media (max-width:720px){ .navInner{ padding:10px 0; } .hero{ padding:22px 0 12px; } .heroGrid{ gap:12px; } .heroLeft{ padding:18px; } } /* ===== Mobile-first improvements (phones) ===== */ .phone, .panel, .card, .plan, .cmp, .stat, .cta, .miniNote { min-width: 0; } /* chips on mobile — horizontal scroll */ .catChips{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap:8px; padding: 2px 2px 10px; margin: 10px -2px 10px; scroll-snap-type: x mandatory; } .catChips::-webkit-scrollbar{ height: 0; } .chip{ scroll-snap-align: start; } /* thumbs on phones — 1 column (base) */ @media (max-width:720px){ .container{ padding: 0 14px; } section{ padding: 26px 0; } .hero{ padding: 18px 0 10px; } .heroGrid{ gap: 12px; } .heroLeft{ padding: 18px; } .heroRight{ padding: 12px; } .h1{ font-size: 30px; line-height: 1.05; } .lead{ font-size: 14px; } .heroActions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:stretch; } .heroActions .btn{ width: 100%; justify-content:center; } .heroActions .btnGhost:last-child{ grid-column: 1 / -1; } .metaPill{ padding: 8px 10px; font-size: 11px; } .phoneHeader{ height: 46px; padding: 0 12px; } .addr{ display:none; } .thumbRow{ grid-template-columns: 1fr; gap:10px; } .thumbPhoto{ min-height: 0; padding: 12px; } .thumbTop{ gap: 10px; } .thumbImg{ width: 72px; height: 72px; border-radius: 18px; flex: 0 0 72px; } .phoneBody > div[style*="margin-top"]{ display:grid !important; grid-template-columns: 1fr 1fr; gap:10px; } .phoneBody > div[style*="margin-top"] .btn{ width:100%; } .promoCard{ width:100%; padding: 12px; border-radius: 18px; gap:10px; margin: 10px 0 12px; } .promoBadge{ margin-left: 0; } .h2{ font-size: 24px; } .sub{ font-size: 13px; } .card, .plan, .cmp{ padding: 16px; border-radius: 22px; } .price{ font-size: 32px; } footer{ padding: 18px 0 28px; } } @media (max-width:380px){ .h1{ font-size: 27px; } .heroActions{ grid-template-columns: 1fr; } .heroActions .btnGhost:last-child{ grid-column:auto; } } /* ===== mobile: превью-меню в 2 колонки (2 сверху + 2 снизу) ===== */ @media (max-width:720px){ .thumbRow{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .thumbPhoto{ padding:12px; border-radius:18px; min-height:0; } .thumbTop{ flex-direction:column; align-items:flex-start; gap:10px; } .thumbImg{ width:100%; height:96px; border-radius:16px; flex:0 0 auto; } .thumbImg img{ width:100%; height:100%; object-fit:cover; } .thumbTxt b{ font-size:14px; } .thumbTxt span{ font-size:12px; } .thumbPhoto .price{ font-size:16px; margin-top:10px; } } @media (max-width:360px){ .thumbRow{ grid-template-columns:1fr; } } /* ===== КНОПКА ВВЕРХ (красиво справа, и на телефоне тоже) ===== */ .toTop{ position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:18px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.90); box-shadow:0 18px 44px rgba(15,23,42,.16); backdrop-filter: blur(10px); cursor:pointer; z-index:4000; opacity:0; transform:translateY(10px) scale(.98); pointer-events:none; transition:.22s ease; } .toTop:hover{ transform:translateY(6px) scale(1); background:#fff; } .toTop:active{ transform:translateY(8px) scale(.98); } .toTop.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .toTop:before{ content:""; width:16px; height:16px; border-left:3px solid rgba(15,23,42,.85); border-top:3px solid rgba(15,23,42,.85); transform:rotate(45deg); margin-top:6px; } .toTop:after{ content:""; position:absolute; inset:-2px; border-radius:20px; background: radial-gradient(120px 80px at 30% 20%, rgba(255,106,0,.14), transparent 60%); opacity:.9; pointer-events:none; } @media (max-width:720px){ .toTop{ right:12px; bottom:12px; width:46px; height:46px; border-radius:18px; } } /* ===== Название кафе в превью (по центру) ===== */ .cafeName{ text-align:center; font-weight:900; letter-spacing:-.35px; font-size:18px; margin:2px 0 10px; color:rgba(15,23,42,.92); } .cafeName span{ background:linear-gradient(135deg, rgba(255,106,0,.98), rgba(255,178,0,.95)); -webkit-background-clip:text; background-clip:text; color:transparent; } .cafeName:after{ content:""; display:block; width:64px; height:3px; margin:8px auto 0; border-radius:99px; background:linear-gradient(135deg, rgba(255,106,0,.70), rgba(255,178,0,.55)); opacity:.75; } @media (max-width:720px){ .cafeName{ font-size:17px; margin:0 0 10px; } } /* ===== FEATURES: на телефоне меньше "окошек" (3 + показать ещё) ===== */ .featuresWrap{ position:relative; } .featuresMore{ margin-top:12px; display:none; } @media (max-width:720px){ #features .card{ padding:14px; border-radius:22px; } #features .icon{ width:42px;height:42px;border-radius:16px; margin-bottom:10px; font-size:17px; } #features .card h3{ font-size:14px; margin:0 0 6px; } #features .card p{ font-size:12.5px; line-height:1.55; } #features .card.featureExtra{ display:none; } .featuresMore{ display:flex; } #features.showAll .card.featureExtra{ display:block; } }