/* ============================================================
   ГРАВИУМ Инструменты — v2 design system
   Aligned with info.gravium.ru: Inter, #050505, amber-orange
   ============================================================ */

:root {
  --bg:        #050505;
  --ink:       #f7f2e8;
  --muted:     rgba(247,242,232,.55);
  --line:      rgba(255,255,255,.09);
  --line2:     rgba(255,255,255,.13);
  --accent:    #e09640;
  --accent-2:  #edaa6a;
  --accent-bg: rgba(224,150,64,.07);
  --panel:     rgba(255,255,255,.042);
  --panel2:    rgba(255,255,255,.068);
  --shadow:    0 20px 64px rgba(0,0,0,.52);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a { color:inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color:var(--ink);
  background:none!important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Layout ── */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .52s ease, transform .52s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background:rgba(29,29,29,.04);
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-logo {
  width: 38px; height: 38px;
  object-fit: contain;
  filter: invert(1) brightness(1.1);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:var(--ink);
}
.brand-text span {
  font-size: 11px;
  color:var(--brand-ink);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  color:var(--brand-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.nav a:hover {
  color:var(--brand-ink);
  border-color:var(--brand-line);
  background:rgba(29,29,29,.04);
}

/* Полоса шире экрана и прокручивается вбок, но обрубленная последняя
   ссылка читалась как ошибка вёрстки. Правый край растворяем — видно,
   что список продолжается. */
.mobile-strip {
  display: none;
  overflow-x: auto;
  scrollbar-width: none;
  background:rgba(29,29,29,.04);
  border-bottom:1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.mobile-strip::after {
  content: "";
  flex: 0 0 22px;
}
.mobile-strip::-webkit-scrollbar { display: none; }
.mobile-strip a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 14px;
  height: 36px;
  border-right:1px solid var(--line);
  color:var(--muted);
  font-size: 13px;
  transition: color .14s;
}
.mobile-strip a:last-child { border-right:none; }
.mobile-strip a:hover { color:var(--ink); }
.mobile-strip a:active { background:rgba(29,29,29,.04); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  border-bottom:1px solid var(--line);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-embers i {
  position: absolute;
  bottom: -4px;
  border-radius: 50%;
  will-change: opacity, transform;
  animation: heroEmberTools var(--dur,4s) ease-in var(--del,0s) infinite;
}
@keyframes heroEmberTools {
  0%   { opacity: 0;             transform: translate(0,0) scale(1.2); }
  9%   { opacity: var(--pk,.32); }
  76%  { opacity: .07;           transform: translate(var(--ex,10px), calc(var(--ey,-200px) * .78)) scale(.38); }
  100% { opacity: 0;             transform: translate(var(--ex,10px), var(--ey,-200px)) scale(.05); }
}
.hero-embers i:nth-child(1)  { left:4%;  width:2px; height:2px; background:var(--brand-accent); --dur:4.4s; --del:0.0s; --ex:12px;  --ey:-230px; --pk:.28; }
.hero-embers i:nth-child(2)  { left:12%; width:3px; height:3px; background:var(--brand-accent); --dur:5.0s; --del:1.2s; --ex:-8px;  --ey:-280px; --pk:.24; }
.hero-embers i:nth-child(3)  { left:22%; width:2px; height:2px; background:var(--brand-accent); --dur:4.6s; --del:2.3s; --ex:10px;  --ey:-210px; --pk:.30; }
.hero-embers i:nth-child(4)  { left:34%; width:2px; height:2px; background:rgba(29,29,29,.04);--dur:3.8s; --del:0.7s; --ex:-10px; --ey:-195px; --pk:.36; }
.hero-embers i:nth-child(5)  { left:45%; width:3px; height:3px; background:var(--brand-accent); --dur:4.8s; --del:1.6s; --ex:16px;  --ey:-250px; --pk:.26; }
.hero-embers i:nth-child(6)  { left:57%; width:4px; height:4px; background:var(--brand-accent); --dur:4.2s; --del:0.4s; --ex:-14px; --ey:-300px; --pk:.40; }
.hero-embers i:nth-child(7)  { left:66%; width:2px; height:2px; background:var(--brand-accent);--dur:3.7s; --del:2.0s; --ex:10px;  --ey:-235px; --pk:.44; }
.hero-embers i:nth-child(8)  { left:75%; width:3px; height:3px; background:var(--brand-accent); --dur:5.2s; --del:0.9s; --ex:-14px; --ey:-295px; --pk:.36; }
.hero-embers i:nth-child(9)  { left:83%; width:2px; height:2px; background:var(--brand-accent); --dur:4.0s; --del:1.5s; --ex:10px;  --ey:-245px; --pk:.42; }
.hero-embers i:nth-child(10) { left:90%; width:3px; height:3px; background:var(--brand-accent); --dur:4.6s; --del:3.1s; --ex:-12px; --ey:-270px; --pk:.34; }
.hero-embers i:nth-child(11) { left:50%; width:4px; height:4px; background:var(--brand-accent);--dur:3.9s; --del:2.5s; --ex:18px;  --ey:-320px; --pk:.38; }
.hero-embers i:nth-child(12) { left:30%; width:2px; height:2px; background:rgba(29,29,29,.04);--dur:4.3s; --del:1.8s; --ex:-8px;  --ey:-225px; --pk:.46; }

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 80px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.hero-copy { max-width: 680px; }
.hero-eyebrow {
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color:var(--brand-ink);
  margin-bottom: 22px;
}
h1 {
  font-size: clamp(48px, 6.5vw, 80px);
  line-height: .94;
  font-weight: 800;
  letter-spacing: -.034em;
  margin-bottom: 22px;
}
.hero-gold { color:var(--brand-ink); }
.hero-copy > p {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color:var(--muted);
  margin-bottom: 32px;
  max-width: 560px;
}
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  border:1px solid var(--line2);
  background:var(--panel);
  color:var(--ink);
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.btn:hover { transform: translateY(-2px); border-color:var(--brand-accent); box-shadow:none!important; }
.btn-primary {
  background:none!important;
  border-color:var(--brand-accent);
  color:var(--brand-ink);
  box-shadow:none!important;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow:none!important; }
.btn-outline { background:transparent; border-color:var(--line2); }
.btn-outline:hover { border-color:var(--brand-accent); background:var(--accent-bg); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--brand-ink); }
.btn-ghost:hover { border-color:var(--brand-accent); background:var(--accent-bg); }

/* ── Hero rail ── */
.hero-rail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rail-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border:1px solid var(--line);
  background:rgba(29,29,29,.04);
  color:var(--muted);
  font-size: 13px;
  border-radius: 999px;
  transition: color .14s, border-color .14s, background .14s;
  white-space: nowrap;
}
/* Точка у ссылки — тихий акцент одного тона, а не девять разных цветов:
   цвет тут ничего не сообщал, только рябил. */
.rail-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background:var(--accent);
  opacity: .55;
  flex-shrink: 0;
  transition: opacity .14s;
}
.rail-pill:hover::before { opacity: 1; }
.rail-pill:hover { color:var(--ink); border-color:var(--line2); background:rgba(29,29,29,.04); }

/* ── Section ── */
.section { padding: 60px 0; }
.section-head { margin-bottom: 36px; }
.section-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:var(--brand-ink);
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-bottom: 12px;
}
.section-lead {
  font-size: clamp(15px, 1.2vw, 18px);
  color:var(--muted);
  line-height: 1.6;
}

/* ── Tool cards grid ── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.tool-card {
  --tc: var(--accent);
  position: relative;
  overflow: hidden;
  background:var(--bg);
  border-top:2px solid var(--tc);
  padding: 28px;
  display: grid;
  grid-template-rows: 52px 1fr auto;
  gap: 18px;
  min-height: 280px;
  transition: background .18s, transform .18s;
}
.tool-card:hover {
  background:color-mix(in srgb, var(--tc) 4%, var(--bg));
  transform: translateY(-2px);
  z-index: 1;
}

/* Card glow orb */
.tool-card::after {
  content: "";
  position: absolute;
  right: -8%; top: -18%;
  width: 140px; height: 140px;
  border-radius: 50%;
  background:var(--tc);
  filter: blur(28px);
  opacity: .10;
  pointer-events: none;
  transition: opacity .28s, transform .28s;
}
.tool-card:hover::after { opacity: .20; transform: scale(1.15); }

/* Per-tool colors */
.accent-wave      { --tc: #ff942e; }
.accent-coords    { --tc: #d6a861; }
.accent-qr        { --tc: #e2b97f; }
.accent-morse     { --tc: #c9a274; }
.accent-roman     { --tc: #e09640; }
.accent-initials  { --tc: #cfa15f; }
.accent-ideas     { --tc: #e6c08a; }

/* ── Tool icon ── */
.tool-icon {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border:1px solid color-mix(in srgb, var(--tc) 22%, var(--brand-line));
  background:none!important;
  position: relative;
  z-index: 1;
  transition: border-color .2s, box-shadow .2s;
}
.tool-card:hover .tool-icon {
  border-color:color-mix(in srgb, var(--tc) 40%, var(--brand-line));
  box-shadow:none!important;
}

/* ── Tool body ── */
.tool-body { position: relative; z-index: 1; }
.tool-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 8px;
}
.tool-name span { color:var(--tc); }
.tool-desc { color:var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 8px; }
.tool-meta {
  font-size: 12px;
  color:var(--brand-ink);
  letter-spacing: .04em;
}

/* ── Tool CTA ── */
.tool-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--tc) 30%, var(--brand-line));
  background:color-mix(in srgb, var(--tc) 8%, rgba(29,29,29,.04));
  color:var(--ink);
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
  overflow: hidden;
  transition: border-color .16s, background .16s;
}
.tool-cta span { color:var(--tc); }
.tool-card:hover .tool-cta {
  border-color:color-mix(in srgb, var(--tc) 50%, var(--brand-line));
  background:color-mix(in srgb, var(--tc) 14%, rgba(29,29,29,.04));
}

/* ── Icon animations ── */
.icon-wave { animation: iconFloat 4s ease-in-out infinite; }
.tool-card:hover .icon-wave { animation: iconFloat 1.4s ease-in-out infinite; }
.icon-coords { animation: iconFloat 4.2s ease-in-out infinite; }
.tool-card:hover .icon-coords { animation: iconBoost 1.2s ease-in-out infinite; }
.icon-qr { animation: iconPulse 3.5s ease-in-out infinite; }
.icon-morse { animation: iconPulse 2.8s ease-in-out infinite; }
.icon-roman, .icon-roman-number { animation: iconGlow 3.2s ease-in-out infinite; }
.icon-initials { animation: iconPulse 3.8s ease-in-out infinite; }
.icon-ideas { animation: iconSpark 2.6s ease-in-out infinite; }

@keyframes iconFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@keyframes iconBoost  { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(-5deg)} }
@keyframes iconPulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
@keyframes iconGlow   { 0%,100%{box-shadow:none!important} 50%{box-shadow:none!important} }
@keyframes iconSpark  { 0%,100%{transform:rotate(0)} 50%{transform:rotate(7deg)} }

/* ── Inline icon components ── */
.premium-wave-icon { width:42px; height:34px; display:flex; align-items:center; justify-content:center; gap:3.5px; }
.premium-wave-icon i { width:3.5px; border-radius:2px; background:none!important; animation:waveAnim 1.1s ease-in-out infinite; }
.premium-wave-icon i:nth-child(1){height:13px;animation-delay:-.12s}
.premium-wave-icon i:nth-child(2){height:24px;animation-delay:-.25s}
.premium-wave-icon i:nth-child(3){height:35px;animation-delay:-.44s}
.premium-wave-icon i:nth-child(4){height:20px;animation-delay:-.18s}
.premium-wave-icon i:nth-child(5){height:30px;animation-delay:-.36s}
.premium-wave-icon i:nth-child(6){height:23px;animation-delay:-.08s}
.premium-wave-icon i:nth-child(7){height:15px;animation-delay:-.52s}
@keyframes waveAnim { 0%,100%{transform:scaleY(.55);opacity:.55} 50%{transform:scaleY(1.05);opacity:1} }

.premium-pin-icon { width:20px; height:20px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg); border:2px solid var(--brand-accent); position:relative; animation:pinAnim 2.6s ease-in-out infinite; }
.premium-pin-icon::before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--brand-accent); left:50%; top:50%; transform:translate(-50%,-50%); }
@keyframes pinAnim { 0%,100%{translate:0 0} 50%{translate:0 -2px} }

