/* Atlas landing — atlas.vu. Сборка v6, 18.08.2026 */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ══════════ ТОКЕНЫ atlas.vu (светлая система приложения) ══════════ */
:root{
  --bg:#F4F5F4; --surface:#FFFFFF; --surface-2:#ECEFED;
  --ink:#0C0E0D; --body:#3B423F; --muted:#66706C;
  --mint:#5BEFB0; --mint-soft:rgba(91,239,176,.35);
  --green:#067A54;                 /* текстовый акцент, проходит контраст на светлом */
  --dark:#0C0E0D; --dark-2:#161A18;
  --on-dark:#FFFFFF; --on-dark-body:#B8C0BC; --on-dark-mint:#4BE6A8;
  --line:rgba(12,14,13,.08); --line-dark:rgba(255,255,255,.09);
  --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --container:1200px; --gutter:24px; --section:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:400; font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{color:var(--ink); font-weight:600; margin:0; letter-spacing:-.02em}
h1{font-size:64px; line-height:1.06}
h2{font-size:48px; line-height:1.1}
h3{font-size:24px; line-height:1.3}
p{margin:0}
a{color:var(--green); text-decoration:none}
img{max-width:100%}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1}
.section{padding:var(--section) 0; position:relative; overflow:hidden}
.lead{color:var(--muted); font-size:20px; max-width:640px}
.center{text-align:center; margin-left:auto; margin-right:auto}
.stack-16{margin-top:16px}.stack-24{margin-top:24px}.stack-40{margin-top:40px}.stack-64{margin-top:64px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--green)}
.eyebrow::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--mint)}

/* ══════════ Зелёное свечение ══════════ */
.glow-top{position:absolute; inset:0 0 auto 0; height:640px; pointer-events:none; z-index:0;
  background:
    radial-gradient(720px 460px at 18% -10%, var(--mint) 0%, rgba(91,239,176,.35) 38%, transparent 72%),
    radial-gradient(900px 520px at 85% -22%, rgba(91,239,176,.28) 0%, transparent 65%);}
.glow-blob{position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; z-index:0}

/* ══════════ Хедер ══════════ */
header{position:fixed; inset:0 0 auto 0; z-index:40; padding:16px 0; transition:all .3s var(--ease)}
header.is-stuck{background:rgba(244,245,244,.85); backdrop-filter:blur(16px); box-shadow:0 1px 0 var(--line)}
.bar{display:flex; align-items:center; gap:28px}
.logo{display:flex; align-items:center; gap:10px; font-size:20px; font-weight:600; color:var(--ink)}
.logo-mark{width:34px; height:34px; display:inline-flex; flex:none}
.logo-mark img,.vc-logo img,.s-ava--a img{width:100%; height:100%; display:block}
.nav{display:flex; gap:4px; margin:0 auto}
.nav a{font-size:15px; color:var(--body); padding:10px 16px; border-radius:var(--r-pill); transition:all .2s}
.nav a:hover{background:rgba(12,14,13,.05); color:var(--ink)}
.nav-toggle{display:none; width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:18px; cursor:pointer}

