/* ==========================================================================
   ARTHA NAKSHATRA — PUBLIC WEBSITE
   Uses the app's own tokens (tokens.css, copied unchanged) and its patterns:
   porcelain pages, one navy plate per view, gold for the single primary
   action, Cormorant for headlines, Manrope for text, Plex Mono for eyebrows.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-md); line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

.eyebrow { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.display { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: 0.005em; }
.lede { color: var(--ink-2); font-size: 1.0625rem; max-width: 60ch; }
.muted { color: var(--ink-3); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }

/* ---------- Buttons (same as the app) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--t-sm); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.btn--sm { height: 36px; padding: 0 14px; font-size: var(--t-xs); }
.btn--gold { background: var(--accent-strong); color: var(--navy-950); }
.btn--gold:hover { background: var(--gold-400); }
.btn--line { border-color: rgba(212, 166, 94, 0.45); color: var(--plate-ink); }
.btn--line:hover { background: rgba(212, 166, 94, 0.12); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink-3); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top__in { display: flex; align-items: center; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand img { width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 1px var(--accent-line); }
.brand span { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.16em; color: var(--accent); white-space: nowrap; }
.nav { display: none; gap: 4px; }
.nav a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: var(--t-sm); padding: 8px 12px; border-radius: var(--r-pill); }
.nav a:hover { background: var(--surface-3); color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; } }
/* Tablets in landscape: the six links stay on one line beside the name and the three buttons. */
.nav a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) { .nav { gap: 0; } .nav a { padding-inline: 8px; } .top__in { gap: 12px; } }
/* Light or dark: the sun shows while dark is on (tap for light), the moon while light is on. */
.themebtn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.themebtn:hover { background: var(--surface-3); color: var(--accent); border-color: var(--accent-line); }
.themebtn .ico { width: 18px; height: 18px; }
.themebtn__sun { display: none; }
:root[data-theme="dark"] .themebtn__sun { display: block; }
:root[data-theme="dark"] .themebtn__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themebtn__sun { display: block; }
  :root:not([data-theme="light"]) .themebtn__moon { display: none; }
}
/* Phones: logo, name, sun/moon and Client login fit on one line without touching. */
@media (max-width: 480px) {
  .top__in { gap: 10px; }
  .brand { gap: 10px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 0.8rem; letter-spacing: 0.08em; }
  .themebtn { width: 36px; height: 36px; }
}
@media (max-width: 379px) { .brand span { display: none; } }

/* ---------- Hero: the navy plate ---------- */
.plate {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 85% 20%, var(--plate-2) 0%, var(--plate) 55%);
  color: var(--plate-ink);
}
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.9; z-index: -1; }
.hero { border-bottom: 1px solid var(--plate-line); }
.hero__in { display: grid; gap: 40px; padding-block: 56px 0; align-items: end; }
.hero__copy { display: grid; gap: 20px; justify-items: start; padding-bottom: 8px; }
.hero__logo { width: 112px; height: 112px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(212,166,94,.25), 0 30px 80px -30px rgba(0,0,0,.8); }
.hero .eyebrow { color: var(--plate-gold); letter-spacing: 0.16em; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
.hero h1 em { font-style: italic; color: var(--gold-300); font-weight: 500; }
.hero p { color: var(--plate-ink-2); font-size: 1.0625rem; max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--t-xs); color: var(--plate-ink-2); }
.hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust .ico { width: 14px; height: 14px; color: var(--plate-gold); }
.hero__art { justify-self: center; width: min(320px, 82vw); margin-bottom: -2px; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); padding-top: 72px; }
  .hero__copy { padding-bottom: 72px; }
  .hero__art { width: 340px; }
}

/* Phone frame: the app screens, unchanged, in a simple device outline */
.phone {
  border-radius: 40px; padding: 10px; background: #050813;
  box-shadow: 0 0 0 1px rgba(212,166,94,.28), var(--shadow-3);
}
.phone img { border-radius: 30px; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; background: var(--bg); }
.hero .phone { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.hero .phone img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; aspect-ratio: 390 / 700; }

