/* ETAP_CSP_PHASE5_v1 — auto-extracted from index_v2.html on 20260513_085657
   Original 1 <style> block(s) consolidated here.
   DO NOT edit by hand — re-run extract_inline_style.py to regenerate. */

/* === extracted block 1 from index_v2.html === */
:root {
            --ink: #0a0a0f;
            --cream: #faf7f0;
            --amber: #FBBF24;
            --amber-2: #FB923C;
        }
        * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        html, body { background: var(--cream); color: var(--ink); }
        body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-feature-settings: "ss01", "cv11"; }
        .font-display { font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif; letter-spacing: -0.035em; line-height: 0.95; font-weight: 800; }
        .font-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
        .hero-mesh {
            background:
                radial-gradient(ellipse 80% 60% at 18% 18%, rgba(251,191,36,.22) 0%, transparent 55%),
                radial-gradient(ellipse 70% 55% at 88% 12%, rgba(251,146,60,.20) 0%, transparent 60%),
                radial-gradient(ellipse 90% 60% at 60% 95%, rgba(99,102,241,.14) 0%, transparent 65%),
                radial-gradient(ellipse 60% 50% at 0% 80%, rgba(244,63,94,.10) 0%, transparent 60%),
                #07070b;
        }
        .dot-grid {
            background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
            background-size: 28px 28px;
            background-position: 0 0;
        }
        .gradient-text {
            background: linear-gradient(135deg, #FBBF24 0%, #FB923C 50%, #F43F5E 100%);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
        }
        .marker-line {
            background-image: linear-gradient(180deg, transparent 60%, rgba(251,191,36,.55) 60%, rgba(251,146,60,.55) 100%);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 0 .08em;
        }
        .glass-dark { background: rgba(10,10,15,.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
        .glass-light { background: rgba(255,255,255,.65); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); }
        .float-a { animation: floatA 9s ease-in-out infinite; }
        .float-b { animation: floatB 11s ease-in-out infinite; }
        @keyframes floatA { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(0,-10px) rotate(.3deg); } }
        @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,8px); } }
        .fade-up { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both; }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
        .d1 { animation-delay: .08s } .d2 { animation-delay: .18s } .d3 { animation-delay: .28s } .d4 { animation-delay: .38s } .d5 { animation-delay: .48s }
        .hide-scroll::-webkit-scrollbar { display: none } .hide-scroll { scrollbar-width: none }
        .ring-amber { box-shadow: 0 0 0 1px rgba(251,191,36,.3), 0 8px 32px -12px rgba(251,191,36,.35); }
        .btn-primary { background: linear-gradient(135deg, #FBBF24 0%, #FB923C 100%); color: #09090B; }
        .btn-primary:hover { background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%); transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(251,146,60,.5); }
        .btn-ghost-light { color: #fafafa; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
        .btn-ghost-light:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.4); }
        .btn-ghost-dark { color: #09090B; border: 1px solid rgba(10,10,15,.18); background: transparent; }
        .btn-ghost-dark:hover { background: rgba(10,10,15,.04); border-color: rgba(10,10,15,.4); }
        .btn-dark { background: #09090B; color: #fafafa; }
        .btn-dark:hover { background: #1a1a20; transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(0,0,0,.35); }
        .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
        .pill-dark { background: rgba(255,255,255,.06); color: #fafafa; border: 1px solid rgba(255,255,255,.10); }
        .pill-light { background: rgba(10,10,15,.06); color: #09090B; border: 1px solid rgba(10,10,15,.06); }
        .pill-amber { background: rgba(251,191,36,.12); color: #B45309; border: 1px solid rgba(251,191,36,.25); }
        .stat-num { font-family: 'Bricolage Grotesque', 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
        .surface { background: #fff; border: 1px solid rgba(10,10,15,.06); }
        .surface-soft { background: #fff; border: 1px solid rgba(10,10,15,.04); }
        .ticker-wrapper { overflow: hidden; position: relative; height: 100%; min-height: 380px; }
        .ticker-list { display: flex; flex-direction: column; gap: .75rem; transition: margin-top .5s ease-in-out; position: absolute; inset: 0; padding: 0 .5rem; }
        .ticker-card { flex-shrink: 0; }
        .header-scrolled { background: rgba(250,247,240,.85); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(10,10,15,.06); }
        .header-on-dark { background: rgba(7,7,11,.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.06); }
        .nav-link { font-size: 13px; font-weight: 600; color: rgba(250,247,240,.7); transition: color .2s; }
        .nav-link:hover { color: #fafafa; }
        .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
        .reveal.in { opacity: 1; transform: translateY(0); }
        body.body-dark { background: #07070b; }
            /* V2_R1_CSS ticker hero */
        .ticker-hero-wrap { position: relative; height: 320px; overflow: hidden; }
        .ticker-hero-list { display: flex; flex-direction: column; gap: 10px; transition: margin-top .65s cubic-bezier(.16, 1, .3, 1); position: absolute; inset: 0 0 auto 0; }
        .ticker-hero-fade-top { position: absolute; top: 0; left: 0; right: 0; height: 32px; pointer-events: none; background: linear-gradient(to bottom, rgba(10,10,15,.85) 0%, transparent 100%); }
        .ticker-hero-fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 32px; pointer-events: none; background: linear-gradient(to top, rgba(10,10,15,.85) 0%, transparent 100%); }
        .ticker-card-h { flex-shrink: 0; }
        /* V2_R2 tiles + scroll-cue */
        .tile { position: relative; display: flex; flex-direction: column; min-height: 138px; padding: 14px; border-radius: 22px; transition: transform .25s, box-shadow .25s, border-color .25s, background .25s; overflow: hidden; cursor: pointer; }
        .tile:hover { transform: translateY(-2px); }
        .tile-icon { font-size: 26px; line-height: 1; }
        .tile-title { font-family: 'Bricolage Grotesque','Manrope',sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.025em; line-height: 1.15; word-break: normal; hyphens: auto; }
        .tile-sub { font-size: 10.5px; font-weight: 600; line-height: 1.3; opacity: .75; }
        .tile-arrow { display: none; position: absolute; top: 14px; right: 14px; opacity: .55; transition: transform .25s, opacity .25s; }
        .tile:hover .tile-arrow { transform: translate(2px,-2px); opacity: 1; }
        @media (min-width: 768px) {
            .tile-arrow { display: inline; }
            .tile { min-height: 156px; padding: 20px; border-radius: 24px; }
            .tile-icon { font-size: 30px; }
            .tile-title { font-size: 18px; }
            .tile-sub { font-size: 12px; }
        }
        .tile-amber { background: linear-gradient(135deg, #FBBF24 0%, #FB923C 55%, #F43F5E 100%); color: #09090B; box-shadow: 0 12px 36px -16px rgba(251,146,60,.5); }
        .tile-amber:hover { box-shadow: 0 18px 50px -16px rgba(251,146,60,.65); }
        .hero-tile-light { background: rgba(255,255,255,.95); color: #09090B; border: 1px solid rgba(255,255,255,.04); }
        .hero-tile-light:hover { background: #fff; }
        .hero-tile-zinc { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.12); }
        .hero-tile-zinc:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
        .tile-dark { background: linear-gradient(135deg, #1f2937 0%, #0a0a0f 100%); color: #fff; border: 1px solid rgba(255,255,255,.08); }
        .tile-dark:hover { box-shadow: 0 18px 50px -18px rgba(0,0,0,.55); border-color: rgba(255,255,255,.15); }
        .tile-badge { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

        .scroll-cue { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; }
        .scroll-cue:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
        .scroll-cue-arrow { animation: bounceY 1.6s ease-in-out infinite; }
        @keyframes bounceY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

        .feed-peek { background: var(--cream); margin-top: -42px; padding-top: 8px; border-top-left-radius: 28px; border-top-right-radius: 28px; position: relative; z-index: 5; }

        /* V2_R4 mobile fixes */

        /* ETAP_H1_BOTTOMNAV_v1 css — Glass Pill + FAB bottom-nav */
/* Phase B: NAV_CSS_BLOCK
   Новые CSS-переменные (scoped в .nav-pill-glass — НЕ загрязняют :root):
     --nav-bg          фон pill (тёмное стекло)
     --nav-border      амбер-обводка
     --nav-idle        цвет иконок/подписей в idle
     --nav-active      акцентный цвет (= --amber)
     --nav-fab-shadow  glow вокруг FAB
*/
.nav-pill-glass{
  --nav-bg: rgba(10,10,15,.72);
  --nav-border: rgba(251,191,36,.20);
  --nav-idle: rgba(250,247,240,.68);
  --nav-active: var(--amber);
  --nav-fab-shadow: 0 8px 24px rgba(251,191,36,.45), 0 2px 6px rgba(244,63,94,.25);

  position:fixed; left:12px; right:12px;
  bottom:max(12px, env(safe-area-inset-bottom));
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 6px;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-radius:28px;
  border:1px solid var(--nav-border);
  box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.nav-pill-glass .nav-item{
  flex:1 1 0; min-width:48px; min-height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:6px 4px;
  color:var(--nav-idle); text-decoration:none; position:relative;
  transition:color 200ms cubic-bezier(.16,1,.3,1), transform 120ms ease-out;
}
.nav-pill-glass .nav-item svg{
  width:22px; height:22px;
  stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform 200ms cubic-bezier(.16,1,.3,1);
}
.nav-pill-glass .nav-item span{
  font-size:10px; font-weight:600; letter-spacing:.01em; line-height:1; opacity:.9;
}
.nav-pill-glass .nav-item:active{transform:scale(.94)}
.nav-pill-glass .nav-item.is-active{color:var(--nav-active)}
.nav-pill-glass .nav-item.is-active svg{transform:translateY(-1px)}
.nav-pill-glass .nav-item.is-active::after{
  content:''; position:absolute; bottom:4px;
  width:4px; height:4px; border-radius:50%;
  background:var(--nav-active);
  box-shadow:0 0 8px rgba(251,191,36,.7);
  animation:navDotIn 200ms cubic-bezier(.16,1,.3,1);
}
@keyframes navDotIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

.nav-pill-glass .fab-wrap{
  flex:0 0 auto; width:78px;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.nav-pill-glass .fab-amber{
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#FBBF24 0%,#FB923C 50%,#F43F5E 100%);
  box-shadow:var(--nav-fab-shadow), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transform:translateY(-14px);
  transition:transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms;
  -webkit-tap-highlight-color:transparent;
}
.nav-pill-glass .fab-amber::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(251,191,36,.35), transparent 70%);
  z-index:-1; opacity:.8; pointer-events:none;
}
.nav-pill-glass .fab-amber:hover{
  transform:translateY(-16px) scale(1.04);
  box-shadow:0 14px 34px rgba(251,191,36,.55), 0 2px 6px rgba(244,63,94,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-pill-glass .fab-amber:active{transform:translateY(-14px) scale(.95)}
.nav-pill-glass .fab-amber svg{
  width:26px; height:26px;
  stroke:#0a0a0f; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  fill:#0a0a0f;
}

@media (min-width: 768px){ .nav-pill-glass{display:none} }
@media (prefers-reduced-motion: reduce){
  .nav-pill-glass *,
  .nav-pill-glass *::after{ transition:none !important; animation:none !important }
}

/* PB24-target: padding-bottom для основного контента под Glass Pill+FAB.
   96px = 64 (pill) + 14 (FAB-выступ translateY) + 12 (нижний gap) + 6 запас.
   На desktop nav скрыт → возвращаем 0, чтобы не было пустого хвоста. */
body{ padding-bottom: 96px !important; }
@media (min-width: 768px){ body{ padding-bottom: 0 !important; } }
        /* /ETAP_H1_BOTTOMNAV_v1 css */