/* Глобальные токены и базовые стили проекта */
:root{
    --bg:#050507;--bg2:#0a0f1f;--glass:rgba(15,23,42,.7);--panel:#0C0F17;--card:rgba(30,41,59,.6);
    --text:#E5E7EB;--muted:#94a3b8;--border:rgba(255,255,255,.08);
    --p1:#8b5cf6;--p2:#22d3ee;--p3:#ec4899;--ok:#10b981;--warn:#f59e0b;
    --r:16px;--r-lg:22px;--shadow:0 12px 40px rgba(0,0,0,.45);
    /* Modular grid tokens */
    --grid-max: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --space: clamp(16px, 3vw, 28px);
    --gap: clamp(12px, 2.4vw, 24px);
    /* Radii presets */
    --radius-md:16px;--radius-lg:20px;--radius-xl:24px;
  }
  
  *{box-sizing:border-box}
  
  body{
    margin:0;
    background:
      radial-gradient(900px 260px at 80% -10%, rgba(139,92,246,.20), transparent 60%),
      radial-gradient(900px 260px at 15% -20%, rgba(34,211,238,.14), transparent 60%),
      linear-gradient(180deg,var(--bg2),#0f172a);
    color:var(--text);
    font:400 15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    overflow-x:hidden; /* защита от горизонтального скролла из-за 100vw-полотен */
  }
  
  a{color:inherit;text-decoration:none}
  
  /* Контейнер и модульная сетка страницы */
  .container{width:100%;max-width:var(--grid-max, 1200px);margin:0 auto;padding-inline:var(--gutter, 20px)}
  .page{display:grid;grid-template-columns:minmax(var(--gutter,20px),1fr) minmax(0, var(--grid-max,1200px)) minmax(var(--gutter,20px),1fr)}
  .page > *{grid-column:2}
  .full-bleed{grid-column:1 / -1}
  
  /* Floating Telegram button */
  .tg-fab{
    position:fixed;
    right:clamp(32px, 3vw, 18px);
    bottom:clamp(34px, 3.5vw, 20px);
    width:56px;
    height:56px;
    border-radius:50%;
    box-sizing:border-box;
    display:grid;
    place-items:center;
    overflow:hidden; /* ensure highlights don't bleed outside */
    /* Brand blend (p1→p2 with hint of p3) */
    background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .18), transparent 45%), linear-gradient(135deg, var(--p2) 10%, #237dac 70%, #2a8cbf 120%);
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.18);
    z-index:999;
    transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
    contain: layout paint;
    transform: translateZ(0);
  }
  .tg-fab i{font-size:24px;line-height:1;color:inherit}
  /* Soft outer glow matching brand */
  .tg-fab::before{
    content:"";
    position:absolute;inset:-6px;pointer-events:none;border-radius:inherit;
    background:conic-gradient(from 0deg, var(--p1), var(--p2), var(--p3), var(--p1));
    filter:blur(12px);opacity:.22;transition:opacity .25s ease;
  }
  /* Animated highlight sweep */
  .tg-fab::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.32) 50%, transparent 58%);
    transform: translateX(-90%) rotate(0.0001deg);
    mix-blend-mode: screen; opacity:.38;
    filter: blur(.5px);
    will-change: transform;
    animation: tg-gleam 3.2s linear infinite alternate;
  }
  @keyframes tg-gleam{ 0%{transform:translateX(-95%) rotate(0.0001deg)} 100%{transform:translateX(95%) rotate(0.0001deg)} }
  @media (hover:hover){
    .tg-fab:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.55)}
    .tg-fab:active{transform:translateY(-1px) scale(.98)}
    .tg-fab:hover::before{opacity:.35}
  }
  @media (max-width: 480px){
    .tg-fab{width:52px;height:52px}
    .tg-fab i{font-size:22px}
  }
  /* Respect iOS safe areas */
  @supports (padding:max(0px)){
    .tg-fab{right: max(32px, env(safe-area-inset-right)); bottom: max(34px, env(safe-area-inset-bottom));}
  }
  @media (prefers-reduced-motion: reduce){
    .tg-fab{transition:none}
    .tg-fab::after{animation:none;opacity:.35;transform:none}
    @media (hover:hover){ .tg-fab:hover,.tg-fab:active{transform:none} }
  }