/* ============================================================
   РЕГИОН — Студия создания сайтов · Design System
   Light/clean base + dark premium sections · electric blue
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700;800&display=swap');

/* ---- Tokens ---- */
:root{
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Unbounded', var(--font-sans);

  /* neutrals — slightly cool */
  --paper:        oklch(0.993 0.003 250);
  --paper-2:      oklch(0.972 0.004 250);
  --paper-3:      oklch(0.948 0.006 250);
  --line:         oklch(0.905 0.006 250);
  --line-soft:    oklch(0.935 0.005 250);
  --ink:          oklch(0.190 0.012 255);
  --ink-2:        oklch(0.380 0.012 255);
  --ink-3:        oklch(0.560 0.010 255);

  /* dark surfaces */
  --night:        oklch(0.185 0.022 260);
  --night-2:      oklch(0.235 0.026 260);
  --night-line:   oklch(0.330 0.030 262);
  --night-ink:    oklch(0.970 0.006 250);
  --night-ink-2:  oklch(0.760 0.014 255);

  /* accent — фиолетовый #7a5af0 (логотип Регион, tweakable) */
  --accent:       #7a5af0;
  --accent-bright:#9579f4;
  --accent-deep:  #5e3fd0;
  --accent-tint:  #efeaff;
  --accent-ink:   #ffffff;

  --radius:   18px;
  --radius-lg:26px;
  --radius-sm:12px;
  --shadow-sm: 0 1px 2px oklch(0.50 0.05 258 / .06), 0 2px 8px oklch(0.50 0.05 258 / .05);
  --shadow:    0 4px 14px oklch(0.45 0.06 258 / .08), 0 18px 50px oklch(0.45 0.06 258 / .09);
  --shadow-lg: 0 8px 24px oklch(0.40 0.07 258 / .12), 0 40px 90px oklch(0.40 0.07 258 / .16);
  --shadow-accent: 0 14px 40px color-mix(in srgb, var(--accent) 38%, transparent);

  --maxw: 1200px;
  --gut: clamp(24px, 6vw, 64px);
}

/* ---- Reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.section{padding-block:clamp(64px,9vw,128px)}
.section-sm{padding-block:clamp(48px,6vw,84px)}

/* ---- Type ---- */
.display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.h1{font-size:clamp(38px,6.4vw,82px)}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.4vw,56px);line-height:1.02;letter-spacing:-0.02em;text-wrap:balance}
.h3{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.08;letter-spacing:-0.01em}
.lead{font-size:clamp(18px,1.5vw,22px);color:var(--ink-2);line-height:1.5;text-wrap:pretty}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-deep);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.eyebrow.on-dark{color:var(--accent-bright)}
.muted{color:var(--ink-3)}
.accent-text{color:var(--accent)}
.num{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;font-weight:700;font-size:16px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s, color .2s;
  white-space:nowrap;line-height:1;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-accent)}
.btn-primary:hover{transform:translateY(-2px);background:var(--accent-bright)}
.btn-primary:active{transform:translateY(0)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:var(--accent-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px)}
.btn-lg{padding:19px 34px;font-size:17px}
.btn-block{width:100%}

/* ---- Pills / chips ---- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pill.on-dark{background:oklch(1 0 0 / .06);border-color:var(--night-line);color:var(--night-ink-2)}

/* ---- Cards ---- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card.hov:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-soft)}

/* ---- Image placeholder ---- */
.ph{
  --c1:oklch(0.93 0.01 255);--c2:oklch(0.965 0.008 255);
  position:relative;background:
    repeating-linear-gradient(135deg,var(--c1) 0 11px,var(--c2) 11px 22px);
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--ink-3);
}
.ph span{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;
  letter-spacing:.04em;background:var(--paper);padding:6px 11px;border-radius:8px;
  border:1px solid var(--line);text-transform:uppercase;
}
.ph.on-dark{--c1:oklch(0.27 0.02 260);--c2:oklch(0.23 0.02 260);border-color:var(--night-line);color:var(--night-ink-2)}
.ph.on-dark span{background:var(--night-2);border-color:var(--night-line)}

/* ---- Dark band ---- */
.band-dark{background:var(--night);color:var(--night-ink)}
.band-dark .lead{color:var(--night-ink-2)}
.band-dark .muted{color:var(--night-ink-2)}
.band-soft{background:var(--paper-2)}

/* ---- Section header ---- */
.shead{max-width:760px;margin-bottom:clamp(36px,4vw,60px)}
.shead .h2{margin-top:16px}
.shead .lead{margin-top:18px}

/* ---- Reveal animation ----
   Content is ALWAYS visible (opacity:1) so it never disappears in print,
   PDF export, reduced-motion, or non-painting capture contexts. The entrance
   is a transform-only nudge — even if a transition freezes mid-flight, the
   text stays fully legible. */
.reveal{transform:translateY(16px);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transform:none;transition:none}}

/* ---- Divider line graphic ---- */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0}

/* ---- Utility grid ---- */
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:920px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.flex{display:flex}
.center{align-items:center}
.between{justify-content:space-between}
.wrap-gap{flex-wrap:wrap;gap:12px}