/* ══════════════════════════════════════════════════════════════════════════
   KAIROS — the site's look.

   Black, with a dotted field. The difference from the other site is not the
   ground, it is the STRUCTURE and the colour: a bento grid where that one has
   a single hero panel, a bordered table of platform marks where that one has
   a loose strip, violet and amber where that one is pink and light blue, and
   generous rounded panels where that one is flat cards and pills.

   Rules kept because they are good practice, not house style: no gradients
   anywhere, depth from solid fills and hairline borders, and every size in
   clamp() so one set of rules holds from a phone to a wide desktop.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --void:      #07070a;   /* the page */
  --panel:     #0e0e14;   /* a card on it */
  --panel-2:   #14141c;   /* something raised on the card */
  --line:      #1e1e28;
  --line-hi:   #2b2b38;

  --text:      #f4f4f7;
  --text-2:    #a2a2b4;
  --text-3:    #6b6b80;

  --violet:    #7c5cff;
  --violet-hi: #9b83ff;
  --amber:     #ffb020;
  --mint:      #34d399;

  --gutter: clamp(18px, 4.5vw, 64px);
  --r:      16px;
  --r-sm:   12px;

  /* The dotted field. Bigger and fainter than a texture wants to be, so it
     reads as depth behind the panels rather than as pattern on them. */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E");

  /* Tints, as tokens rather than rgba() sprinkled through the file: on a light
     ground the same translucency over white is nearly invisible, so each one
     needs its own value per theme. */
  --violet-tint: rgba(124, 92, 255, 0.13);
  --violet-edge: rgba(124, 92, 255, 0.4);
  --amber-tint:  rgba(255, 176, 32, 0.13);
  --amber-edge:  rgba(255, 176, 32, 0.42);
  --mint-tint:   rgba(52, 211, 153, 0.12);
  --mint-edge:   rgba(52, 211, 153, 0.3);
  --danger:      #ff6a6a;
  --danger-tint: rgba(255, 106, 106, 0.1);
}

/* ── Light ────────────────────────────────────────────────────────────────
   Light is what a first-time visitor gets on every page behind the front
   door; the pages stamp data-theme="light" before they paint unless dark was
   chosen. The landing page is the exception and stays black on purpose, so
   the bare :root above is still the dark set and only what changes is
   written here.

   The accents darken: violet and mint that read well on black are washed out
   on white, and a figure nobody can read is worse than one that is not
   coloured at all. */
:root[data-theme="light"] {
  --void:      #f7f7fb;
  --panel:     #ffffff;
  --panel-2:   #f2f2f7;
  --line:      #e6e6ef;
  --line-hi:   #d5d5e2;

  --text:      #14141c;
  --text-2:    #55556a;
  --text-3:    #83839a;

  --violet:    #6d4bf0;
  --violet-hi: #5836d6;
  --amber:     #b06a00;
  --mint:      #0f9d63;

  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23000000' fill-opacity='0.07'/%3E%3C/svg%3E");

  --violet-tint: rgba(109, 75, 240, 0.1);
  --violet-edge: rgba(109, 75, 240, 0.3);
  --amber-tint:  rgba(176, 106, 0, 0.1);
  --amber-edge:  rgba(176, 106, 0, 0.28);
  --mint-tint:   rgba(15, 157, 99, 0.1);
  --mint-edge:   rgba(15, 157, 99, 0.28);
  --danger:      #d92d20;
  --danger-tint: rgba(217, 45, 32, 0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--void);
  background-image: var(--dots);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Full bleed. A centred column leaves a band of empty page down each side on
   a wide screen; this uses the screen it is given and keeps only a gutter. */
.wrap { width: 100%; padding-inline: var(--gutter); }

/* ── Header ───────────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 60;
  /* The page's own ground at four fifths, so the bar belongs to whichever
     theme is on rather than being a black strip on a white page. */
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .top { background: var(--void); }
}
.top-in { display: flex; align-items: center; gap: 14px; height: 66px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand svg { display: block; }
.top-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.08s ease;
}
.btn:hover { background: var(--panel-2); border-color: #3a3a4a; }
.btn:active { transform: translateY(1px); }
.btn[hidden] { display: none; }

.btn--violet { background: var(--violet); border-color: var(--violet); color: #fff; }
:root[data-theme="light"] .btn--violet:hover { background: var(--violet-hi); border-color: var(--violet-hi); }
.btn--violet:hover { background: var(--violet-hi); border-color: var(--violet-hi); }
.btn--lg { padding: 14px 24px; font-size: 15px; border-radius: 12px; }

/* ── Switch ───────────────────────────────────────────────────────────────
   The martingale on the analysis page, the take profit and the stop loss on
   the bot, "first trade loses" on both simulation cards. It lives here rather
   than in any one page's stylesheet because the pages that use it do not all
   load the same ones — and a switch that is not styled is a setting nobody
   can see they have. */

.tog {
  position: relative;
  flex: none;
  width: 34px;
  height: 18px;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.tog-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--text-3);
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s ease;
}
/* On moves the knob as well as changing the colour, so it does not rest on
   hue alone. */
.tog[aria-checked="true"] { background: var(--mint-tint); border-color: var(--mint-edge); }
.tog[aria-checked="true"] .tog-dot { transform: translateX(16px); background: var(--mint); }

@media (max-width: 700px) { .btn--install span { display: none; } }

/* ── Flash ────────────────────────────────────────────────────────────────
   Two of them: the dashboard's "connected" line, which sits in the flow and
   fades itself out, and the landing page's failure, which floats over the
   page because there is no column there to sit in.

   Both fade rather than appear: a banner that pops in is read as an error by
   somebody who was not looking at that part of the screen. */

.flash {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mint);
  background: var(--mint-tint);
  border: 1px solid var(--mint-edge);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.flash.is-in { opacity: 1; transform: none; }
.flash[hidden] { display: none; }

.flash--error {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  margin: 0;
  max-width: calc(100vw - 40px);
  color: var(--danger);
  background: var(--panel);
  border-color: var(--danger);
  transform: translate(-50%, 8px);
  text-align: center;
}
.flash--error.is-in { transform: translate(-50%, 0); }

/* ── The connect gate ─────────────────────────────────────────────────────
   Asked once, on the first press of Get started. Its own classes rather than
   the dashboard's .sheet, which lives in app.css — a file the landing page
   does not load. Tokens throughout, so it holds up in either theme. */

.gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}
.gate[hidden] { display: none; }

