/* Slush — Style Reference : exact tokens */
:root {
  /* Colors */
  --color-carbon: #000000;
  --color-paper-white: #ffffff;
  --color-sky-wash: #dceeff;
  --color-concrete-gray: #cccccc;
  --color-soft-mist: #e9e9e9;
  --color-electric-blue: #4da2ff;
  --color-mint-pop: #55db9c;
  --color-lavender: #e9ccff;
  --color-ember: #fb4903;
  --color-sunburst: #ffd731;
  --color-voltage-violet: #5c4ade;

  /* Typography — Font Families */
  --font-lateral: 'Lateral', 'Anton', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-aeonik-pro: 'Aeonik Pro', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.56;
  --tracking-caption: -0.01px;
  --text-body-lg: 15px;
  --leading-body-lg: 1.39;
  --tracking-body-lg: -0.01px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.01px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.01px;
  --text-heading: 64px;
  --leading-heading: 1;
  --tracking-heading: -0.01px;
  --text-display: 200px;
  --leading-display: 0.8;
  --text-display-lg: 640px;
  --leading-display-lg: 0.75;

  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-128: 128px;
  --spacing-180: 180px;
  --spacing-224: 224px;

  --page-max-width: 1440px;
  --section-gap: 48px;
  --card-padding: 24px;

  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 30px;
  --radius-3xl-2: 40px;
  --radius-full: 1440px;
  --radius-full-2: 1500px;
  --radius-full-3: 1600px;

  --radius-nav: 1600px;
  --radius-body: 30px;
  --radius-cards: 20px;
  --radius-pills: 1600px;
  --radius-buttons: 1600px;
  --radius-wallet-icon: 16px;
  --radius-cards-elevated: 40px;

  --surface-sky-wash: #dceeff;
  --surface-paper-white: #ffffff;
  --surface-concrete-gray: #cccccc;
  --surface-sticker-surfaces: #e9ccff;
}

:root{
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --smooth-ease: cubic-bezier(.32,.72,0,1);
  --color-ease: cubic-bezier(.216,.62,.356,1);
  --elastic-ease-out: linear(0,0.5737 7.6%,0.8382 11.87%,0.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,0.9995 46.99%,0.9872 51.63%,0.9842 58.77%,1.0011 81.26%,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:initial}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--font-aeonik-pro);
  background:var(--color-paper-white);
  color:var(--color-carbon);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is--transitioning{height:100svh;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--color-carbon);color:var(--color-paper-white)}

/* loader как на slush.app .load-w */
.load-w{
  position:fixed;inset:0;z-index:999;
  background:var(--color-paper-white);
  display:grid;place-items:center;
  font-family:var(--font-lateral);font-weight:800;
  font-size:clamp(80px,22vw,260px);line-height:0.80;
  letter-spacing:-0.02em;
}
.load-w__inner{clip-path:inset(0 0 0 0)}

/* scrollbar hide как на slush.app */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}

/* MARQUEE — data-marquee как на slush.app (advanced, scroll-speed) */
.marquee{
  background:var(--color-carbon);
  color:var(--color-paper-white);
  overflow:hidden;white-space:nowrap;
  height:32px;display:flex;align-items:center;
  font-family:var(--font-aeonik-pro);
  font-weight:var(--font-weight-bold);
  font-size:12px;letter-spacing:0.032em;
  text-transform:uppercase;
  position:sticky;top:0;z-index:100;
  border-top:1px solid var(--color-carbon);
  border-bottom:1px solid var(--color-carbon);
}
.marquee__track{display:inline-flex;will-change:transform}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee[data-marquee] .marquee__track{animation:none}
.marquee__track > span{padding-right:1.5em}

/* NAV — как #navContainer translate(-300%) + top переход по data-scrolling-started */
#navContainer{transform:translateY(-140%);transition:transform 0.6s var(--elastic-ease-out), top 0.6s var(--elastic-ease-out)}
.nav{
  position:fixed;top:1.5em;left:50%;transform:translateX(-50%);z-index:99;
  width:min(calc(100% - 24px), var(--page-max-width));
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-12);
  padding:10px var(--spacing-12);
  background:transparent;
}
body[data-scrolling-started="false"] .nav{top:4.5em}
@media(max-width:479px){ body[data-scrolling-started="false"] .nav{top:4em} .nav{top:0.75em} }

