/* ============================================================
   FapTap landing v2 — неон-глянец, «из будущего».
   Поверх tokens.css + base.css (тема faptap). Только токены контракта.
   ============================================================ */

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  overflow-x:hidden;
  font-family:var(--font-sans);
  text-rendering:optimizeLegibility;
}

/* Браузерные поверхности — тоже наш дизайн */
::selection{background:color-mix(in srgb,var(--accent-solid) 40%,transparent);color:var(--text)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent-solid) 40%,var(--surface-2));border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-solid)}
:focus-visible{outline:2px solid var(--accent-solid);outline-offset:3px;border-radius:var(--r-sm)}

/* ---------- фон: аврора + зерно ---------- */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.aurora span:nth-child(1){width:58vw;height:58vw;left:-14vw;top:-18vw;background:radial-gradient(circle,#00aff0,transparent 66%);animation:drift1 22s var(--ease) infinite alternate}
.aurora span:nth-child(2){width:46vw;height:46vw;right:-12vw;top:8vh;background:radial-gradient(circle,#7a5cff,transparent 66%);animation:drift2 26s var(--ease) infinite alternate}
.aurora span:nth-child(3){width:40vw;height:40vw;left:24vw;bottom:-14vw;background:radial-gradient(circle,#ff3d8b,transparent 68%);opacity:.34;animation:drift3 30s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-7vw,10vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(6vw,-8vh,0) scale(1.2)}}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.05;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)}}

/* курсор-свет, только на мыши */
.cursor-glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-solid) 22%,transparent),transparent 62%);
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .4s var(--ease);will-change:transform}
@media (hover:hover) and (pointer:fine){.cursor-glow.on{opacity:1}}

/* ---------- типографика ---------- */
.display{font-family:var(--font-display);font-weight:800;line-height:.92;letter-spacing:-.045em;
  font-size:clamp(44px,8.2vw,124px);text-wrap:balance}
.display em{font-style:normal;color:var(--accent-solid)}
.h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(32px,4.6vw,64px);text-wrap:balance}
.lead{font-size:clamp(16px,1.35vw,20px);color:var(--text-muted);line-height:1.6;max-width:46ch}

/* ---------- навигация ---------- */
.nav{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:var(--sp-4);padding:9px 9px 9px 18px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--shadow-2);width:min(760px,calc(100vw - 28px))}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.03em;font-size:var(--fs-3);margin-right:auto}
.mark{width:30px;height:30px;border-radius:10px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:15px;
  box-shadow:0 6px 18px rgba(0,175,240,.45)}
.nav__age{font-size:var(--fs-1);font-weight:700;color:var(--accent-2);letter-spacing:.04em}

/* ---------- кнопки ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:700;font-size:var(--fs-2);letter-spacing:-.01em;
  padding:14px 26px;border-radius:var(--r-full);border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  overflow:hidden;min-height:48px}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:0 12px 34px rgba(0,175,240,.36)}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--primary:hover{box-shadow:0 18px 48px rgba(0,175,240,.5)}
.btn--ghost{background:color-mix(in srgb,var(--surface-2) 70%,transparent);color:var(--text);border-color:var(--line);
  backdrop-filter:blur(10px)}
.btn--ghost:hover{border-color:color-mix(in srgb,var(--accent-solid) 60%,transparent)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hero ---------- */
.wrap{width:min(1240px,100% - clamp(32px,6vw,80px));margin-inline:auto}
.hero{position:relative;padding:clamp(120px,17vh,190px) 0 clamp(40px,7vh,72px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero .lead{margin-top:var(--sp-5)}
.hero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.hero__meta{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-7);
  border-top:1px solid var(--line);padding-top:var(--sp-5)}
.hero__meta div{min-width:96px}
.hero__meta dt{font-size:var(--fs-1);color:var(--text-muted);letter-spacing:.02em;margin-bottom:4px}
.hero__meta dd{font-family:var(--font-display);font-weight:700;font-size:var(--fs-4);letter-spacing:-.03em}

.stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%}
.stage__ring{position:absolute;inset:6%;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent-solid) 30%,transparent);
  animation:spin 26s linear infinite}
