/* Общая база: сброс, типографика, кнопки, чипы, стекло, экраны-карточки */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(24px + env(safe-area-inset-top));background:var(--color-background)}
body{margin:0;min-height:100svh;background:var(--color-background);color:var(--color-text);font-family:var(--ff-text);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit}
::selection{background:var(--color-primary);color:var(--color-primary-foreground)}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* зерно поверх всего: статичный шум, не анимируется */
body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* display: узкий плотный гротеск, заглавные */
.f-display{font-family:var(--ff-display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.9;font-synthesis:none}
.h2{font-family:var(--ff-display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:0;font-size:clamp(52px,7.6vw,124px);color:var(--color-text)}
.num{font-family:var(--ff-display);font-weight:900;font-variant-numeric:tabular-nums lining-nums;line-height:.92;letter-spacing:-.01em;text-transform:uppercase}

/* экран-карточка */
.screen{position:relative;margin:0 var(--gap) var(--gap);border-radius:calc(var(--r-screen) * var(--round));overflow:clip;isolation:isolate;background:var(--color-background);container-type:inline-size}
.screen--dark{background:linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 10%,var(--color-background)) 0%,var(--color-background) 46%,color-mix(in srgb,var(--color-primary) 15%,var(--color-background)) 100%)}
.screen__in{position:relative;padding:clamp(56px,7vw,104px) var(--pad-x)}

/* кнопки */
.btn{--bh:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--bh);padding:0 30px;border:0;border-radius:calc(var(--r-btn) * var(--round));background:var(--color-primary);color:var(--color-primary-foreground);font-family:var(--ff-display);font-weight:800;font-size:22px;line-height:1;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent);transition:background-color .25s,transform .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.btn--sm{--bh:42px;padding:0 20px;font-size:18px}
.btn--ghost{background:color-mix(in srgb,var(--color-text) 8%,transparent);color:var(--color-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-text) 22%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--color-disabled);color:var(--color-disabled-foreground);box-shadow:inset 0 0 0 1px var(--color-border-strong);cursor:not-allowed}
.btn.is-loading{pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;background:var(--color-primary-foreground);animation:btn-load 1s linear infinite}
@keyframes btn-load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
  .btn--ghost:hover{background:color-mix(in srgb,var(--color-text) 14%,transparent)}
}
.btn:active{background:var(--color-primary-pressed);transform:none}

/* чип с единицей или фактом, на светлом и тёмном */
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:calc(var(--r-chip) * var(--round));background:var(--color-primary);color:var(--color-primary-foreground);font-family:var(--ff-display);font-weight:800;font-size:clamp(15px,1.3vw,19px);line-height:1;letter-spacing:.03em;text-transform:uppercase}
.chip svg{width:1.15em;height:1.15em;flex:none}

/* круглая иконка */
.ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary) 68%,#fff),var(--color-primary));color:var(--color-primary-foreground);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent)}
.ico svg{width:22px;height:22px}

/* стеклянная плашка */
.pill{display:flex;align-items:center;gap:14px;padding:14px 26px 14px 14px;border-radius:calc(var(--r-pill) * var(--round));background:color-mix(in srgb,var(--color-surface) 58%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-text) 16%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-text) 12%,transparent),0 24px 50px -22px rgba(0,0,0,.65)}
.pill .ico{width:52px;height:52px}
.pill__txt{display:grid;gap:3px}
.pill__t{font-size:19px;font-weight:700;line-height:1.1;color:var(--color-text)}
.pill__s{font-size:16px;line-height:1.1;color:var(--color-text-muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Синеватая дымка около отдельных частей: текстура дыма (assets/smoke-*.svg) под маской, не угловое пятно.
   Переменные: --hz-l/t/w/h положение и размер относительно элемента, --hz-o сила, --hz-img картинка. */
.has-haze{isolation:isolate}
.has-haze--rel{position:relative}
.has-haze::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:var(--hz-l,-20%);top:var(--hz-t,-20%);width:var(--hz-w,140%);height:var(--hz-h,140%);background:var(--hz-img,url(../assets/smoke-a.webp)) center/100% 100% no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 22%,transparent 100%);mask-image:radial-gradient(closest-side,#000 22%,transparent 100%);opacity:clamp(0,calc(var(--hz-o,.7) * var(--haze)),1)}
.has-haze--b{--hz-img:url(../assets/smoke-b.webp)}