.premium-qr-icon { display:grid; grid-template-columns:repeat(3,6px); grid-template-rows:repeat(3,6px); gap:3px; }
.premium-qr-icon i { width:6px; height:6px; background:rgba(96,174,255,.92); animation:qrAnim 2.2s ease-in-out infinite; }
.premium-qr-icon i:nth-child(2n){opacity:.52}
.premium-qr-icon i:nth-child(3n){animation-delay:.16s}
@keyframes qrAnim { 0%,100%{transform:scale(.85);opacity:.42} 50%{transform:scale(1.04);opacity:1} }

.premium-morse-icon { display:flex; align-items:center; gap:4px; }
.premium-morse-icon i { display:block; height:4px; border-radius:2px; background:rgba(170,178,255,.92); animation:morseAnim 1.4s ease-in-out infinite; }
.premium-morse-icon .dot{width:5px}
.premium-morse-icon .dash{width:14px}
.premium-morse-icon i:nth-child(2){animation-delay:.16s}
.premium-morse-icon i:nth-child(3){animation-delay:.32s}
.premium-morse-icon i:nth-child(4){animation-delay:.48s}
@keyframes morseAnim { 0%,100%{opacity:.4;transform:scaleX(.85)} 50%{opacity:1;transform:scaleX(1.04)} }