/* mobile nav overlay */
.mobile-nav{
  position:fixed;inset:0;z-index:98;
  background:var(--color-paper-white);
  padding:100px var(--spacing-24) var(--spacing-32);
  display:flex;flex-direction:column;gap:var(--spacing-12);
  transform:translateY(-100%);transition:transform 0.6s var(--cubic-default);
  pointer-events:none;
}
.mobile-nav.is-open{transform:translateY(0);pointer-events:auto}
.mobile-nav a{font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-0.01em;border:1px solid var(--color-carbon);border-radius:var(--radius-pills);padding:14px 18px;background:var(--color-paper-white)}
.logo-mark{
  width:44px;height:44px;flex-shrink:0;
  border:1px solid var(--color-carbon);
  border-radius:var(--radius-full-3);
  background:var(--color-paper-white);
  display:grid;place-items:center;
  font-family:var(--font-lateral);font-weight:800;font-size:20px;line-height:1;
}
.nav__center{display:flex;gap:var(--spacing-4);flex-wrap:wrap}
.nav__right{display:flex;gap:var(--spacing-8);align-items:center}
.pill-btn{
  border:1px solid var(--color-carbon);
  background:var(--color-paper-white);
  border-radius:var(--radius-pills);
  padding:15px 12px;
  font-family:var(--font-aeonik-pro);
  font-weight:var(--font-weight-bold);font-size:12px;
  letter-spacing:0.032em;text-transform:uppercase;
  line-height:1;
  transition:transform .15s, background .15s;
}
.pill-btn:hover{transform:translateY(-1px);background:var(--color-soft-mist)}
/* 3D flip кнопки как .button-main на slush.app */
.button-main{ perspective:600px; transform: translateZ(0); transition: transform 0.5s var(--elastic-ease-out); display:inline-block; border:1px solid var(--color-carbon); border-radius:var(--radius-buttons); overflow:hidden; background:var(--color-paper-white)}
.button-main:active{transform:scale(0.96)}
.button-main-inner{ position:relative; display:block; }
.button-main-inner__front, .button-main-inner__back{ display:grid; place-items:center; padding:10px 18px; font-family:var(--font-aeonik-pro); font-weight:700; font-size:13px; letter-spacing:0.032em; line-height:1; transition: translate 0.75s var(--elastic-ease-out), rotate 0.75s var(--elastic-ease-out), opacity 0.15s ease-out; }
.button-main-inner__front{ background:var(--color-paper-white); color:var(--color-carbon); }
.button-main-inner__back{ position:absolute; inset:0; background:var(--color-carbon); color:var(--color-paper-white); opacity:0; translate:0 2em -6em; rotate:1 0 0 -90deg; }
.button-main-inner__back::before{ content: attr(data-text); translate:0 .6em 0; transition: translate 0.75s var(--elastic-ease-out); }
@media(hover:hover){
  .button-main:hover .button-main-inner__front{ translate:0 -2em -6em; rotate:1 0 0 85deg; opacity:0 }
  .button-main:hover .button-main-inner__back{ translate:0 0 0; rotate:1 0 0 0deg; opacity:1 }
  .button-main:hover .button-main-inner__back::before{ translate:0 0 0 }
}
.button-main--filled{ background:var(--color-carbon); border-color:var(--color-carbon)}
.button-main--filled .button-main-inner__front{ background:var(--color-carbon); color:var(--color-paper-white)}
.button-main--filled .button-main-inner__back{ background:var(--color-paper-white); color:var(--color-carbon)}
.ghost-btn{border:1px solid var(--color-carbon);background:var(--color-paper-white);border-radius:var(--radius-buttons);padding:10px 12px;font-family:var(--font-aeonik-pro);font-weight:var(--font-weight-bold);font-size:13px;letter-spacing:0.032em;line-height:1;color:var(--color-carbon)}
.plus-btn{width:40px;height:40px;border-radius:var(--radius-full-3);border:1px solid var(--color-carbon);background:var(--color-paper-white);font-size:18px;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:transform .5s var(--elastic-ease-out)}
.plus-btn:hover{transform:scale(0.92)}