.gate-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gate.is-in .gate-back { opacity: 1; }

.gate-card {
  position: relative;
  width: min(100%, 460px);
  max-height: min(86vh, 640px);
  overflow-y: auto;
  padding: clamp(22px, 3vw, 28px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gate.is-in .gate-card { opacity: 1; transform: none; }

.gate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gate-k {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gate-t {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gate-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.gate-x:hover { color: var(--text); border-color: var(--line-hi); }

.gate-p { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.gate-p strong { color: var(--text); font-weight: 650; }

/* The two answers, each the full width of the card: this is a choice between
   them, not a main action with an afterthought beside it. */
.gate-actions { display: grid; gap: 10px; margin-top: 22px; }
.gate-actions .btn { width: 100%; }

/* ── Hero ─────────────────────────────────────────────────────────────────
   Centred, because the bento grid under it is the width of the page and a
   left-aligned headline would leave it hanging off one edge. */

.hero { padding: clamp(46px, 8vw, 92px) 0 clamp(26px, 4vw, 40px); text-align: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pill b { color: var(--text); font-weight: 650; }
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat { 50% { opacity: 0.35; } }

.h1 {
  margin: clamp(20px, 3vw, 30px) auto 0;
  max-width: 20ch;
  font-size: clamp(2.3rem, 6.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.h1 em { font-style: normal; color: var(--violet-hi); }

.sub {
  margin: clamp(16px, 2.2vw, 22px) auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  color: var(--text-2);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(24px, 3.2vw, 34px); }

/* ── Bento ────────────────────────────────────────────────────────────────
   Four panels on a six-column grid: a wide one that shows the bot's states,
   and three that each answer one question. This is the shape of the page. */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 16px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.tile {
  padding: clamp(20px, 2.2vw, 26px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.tile--wide { grid-column: span 6; }
.tile--half { grid-column: span 3; }

.tile-k {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tile-t { margin: 0 0 6px; font-size: 1.06rem; font-weight: 650; letter-spacing: -0.02em; }
.tile-p { margin: 0; font-size: 0.92rem; color: var(--text-2); }

.tile-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-bottom: 14px;
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  background: var(--panel-2);
}
.i-violet { color: var(--violet-hi); }
.i-amber { color: var(--amber); }
.i-mint { color: var(--mint); }

@media (max-width: 860px) {
  .tile--half { grid-column: span 6; }
}

/* ── The states strip ─────────────────────────────────────────────────────
   What the bot is doing, as the three states it moves between. No prices and
   no figures: a number on a landing page about trading is a number somebody
   had to make up. */

.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
  margin-top: clamp(16px, 2vw, 22px);
}
.state {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  color: var(--text-2);
}
.state b { color: var(--text); font-weight: 600; }
.state-led {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-hi);
}

/* Each state lights in turn, so the strip reads as a cycle rather than three
   labels. Nine seconds: long enough to notice, slow enough to ignore. */
.state:nth-child(1) .state-led { animation: lamp 9s linear infinite; }
.state:nth-child(2) .state-led { animation: lamp 9s linear infinite 3s; }
.state:nth-child(3) .state-led { animation: lamp 9s linear infinite 6s; }

@keyframes lamp {
  0%, 33.4% { background: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.2); }
  33.5%, 100% { background: var(--line-hi); box-shadow: none; }
}

@media (max-width: 700px) { .flow { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .state-led, .pill-dot { animation: none; }
}

/* ── Platforms ────────────────────────────────────────────────────────────
   The line on the left, the marks floating on the right. Each one drifts on
   its own timing, so the cluster breathes rather than pulsing in unison —
   twelve things moving together reads as a glitch, twelve things moving
   independently reads as alive. */

.plat { padding-bottom: clamp(44px, 6vw, 84px); }
.plat-in {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.plat-k {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.plat-t { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.plat-p { margin: 12px 0 0; max-width: 44ch; color: var(--text-2); font-size: 0.96rem; }

.cloud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
}
.chip {
  display: grid;
  place-items: center;
  min-height: 74px;
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  animation: float 7s ease-in-out infinite;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.chip:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.chip img { height: 22px; width: auto; max-width: 104px; object-fit: contain; opacity: 0.78; }
.chip:hover img { opacity: 1; }

/* Twelve chips, each offset so no two rise together. */
.chip:nth-child(6n+1) { animation-delay: 0s; }
.chip:nth-child(6n+2) { animation-delay: -1.1s; }
.chip:nth-child(6n+3) { animation-delay: -2.3s; }
.chip:nth-child(6n+4) { animation-delay: -3.4s; }
.chip:nth-child(6n+5) { animation-delay: -4.6s; }
.chip:nth-child(6n)   { animation-delay: -5.7s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 1000px) {
  .plat-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cloud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .chip { animation: none; }
}

/* ── Closing ──────────────────────────────────────────────────────────── */

.end { padding-bottom: clamp(48px, 7vw, 88px); }
.end-in {
  padding: clamp(28px, 4vw, 52px);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: calc(var(--r) + 4px);
}
.end-t { margin: 0 auto; max-width: 20ch; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; }
.end-p { margin: 14px auto 0; max-width: 52ch; color: var(--text-2); font-size: 1rem; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding: clamp(28px, 4vw, 44px) 0 clamp(32px, 4vw, 46px); }
.foot-in { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.02em; }
.foot-note { max-width: 58ch; margin: 0; font-size: 0.86rem; color: var(--text-2); }
.foot-legal { margin: clamp(20px, 3vw, 28px) 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.78rem; line-height: 1.7; color: var(--text-3); }

/* ── The install prompt, for install.js ───────────────────────────────── */

.how {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(3, 3, 6, 0.66);
}
.how-card {
  width: 100%; max-width: 380px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
}
.how-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.how-head h3 { margin: 0; font-size: 1.02rem; letter-spacing: -0.02em; }
.how-x {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px;
  background: none; color: var(--text-2);
  border: 1px solid var(--line-hi); border-radius: 9px; cursor: pointer;
}
.how-card > p { margin: 10px 0 14px; font-size: 0.9rem; color: var(--text-2); }
.how-steps { margin: 0 0 18px; padding-left: 20px; font-size: 0.92rem; color: var(--text-2); }
.how-steps li { margin-bottom: 8px; }
.how-steps b { color: var(--text); }
.how-ok { width: 100%; }

/* ══ Names the tool pages already use ══════════════════════════════════════
   analysis.css was written against the other site's token names. Rather than
   rewrite seven hundred lines of layout that works, the names are pointed at
   this site's palette here — one place to look, and the layout file stays a
   layout file.

   The market colours are this site's own: violet leads, amber answers it, and
   the rise/fall pair is the mint and red already used for a profit and a loss
   so a green number means the same thing on every page. */
:root {
  --surface:    var(--panel);
  --surface-2:  var(--panel-2);
  --raise:      var(--panel-2);
  --base:       var(--void);
  --bg:         var(--void);
  --ink:        var(--text);
  --ink-soft:   var(--text-2);
  --ink-muted:  var(--text-2);
  --ink-faint:  var(--text-3);
  --on-accent:  #ffffff;
  --ring:       rgba(255, 255, 255, 0.5);
  --radius:     var(--r);
  --radius-sm:  var(--r-sm);
  --alt-tint:   rgba(255, 255, 255, 0.04);
  --pink:       var(--danger);
  --blue:       var(--violet);
  --blue-hi:    var(--violet-hi);
  --ok:         var(--mint);

  --up:     var(--mint);
  --down:   var(--danger);
  --even:   #38bdf8;
  /* The Real group in the portfolio — the money that is actually money. */
  --real:      #38bdf8;
  --real-tint: rgba(56, 189, 248, 0.14);
  --odd:    #f472b6;
  --over:   var(--amber);
  --under:  #2dd4bf;
  --match:  var(--violet-hi);
  --differ: #94a3b8;
  --cur:    var(--violet-hi);
}

:root[data-theme="light"] {
  --on-accent: #ffffff;
  --ring:      rgba(0, 0, 0, 0.45);

  --even:   #0284c7;
  --real:      #0284c7;
  --real-tint: rgba(2, 132, 199, 0.10);
  --odd:    #db2777;
  --under:  #0d9488;
  --differ: #64748b;
  --alt-tint: rgba(0, 0, 0, 0.035);
}