:root{
  --g-bg:#f6f7ff;
  --g-surface:#ffffff;
  --g-surface-2:#f2f4ff;

  --g-card: rgba(255,255,255,.75);
  --g-card-2: rgba(255,255,255,.85);

  --g-border: rgba(15,20,34,.12);

  --g-text:#0f1422;
  --g-muted: rgba(15,20,34,.72);
  --g-muted-2: rgba(15,20,34,.55);

  --g-accent:#5a4dff;
  --g-accent-2:#8a7dff;
  --g-accent-soft: rgba(90,77,255,.18);

  --g-shadow: 0 18px 45px rgba(15,20,34,.10);

  --g-radius: 18px;
  --g-radius-sm: 14px;
  --g-max: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--g-text);
  background:var(--g-bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
}

/* Цикличный фон: верх = низ, стиль — в центре */
body::before{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;

  background:
    radial-gradient(900px 600px at 50% 50%, rgba(90,77,255,.16), transparent 70%),
    radial-gradient(1200px 800px at 20% 45%, rgba(138,125,255,.12), transparent 72%),
    radial-gradient(1200px 800px at 80% 55%, rgba(138,125,255,.10), transparent 74%),

    radial-gradient(1400px 900px at 50% 20%, rgba(255,255,255,.92), transparent 75%),
    radial-gradient(1400px 900px at 50% 80%, rgba(255,255,255,.92), transparent 75%),

    linear-gradient(
      180deg,
      #f6f7ff 0%,
      #f3f4ff 18%,
      #eef0ff 50%,
      #f3f4ff 82%,
      #f6f7ff 100%
    );

  filter:saturate(1.02) contrast(1.01);
  transform:translateZ(0);
  z-index:-1;
}

/* Микрошум — прячет любые "переходы" */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(15,20,34,.012) 0px,
      rgba(15,20,34,.012) 1px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode:multiply;
  opacity:.22;
  z-index:-1;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.95}

.container{
  max-width:var(--g-max);
  margin:0 auto;
  padding: 0 20px;
}

.section{
  padding: 84px 0;
}

h1,h2,h3{margin:0 0 12px 0; letter-spacing:-.02em}
h1{font-size: clamp(34px, 5vw, 45px); line-height:1.02}
h2{font-size: clamp(26px, 3vw, 38px); line-height:1.1}
h3{font-size: 18px; line-height:1.2}

p{margin:0 0 12px 0; color:var(--g-muted)}
.small{font-size: 13px; color: var(--g-muted-2)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border: 1px solid var(--g-border);
  background: rgba(255,255,255,.72);
  border-radius: 999px;
  color: var(--g-muted); 
}

.card{
  border:1px solid var(--g-border);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow); 
}

.card-inner{padding: 22px}

.grid{
  display:grid;
  gap: 18px;
}

.grid-2{grid-template-columns: 1.1fr .9fr}
.grid-3{grid-template-columns: repeat(3, 1fr)}

@media (max-width: 980px){
  .grid-2{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .section{padding: 62px 0}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border:1px solid var(--g-border);
  background: rgba(255,255,255,.70);
  color: var(--g-text);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.82); border-color: rgba(15,20,34,.18)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn-primary{
  border-color: rgba(90,77,255,.45);
  background: linear-gradient(180deg, rgba(90,77,255,.95), rgba(90,77,255,.70));
  color:#ffffff;
  box-shadow: 0 16px 34px rgba(90,77,255,.18);
}
.btn-primary:hover{background: linear-gradient(180deg, rgba(90,77,255,.98), rgba(90,77,255,.76))}
.btn-ghost{
  background: transparent;
  border-color: rgba(15,20,34,.16);
}

.hr{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,20,34,.14), transparent);
  margin: 18px 0;
}

.kbd{
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(15,20,34,.14);
  background: rgba(255,255,255,.75);
  color: rgba(15,20,34,.78);
}