/* MANGOS ($FRUT) — флэт как долька-манго логотип: тёплая бумага, плоские
   заливки брендовых цветов, никакого стекла/градиентов. Одна светлая тема. */

:root {
  --paper: #FFF7EC;
  --paper2: #FFFFFF;
  --tint-mango: #FFEBCC;
  --tint-leaf: #E9F4DC;
  --ink: #241E15;
  --ink2: #4B4234;
  --dim: #7A6E5B;
  --line: #EBDCC3;

  --m: #0866FF;  /* Meta */
  --a: #CC785C;  /* Anthropic */
  --n: #76B900;  /* Nvidia */
  --g: #EA4335;  /* Google (красная долька; буква G синяя #4285F4) */
  --o: #1E1B16;  /* OpenAI */
  --s: #005288;  /* SpaceX */

  --mango: #FF9F1C;
  --mango-deep: #F28C00;
  --leaf: #34A853;
  --up: #1F9D55;
  --down: #E5484D;

  --display: "Fredoka", "Avenir Next Rounded", sans-serif;
  --sans: "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(255, 159, 28, 0.35); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
:is(a, button):focus-visible { outline: 3px solid var(--mango); outline-offset: 3px; border-radius: 8px; }

/* буквы MANGOS в цветах компаний */
.c-m { color: var(--m); } .c-a { color: var(--a); } .c-n { color: var(--n); }
.c-g { color: #4285F4; } .c-o { color: var(--o); } .c-s { color: var(--s); }

/* ---------- nav ---------- */

.top { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 2px solid var(--line); }
.bar { display: flex; align-items: center; gap: 20px; height: 62px; max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; }
.wordmark b { font-weight: 700; }
.nav-links { display: flex; gap: 22px; margin-inline: auto; }
.nav-links a { font-weight: 500; font-size: 0.9375rem; color: var(--ink2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.engine { display: inline-flex; padding: 0 2px; }
.engine i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.engine.on i { background: var(--up); animation: breathe 2.4s ease-in-out infinite; }
.engine.pre i { background: var(--mango); animation: breathe 2.4s ease-in-out infinite; }
.engine.off i { background: var(--down); }
@keyframes breathe { 50% { opacity: 0.35; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 14px; border: 2px solid var(--ink);
  font: 600 0.9375rem var(--sans); text-decoration: none; cursor: pointer; color: var(--ink);
  background: var(--paper2);
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 130ms var(--ease-out), box-shadow 130ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }
.btn.primary { background: var(--mango); }
.btn.primary:hover { background: var(--mango-deep); }
.btn.primary[aria-disabled="true"] { background: #E8D9BE; color: var(--dim); pointer-events: none; box-shadow: 0 3px 0 var(--line); border-color: var(--line); }
.btn.sm { padding: 8px 16px; font-size: 0.8438rem; border-width: 2px; }

/* ---------- hero ---------- */

.hero { padding-top: 64px; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }

.tiles { display: flex; gap: 10px; flex-wrap: nowrap; margin-bottom: 22px; }
.tile {
  display: grid; justify-items: center; gap: 4px;
  flex: 1 1 0; min-width: 0; max-width: 96px; padding: 12px 0 8px;
  border: 2.5px solid var(--tc); border-radius: 18px;
  background: color-mix(in srgb, var(--tc) 9%, var(--paper2));
  opacity: 0; transform: translateY(18px) rotate(-3deg);
  animation: tile-in 560ms var(--ease-out) calc(var(--i) * 110ms + 150ms) forwards;
}
.tile img { width: clamp(26px, 3.2vw, 40px); height: clamp(26px, 3.2vw, 40px); object-fit: contain; }
.tile b { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1; color: var(--tc); }
.t-m { --tc: var(--m); } .t-a { --tc: var(--a); } .t-n { --tc: var(--n); }
.t-g { --tc: #4285F4; } .t-o { --tc: var(--o); } .t-s { --tc: var(--s); }
@keyframes tile-in { to { opacity: 1; transform: none; } }

.hero .lede { max-width: 58ch; color: var(--ink2); font-size: 1.0625rem; margin-bottom: 24px; }
.hero .lede b { color: var(--ink); }
.cta { display: flex; gap: 14px; flex-wrap: wrap; }

.ca {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--paper2); cursor: pointer; max-width: 100%;
  font: 500 0.8438rem var(--sans); color: var(--ink);
}
.ca:hover { border-color: var(--mango); }
.ca .ca-lab { font: 600 0.6875rem var(--mono); letter-spacing: 0.1em; color: var(--mango-deep); }
.ca .mono { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca .ca-ic { font: 600 0.6875rem var(--mono); color: var(--dim); white-space: nowrap; }
.ca.copied .ca-ic { color: var(--up); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.chip { display: grid; gap: 2px; padding: 10px 18px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper2); }
.chip .lab { font: 600 0.625rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.chip .val { font: 700 0.9688rem var(--sans); }
.chip .val.count { font-family: var(--mono); color: var(--mango-deep); }
.chip .val.on { color: var(--up); }
.chip .val.pre { color: var(--mango-deep); }
.chip .val.off { color: var(--down); }

.hero-mango { display: grid; justify-items: center; gap: 18px; }
.hero-mango img:first-child { width: min(100%, 320px); height: auto; filter: drop-shadow(0 12px 0 rgba(36, 30, 21, 0.08)); }
.hero-mango figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 0.8438rem; color: var(--ink2); }
.hero-mango .sl { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-mango .sl img { width: 15px; height: 15px; flex: none; object-fit: contain; }
.hero-mango .sl em { font-style: normal; font-family: var(--mono); font-size: 0.6875rem; color: var(--dim); }

/* ---------- лента цен ---------- */

.tape-wrap { border-block: 2px solid var(--line); margin-top: 56px; background: var(--paper2); }
.tape { overflow: hidden; white-space: nowrap; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tape__inner { display: inline-block; padding: 12px 0; animation: tape-slide 36s linear infinite; }
@keyframes tape-slide { to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: center; gap: 9px; margin-right: 36px; font: 600 0.8438rem var(--mono); color: var(--ink2); }
.tk img { width: 18px; height: 18px; object-fit: contain; }
.tk .px { color: var(--up); }
.tk .px.na { color: var(--dim); }

/* ---------- секции ---------- */

.sec { padding-block: 88px; }
.sec-mango { background: var(--tint-mango); }
.sec-leaf { background: var(--tint-leaf); }
.sec-ink { background: var(--ink); color: var(--paper); }
.sec-head { max-width: 68ch; margin-bottom: 40px; }
.sec-head.tight { margin-bottom: 16px; }
.sec-head .kick { display: inline-block; font: 600 0.6875rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.sec-ink .sec-head .kick { color: #B7AC97; }
.sec-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 12px; }
.sec-head p { color: var(--ink2); font-size: 1.0313rem; max-width: 62ch; }
.sec-ink .sec-head p { color: #D8CFBE; }

/* ---------- FRUT vs FRUT ---------- */

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs-col { border: 2.5px solid var(--ink); border-radius: 22px; padding: 26px 28px; background: var(--paper2); }
.vs-col.us { background: var(--ink); color: var(--paper); box-shadow: 0 6px 0 rgba(36, 30, 21, 0.25); }
.vs-col h3 { font-size: 1.375rem; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.vs-col h3 span { font: 600 0.6875rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.vs-col.us h3 span { color: var(--mango); }
.vs-col ul { list-style: none; display: grid; gap: 10px; }
.vs-col li { padding-left: 22px; position: relative; font-size: 0.9688rem; color: var(--ink2); }
.vs-col.us li { color: #E9E1D2; }
.vs-col.them li::before { content: "✕"; position: absolute; left: 0; color: var(--down); font-weight: 700; }
.vs-col.us li::before { content: "✓"; position: absolute; left: 0; color: var(--up); font-weight: 700; }
.vs-col li b { color: inherit; }
.punch { margin-top: 26px; font-family: var(--display); font-weight: 600; font-size: 1.125rem; }

/* ---------- корзина ---------- */

.stocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stock {
  position: relative; border: 2.5px solid var(--c); border-radius: 22px; padding: 22px;
  display: grid; gap: 8px; justify-items: start;
  background: color-mix(in srgb, var(--c) 6%, var(--paper2));
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.stock:hover { transform: translateY(-4px); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 45%, transparent); }
.stock img { width: 42px; height: 42px; object-fit: contain; }
.stock b { font-family: var(--display); font-weight: 600; font-size: 1.1875rem; }
.stock .tick { font: 600 0.6875rem var(--mono); letter-spacing: 0.06em; color: var(--c); }
.stock .px { font: 600 0.875rem var(--mono); color: var(--ink2); }
.stock .got { font-size: 0.8125rem; color: var(--dim); }
.stock .got b { font-family: var(--mono); font-size: 0.8125rem; color: var(--up); font-weight: 600; }
.note { margin-top: 26px; color: var(--ink2); font-size: 0.9375rem; max-width: 64ch; }

/* ---------- how ---------- */

.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 46px; }
.step { border: 2.5px solid var(--ink); border-radius: 22px; padding: 22px 24px; background: var(--paper2); }
.step .n {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  font: 700 1.125rem var(--display); color: #fff; margin-bottom: 12px;
}
.step .n1 { background: var(--mango-deep); }
.step .n2 { background: var(--leaf); }
.step .n3 { background: var(--m); }
.step h3 { font-size: 1.125rem; margin-bottom: 6px; }
.step p { font-size: 0.9375rem; color: var(--ink2); }

/* прогресс-бары (флэт, как всё здесь); .meter — НЕ .bar, .bar занят навбаром */
.meter { height: 16px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0%; background: var(--mango); border-radius: 999px; transition: width 700ms var(--ease-out); }
.meter.slim { height: 10px; width: min(360px, 100%); border-width: 2px; }
.meter.slim i { background: var(--leaf); transition: width 950ms linear; }

.pot-panel { border: 2.5px solid var(--ink); border-radius: 22px; padding: 22px 26px; background: var(--paper2); display: grid; gap: 12px; margin-bottom: 20px; box-shadow: 0 6px 0 rgba(36, 30, 21, 0.18); }
.pot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pot-head .lab { font: 600 0.6875rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pot-head .mono { font-size: 0.875rem; font-weight: 600; color: var(--mango-deep); }
.pot-sub { font-size: 0.8438rem; color: var(--dim); max-width: 72ch; }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.st { display: grid; gap: 3px; align-content: start; }
.st .lab { font: 600 0.625rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.st b { font-size: 1.25rem; font-weight: 600; }
.st small { font-size: 0.75rem; color: var(--dim); }
.st small a { color: var(--mango-deep); font-family: var(--mono); text-decoration: none; }
.st small a:hover { text-decoration: underline; }
@media (max-width: 920px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.pot-sub a { color: var(--mango-deep); font-family: var(--mono); text-decoration: none; }
.pot-sub a:hover { text-decoration: underline; }

.count-panel {
  border: 2.5px solid var(--ink); border-radius: 22px; padding: 32px; text-align: center;
  display: grid; gap: 6px; justify-items: center; background: var(--paper2);
  box-shadow: 0 6px 0 rgba(36, 30, 21, 0.18);
}
.count-panel .lab { font: 600 0.6875rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.count-big { font: 600 clamp(3rem, 8vw, 5rem) var(--mono); font-variant-numeric: tabular-nums; line-height: 1; color: var(--mango-deep); }
.count-big.soon { color: var(--up); animation: breathe 1s ease-in-out infinite; }
.count-panel .sub { font-size: 0.9063rem; color: var(--dim); }

/* ---------- лента дропов ---------- */

.sec-ink .feed-panel { border: 2px solid #4B4234; border-radius: 20px; overflow: hidden; background: #2C2519; }
.feed-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 2px solid #4B4234; }
.feed-head .t { font: 600 0.9375rem var(--sans); }
.feed-head .mono { font-size: 0.75rem; color: #B7AC97; }
.feed-list { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.fx { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: baseline; padding: 12px 20px; border-bottom: 1px solid #3B3325; font-size: 0.875rem; }
.fx:last-child { border-bottom: 0; }
.fx .when { font-family: var(--mono); font-size: 0.75rem; color: #93887A; white-space: nowrap; }
.fx .kind { font: 600 0.6875rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 9px; border-radius: 7px; }
.fx .kind.drop { color: #7BE3A6; background: rgba(31, 157, 85, 0.2); }
.fx .kind.buy { color: var(--mango); background: rgba(255, 159, 28, 0.16); }
.fx .kind.claim { color: #9DB8FF; background: rgba(8, 102, 255, 0.2); }
.fx .kind.other { color: #B7AC97; background: rgba(255, 255, 255, 0.07); }
.fx .what { color: #D8CFBE; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx .tx { font-family: var(--mono); font-size: 0.75rem; color: var(--mango); text-decoration: none; }
.fx .tx:hover { text-decoration: underline; }
.feed-empty { padding: 28px 20px; color: #93887A; font-size: 0.9063rem; }
.drops-note { margin-top: 20px; font-size: 0.9063rem; color: #B7AC97; max-width: 72ch; }
.drops-note b { color: var(--paper); }

/* ---------- прозрачность ---------- */

.trans { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.trans > div:first-child p { color: var(--ink2); font-size: 0.9688rem; }
.trans .panel { border: 2.5px solid var(--ink); border-radius: 22px; padding: 24px 26px; display: grid; gap: 12px; background: var(--paper2); box-shadow: 0 6px 0 rgba(36, 30, 21, 0.18); }
.trans .rr { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-size: 0.875rem; }
.trans .rk { color: var(--dim); }
.trans .rv { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.trans .rv a { color: var(--ink); text-decoration: none; }
.trans .rv a:hover { color: var(--mango-deep); }
.trans .rv.up { color: var(--up); }
.trans .rv.down { color: var(--down); }

/* ---------- footer ---------- */

footer { border-top: 2px solid var(--line); background: var(--paper2); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 26px; font-size: 0.8125rem; color: var(--dim); }
.foot a { color: var(--ink2); text-decoration: none; font-weight: 500; }
.foot a:hover { color: var(--ink); }
.foot .links { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }

/* ---------- reveals ---------- */

.rev { opacity: 0; transform: translateY(18px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); transition-delay: calc(var(--ri, 0) * 80ms); }
.rev.in { opacity: 1; transform: none; }
.tiles.rev { transform: none; } /* тайлы анимируются сами по буквам */

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-mango { justify-items: start; }
  .hero-mango img { width: 220px; }
  .hero-mango figcaption { grid-template-columns: 1fr 1fr 1fr; }
  .vs { grid-template-columns: 1fr; }
  .stocks { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
  .trans { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 680px) {
  .bar { height: 56px; gap: 12px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.8125rem; }
  .bar .btn { display: none; }
  .hero { padding-top: 40px; }
  .sec { padding-block: 64px; }
  .stocks { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stock { padding: 16px; }
  .hero-mango { justify-items: center; }
  .hero-mango figcaption { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .hero-mango .sl { white-space: normal; font-size: 0.8125rem; }
  .ca .mono { font-size: 0.6875rem; }
  .fx { grid-template-columns: auto 1fr auto; }
  .fx .kind { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  .tile { opacity: 1; transform: none; animation: none; }
  .tape__inner { animation-play-state: paused; }
  .engine i, .count-big.soon { animation: none; }
}