/* ---------- Sections ---------- */
.section { padding-block: 72px; }
.section--sunken { background: var(--bg-sunken); border-block: 1px solid var(--line); }
.section__head { display: grid; gap: 10px; margin-bottom: 36px; max-width: 760px; }
.section__head h2 { font-size: clamp(1.9rem, 4.6vw, 2.5rem); }

/* Services: cards carrying the app's content-type marks */
.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 24px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-900); color: var(--gold-400); }
.card__icon .ico { width: 22px; height: 22px; }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); line-height: 1.2; }
.card p { color: var(--ink-2); font-size: var(--t-sm); }
.card ul { display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.card li { display: flex; gap: 8px; }
.card li::before { content: "◆"; color: var(--accent-strong); font-size: 9px; line-height: 2.3; flex: none; }
.typemark {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid currentColor; white-space: nowrap;
}
.typemark--research { color: var(--ct-research); }
.typemark--education { color: var(--ct-education); }
.typemark--advisory { color: var(--ct-advisory); }
.typemark--execution { color: var(--ct-execution); }
.typemark--pms { color: var(--ct-pms); }
.card__note { font-size: var(--t-xs) !important; color: var(--ink-3) !important; border-top: 1px solid var(--line); padding-top: 12px; }

/* Showcase: the desktop app in a browser frame */
.showcase { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .showcase { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.flow { display: grid; gap: 0; counter-reset: flow; }
.flow li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.flow li:last-child { border-bottom: 0; }
.flow li::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); padding-top: 4px; }
.flow b { font-weight: 600; }
.flow span { color: var(--ink-3); font-size: var(--t-sm); }
.browser { border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser__bar span { margin-left: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--surface); padding: 2px 10px; border-radius: var(--r-pill); }
.browser img { width: 100%; height: auto; }
.caption { font-size: var(--t-xs); color: var(--ink-3); margin-top: 12px; }

/* Phone gallery */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 20px; overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x mandatory; }
.gallery figure { margin: 0; scroll-snap-align: start; display: grid; gap: 14px; }
.gallery figcaption { display: grid; gap: 2px; }
.gallery figcaption b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); }
.gallery figcaption span { font-size: var(--t-sm); color: var(--ink-3); }
@media (min-width: 1000px) { .gallery { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }

/* Principles on a quiet gold panel (the Artha View card treatment) */
.principles { display: grid; gap: 16px; }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principle { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 8px; align-content: start; }
.principle .seal { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); color: var(--gold-400); }
.principle .seal svg { width: 14px; height: 14px; fill: currentColor; }
.principle h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); line-height: 1.2; }
.principle p { color: var(--ink-2); font-size: var(--t-sm); }

/* Get started: two paths */
.paths { display: grid; gap: 16px; }
@media (min-width: 800px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.path { border-radius: 18px; padding: 32px; display: grid; gap: 14px; align-content: start; justify-items: start; }
.path h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); line-height: 1.15; }
.path p { font-size: var(--t-md); }
.path.plate { border: 1px solid var(--plate-line); box-shadow: var(--shadow-2); }
.path.plate p { color: var(--plate-ink-2); }
.path.plate .eyebrow { color: var(--plate-gold); }
.path--light { background: var(--surface); border: 1px solid var(--line); }
.path--light p { color: var(--ink-2); }

/* ---------- Footer with disclosures ---------- */
.foot { background: var(--navy-950); color: var(--plate-ink-2); padding-block: 56px 40px; font-size: var(--t-sm); }
.foot a { color: var(--gold-300); }
.foot__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.foot__brand { display: grid; gap: 14px; align-content: start; }
.foot__brand img { width: 72px; height: 72px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(212,166,94,.25); }
.foot__brand p { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--plate-ink-2); }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot__links a { text-decoration: none; color: var(--plate-ink); }
.foot__links a:hover { color: var(--gold-300); }
.foot .eyebrow { color: var(--plate-gold); }
.reg { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; }
.legal { display: grid; gap: 12px; }
.foot__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(212,166,94,.18); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: var(--t-xs); }