.stage__ring:nth-of-type(2){inset:17%;border-style:dashed;border-color:color-mix(in srgb,var(--accent-2) 26%,transparent);animation-duration:18s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.stage__halo{position:absolute;inset:14%;border-radius:50%;background:var(--accent);filter:blur(60px);opacity:.55}
.stage img{position:relative;width:74%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  animation:bob 6s var(--ease) infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(-12px) rotate(-3deg)}50%{transform:translateY(12px) rotate(3deg)}}

/* ---------- бегущая строка ---------- */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 55%,transparent);padding:16px 0;margin-top:clamp(28px,5vh,56px)}
.ticker__row{display:flex;gap:var(--sp-6);width:max-content;animation:slide 26s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker span{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.7vw,22px);
  letter-spacing:-.02em;color:var(--text-muted);display:flex;align-items:center;gap:var(--sp-6);white-space:nowrap}
.ticker span i{width:7px;height:7px;border-radius:50%;background:var(--accent-solid);display:inline-block}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- секции ---------- */
.section{position:relative;padding:clamp(72px,12vh,140px) 0}
.section:last-of-type{padding-bottom:clamp(40px,6vh,72px)}
.section__head{max-width:56ch;margin-bottom:clamp(32px,5vh,64px)}
.section__head p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-3);line-height:1.6}

/* bento: блоки РАЗНОГО веса, не решётка одинаковых плиток */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px)}
.tile{position:relative;overflow:hidden;border-radius:clamp(18px,2vw,28px);border:1px solid var(--line);
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface-2) 92%,transparent));
  padding:clamp(20px,2.3vw,32px);display:flex;flex-direction:column;gap:var(--sp-3);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
  transform-style:preserve-3d}
.tile:hover{border-color:color-mix(in srgb,var(--accent-solid) 45%,transparent);box-shadow:var(--shadow-3)}
.tile::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(70px);
  background:var(--accent);opacity:0;transition:opacity .45s var(--ease);top:-90px;right:-70px;pointer-events:none}
.tile:hover::before{opacity:.35}
.tile > *{position:relative}
.tile h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(19px,1.7vw,26px)}
.tile p{color:var(--text-muted);font-size:var(--fs-2);line-height:1.6;max-width:44ch}
.tile--wide{grid-column:span 4}
.tile--tall{grid-column:span 2;grid-row:span 2}
.tile--half{grid-column:span 2}
.tile--third{grid-column:span 2}
.tile__ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent-solid) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-solid) 26%,transparent)}
.tile__ic svg{width:21px;height:21px;stroke:var(--accent-solid);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile--tall .tile__ic{background:color-mix(in srgb,var(--accent-2) 14%,transparent);border-color:color-mix(in srgb,var(--accent-2) 30%,transparent)}
.tile--tall .tile__ic svg{stroke:var(--accent-2)}
.tile--tall::before{background:radial-gradient(circle,var(--accent-2),transparent 70%)}
.tile__coin{margin-top:auto;align-self:center;width:min(72%,220px)}
.tile__coin img{width:100%;height:auto;filter:drop-shadow(0 22px 44px rgba(0,0,0,.55))}

/* ---------- старт: дорожка ---------- */
.track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:26px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-solid) 55%,transparent),transparent)}
.step{position:relative;padding-top:var(--sp-8)}
.step__dot{position:absolute;top:14px;left:0;width:26px;height:26px;border-radius:50%;
  background:var(--bg);border:1px solid color-mix(in srgb,var(--accent-solid) 55%,transparent);
  display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--font-display);color:var(--accent-solid)}
.step h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:var(--fs-5);margin-bottom:var(--sp-2)}
.step p{color:var(--text-muted);font-size:var(--fs-2);line-height:1.6}

/* ---------- финальный экран ---------- */
.final{position:relative;border-radius:clamp(22px,3vw,40px);overflow:hidden;border:1px solid var(--line);
  padding:clamp(40px,5.5vw,76px) clamp(24px,5vw,72px);text-align:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--bg) 96%,transparent))}