.premium-text-icon { color:var(--brand-ink); font-weight:800; font-size:20px; line-height:1; }
.premium-text-icon.purple { color:var(--brand-ink); }
.premium-text-icon.pink   { color:var(--brand-ink); font-size:22px; }

/* ── Secondary cards ── */
.secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 1px;
}
.secondary-card {
  background:var(--bg);
  padding: 28px;
  display: grid;
  gap: 14px;
  transition: background .18s;
}
.secondary-card:hover { background:var(--brand-accent); }
.secondary-body h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.secondary-body p { color:var(--muted); font-size: 15px; line-height: 1.55; }
.secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border:1px solid var(--line2);
  background:var(--panel);
  color:var(--ink);
  font-size: 13px;
  width: fit-content;
  transition: border-color .16s, background .16s;
}
.secondary-cta span { color:var(--brand-ink); }
.secondary-card:hover .secondary-cta { border-color:var(--brand-accent); background:var(--accent-bg); }

/* Reveal cascade for tool cards */
.tools-grid .reveal:nth-child(1) { transition-delay: 0s; }
.tools-grid .reveal:nth-child(2) { transition-delay: .08s; }
.tools-grid .reveal:nth-child(3) { transition-delay: .16s; }
.tools-grid .reveal:nth-child(4) { transition-delay: .24s; }
.tools-grid .reveal:nth-child(5) { transition-delay: .32s; }
.tools-grid .reveal:nth-child(6) { transition-delay: .40s; }
.tools-grid .reveal:nth-child(7) { transition-delay: .48s; }
.tools-grid .reveal:nth-child(8) { transition-delay: .56s; }

