:root{
  --paper:#FBF7F1;
  --card:#FFFFFF;
  --ink:#2C2422;
  --muted:#8C7F76;
  --amber:#E6A02C;
  --amber-deep:#C77F16;
  --amber-soft:#FBEBCE;
  --berry:#6E2547;
  --berry-deep:#4E1832;
  --line:#EFE7DC;
  --shadow:0 8px 24px -12px rgba(78,24,50,.22);
  --shadow-lg:0 20px 48px -20px rgba(78,24,50,.35);
  --font-display:'Unbounded',sans-serif;
  --font-body:'Manrope',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(230,160,44,.14), transparent 60%),
    #E9E1D6;
  color:var(--ink);
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100vh;padding:24px 12px;
  -webkit-font-smoothing:antialiased;
}
/* Phone frame — украшение для десктопа; на телефоне приложение на весь экран */
.phone{
  width:100%;max-width:400px;
  background:var(--paper);
  border-radius:34px;
  box-shadow:var(--shadow-lg), 0 0 0 10px #1c1614, 0 0 0 11px #322724;
  overflow:hidden;position:relative;
  height:min(844px, calc(100vh - 48px));
  display:flex;flex-direction:column;
}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:150px;height:26px;background:#1c1614;border-radius:0 0 16px 16px;z-index:60;}
@media(max-width:440px){
  body{padding:0;}
  .phone{border-radius:0;box-shadow:none;height:100vh;height:100dvh;max-width:none;}
  .notch{display:none;}
  header{padding-top:calc(16px + env(safe-area-inset-top));}
  .install-bar{padding-bottom:calc(20px + env(safe-area-inset-bottom));}
  .sheet{padding-bottom:calc(26px + env(safe-area-inset-bottom));}
  .viewer .v-bars{padding-top:calc(14px + env(safe-area-inset-top));}
}

.screen{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;position:relative;}
.screen::-webkit-scrollbar{display:none;}

/* Header */
header{
  padding:34px 18px 14px;position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg, var(--paper) 72%, rgba(251,247,241,0));
}
.head-row{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand svg{width:34px;height:34px;flex:none;}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:22px;
  letter-spacing:-.5px;color:var(--berry);line-height:1;}
.subtitle{font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:1.4px;text-transform:uppercase;margin-top:3px;}
.bell{width:42px;height:42px;border-radius:50%;background:var(--card);
  box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);position:relative;transition:transform .15s;}
.bell:active{transform:scale(.92);}
.bell svg{width:20px;height:20px;stroke:var(--berry);}
.bell .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;
  background:var(--amber);border-radius:50%;border:2px solid var(--card);}

/* Stories */
.stories{display:flex;gap:14px;padding:6px 18px 18px;overflow-x:auto;min-height:96px;}
.stories::-webkit-scrollbar{display:none;}
.story{flex:none;width:66px;text-align:center;cursor:pointer;}
.story-ring{width:66px;height:66px;border-radius:50%;padding:2.5px;
  background:conic-gradient(from 140deg,var(--amber),var(--amber-deep),var(--berry),var(--amber));
  transition:transform .18s;}
.story:active .story-ring{transform:scale(.92);}
.story.seen .story-ring{background:var(--line);}
.story-inner{width:100%;height:100%;border-radius:50%;
  display:grid;place-items:center;font-size:26px;
  border:2.5px solid var(--paper);overflow:hidden;
  background-size:cover;background-position:center;}
.story-label{font-size:11px;font-weight:600;margin-top:6px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Body sections */
.body{padding:2px 18px 120px;}
.section-title{font-family:var(--font-display);font-weight:500;font-size:16px;
  color:var(--berry);margin:24px 2px 12px;letter-spacing:-.3px;}

/* Primary CTA */
.cta{
  width:100%;border:none;cursor:pointer;text-align:left;
  background:linear-gradient(120deg,var(--amber) 0%,var(--amber-deep) 100%);
  color:#3a220a;border-radius:22px;padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 12px 28px -12px rgba(199,127,22,.7);
  transition:transform .15s;position:relative;overflow:hidden;
  font-family:var(--font-body);
}
.cta:active{transform:scale(.98);}
.cta::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);}
.cta-t{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.1;}
.cta-s{font-size:12.5px;font-weight:600;opacity:.72;margin-top:7px;}
.cta-arrow{width:44px;height:44px;border-radius:50%;background:rgba(58,34,10,.14);
  display:grid;place-items:center;flex:none;}
