@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #07101a;
  --graphite: #0c1621;
  --graphite-2: #111d29;
  --stone: #1a2633;
  --stone-2: #293746;
  --paper: #edf0ec;
  --paper-dim: #c5ccd2;
  --mist: #98a5b3;
  --muted: #6e7c8b;
  --lake: #2f6ddb;
  --lake-bright: #3c7cf0;
  --amber: #efbf55;
  --amber-soft: #f4d98f;
  --violet: #7355a6;
  --success: #4d83e4;
  --warning: #efbf55;
  --error: #d2736b;
  --line: rgba(178, 195, 209, .15);
  --line-strong: rgba(178, 195, 209, .29);
  --glass: rgba(7, 16, 26, .84);
  --serif: "Onest", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --sans: "Onest", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --mono: "Onest", "Segoe UI", Arial, sans-serif;
  --radius: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html,
body {
  background: var(--night);
}

body {
  font-family: var(--sans);
  font-variation-settings: "wght" 430;
}

body::after {
  display: none;
}

h1,
h2,
h3,
h4,
.brand-word,
.search-title strong,
.fact strong,
.booking-head strong,
.swatch strong,
.display-sample,
.calendar-visual b,
.crm-title strong,
.voice-visual span {
  font-family: var(--serif);
  font-weight: 520;
  letter-spacing: -.035em;
}

h1 { line-height: .92; }
h2 { line-height: .96; }
h3,
h4 { line-height: 1.04; }

.eyebrow,
.mono,
code,
.overview-card-number,
.overview-route,
.calendar-event,
.calendar-cell strong,
.metric strong,
.crm-nav .count {
  font-family: var(--mono);
  font-variation-settings: "wght" 560;
}

.site-header {
  background: rgba(7, 16, 26, .92);
  border-bottom-color: rgba(160, 183, 203, .18);
  backdrop-filter: blur(22px) saturate(110%);
}

.site-header.overlay {
  background: linear-gradient(to bottom, rgba(7, 16, 26, .9), rgba(7, 16, 26, .16));
}

.brand-lockup {
  gap: 9px;
}

.brand-word {
  color: var(--paper);
  font-size: 23px;
  font-weight: 560;
  letter-spacing: .27em;
}

.brand-descriptor {
  margin-top: 5px;
  color: #a9b5bf;
  font-size: 9px;
  font-weight: 480;
  letter-spacing: .025em;
}

.viray-mark {
  display: block;
  width: 44px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
  transition: filter .28s ease, transform .55s var(--ease);
}

.brand-lockup:hover .viray-mark,
.viray-mark.is-open {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-1px) scale(1.015);
}

.viray-mark.is-open {
  animation: viray-mark-intro .7s var(--ease) both;
}

@keyframes viray-mark-intro {
  0% { filter: brightness(.62) saturate(.7); opacity: .7; transform: scale(.985); }
  58% { filter: brightness(1.16) saturate(1.12); opacity: 1; transform: scale(1.02); }
  100% { filter: brightness(1.02) saturate(1); opacity: 1; transform: scale(1); }
}

.viray-mark.large {
  width: 152px;
  height: 210px;
}

.viray-mark.mono {
  filter: grayscale(1) contrast(1.22);
}

.light-bg .viray-mark.mono {
  filter: grayscale(1) brightness(.3) contrast(1.5);
}

.photo-bg .viray-mark.light {
  filter: brightness(1.18) saturate(.86);
}

.mark-stage-side .viray-mark {
  width: 96px;
  height: 126px;
}

.lockup-row > .viray-mark {
  width: 64px;
  height: 82px;
}

.primary-nav {
  font-size: 12px;
  font-weight: 540;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: #8eb6ff;
}

.nav-owner {
  color: var(--amber-soft) !important;
}

.button {
  min-height: 48px;
  border-radius: 8px;
  background: var(--paper);
  font-weight: 650;
  letter-spacing: -.01em;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s var(--ease);
}

.button:hover {
  background: #fff;
}

.button.amber,
.search-action .button,
.booking-body .button.amber,
.crm-actions .button.amber {
  border-color: #4a83ed;
  background: var(--lake-bright);
  color: #f7fbff;
}

.button.amber:hover,
.search-action .button:hover,
.booking-body .button.amber:hover,
.crm-actions .button.amber:hover {
  border-color: #6798f3;
  background: #4b86f2;
}

.button.outline {
  border-color: rgba(169, 191, 210, .26);
  background: rgba(7, 16, 26, .16);
}

.button.outline:hover {
  border-color: rgba(110, 158, 242, .62);
  background: rgba(60, 124, 240, .09);
}

.button.light {
  background: var(--paper);
  color: var(--night);
}

:focus-visible {
  outline-color: #6ea1ff;
}

.eyebrow {
  color: #79a7f5;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .16em;
}