/* ══════════ Кнопки ══════════ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 30px;
  border-radius:var(--r-pill); font-size:16px; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s}
.btn--primary{background:var(--ink); color:#fff}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px -16px rgba(12,14,13,.55)}
.btn--primary:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
.btn--ghost{background:var(--surface); color:var(--ink); border-color:var(--line); height:44px; padding:0 22px; font-size:15px}
.btn--ghost:hover{transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(12,14,13,.35)}
.btn--on-dark{background:#fff; color:var(--ink)}
.btn--on-dark:hover{transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(91,239,176,.45)}
.badge{display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-size:12px; font-weight:600; letter-spacing:.1em}

/* ══════════ Hero ══════════ */
.hero{padding:176px 0 96px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero h1 .hl{color:var(--green)}
.hero-ctas{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.hero-note{font-size:14px; color:var(--muted)}

/* Телефон — экран Main из приложения */
.phone-wrap{position:relative; display:flex; justify-content:center}
.phone-wrap .glow-blob{width:420px; height:420px; background:var(--mint); opacity:.5; top:-60px; right:0}
.phone{position:relative; width:320px; border-radius:44px; background:#111;
  padding:10px; box-shadow:0 40px 80px -32px rgba(12,14,13,.45); z-index:1}
.screen{border-radius:36px; overflow:hidden; background:var(--bg); position:relative}
.screen-glow{position:absolute; inset:0 0 auto 0; height:150px;
  background:radial-gradient(340px 170px at 50% -40%, var(--mint) 0%, rgba(91,239,176,.35) 45%, transparent 75%)}
.screen-inner{position:relative; padding:14px 16px 12px; font-size:13px}
.s-status{display:flex; justify-content:space-between; color:var(--ink); font-weight:600; font-size:12px}
.s-user{margin-top:12px; display:flex; justify-content:space-between; align-items:center}
.s-user .pill{background:var(--ink); color:#fff; border-radius:var(--r-pill); padding:5px 14px; font-weight:600; font-size:12px}
.s-bal{margin-top:14px; text-align:center}
.s-bal .cap{color:var(--muted); font-size:11px}
.s-bal .num{color:var(--ink); font-size:30px; font-weight:600; letter-spacing:-.02em}
.s-banner{margin-top:14px; background:var(--dark); color:#fff; border-radius:18px; padding:14px}
.s-banner b{display:block; font-size:13px; font-weight:600}
.s-banner span{display:block; margin-top:4px; color:var(--on-dark-body); font-size:11px; line-height:1.45}
.s-banner .act{display:inline-block; margin-top:8px; color:var(--on-dark-mint); font-weight:600; font-size:12px}
.s-list{margin-top:12px; background:var(--surface); border-radius:18px; padding:4px 12px}
.s-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}
.s-row:last-child{border-bottom:0}
.s-ava{width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#fff}
.s-ava--t{background:#26A17B}.s-ava--a{background:none; padding:0}.s-ava--r{background:#ECEFED; color:var(--ink)}
.s-row .who{flex:1; min-width:0}
.s-row .who b{display:block; color:var(--ink); font-size:12.5px; font-weight:600}
.s-row .who span{color:var(--muted); font-size:11px}
.s-row .amt{text-align:right; font-size:12.5px; font-weight:600; color:var(--ink)}
.s-row .amt.plus{color:var(--green)}
.s-row .amt span{display:block; color:var(--muted); font-size:10.5px; font-weight:400}
.s-tabbar{margin-top:12px; background:var(--dark); border-radius:var(--r-pill); padding:7px;
  display:flex; justify-content:space-around; color:#98A29D; font-size:9.5px; text-align:center}
.s-tabbar .on{background:#fff; color:var(--ink); border-radius:var(--r-pill); padding:5px 12px; font-weight:600}
.s-tabbar div{padding:5px 6px}

/* ══════════ Полоса доверия ══════════ */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface)}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:28px; padding-bottom:28px}
.trust-item{display:flex; gap:12px; align-items:center; font-size:14.5px; color:var(--body)}
.trust-item b{display:block; color:var(--ink); font-weight:600}
.t-ico{width:40px; height:40px; flex:none; border-radius:12px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--green)}

/* ══════════ Карточки-плитки ══════════ */
.grid{display:grid; gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.tile:hover{transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(12,14,13,.28)}
.tile p{color:var(--muted); font-size:16px; margin-top:10px}
.tile .t-ico{margin-bottom:18px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.chip{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--r-pill);
  background:var(--bg); border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink)}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--mint)}
.chip.is-off{color:var(--muted); font-weight:400}
.chip.is-off .dot{background:#C9CFCC}

/* ══════════ Тёмный остров: карта ══════════ */
.island{background:var(--dark); color:var(--on-dark-body)}
.island h2,.island h3{color:#fff}
.island .glow-blob{background:var(--mint); opacity:.16}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.visa-card{position:relative; width:100%; max-width:460px; aspect-ratio:1.586; border-radius:24px;
  background:linear-gradient(135deg,#181B1A 0%, #060707 100%); overflow:hidden;
  box-shadow:0 48px 96px -40px rgba(0,0,0,.8); transform:rotate(-4deg)}
.vc-mark{position:absolute; left:-13%; top:-34%; width:104%}
.visa-card .vc-logo{position:absolute; left:24px; top:22px; width:44px; height:44px; display:flex}
.visa-card .vc-virtual{position:absolute; right:26px; top:30px; color:#fff; font-size:14px}
.visa-card .vc-visa{position:absolute; right:26px; bottom:22px; color:#fff; font-size:30px; font-weight:600;
  font-style:italic; letter-spacing:.02em}
.feature-list{display:grid; gap:8px; margin-top:32px}
.feature-row{display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:var(--r-md);
  background:var(--dark-2); border:1px solid var(--line-dark); font-size:16px; color:#fff}
.feature-row .t-ico{background:rgba(91,239,176,.12); color:var(--on-dark-mint); margin-left:0}
.feature-row span{color:var(--on-dark-body); font-size:14px; margin-left:auto; text-align:right}

/* ══════════ Шаги ══════════ */
.step{position:relative; padding:36px}
.step .num{font-size:52px; font-weight:600; letter-spacing:-.03em; color:var(--green)}
.step h3{margin-top:12px}

/* ══════════ FAQ ══════════ */
.faq{max-width:820px; margin:64px auto 0; display:grid; gap:12px}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 26px}
summary{font-size:18px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; color:var(--green); font-size:22px; font-weight:400}
details[open] summary::after{content:'−'}
details p{font-size:16px; color:var(--muted); margin-top:12px; line-height:1.6}

/* ══════════ Финальный CTA ══════════ */
.final{border-radius:var(--r-xl); background:var(--dark); color:var(--on-dark-body);
  padding:88px 48px; text-align:center; position:relative; overflow:hidden}
.final h2{color:#fff; max-width:760px; margin:0 auto}
.final .glow-blob{background:var(--mint); opacity:.2; width:560px; height:560px; left:50%; bottom:-420px; transform:translateX(-50%)}

/* ══════════ Футер ══════════ */
footer{padding:56px 0 40px; font-size:14px; color:var(--muted)}
.foot-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap}
.foot-legal{max-width:520px; line-height:1.7}
.foot-links{display:flex; gap:24px}
footer a{color:var(--body)}
footer a:hover{color:var(--ink)}


/* ══════════ Белая секция карты ══════════ */
.section--paper{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section--paper h2,.section--paper h3{color:var(--ink)}
.section--paper .feature-row{background:var(--bg); border-color:var(--line); color:var(--ink)}
.section--paper .feature-row span{color:var(--muted)}
.section--paper .feature-row .t-ico{background:rgba(6,122,84,.10); color:var(--green)}
.section--paper .eyebrow{color:var(--green)}
.section--paper p{color:var(--muted)}
.section--paper .visa-card{box-shadow:0 44px 80px -36px rgba(12,14,13,.5)}

/* ══════════ Остров: плитки и чипы на тёмном ══════════ */
.island .eyebrow{color:var(--on-dark-mint)}
.island .eyebrow::before{background:var(--on-dark-mint)}
.island .tile{background:var(--dark-2); border-color:var(--line-dark)}
.island .tile h3{color:#fff}
.island .tile p{color:var(--on-dark-body)}
.island .tile:hover{box-shadow:0 24px 48px -28px rgba(0,0,0,.7)}
.island .t-ico{background:rgba(91,239,176,.12); color:var(--on-dark-mint)}
.island .chip{background:rgba(255,255,255,.06); border-color:var(--line-dark); color:#fff}
.island .chip.is-off{color:var(--on-dark-body)}
.island .chip.is-off .dot{background:#4E5854}

/* ══════════ Слайдер ролей ══════════ */
.sl-nav{display:flex; gap:10px}
.sl-btn{width:48px; height:48px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:18px; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.sl-btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(12,14,13,.4)}
.sl-btn:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
.slider{overflow:hidden}
.sl-track{display:flex; transition:transform .55s var(--ease)}
.sl-card{flex:0 0 100%; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  border-radius:var(--r-xl); padding:64px; min-height:380px; position:relative; overflow:hidden;
  background:radial-gradient(640px 320px at 85% -20%, var(--mint-soft), transparent 70%),
             linear-gradient(160deg, #EAF7F0, var(--surface) 55%);
  border:1px solid var(--line)}
.sl-tag{display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--green); margin-bottom:18px}
.sl-card h3{font-size:34px; line-height:1.15}
.sl-card p{margin-top:16px; color:var(--muted); font-size:17px; max-width:420px}
.receipt{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; width:100%; max-width:360px; justify-self:end; box-shadow:0 32px 64px -36px rgba(12,14,13,.35)}
.rc-head{display:flex; gap:14px; align-items:center}
.rc-ava{width:44px; height:44px; border-radius:50%; flex:none; color:#fff; font-weight:600; font-size:18px;
  display:flex; align-items:center; justify-content:center}
.rc-head b{display:block; color:var(--ink); font-size:17px}
.rc-head i{font-style:normal; color:var(--muted); font-size:14px}
.rc-amt{font-size:38px; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin-top:20px}
.rc-meta{display:flex; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line); color:var(--muted); font-size:13.5px}
.sl-dots{display:flex; gap:8px; justify-content:center; margin-top:28px}
.sl-dot{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:#C9CFCC; cursor:pointer; transition:all .25s}
.sl-dot.is-on{width:24px; border-radius:var(--r-pill); background:var(--ink)}

/* ══════════ Появление ══════════ */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto}}

/* ══════════ Адаптив ══════════ */
@media (max-width:1024px){
  .hero-grid,.card-grid{grid-template-columns:1fr; gap:56px}
  .phone-wrap{order:-1}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  h1{font-size:44px} h2{font-size:34px}
  .sl-card{grid-template-columns:1fr; gap:32px; padding:36px; min-height:0}
  .sl-card h3{font-size:26px}
  .receipt{justify-self:stretch; max-width:100%}
  .grid--2,.grid--3{grid-template-columns:1fr}
  .section{padding:80px 0}
  .nav{display:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; margin-left:auto}
  .bar .btn--ghost{display:none}
}
@media (max-width:480px){
  body{font-size:16px}
  h1{font-size:38px} h2{font-size:30px} h3{font-size:21px}
  .section{padding:64px 0} .container{padding:0 16px}
  .hero{padding:132px 0 64px}
  .hero-ctas .btn--primary{width:100%}
  .lead{font-size:17px}
  .tile,.step{padding:28px}
  .final{padding:64px 20px; border-radius:var(--r-lg)}
  .visa-card{transform:none}
  .trust-grid{grid-template-columns:1fr; gap:16px; padding-top:24px; padding-bottom:24px}
}