/* Hood Estate — residential art direction */
:root {
  --ink: #14221d;
  --muted: #6c746f;
  --line: rgba(20, 34, 29, .16);
  --line-strong: rgba(20, 34, 29, .28);
  --paper: #f2eee5;
  --white: #fffdf8;
  --blue: #14221d;
  --blue-dark: #0b1511;
  --blue-soft: #e7e2d7;
  --lime: #d9bb84;
  --coral: #a85f4d;
  --green: #2f725b;
  --red: #a34f48;
  --shadow: 0 30px 80px rgba(10, 22, 17, .16);
  --radius: 3px;
  --pad: clamp(22px, 4.8vw, 78px);
}

html { background: var(--ink); }
body { background: var(--paper); color: var(--ink); }
body::before { display: none; }
.noise { opacity: .022; mix-blend-mode: soft-light; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 84px;
  color: var(--ink);
  background: rgba(242, 238, 229, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(1.1);
  transition: color .4s, background .4s, border-color .4s;
}
body[data-route="home"] .topbar {
  color: white;
  background: linear-gradient(to bottom, rgba(8, 15, 12, .7), rgba(8, 15, 12, 0));
  border-bottom-color: rgba(255, 255, 255, .18);
  backdrop-filter: none;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  background: transparent;
}
.brand-mark svg { width: 24px; height: 24px; fill: currentColor; }
.wordmark { font-size: 13px; letter-spacing: .18em; font-weight: 600; }
.desktop-nav a { color: currentColor; font-size: 12px; font-weight: 500; letter-spacing: .03em; opacity: .72; }
.desktop-nav a:hover, .desktop-nav a.active { color: currentColor; opacity: 1; }
.desktop-nav a::after { height: 1px; bottom: -10px; background: currentColor; }
.icon-button { color: inherit; background: rgba(255,255,255,.08); border-color: currentColor; border-radius: 999px; opacity: .9; }
.keycap { color: inherit; background: transparent; }
.wallet-button {
  height: 45px;
  color: var(--ink);
  background: var(--white);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
body:not([data-route="home"]) .wallet-button { color: var(--white); background: var(--ink); }
.wallet-button:hover { color: var(--ink); background: var(--lime); box-shadow: none; transform: translateY(-1px); }
.wallet-dot { background: var(--green); }
.mobile-menu-button { color: inherit; border-color: currentColor; border-radius: 50%; }
.mobile-menu-button span { background: currentColor; }

.route { padding-top: 84px; }
.route[data-route="home"] { padding-top: 0; }

/* Cinematic first screen */
.hood-hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: 150px;
  padding-bottom: clamp(64px, 8vh, 98px);
  color: white;
  background: #0d1713;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
  animation: estateHero 18s ease-in-out infinite alternate;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 13, 10, .9) 0%, rgba(5, 13, 10, .48) 43%, rgba(5, 13, 10, .12) 70%),
    linear-gradient(0deg, rgba(5, 13, 10, .72), transparent 48%),
    linear-gradient(180deg, rgba(5, 13, 10, .38), transparent 32%);
}
@keyframes estateHero { to { transform: scale(1.1) translate3d(-1.3%, -.8%, 0); } }
.hood-hero::before {
  content: '';
  position: absolute;
  inset: 84px var(--pad) auto;
  height: 1px;
  background: rgba(255,255,255,.25);
  z-index: 3;
}
.hero-copy { position: relative; z-index: 3; width: min(790px, 58vw); }
.hero-copy .eyebrow { color: rgba(255,255,255,.76); letter-spacing: .17em; }
.hero h1 {
  max-width: 850px;
  margin: 30px 0 30px;
  color: white;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(76px, 8.7vw, 148px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero h1 em {
  color: white;
  font-style: italic;
  text-decoration: none;
}
.hero-lede { max-width: 560px; color: rgba(255,255,255,.78); font-size: clamp(16px,1.25vw,19px); line-height: 1.65; }
.hero-actions { margin-top: 34px; }
.hood-hero .button { border-radius: 999px; min-height: 54px; padding-inline: 25px; }
.hood-hero .button.primary { color: var(--ink); background: var(--white); border-color: var(--white); }
.hood-hero .button.primary:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.hood-hero .button.ghost { color: white; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.hood-hero .button.ghost:hover { color: var(--ink); background: white; }
.trust-row { margin-top: 48px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); gap: 0; }
.trust-row span { padding-right: 22px; margin-right: 22px; border-right: 1px solid rgba(255,255,255,.26); }
.trust-row span:last-child { border: 0; }
.trust-row i { color: var(--lime); }

.hero-visual { position: absolute; z-index: 4; right: var(--pad); bottom: clamp(64px, 8vh, 98px); width: min(400px, 31vw); }
.market-terminal {
  min-height: 0;
  padding: 23px;
  color: white;
  background: rgba(12, 24, 19, .68);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 2px;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  backdrop-filter: blur(24px) saturate(1.1);
}
.market-terminal::before { background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 48%); }
.terminal-topline { color: rgba(255,255,255,.55); }
.terminal-quote { margin-top: 24px; align-items: center; }
.terminal-quote span { color: var(--lime); }
.terminal-quote h2 { font-size: clamp(36px, 3.2vw, 54px); margin-top: 4px; }
.terminal-price strong { font-size: 20px; }
.terminal-chart-wrap { height: 118px; margin: 20px -23px 0; }
.chart-grid { background-size: 52px 40px; opacity: .45; }
#hero-market-chart .hero-line { stroke: var(--lime); stroke-width: 2; filter: none; }
.chart-cursor { height: 74%; top: 10%; }
.chart-cursor::before, .chart-cursor span { background: var(--lime); }
.terminal-ranges { padding-bottom: 12px; margin-top: 3px; }
.terminal-ranges button { color: rgba(255,255,255,.54); }
.terminal-ranges button.active { color: var(--ink); background: var(--lime); }
.terminal-watchlist { grid-template-columns: repeat(4,1fr); gap: 4px; padding: 12px 0; }
.hero-symbol { padding: 9px 7px; border-radius: 1px; background: rgba(255,255,255,.06); }
.hero-symbol b { font-size: 10px; }
.hero-symbol i { color: #8fd0b5; }
.hero-symbol.active { color: var(--ink); background: var(--white); }
.hero-symbol.active span, .hero-symbol.active i { color: var(--green); }
.terminal-trade { height: 46px; color: var(--ink); background: var(--lime); border-radius: 999px; }
.terminal-glow { display: none; }
.hero-caption { position: absolute; z-index: 3; right: var(--pad); top: 122px; display: grid; gap: 5px; text-align: right; font: 500 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.hero-caption span { color: rgba(255,255,255,.55); }
.hero-caption b { font-weight: 500; }
.hero-scroll { position: absolute; z-index: 3; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.72); font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; transform: translateX(-50%); }
.hero-scroll i { font-size: 16px; font-style: normal; animation: scrollNudge 1.8s ease-in-out infinite; }
@keyframes scrollNudge { 50% { transform: translateY(5px); } }

.ticker-wrap { color: var(--ink); background: #ded7ca; border: 0; }
.ticker-item { min-width: 275px; padding-block: 15px; border-color: rgba(20,34,29,.15); }
.ticker-item small { color: var(--muted); }
.ticker-item b { color: var(--ink); font-weight: 500; }

/* Editorial property collection */
.market-preview { background: var(--paper); }
.section-head { margin-bottom: 55px; align-items: end; }
.section-head h2, .faq-intro h2 { color: var(--ink); font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(60px, 7vw, 112px); font-weight: 400; line-height: .84; letter-spacing: -.04em; }
.text-link { color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 999px; padding: 14px 20px; }
.text-link:hover { color: white; background: var(--ink); }
.featured-grid { grid-template-columns: 1.18fr 1fr 1fr; gap: 12px; align-items: start; }
.featured-card.property-card,
.featured-card.property-card:first-child {
  min-height: 0;
  grid-row: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.featured-card.property-card:nth-child(2) { margin-top: 90px; }
.featured-card.property-card:nth-child(3) { margin-top: 25px; }
.featured-card.property-card::before { display: none; }
.featured-card.property-card:hover { transform: none; box-shadow: none; }
.property-image { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #cfc8bb; }
.featured-card:first-child .property-image { aspect-ratio: 4/5.2; }
.property-image::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.2); pointer-events: none; }
.property-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s; }
.property-card:hover .property-image img { transform: scale(1.045); filter: saturate(1.08); }
.property-number, .property-action { position: absolute; z-index: 2; top: 16px; color: white; font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.property-number { left: 17px; }
.property-action { right: 17px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(14,28,22,.18); backdrop-filter: blur(12px); }
.property-card-body { position: relative; min-height: 260px; padding: 20px 0 0; border-top: 1px solid var(--line-strong); }
.property-card .card-top { position: absolute; top: 18px; right: 0; gap: 10px; }
.market-code { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; }
.property-card .market-city { margin: 32px 0 6px; padding-right: 96px; font: 400 clamp(31px, 2.9vw, 48px)/.96 'Instrument Serif', Georgia, serif; letter-spacing: -.03em; }
.property-card .market-country { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.property-card .mini-chart { bottom: 28px; height: 72px; opacity: .8; }
.property-card .market-level { left: 0; bottom: 0; }
.property-card .market-level strong { font-size: 24px; }
.property-card .market-level small { color: var(--muted); }
.property-card .mini-chart .line { stroke-width: 1.7; }

.editorial-story {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(50px, 8vw, 130px);
  color: var(--ink);
  background: #d7c8af;
  overflow: visible;
}
.editorial-story::before { display: none; }
.story-copy { position: sticky; top: 140px; height: max-content; }
.manifesto-number { color: #665d4f; }
.story-copy > p { margin: 75px 0 10px; color: #655e53; font: 400 clamp(20px, 2.2vw, 32px) 'Instrument Serif', serif; }
.story-copy > h2 { margin: 0; color: var(--ink); font: 400 clamp(70px, 8vw, 124px)/.78 'Instrument Serif', serif; letter-spacing: -.04em; }
.story-note { max-width: 430px; margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(20,34,29,.25); display: grid; gap: 25px; font-size: 15px; line-height: 1.65; }
.story-note a { width: max-content; border-bottom: 1px solid; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.property-duo { display: grid; gap: 52px; padding-top: 60px; }
.property-frame { margin: 0; width: 76%; margin-left: auto; }
.property-frame.tall { width: 100%; }
.property-frame img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.property-frame figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 13px; border-top: 1px solid rgba(20,34,29,.25); }
.property-frame figcaption span { color: #655e53; font: 500 10px 'DM Mono', monospace; text-transform: uppercase; }
.property-frame figcaption b { font: 400 22px 'Instrument Serif', serif; }

.cta-band { min-height: 520px; position: relative; overflow: hidden; color: white; background: var(--ink); }
.cta-band::before { content: ''; position: absolute; inset: -40% -10% -60% 45%; border: 1px solid rgba(217,187,132,.26); border-radius: 50%; box-shadow: 0 0 0 90px rgba(217,187,132,.035), 0 0 0 180px rgba(217,187,132,.025); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin: 18px 0 0; font: 400 clamp(70px, 8vw, 125px)/.8 'Instrument Serif', serif; letter-spacing: -.04em; }
.round-arrow { color: var(--ink); background: var(--lime); }
.round-arrow:hover { color: var(--ink); background: white; transform: rotate(45deg); }

/* Inner routes: refined residential workspace */
.route-hero { min-height: 500px; position: relative; overflow: hidden; color: white; background: var(--ink); border: 0; }
.route-hero::before { content: ''; position: absolute; inset: 0; opacity: .42; background-position: center; background-size: cover; }
[data-route="markets"] .route-hero::before { background-image: linear-gradient(90deg,rgba(8,18,14,.75),rgba(8,18,14,.18)), url('./assets/dubai-courtyard.webp'); background-position: center 44%; }
[data-route="portfolio"] .route-hero::before { background-image: linear-gradient(90deg,rgba(8,18,14,.78),rgba(8,18,14,.18)), url('./assets/manhattan-penthouse.webp'); background-position: center 47%; }
.route-hero > * { position: relative; z-index: 1; }
.route-hero h1 { color: white; font: 400 clamp(70px,8vw,124px)/.8 'Instrument Serif',serif; letter-spacing: -.04em; }
.route-hero h1 em { color: white; text-decoration: none; font-style: italic; }
.route-stat { min-width: 245px; color: var(--ink); background: rgba(255,253,248,.9); border: 0; border-radius: 2px; backdrop-filter: blur(20px); }
.route-stat span, .route-stat small { color: #5e6963; }
.route-stat strong { color: var(--green); }
.build-hero, .learn-hero { background: #263b32; }
.build-hero::before, .learn-hero::before { opacity: .15; background-image: repeating-linear-gradient(90deg, transparent 0 90px, rgba(255,255,255,.35) 91px); }
.market-workspace, .portfolio-shell, .builder, .steps, .faq-shell { background: var(--paper); }
.filters { top: 103px; background: rgba(242,238,229,.94); border: 1px solid var(--line); border-radius: 2px; }
.search-field, .sort-select select { border-radius: 999px; }
.filter-pills button { border-radius: 999px; }
.filter-pills button.active { color: white; background: var(--ink); }
.market-list-head { color: var(--muted); border-color: var(--line-strong); }
.market-row { min-height: 94px; border-color: var(--line); transition: transform .25s, background .25s; }
.market-row:hover { background: var(--white); transform: translateX(5px); }
.market-avatar { color: var(--white) !important; background: var(--ink) !important; border-radius: 50%; }
.row-chart path { stroke: var(--green) !important; }
.status-open i { background: var(--green); }
.row-actions button { color: var(--white); background: var(--ink); border-radius: 999px; }
.row-actions button:hover { color: var(--ink); background: var(--lime); }

.balance-card, .cash-card, .holdings-card, .builder-catalogue, .builder-canvas, .index-preview { border-radius: 2px; }
.balance-card { color: white; background: #263b32; border: 0; }
.cash-card { color: var(--ink); background: #d7c8af; border: 0; }
.button.primary { color: var(--white); background: var(--ink); border-color: var(--ink); }
.button.primary:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.button.soft { color: white; background: var(--ink); }
.allocation-ring { background: conic-gradient(var(--ink) var(--invested,0%),rgba(255,255,255,.48) 0); }
.holdings-card { background: var(--white); }
.empty-orbit { border-color: var(--ink); }
.empty-orbit span { color: var(--ink); background: var(--lime); }
.builder-step > span, .builder-market button.selected { color: var(--white); background: var(--ink); border-color: var(--ink); }
.index-preview { background: #263b32; }
.preview-card { background: radial-gradient(circle at 50% 45%,rgba(217,187,132,.22),transparent 40%),#1b2e26; }
.composition-orbit { box-shadow: 0 0 65px rgba(217,187,132,.18); }
.steps article { border-radius: 2px; }
.steps article:nth-child(2) { color: var(--ink); background: #d7c8af; }
.steps article:nth-child(3) { color: white; background: #263b32; }
.faq-shell { background: var(--white); }
.faq-item button i { color: var(--green); }

.footer { background: #0b1511; }
.footer .brand-mark { color: var(--lime); background: transparent; }
.footer-brand .brand-mark svg { fill: var(--lime); }
.footer-links b { color: #89958f; }
.footer-bottom { border-color: rgba(255,255,255,.16); }

.modal { border-radius: 2px; }
.modal-orb, .wallet-option-icon { color: var(--white); background: var(--ink); }
.wallet-option:hover { border-color: var(--ink); background: #f1eee6; }
.chain-purchase-banner { margin: 20px 0; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(47,114,91,.3); background: rgba(47,114,91,.08); font: 500 10px 'DM Mono', monospace; letter-spacing: .06em; }
.chain-purchase-banner[hidden] { display: none; }
.chain-purchase-banner span { display: flex; align-items: center; gap: 8px; color: var(--green); }
.chain-purchase-banner span i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(47,114,91,.12); }
.chain-purchase-banner b { overflow: hidden; max-width: 145px; color: var(--ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.trade-tabs { background: #e7e2d7; }
.trade-tabs button.active { color: var(--white); background: var(--ink); }
.quick-amounts button { border-radius: 999px; }
.quick-amounts button:hover { color: var(--ink); border-color: var(--ink); background: var(--lime); }
.toast { color: var(--white); background: var(--ink); }
.toast i { color: var(--ink); background: var(--lime); }
.tour-visual { background: radial-gradient(circle,rgba(217,187,132,.68),rgba(242,238,229,.48) 50%,transparent 72%); }
.tour-center { color: var(--white); background: var(--ink); box-shadow: 0 15px 45px rgba(20,34,29,.22); }

@media (max-width: 1180px) {
  .hero-copy { width: min(720px, 61vw); }
  .hero-visual { width: min(365px, 32vw); }
  .terminal-watchlist { grid-template-columns: repeat(2,1fr); }
  .hero-symbol:nth-child(n+3) { display: none; }
  .editorial-story { grid-template-columns: .8fr 1.2fr; gap: 55px; }
}

@media (max-width: 900px) {
  .topbar { height: 72px; }
  .route { padding-top: 72px; }
  .route[data-route="home"] { padding-top: 0; }
  .desktop-nav, .icon-button { display: none; }
  .mobile-menu-button { display: block; }
  .topbar { grid-template-columns: 1fr auto; }
  .mobile-nav { inset: 72px 0 auto; color: var(--ink); background: rgba(242,238,229,.98); }
  .hood-hero { display: block; padding-top: 150px; padding-bottom: 46px; }
  .hero-copy { width: 100%; max-width: 680px; }
  .hero h1 { font-size: clamp(68px, 14vw, 110px); }
  .hero-visual { position: relative; right: auto; bottom: auto; width: min(100%,520px); margin: 60px 0 0 auto; }
  .hero-caption { top: 105px; }
  .hero-scroll { display: none; }
  .featured-grid { grid-template-columns: repeat(2,1fr); }
  .featured-card.property-card:nth-child(3) { grid-column: 2; margin-top: -45px; }
  .editorial-story { grid-template-columns: 1fr; }
  .story-copy { position: relative; top: auto; }
  .property-duo { grid-template-columns: 1.15fr .85fr; align-items: end; }
  .property-frame, .property-frame.tall { width: 100%; }
  .property-frame:not(.tall) { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .topbar { padding-inline: 18px; }
  .wordmark { font-size: 11px; letter-spacing: .12em; }
  .wallet-button { height: 41px; padding-inline: 13px; }
  .mobile-menu-button { width: 41px; height: 41px; }
  .hood-hero { padding-top: 128px; padding-bottom: 28px; min-height: auto; }
  .hood-hero::before { top: 72px; left: 20px; right: 20px; }
  .hero-media img { object-position: 62% center; }
  .hero-media::after { background: linear-gradient(90deg,rgba(5,13,10,.88),rgba(5,13,10,.25)),linear-gradient(0deg,rgba(5,13,10,.82),transparent 60%); }
  .hero-caption { display: none; }
  .hero h1 { font-size: clamp(61px, 19vw, 82px); line-height: .8; margin-top: 24px; }
  .hero-lede { font-size: 15px; line-height: 1.55; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hood-hero .button { width: 100%; }
  .trust-row { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 34px; }
  .trust-row span { display: grid; gap: 5px; margin: 0; padding: 0 9px; text-align: center; }
  .hero-visual { margin-top: 34px; }
  .market-terminal { padding: 17px; }
  .terminal-chart-wrap { margin-inline: -17px; }
  .terminal-quote h2 { font-size: 42px; }
  .terminal-price strong { font-size: 17px; }
  .section-head { align-items: start; flex-direction: column; }
  .section-head h2, .faq-intro h2 { font-size: 58px; }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-card.property-card:nth-child(n) { grid-column: auto; margin-top: 0; }
  .property-image { aspect-ratio: 4/4.8; }
  .property-card-body { min-height: 225px; }
  .editorial-story { padding-top: 85px; padding-bottom: 90px; }
  .story-copy > p { margin-top: 55px; }
  .story-copy > h2 { font-size: 76px; }
  .story-note { margin-top: 45px; }
  .property-duo { grid-template-columns: 1fr; gap: 36px; padding-top: 10px; }
  .property-frame:not(.tall) { width: 82%; margin: 0 0 0 auto; }
  .cta-band { min-height: 430px; }
  .cta-band h2 { font-size: 66px; }
  .route-hero { min-height: 470px; }
  .route-hero h1 { font-size: 66px; }
  .filters { top: 84px; border-radius: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img, .hero-scroll i { animation: none; }
  .property-image img { transition: none; }
}