.full-photo::before,
.object-hero::before {
  background: linear-gradient(90deg, rgba(7, 16, 26, .92) 0%, rgba(7, 16, 26, .48) 44%, rgba(7, 16, 26, .08) 76%), linear-gradient(to top, rgba(7, 16, 26, .82), transparent 52%);
}

.home-hero {
  background-position: center 58%;
}

.hero-copy h1 {
  max-width: 760px;
  font-size: clamp(64px, 7.4vw, 118px);
  font-weight: 520;
  letter-spacing: -.058em;
}

.hero-copy p:not(.eyebrow) {
  color: #cbd4dc;
  font-size: 17px;
}

.search-panel {
  overflow: hidden;
  border-color: rgba(157, 183, 207, .32);
  border-radius: 14px;
  background: rgba(7, 16, 26, .88);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .045);
  backdrop-filter: blur(24px) saturate(115%);
}

.search-title strong {
  font-size: 24px;
  font-weight: 560;
  letter-spacing: -.035em;
}

.availability-live {
  color: #82aefd;
  font-weight: 540;
}

.availability-live::before {
  background: var(--lake-bright);
  box-shadow: 0 0 0 4px rgba(60, 124, 240, .13);
}

.field {
  background: rgba(255, 255, 255, .012);
}

.field:focus-within {
  background: rgba(60, 124, 240, .055);
  box-shadow: inset 0 -2px var(--lake-bright);
}

.field span {
  color: #748596;
}

.estate-card,
.real-source-card,
.listing,
.booking-panel,
.panel,
.lead-card,
.component-sample,
.overview-card {
  border-radius: 10px;
}

.estate-card,
.real-source-card,
.listing,
.overview-card {
  overflow: hidden;
}

.estate-info h3,
.real-source-info h3,
.listing h2 {
  font-weight: 540;
}

.availability-tag,
.confirmed {
  color: #77a8ff;
}

.availability-tag::before {
  background: var(--lake-bright);
}

.real-world-section,
.owner-brand,
.owner-copy {
  background: #09131e;
}

.page-hero {
  background: #0a1520;
}

.page-hero h1 {
  max-width: 900px;
  font-weight: 540;
  letter-spacing: -.055em;
}

.compact-search,
.range-row input,
.segmented,
.filter-panel.open {
  border-radius: 8px;
}

.check-row input {
  accent-color: var(--lake-bright);
}

.segmented {
  overflow: hidden;
}

.segmented button[aria-pressed="true"] {
  background: var(--lake-bright);
  color: white;
}

.listing:hover,
.overview-card:hover,
.lead-card:hover {
  border-color: rgba(90, 141, 232, .58);
}

.real-listing {
  border-color: rgba(239, 191, 85, .38);
}

.map-panel {
  background: #07111b;
}

.map-canvas {
  background: #07111b url("assets/viray-night-map.png") center / cover;
}

.map-canvas::before {
  display: none;
}

.map-label {
  color: rgba(213, 224, 232, .54);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 560;
}

.map-pin {
  min-width: 78px;
  min-height: 38px;
  border-color: rgba(213, 225, 235, .5);
  border-radius: 6px;
  background: rgba(7, 16, 26, .9);
  font-family: var(--sans);
  font-weight: 620;
  backdrop-filter: blur(10px);
}

.map-pin.active {
  border-color: #4a83ed;
  background: var(--lake-bright);
  color: white;
}

.gallery-strip button,
.booking-fields {
  border-radius: 8px;
}

.gallery-strip button[aria-pressed="true"] {
  border-color: var(--lake-bright);
}

.amenity::before {
  color: #6f9ff0;
}

.booking-panel {
  overflow: hidden;
  background: #0c1722;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .32);
}

.booking-head strong {
  font-weight: 550;
}

.guide-mast,
.guide-section {
  border-color: rgba(175, 195, 212, .17);
}

.guide-title h1,
.guide-content h2,
.display-sample {
  font-weight: 520;
  letter-spacing: -.055em;
}

.guide-index strong {
  color: #74a5fb;
}

.guide-content > p,
.guide-index p {
  color: #9eabb7;
}

.mark-stage,
.clearspace-demo,
.interval-system,
.component-sample,
.voice-grid {
  border-radius: 12px;
  overflow: hidden;
}

.mark-stage-main,
.brand-mark-visual {
  background: #09131e;
}

.mark-stage-main .viray-mark.large,
.brand-mark-visual .viray-mark.large {
  width: 190px;
  height: 260px;
}

.clearspace-demo {
  border-color: #5d8fe8;
}

.clearspace-demo::before,
.clearspace-demo::after {
  color: #8bb4ff;
}

.swatch-grid {
  overflow: hidden;
  border-radius: 12px;
}

.swatch strong {
  font-weight: 560;
}

.interval-sample::before {
  background: var(--lake-bright);
}

.interval-sample:nth-child(2)::before,
.interval-sample:nth-child(4)::before {
  background: var(--amber);
}

.state-chip {
  border-radius: 999px;
}