/* SECTIONS — full-bleed color bands */
.section{position:relative;overflow:hidden;padding:var(--spacing-48) var(--spacing-24)}
.section--sky{background:var(--surface-sky-wash);min-height:88vh;display:flex;align-items:center;justify-content:center}
.section--white{background:var(--surface-paper-white);padding:80px var(--spacing-24) 100px}
.section--gray{background:var(--surface-concrete-gray);padding:80px var(--spacing-24)}
.section__inner{max-width:var(--page-max-width);margin:0 auto;width:100%;position:relative;z-index:2}
.section__inner--split{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-48);align-items:center}

/* RIBBONS — Electric Blue #4da2ff tubular, grainy */
.ribbon{position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.ribbon--hero{top:50%;transform:translateY(-42%);height:560px}
.ribbon--hero svg{width:100%;height:100%}
.ribbon--mid{bottom:0;height:220px}
.ribbon--mid svg{width:100%;height:100%}

/* DISPLAY — Lateral 800, 0.75-0.80 line-height crushed */
.display{
  font-family:var(--font-lateral);
  font-weight:var(--font-weight-extrabold);
  color:var(--color-carbon);
  text-transform:uppercase;
  position:relative;z-index:3;
}
.display--hero{
  font-size:var(--text-display);
  line-height:var(--leading-display);
  text-align:center;
}
.display--hero span{display:block}
.display--section{
  font-size:281px;
  line-height:0.76;
  margin:var(--spacing-12) 0 var(--spacing-16);
}
.display--small{
  font-size:160px;
  line-height:0.80;
  margin:var(--spacing-12) 0 var(--spacing-16);
}

.tagline{
  font-family:var(--font-aeonik-pro);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-subheading);
  line-height:var(--leading-subheading);
  letter-spacing:var(--tracking-subheading);
  text-align:center;
  margin-top:var(--spacing-20);
  position:relative;z-index:3;
}
.subhead{
  font-family:var(--font-aeonik-pro);
  font-weight:var(--font-weight-medium);
  font-size:16px;line-height:1.25;
  letter-spacing:-0.010em;
  opacity:.85;
}
.eyebrow{
  font-family:var(--font-aeonik-pro);
  font-weight:var(--font-weight-bold);font-size:12px;
  letter-spacing:0.032em;text-transform:uppercase;opacity:.6;
}
.badge{
  display:inline-block;
  background:var(--color-paper-white);
  border:1px solid var(--color-carbon);
  border-radius:var(--radius-pills);
  padding:6px 12px;
  font-weight:var(--font-weight-bold);font-size:12px;letter-spacing:0.032em;text-transform:uppercase;
}
.hero__content{position:relative;z-index:3;text-align:center;max-width:960px;width:100%}
.hero__content[data-hero-content]{opacity:0}
.hero__actions{display:flex;gap:var(--spacing-8);justify-content:center;flex-wrap:wrap;margin-top:var(--spacing-20)}
.hero__actions--left{justify-content:flex-start}
[data-hero-letters] span{display:inline-block;clip-path:inset(0 0 0 0)}
/* qr hover как .home-qr-el:hover */
.qr-card{transition:transform 0.65s var(--cubic-default)}
.qr-card:hover{transform:translateX(6px)}