/* ---------- Disclosures page ---------- */
.doc { padding-block: 56px 72px; display: grid; gap: 28px; max-width: 820px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.doc h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); margin-bottom: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc p, .doc li { color: var(--ink-2); }
.doc section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.kv { display: grid; gap: 0; }
.kv div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv div:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Markets (TradingView widgets, framed as one calm navy desk) ---------- */
/* The desk and the ticker are navy in both themes, so their own controls (the search box) use the dark
   colour scheme. TradingView's frames must not: a browser paints an opaque box (white) behind a frame from
   another site whenever the frame element's colour scheme differs from the framed page's, and TradingView's
   pages declare none. "normal" on the widget boxes and their frames matches them, so the transparent dark
   widgets show our navy through them in either theme of the site. */
.desk, .tape { color-scheme: dark; }
.tv, .tape__feed, [data-tv], [data-tv] iframe { color-scheme: normal; }
/* Widgets render in frames we can't recolour, so they are slightly desaturated: falls read as a muted rose, not alarm red. */
.desk iframe { filter: saturate(0.6) brightness(1.02); }
/* The moving ticker: the strip grows to whatever height TradingView's tape needs (never clipped), with
   soft fades at both ends so prices glide in and out. Prices stay bright; only the colours are softened. */
.tape { position: relative; display: flex; align-items: stretch; min-height: 46px; background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); border-bottom: 1px solid var(--plate-line); }
.tape__label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--plate-gold); border-right: 1px solid var(--plate-line); }
.tape__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--plate-gold); box-shadow: 0 0 8px var(--plate-gold); animation: tapePulse 2.4s ease-in-out infinite; }
@keyframes tapePulse { 50% { opacity: 0.35; } }
.tape__feed { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.tape__feed > * { width: 100%; }
.tape__feed iframe { display: block; filter: saturate(0.8); }
.tape__feed::before, .tape__feed::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 1; pointer-events: none; }
.tape__feed::before { left: 0; background: linear-gradient(90deg, var(--navy-950), transparent); }
.tape__feed::after { right: 0; background: linear-gradient(270deg, var(--navy-950), transparent); }
@media (max-width: 560px) { .tape__label { padding: 0 10px; font-size: 0; gap: 0; } }
/* Until TradingView's tape arrives (or if it can't), the strip says so instead of sitting empty. */
.tape__feed > .tradingview-widget-container__widget::before { content: "Loading live prices"; display: none; padding: 0 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(179, 185, 207, 0.75); white-space: nowrap; }
.tape__feed[data-state="loading"] > .tradingview-widget-container__widget::before { display: block; animation: tvWait 1.8s ease-in-out infinite; }
.tape__feed[data-state="failed"] > .tradingview-widget-container__widget::before { display: block; content: "Live prices are unavailable right now"; }
.tape__feed[data-state="loading"] > .tradingview-widget-container__widget:has(iframe)::before { display: none; }
@media (prefers-reduced-motion: reduce) { .tape__label::before, .tape__feed > .tradingview-widget-container__widget::before { animation: none !important; } }

.desk { padding-block: 72px 64px; border-block: 1px solid var(--plate-line); }
.desk .eyebrow { color: var(--plate-gold); letter-spacing: 0.16em; }
.desk__head { display: grid; gap: 20px; align-items: end; margin-bottom: 28px; }
@media (min-width: 900px) { .desk__head { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.desk__head h2 { margin-top: 8px; font-size: clamp(1.9rem, 4.4vw, 2.6rem); color: var(--plate-ink); }
.desk__head h2 em { color: var(--gold-300); font-style: italic; font-weight: 500; }

/* The live clock: India time to the second and the NSE session, in a quiet pill under the headline. */
.clock { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 16px; padding: 7px 14px 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--plate-line); background: rgba(7, 11, 26, 0.32);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--plate-ink-2); font-variant-numeric: tabular-nums; }
.clock__dot { width: 7px; height: 7px; border-radius: 50%; background: #8a92ad; flex: none; }
.clock__status { color: var(--plate-ink); }
.clock__sep { color: var(--plate-gold); opacity: 0.7; }
.clock[data-state="open"] .clock__dot { background: #4cc79a; box-shadow: 0 0 0 0 rgba(76, 199, 154, 0.5); animation: clockPulse 2.4s ease-out infinite; }
.clock[data-state="open"] .clock__status { color: #8fdcbc; }
.clock[data-state="pre"] .clock__dot { background: var(--plate-gold); }
.clock[data-state="pre"] .clock__status { color: var(--gold-300); }
@keyframes clockPulse { 70% { box-shadow: 0 0 0 7px rgba(76, 199, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 199, 154, 0); } }
@media (prefers-reduced-motion: reduce) { .clock[data-state="open"] .clock__dot { animation: none; } }

.search { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; background: rgba(7, 11, 26, 0.32); border: 1px solid var(--plate-line); transition: border-color .2s, background .2s; }
.search:focus-within { border-color: var(--plate-gold); background: rgba(7, 11, 26, 0.5); box-shadow: 0 0 0 3px rgba(212, 166, 94, 0.14); }
.search .ico { width: 16px; height: 16px; color: var(--plate-gold); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--plate-ink); font: inherit; font-size: var(--t-sm); outline: none; }
.search input::placeholder { color: var(--plate-ink-2); }
.search input::-webkit-search-cancel-button { display: none; }
.search__menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--navy-900); border: 1px solid var(--plate-line); border-radius: 14px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
.search__menu li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--plate-ink); font-size: var(--t-sm); }
.search__menu li b { font-weight: 500; }
.search__menu li span { color: var(--plate-ink-2); font-family: var(--font-mono); font-size: 11px; }
.search__menu li[aria-selected="true"], .search__menu li:hover { background: rgba(212, 166, 94, 0.10); }

