@import url("../fonts/fonts.css");

/* ============================================================
   Easy Up — дизайн-система
   Светлая база, один акцент, две гарнитуры.
   Значения зафиксированы в docs/SPEC.md, часть III.
   ============================================================ */

:root{
  /* цвет */
  --paper:#F6F5F2;
  --paper-2:#EFEDE8;
  --paper-3:#E8E5DF;
  --ink:#14161A;
  --ink-2:#1E2228;
  --accent:#1B2FE0;
  --accent-deep:#1526B8;
  --accent-wash:#EBEDFC;
  --muted:#666C73;
  --muted-2:#666C73;
  --line:#E2E0DA;
  --line-2:#D3D0C8;
  --on-ink:#F6F5F2;
  --on-ink-muted:#9AA0A8;
  --line-on-ink:rgba(246,245,242,.14);

  /* типографика */
  --font-display:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-display:clamp(3.25rem, 6.5vw, 6.5rem);
  --t-h1:clamp(2.5rem, 4.6vw, 4rem);
  --t-h2:clamp(1.875rem, 3.2vw, 2.75rem);
  --t-h3:clamp(1.3125rem, 1.9vw, 1.625rem);
  --t-lead:clamp(1.1875rem, 1.5vw, 1.4375rem);
  --t-body:clamp(1.0625rem, 1.1vw, 1.1875rem);
  --t-small:0.9375rem;
  --t-caption:0.8125rem;

  /* пространство */
  --shell:min(1280px, 100% - 5rem);
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-6:1.5rem; --s-8:2rem;   --s-12:3rem;  --s-16:4rem;
  --s-24:6rem;  --s-32:8rem;  --s-40:10rem; --s-50:12.5rem;
  --section:clamp(6rem, 11vw, 10rem);

  /* форма */
  --r-card:12px;
  --r-pill:999px;
  --shadow-lift:0 40px 80px -40px rgba(20,22,26,.35);
  --shadow-soft:0 2px 4px rgba(20,22,26,.04);

  /* движение */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.22,.61,.36,1);
  --d-micro:200ms;
  --d-base:400ms;
  --d-reveal:800ms;
}

@media (max-width:640px){
  :root{ --shell:min(1280px, 100% - 2.5rem) }
}

/* ============================================================
   Сброс и база
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:6rem;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"liga" 1,"kern" 1;
}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.05;
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3); font-weight:700; letter-spacing:-.02em; line-height:1.2}

p{text-wrap:pretty}

a{color:inherit; text-decoration:none}
img,svg,video{display:block; max-width:100%}
img{height:auto}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
ul,ol{list-style:none}

::selection{background:var(--accent); color:var(--paper)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   Каркас
   ============================================================ */
.shell{width:var(--shell); margin-inline:auto}
.section{padding-block:var(--section)}

.section--ink{
  background:var(--ink);
  color:var(--on-ink);
}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--on-ink)}
.section--ink .lead{color:var(--on-ink-muted)}
.section--paper2{background:var(--paper-2)}

/* ============================================================
   Типографические элементы
   ============================================================ */
.caption{
  font-size:var(--t-caption);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:600;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:var(--s-3);
}
.caption::before{
  content:"";
  width:18px; height:2px;
  background:var(--accent);
  flex:none;
}
.section--ink .caption{color:var(--on-ink)}
.section--ink .caption::before{background:var(--on-ink)}

.lead{
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--muted);
  max-width:52ch;
}

.display{
  font-family:var(--font-display);
  font-size:var(--t-display);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.02;
}

.accent{color:var(--accent)}
.section--ink .accent{color:#8B9BFF}

.section__head{max-width:60rem; margin-bottom:clamp(3rem,6vw,5rem)}
.section__head h2{margin-top:var(--s-6)}
.section__head .lead{margin-top:var(--s-6)}

/* ============================================================
   Кнопки
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-3);
  padding:1rem 2rem;
  border-radius:var(--r-pill);
  font-family:var(--font-text);
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:.005em;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background-color var(--d-micro) var(--e-out),
             border-color var(--d-micro) var(--e-out),
             color var(--d-micro) var(--e-out),
             transform var(--d-base) var(--e-out);
}
.btn svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.9;
  fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none}

.btn--primary{background:var(--accent); color:var(--paper)}
.btn--primary:hover{background:var(--accent-deep)}
.btn--primary:active{transform:translateY(1px)}

.btn--ghost{border-color:var(--line-2); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); background:var(--paper-2)}

.section--ink .btn--ghost{border-color:var(--line-on-ink); color:var(--on-ink)}
.section--ink .btn--ghost:hover{border-color:var(--on-ink); background:rgba(246,245,242,.06)}

.btn--lg{padding:1.15rem 2.4rem; font-size:var(--t-body)}

.link{
  display:inline-flex; align-items:center; gap:var(--s-2);
  color:var(--accent); font-weight:600; font-size:var(--t-small);
  transition:gap var(--d-base) var(--e-out);
}
.link svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.link:hover{gap:calc(var(--s-2) + 4px)}

/* ============================================================
   Знак
   ============================================================ */
.mark{flex:none}
.mark rect{fill:var(--accent)}
.section--ink .mark rect{fill:var(--on-ink)}

/* маркер списка — производная знака */
.tick{
  width:10px; height:10px; border-radius:2px;
  background:var(--accent); flex:none; margin-top:.55em;
}
.tick--2{opacity:.55}
.tick--3{opacity:.3}

/* ============================================================
   Карточки
   ============================================================ */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:border-color var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out);
}
.card:hover{border-color:var(--line-2); transform:translateY(-4px)}
.section--ink .card{background:var(--ink-2); border-color:var(--line-on-ink)}
.section--ink .card:hover{border-color:rgba(246,245,242,.28)}

/* ============================================================
   Появление
   ============================================================ */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--d-reveal) var(--e-out),
             transform var(--d-reveal) var(--e-out);
  transition-delay:var(--d,0ms);
}
.js .reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  .card:hover{transform:none}
  .link:hover{gap:var(--s-2)}
}

/* ============================================================
   Служебное
   ============================================================ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--paper);
  padding:1rem 1.5rem; border-radius:0 0 8px 0; font-weight:600;
}
.skip:focus{left:0}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   Переход между страницами
   ============================================================ */
.js body{
  animation:page-in var(--d-base) var(--e-out) both;
}
@keyframes page-in{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}
.js body.is-leaving{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 260ms var(--e-inout), transform 260ms var(--e-inout);
}
@media (prefers-reduced-motion:reduce){
  .js body{animation:none}
  .js body.is-leaving{opacity:1; transform:none; transition:none}
}

/* страховка на случай, если скрипт не загрузился: контент виден через 3 секунды */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{ animation:reveal-fallback 0s linear 3s forwards }
}
@keyframes reveal-fallback{ to{ opacity:1; transform:none } }