/* Landing page for cryptointel.pro. Loads after core.css. */

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 800;
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav.stuck {
  background: rgba(5,16,18,.78);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.3);
}
.nav .shell { display: flex; align-items: center; gap: 26px; }

/* The header's one conversion action never shrinks.
   `.btn-primary` clips (it must, to contain the shine sweep) and `.btn` sets
   `white-space: nowrap`, so a squeezed button does not ellipsize — it cuts the
   label mid-word from both sides. Measured on the live site at 1000px signed
   in: the box was flex-shrunk to 41px around a label needing 102, and
   "Рабочее место" rendered as "бочее мес". The no-shrink rule existed only
   inside the 430px media query, so every laptop-width window between roughly
   950 and 1150px cut it — the widths a half-screen browser actually sits at.
   The nav links beside it are what may give way instead; they wrap and they
   are not the thing a visitor came to press. */
.nav .btn-primary { flex: 0 0 auto; }
.nav .nav-links { min-width: 0; }

.logo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
.logo-mark { width: 30px; height: 30px; flex: 0 0 auto; }
.logo-mark .ring { transform-origin: 50% 50%; animation: logo-spin 14s linear infinite; }
@keyframes logo-spin { to { transform: rotate(360deg); } }
.logo b { font-size: 17px; }
.logo span { color: var(--mint); }
/* Two forms of one wordmark: the full one everywhere there is room,
   and the initials on a phone. Only ever one of them is displayed. */
.logo-short { display: none; }

.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a {
  padding: 9px 14px; border-radius: var(--r-sm); font-size: 14px; color: var(--muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); }

/* `.lang` itself now lives in core.css — both the site and the workspace need
   it, and only one of them loaded this file. */

.nav-burger { display: none; }

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  /* Keyboard shortcut is meaningless without a keyboard, and the row has to
     fit the primary CTA plus the menu button before anything else. */
  #paletteBtn { display: none; }
  .nav .shell { gap: 12px; }
  .nav-mobile {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 790;
    background: rgba(5,16,18,.98); border-bottom: 1px solid var(--line);
    padding: 14px 20px 22px; display: grid; gap: 4px;
    animation: modal-in .24s var(--ease) both;
  }
  .nav-mobile a { padding: 13px 12px; border-radius: var(--r-sm); font-size: 15.5px; }
  .nav-mobile a:hover { background: rgba(255,255,255,.05); }
  .nav-mobile .lang { display: inline-flex; margin-top: 8px; align-self: flex-start; }
}

@media (max-width: 620px) {
  /* The language switch moves into the burger menu so the CTA keeps its size. */
  .nav > .shell > .lang { display: none; }
  #navSignIn { display: none; }
  #navApp { padding: 9px 14px; font-size: 13.5px; }
  .logo b { font-size: 15px; }
}

/* ----------------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(52px, 8vw, 104px) 0 clamp(40px, 6vw, 76px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.hero-copy { display: grid; gap: 22px; align-content: start; }
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-stats div span { display: block; font-family: var(--font-display); font-size: clamp(21px, 2.5vw, 29px); letter-spacing: -.04em; }
.hero-stats div small { color: var(--muted); font-size: 12.5px; }

/* Canvas constellation: an address graph that keeps drawing itself. Sits in a
   card so it reads as "the product", not as decoration. */
.hero-visual { position: relative; }
.hero-canvas-wrap {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line-strong);
  background: radial-gradient(120% 100% at 50% 0%, rgba(104,214,189,.10), transparent 60%), rgba(4,15,17,.7);
  box-shadow: var(--sh-2);
  aspect-ratio: 1 / .92;
}
#heroGraph { width: 100%; height: 100%; display: block; }
.hero-canvas-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 62%, rgba(4,15,17,.85));
}

/* Floating verdict card over the canvas — a real AML result shape. */
.hero-verdict {
  position: absolute; left: -18px; bottom: 26px; z-index: 3;
  width: min(268px, 78%); padding: 15px 16px; border-radius: var(--r-lg);
  background: rgba(8,24,27,.94); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2); backdrop-filter: blur(10px);
  animation: float-y 6s var(--ease) infinite alternate;
}
@keyframes float-y { to { transform: translateY(-10px); } }
.hero-verdict .vh { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.hero-verdict .vh b { font-size: 13px; }
.hero-verdict .bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin: 7px 0 3px; }
.hero-verdict .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #37c17d, #e0982f 62%, #f0666b); width: 0; transition: width 1.4s var(--ease); }
.hero-verdict .vrow { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.hero-verdict .vdrivers { margin-top: 11px; display: grid; gap: 6px; font-size: 12px; }
.hero-verdict .vdrivers div { display: flex; justify-content: space-between; gap: 10px; }
.hero-verdict .vdrivers b { color: var(--text); font-weight: 600; }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* The visual used to be pulled above the copy, so the first screenful of the
     phone layout was a decorative graph and an "example" card, and the
     headline — the whole pitch — started roughly a full scroll down. Copy
     first; the graph is illustration and reads fine underneath it. */
  .hero-visual { order: 0; }
  .hero-verdict { left: 8px; bottom: 12px; }
}

