@property --p  { syntax:'<percentage>'; inherits:false; initial-value:0%; }
  @property --sc { syntax:'<color>';      inherits:false; initial-value:#f472b6; }

  :root{
    --bg:#050309;
    --ink:#f6f4ff; --ink-2:rgba(246,244,255,.64); --ink-3:rgba(246,244,255,.38);

    --vibe:#a78bfa; --roast:#fb923c; --crush:#f472b6; --xray:#38bdf8;
    --ex:#fb7185; --brand:#2dd4bf; --gold:#f5c249; --pulse:#818cf8;

    --font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
    --font-serif:Georgia,"Times New Roman",serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}

  body{
    font-family:var(--font-d);color:var(--ink);background:var(--bg);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }

  /* ================= BACKDROP ================= */
  .backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

  .backdrop .grid{position:absolute;left:-40%;right:-40%;top:52%;bottom:-4%;
    background:
      repeating-linear-gradient(90deg,rgba(167,139,250,.13) 0 1px,transparent 1px 64px),
      repeating-linear-gradient(0deg, rgba(167,139,250,.10) 0 1px,transparent 1px 46px);
    transform:perspective(480px) rotateX(63deg);
    transform-origin:50% 0;
    -webkit-mask:linear-gradient(180deg,transparent,#000 22%,rgba(0,0,0,.5) 70%,transparent);
            mask:linear-gradient(180deg,transparent,#000 22%,rgba(0,0,0,.5) 70%,transparent);
    animation:grid-run 3.2s linear infinite;
    will-change:background-position}
  .backdrop .horizon{position:absolute;left:0;right:0;top:50%;height:130px;transform:translateY(-55%);
    background:radial-gradient(60% 100% at 50% 100%,rgba(217,70,239,.22),transparent 70%)}

  .backdrop .blob{position:absolute;border-radius:50%;will-change:transform}
  .backdrop .blob:nth-child(3){width:76vmax;height:76vmax;left:-22vmax;top:-30vmax;
    background:radial-gradient(closest-side,rgba(124,58,237,.3),transparent 70%);
    animation:drift1 26s ease-in-out infinite alternate}
  .backdrop .blob:nth-child(4){width:60vmax;height:60vmax;right:-24vmax;top:-8vmax;
    background:radial-gradient(closest-side,rgba(217,70,239,.18),transparent 70%);
    animation:drift2 34s ease-in-out infinite alternate}

  .backdrop .grain{position:absolute;inset:0;opacity:.35;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px),
                     radial-gradient(rgba(255,255,255,.028) 1px,transparent 1.4px);
    background-size:5px 5px,9px 9px;
    background-position:0 0,3px 4px}

  .wrap{max-width:430px;margin:0 auto;padding:20px 22px 60px}

  /* ================= HEADER ================= */
  .head{display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px}
  .brand{display:flex;align-items:center;gap:11px}
  .mark{width:16px;height:34px;position:relative;flex:none;border-radius:999px;
    background:linear-gradient(180deg,var(--crush),var(--vibe) 55%,var(--xray));
    box-shadow:0 0 14px rgba(167,139,250,.7)}
  .mark::after{content:"";position:absolute;inset:2px 5px;border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.05))}
  .brand b{font-weight:800;font-size:17px;letter-spacing:-.01em}
  .secure{font-size:12px;color:var(--ink-3);letter-spacing:.02em}
  .secure b{color:var(--vibe);font-weight:600}

  /* ================= HERO TYPE ================= */
  .hero{padding:34px 0 6px;text-align:center}
  .hero .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.4em;color:var(--ink-3);
    text-transform:uppercase;margin-bottom:20px}
  .hero h1{font-weight:800;font-size:clamp(40px,12.5vw,54px);line-height:.95;letter-spacing:-.035em}
  .hero h1 .serif{
    display:block;font-family:var(--font-serif);font-style:italic;font-weight:700;
    font-size:clamp(64px,21vw,92px);line-height:1.02;letter-spacing:-.02em;margin-top:2px;
    background:linear-gradient(100deg,#c4b5fd,#f472b6 40%,#f5c249 75%,#c4b5fd);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:ink-flow 7s ease-in-out infinite}
  .hero p{max-width:32ch;margin:22px auto 0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}

  /* ================= THE RIFT (v4) ================= */
  .stage{position:relative;margin:36px auto 6px;width:100%;max-width:360px;height:560px}

  /* мягкий столб света ЗА контентом */
  .shaft{position:absolute;left:50%;top:-6px;bottom:34px;width:250px;transform:translateX(-50%);
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--sc) 22%,transparent),
      color-mix(in srgb,var(--sc) 9%,transparent) 42%,
      color-mix(in srgb,var(--sc) 4%,transparent) 72%,
      transparent 96%);
    -webkit-mask:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
            mask:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
    animation:portal-color 14s linear infinite, breathe 6s ease-in-out infinite;
    will-change:opacity}

  /* резкие сегменты луча — только НАД и ПОД контентом */
  .tip{position:absolute;left:50%;width:3px;transform:translateX(-50%);border-radius:999px;
    background:linear-gradient(180deg,transparent,var(--sc) 30%,#fff 55%,var(--sc) 80%,transparent);
    animation:portal-color 14s linear infinite, beam-flicker 5s ease-in-out infinite;
    filter:drop-shadow(0 0 9px var(--sc)) drop-shadow(0 0 30px color-mix(in srgb,var(--sc) 60%,transparent));
    will-change:opacity}
  .tip--top{top:-16px;height:92px}
  .tip--bot{bottom:44px;height:64px}

  .flare{position:absolute;left:50%;width:220px;height:64px;transform:translate(-50%,-50%);
    background:radial-gradient(closest-side,color-mix(in srgb,var(--sc) 55%,#fff 10%),transparent 70%);
    animation:portal-color 14s linear infinite, breathe 5s ease-in-out infinite;
    will-change:opacity}
  .flare--top{top:-16px}
  .flare--bot{top:auto;bottom:30px;transform:translate(-50%,50%)}

  /* контент вердикта */
  .readout{position:absolute;left:0;right:0;top:104px;bottom:126px}
  .scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;gap:17px;text-align:center;opacity:0}
  .scene .cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.32em;
    text-transform:uppercase;color:var(--c)}
  .scene .score{font-weight:800;font-size:96px;line-height:1;letter-spacing:-.05em;
    background:linear-gradient(180deg,#fff 30%,var(--c));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 6px 30px color-mix(in srgb,var(--c) 40%,transparent))}
  .scene .score small{font-size:20px;font-weight:600;letter-spacing:0;-webkit-text-fill-color:var(--ink-3)}
  .scene .verdict{font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.45;
    color:var(--ink);padding:0 10px}
  .scene .verdict::before{content:"«";color:var(--c);margin-right:2px}
  .scene .verdict::after{content:"»";color:var(--c);margin-left:2px}
  .scene .arch{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;
    padding:10px 20px;border-radius:999px;color:var(--c);
    border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
    background:color-mix(in srgb,var(--c) 8%,rgba(5,3,9,.6))}
  .scene--a{--c:var(--crush);animation:sceneA 14s ease-in-out infinite}
  .scene--b{--c:var(--xray);animation:sceneB 14s ease-in-out infinite}

  /* шкала скора */
  .scale{position:absolute;left:24px;right:24px;bottom:14px;height:2px;border-radius:999px;
    background:rgba(255,255,255,.1)}
  .scale::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:999px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--sc) 60%,transparent),var(--sc));
    box-shadow:0 0 12px var(--sc);
    animation:score-arc 14s ease-in-out infinite, portal-color 14s linear infinite}
  .scale i{position:absolute;top:8px;font-family:var(--font-mono);font-size:10px;
    letter-spacing:.1em;color:var(--ink-3);font-style:normal}
  .scale i:last-child{right:0}

  .caption{text-align:center;margin-top:26px;font-size:12.5px;color:var(--ink-3)}
  .caption b{color:var(--ink-2);font-weight:600}

  /* ================= CTA ================= */
  .cta-row{display:flex;justify-content:center;margin:40px 0 8px}
  .cta{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
    font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:#0b0614;
    text-decoration:none;padding:17px 34px;border-radius:999px;
    background:linear-gradient(100deg,#e9d5ff,#f472b6 55%,#f5c249);
    box-shadow:0 10px 40px -8px rgba(244,114,182,.55), 0 0 0 1px rgba(255,255,255,.14);
    transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .cta:active{transform:scale(.97)}
  .cta::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:34%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
    transform:skewX(-18deg);animation:shine 4.2s ease-in-out infinite}
  .cta svg{width:18px;height:18px}

  /* ================= KINETIC MARQUEE ================= */
  .kinetic{margin:52px -22px 10px;overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .kx{display:flex;width:max-content;align-items:baseline;gap:38px;padding:4px 0;white-space:nowrap}
  .kx--big{animation:slide 30s linear infinite;
    font-weight:800;font-size:44px;letter-spacing:-.02em;text-transform:uppercase;
    color:transparent;-webkit-text-stroke:1px rgba(246,244,255,.22)}
  .kx--big em{font-family:var(--font-serif);font-style:italic;text-transform:none;
    -webkit-text-stroke:0;letter-spacing:-.01em;
    background:linear-gradient(100deg,var(--vibe),var(--crush));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .kx--small{animation:slide 22s linear infinite reverse;
    font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;color:var(--ink-3);gap:26px}
  .kx--small b{color:var(--gold);font-weight:400}

  /* ================= READS ================= */
  .reads{margin-top:44px;display:flex;flex-direction:column;gap:18px}
  .reads-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.4em;color:var(--ink-3);
    text-transform:uppercase;text-align:center;margin-bottom:6px}

  .card{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
    border-radius:26px;padding:24px 24px 22px;
    border:1px solid transparent;
    background:
      linear-gradient(rgba(13,8,24,.82),rgba(13,8,24,.82)) padding-box,
      linear-gradient(155deg,color-mix(in srgb,var(--accent) 65%,transparent),rgba(255,255,255,.07) 42%,transparent 78%) border-box;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 48px -18px rgba(0,0,0,.8);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .card:hover{transform:translateY(-5px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 48px -18px rgba(0,0,0,.8),
      0 0 54px -12px color-mix(in srgb,var(--accent) 55%,transparent)}
  .card .ghost{position:absolute;right:-26px;top:-22px;width:150px;height:150px;color:var(--accent);
    opacity:.07;transform:rotate(12deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .card:hover .ghost{transform:rotate(4deg) scale(1.06)}
  .card h2{font-weight:800;font-size:21.5px;line-height:1.15;letter-spacing:-.015em;max-width:88%}
  .card p{margin-top:9px;font-size:14.5px;line-height:1.45;color:var(--ink-2);max-width:90%}
  .card .chip{display:inline-flex;align-items:center;gap:8px;margin-top:17px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent);padding:8px 14px;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
    background:color-mix(in srgb,var(--accent) 7%,transparent)}
  .card .chip svg{width:14px;height:14px}
  .card .chip .pro{color:var(--gold)}
  .card .go{position:absolute;right:20px;bottom:20px;width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
    transition:transform .35s,background .35s}
  .card:hover .go{transform:translateX(4px);background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .card .go svg{width:16px;height:16px}

  .foot{margin-top:40px;font-size:12.5px;line-height:1.6;color:var(--ink-3);text-align:center}
  .foot .cc{display:block;margin-top:12px;opacity:.8}

  /* ================= KEYFRAMES ================= */
  @keyframes grid-run{to{background-position:0 46px,0 46px}}
  @keyframes drift1{to{transform:translate(9vmax,7vmax) rotate(12deg)}}
  @keyframes drift2{to{transform:translate(-8vmax,10vmax) rotate(-10deg)}}
  @keyframes ink-flow{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
  @keyframes breathe{0%,100%{opacity:.65}50%{opacity:1}}
  @keyframes beam-flicker{0%,100%{opacity:1}45%{opacity:.82}55%{opacity:.95}70%{opacity:.85}}
  @keyframes shine{0%,55%{left:-34%}90%,100%{left:130%}}
  @keyframes slide{to{transform:translateX(-50%)}}
  @keyframes score-arc{
    0%{--p:0%} 9%{--p:72%} 46%{--p:72%}
    54%{--p:38%} 90%{--p:38%} 100%{--p:0%}}
  @keyframes portal-color{
    0%,46%{--sc:#f472b6} 54%,92%{--sc:#38bdf8} 100%{--sc:#f472b6}}
  @keyframes sceneA{
    0%{opacity:0;transform:translateY(8px)} 6%,44%{opacity:1;transform:none}
    52%,94%{opacity:0;transform:translateY(-8px)} 100%{opacity:0}}
  @keyframes sceneB{
    0%,48%{opacity:0;transform:translateY(8px)} 56%,90%{opacity:1;transform:none}
    98%,100%{opacity:0;transform:translateY(-8px)}}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important}
    .scale::before{--p:72%}
    .scene--a{opacity:1}
    .scene--b{opacity:0}
  }