:root{
    --ink:#0B1023;
    --ink-2:#141922;
    --ink-3:#1D2430;
    --signal:#00D4B4;
    --signal-dim:#049073;
    --paper:#ECEBE6;
    --paper-dim:#8B92A0;
    --danger:#FF6B57;
    --danger-dim:#A83424;
    --font-display:'Onest',system-ui,sans-serif;
    --font-body:'Onest',system-ui,sans-serif;
    --font-mono:'JetBrains Mono',monospace;
    --edge:1px solid rgba(236,235,230,0.08);
    color-scheme: dark;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  input{font:inherit;color:inherit;}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  :focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

  .bg-texture{position:fixed;inset:0;z-index:-1;pointer-events:none;}
  .bg-texture svg{width:100%;height:100%;display:block;}

  .wrap{max-width:960px;margin:0 auto;padding-inline:20px;}
  @media(min-width:768px){.wrap{padding-inline:40px;}}

  /* ===== Раздел 1 — логотип ===== */
  .hero{
    padding:76px 20px 40px;
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .hero__mark{
    display:flex;align-items:center;gap:14px;
    opacity:0;
  }
  .hero__glyph{
    width:44px;height:44px;border-radius:12px;
    background:var(--ink-2);border:var(--edge);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;font-size:22px;
    color:var(--signal);
  }
  .hero__word{
    font-family:var(--font-display);font-weight:600;
    font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:0.01em;
  }
  .hero__logo{width:min(52vw,190px);height:auto;}
  @media (prefers-reduced-motion: no-preference){
    .hero__mark{animation:flicker-in 1.4s ease-out forwards;}
  }
  @media (prefers-reduced-motion: reduce){
    .hero__mark{opacity:1;}
  }
  @keyframes flicker-in{
    0%{opacity:0;}
    8%{opacity:1;}
    12%{opacity:0.2;}
    20%{opacity:1;}
    24%{opacity:0.4;}
    32%{opacity:1;}
    100%{opacity:1;}
  }
  .hero__cue{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    color:var(--paper-dim);opacity:0.6;
  }

  /* ===== Раздел 2 — панч ===== */
  .punch{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding-block:10px 56px;position:relative;
  }
  .punch__headline{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(1.5rem,5.5vw,2.7rem);line-height:1.12;letter-spacing:-0.01em;
    max-width:23ch;margin:0 auto;
  }
  .punch__end{white-space:nowrap;}
  .punch__typed{color:var(--signal);}
  .punch__cursor{
    display:inline-block;width:3px;height:0.78em;
    background:var(--signal);margin-left:3px;vertical-align:-0.08em;
  }
  @media (prefers-reduced-motion: no-preference){
    .punch__cursor{animation:caret-blink 1s step-end infinite;}
  }
  @media (prefers-reduced-motion: reduce){
    .punch__cursor{display:none;}
  }
  @keyframes caret-blink{
    0%,50%{opacity:1;}
    50.01%,100%{opacity:0;}
  }
  /* ===== Раздел 3 — тумблер ===== */
  .switch-section{
    padding-block:8px 0;text-align:center;position:relative;z-index:3;
  }
  .switch{
    position:relative;display:inline-flex;gap:4px;
    padding:6px;border-radius:20px;
    background:var(--ink-2);border:var(--edge);
    max-width:100%;
    margin-bottom:-30px;
  }
  .switch__thumb{
    position:absolute;top:6px;left:6px;bottom:6px;
    width:calc(50% - 6px);border-radius:15px;
    background:var(--ink-3);
    transition:transform 0.45s cubic-bezier(.65,0,.35,1);
    z-index:0;
  }
  .switch--on .switch__thumb{transform:translateX(100%);}
  .switch__option{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:16px 18px;border-radius:15px;
    width:min(150px,40vw);
  }
  .switch__option svg{width:26px;height:26px;}
  .switch__option-icon{color:var(--paper);}
  .switch__label{font-size:0.85rem;color:var(--paper-dim);}
  .switch__option.is-active .switch__label{color:var(--paper);}
  .switch__option--pulse{position:relative;}
  .switch__option--pulse::after{
    content:'';position:absolute;inset:-4px;border-radius:19px;
    border:1.5px solid var(--signal);opacity:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .switch__option--pulse::after{animation:ring-pulse 2.4s ease-out infinite;}
  }
  @keyframes ring-pulse{
    0%{opacity:0.55;transform:scale(0.96);}
    70%{opacity:0;transform:scale(1.08);}
    100%{opacity:0;transform:scale(1.08);}
  }
  .switch.has-tried .switch__option--pulse::after{animation:none;opacity:0;}

  /* ===== Раздел 4 — реveal-сцена ===== */
  .reveal{padding-block:0;position:relative;z-index:2;}
  .stage{
    position:relative;overflow:hidden;
    border-radius:24px;border:var(--edge);
    min-height:clamp(280px,36vw,340px);
    background:radial-gradient(circle at 50% 28%, var(--ink-2), var(--ink) 72%);
    transition:background 0.6s ease;
    touch-action:none;
  }
  .stage.is-active,
  .stage[data-state="on"]{
    background:rgba(11,16,35,0.80);
  }
  .stage__content{
    position:relative;z-index:1;height:100%;
    display:grid;grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:"left center right" ". bottom .";
    align-items:start;justify-items:stretch;align-content:start;
    row-gap:clamp(16px,18vw - 70px,60px);column-gap:clamp(10px,3.5vw,24px);
    padding:clamp(52px,10vw,76px) clamp(14px,4vw,32px) clamp(18px,3vw,24px);
    max-width:640px;margin-inline:auto;
  }
  .tile{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;width:100%;min-width:0;}
  .tile__label{width:100%;max-width:min(150px,42vw);margin-inline:auto;position:relative;z-index:1;}
  .tile--primary{grid-area:center;}
  .tile--left{grid-area:left;}
  .tile--bottom{grid-area:bottom;}
  .tile--right{grid-area:right;}
  .tile__icon{
    position:relative;width:clamp(44px,9vw,60px);height:clamp(44px,9vw,60px);
    display:flex;align-items:center;justify-content:center;
  }
  .tile__icon svg{width:100%;height:100%;}
  .icon-layer{position:absolute;inset:0;transition:opacity 0.5s ease, transform 0.5s ease;}
  .icon-layer--off{color:var(--danger);opacity:1;transform:scale(1);}
  .icon-layer--on{color:var(--signal);opacity:0;transform:scale(0.8);}
  .stage[data-state="on"] .icon-layer--off{opacity:0;transform:scale(0.8);}
  .stage[data-state="on"] .icon-layer--on{opacity:1;transform:scale(1);}
  .tile--primary .icon-layer--off{color:var(--paper);}
  .tile--primary .icon-layer--on{color:var(--signal);}
  .tile--primary .icon-layer--on::after{content:'';}
  .pulse-ring{
    position:absolute;inset:-6px;border-radius:50%;z-index:-1;
    border:1.5px solid var(--signal);opacity:0;
  }
  .stage[data-state="on"] .tile--primary .pulse-ring{
    animation:ring-pulse-far 2.4s ease-out infinite;
  }
  .stage[data-state="on"] .tile--primary .pulse-ring--2{
    animation:ring-pulse-far 2.4s ease-out infinite;animation-delay:0.8s;
  }
  .stage[data-state="on"] .tile--primary .pulse-ring--3{
    animation:ring-pulse-far 2.4s ease-out infinite;animation-delay:1.6s;
  }
  @keyframes ring-pulse-far{
    0%{opacity:0.5;transform:scale(0.9);}
    100%{opacity:0;transform:scale(2.2);}
  }
  .tile__label{display:grid;font-size:clamp(0.78rem,2.4vw,0.92rem);margin-block:0.4em;}
  .label-layer{grid-row:1;grid-column:1;transition:opacity 0.5s ease;}
  .label-layer--off{opacity:1;color:var(--paper-dim);}
  .label-layer--on{opacity:0;color:var(--paper);}
  .stage[data-state="on"] .label-layer--off{opacity:0;}
  .stage[data-state="on"] .label-layer--on{opacity:1;}

  .stage__lines{position:absolute;inset:0;z-index:-1;pointer-events:none;}
  .conn-line{
    stroke-width:1;stroke-dasharray:3 6;transition:opacity 0.6s ease;
    vector-effect:non-scaling-stroke;
  }
  .conn-fade-edge{stop-color:var(--danger);stop-opacity:0;}
  .conn-fade-mid{stop-color:var(--danger);stop-opacity:0.24;}
  .stage[data-state="on"] .conn-fade-mid{stop-color:#6C6FF4;stop-opacity:0.33;}
  @keyframes conn-line-flow{to{stroke-dashoffset:-18;}}
  @media (prefers-reduced-motion: no-preference){
    .conn-line{animation:conn-line-flow 1.1s linear infinite;}
  }
  .conn-icon{
    position:absolute;left:50%;top:50%;z-index:-1;transform:translate(-50%,-50%);
    width:16px;height:16px;
  }
  @keyframes conn-icon-shimmer{
    0%,100%{opacity:0.55;}
    50%{opacity:1;}
  }
  @media (prefers-reduced-motion: no-preference){
    .conn-icon{animation:conn-icon-shimmer 2.4s ease-in-out infinite;}
    .conn-icon[data-conn-icon="right"]{animation-delay:0.6s;}
    .conn-icon[data-conn-icon="bottom"]{animation-delay:1.2s;}
  }

  .stage{cursor:grab;}
  .stage:active{cursor:grabbing;}

  .veil{
    position:absolute;inset:0;z-index:1;
    background:var(--ink);
    -webkit-mask-image:radial-gradient(circle var(--beam-r,140px) at var(--mx,50%) var(--my,30%), transparent 0%, transparent 42%, rgba(0,0,0,0.82) 74%, rgba(0,0,0,0.94) 100%);
    mask-image:radial-gradient(circle var(--beam-r,140px) at var(--mx,50%) var(--my,30%), transparent 0%, transparent 42%, rgba(0,0,0,0.82) 74%, rgba(0,0,0,0.94) 100%);
    transition:opacity 0.9s ease;
  }
  .stage[data-state="on"] .veil{opacity:0;}
  .no-mask .veil{display:none;}
  .beam-glow{
    position:absolute;z-index:1;pointer-events:none;
    width:280px;height:280px;border-radius:50%;
    left:var(--mx,50%);top:var(--my,30%);transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
    mix-blend-mode:screen;transition:opacity 0.4s ease;
  }
  .stage[data-state="on"] .beam-glow{opacity:0;}

  /* ===== Форма подписки ===== */
  .signup{max-width:440px;margin:36px auto 0;text-align:center;}
  .signup__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,4.5vw,2rem);}
  .signup__sub{color:var(--paper-dim);font-size:0.88rem;margin-top:6px;}
  .signup__form{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
  .signup__row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
  .signup__input{
    flex:1 1 200px;min-width:0;
    padding:14px 16px;border-radius:12px;
    background:var(--ink-2);border:1px solid rgba(236,235,230,0.14);
    color:var(--paper);font-size:0.92rem;
  }
  .signup__input::placeholder{color:var(--paper-dim);}
  .signup__input:invalid:not(:placeholder-shown){border-color:var(--danger-dim);}
  .signup__submit{
    padding:14px 22px;border-radius:12px;
    background:var(--signal);color:var(--ink);font-weight:600;
    white-space:nowrap;
  }
  .signup__submit:hover{background:#3EF0C9;}
  /* Вспомогательные ссылки внутри примечаний — без отдельного цвета, чуть ярче на hover */
  .link-quiet{
    color:inherit;text-decoration:underline;
    opacity:0.82;transition:opacity 0.15s ease;
  }
  .link-quiet:hover,
  .link-quiet:focus-visible{opacity:1;}

  .signup__consent-text{
    color:#5c6473;margin-block:0 40px;font-size:0.9em;
    line-height:1.35;margin-inline:auto;
  }
  .signup__msg{font-size:0.85rem;min-height:0;}
  .signup__msg:empty{display:none;}
  .signup__msg[data-tone="error"]{color:var(--danger);}
  .signup__msg[data-tone="success"]{
    color:var(--signal);margin-block:0 40px;font-size:0.9em;
  }
  .signup__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  /* ===== Раздел 5 — контакты ===== */
  .contact{padding-block:0 28px;text-align:center;}
  .contact__row{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:10px 28px;
  }
  .contact__link{
    display:inline-flex;align-items:center;gap:8px;
    font-size:0.86rem;
    color:var(--paper-dim);text-decoration:none;
  }
  .contact__link svg{width:15px;height:15px;flex:none;}
  .contact__link:hover{color:var(--paper);}

  /* ===== Футер ===== */
  .site-footer{
    border-top:var(--edge);padding:32px 20px 40px;
    text-align:center;color:var(--paper-dim);font-size:0.76rem;line-height:1.6;
  }
  .site-footer__links{margin:0 0 10px;}
  .site-footer__legal{margin:0;opacity:0.7;}