/* Index band: Sensex, GIFT Nifty, Bankex, gold and the rupee in one framed line. */
.band { height: 72px; overflow: hidden; margin-bottom: 20px; border-radius: var(--r-lg); border: 1px solid var(--plate-line); background: rgba(7, 11, 26, 0.28); }

/* Panels: one frame for every widget. A gold hairline, a mono kicker, a Cormorant title, brand tabs. */
.desk__grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "quote" "company" "movers" "cal" "hols" "prices"; }
@media (min-width: 1024px) {
  .desk__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "movers quote" "company company" "cal hols" "cal prices"; }
}
.pane--quote { grid-area: quote; } .pane--company { grid-area: company; } .pane--movers { grid-area: movers; } .pane--cal { grid-area: cal; } .pane--prices { grid-area: prices; } .pane--hols { grid-area: hols; }
.pane { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 60%);
  border: 1px solid var(--plate-line); box-shadow: inset 0 1px 0 rgba(244, 226, 190, 0.05), 0 24px 60px -36px rgba(0, 0, 0, 0.7); }
.pane::before { content: ""; position: absolute; top: -1px; left: 20px; width: 44px; height: 1px; background: linear-gradient(90deg, var(--plate-gold), rgba(212, 166, 94, 0)); }
.pane__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; }
.pane__head > div { min-width: 0; }
.pane__kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plate-gold); }
.pane__head h3 { margin-top: 3px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--plate-ink); overflow-wrap: anywhere; }
.pane__meta { flex: none; padding-bottom: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plate-ink-2); white-space: nowrap; }
@media (max-width: 560px) { .pane__head { flex-wrap: wrap; align-items: baseline; } .pane__head .pane__meta { padding-bottom: 0; white-space: normal; } }
@media (max-width: 420px) { .pane { padding: 18px 14px 16px; } }

