/* APLO marketing site — токены из дизайн-системы (docs/design-system).
   Единственная гарнитура сайта — APLO Display v3 (строчные + прописные, 2 начертания). */
@font-face{
  font-family:"APLO Display";
  src:url("assets/aplo-display.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"APLO Display";
  src:url("assets/aplo-display-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --purple:#7b2cff;--violet:#b445ff;--gold:#ffd166;--error:#ff4f78;
  --bg:#050509;--fg:#f7f1ff;--text2:#bdb2ce;--muted:#746a84;
  --card:rgba(14,13,22,.92);--border:rgba(255,255,255,.08);
  --radius:18px;--glow:0 0 34px rgba(123,44,255,.36);
  --display:"APLO Display",system-ui,sans-serif;
  --ui:"APLO Display",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle 640px at 18% 120px,rgba(123,44,255,.2),transparent 70%),
    radial-gradient(circle 520px at 85% 60px,rgba(255,209,102,.09),transparent 70%),
    radial-gradient(circle 700px at 70% 88%,rgba(123,44,255,.1),transparent 70%),
    linear-gradient(160deg,#050509,#090812 55%,#06050c);
  background-color:#050509;
  color:var(--fg);font:16px/1.6 var(--ui);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* --- кнопки --- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;
  border-radius:9999px;font:600 14px/1 var(--ui);transition:opacity .15s,background .15s}
.btn.primary{background:linear-gradient(90deg,var(--purple),var(--violet));box-shadow:var(--glow)}
.btn.primary:hover{opacity:.9}
.btn.ghost{border:1px solid var(--border);background:rgba(255,255,255,.03)}
.btn.ghost:hover{background:rgba(255,255,255,.07)}
.btn.lg{height:48px;padding:0 30px;font-size:16px}
.btn.wide{width:100%}

/* --- header --- */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:34px;
  padding:14px 5vw;background:rgba(5,5,9,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;letter-spacing:.04em}
.nav{display:flex;gap:26px;font-size:14px;color:var(--text2);margin-left:auto}
.nav a:hover{color:var(--fg)}
.hdr-cta{display:flex;gap:10px}

/* --- hero --- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:72px 5vw 60px;max-width:1280px;margin:0 auto}
.hero-text{max-width:560px}
.eyebrow{font:13px var(--display);letter-spacing:.22em;color:var(--violet);text-transform:uppercase}
h1{font:400 clamp(40px,5.4vw,72px)/1.04 var(--display);margin:18px 0 22px;letter-spacing:.01em}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--violet),var(--purple) 55%,var(--error));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--text2);font-size:18px;max-width:520px}
.cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.fineprint{margin-top:14px;font-size:12.5px;color:var(--muted)}
.hero-art{width:min(46vw,560px);flex-shrink:0}
.hero-art svg{width:100%}

/* hero-анимации */
.spin-slow{animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eq rect{transform-origin:center 175px;animation:eq 2.2s ease-in-out infinite}
.eq rect:nth-child(odd){animation-duration:2.8s}
.eq rect:nth-child(3n){animation-delay:.4s}
.eq rect:nth-child(4n){animation-delay:.9s}
@keyframes eq{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1.08)}}

/* --- sections --- */
.section{padding:72px 5vw;max-width:1280px;margin:0 auto}
.sec-title{font:400 clamp(26px,3vw,38px)/1.15 var(--display);text-align:center;letter-spacing:.02em}
.sec-title em{font-style:normal;background:linear-gradient(90deg,var(--violet),var(--error));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-sub{text-align:center;color:var(--muted);margin-top:10px}

/* фичи */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.feat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;
  transition:border-color .2s,transform .2s}
.feat:hover{border-color:rgba(180,69,255,.45);transform:translateY(-2px)}
.feat svg{width:26px;height:26px;fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font:400 17px var(--display);margin:14px 0 6px;letter-spacing:.02em}
.feat p{font-size:13.5px;color:var(--text2)}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px}
.step .num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--violet));font:400 18px var(--display);box-shadow:var(--glow)}
.step h3{font:400 18px var(--display);margin:16px 0 6px;letter-spacing:.02em}
.step p{font-size:14px;color:var(--text2)}

/* AI-секция */
.ai{display:flex;align-items:center;gap:56px;justify-content:center}
.ai-text{max-width:520px}
.ai-text p{color:var(--text2);margin-top:14px}
.ai-text .honest{color:var(--muted);font-size:14px}
.orb{position:relative;display:block;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#221636,#0c0817 70%);animation:breath 3.6s ease-in-out infinite}
.orb::before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:3px;
  background:conic-gradient(from 0deg,#7b2cff,#ff4f78,#b445ff,#58b7ff,#7b2cff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 6s linear infinite}
.orb::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(123,44,255,.28),transparent 70%)}
@keyframes breath{0%,100%{box-shadow:0 0 26px rgba(123,44,255,.35)}50%{box-shadow:0 0 44px rgba(180,69,255,.55)}}
.win{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.amp{position:absolute;inset:0;animation:amp 3.2s ease-in-out infinite;transform-origin:50% 50%}
@keyframes amp{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1.12)}}
.wave{position:absolute;left:0;top:0;width:200%;height:100%;animation:flow linear infinite}
.wave svg{width:100%;height:100%}
@keyframes flow{to{transform:translateX(-50%)}}
.w1{animation-duration:2.8s}
.w2{animation-duration:4.2s;animation-direction:reverse;opacity:.85}
.w3{animation-duration:6s;opacity:.5}

/* тариф */
.price-card{max-width:440px;margin:36px auto 0;background:var(--card);border:1px solid rgba(123,44,255,.55);
  border-radius:var(--radius);padding:28px;box-shadow:0 0 34px rgba(123,44,255,.2)}
.price-head{display:flex;justify-content:space-between;align-items:center}
.plan{font:400 26px var(--display);letter-spacing:.06em}
.chip{display:inline-flex;height:22px;padding:2px 10px;border-radius:9999px;background:var(--purple);font-size:12px;font-weight:600;align-items:center}
.price-card ul{list-style:none;margin:20px 0 24px;display:grid;gap:11px}
.price-card li{padding-left:26px;position:relative;color:var(--text2);font-size:14.5px}
.price-card li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;
  background:rgba(72,224,164,.15) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2348e0a4" stroke-width="3" stroke-linecap="round"%3E%3Cpath d="M5 12.5l4.5 4.5L19 7.5"/%3E%3C/svg%3E') center/9px no-repeat}
.price-card .fineprint{text-align:center}

/* footer */
.ftr{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 5vw;border-top:1px solid var(--border);max-width:1280px;margin:40px auto 0}
.logo-sm{font-family:var(--display);letter-spacing:.06em;margin-right:14px}
.copy{color:var(--muted);font-size:13px}
.ftr-nav{display:flex;gap:22px;font-size:13.5px;color:var(--text2)}
.ftr-nav a:hover{color:var(--fg)}

/* адаптив */
@media (max-width: 960px){
  .nav{display:none}
  .hero{flex-direction:column;text-align:center;padding-top:48px}
  .hero-text{max-width:640px}
  .sub{margin:0 auto}
  .cta-row{justify-content:center}
  .hero-art{width:min(88vw,480px)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .ai{flex-direction:column;gap:30px;text-align:center}
  .ai-text .sec-title{text-align:center !important}
}
@media (max-width: 560px){
  .feat-grid{grid-template-columns:1fr}
  .hdr{gap:12px}
  .hdr .btn.ghost{display:none}
  .ftr{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){
  .spin-slow,.eq rect,.orb,.orb::before,.wave,.amp{animation:none !important}
}