:root{
    --theatre:#0C0D12;
    --bar:#050507;
    --hole:#16171d;
    --leader:#ECE3CE;
    --amber:#E2A33C;
    --red:#C8443B;
    --muted:#7C7E8A;
    --line:rgba(236,227,206,.14);
    --panel:rgba(236,227,206,.025);
    --bar-h:46px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html,body{min-height:100%}

  body{
    font-family:"Oswald",system-ui,sans-serif;
    background:var(--theatre);
    color:var(--leader);
    display:flex;flex-direction:column;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  /* виньетка + зерно */
  .grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:40}
  .vignette{background:radial-gradient(130% 100% at 50% 30%,transparent 45%,rgba(0,0,0,.5) 100%)}
  .grain{
    opacity:.045;mix-blend-mode:screen;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain .5s steps(2) infinite;
  }
  @keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-6px,4px)}100%{transform:translate(4px,-5px)}}

  /* полосы кадра с перфорацией */
  .letterbox{
    position:fixed;left:0;right:0;height:var(--bar-h);background:var(--bar);z-index:30;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='46'%3E%3Crect x='6' y='16' width='12' height='14' rx='3.5' fill='%2316171d'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
  }
  .letterbox.top{top:0;transform:translateY(-100%);animation:slideDown .9s .15s cubic-bezier(.2,.7,.2,1) forwards}
  .letterbox.bottom{bottom:0;transform:translateY(100%);animation:slideUp .9s .15s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes slideDown{to{transform:translateY(0)}}
  @keyframes slideUp{to{transform:translateY(0)}}

  .wrap{width:100%;max-width:920px;margin:0 auto;padding:0 24px}

  /* шапка */
  .top-meta{
    position:sticky;top:var(--bar-h);z-index:20;
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 0;background:linear-gradient(var(--theatre) 70%,transparent);
    font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;
    color:var(--muted);text-transform:uppercase;
    opacity:0;animation:fade 1s .8s forwards;
  }
  .brand{display:inline-flex;align-items:center;gap:8px;color:var(--leader)}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);
    animation:blink 1.4s steps(1) infinite}
  @keyframes blink{50%{opacity:.25}}
  #tc{opacity:.7}

  /* hero */
  .hero{
    padding-top:calc(var(--bar-h) + 6px);
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:18px;padding-bottom:14px;
  }
  .leader-wrap{
    position:relative;width:128px;height:128px;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:scale(.92);animation:pop 1s .5s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .leader-wrap::before{
    content:"";position:absolute;left:-50vw;right:-50vw;top:50%;height:1px;
    background:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent);
  }
  .reticle{width:100%;height:100%;overflow:visible}
  .reticle .ring{fill:none;stroke:var(--leader);stroke-opacity:.34}
  .reticle .ring2{fill:none;stroke:var(--leader);stroke-opacity:.16}
  .reticle .tick{stroke:var(--leader);stroke-opacity:.5;stroke-width:2}
  .reticle .cross{stroke:var(--leader);stroke-opacity:.3;stroke-width:1.4}
  .reticle .core{fill:var(--amber);opacity:.85}
  .reticle .wipe{fill:var(--amber);opacity:.09;transform-origin:100px 100px;animation:spin 5s linear infinite}
  .reticle .hand{stroke:var(--red);stroke-width:2.4;transform-origin:100px 100px;animation:spin 5s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .title{
    font-weight:600;text-transform:uppercase;
    font-size:clamp(38px,8vw,76px);line-height:.96;letter-spacing:.02em;
    opacity:0;animation:fade 1s .95s forwards;
  }
  .title b{color:var(--amber);font-weight:600}
  .subtitle{
    font-weight:300;font-size:clamp(15px,2.4vw,19px);line-height:1.4;max-width:38ch;
    color:#F3EEDF;text-shadow:0 1px 3px rgba(0,0,0,.9);
    opacity:0;animation:fade 1s 1.15s forwards;
  }
  .program{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
    font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);
    opacity:0;animation:fade 1s 1.3s forwards;
  }
  .program span{color:var(--leader)}

  /* секция рецензий */
  .section-head{
    display:flex;align-items:baseline;gap:14px;margin:42px 0 22px;
    font-family:"JetBrains Mono",monospace;
  }
  .section-head h2{font-family:"Oswald";font-weight:600;text-transform:uppercase;
    font-size:clamp(20px,4vw,28px);letter-spacing:.04em}
  .section-head .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .section-head .fill{flex:1;height:1px;background:var(--line)}

  .reviews{display:grid;grid-template-columns:1fr 1fr;gap:18px}

  .card{
    position:relative;background:var(--panel);
    border:1px solid var(--line);border-radius:4px;
    padding:22px 24px 22px 38px;
    transition:border-color .25s,transform .25s;
    opacity:0;transform:translateY(14px);
  }
  .card.in{animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .card:hover{border-color:rgba(226,163,60,.4);transform:translateY(-3px)}
  /* перфорация плёнки по левому краю карточки */
  .card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='26'%3E%3Crect x='5' y='8' width='8' height='10' rx='2.5' fill='%2316171d'/%3E%3C/svg%3E");
    background-repeat:repeat-y;border-right:1px solid var(--line);
  }
  .card .label{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .card h3{font-weight:600;font-size:23px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
  .card .credit{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;
    color:var(--muted);margin:4px 0 12px;text-transform:uppercase}
  .stars{color:var(--amber);font-size:15px;letter-spacing:3px;margin-bottom:12px}
  .stars .empty{color:rgba(236,227,206,.2)}
  .stars .num{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
    letter-spacing:.06em;margin-left:8px}
  .card p.body{font-weight:300;font-size:15px;line-height:1.55;color:#E7E2D4}
  .verdict{margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:11px;
    letter-spacing:.05em;text-transform:uppercase;color:var(--leader);
    padding-top:12px;border-top:1px solid var(--line)}
  .verdict b{color:var(--amber);font-weight:500}

  /* подписка */
  .subscribe{
    margin:48px auto 0;max-width:460px;text-align:center;
  }
  .subscribe p{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .row{display:flex;gap:8px}
  .row input{
    flex:1;min-width:0;background:rgba(236,227,206,.04);
    border:1px solid var(--line);border-radius:3px;
    color:var(--leader);font-family:"JetBrains Mono",monospace;font-size:14px;
    padding:13px 14px;outline:none;transition:border-color .2s,background .2s;
  }
  .row input::placeholder{color:#5c5e68}
  .row input:focus-visible{border-color:var(--amber);background:rgba(226,163,60,.06)}
  .row button{
    background:var(--amber);color:#1a1305;border:none;border-radius:3px;cursor:pointer;
    font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;padding:0 22px;white-space:nowrap;transition:transform .12s,filter .2s;
  }
  .row button:hover{filter:brightness(1.1)}
  .row button:active{transform:translateY(1px)}
  .row button:focus-visible{outline:2px solid var(--leader);outline-offset:2px}
  .done{color:#F3EEDF;font-family:"Oswald",sans-serif;font-weight:300;font-size:16px;
    text-shadow:0 1px 3px rgba(0,0,0,.9)}

  .foot{
    text-align:center;margin:46px 0 calc(var(--bar-h) + 20px);
    font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);
  }

  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pop{to{opacity:1;transform:scale(1)}}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}

  @media (max-width:640px){
    :root{--bar-h:34px}
    .reviews{grid-template-columns:1fr}
    .brand span.long{display:none}
    .program{gap:6px 16px}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important}
    .letterbox.top,.letterbox.bottom{transform:none}
    .top-meta,.title,.subtitle,.program,.leader-wrap{opacity:1;transform:none}
    .card{opacity:1;transform:none}
    .grain{display:none}
  }