/* Tabs: quiet text with a gold underline on the chosen one, like the app's segmented tabs. */
.mtabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--plate-line); }
.mtabs::-webkit-scrollbar { display: none; }
.mtab { position: relative; flex: none; height: 38px; padding: 0 1px; border: 0; background: none; color: var(--plate-ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color var(--dur-2) var(--ease); }
.mtab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--plate-gold); transform: scaleX(0); transition: transform var(--dur-2) var(--ease); }
.mtab:hover { color: var(--plate-ink); }
.mtab[aria-selected="true"] { color: var(--plate-ink); }
.mtab[aria-selected="true"]::after { transform: scaleX(1); }
.mtab:focus-visible { outline: 2px solid var(--plate-gold); outline-offset: -2px; border-radius: 6px; }
@media (max-width: 560px) {
  .mtabs { gap: 18px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .mtab:last-child { margin-right: 28px; }
}

/* Widget frames: fixed heights (nothing jumps as prices arrive). Each says so while TradingView loads. */
.tv { position: relative; }
.tv > .tradingview-widget-container__widget { position: relative; z-index: 1; }
.tv[data-state="loading"]::before, .tv[data-state="failed"]::before { content: "Loading from TradingView"; position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: 0 16px; text-align: center; pointer-events: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(179, 185, 207, 0.75); }
.tv[data-state="loading"]::before { animation: tvWait 1.8s ease-in-out infinite; }
.tv[data-state="failed"]::before { content: "Could not reach TradingView. Refresh the page to try again."; font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--plate-ink-2); }
@keyframes tvWait { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .tv[data-state="loading"]::before { animation: none; } }
.pane__quote { height: 72px; overflow: hidden; }
.pane__mini { flex: 1 1 auto; min-height: 220px; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, rgba(212, 166, 94, 0.04), rgba(212, 166, 94, 0)); }
.pane__mini > .tradingview-widget-container__widget, .pane__cal > .tradingview-widget-container__widget { position: absolute; inset: 0; }
.pane__list { height: 520px; overflow: hidden; }
.pane__cal { flex: 1 1 auto; min-height: 480px; overflow: hidden; }
.pane__prices { height: 440px; overflow: hidden; }
@media (min-width: 1024px) { .pane__cal { min-height: 440px; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--plate-line); background: transparent; color: var(--plate-ink-2); font: inherit; font-size: 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.chip:hover { color: var(--plate-ink); border-color: rgba(212, 166, 94, 0.45); }
.chip[aria-pressed="true"] { border-color: var(--plate-gold); color: var(--gold-300); background: rgba(212, 166, 94, 0.08); }
.chip:focus-visible { outline: 2px solid var(--plate-gold); outline-offset: 2px; }

/* Company profile and financials: a slim bar that opens across the full width. */
.pane--company { padding-block: 0; gap: 0; }
.pane--company summary { display: flex; align-items: center; gap: 12px; min-height: 64px; cursor: pointer; list-style: none; color: var(--plate-ink); border-radius: 12px; }
.pane--company summary::-webkit-details-marker { display: none; }
.pane--company summary > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-right: auto; min-width: 0; }
.pane--company summary b { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.pane--company summary .pane__meta { padding: 0; }
.pane--company summary:focus-visible { outline: 2px solid var(--plate-gold); outline-offset: 2px; }
.more__ico { width: 18px; height: 18px; color: var(--plate-gold); transition: transform var(--dur-2) var(--ease); }
.pane--company[open] .more__ico { transform: rotate(180deg); }
.more__grid { display: grid; gap: 16px; padding: 4px 0 18px; border-top: 1px solid var(--plate-line); padding-top: 16px; }
.more__cell { height: 360px; overflow: hidden; }
@media (min-width: 900px) { .more__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 480px) { .pane--company summary .pane__meta { display: none; } }

/* Upcoming market holidays: the calendar's rows, a date block beside the name, the weekday (and MCX) beneath. */
.hols__next { margin: -4px 0 0; font-size: var(--t-sm); color: var(--gold-300); }
.hols { display: grid; margin: 0; padding: 0; list-style: none; }
.hols li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--plate-line); }
.hols li:first-child { border-top: 0; padding-top: 0; }
.hols__date { flex: none; display: grid; justify-items: center; width: 44px; padding: 5px 0; border-radius: 10px; border: 1px solid var(--plate-line); background: rgba(7, 11, 26, 0.32); line-height: 1.1; }
.hols__date b { font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem; color: var(--plate-ink); }
.hols__date small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plate-gold); }
.hols__what { min-width: 0; font-size: var(--t-sm); color: var(--plate-ink); }
.hols__what small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plate-ink-2); }
.desk__note { margin-top: 28px; font-size: 11.5px; line-height: 1.6; color: var(--plate-ink-2); max-width: 900px; opacity: .85; }

