:root{
    --bg0:#05060a;
    --bg1:#070a14;
    --text:#f3f6ff;
    --muted:rgba(243,246,255,.68);
  
    --shadow:rgba(0,0,0,.45);
    --glow:rgba(255,255,255,.06);
  }
  
  *{ box-sizing:border-box; }

  html, body{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  
    -webkit-touch-callout: none; /* iOS: отключает меню "копировать/выделить" по долгому тапу */
  }
  
  html,body{
    height:100%;
    margin:0;
    width:100%;
    overflow:hidden;
    overscroll-behavior:none;
    touch-action:none;
  }
  
  body{
    background: radial-gradient(1200px 800px at 50% 15%, var(--bg1), var(--bg0));
    color:var(--text);
    font-family: "Unbounded", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    position:fixed;
    inset:0;
    -webkit-text-size-adjust: 100%;
  }
  
  .stage{
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    padding:24px;
    overflow:hidden;
  }
  
  .bg{
    position:absolute;
    inset:-20%;
    pointer-events:none;
    filter:saturate(1.1);
  }
  
  .orb{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:999px;
    filter: blur(60px);
    opacity:.75;
    mix-blend-mode: screen;
    will-change: transform;
    transform: translate3d(0,0,0);
    animation: drift 26s ease-in-out infinite;
  }
  
  .orb--a{
    background: radial-gradient(circle at 30% 30%, rgba(255,96,169,.95), rgba(255,96,169,0) 62%);
    top: 10%;
    left: 12%;
    animation-duration: 34s;
  }
  .orb--b{
    background: radial-gradient(circle at 30% 30%, rgba(64,168,255,.95), rgba(64,168,255,0) 62%);
    top: 22%;
    right: 8%;
    animation-duration: 38s;
    animation-delay: -8s;
  }
  .orb--c{
    background: radial-gradient(circle at 30% 30%, rgba(120,255,170,.9), rgba(120,255,170,0) 62%);
    bottom: 8%;
    left: 18%;
    animation-duration: 42s;
    animation-delay: -14s;
  }
  .orb--d{
    background: radial-gradient(circle at 30% 30%, rgba(255,214,90,.92), rgba(255,214,90,0) 62%);
    bottom: 16%;
    right: 16%;
    animation-duration: 36s;
    animation-delay: -19s;
  }
  .orb--e{
    background: radial-gradient(circle at 30% 30%, rgba(165,110,255,.92), rgba(165,110,255,0) 62%);
    top: 48%;
    left: 44%;
    width: 640px;
    height: 640px;
    animation-duration: 48s;
    animation-delay: -27s;
  }
  
  @keyframes drift{
    0%   { transform: translate3d(0,0,0) scale(1); }
    25%  { transform: translate3d(90px,-70px,0) scale(1.05); }
    50%  { transform: translate3d(-80px,-20px,0) scale(.98); }
    75%  { transform: translate3d(70px,85px,0) scale(1.04); }
    100% { transform: translate3d(0,0,0) scale(1); }
  }
  
  .stage::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(1200px 900px at 50% 50%, rgba(255,255,255,.04), rgba(0,0,0,0) 60%),
      radial-gradient(900px 700px at 50% 20%, rgba(255,255,255,.05), rgba(0,0,0,0) 55%),
      radial-gradient(800px 600px at 50% 80%, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
    pointer-events:none;
  }
  
  .stage::after{
    content:"";
    position:absolute;
    inset:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
    opacity:.06;
    mix-blend-mode: overlay;
    pointer-events:none;
  }
  
  /* Контент по центру */
  .content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width: 920px;
    padding: 28px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgb(0 0 0 / 31%), rgba(255, 255, 255, .02));
    box-shadow:
      0 18px 60px var(--shadow),
      inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    opacity:0;
    will-change: opacity;
  }
  
  .content.is-visible{
    animation: panelFadeIn 420ms ease-out forwards;
  }
  
  @keyframes panelFadeIn{
    to{ opacity:1; }
  }
  
  .title{
    margin: 0 0 14px 0;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  
    font-size: clamp(26px, 4.2vw, 54px);
    line-height: 1.05;
  
    text-shadow:
      0 0 24px rgba(255,255,255,.08),
      0 8px 50px rgba(0,0,0,.35);
  }
  
  .subtitle{
    margin: 0;
    font-weight: 600;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.55;
  }
  
  .subtitle + .subtitle{
    margin-top: 10px;
  }
  
  .subtitle--muted{
    color: var(--muted);
  }
  
  /* Эффект печати */
  [data-type]{
    white-space: pre-wrap;
  }
  
  .is-typing::after{
    content:"";
    display:inline-block;
    width: 10px;
    height: 1.05em;
    margin-left: 6px;
    vertical-align: -0.15em;
    background: rgba(243,246,255,.9);
    border-radius: 2px;
    animation: caretBlink 900ms steps(1) infinite;
  }
  
  @keyframes caretBlink{
    50%{ opacity:0; }
  }
  
  /* Canvas для частиц */
  .cursor-fx{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
  }
  
  /* prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce){
    .orb{ animation: none; }
    .content{ opacity:1; }
    .content.is-visible{ animation:none; }
    .is-typing::after{ animation:none; opacity:1; }
  }