.cta-arrow svg{width:22px;height:22px;stroke:#3a220a;}

/* Tile grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:18px 16px;cursor:pointer;transition:transform .15s;text-align:left;
  display:flex;flex-direction:column;gap:12px;min-height:124px;box-shadow:var(--shadow);
  font-family:var(--font-body);}
.tile:active{transform:scale(.96);}
.tile.locked{opacity:.62;}
.t-ico{width:40px;height:40px;border-radius:12px;background:var(--amber-soft);
  display:grid;place-items:center;}
.t-ico svg{width:22px;height:22px;stroke:var(--amber-deep);}
.tile.berry .t-ico{background:rgba(110,37,71,.1);}
.tile.berry .t-ico svg{stroke:var(--berry);}
.t-title{font-weight:700;font-size:14px;line-height:1.35;color:var(--ink);}
.t-sub{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.4;margin-top:6px;}
.badge{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.4px;
  background:var(--amber);color:#3a220a;padding:2px 7px;border-radius:20px;text-transform:uppercase;}

/* Promos carousel */
.promos{display:flex;gap:12px;overflow-x:auto;padding:2px 18px 2px;margin:0 -18px;
  scroll-snap-type:x proximity;}
.promos::-webkit-scrollbar{display:none;}
.promo{flex:none;width:230px;border-radius:20px;padding:18px;color:#fff;cursor:pointer;
  scroll-snap-align:start;transition:transform .15s;position:relative;overflow:hidden;min-height:120px;
  display:flex;flex-direction:column;justify-content:space-between;border:none;text-align:left;
  font-family:var(--font-body);}
.promo:active{transform:scale(.97);}
.promo.p1{background:linear-gradient(135deg,var(--berry),var(--berry-deep));}
.promo.p2{background:linear-gradient(135deg,#B4762A,var(--amber-deep));}
.promo.p3{background:linear-gradient(135deg,#7A3357,#3F2038);}
.promo::after{content:"";position:absolute;right:-24px;bottom:-24px;width:110px;height:110px;
  border-radius:50%;background:rgba(255,255,255,.09);}
.promo-tag{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  opacity:.8;}
.promo-t{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.15;margin-top:8px;z-index:1;}
.promo-s{font-size:12px;font-weight:500;opacity:.85;margin-top:6px;z-index:1;}

/* Tips list */
.tip{display:flex;align-items:center;gap:14px;background:var(--card);width:100%;
  border:1px solid var(--line);border-radius:18px;padding:12px;margin-bottom:10px;
  cursor:pointer;transition:transform .15s;box-shadow:var(--shadow);text-align:left;
  font-family:var(--font-body);}
.tip:active{transform:scale(.98);}
.tip-thumb{width:52px;height:52px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:24px;}
.tip-body{flex:1;min-width:0;}
.tip-t{font-weight:700;font-size:13.5px;line-height:1.35;color:var(--ink);}
.tip-s{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.4;}
.tip-chev{stroke:var(--muted);width:18px;height:18px;flex:none;}

/* Install bar */
.install-bar{position:absolute;left:0;right:0;bottom:0;z-index:45;
  padding:14px 18px 20px;
  background:linear-gradient(180deg,rgba(251,247,241,0),var(--paper) 42%);
  display:flex;justify-content:center;pointer-events:none;}
.install-bar[hidden]{display:none;}
.install-btn{pointer-events:auto;width:100%;max-width:360px;border:none;cursor:pointer;
  background:var(--berry);color:#fff;border-radius:18px;padding:15px;
  font-family:var(--font-body);font-weight:700;font-size:14.5px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 14px 30px -12px rgba(78,24,50,.6);transition:transform .15s;}
.install-btn:active{transform:scale(.97);}
.install-btn svg{width:19px;height:19px;stroke:#fff;}

/* Overlays */
.overlay{position:absolute;inset:0;z-index:100;display:none;}
.overlay.open{display:block;}
.backdrop{position:absolute;inset:0;background:rgba(28,22,20,.55);
  animation:fade .2s ease;backdrop-filter:blur(2px);}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--paper);
  border-radius:26px 26px 0 0;padding:10px 20px 26px;z-index:2;
  animation:slideup .28s cubic-bezier(.22,1,.36,1);max-height:88%;overflow-y:auto;}
.sheet::-webkit-scrollbar{display:none;}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.grabber{width:40px;height:4px;background:var(--line);border-radius:4px;margin:6px auto 16px;}
.sheet h2{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--berry);
  letter-spacing:-.4px;margin-bottom:6px;}
.sheet p.lead{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:18px;}

/* Install tabs */
.tabs{display:flex;gap:8px;background:#F0E9DE;border-radius:14px;padding:4px;margin-bottom:18px;}
.tab{flex:1;border:none;background:none;cursor:pointer;padding:9px;border-radius:11px;
  font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--muted);transition:.2s;}
.tab.active{background:var(--card);color:var(--berry);box-shadow:var(--shadow);}
.steps{display:none;}
.steps.active{display:block;}
.step{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
.step-n{width:28px;height:28px;flex:none;border-radius:50%;background:var(--amber);
  color:#3a220a;font-weight:800;font-size:13px;display:grid;place-items:center;}
.step-txt{font-size:13.5px;line-height:1.45;padding-top:3px;}
.step-txt b{color:var(--berry);}
.inline-ic{display:inline-grid;place-items:center;width:20px;height:20px;
  vertical-align:-5px;background:#E9F0FA;border-radius:6px;margin:0 1px;}
.inline-ic svg{width:13px;height:13px;stroke:#2f6fd6;}
.android-cta{width:100%;border:none;background:var(--berry);color:#fff;border-radius:14px;
  padding:14px;font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;margin-top:4px;}

/* iOS: стрелка вниз к панели Safari */
.ios-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:8px;color:var(--berry);animation:bounce 1.6s ease-in-out infinite;}
.ios-arrow svg{width:26px;height:26px;stroke:var(--berry);}
.ios-arrow span{font-size:12px;font-weight:600;color:var(--muted);}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Story viewer */
.viewer{position:absolute;inset:0;z-index:110;background:#1c1614;display:none;flex-direction:column;}
.viewer.open{display:flex;}
.v-bars{display:flex;gap:5px;padding:14px 14px 0;position:relative;z-index:3;}
.v-bar{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:3px;overflow:hidden;}
.v-bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px;}
.v-bar.done i{width:100%;}
.v-bar.active i{animation:grow 4.5s linear forwards;}
@keyframes grow{from{width:0}to{width:100%}}
.v-head{display:flex;align-items:center;gap:10px;padding:14px 16px;position:relative;z-index:3;}
.v-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  border:2px solid rgba(255,255,255,.5);background-size:cover;background-position:center;}
.v-name{color:#fff;font-weight:700;font-size:13.5px;}
.v-close{margin-left:auto;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;
  line-height:1;padding:0 4px;position:relative;z-index:4;}
.v-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 28px 60px;
  text-align:center;position:relative;background-size:cover;background-position:center;}
.v-body.has-img::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,22,20,.45),rgba(28,22,20,.15) 40%,rgba(28,22,20,.62));}
.v-body>*{position:relative;}
.v-emoji{font-size:64px;margin-bottom:20px;}
.v-body.has-img .v-emoji{display:none;}
.v-title{font-family:var(--font-display);font-weight:600;font-size:26px;color:#fff;
  line-height:1.15;margin-bottom:14px;letter-spacing:-.5px;}
.v-text{font-size:15px;color:rgba(255,255,255,.85);line-height:1.55;max-width:300px;margin:0 auto;}
.v-nav{position:absolute;inset:0;display:flex;z-index:2;}
.v-nav>div{flex:1;}

/* Article page */
.article{position:absolute;inset:0;z-index:95;background:var(--paper);display:none;
  flex-direction:column;animation:artIn .25s ease;}
.article.open{display:flex;}
@keyframes artIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.article-head{display:flex;align-items:center;gap:12px;
  padding:calc(16px + env(safe-area-inset-top)) 18px 12px;
  position:sticky;top:0;background:var(--paper);z-index:2;}
.article-back{width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;flex:none;}
.article-back svg{width:20px;height:20px;stroke:var(--berry);}
.article-head-title{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.article-scroll{flex:1;overflow-y:auto;padding:8px 22px 48px;}
.article-scroll::-webkit-scrollbar{display:none;}
.article-emoji{font-size:44px;margin-bottom:14px;}
.article-title{font-family:var(--font-display);font-weight:600;font-size:23px;color:var(--berry);
  line-height:1.2;letter-spacing:-.4px;margin-bottom:10px;}
.article-lead{font-size:14px;font-weight:600;color:var(--muted);line-height:1.5;margin-bottom:20px;}
.article-body p{font-size:14.5px;line-height:1.65;margin-bottom:14px;}
.article-cta{margin-top:16px;}

/* Toast */
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);
  background:var(--berry-deep);color:#fff;padding:12px 20px;border-radius:14px;font-size:13px;
  font-weight:600;z-index:200;opacity:0;transition:.3s;box-shadow:var(--shadow-lg);
  max-width:88%;text-align:center;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp .5s ease forwards;}
@keyframes fadeUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;}}