.final::before{content:"";position:absolute;width:70%;height:180%;left:15%;top:-60%;background:var(--accent);
  filter:blur(110px);opacity:.3;pointer-events:none}
.final > *{position:relative}
.final p{color:var(--text-muted);margin:var(--sp-4) auto var(--sp-6);max-width:46ch;font-size:var(--fs-3)}

/* ---------- футер ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(36px,5vh,56px) 0 clamp(26px,4vh,40px);margin-top:clamp(24px,4vh,48px)}
.foot__in{display:flex;justify-content:space-between;gap:var(--sp-6) var(--sp-7);flex-wrap:wrap;align-items:flex-start}
.foot__in > div:first-child{flex:1 1 380px;min-width:0}
.foot__note{max-width:46ch;color:var(--text-muted);font-size:var(--fs-1);line-height:1.65;margin-top:var(--sp-3)}
.foot__links{display:flex;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap;align-items:flex-start;font-size:var(--fs-2);
  flex:0 1 auto;max-width:100%;justify-content:flex-end}
.foot__links a{color:var(--text-muted);transition:color .25s var(--ease)}
.foot__links a:hover{color:var(--accent-solid)}

/* ---------- пункты меню в шапке ---------- */
.nav__links{display:flex;gap:var(--sp-4);margin-left:auto;margin-right:var(--sp-4);
  font-size:var(--fs-2);color:var(--text-muted)}
.nav__links a{transition:color .25s var(--ease)}
.nav__links a:hover{color:var(--accent-solid)}
@media (max-width:720px){.nav__links{display:none}}

/* ---------- внутренние страницы: /guide, /faq, /rules ---------- */
/* навигация у этого лендинга fixed — под неё нужен запас сверху,
   иначе заголовок страницы уезжает под панель */
.doc{max-width:74ch;margin:0 auto;padding:calc(var(--sp-9) + 40px) 0 var(--sp-8)}
.doc h1{font-family:var(--font-display);font-size:var(--fs-8);font-weight:800;line-height:1.05;
  letter-spacing:-.02em}
.doc__lede{margin-top:var(--sp-5);color:var(--text-muted);font-size:var(--fs-4);line-height:1.7}
.doc h2{margin-top:var(--sp-7);font-family:var(--font-display);font-size:var(--fs-5);font-weight:700}
.doc p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-3);line-height:1.75}
.doc ul{margin-top:var(--sp-4);padding-left:var(--sp-5);color:var(--text-muted);font-size:var(--fs-3);line-height:1.75}
.doc li{margin-top:var(--sp-2)}
.doc li::marker{color:var(--accent-solid)}
.doc .ink{color:var(--accent-solid);border-bottom:1px solid color-mix(in srgb,var(--accent-solid) 45%,transparent)}
.doc__back{display:inline-flex;gap:var(--sp-2);margin-top:var(--sp-7);font-size:var(--fs-1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.doc__back:hover{color:var(--accent-solid)}
.doc__nav{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--line);font-size:var(--fs-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.doc__nav a:hover{color:var(--accent-solid)}

/* ---------- появление при скролле: один авторский вход ---------- */
.rise{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rise.in{opacity:1;transform:none;filter:none}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .hero{padding-top:clamp(96px,13vh,132px)}
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .stage{order:-1;max-width:248px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile--wide,.tile--tall,.tile--half,.tile--third{grid-column:span 2;grid-row:auto}
  .track{grid-template-columns:1fr;gap:var(--sp-6)}
  .track::before{display:none}
  .step{padding-top:var(--sp-7)}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile--wide,.tile--tall,.tile--half,.tile--third{grid-column:span 1}
  .hero__cta .btn{width:100%}
  .nav{padding-left:14px;gap:var(--sp-3)}
  .nav .btn{padding:11px 18px}
  .hero__meta{gap:var(--sp-4)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aurora span,.grain,.stage img,.stage__ring,.ticker__row{animation:none}
  .rise{opacity:1;transform:none;filter:none;transition:none}
  .btn--primary::after{display:none}
}