/* -- Wave button (orange-copper) -- */
.btn-wave {
  background:none!important;
  border-color:var(--brand-accent);
  color:var(--brand-ink);
  box-shadow:none!important;
}
.btn-wave:hover { transform: translateY(-3px); box-shadow:none!important; }

/* ── Footer ── */
.footer {
  padding: 40px 0 48px;
  border-top:1px solid var(--line);
  background:var(--brand-paper);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(200px, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.footer-brand-col { display: flex; flex-direction: column; }
.footer-logo {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: invert(1) brightness(1.1);
  margin-bottom: 14px;
}
.footer-brand-text {
  margin: 0;
  color:var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.footer-brand-text span { color:var(--brand-ink); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:var(--brand-ink);
  margin-bottom: 4px;
}
.footer-col a {
  color:var(--muted);
  font-size: 13px;
  transition: color .15s;
  width: fit-content;
}
.footer-col a:hover { color:var(--brand-ink); }

/* ── Responsive ── */
@media (max-width: 1060px) {
  .nav { display: none; }
  .mobile-strip { display: flex; }
}
@media (max-width: 860px) {
  .tools-grid { grid-template-columns: 1fr; }
  .secondary-grid { grid-template-columns: 1fr; }
  .hero-inner { padding: 60px 20px 48px; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { min-height: 80vh; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .tool-card { padding: 20px; min-height: auto; }
  .footer { margin-top: 48px; }
  .hero-embers { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── v2-fix: icon border-radius + color-mix fallbacks ── */
.tool-icon {
  border-radius: 18px;
  border:1px solid var(--brand-line);
  background:rgba(29,29,29,.04);
}
.tool-card:hover .tool-icon {
  border-color:var(--brand-line);
  box-shadow:none!important;
}
.tool-cta {
  border:1px solid var(--brand-line);
  background:rgba(29,29,29,.04);
}
.tool-card:hover .tool-cta {
  border-color:var(--brand-line);
  background:rgba(29,29,29,.04);
}
.tool-card::after {
  /* color-mix fallback already works via background:var(--tc) but let opacity handle it */
}

/* accent tints per card — no color-mix needed */
.accent-wave      .tool-icon { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-coords    .tool-icon { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-qr        .tool-icon { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-morse     .tool-icon { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-roman     .tool-icon { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-initials  .tool-icon { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-ideas     .tool-icon { border-color:var(--brand-accent); background:var(--brand-accent); }

.accent-wave     .tool-cta { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-coords   .tool-cta { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-qr       .tool-cta { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-morse    .tool-cta { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-roman    .tool-cta { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-initials .tool-cta { border-color:var(--brand-accent); background:var(--brand-accent); }
.accent-ideas    .tool-cta { border-color:var(--brand-accent); background:var(--brand-accent); }
/* ===== Craft v9 (2026-06-20) — clean dark cards + cohesive line-icon animations ===== */
.tools-grid,.secondary-grid{gap:18px!important;background:none!important;border:none!important;overflow:visible!important}
.tool-card{background:none!important;border:1px solid color-mix(in srgb,var(--tc) 24%,var(--brand-line))!important;border-radius:16px!important;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s!important}
.tool-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--tc) 50%,transparent)!important;box-shadow:none!important}
.secondary-card{background:none!important;border:1px solid color-mix(in srgb,var(--sc,var(--brand-accent)) 24%,var(--brand-line))!important;border-radius:16px!important;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s!important}
.secondary-card:nth-child(1){--sc:#78d6a4}.secondary-card:nth-child(2){--sc:#e09640}
.secondary-card:hover{transform:translateY(-6px);box-shadow:none!important}
/* Пульсирующее кольцо у иконки координат разрасталось в 4 раза и вылезало
   за плашку — на карточке это читалось как случайный кружок. Обрезаем. */
.tool-icon{overflow:hidden;color:var(--tc);width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--tc) 12%,transparent);border:1px solid color-mix(in srgb,var(--tc) 22%,transparent);animation:none!important}
.tool-icon .ti{width:34px;height:30px;overflow:visible;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tc) 45%,transparent))}
.premium-text-icon{color:var(--tc)!important;font-weight:800;font-size:22px;line-height:1;animation:tiGlyph 3.4s ease-in-out infinite}
@keyframes tiGlyph{0%,100%{opacity:.8;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}
.ti-wave line{transform-origin:center;animation:tiWave 1.4s ease-in-out infinite}
.ti-wave line:nth-child(1){animation-delay:-0s}
.ti-wave line:nth-child(2){animation-delay:-0.18s}
.ti-wave line:nth-child(3){animation-delay:-0.36s}
.ti-wave line:nth-child(4){animation-delay:-0.1s}
.ti-wave line:nth-child(5){animation-delay:-0.46s}
.ti-wave line:nth-child(6){animation-delay:-0.28s}
@keyframes tiWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.05)}}
.ti-coords .ring{transform-origin:12px 10.2px;animation:tiPing 2.2s ease-out infinite}
@keyframes tiPing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.ti-qr .scan{animation:tiScan 2.6s ease-in-out infinite}
@keyframes tiScan{0%,100%{transform:translateY(-7px);opacity:0}25%,75%{opacity:.85}50%{transform:translateY(7px);opacity:.85}}
.ti-morse line{opacity:.25;animation:tiMorse 2.4s steps(1,end) infinite}
.ti-morse line:nth-child(1){animation-delay:-2.40s}
.ti-morse line:nth-child(2){animation-delay:-2.10s}
.ti-morse line:nth-child(3){animation-delay:-1.80s}
.ti-morse line:nth-child(4){animation-delay:-1.50s}
@keyframes tiMorse{0%,100%{opacity:.25}12%,30%{opacity:1}}
.hero-eyebrow,.section-kicker{display:inline-flex!important;align-items:center;gap:12px}
.hero-eyebrow::before,.section-kicker::before{content:'';width:28px;height:1px;background:none!important;opacity:.6;flex:0 0 auto}
footer{position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:none!important;opacity:.6}
@media (prefers-reduced-motion:reduce){.ti *,.premium-text-icon{animation:none!important}}
/* ===== Craft v10 (2026-06-20) — fix SVG transforms + bolder, cooler icon motion ===== */
.ti line,.ti circle,.ti rect,.ti path{transform-box:fill-box;transform-origin:center}
.tool-icon{animation:tiBadge 3.8s ease-in-out infinite}
@keyframes tiBadge{0%,100%{box-shadow:none!important;border-color:color-mix(in srgb,var(--tc) 22%,transparent)}50%{box-shadow:none!important;border-color:color-mix(in srgb,var(--tc) 45%,transparent)}}
.tool-card:hover .ti{transform:scale(1.06)}.ti{transition:transform .3s ease}
.ti-wave line{animation:tiWave 1.05s ease-in-out infinite!important}
@keyframes tiWave{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1.18)}}
.ti-coords .ring{animation:tiPing 1.9s ease-out infinite!important}
@keyframes tiPing{0%{transform:scale(.5);opacity:1}70%{opacity:.25}100%{transform:scale(4.2);opacity:0}}
.ti-coords path{animation:tiBob 2.4s ease-in-out infinite}@keyframes tiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.ti-qr .scan{animation:tiScan 2.2s ease-in-out infinite!important}
@keyframes tiScan{0%,100%{transform:translateY(-7px);opacity:0}25%,75%{opacity:1}50%{transform:translateY(7px);opacity:1}}
.ti-qr rect{animation:tiQr 2.4s ease-in-out infinite}
.ti-qr rect:nth-of-type(1){animation-delay:-0s}
.ti-qr rect:nth-of-type(2){animation-delay:-0.2s}
.ti-qr rect:nth-of-type(3){animation-delay:-0.4s}
@keyframes tiQr{0%,70%{opacity:.5}30%{opacity:1}}
.ti-morse line{opacity:.2;animation:tiMorse 2.2s steps(1,end) infinite!important}
.ti-morse line:nth-child(1){animation-delay:-2.20s}
.ti-morse line:nth-child(2){animation-delay:-1.92s}
.ti-morse line:nth-child(3){animation-delay:-1.64s}
.ti-morse line:nth-child(4){animation-delay:-1.36s}
@keyframes tiMorse{0%,100%{opacity:.2}10%,32%{opacity:1;filter:drop-shadow(0 0 5px currentColor)}}
.premium-text-icon{background:none!important;background-size:230% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:currentColor!important;color:var(--brand-ink)!important;animation:tiShine 2.8s linear infinite!important}
@keyframes tiShine{0%{background-position:210% center}100%{background-position:-30% center}}

/* ===== Craft v11 (2026-06-20) — subtle living bg glow + space out secondary cards ===== */

/* Символы / Подбор шрифта — больше раздельности */
.secondary-grid { gap: 26px !important; }
@media (max-width:760px){ .secondary-grid { gap: 18px !important; } }

/* контент всегда над фоном */
.tool-card > *, .secondary-card > * { position: relative; z-index: 1; }

/* мягкая живая подсветка фона (дрейфует, в цвет инструмента) — деликатно, не busy */
.tool-card::after, .secondary-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:none!important;
  opacity: .4 !important;
  animation: tiBgDrift 9s ease-in-out infinite !important;
}
@keyframes tiBgDrift {
  0%,100% { transform: translate(0,0) scale(1); opacity: .32; }
  50%     { transform: translate(-9%, 12%) scale(1.18); opacity: .6; }
}
.tool-card:hover::after, .secondary-card:hover::after { opacity: .7 !important; }

@media (prefers-reduced-motion: reduce){ .tool-card::after,.secondary-card::after{ animation:none !important } }

/* Craft v12 — even spacing */
.tools-grid,.secondary-grid{gap:18px!important}
.secondary-grid{margin-top:18px!important}

/* Craft v13 (2026-06-21) — tool subpage heroes compact (not full-height like home) */
.wrap .hero{
  min-height:0 !important;
  display:block !important;
  align-items:initial !important;
  border-bottom:0 !important;
}


    .tool-wrap{max-width:1040px;margin:0 auto;padding:20px 16px 40px}
    .tool-card{
      border-radius:12px;border:1px solid var(--brand-line);
      background:none!important;
      box-shadow:none!important;padding:22px;margin-top:18px;position:relative;overflow:hidden
    }
    .tool-card::before{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:none!important}
    .tool-label,.tool-title,.tool-text,.controls,.status,.idea-box,.chips,.tips{position:relative;z-index:1}
    .tool-label{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
    .tool-title{font-size:42px;line-height:1.05;margin:0 0 12px}
    .tool-text{color:var(--brand-ink);font-size:17px;line-height:1.6;max-width:760px}
    .controls{display:grid;grid-template-columns:1fr auto auto;gap:12px;margin-top:18px}
    .tool-select{
      width:100%;min-height:54px;padding:0 18px;border-radius:12px;border:1px solid var(--brand-line);
      background:rgba(29,29,29,.04);color:var(--brand-ink);outline:none;font-size:16px
    }
    .btn-main{
      min-height:54px;padding:0 18px;border-radius:12px;border:1px solid var(--brand-accent);
      background:none!important;
      color:var(--brand-ink);cursor:pointer;font-size:15px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      position:relative;overflow:hidden;white-space:nowrap
    }
    .btn-main:hover{
      transform:translateY(-1px);border-color:var(--brand-accent);box-shadow:none!important}
    .btn-main:active{transform:scale(.985)}
    .idea-box{
      margin-top:18px;border-radius:12px;border:1px solid var(--brand-line);
      background:rgba(29,29,29,.04);padding:20px
    }
    .idea-label{color:var(--muted);font-size:12px;letter-spacing:.10em;text-transform:uppercase;margin-bottom:10px}
    .idea-text{font-size:34px;line-height:1.25;min-height:52px;word-break:break-word}
    .idea-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
    .mini-btn{
      min-height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--brand-line);
      background:none!important;
      color:var(--brand-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }
    .mini-btn:hover{
      transform:translateY(-1px);border-color:var(--brand-accent);box-shadow:none!important}
    .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
    .chip{
      min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--brand-line);
      background:rgba(29,29,29,.04);color:var(--brand-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px
    }
    .chip:hover{border-color:var(--brand-accent)}
    .tips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
    .tip{
      border-radius:12px;border:1px solid var(--brand-line);background:rgba(29,29,29,.04);
      padding:14px;color:var(--brand-ink);font-size:14px;line-height:1.55
    }
    @media (max-width:860px){.controls{grid-template-columns:1fr}}
    @media (max-width:760px){
      .tool-title{font-size:34px}
      .idea-text{font-size:26px}
      .tips{grid-template-columns:1fr}
    }
  

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo{
  height:56px;
  width:auto;
  display:block;
  filter:invert(1) brightness(1.18);
  opacity:.97;
  transform-origin:center;
  transition:transform .28s ease, opacity .28s ease, filter .28s ease;
  animation:brandFloat 4.2s ease-in-out infinite;
}

.brand:hover .brand-logo{
  opacity:1;
  transform:scale(1.06);
  filter:invert(1) brightness(1.2) drop-shadow(0 0 10px rgba(214,168,97,0.34));
}

@keyframes brandFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}

@media (max-width: 720px){
  .brand-logo{ height:44px; }
}

























@media (max-width: 900px){
  

  

  
}

@media (max-width: 720px){
  

  

  
}


/* Approved GRAVIUM light identity, service accent #00AFA0. */
:root{--brand-paper:#F4F1EA;--brand-ink:#1D1D1D;--brand-accent:#00AFA0;--brand-on-accent:#1D1D1D;--brand-line:rgba(29,29,29,.2);--bg:#F4F1EA!important;--bg-soft:#F4F1EA;--bg-2:#F4F1EA;--paper:#F4F1EA;--paper-deep:#F4F1EA;--surface:#F4F1EA;--surface-2:#F4F1EA;--surface-3:#F4F1EA;--graphite:#F4F1EA;--graphite-2:#F4F1EA;--text:#1D1D1D;--ink:#1D1D1D;--ink-soft:#625F58;--ink-dim:#625F58;--ink-2:#625F58;--muted:#625F58;--muted-2:#625F58;--muted2:#625F58;--faint:#625F58;--gold:#00AFA0!important;--gold-2:#00AFA0;--gold-light:#00AFA0;--gold-deep:#00AFA0;--gold-dark:#1D1D1D;--accent:#00AFA0!important;--accent-2:#00AFA0;--accent-3:#00AFA0;--accent-bg:rgba(29,29,29,.04);--accent-pale:rgba(29,29,29,.04);--accent-line:rgba(29,29,29,.22);--panel:#F4F1EA;--panel2:#F4F1EA;--panel-2:#F4F1EA;--card:#F4F1EA;--card-hover:#F4F1EA;--border:rgba(29,29,29,.2);--border-strong:rgba(29,29,29,.4);--line:rgba(29,29,29,.2);--line2:rgba(29,29,29,.3);--line-2:rgba(29,29,29,.3);--line-strong:rgba(29,29,29,.3);--white:#F4F1EA;--memory-ink:#1D1D1D;--memory-paper:#F4F1EA;--memory-muted:#625F58;--memory-gold:#00AFA0;--memory-gold-bright:#00AFA0;--radius:4px;--radius-lg:4px;--radius-md:4px;--radius-sm:4px;--r:4px;--r-sm:4px;--r-lg:4px;--r-xl:4px;--shadow:none;--shadow-sm:none;--shadow-small:none;--card-grad:none}
html,body{background:#F4F1EA!important;color:#1D1D1D;color-scheme:light}
*,*:before,*:after{box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body:before,body:after,.site-particles,#fontsParticles,.v2-particles,.v2-hero-glow,.v2-float-dot,.hero-glow,.hero-engrave,.hero:before,.hero:after,.site-footer:before,.footer:before{display:none!important}
.site-header,.topbar,.header-inner,.topbar-inner,.mobile-menu,.mobile-strip,.mobile-nav-strip{background:#F4F1EA!important;color:#1D1D1D!important;border-color:var(--brand-line)!important}
header .brand,header .brand-title,header .brand-name,header .brand-text strong,header .brand-text span,header .brand-sub,header nav a,header .top-link,header .auth-link{color:#1D1D1D!important}
.brand-mark,.footer-logo,.brand-logo{background:none!important;border:0!important;filter:none!important}
.brand-mark,.brand-mark img,.topbar .brand-mark,.topbar .brand-mark img,img.brand-logo,img.footer-logo,.footer-brand img{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important;border-radius:50%!important;filter:none!important;object-fit:contain!important}
img.brand-logo,img.footer-logo,.brand-mark img{content:url('/static/brand-20261101/avatar.png')}
.brand-badge{width:44px;height:44px;border-radius:50%;font-size:0;background:url('/static/brand-20261101/avatar.png') center/contain no-repeat!important;border:0!important}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #1D1D1D!important;outline-offset:3px}
.primary-button,.btn-primary,.btn-accent,.button.primary,.button-gold,.btn.primary,.btn--primary,.btn-gold,.nav-cta,.top-link.top-link-accent,.topbar-cta{background:#00AFA0!important;background-image:none!important;color:#1D1D1D!important;border:1px solid #00AFA0!important;border-radius:4px!important;filter:none!important}
.primary-button:hover,.btn-primary:hover,.btn-accent:hover,.button.primary:hover,.button-gold:hover,.btn.primary:hover,.btn--primary:hover,.btn-gold:hover{background:#1D1D1D!important;color:#F4F1EA!important;border-color:#1D1D1D!important;transform:none!important}
.secondary-button,.ghost-button,.btn-secondary,.button.ghost,.btn--ghost,.btn-ghost,.top-link,.header-nav a,.nav a,.btn,.button,input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{border-radius:4px!important}
.secondary-button,.ghost-button,.btn-secondary,.button.ghost,.btn--ghost,.btn-ghost{background:#F4F1EA!important;color:#1D1D1D!important;border:1px solid var(--brand-line)!important}
.menu-button,.m-burger{background:#F4F1EA!important;color:#1D1D1D!important;border:1px solid var(--brand-line)!important;border-radius:4px!important}
.menu-button span,.m-burger span{background:#1D1D1D!important}
.card,.tool-card,.idea-card,.catalog-product-card,.panel,.quick-path-card,.feature-card,.tier,.benefit,.channel,.wizard-shell,.result-shell,.scenario-chip{border-radius:4px!important;border-color:var(--brand-line)!important}
.idea-card,.catalog-product-card,.tool-card,.secondary-card,.quick-path-card,.card,.panel,.tier,.benefit,.channel,.wizard-shell,.result-shell,.form-card,.field-card{background:#F4F1EA!important;color:#1D1D1D!important}
.idea-card:hover,.catalog-product-card:hover,.tool-card:hover,.tier:hover,.benefit:hover{transform:none!important;border-color:#00AFA0!important}
input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select{background:#F4F1EA!important;color:#1D1D1D!important;border-color:var(--brand-line)!important}
input::placeholder,textarea::placeholder{color:#625F58!important;opacity:1}
h1,h2,h3,h4{color:inherit;-webkit-text-fill-color:currentColor}
h1 em,.hero-title span,.v2-hero-em{background:none!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;text-decoration:underline;text-decoration-color:#00AFA0;text-decoration-thickness:3px;text-underline-offset:.12em}
.eyebrow,.kicker,.v2-hero .eyebrow{color:#1D1D1D!important}
.eyebrow:before,.kicker:before{background:#00AFA0!important;height:3px!important;opacity:1}
.site-footer,.footer{background:#1D1D1D!important;color:#F4F1EA!important;border-top:3px solid #00AFA0!important}
.site-footer a,.site-footer p,.site-footer span,.footer a,.footer p,.footer span,.footer-sub,.footer-brand-text,.footer-brand,.footer-label{color:#F4F1EA!important}
#gravium-analytics-consent,.cookie-banner{background:#F4F1EA!important;color:#1D1D1D!important;border:1px solid var(--brand-line)!important;border-radius:4px!important}
#gravium-analytics-consent p,#gravium-analytics-consent strong,#gravium-analytics-consent a{color:#1D1D1D!important}
#gravium-analytics-consent button{border-radius:4px!important;min-height:44px}
#gravium-analytics-accept{background:#00AFA0!important;color:#1D1D1D!important}
#gravium-analytics-decline{background:#F4F1EA!important;color:#1D1D1D!important;border:1px solid #1D1D1D!important}
@media(max-width:680px){.brand-mark,.brand-mark img,.topbar .brand-mark,.topbar .brand-mark img,img.brand-logo,img.footer-logo,.footer-brand img{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal,.v2-reveal{opacity:1!important;transform:none!important}}

/* Keep the helper usable without ambient glow over a light workspace. */
#gravik-client .gc-aura{display:none!important}
#gravik-client .gc-launcher,#gravik-client .gc-vec{filter:none!important}
@media(max-width:560px){#gravik-client .gc-launcher{width:48px!important;height:48px!important}#gravik-client{right:12px!important;bottom:12px!important}}