/* Прототип главной themaslov.ru — общая оболочка. Токены = MASLOV-TOKENS.json v2.1, кнопка/плашка = globals.css движка. */
:root{
  --bg-root:#08090C; --bg-surface-1:#111319; --bg-surface-2:rgba(24,26,36,0.94); --bg-surface-3:rgba(255,255,255,0.04);
  --bg-nav:rgba(8,9,12,0.74); --bg-card:linear-gradient(180deg,#15171F,#101218);
  --red-core:#FF3D2E; --red-muted:#FF7D6A; --red-glow:rgba(255,61,46,0.13); --red-border:rgba(255,61,46,0.18); --red-border-strong:rgba(255,61,46,0.28);
  --blue-core:#3D8BFF; --blue-muted:#7FB2FF; --blue-glow:rgba(61,139,255,0.10);
  --emerald-core:#1BDE8A; --emerald-bg:rgba(27,222,138,0.08); --emerald-border:rgba(27,222,138,0.18);
  --text-primary:#F4F6FA; --text-secondary:rgba(244,246,250,0.56); --text-tertiary:rgba(244,246,250,0.42); --text-dim:rgba(244,246,250,0.28); --text-ghost:rgba(244,246,250,0.22);
  --border-base:rgba(255,255,255,0.08); --border-subtle:rgba(255,255,255,0.06); --border-nav:rgba(255,255,255,0.11);
  --steel:#C9CFDA;
  --max-width:1280px; --page-padding:40px; --nav-height:64px;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'Golos Text','Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --motion-hover:800ms cubic-bezier(0.25,1,0.5,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg-root);color:var(--text-primary);font:400 15.5px/1.65 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh;position:relative}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue-muted);outline-offset:3px}

/* Атмосфера (SPECS §15): тёплое пятно сверху, холодное снизу справа, зерно 3.5 % */
.atmo{position:fixed;inset:0;pointer-events:none;z-index:0}
.atmo::before{content:'';position:absolute;left:50%;top:-340px;width:960px;height:720px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,61,46,0.10),transparent 62%)}
.atmo::after{content:'';position:absolute;right:-120px;bottom:-180px;width:620px;height:620px;background:radial-gradient(circle,rgba(61,139,255,0.06),transparent 66%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.035;background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.page{position:relative;z-index:2}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--page-padding)}