.state-chip.success {
  color: #7aa9ff;
}

.overview-hero {
  background: linear-gradient(90deg, rgba(7, 16, 26, .98) 0%, rgba(7, 16, 26, .78) 47%, rgba(7, 16, 26, .1) 100%), url("assets/hero-lakehouse.png") 64% center / cover;
}

.overview-hero-copy h1 {
  font-size: clamp(68px, 7.7vw, 124px);
  font-weight: 520;
  letter-spacing: -.065em;
  line-height: .86;
}

.overview-hero-mark {
  background: rgba(7, 16, 26, .26);
}

.overview-hero-mark i:nth-of-type(1) {
  background: var(--lake-bright);
}

.overview-hero-mark i:nth-of-type(2) {
  background: var(--amber);
}

.overview-card-number,
.overview-card-link span {
  color: #79a7f5;
}

.overview-route i {
  background: var(--lake-bright);
}

.owner-overview,
.overview-cta,
.crm-body,
.crm-sidebar,
.crm-topbar {
  background: #08121d;
}

.calendar-visual .busy {
  border-color: rgba(60, 124, 240, .82);
  background: rgba(60, 124, 240, .42);
}

.calendar-visual .range {
  border-color: #8162b3;
  background: rgba(115, 85, 166, .5);
}

.kanban-visual span {
  border-left-color: var(--lake-bright);
}

.palette-visual i:nth-child(1) { background: #07101a; }
.palette-visual i:nth-child(2) { background: #1a2633; }
.palette-visual i:nth-child(3) { background: #3c7cf0; }
.palette-visual i:nth-child(4) { background: #efbf55; }

.voice-visual {
  background: #101d2a;
}

.voice-visual span {
  font-weight: 520;
}

.crm-sidebar {
  background: #07101a;
}

.crm-nav a {
  border-radius: 7px;
}

.crm-nav a[aria-current="page"],
.crm-nav a:hover {
  background: rgba(60, 124, 240, .1);
  color: #dbe8ff;
}

.crm-nav a[aria-current="page"] {
  box-shadow: inset 2px 0 var(--lake-bright);
}

.crm-title strong {
  font-weight: 560;
}

.metric strong {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 610;
  letter-spacing: -.035em;
}

.panel {
  overflow: hidden;
  background: #0c1722;
}

.calendar-cell {
  background: #0a141f;
}

.calendar-cell:hover {
  background: #101e2b;
}

.calendar-cell.booked {
  background: rgba(60, 124, 240, .19);
}

.calendar-cell.requested {
  background: rgba(115, 85, 166, .2);
}

.calendar-cell.selected {
  box-shadow: inset 0 -3px var(--lake-bright);
}

.calendar-event {
  border-radius: 5px;
  background: var(--lake-bright);
}

.calendar-cell.requested .calendar-event {
  background: var(--violet);
  color: white;
}

.update-box {
  border-left-color: var(--lake-bright);
  border-radius: 0 8px 8px 0;
  background: #09141f;
}

.kanban-column {
  border-radius: 8px 8px 0 0;
  background: #09141f;
}

.kanban-column[data-status="proposal"] {
  border-color: var(--violet);
}

.lead-next,
.task time,
.amber-text,
.source-note {
  color: #82adfb;
}

.lead-drawer {
  background: #0b1621;
}

.toast {
  border-color: rgba(93, 143, 232, .55);
  border-radius: 8px;
  background: #eaf2ff;
}

@media (max-width: 860px) {
  .primary-nav {
    border-radius: 10px;
    background: rgba(8, 18, 29, .98);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  }

  .hero-copy h1,
  .overview-hero-copy h1 {
    font-size: clamp(50px, 14vw, 72px);
    line-height: .91;
  }

  .search-panel {
    border-radius: 11px;
  }

  .crm-sidebar .viray-mark {
    width: 38px;
    height: 42px;
  }
}

@media (max-width: 560px) {
  .brand-word {
    font-size: 20px;
    letter-spacing: .22em;
  }

  .viray-mark {
    width: 38px;
    height: 42px;
  }

  h1 { font-size: 51px; }
  h2 { font-size: 38px; }

  .hero-copy h1,
  .overview-hero-copy h1 {
    font-size: 50px;
  }

  .full-photo::before {
    background: linear-gradient(to bottom, rgba(7, 16, 26, .44), rgba(7, 16, 26, .64) 38%, rgba(7, 16, 26, .97));
  }

  .overview-hero {
    background-position: 68% center;
  }

  .crm-grid > .panel:first-child > .panel-head {
    min-height: 0;
    padding: 16px;
    align-items: stretch;
    flex-direction: column;
  }

  .crm-grid > .panel:first-child > .panel-head .segmented {
    align-self: flex-start;
  }

  .display-sample {
    font-size: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viray-mark {
    transition: none;
  }

  .viray-mark.is-open {
    animation: none;
  }
}