:root{
  --bg:#0b0e12;
  --bg-elev:#0f1319;
  --text:#e7ecf3;
  --muted:#9aa6b2;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.12);
  --brand-a:#83F7AD; --brand-b:#38E1FF; --brand-c:#8A63F7;
  --green:#66f2b6; --cyan:#57d8ff; --violet:#a184ff; --blue:#7fb4ff; --amber:#ffd37a; --pink:#ff9bd6;
  --radius-xl:18px; --radius-lg:14px; --radius-md:12px; --radius-sm:10px;
  --focus:0 0 0 3px rgba(56,225,255,0.35);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  --ta1:rgba(131,247,173,0.06);
  --tb1:rgba(56,225,255,0.06);
  --tc1:rgba(138,99,247,0.06);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55; }
a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:var(--focus); border-radius:8px; }
img,svg{ display:block; max-width:100%; }
.container{ width:min(1100px,92vw); margin-inline:auto; }
.muted{ color:var(--muted); }
.small{ font-size:.92rem; }
code{ font-family:var(--mono); }

.site-header{ position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.1) blur(10px); background:linear-gradient(180deg, rgba(11,14,18,0.9), rgba(11,14,18,0.6) 60%, rgba(11,14,18,0)); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.logo{ width:26px; height:26px; }
.logo path{ fill:url(#solanaGrad); }
.brand-text{ font-size:1.06rem; font-weight:800; }
.tag{ margin-left:6px; padding:2px 8px; font-size:.75rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,0.04); }
.nav{ display:flex; gap:16px; }
.nav a{ font-weight:600; opacity:.9; padding:8px 10px; border-radius:8px; }
.nav a:hover{ background:rgba(255,255,255,0.05); opacity:1; }

:root{ --header-h: 64px; }

.hero{ position: relative; min-height: calc(100svh - var(--header-h)); padding: 0; overflow: clip; display: grid; place-items: center; }
.hero-inner{ position: relative; z-index: 1; width: min(1100px, 92vw); min-height: inherit; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; padding-block: clamp(24px, 6vh, 64px); }
.hero::before{ content: ""; position: absolute; top: 50%; left: 50%; width: 120vmax; height: 24vmax; transform: translate(-50%, -50%) rotate(-8deg); background: linear-gradient(90deg, rgba(131, 247, 173, 0.10), rgba(56, 225, 255, 0.10), rgba(138, 99, 247, 0.10)); filter: blur(30px); z-index: 0; }
.hero::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 50vmax; height: 50vmax; transform: translate(-50%, -50%); background: radial-gradient(40% 40% at 50% 50%, rgba(255, 255, 255, 0.06), transparent 60%); z-index: 0; }
.hero-micro{ position: absolute; inset: -10% -10%; z-index: 0; pointer-events: none; background:
radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,0.06), transparent 55%),
radial-gradient(1.6px 1.6px at 38% 68%, rgba(255,255,255,0.05), transparent 52%),
radial-gradient(1.8px 1.8px at 72% 28%, rgba(255,255,255,0.05), transparent 52%),
radial-gradient(1.4px 1.4px at 84% 76%, rgba(255,255,255,0.05), transparent 50%),
radial-gradient(1.6px 1.6px at 26% 82%, rgba(255,255,255,0.05), transparent 50%),
linear-gradient(105deg, rgba(255,255,255,0.05) 0 18%, transparent 18% 100%) 8% 34% / 80px 1px no-repeat,
linear-gradient(75deg, rgba(255,255,255,0.04) 0 16%, transparent 16% 100%) 64% 18% / 64px 1px no-repeat,
linear-gradient(60deg, rgba(255,255,255,0.04) 0 14%, transparent 14% 100%) 82% 64% / 72px 1px no-repeat,
linear-gradient(120deg, rgba(255,255,255,0.04) 0 18%, transparent 18% 100%) 28% 72% / 88px 1px no-repeat,
radial-gradient(2px 2px at 58% 44%, rgba(255,255,255,0.05), transparent 60%),
radial-gradient(2px 2px at 46% 86%, rgba(255,255,255,0.05), transparent 60%); mask-image: radial-gradient(80% 80% at 50% 50%, black 40%, transparent 100%); }
.hero-logo{ width: min(200px, 24vw); height: auto; margin: 0 auto 10px; }
.hero-logo svg{ width: 100%; height: auto; }
.hero-logo path{ fill: url(#solanaGrad); filter: drop-shadow(0 8px 28px rgba(138, 99, 247, 0.18)); }
.hero-title{ margin: 0 0 6px; font-weight: 900; letter-spacing: -0.02em; font-size: clamp(2.2rem, 3.2vw + 1rem, 3.4rem); }
.hero-card{ max-width: min(940px, 92vw); padding: 18px 22px; border-radius: 16px; background: rgba(14, 18, 24, 0.55); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-card p{ margin: 0; }
.hero-card p + p{ margin-top: 10px; }
.hero-subtitle{ font-size: clamp(1.02rem, 0.45vw + 1rem, 1.2rem); line-height: 1.65; letter-spacing: 0.005em; text-wrap: balance; color: var(--muted); }
.hero-subtitle strong{ font-weight: 800; color: #eaf4ff; }
.hero-subtitle em{ font-style: normal; color: #dce6ff; opacity: 0.95; }
.hero-subtitle a{ text-decoration: underline; text-underline-offset: 2px; }
.hero-subtitle.smallprint{ display: block; font-size: 0.95em; opacity: 0.95; }
.hero-actions{ margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-btn{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-weight: 800; border: none; background: linear-gradient(90deg, var(--brand-a), var(--brand-b), var(--brand-c)); color: #0b0e12; box-shadow: 0 10px 30px rgba(138, 99, 247, 0.12); transition: transform 0.08s ease, box-shadow 0.2s ease; }
.hero-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 40px rgba(138, 99, 247, 0.18); }
.hero-btn i{ font-size: 1.05em; }
.hero-btn--ghost{ background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.hero-btn--ghost:hover{ transform: translateY(-1px); border-color: rgba(138, 99, 247, 0.35); box-shadow: 0 10px 28px rgba(138, 99, 247, 0.12) inset; }

.section{ position:relative; overflow:hidden; padding:64px 0; border-top:1px solid var(--line); }
.section:first-of-type{ border-top:none; }
.section-head{ text-align:center; margin-bottom:22px; }
.section-head h2{ font-size:clamp(1.4rem,2.1vw + .6rem,2rem); margin:0 0 6px; font-weight:900; letter-spacing:-.01em; }
.section-head h2::after{ content:""; display:block; height:2px; width:84px; margin:10px auto 0; background:linear-gradient(90deg,var(--brand-a),var(--brand-b),var(--brand-c)); opacity:.75; border-radius:2px; }
/* Features — сделать фон менее заметным */
.section--features::before{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:clamp(200px,26vw,420px);
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(56,225,255,0.08), transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(138,99,247,0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 22px);
  mask-image: linear-gradient(to left, black 65%, transparent 100%);
  pointer-events:none;
}

/* если у тебя добавлен ::after — тоже приглушим; можно удалить, если не нужен */
.section--features::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:clamp(200px,26vw,420px);
  background:
    repeating-linear-gradient(45deg, rgba(131,247,173,0.04) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(56,225,255,0.035) 0 1px, transparent 1px 26px);
  mask-image: linear-gradient(to left, black 55%, transparent 100%);
  pointer-events:none;
}

@media (max-width: 900px){
  .section--features::after{ display:none; }
}



.section--verify::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(40% 40% at 15% 20%, var(--ta1), transparent 60%),
    radial-gradient(40% 40% at 85% 80%, var(--tb1), transparent 60%),
    linear-gradient(180deg, rgba(11,14,18,0), rgba(11,14,18,0.34)),
    radial-gradient(circle, rgba(200,230,255,0.10) 1px, transparent 1px) 0 0/26px 26px,
    radial-gradient(circle, rgba(200,230,255,0.08) 1px, transparent 1px) 13px 13px/26px 26px,
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 26px);
  mask-image: radial-gradient(120% 120% at 50% 50%, black 60%, transparent);
}

.section--resources::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:4px;
  background:linear-gradient(180deg, var(--brand-a), var(--brand-c));
  opacity:.6;
  border-radius:0 8px 8px 0;
  pointer-events:none;
}
.section--resources::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(40% 40% at 100% 0%, rgba(138,99,247,0.08), transparent 60%),
    radial-gradient(40% 40% at 0% 100%, rgba(56,225,255,0.06), transparent 60%);
  mask-image: radial-gradient(120% 120% at 50% 50%, black 50%, transparent 100%);
  pointer-events:none;
}

.btn{ display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px; font-weight:800; border:1px solid var(--line); cursor:pointer; transition:transform .06s ease, background-color .2s ease, border-color .2s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:var(--focus); }
.btn-primary{ color:#0b0e12; border:none; background:linear-gradient(90deg,var(--brand-a),var(--brand-b),var(--brand-c)); }
.btn-soft{ background:rgba(255,255,255,0.04); border:1px solid var(--line); }
.linklike{ background:none; border:none; color:#cfe6ff; text-decoration:underline; cursor:pointer; padding:0 2px; }

.tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.tab{ background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer; }
.tab.active{ color:#0b0e12; border-color:transparent; background:linear-gradient(90deg,var(--brand-a),var(--brand-b),var(--brand-c)); }
.tabpanel{ display:none; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-xl); padding:16px; }
.tabpanel.active{ display:block; }

.dl-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.dl-columns{ display:grid; grid-template-columns:repeat(2, minmax(280px, 1fr)); gap:12px; }
.dl-col{ display:grid; gap:12px; align-content:start; }
.dl-card{ border:1px solid var(--line); border-radius:12px; padding:12px; background:#0c1218; }
.hash-inline, .dl-card code{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; line-break:anywhere; }
.code-mini{ margin-top:8px; background:#0a1016; color:#cfe3ff; border:1px solid var(--line); border-radius:10px; padding:8px; font-family:var(--mono); font-size:.9rem; }
.steps li{ margin:4px 0; }

.sticky{ margin-top:14px; border:1px solid rgba(255,215,128,0.35); background:linear-gradient(180deg, #2b260f, #231f0d); color:#f6e6b3; border-radius:14px; padding:14px; position:relative; }
.sticky::after{ content:""; position:absolute; top:10px; right:10px; width:12px; height:12px; border-radius:50%; background:#d4b34a; box-shadow:0 0 0 3px rgba(212,179,74,0.2); }
.sticky-title{ font-weight:900; margin-bottom:6px; color:#ffe39c; }

.features-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fcard{ border:1px solid var(--line); border-radius:12px; background:var(--bg-elev); overflow:hidden; }
.ficonbar{ height:80px; display:grid; place-items:center; border-bottom:1px solid var(--line); }
.ficonbar i{ font-size:28px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.fcard--green .ficonbar{ background:linear-gradient(90deg, rgba(102,242,182,.28), rgba(102,242,182,.12)); }
.fcard--cyan  .ficonbar{ background:linear-gradient(90deg, rgba(87,216,255,.28), rgba(87,216,255,.12)); }
.fcard--violet .ficonbar{ background:linear-gradient(90deg, rgba(161,132,255,.28), rgba(161,132,255,.12)); }
.fcard--blue  .ficonbar{ background:linear-gradient(90deg, rgba(127,180,255,.28), rgba(127,180,255,.12)); }
.fcard--amber .ficonbar{ background:linear-gradient(90deg, rgba(255,211,122,.28), rgba(255,211,122,.12)); }
.fcard--pink  .ficonbar{ background:linear-gradient(90deg, rgba(255,155,214,.28), rgba(255,155,214,.12)); }
.fbody{ padding:14px; }
.fbody .lede{ color:#d8e8ff; margin:.25rem 0 .5rem; }

.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.step{ display:flex; gap:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-elev); padding:12px; }
.num{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(90deg,var(--brand-a),var(--brand-b),var(--brand-c)); color:#0b0e12; font-weight:900; }
.code-inline{ background:#0a1016; color:#cfe3ff; border:1px solid var(--line); border-radius:10px; padding:10px; font-family:var(--mono); overflow:auto; font-size:.92rem; }

.hash-widget{ display:grid; gap:8px; justify-items:center; margin:6px 0 16px; }
.hash-widget input{ width:min(680px,100%); padding:12px; border-radius:10px; border:1px solid var(--line-strong); background:#0a1016; color:#cfe3ff; font-family:var(--mono); }
.indicator{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); width:max-content; }
.indicator .dot{ width:10px; height:10px; border-radius:50%; background:#515a67; }
.indicator[data-state="match"]{ border-color:rgba(131,247,173,0.4); }
.indicator[data-state="match"] .dot{ background:#83F7AD; }
.indicator[data-state="mismatch"]{ border-color:rgba(255,99,99,0.4); }
.indicator[data-state="mismatch"] .dot{ background:#ff6363; }
.indicator[data-state="idle"] .text{ color:var(--muted); }

.verify-panels{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.panel{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; }
.code-block{ font-family:var(--mono); background:#0a1016; color:#cfe3ff; border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; overflow:auto; line-height:1.5; font-size:.95rem; }

.prereq{ border:1px solid var(--line); border-radius:14px; background:var(--bg-elev); padding:12px; margin-bottom:12px; }
.terminal{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0b1118; }
.t-head{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(56,225,255,0.08), rgba(138,99,247,0.08)); }
.tl{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.tl.red{ background:#ff5f56; } .tl.yellow{ background:#ffbd2e; } .tl.green{ background:#27c93f; }
.tt{ margin-left:auto; color:#cfe6ff; font-size:.9rem; }
.copy-all{ margin-left:8px; border:1px solid var(--line); background:rgba(255,255,255,0.04); color:#fff; padding:6px 10px; border-radius:8px; font-weight:700; cursor:pointer; }
.t-body{ margin:0; padding:14px; color:#cfe3ff; font-family:var(--mono); line-height:1.55; font-size:.95rem; }

.rgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rcard{ position:relative; display:grid; gap:8px; border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--bg-elev); transition:transform .08s ease, border-color .2s ease; }
.rcard:hover{ transform:translateY(-2px); border-color:rgba(138,99,247,0.35); }
.rcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:12px 0 0 12px; background:linear-gradient(180deg,var(--brand-a),var(--brand-c)); opacity:.5; }
.rcard-head{ display:flex; align-items:center; gap:10px; font-weight:900; }
.pill{ display:inline-block; font-weight:900; font-size:.72rem; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid var(--line); }
.pill-warn{ background:rgba(255,211,122,.18); border-color:rgba(255,211,122,.45); }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; padding:2px 8px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,0.04); }
.badge-warn{ background:rgba(255,184,77,0.1); border-color:rgba(255,184,77,0.5); color:#ffd8a0; }
.rcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:#cfe6ff; }
.domain{ font-family:var(--mono); font-size:.9rem; opacity:.9; }

.faq-list{ display:grid; gap:10px; }
.faq{ border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--bg-elev); }
.faq summary{ cursor:pointer; font-weight:900; list-style:none; }

.site-footer{ border-top:1px solid var(--line); padding:28px 0 44px; background:rgba(255,255,255,0.02); }
.footer-grid{ display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr; }
.footer-brand .brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.logo.small{ width:22px; height:22px; }
.footer-links ul{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:8px; }
.footer-links a:hover{ text-decoration:underline; }
.company-info{ margin-top:8px; font-style:normal; line-height:1.6; }

@media (max-width: 1100px){
  .features-grid{ grid-template-columns:1fr; }
  .verify-panels{ grid-template-columns:1fr; }
  .rgrid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .dl-columns{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .ring-a,.ring-b,.ring-c,.orbit-a,.orbit-b,.orbit-c{ animation:none !important; }
}

/* Verify — код переносится, без горизонтального скролла и без распирания */
.section--verify .steps-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.section--verify .step{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg-elev);
  min-width:0;
}

.section--verify .num{
  flex:0 0 auto;
  width:36px;
  min-width:36px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b),var(--brand-c));
  color:#0b0e12;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}

.section--verify .sbody{
  flex:1 1 auto;
  min-width:0;
}

/* главный фикс: переносы внутри pre/code и запрет переполнения */
.section--verify .code-inline{
  width:100%;
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  overflow:visible;
}

.section--verify .code-inline code{
  display:block;
  white-space:inherit;
  overflow-wrap:inherit;
  word-break:inherit;
  max-width:100%;
}

@media (max-width:720px){
  .section--verify .steps-grid{ grid-template-columns:1fr; }
}