/* Nav (SPECS §1, §2а): знак M · divider · THE MASLOV /OS — /OS красится голосом витрины */
.nav{position:sticky;top:0;z-index:10;height:var(--nav-height);background:var(--bg-nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-nav)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.lockup{display:flex;align-items:center;gap:12px}
.lockup svg{width:13px;height:22px;display:block}
.lockup i{width:1px;height:18px;background:var(--border-nav)}
.lockup b{font:500 11px/1 var(--font-mono);letter-spacing:0.14em;color:var(--text-secondary)}
.lockup b em{font-style:normal;color:var(--red-muted)}
.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{font:500 13.5px/1 var(--font-sans);color:var(--text-secondary);transition:color var(--motion-hover)}
.nav-links a:hover{color:var(--text-primary)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ghost{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border:1px solid var(--border-nav);color:var(--text-secondary);font:500 13.5px/1 var(--font-sans);transition:color var(--motion-hover),border-color var(--motion-hover),background var(--motion-hover)}
.ghost:hover{color:var(--text-primary);border-color:rgba(255,255,255,0.22);background:var(--bg-surface-3)}
.nav-cta .btn-glow__inner{padding:11px 18px;font-size:13px}

/* Primary CTA .btn-glow v3.1 — снято с globals.css движка */
.btn-glow-halo{position:relative;isolation:isolate;display:inline-flex}
.btn-glow-halo::after{content:'';position:absolute;left:8%;right:8%;top:calc(100% - 7px);height:24px;background:radial-gradient(55% 100% at 50% 0%,rgba(255,61,46,0.5),transparent 72%);filter:blur(8px);opacity:0;transition:opacity var(--motion-hover);pointer-events:none;z-index:-1}
.btn-glow-halo:hover::after{opacity:1}
.btn-glow{position:relative;display:inline-flex;padding:1.5px;overflow:hidden;background:rgba(255,255,255,0.07);isolation:isolate;
  clip-path:polygon(2px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px);transition:filter var(--motion-hover)}
.btn-glow__comet{position:absolute;left:50%;top:50%;width:280%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;animation:comet-spin 3.5s linear infinite}
.btn-glow__comet--default{background:conic-gradient(from 0deg,transparent 0 284deg,rgba(255,61,46,0.06) 290deg,rgba(255,61,46,0.55) 322deg,#ff3d2e 344deg,#ffc9be 351deg,transparent 352deg 360deg)}
.btn-glow__comet--hover{background:conic-gradient(from 0deg,transparent 0 212deg,rgba(255,61,46,0.08) 220deg,rgba(255,61,46,0.7) 290deg,#ff3d2e 340deg,#ffdcd4 351deg,transparent 352deg 360deg);opacity:0;transition:opacity var(--motion-hover)}
.btn-glow:hover .btn-glow__comet--hover{opacity:1}
.btn-glow__inner{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  clip-path:polygon(2px 0,calc(100% - 11.4px) 0,100% 11.4px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px);
  background:linear-gradient(180deg,rgba(30,33,44,0.92),rgba(14,16,22,0.97));box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);color:var(--text-primary);font:600 14px/1 var(--font-sans);padding:14px 27px;white-space:nowrap}
.btn-glow:active .btn-glow__inner{transform:translateY(1px)}
.btn-glow--static .btn-glow__comet{animation:none}
@keyframes comet-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Hero */
.hero{padding:88px 0 56px}
.hero-grid{display:grid;grid-template-columns:0.98fr 1.02fr;gap:56px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:14px}
.os-badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid rgba(255,61,46,0.45);position:relative;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);font:500 11px/1 var(--font-mono);color:var(--red-muted);background:rgba(255,61,46,0.05)}
.os-badge::after{content:'';position:absolute;right:-2px;top:-2px;width:11px;height:1.5px;background:linear-gradient(90deg,transparent,#FFD9D1);transform:rotate(45deg);transform-origin:right top}
.kicker{font:500 9.5px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-tertiary)}
h1.display{margin:26px 0 0;font:600 clamp(34px,4.6vw,56px)/1.08 var(--font-heading);letter-spacing:-0.025em;color:var(--text-primary);max-width:12ch}
h1.display em{font-style:normal;color:var(--red-muted)}
.lead{margin:22px 0 0;max-width:470px;font-size:17px;line-height:1.65;color:var(--text-secondary)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips span{font:400 11px/1 var(--font-mono);letter-spacing:0.06em;color:var(--text-tertiary);border:1px solid var(--border-base);padding:7px 10px;background:var(--bg-surface-3)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:34px}
.ghost-lg{height:46px;padding:0 20px;font-size:14px}
.meta{margin-top:30px;font:400 10px/1.8 var(--font-mono);letter-spacing:0.10em;text-transform:uppercase;color:var(--text-dim)}
.meta i{font-style:normal;color:var(--text-ghost);padding:0 6px}
.hero-art{position:relative;min-height:420px}
.art-caption{margin-top:16px;text-align:center;font:400 9.5px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}

/* Направления: карточки «матовое стекло» на фаске 13 */
.dirs{padding:40px 0 80px;border-top:1px solid var(--border-subtle)}
.dirs-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.dirs-head h2{margin:0;font:600 22px/1.2 var(--font-heading);letter-spacing:-0.02em}
.dirs-head a{font:400 11px/1 var(--font-mono);color:var(--text-dim);letter-spacing:0.06em}
.dirs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{padding:1px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.05));clip-path:polygon(2px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px);transition:background var(--motion-hover)}
.card:hover{background:linear-gradient(180deg,rgba(255,255,255,0.22),rgba(255,255,255,0.08))}
.card__in{clip-path:polygon(2px 0,calc(100% - 12.4px) 0,100% 12.4px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px);background:var(--bg-card);padding:20px 20px 22px;min-height:150px;display:flex;flex-direction:column;gap:10px;transition:background var(--motion-hover)}
.card:hover .card__in{background:linear-gradient(180deg,#191c25,#12141b)}
.card__k{display:flex;align-items:center;gap:8px;font:500 9.5px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-tertiary)}
.card__k svg{width:14px;height:14px;color:rgba(244,246,250,0.5)}
.card__t{font:600 16px/1.3 var(--font-sans);letter-spacing:-0.01em}
.card__d{font-size:13.5px;line-height:1.5;color:var(--text-secondary);margin-top:auto}
.footer{border-top:1px solid var(--border-subtle);background:var(--bg-surface-1);padding:26px 0;font:400 10px/1.6 var(--font-mono);letter-spacing:0.08em;color:var(--text-dim);text-transform:uppercase}
.footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (max-width:1024px){
  :root{--page-padding:28px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero{padding:56px 0 40px}
  .hero-art{min-height:0}
  .dirs-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
}
@media (max-width:640px){
  :root{--page-padding:16px}
  .hero{padding:40px 0 32px}
  h1.display{font-size:34px;max-width:none}
  .lead{font-size:15.5px}
  .cta-row{flex-direction:column;align-items:stretch}
  .btn-glow-halo,.btn-glow{display:flex}.btn-glow__inner{width:100%}
  .ghost-lg{justify-content:center}
  .dirs-grid{grid-template-columns:1fr}
  .nav-right .ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
  .btn-glow__comet{animation:none}
  .anim,.anim *{animation:none !important;transition:none !important}
}