/* Marquee of supported networks — cheap credibility, zero maintenance. */
.chain-strip { padding: 18px 0 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.chain-track { display: flex; gap: 42px; width: max-content; animation: marquee 34s linear infinite; }
.chain-track span { display: inline-flex; align-items: center; gap: 9px; color: var(--faint); font-size: 14px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.chain-strip:hover .chain-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- section */
.section { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.section-head { max-width: 62ch; margin-bottom: clamp(26px, 3.4vw, 46px); display: grid; gap: 13px; }

/* -------------------------------------------------------------- try-it */
.tryit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-xl); border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, rgba(104,214,189,.09), rgba(8,24,27,.72) 46%, rgba(155,140,247,.08));
}
.tryit-form { display: flex; gap: 10px; flex-wrap: wrap; }
.tryit-form .input { flex: 1 1 260px; font-family: var(--font-mono); font-size: 13.5px; }
.tryit-samples { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.sample {
  padding: 5px 11px; border-radius: var(--r-pill); font-size: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer;
}
.sample:hover { border-color: rgba(104,214,189,.45); color: var(--text); }

.tryit-out {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(4,15,17,.62); padding: 18px; min-height: 172px;
  display: grid; gap: 10px; align-content: center;
}
.tryit-out .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tryit-out .v { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.tryit-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed rgba(154,180,173,.14); }
.tryit-line:last-child { border-bottom: 0; }
.tryit-line span { color: var(--muted); }
@media (max-width: 860px) { .tryit { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- modules */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.module { display: grid; gap: 12px; align-content: start; padding: 24px; }
.module-icon {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--mint-dim); border: 1px solid rgba(104,214,189,.26); color: var(--mint-hi);
}
.module h3 { font-size: 19px; }
.module p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.module ul { margin: 2px 0 0; padding-left: 17px; color: var(--faint); font-size: 13px; display: grid; gap: 5px; }
.module .price { margin-top: auto; padding-top: 12px; font-size: 12.5px; color: var(--mint); font-weight: 600; }
.module.soon { opacity: .72; border-style: dashed; }
.module.soon .module-icon { background: rgba(155,140,247,.12); border-color: rgba(155,140,247,.3); color: #cfc6ff; }

/* ------------------------------------------------------------------ how */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 26px 24px 24px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 40px; letter-spacing: -.05em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 10px; opacity: .9;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14px; }

/* -------------------------------------------------------------- pricing */
.pricing { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: start; }
.calc { padding: 26px; }
.calc-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.calc-row:last-of-type { border-bottom: 0; }
.calc-row .grow strong { display: block; font-size: 14.5px; font-weight: 600; }
.calc-row .grow small { color: var(--faint); font-size: 12.5px; }
.stepper { display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; }
.stepper button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.stepper button:hover { background: var(--mint-dim); color: var(--mint-hi); }
.stepper output { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.calc-total {
  margin-top: 18px; padding: 18px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(104,214,189,.12), rgba(155,140,247,.08));
  border: 1px solid rgba(104,214,189,.28);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.calc-total b { font-family: var(--font-display); font-size: 32px; letter-spacing: -.04em; }

.packs { display: grid; gap: 12px; }
.pack { padding: 20px; display: grid; gap: 8px; position: relative; }
.pack.best { border-color: rgba(104,214,189,.42); box-shadow: var(--sh-glow); }
/* Sits inside the card, not straddling its border. As an absolutely positioned
   ribbon it hung over the rounded corner and read as a layout bug rather than
   as a deliberate flourish — and it clipped differently at each breakpoint. */
.pack .tag { justify-self: end; margin-bottom: 2px; }
.pack .amount { font-family: var(--font-display); font-size: 27px; letter-spacing: -.04em; }
.pack .price-usd { color: var(--mint); font-weight: 700; }
.pack small { color: var(--faint); font-size: 12.5px; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- trust */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.trust .card { display: grid; gap: 9px; padding: 20px; }
.trust h4 { font-family: var(--font-display); font-size: 15.5px; margin: 0; }
.trust p { color: var(--muted); font-size: 13.5px; }

/* ----------------------------------------------------------------- faq */
.faq { display: grid; gap: 10px; max-width: 860px; }
.qa { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); overflow: hidden; transition: border-color .25s var(--ease); }
.qa:hover { border-color: var(--line-strong); }
.qa summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 14px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; margin-left: auto; color: var(--mint); font-size: 21px; line-height: 1;
  transition: transform .28s var(--ease-back);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa .qa-body { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; line-height: 1.68; }
.qa[open] .qa-body { animation: qa-in .3s var(--ease) both; }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------- final */
.final {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 72px); border-radius: var(--r-xl);
  border: 1px solid rgba(104,214,189,.28);
  background: radial-gradient(90% 130% at 12% 0%, rgba(104,214,189,.16), transparent 58%),
              radial-gradient(80% 120% at 92% 100%, rgba(155,140,247,.14), transparent 60%),
              rgba(6,20,23,.82);
  text-align: center; display: grid; gap: 20px; justify-items: center;
}
.final h2 { max-width: 18ch; }
.final .lead { max-width: 56ch; }

/* -------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding: 44px 0 34px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 26px; }
.footer h5 { font-family: var(--font-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.footer a { display: block; padding: 5px 0; color: var(--muted); font-size: 14px; }
.footer a:hover { color: var(--mint); }
/* The legal line used to sit hard against the right edge, where the floating
   AI-guide pill covers it — a disclaimer half-hidden is a disclaimer nobody
   read. Reserving the pill's width keeps the text clear of it in every
   language, and the wrap keeps it readable when the two halves stop fitting. */
.footer-note { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; display: flex; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding-right: 170px; }
@media (max-width: 780px) { .footer-note { padding-right: 0; padding-bottom: 62px; } }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ API page */
/* Public API page. Reuses the site's cards and buttons: an integration page
   that looks like a different product reads as a bolted-on afterthought. */
.hero-api { padding: 96px 0 34px; display: grid; gap: 14px; max-width: 780px; }
.hero-api .lede { font-size: 17px; color: var(--muted); line-height: 1.6; }

.code-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(6,20,22,.7); overflow: hidden; margin-top: 14px;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.code-card pre { margin: 0; padding: 16px; overflow-x: auto; }
.code-card code {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: #cfeee3;
  white-space: pre;
}

.scroll-x { overflow-x: auto; }
.api-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.api-table th {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap;
}
.api-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.api-table td.nowrap { white-space: nowrap; }
.api-table code { font-family: var(--font-mono); font-size: 12px; color: #a9dccd; }
.method {
  display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.method.m-get { background: rgba(104,214,189,.16); color: #8fe6c8; }
.method.m-post { background: rgba(143,184,240,.16); color: #a8c6f2; }

.plan-grid {
  display: grid; gap: 16px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
/* Flex, not grid: the cards hold a different number of facts, and only in a
   flex column does `margin-top:auto` push every CTA down to a shared baseline.
   In a grid it aligns to its own row and the buttons step up and down. */
.plan-card { display: flex; flex-direction: column; gap: 12px; }
.plan-card.plan-best { border-color: rgba(104,214,189,.42); }
.plan-price { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.plan-price span { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.plan-facts { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.plan-note { font-size: 12.5px; line-height: 1.5; margin: 0; }
.plan-card .btn { margin-top: auto; }

.cta-band { text-align: center; display: grid; gap: 12px; justify-items: center; padding-bottom: 40px; }


/* --- Narrow phones: the header used to shred itself ------------------------
   At 375px the logo wordmark wrapped to two lines and the CTA was squeezed to
   95px while its label needed 138px. .btn-primary clips (it must, to contain
   the shine sweep), so the label was cut mid-word with no ellipsis. Shrink the
   wordmark to its initials and the CTA gets its full width back — it is the
   header's one conversion action, so it is the last thing to shrink. The
   first cut of this dropped the wordmark altogether, which bought the same
   width and left the emblem to introduce the site by itself. */
@media (max-width: 430px) {
  .nav .shell { gap: 10px; padding-inline: 14px; }
  /* Swapped, not hidden. Dropping the wordmark entirely left the
     emblem standing alone and the site unnamed on the surface most
     visitors arrive on; the initials cost the CTA nothing and keep
     the two tones the full mark has. */
  .nav .logo-full { display: none; }
  .nav .logo-short { display: inline; font-size: 17px; letter-spacing: -.01em; }
  .nav .logo { flex: 0 0 auto; }
  .nav .btn-primary { flex: 0 0 auto; white-space: nowrap; }
}