/* ============================================================
   hub.css — витрина бренда Secrypta (brand-hub).
   Zero-build, на brand/tokens.css (свет+тёмная). Самодостаточна
   (возможен отдельный домен secrypta.com) — примитивы дублируют
   язык дизайна лендинга (glass/grid/неон/mono/лого), не импортируют его.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--c-bg); color:var(--c-fg); font:var(--fs-base)/var(--lh-base) var(--font-sans)}
/* grid-фон + глоу (fixed-слой за контентом, обе темы через токены) */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--grad-bg-glow),
    linear-gradient(var(--c-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 48px 48px, 48px 48px; background-position:center top}
.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
a{color:var(--c-accent-2)}
h1,h2,h3{margin:0}

/* a11y: фокус-кольцо + skip-link */
a:focus-visible,button:focus-visible{outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-sm)}
.skip{position:absolute; left:var(--sp-2); top:-120px; z-index:10; background:var(--c-accent); color:#fff;
  font-weight:var(--fw-bold); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-md); text-decoration:none;
  transition:top var(--dur-fast) var(--ease)}
.skip:focus{top:var(--sp-2)}

/* ---- шапка (sticky, backdrop-blur; бренд слева, тоггл справа) ---- */
.site-header{position:sticky; top:0; z-index:50; background:var(--c-bg);
  background:color-mix(in srgb,var(--c-bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--c-glass-border)}
.site-header-inner{max-width:var(--container); margin:0 auto; padding:var(--sp-3) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3)}
.hbrand{display:inline-flex; align-items:center; gap:var(--sp-3); text-decoration:none; color:var(--c-fg);
  font-weight:var(--fw-bold); font-size:var(--fs-xl); letter-spacing:var(--ls-tight)}
.hbrand:hover{color:var(--c-fg)}
.logo-svg{width:38px; height:38px; flex:none; display:block; filter:drop-shadow(0 0 8px rgba(79,140,255,.38))}
.logo-orbit{transform-origin:24px 24px; animation:orbitRotate 18s linear infinite}
.logo-core{transform-origin:24px 24px; animation:coreBreathe 3.6s ease-in-out infinite}
.logo-facets{animation:facetShimmer 4.2s ease-in-out infinite}
@keyframes orbitRotate{to{transform:rotate(360deg)}}
@keyframes coreBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes facetShimmer{0%,100%{opacity:.9}50%{opacity:1}}
.hcontrols{display:flex; align-items:center; gap:var(--sp-2)}
.theme-toggle{display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  background:var(--c-chip-bg); border:1px solid var(--c-line); color:var(--c-fg); border-radius:var(--r-pill);
  cursor:pointer; font-size:var(--fs-base); line-height:1; padding:0}
.theme-toggle:hover{border-color:var(--c-line-strong)}
.js .theme-toggle{display:inline-flex}
.langs{display:flex; gap:var(--sp-2)}
.lang{font-size:var(--fs-xs); background:var(--c-chip-bg); border:1px solid var(--c-line); color:var(--c-muted);
  border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); text-decoration:none; display:inline-flex;
  align-items:center; min-height:44px; line-height:1}
.lang:hover{color:var(--c-fg)}
.lang[aria-current="page"]{background:var(--c-accent); color:#fff; border-color:var(--c-accent)}

/* ---- кнопки ---- */
.btn{display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--c-accent); color:#fff; border:0;
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-5); font-size:var(--fs-base); font-weight:var(--fw-bold);
  min-height:44px; cursor:pointer; text-decoration:none; line-height:1; transition:filter var(--dur-fast) var(--ease)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--c-chip-bg); color:var(--c-fg); border:1px solid var(--c-line)}

/* ---- hero ---- */
.hub-hero{padding:var(--sp-11) 0 var(--sp-10)}
.eyebrow{display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--c-muted); background:var(--c-chip-bg); border:1px solid var(--c-line); border-radius:var(--r-pill);
  padding:var(--sp-1) var(--sp-4); margin-bottom:var(--sp-4)}
.hub-hero h1{font-size:clamp(34px,6vw,56px); line-height:1.05; letter-spacing:-1.2px; font-weight:var(--fw-bold)}
.hub-hero h1 .grad{color:var(--c-fg);
  background:linear-gradient(90deg,var(--c-accent),var(--c-brand-grad-end),transparent) no-repeat;
  background-size:100% 3px; background-position:0 100%; padding-bottom:.08em}
.hub-tag{color:var(--c-accent-2); font-size:var(--fs-xl); font-weight:var(--fw-bold); margin:var(--sp-2) 0 0}
.hub-lead{color:var(--c-muted); font-size:var(--fs-lg); line-height:1.55; max-width:620px; margin:var(--sp-4) 0 0}

/* ---- три продукта (glass-карты) ---- */
.hub-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); margin:var(--sp-8) 0}
.hub-card{display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--c-glass); -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--c-glass-border); border-radius:var(--r-xl); padding:var(--sp-6);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease)}
.hub-card:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--c-accent) 45%, var(--c-glass-border)); box-shadow:var(--sh-glass-hover)}
.hub-card .ctag{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-accent);
  background:var(--c-chip-bg); border:1px solid var(--c-line); border-radius:var(--r-pill);
  padding:2px var(--sp-3); align-self:flex-start}
.hub-card h3{font-size:var(--fs-xl); letter-spacing:var(--ls-tight)}
.hub-card p{margin:0; color:var(--c-muted); font-size:var(--fs-sm); line-height:1.55; flex:1}
.hub-card .btns{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-2)}
.hub-card .btn{font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-4)}

/* ---- Pro / для команд ---- */
.hub-cta{position:relative; overflow:hidden; background:var(--grad-panel); border:1px solid var(--c-line);
  border-radius:var(--r-xl); padding:var(--sp-8); margin:var(--sp-8) 0}
.hub-cta::before{content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.hub-cta h2{font-size:var(--fs-2xl); letter-spacing:var(--ls-tight); margin-bottom:var(--sp-2)}
.hub-cta p{color:var(--c-muted); font-size:var(--fs-sm); max-width:640px; margin:0 0 var(--sp-5)}

/* ---- футер ---- */
footer{border-top:1px solid var(--c-line); padding:var(--sp-6) 0 var(--sp-10); margin-top:var(--sp-6);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; align-items:center;
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-muted)}
footer a{color:var(--c-muted); text-decoration:none}
footer a:hover{color:var(--c-fg)}

/* ---- адаптив ---- */
@media(max-width:820px){ .hub-grid{grid-template-columns:1fr} }
@media(max-width:620px){
  .hub-hero{padding:var(--sp-10) 0 var(--sp-8)}
  .btn{width:100%; justify-content:center}
  .hub-card .btn{width:auto}
}

/* ---- reduced-motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .logo-orbit,.logo-core,.logo-facets{animation:none}
  .hub-card:hover{transform:none}
}