:root{ --header-offset: 12px; --header-h: 60px;
  --bg:#9A9EAB; --bg-2:#BFC3CC; --text:#1F1B24; --muted:#5D535E;
  --accent:#DFE166; --accent-2:#EC96A4; --accent-2-30:rgba(236,150,164,.3);
  --white:#fff; --shadow:0 10px 24px rgba(31,27,36,.08); --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(154,158,171,.94), rgba(154,158,171,.82));backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid rgba(0,0,0,.06);padding:10px 0; margin:0; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.logo-badge{width:40px;height:40px;border-radius:12px;background:
  radial-gradient(120% 120% at 20% 20%, var(--accent) 0%, #FFE793 40%, var(--accent-2) 120%);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(255,215,77,.35);
  transform:scale(.9);animation:logoPop .55s ease-out forwards}
.logo-badge span{font-weight:900;color:#3A2B00;text-shadow:0 1px 0 rgba(255,255,255,.35)}
@keyframes logoPop{to{transform:scale(1)}}
.primary-nav{display:flex;gap:18px;flex-wrap:wrap}
.primary-nav a{padding:8px 10px;border-radius:10px}
.primary-nav a:hover{background:rgba(0,0,0,.06)}
.lang-switch{display:flex;gap:8px;align-items:center}
.lang-switch button{border:0;background:var(--white);padding:8px 12px;border-radius:10px;box-shadow:var(--shadow);cursor:pointer}
.lang-switch button.active{outline:2px solid var(--accent-2);}
.header-actions{display:flex;gap:10px;align-items:center}
.search-btn, .menu-btn{border:0;background:var(--white);padding:8px 12px;border-radius:10px;box-shadow:var(--shadow);cursor:pointer}
@media (max-width:860px){ .primary-nav{display:none} .menu-btn{display:inline-flex} }
@media (min-width:861px){ .menu-btn{display:none} }

.hero{position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:40px 0}
.hero-bg{position:absolute;inset:-25% -25% -25% -25%;z-index:-1;background:
  radial-gradient(80% 60% at 20% 20%, rgba(223,225,102,.45), transparent 60%),
  radial-gradient(55% 55% at 85% 35%, rgba(236,150,164,.25), transparent 60%),
  linear-gradient(120deg, #9A9EAB, #C5CAD1);
  filter:saturate(120%);animation:bgShift 24s ease-in-out infinite alternate}
@keyframes bgShift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-2%,2%,0)}}

h1{font-size:42px;line-height:1.07;margin:0 0 18px}
.sub{color:var(--muted);font-size:18px;margin:0 0 20px;max-width:60ch}

.badges{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 24px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--white);box-shadow:var(--shadow);font-size:13px}
.badge.pulse{animation:pulse 9s ease-in-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-2-30)}50%{box-shadow:0 0 0 10px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:12px;padding:12px 16px;font-weight:600;box-shadow:var(--shadow);transition:transform .18s ease, filter .18s ease}
.btn-primary{background:var(--accent)}
.btn-secondary{background:var(--white)}
.btn:hover{transform:translateY(-3px)}
.btn-primary:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(-1px)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--white);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(31,27,36,.12)}
.card h3{margin:6px 0 10px}
.card p{margin:0;color:var(--muted)}

.section{padding:36px 0}
.section h2{font-size:28px;margin:0 0 16px}

.newsletter{background:var(--bg-2);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input{flex:1;min-width:230px;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:12px}

footer{margin-top:36px;border-top:1px solid rgba(0,0,0,.06);background:#C8CDD4}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:24px 0}
.foot small{color:var(--muted)}
.foot a{color:var(--text)}

/* Mobile tweaks */
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr} .grid{grid-template-columns:1fr 1fr} .foot{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  h1{font-size:28px}
  .hero-inner{padding:28px 0}
  .grid{grid-template-columns:1fr}
  .grid .card{padding:14px}
  .hero .grid{display:none}
  .categories-toggle{display:inline-flex;margin-top:12px}
  .categories-sheet{display:none}
  .categories-sheet.open{display:block}
}

/* Off-canvas mobile menu */
.mobile-panel{position:fixed;inset:0 0 auto 0;top:calc(var(--header-h) + var(--header-offset));background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(8px);
  transform:translateY(-110%);transition:transform .25s ease;box-shadow:0 10px 24px rgba(0,0,0,.08);z-index:60}
.mobile-panel.open{transform:translateY(0)}
.mobile-panel nav{display:grid;gap:10px;padding:16px}
.mobile-panel a{padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.03)}

/* Search modal */
.search-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:80}
.search-modal.open{display:flex}
.search-box{width:min(820px,92vw);background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.2);padding:16px}
.search-box input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.1);}
.search-results{margin-top:12px;display:grid;gap:10px;max-height:min(60vh,560px);overflow:auto}
.search-results a{display:block;padding:12px;border-radius:12px;background:var(--bg-2);box-shadow:var(--shadow)}
.search-results em{background:rgba(223,225,102,.45);padding:0 2px;border-radius:3px}


/* ==== Reveal on scroll (progressive enhancement) ==== */
.will-reveal{opacity:0; transform: translateY(10px);}
.revealed{opacity:1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease;}
@media (prefers-reduced-motion: reduce){
  .will-reveal, .revealed{transition:none; transform:none; opacity:1;}
}

/* Buttons micro-glow */
.btn-primary{ transition: transform .18s ease, filter .18s ease, box-shadow .25s ease; }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(223,225,102,.35); filter:brightness(1.07); }

/* Snap sections so blocks are either fully visible or move to the next screen */
html{ scroll-behavior:smooth;  scroll-padding-top: calc(var(--header-h) + var(--header-offset)); }


/* === Overrides: remove scroll snap so секции не обрываются кусками === */
html{scroll-padding-top:0 !important}


/* breathing space below header */
.hero{padding-top:16px}


/* Paint safe-area above the sticky header so нет белой полосы на Mac */

/* Targeted snap only on home */