/* Glampio landing. Токены и паттерны - из КП_Glampio.html (arch/design/dizajn_napravlenie.md).
Mobile-first, breakpoints 720px / 1080px. Светлая тема, hero и футер на --dark.
Движение: transform/opacity, ease-out, всё в @media (prefers-reduced-motion: no-preference). */
@font-face{
font-family:'Manrope';
font-style:normal;
font-display:swap;
font-weight:200 800;
src:url(../assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Manrope';
font-style:normal;
font-display:swap;
font-weight:200 800;
src:url(../assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--green:#4CAF7D;
--green-deep:#3a9468; /* крупные значения статов, иконки */
--green-text:#2e7d56; /* мелкий зелёный текст и кнопки: AA на белом/paper */
--green-ink:#2f5a45; /* текст на green-wash */
--green-soft:#A8D5BA;
--green-wash:#E6F1EA;
--paper:#F6F8F5;
--beige:#F0EDE6;
--dark:#24322E;
--ink:#24322E;
--muted:#5d6b63;
--faint:#68756d; /* темнее, чем в КП (#8a958e): AA для мелких подписей */
--line:rgba(36,50,46,.10);
--line-soft:rgba(36,50,46,.06);
--white:#fff;
--amber:#c98a3c;
--water:#7BB6C4;
--shadow:0 6px 22px rgba(36,50,46,.06);
--shadow-lg:0 14px 40px rgba(36,50,46,.10);
--ease:cubic-bezier(.22,1,.36,1);
--font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--green-text)}
:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
section{padding:56px 0;scroll-margin-top:16px}
.sec-white{background:var(--white)}
/* типографика: шкала на Manrope, дисплей 800 с плотным трекингом */
h1{font-size:clamp(34px,3.1vw + 22px,56px);font-weight:800;line-height:1.06;letter-spacing:-.028em}
h2{font-size:clamp(26px,1.4vw + 21px,36px);font-weight:700;line-height:1.12;letter-spacing:-.022em;max-width:26ch}
h3{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
p{color:var(--muted)}
.sec-intro{max-width:64ch;margin-top:16px;font-size:16px;line-height:1.6}
strong{font-weight:700;color:var(--ink)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--green)}
/* иконки */
.ic{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:15px;height:15px}
.ic.lg{width:22px;height:22px}
/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700;padding:14px 26px;border-radius:12px;background:var(--green-text);color:#fff;border:none;text-decoration:none;cursor:pointer;transition:background .15s ease-out}
.btn:hover{background:var(--green-deep)}
.btn.ghost{background:transparent;color:var(--green-text);border:1.5px solid rgba(76,175,125,.45)}
.btn.ghost:hover{background:var(--green-wash)}
.on-dark .btn.ghost{color:#bfe0cd;border-color:rgba(168,213,186,.45)}
.on-dark .btn.ghost:hover{background:rgba(168,213,186,.12)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
/* карточки и сетки */
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.g2,.g3{display:grid;gap:16px;margin-top:32px}
.chip{width:40px;height:40px;border-radius:11px;background:var(--green-wash);color:var(--green-text);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.chip.beige{background:var(--beige);color:#a07a45}
.num{font-size:12px;font-weight:700;color:var(--green-text);letter-spacing:.08em;margin-bottom:6px}
.feat p{font-size:14px;margin-top:6px;line-height:1.55}
.src{font-size:12.5px;color:var(--faint);margin-top:16px}
/* pill */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--green-wash);color:var(--green-ink);border:1px solid rgba(76,175,125,.18)}
/* highlight strip */
.hl{border-radius:13px;padding:14px 17px;font-size:14px;line-height:1.5;display:flex;gap:11px;align-items:flex-start;color:var(--green-ink)}
.hl.green{background:var(--green-wash);border:1px solid rgba(76,175,125,.18)}
.hl.beige{background:var(--beige);color:#6d5a3c;border:1px solid rgba(180,150,110,.18)}
.hl .ic{color:var(--green-text);margin-top:2px}
.hl.beige .ic{color:#a07a45}
/* ===== hero ===== */
.hero{position:relative;background:radial-gradient(120% 90% at 78% 0%,#2d453a 0%,var(--dark) 55%);color:#eef3ee;overflow:hidden}
.hero .ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:64%;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.01em;color:#f3f7f3;text-decoration:none}
.logo .mark{width:34px;height:34px;flex:none}
.logo small{display:block;font-size:8.5px;font-weight:600;color:#9fb0a4;letter-spacing:.05em;line-height:1.1;margin-top:1px}
.topnav{display:none;gap:26px}
.topnav a{color:#c2d2c7;text-decoration:none;font-size:14.5px;font-weight:600}
.topnav a:hover{color:#fff}
.hero-body{padding:48px 0 64px}
.hero .eyebrow{color:var(--green-soft)}
.hero .eyebrow::before{background:var(--green-soft)}
.hero h1{max-width:19ch;color:#f5f9f5}
.hero h1 em{font-style:normal;color:var(--green-soft)}
.hero-sub{font-size:clamp(16px,.4vw + 15px,18px);color:#c2d2c7;max-width:56ch;margin-top:16px;line-height:1.6}
.hero-stats{display:grid;grid-template-columns:1fr;gap:12px;margin-top:48px}
/* фон достаточно непрозрачный: гарантирует контраст AA над силуэтом хребта */
.hstat{background:rgba(28,40,34,.72);border:1px solid rgba(168,213,186,.16);border-radius:15px;padding:20px;position:relative;backdrop-filter:blur(2px)}
.hstat .sv{font-size:30px;font-weight:800;color:#7FCBA0;letter-spacing:-.03em;line-height:1}
.hstat .sl{font-size:13px;color:#c2d2c7;margin-top:8px;line-height:1.45;font-weight:500}
.hstat .ic{position:absolute;top:16px;right:16px;color:var(--green-soft);width:20px;height:20px}
/* ===== pipeline цикла гостя ===== */
.pipe{display:grid;gap:10px;margin-top:32px}
.pstep{background:var(--white);border:1px solid var(--line);border-radius:15px;padding:16px;display:flex;gap:14px;align-items:flex-start;position:relative}
.pstep .pi{width:44px;height:44px;border-radius:13px;background:var(--green-wash);color:var(--green-text);display:flex;align-items:center;justify-content:center;flex:none}
.pstep:nth-child(2) .pi{background:#E2EFF2;color:#4f8d9c}
.pstep:nth-child(4) .pi{background:var(--beige);color:#a07a45}
.pstep:nth-child(5) .pi{background:#EDEAF2;color:#7b6e9c}
.pstep .pt{font-size:15px;font-weight:700}
.pstep .pd{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
/* ===== сценарии-деньги ===== */
.scn{display:grid;gap:16px;margin-top:32px}
.sc{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.sc .sch{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700}
.sc .sch .ic{color:var(--green-text)}
.sc.amber .sch .ic{color:var(--amber)}
.sc.water .sch .ic{color:#4f8d9c}
.sc .sv{font-size:clamp(30px,.6vw + 27px,34px);font-weight:800;color:var(--green-deep);letter-spacing:-.03em;line-height:1.05;margin-top:16px;font-variant-numeric:tabular-nums}
.sc .su{font-size:13px;font-weight:700;color:var(--ink);margin-top:4px}
.sc p{font-size:13.5px;margin-top:10px;line-height:1.5;flex:1}
.sc .note{margin-top:16px;font-size:11.5px;font-weight:600;color:var(--faint);border-top:1px dashed var(--line);padding-top:10px}
/* полосы комиссий */
.comm{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:24px;box-shadow:var(--shadow)}
.comm h3{font-size:16px;margin-bottom:8px}
.crow{margin:16px 0}
.crl{font-size:14px;font-weight:700}
.crl small{display:block;font-size:12px;color:var(--faint);font-weight:500}
.track{height:34px;background:var(--paper);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;margin-top:8px}
.fill{height:100%;border-radius:9px;display:flex;align-items:center;padding:0 12px;color:#fff;font-weight:700;font-size:13px;white-space:nowrap}
.fill.bad{background:linear-gradient(90deg,#b85c3c,#9d4a2e)}
.fill.good{background:linear-gradient(90deg,#2e7d56,#276b4a)}
.csave{margin-top:16px;background:var(--green-wash);border:1px solid rgba(76,175,125,.2);border-radius:12px;padding:14px 18px;font-size:14px;font-weight:600;color:var(--green-ink);display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.csave .ic{color:var(--green-text);flex:none;margin-top:2px}
/* ===== мокап кабинета ===== */
.mock{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;margin-top:32px;max-width:920px}
.mock .side{display:none;width:172px;flex:none;border-right:1px solid var(--line-soft);padding:16px 12px;flex-direction:column}
.mock .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;padding:4px 6px 14px}
.mock .brand .mark{width:22px;height:22px}
.mnav{display:flex;flex-direction:column;gap:2px}
.mnav span{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);padding:8px 9px;border-radius:9px;font-weight:600}
.mnav span .ic{width:15px;height:15px;color:var(--faint)}
.mnav span.on{background:var(--green-wash);color:var(--green-text)}
.mnav span.on .ic{color:var(--green-text)}
.mock .main{flex:1;background:var(--paper);padding:16px;min-width:0}
.mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mtop .mh{font-size:15px;font-weight:800;letter-spacing:-.02em}
.mtop .mh small{display:block;font-size:10.5px;color:var(--faint);font-weight:600;letter-spacing:0}
.mtop .tools{display:flex;gap:8px;align-items:center}
.mtop .tbtn{width:28px;height:28px;border-radius:9px;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.mtop .tbtn .ic{width:14px;height:14px}
.mtop .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-soft));color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.mstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.mstat{background:var(--white);border:1px solid var(--line-soft);border-radius:11px;padding:10px 12px}
.mstat .ml{font-size:9.5px;color:var(--faint);font-weight:600}
.mstat .mv{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.mstat .md{font-size:9.5px;font-weight:700;color:var(--green-text);margin-top:3px}
.mstat .md.warn{color:#a86f2e}
.mgrid{display:grid;gap:8px}
.mpanel{background:var(--white);border:1px solid var(--line-soft);border-radius:11px;padding:12px}
.mpanel .mph{font-size:11.5px;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.mpanel .mph .pill{font-size:9.5px;padding:2px 8px}
.chess{display:flex;flex-direction:column;gap:7px}
.chrow{display:flex;align-items:center;gap:8px}
.chrow .un{width:26px;font-size:9.5px;font-weight:700;color:var(--muted);flex:none}
.chrow .lane{flex:1;height:16px;background:var(--paper);border-radius:5px;position:relative;overflow:hidden}
.chrow .bk{position:absolute;top:2px;bottom:2px;border-radius:4px;background:var(--green-soft)}
.chrow .bk.g2{background:var(--green)}
.chrow .bk.bg{background:var(--beige);border:1px solid rgba(180,150,110,.35)}
.events{display:flex;flex-direction:column;gap:10px}
.erow{display:flex;gap:9px;align-items:flex-start}
.edot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:4px;background:var(--green)}
.edot.amber{background:var(--amber)}
.edot.water{background:var(--water)}
.erow b{font-size:11px;font-weight:700;display:block;line-height:1.3}
.erow small{font-size:9.5px;color:var(--faint);line-height:1.3;display:block}
/* ===== бандлы ===== */
.bundles{display:grid;gap:16px;margin-top:32px}
.bnd{border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:var(--white);position:relative;box-shadow:var(--shadow)}
.bnd .bh{padding:20px 20px 18px;color:#fff}
/* градиенты темнее, чем в КП: AA для белого текста в шапке */
.bnd.b1 .bh{background:linear-gradient(155deg,#64756a,#4a5850)}
.bnd.b2 .bh{background:linear-gradient(155deg,#31815a,#266546)}
.bnd.b3 .bh{background:linear-gradient(155deg,#2f7263,#24322E)}
.bnd .bn{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e9f0ea}
.bnd .bt{font-size:24px;font-weight:800;margin-top:4px;letter-spacing:-.02em}
.bnd .bsl{font-size:12.5px;margin-top:5px;color:#eaf2ec}
.bnd .bprice{margin-top:16px;font-size:18px;font-weight:800;line-height:1.2}
.bnd .bprice small{display:block;font-size:12px;font-weight:600;margin-top:3px;color:#e2ece4}
.bnd .bb{padding:18px 20px 20px;flex:1}
.bnd .bb ul{list-style:none}
.bnd .bb li{font-size:14px;color:var(--muted);line-height:1.4;padding-left:24px;position:relative;margin-bottom:10px}
.bnd .bb li:last-child{margin-bottom:0}
.bnd .bb li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.bnd.feat-card{box-shadow:0 0 0 2px var(--green),var(--shadow-lg)}
.feat-tag{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.25);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.bnd-notes{display:grid;gap:12px;margin-top:24px}
/* ===== FAQ ===== */
.faq{max-width:820px;margin-top:32px;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;font-size:15.5px;font-weight:700;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.faq .fa{padding:0 20px 18px;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:64ch}
/* ===== футер ===== */
.foot{background:var(--dark);color:#eef3ee;padding:64px 0 32px;position:relative;overflow:hidden}
.foot .ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:44%;pointer-events:none;opacity:.9}
.foot .wrap{position:relative;z-index:2}
.foot h2{color:#f3f7f3;max-width:24ch}
.foot .foot-sub{color:#c2d2c7;max-width:56ch;margin-top:16px;font-size:16px;line-height:1.6}
.foot-contacts{display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;margin-top:40px;max-width:760px}
.fc{background:var(--dark);padding:16px 18px}
.fc .fl{font-size:10.5px;color:#9aa8a0;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fc a,.fc .fv{display:block;font-size:15px;color:#eef3ee;font-weight:600;margin-top:5px;text-decoration:none}
.fc a:hover{color:var(--green-soft)}
.legal{margin-top:40px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;font-size:12.5px;color:#9aa8a0;display:flex;flex-wrap:wrap;gap:8px 22px}
.legal a{color:#c2d2c7}
/* ===== страница политики ===== */
.doc{max-width:760px;margin:0 auto;padding:48px 20px 64px}
.doc h1{font-size:28px;margin-bottom:8px}
.doc .doc-date{font-size:13px;color:var(--faint)}
.doc h2{font-size:19px;margin:32px 0 8px;max-width:none}
.doc p{margin:10px 0;font-size:15px;line-height:1.65}
.doc ul{margin:10px 0 10px 22px}
.doc li{font-size:15px;color:var(--muted);margin:6px 0;line-height:1.6}
/* ===== адаптив ===== */
@media(min-width:720px){
section{padding:88px 0}
.topnav{display:flex}
.hero-body{padding:72px 0 96px}
.hero-stats{grid-template-columns:repeat(3,1fr);gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.pipe{grid-template-columns:repeat(5,1fr);gap:14px}
.pstep{display:block;text-align:center;padding:18px 14px}
.pstep .pi{margin:0 auto 10px}
.pstep:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:url("data:image/svg+xml;utf8,") center/contain no-repeat;z-index:2}
.scn{grid-template-columns:1fr 1fr}
.crow{display:flex;align-items:center;gap:16px}
.crl{width:220px;flex:none}
.track{flex:1;margin-top:0}
.mock .side{display:flex}
.mstats{grid-template-columns:repeat(4,1fr)}
.mgrid{grid-template-columns:1.6fr 1fr}
.bundles{grid-template-columns:repeat(3,1fr)}
.bnd-notes{grid-template-columns:repeat(3,1fr)}
.foot-contacts{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1080px){
.scn{grid-template-columns:repeat(4,1fr)}
}
/* ===== движение (только при отсутствии prefers-reduced-motion) ===== */
@media(prefers-reduced-motion:no-preference){
/* scroll-reveal: класс rv навешивает JS, без JS всё видно сразу */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease) var(--d,0ms),transform .55s var(--ease) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
/* каскад hero при загрузке */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:rise .55s var(--ease) both}
.hero h1{animation:rise .6s var(--ease) .08s both}
.hero-sub{animation:rise .6s var(--ease) .16s both}
.hero .cta-row{animation:rise .6s var(--ease) .24s both}
.hero-stats{animation:rise .65s var(--ease) .34s both}
/* палатка на хребте мягко «дышит» светом */
@keyframes tentglow{0%,100%{opacity:1}50%{opacity:.62}}
.hero .tent{animation:tentglow 4s ease-in-out infinite}
/* полосы комиссий отрисовываются при появлении в viewport */
.comm .fill{transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease) .1s}
.comm .fill span{opacity:0;transition:opacity .25s ease-out .65s}
.comm.in .fill{transform:scaleX(1)}
.comm.in .fill span{opacity:1}
/* пульс живого события в мокапе */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.edot.live{animation:pulse 2s ease-in-out infinite}
/* микро-взаимодействия */
.card,.sc,.bnd{transition:transform .2s ease-out,box-shadow .2s ease-out}
.card:hover,.sc:hover,.bnd:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.bnd.feat-card:hover{box-shadow:0 0 0 2px var(--green),var(--shadow-lg)}
.btn{transition:background .15s ease-out,transform .15s ease-out}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.faq summary::after{transition:transform .2s ease-out}
.faq details[open] summary::after{transform:rotate(180deg)}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}