/* Opening (see opening.js) */
.op { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(140% 100% at 50% 110%, #141c46 0%, #070b1a 60%); animation: opOut 450ms 2750ms ease-in forwards; }
.op__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.op__star { fill: #f4efe4; animation: opStar 700ms ease-out both, opTwinkle 2.4s 800ms ease-in-out infinite; }
.op__lines { fill: none; stroke: #d4a65e; stroke-width: .22; stroke-opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 1; animation: opDraw 1100ms 600ms cubic-bezier(.6,0,.2,1) forwards, opLineFade 600ms 1800ms ease-out forwards; }
.op__node { fill: #e0b874; transform-box: fill-box; transform-origin: center; animation: opNode 600ms ease-out both, opSettle 700ms 1650ms cubic-bezier(.6,0,.2,1) forwards; }
.op__light { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224,184,116,.42), rgba(120,104,220,.20) 38%, rgba(7,11,26,0) 70%);
  animation: opRise 1900ms cubic-bezier(.2,.7,.2,1) both, opShimmer 900ms 1500ms ease-in-out 3 alternate; }
.op__beam { position: absolute; left: 50%; bottom: -10%; width: 2px; height: 120%; margin-left: -1px; pointer-events: none;
  background: linear-gradient(to top, rgba(224,184,116,0), rgba(244,226,190,.85) 50%, rgba(224,184,116,0)); box-shadow: 0 0 24px 6px rgba(224,184,116,.35);
  transform-origin: bottom; animation: opBeam 1400ms 350ms cubic-bezier(.3,.6,.2,1) both; }
.op__logo { position: relative; border-radius: 18px; box-shadow: 0 0 0 1px rgba(212,166,94,.3), 0 0 80px 10px rgba(224,184,116,.18); animation: opLogo 900ms 1650ms cubic-bezier(.2,.8,.2,1) both; }
.op__corona { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(244,226,190,.0), rgba(244,226,190,.55), rgba(212,166,94,.1), rgba(150,130,240,.35), rgba(244,226,190,.0), rgba(224,184,116,.5), rgba(244,226,190,.0));
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 76%, transparent 100%); mask: radial-gradient(closest-side, transparent 72%, #000 76%, transparent 100%);
  filter: blur(2px); animation: opCorona 1100ms 1300ms cubic-bezier(.2,.8,.2,1) both, opSpin 9s 1300ms linear infinite; }
.op__rays { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(244,226,190,.10) 0deg 1.2deg, transparent 1.2deg 14deg);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%); mask: radial-gradient(closest-side, #000 10%, transparent 70%);
  animation: opRays 1600ms 1250ms ease-out both; }
@keyframes opCorona { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; } to { opacity: .85; transform: none; } }
@keyframes opSpin { to { rotate: 360deg; } }
@keyframes opRays { from { opacity: 0; transform: translateY(12%) scale(.7) rotate(-8deg); } 50% { opacity: 1; } to { opacity: .55; transform: none; } }
@keyframes opStar { from { opacity: 0; } }
@keyframes opTwinkle { 50% { opacity: .25; } }
@keyframes opDraw { to { stroke-dashoffset: 0; } }
@keyframes opLineFade { to { stroke-opacity: 0; } }
@keyframes opNode { from { opacity: 0; transform: scale(3); } }
@keyframes opSettle { to { opacity: 0; transform: scale(.3); } }
@keyframes opRise { 0% { transform: translateY(55%) scale(.35); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: .9; } }
@keyframes opShimmer { to { transform: scale(1.035); filter: brightness(1.25); } }
@keyframes opBeam { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1) translateY(-30%); opacity: 0; } }
@keyframes opLogo { from { opacity: 0; transform: scale(.86); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes opOut { to { opacity: 0; visibility: hidden; } }
.op--calm .op__light, .op--calm .op__beam, .op--calm .op__rays, .op--calm .op__corona, .op--calm .op__lines, .op--calm .op__node { display: none; }
.op__hint { position: absolute; left: 0; right: 0; bottom: max(40px, env(safe-area-inset-bottom)); text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(224,184,116,.75); animation: opHint 900ms 1100ms ease-out both; pointer-events: none; }
@keyframes opHint { from { opacity: 0; transform: translateY(6px); } }
/* A tap: the whole opening fades out over half a second (opening.js removes it after). */
.op.op--leave { animation: opOut 480ms ease-in forwards; }
.op--calm { animation: opOut 250ms 650ms ease-in forwards; }
.op--calm .op__star { animation: none; }
.op--calm .op__logo { animation: opStar 400ms ease-out both; }
/* Living motion: a soft gold-and-indigo glow drifting slowly behind the navy plates; tapped buttons glow gold. */
.plate { position: relative; overflow: hidden; }
.plate::before { content: ""; position: absolute; inset: -40%; pointer-events: none; z-index: 0;
  background: radial-gradient(35% 45% at 30% 40%, rgba(212,166,94,.14), transparent 70%), radial-gradient(40% 50% at 70% 60%, rgba(110,96,210,.14), transparent 70%);
  animation: opDrift 22s ease-in-out infinite alternate; }
.plate > * { position: relative; z-index: 1; }
/* …except the star chart, which stays behind the content (the rule above had pushed the hero text down). */
.plate > .constellation { position: absolute; z-index: 0; }
@keyframes opDrift { 0% { transform: translate(-6%,-4%) rotate(0); } 50% { transform: translate(5%,3%) rotate(8deg); } 100% { transform: translate(-3%,6%) rotate(-6deg); } }
.btn:active, .chip:active, .mtab:active { box-shadow: 0 0 0 4px rgba(212,166,94,.22), 0 0 18px rgba(212,166,94,.3); }
@media (prefers-reduced-motion: reduce) { .plate::before { animation: none; } .op, .op * { animation-duration: .01ms !important; } }

/* Galaxy section: the free community, on the navy plate. */
.galaxy { padding: 88px 0; }
.galaxy__in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.galaxy .display, .galaxy .lede { color: var(--plate-ink, #f4f1ea); }
.galaxy .display { font-size: clamp(34px, 4.6vw, 52px); margin: 8px 0 14px; }
.galaxy .display em { color: #d4a65e; }
.galaxy .lede { opacity: .85; font-size: 18px; }
.galaxy__points { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 14px; }
.galaxy__points li { position: relative; padding-left: 26px; display: flex; flex-direction: column; color: #b3b9cf; }
.galaxy__points li::before { content: "\2726"; position: absolute; left: 0; top: 1px; color: #d4a65e; }
.galaxy__points b { color: #f4f1ea; font-weight: 600; }
.galaxy__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.galaxy__cta .caption, .galaxy__fine { color: #8a92ad; }
.galaxy__fine { margin-top: 18px; max-width: 60ch; }
.galaxy__phone { margin: 0; justify-self: center; max-width: 300px; }
@media (max-width: 860px) { .galaxy__in { grid-template-columns: 1fr; } .galaxy__phone { max-width: 240px; } }

/* Desk links and sections appear only while that desk is switched on (assets/desks.js). */
[data-desk-switch][hidden] { display: none !important; }
/* Header menu: the name never shrinks or hides behind the menu; the menu tightens instead. */
@media (min-width: 900px) { .brand { flex: none; } .nav { flex: none; } }
@media (min-width: 900px) and (max-width: 1279px) { .nav { gap: 0; } .nav a { padding-inline: 8px; } .top__in { gap: 12px; } }
@media (min-width: 900px) and (max-width: 1099px) {
  .nav a { font-size: 13px; padding-inline: 6px; }
  .brand span { font-size: 0.85rem; letter-spacing: 0.1em; }
  .nav a[href$="#approach"] { display: none; }
}
@media (min-width: 900px) and (max-width: 979px) { .nav a[href$="#start"] { display: none; } }
/* With several desks switched on, the menu can be wider than the header. assets/desks.js then adds .fit1, .fit2 …
   to the header, one at a time, only until everything fits on one line: first the menu tightens, then the
   home-page section links that are also in the page and the footer step back (Approach, Get started, Galaxy,
   The app). The name, the desks, Research desk and the buttons always stay. */
@media (min-width: 900px) {
  .top.fit1 .nav { gap: 0; }
  .top.fit1 .nav a { padding-inline: 8px; }
  .top.fit1 .top__in { gap: 12px; }
  .top.fit2 .nav a { font-size: 13px; padding-inline: 6px; }
  .top.fit3 .nav a[href$="#approach"] { display: none; }
  .top.fit4 .nav a[href$="#start"] { display: none; }
  .top.fit5 .nav a[href$="#galaxy"] { display: none; }
  .top.fit6 .nav a[href$="#app"] { display: none; }
}