/* STICKERS — 1px #000 outline, 16-20px radius, brand fills */
.sticker{position:absolute;z-index:4;pointer-events:none}
.sticker__inner{
  width:72px;height:72px;
  border:1px solid var(--color-carbon);
  border-radius:var(--radius-2xl-2);
  display:grid;place-items:center;
  font-size:28px;
}
.sticker--rocket .sticker__inner{transform:rotate(-12deg)}
.sticker--coin .sticker__inner{transform:rotate(10deg)}
.sticker--wallet .sticker__inner{transform:rotate(8deg);border-radius:var(--radius-2xl)}
.sticker--check .sticker__inner{transform:rotate(-6deg)}
.sticker__inner--ember{background:var(--color-ember)}
.sticker__inner--sunburst{background:var(--color-sunburst)}
.sticker__inner--violet{background:var(--color-voltage-violet);color:#fff}
.sticker__inner--mint{background:var(--color-mint-pop)}

/* CARDS — 20px radius, 1px #000 border, padd 24px */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-16);margin-top:var(--spacing-40)}
.card{
  border:1px solid var(--color-carbon);
  border-radius:var(--radius-cards);
  padding:var(--card-padding);
}
.card--lavender{background:var(--color-lavender)}
.card--mint{background:var(--color-mint-pop)}
.card--sunburst{background:var(--color-sunburst)}
.card__icon{
  width:44px;height:44px;
  border-radius:var(--radius-wallet-icon);
  border:1px solid var(--color-carbon);
  display:grid;place-items:center;
  font-size:18px;margin-bottom:var(--spacing-16);
}
.card__icon--violet{background:var(--color-voltage-violet);color:#fff}
.card__icon--ember{background:var(--color-ember);color:#fff}
.card__icon--carbon{background:var(--color-carbon);color:#fff}
.card__title{
  font-family:var(--font-aeonik-pro);
  font-weight:var(--font-weight-bold);font-size:var(--text-subheading);
  line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);
  margin-bottom:var(--spacing-8)
}
.card__text{
  font-weight:var(--font-weight-medium);font-size:15px;
  line-height:var(--leading-body-lg);letter-spacing:var(--tracking-body-lg);opacity:.85
}

/* QR CARD — 20px radius, #5c4ade bg, split */
.qr-card{
  margin-top:var(--spacing-32);
  display:inline-flex;
  border:1px solid var(--color-carbon);
  border-radius:var(--radius-cards);
  overflow:hidden;
  background:var(--color-voltage-violet);
}
.qr-card__qr{
  background:var(--color-paper-white);
  padding:12px;
  width:110px;height:110px;
  display:grid;place-items:center;
  border-right:1px solid var(--color-carbon);
}
.qr-grid{
  width:86px;height:86px;
  background:
    linear-gradient(var(--color-carbon) 0 0) 0 0/28px 28px no-repeat,
    linear-gradient(var(--color-carbon) 0 0) 100% 0/28px 28px no-repeat,
    linear-gradient(var(--color-carbon) 0 0) 0 100%/28px 28px no-repeat,
    repeating-linear-gradient(90deg, var(--color-carbon) 0 6px, transparent 6px 10px) 50% 50%/60px 60px no-repeat,
    repeating-linear-gradient(var(--color-carbon) 0 6px, transparent 6px 10px) 50% 50%/60px 60px no-repeat;
  border:2px solid var(--color-carbon);
}
.qr-card__label{
  padding:20px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  color:var(--color-paper-white);
}
.qr-card__label span{font-weight:var(--font-weight-bold);font-size:14px;letter-spacing:0.032em}
.qr-card__label small{font-weight:var(--font-weight-medium);font-size:12px;opacity:.85}

/* CODE CARD — 40px radius elevated */
.code-card{
  background:var(--color-paper-white);
  border:1px solid var(--color-carbon);
  border-radius:var(--radius-cards-elevated);
  overflow:hidden;
}
.code-card__bar{
  display:flex;gap:6px;padding:14px 16px;
  border-bottom:1px solid var(--color-carbon);
  background:var(--color-soft-mist);
}
.code-card__bar span{width:10px;height:10px;border-radius:50%;border:1px solid var(--color-carbon);display:block}
.code-card__bar span:nth-child(1){background:var(--color-ember)}
.code-card__bar span:nth-child(2){background:var(--color-sunburst)}
.code-card__bar span:nth-child(3){background:var(--color-mint-pop)}
.code-card pre{padding:var(--spacing-20);font-size:13px;line-height:1.6;overflow-x:auto;font-family:ui-monospace, monospace}

/* FOOTER */
.footer{
  background:var(--color-carbon);
  color:var(--color-paper-white);
  padding:var(--spacing-40) var(--spacing-24);
}
.footer__inner{max-width:var(--page-max-width);margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-16)}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__word{font-family:var(--font-lateral);font-size:22px;letter-spacing:-0.02em}
.footer__links{display:flex;gap:var(--spacing-16);font-size:12px;letter-spacing:0.032em;font-weight:700;text-transform:uppercase;opacity:.85;flex-wrap:wrap}
.footer__copy{font-size:12px;opacity:.5;line-height:1.56}

/* RESPONSIVE — keep 200-640 display, preserve ribbon room */
@media(max-width:1100px){
  .display--section{font-size:200px;line-height:0.80}
  .display--small{font-size:110px}
}
@media(max-width:900px){
  .cards{grid-template-columns:1fr}
  .section__inner--split{grid-template-columns:1fr}
  .nav__center{display:none}
  .display--hero{font-size:110px}
  .display--section{font-size:110px}
  .display--small{font-size:70px;line-height:0.80}
  .ribbon--hero{height:360px}
}
@media(max-width:480px){
  .display--hero{font-size:70px;line-height:0.80}
}