:root {
  --ink: #08090b;
  --panel: #101216;
  --panel-2: #171a20;
  --paper: #f3eadb;
  --text: #f5efe6;
  --muted: rgba(245, 239, 230, 0.68);
  --soft: rgba(245, 239, 230, 0.09);
  --line: rgba(245, 239, 230, 0.16);
  --line-dark: rgba(8, 9, 11, 0.14);
  --accent: #d9b469;
  --accent-2: #7f9cff;
  --danger: #d75f4e;
  --ok: #5fc08c;
  --radius: 8px;
  --shadow: 0 26px 90px rgba(0, 0, 0, 0.34);
  color: var(--text);
  background: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-padding-top: 86px; }
body { margin: 0; overflow-x: hidden; background: var(--ink); }
body, button, input, textarea, select { font: inherit; }
button, input, textarea, select { color: inherit; }
button { cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
p { color: var(--muted); line-height: 1.7; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.project-page {
  --page-bg:
    radial-gradient(circle at 18% 18%, rgba(217, 180, 105, 0.13), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(127, 156, 255, 0.09), transparent 34%),
    linear-gradient(140deg, #060708, #111319 54%, #08090b);
}
.avalanche-page { --accent: #35c6c0; --accent-2: #ffcb74; --paper: #f1eadb; }
.pos-page { --accent: #f1a45c; --accent-2: #6f927f; --paper: #f3e4d4; }
.analytics-page { --accent: #80a8ff; --accent-2: #7be3bd; --paper: #e8edf4; }
.crm-page { --accent: #bfc8b1; --accent-2: #e3a86a; --paper: #eff0e8; }
.commerce-page { --accent: #e2b06f; --accent-2: #c56f5d; --paper: #efe5d8; }
.booking-page { --accent: #8fc7a4; --accent-2: #dbc176; --paper: #e7eee5; }

.project-shell { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 300; padding: 10px 14px; border-radius: var(--radius); color: var(--ink); background: var(--accent); font-weight: 900; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.project-topbar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 11, 0.78);
  backdrop-filter: blur(18px);
}
.project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; font-weight: 950; }
.project-brand span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--accent); font-size: 0.78rem; }
.project-brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.67rem; letter-spacing: .12em; text-transform: uppercase; }
.project-links { display: none; align-items: center; gap: 18px; color: rgba(245,239,230,.76); font-size: 0.88rem; font-weight: 850; }
.project-links a:hover { color: var(--text); }
.project-back { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: rgba(245,239,230,.06); font-weight: 900; }

.project-main { padding-top: 72px; }
.project-hero {
  position: relative; min-height: calc(100svh - 72px); display: grid; align-items: center; overflow: hidden;
  padding: 68px 0 54px; background: var(--page-bg);
}
.project-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 68px 68px; mask-image: radial-gradient(circle at 55% 46%, #000, transparent 75%);
}
.project-hero-inner { position: relative; z-index: 2; display: grid; gap: 34px; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; color: rgba(245,239,230,.62); font-size: 0.82rem; font-weight: 850; }
.crumbs a { color: var(--accent); }
.project-kicker { margin-bottom: 14px; color: var(--accent); font-size: 0.72rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.project-title { max-width: 760px; margin-bottom: 18px; font-size: 3.4rem; line-height: .94; }
.project-lede { max-width: 720px; margin-bottom: 24px; color: rgba(245,239,230,.76); font-size: 1.08rem; }
.project-actions, .pill-row, .control-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); font-weight: 950;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.button.primary { color: var(--ink); background: var(--accent); border-color: transparent; }
.button.ghost { color: var(--text); background: rgba(245,239,230,.06); }
.button:hover { transform: translateY(-2px); border-color: rgba(245,239,230,.32); }
.pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: rgba(245,239,230,.74); font-size: 0.74rem; font-weight: 900; }

.section { padding: 76px 0; }
.section.light { color: var(--ink); background: var(--paper); }
.section.light p { color: #615d56; }
.section-head { display: grid; gap: 18px; margin-bottom: 28px; }
.section-head h2 { margin-bottom: 0; font-size: 2.35rem; line-height: 1.03; }
.section-head p { max-width: 720px; margin-bottom: 0; }
.insight-grid { display: grid; gap: 12px; }
.insight-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(245,239,230,.055); }
.light .insight-card { border-color: var(--line-dark); background: rgba(255,255,255,.44); }
.insight-card span { color: var(--accent); font-size: .74rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.light .insight-card span { color: #6d5843; }
.insight-card h3 { margin: 12px 0 8px; font-size: 1.12rem; }
.insight-card p { margin-bottom: 0; font-size: .94rem; }
.project-footer { padding: 46px 0; border-top: 1px solid var(--line); background: #07080a; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--muted); font-size: .88rem; }
.footer-row a { color: var(--text); font-weight: 900; }

.app-frame, .demo-panel, .glass-panel {
  border: 1px solid var(--line); border-radius: var(--radius); background: rgba(15, 17, 22, .78);
  box-shadow: var(--shadow); backdrop-filter: blur(14px);
}
.app-frame { overflow: hidden; }
.frame-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.frame-dots { display: flex; gap: 6px; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.frame-dots i:nth-child(2) { background: var(--accent-2); }
.frame-dots i:nth-child(3) { background: rgba(245,239,230,.38); }
.frame-label { color: rgba(245,239,230,.68); font-size: .76rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }

/* Avalanche */
.avalanche-stage { min-height: 520px; display: grid; gap: 12px; }
.avalanche-photo { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.15); }
.avalanche-photo img { width: 100%; height: 100%; object-fit: cover; }
.avalanche-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.72)); }
.avalanche-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: grid; gap: 8px; }
.avalanche-caption strong { font-size: 1.45rem; }
.avalanche-caption span { color: rgba(255,255,255,.8); }
.avalanche-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.avalanche-strip div { min-height: 120px; padding: 14px; border-radius: var(--radius); color: var(--ink); background: var(--accent); font-weight: 950; }
.avalanche-strip div:nth-child(2) { background: var(--accent-2); }
.avalanche-strip div:nth-child(3) { color: var(--text); background: #153f3a; }
.journey-grid { display: grid; gap: 12px; }
.journey-card { min-height: 180px; padding: 18px; border-radius: var(--radius); background: #0b2423; border: 1px solid rgba(53,198,192,.25); }
.journey-card strong { color: var(--accent); }
.gallery-pair { display: grid; gap: 14px; }
.gallery-pair img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: var(--radius); }

/* Restaurant POS */
.pos-hero { background: radial-gradient(circle at 18% 10%, rgba(241,164,92,.18), transparent 30%), linear-gradient(135deg, #1b100d, #291713 54%, #0d0b0a); }
.pos-workspace { display: grid; gap: 14px; padding: 14px; background: #1c1412; }
.pos-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.status-key { display: flex; flex-wrap: wrap; gap: 8px; color: #e8d6c5; font-size: .82rem; }
.status-key span { display: inline-flex; align-items: center; gap: 6px; }
.status-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.status-key span:nth-child(2) i { background: var(--accent); }
.status-key span:nth-child(3) i { background: var(--danger); }
.pos-grid { display: grid; gap: 14px; }
.table-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.table-tile { min-height: 106px; display: grid; gap: 6px; align-content: space-between; padding: 12px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14); text-align: left; background: #25453a; }
.table-tile.is-free { background: #21362f; }
.table-tile.is-reserved { background: #493e22; }
.table-tile.is-busy { background: #55251f; }
.table-tile.is-active { outline: 2px solid var(--accent); }
.table-tile strong { font-size: 1rem; }
.table-tile span { color: rgba(255,255,255,.72); font-size: .78rem; }
.pos-menu { display: grid; gap: 12px; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.category-tabs button, .date-tabs button, .filter-chip, .commerce-filter, .time-slot, .calendar-day {
  min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  color: inherit; background: rgba(255,255,255,.06); font-weight: 900;
}
.category-tabs button.is-active, .date-tabs button.is-active, .filter-chip.is-active, .commerce-filter.is-active, .time-slot.is-active, .calendar-day.is-active {
  color: var(--ink); background: var(--accent); border-color: transparent;
}
.menu-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-item { min-height: 96px; display: grid; gap: 7px; text-align: left; padding: 12px; border-radius: var(--radius); color: #fff1e5; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); }
.menu-item small { color: rgba(255,255,255,.62); }
.order-panel { display: grid; gap: 12px; align-content: start; padding: 14px; border-radius: var(--radius); background: #f3e4d4; color: #1c1412; }
.order-panel p { color: #665548; }
.order-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.order-lines { display: grid; gap: 8px; min-height: 170px; }
.order-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border-radius: var(--radius); background: rgba(255,255,255,.68); border: 1px solid rgba(28,20,18,.08); }
.qty-controls { display: flex; gap: 6px; align-items: center; }
.qty-controls button { width: 28px; height: 28px; border-radius: 6px; color: #1c1412; background: #f1c18c; font-weight: 950; }
.kitchen-note textarea { width: 100%; min-height: 70px; resize: vertical; border: 1px solid rgba(28,20,18,.18); border-radius: var(--radius); padding: 10px; color: #1c1412; background: rgba(255,255,255,.74); }
.totals { display: grid; gap: 7px; padding-top: 8px; border-top: 1px solid rgba(28,20,18,.14); }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals .grand { font-size: 1.22rem; font-weight: 950; }
.payment-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.payment-tabs button { min-height: 38px; border-radius: var(--radius); color: #1c1412; background: rgba(28,20,18,.08); font-weight: 900; }
.payment-tabs button.is-active { color: #1c1412; background: var(--accent); }
.history-list { display: grid; gap: 8px; }
.history-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-radius: var(--radius); background: rgba(255,255,255,.55); }

/* Analytics */
.analytics-hero { background: radial-gradient(circle at 78% 8%, rgba(128,168,255,.22), transparent 32%), linear-gradient(135deg, #070a11, #101827 60%, #07080b); }
.analytics-app { padding: 14px; background: #08101c; }
.analytics-shell { display: grid; gap: 14px; }
.date-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.metric-strip { display: grid; gap: 10px; }
.metric-card { padding: 16px; border-radius: var(--radius); background: #101a2a; border: 1px solid rgba(128,168,255,.18); }
.metric-card span { color: rgba(232,237,244,.62); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.metric-card strong { display: block; margin-top: 8px; font-size: 1.72rem; }
.metric-card em { color: var(--accent-2); font-style: normal; font-size: .82rem; font-weight: 900; }
.analytics-main-grid { display: grid; gap: 14px; }
.chart-card, .source-card, .activity-card, .empty-card { padding: 16px; border: 1px solid rgba(128,168,255,.16); border-radius: var(--radius); background: #0d1624; }
.chart-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 18px; }
.bar-chart { height: 230px; display: flex; align-items: end; gap: 9px; padding-top: 14px; border-bottom: 1px solid rgba(255,255,255,.16); }
.bar-chart i { flex: 1; min-width: 10px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); transition: height .22s ease; }
.source-list, .conversion-list { display: grid; gap: 10px; }
.source-list li, .conversion-list li { display: grid; gap: 6px; list-style: none; }
.source-list ul, .conversion-list ul { margin: 0; padding: 0; }
.progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.activity-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.activity-table th, .activity-table td { padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,.09); text-align: left; }
.activity-table th { color: rgba(232,237,244,.58); font-size: .76rem; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
.empty-card { display: grid; place-items: center; min-height: 190px; text-align: center; border-style: dashed; }
.empty-card.is-hidden { display: none; }

/* CRM */
.crm-hero { background: radial-gradient(circle at 24% 18%, rgba(191,200,177,.22), transparent 32%), linear-gradient(135deg, #111410, #20231d 60%, #0b0d0b); }
.crm-app { background: #12150f; }
.crm-toolbar { display: grid; gap: 10px; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.crm-search { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); color: #f4efe6; background: rgba(255,255,255,.07); }
.pipeline-board { display: grid; gap: 12px; padding: 14px; }
.stage-column { min-height: 280px; padding: 12px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.stage-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: rgba(245,239,230,.78); font-size: .84rem; font-weight: 950; text-transform: uppercase; }
.deal-list { display: grid; gap: 9px; }
.deal-card { display: grid; gap: 8px; width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); text-align: left; background: #f0f0e8; color: #111410; }
.deal-card.is-active { outline: 2px solid var(--accent); }
.deal-card small { color: #62675b; }
.deal-card strong { font-size: .98rem; }
.deal-meta { display: flex; justify-content: space-between; gap: 10px; color: #53584d; font-size: .78rem; }
.contact-panel { display: grid; gap: 14px; padding: 16px; border-top: 1px solid rgba(255,255,255,.12); background: #eff0e8; color: #111410; }
.contact-panel p { color: #5d6258; }
.timeline { display: grid; gap: 10px; }
.timeline article { padding: 10px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.58); border-radius: 0 var(--radius) var(--radius) 0; }
.note-box textarea { width: 100%; min-height: 84px; padding: 10px; border: 1px solid rgba(17,20,16,.16); border-radius: var(--radius); color: #111410; background: rgba(255,255,255,.72); resize: vertical; }

/* Commerce */
.commerce-hero-bg { background: radial-gradient(circle at 76% 12%, rgba(197,111,93,.22), transparent 32%), linear-gradient(135deg, #100d0b, #261711 58%, #0c0a09); }
.commerce-stage { display: grid; gap: 14px; }
.commerce-editorial { position: relative; min-height: 430px; overflow: hidden; border-radius: var(--radius); background: #1e1410; border: 1px solid rgba(255,255,255,.14); }
.commerce-editorial img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.commerce-editorial div { position: absolute; left: 18px; bottom: 18px; right: 18px; }
.commerce-editorial strong { display: block; color: var(--paper); font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1; }
.commerce-shell { display: grid; gap: 14px; }
.commerce-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.commerce-layout { display: grid; gap: 14px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-card { display: grid; gap: 10px; padding: 10px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); text-align: left; background: rgba(255,255,255,.07); }
.product-card img { width: 100%; aspect-ratio: 1 / 1.16; object-fit: cover; border-radius: 6px; }
.product-card strong { font-size: .95rem; }
.product-card span { color: rgba(245,239,230,.65); font-size: .8rem; }
.commerce-panel { display: grid; gap: 13px; padding: 14px; border-radius: var(--radius); background: #efe5d8; color: #130e0b; }
.commerce-panel p { color: #61564e; }
.variant-row { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-row button { min-height: 36px; padding: 0 10px; border-radius: var(--radius); color: #130e0b; background: rgba(19,14,11,.08); font-weight: 900; }
.variant-row button.is-active { background: var(--accent); }
.cart-lines { display: grid; gap: 8px; min-height: 94px; }
.cart-line { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-radius: var(--radius); background: rgba(255,255,255,.58); }
.wishlist-list { display: flex; flex-wrap: wrap; gap: 6px; }
.wishlist-list span { padding: 5px 8px; border-radius: 999px; background: rgba(19,14,11,.1); font-size: .78rem; font-weight: 900; }

/* Booking */
.booking-hero-bg { background: radial-gradient(circle at 22% 18%, rgba(143,199,164,.22), transparent 32%), linear-gradient(135deg, #07110e, #14221d 58%, #080a08); }
.booking-stage { display: grid; gap: 14px; }
.booking-photo { min-height: 430px; overflow: hidden; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14); }
.booking-photo img { width: 100%; height: 100%; object-fit: cover; }
.booking-shell { display: grid; gap: 14px; }
.service-list { display: grid; gap: 10px; }
.service-option { display: grid; gap: 7px; width: 100%; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); text-align: left; background: rgba(255,255,255,.07); }
.service-option.is-active { outline: 2px solid var(--accent); background: rgba(143,199,164,.12); }
.service-option small { color: rgba(245,239,230,.64); }
.booking-layout { display: grid; gap: 14px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.calendar-day { min-height: 44px; padding: 0; }
.calendar-day[disabled] { opacity: .32; cursor: not-allowed; }
.time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.booking-summary { display: grid; gap: 12px; padding: 14px; border-radius: var(--radius); background: #e7eee5; color: #08110d; }
.booking-summary p { color: #566459; }
.extras { display: grid; gap: 8px; }
.extras label { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-radius: var(--radius); background: rgba(255,255,255,.6); }
.client-form { display: grid; gap: 9px; }
.client-form label { display: grid; gap: 6px; color: #34443a; font-weight: 850; }
.client-form input { min-height: 40px; border: 1px solid rgba(8,17,13,.16); border-radius: var(--radius); padding: 0 10px; color: #08110d; background: rgba(255,255,255,.76); }
.confirmed-box { display: none; padding: 14px; border-radius: var(--radius); color: #08110d; background: var(--accent); font-weight: 950; }
.confirmed-box.is-visible { display: block; }

@media (min-width: 680px) {
  .project-shell { width: min(1180px, calc(100% - 48px)); }
  .project-title { font-size: 4.9rem; }
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); align-items: end; }
  .insight-grid, .journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-pair { grid-template-columns: 1fr 1fr; }
  .table-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .time-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .project-links { display: flex; }
  .project-hero-inner { grid-template-columns: minmax(0, .92fr) minmax(420px, .84fr); gap: 58px; }
  .project-title { font-size: 5.9rem; }
  .section { padding: 98px 0; }
  .pos-grid { grid-template-columns: minmax(0, 1.2fr) minmax(340px, .78fr); }
  .analytics-main-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .7fr); }
  .activity-card { grid-column: 1 / -1; }
  .pipeline-board { grid-template-columns: repeat(4, minmax(230px, 1fr)); overflow-x: auto; }
  .crm-toolbar { grid-template-columns: minmax(260px, .4fr) 1fr; align-items: center; }
  .contact-panel { grid-template-columns: .8fr 1fr .8fr; align-items: start; }
  .commerce-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, .48fr); align-items: start; }
  .booking-layout { grid-template-columns: minmax(0, 1.05fr) minmax(330px, .65fr); align-items: start; }
}

@media (max-width: 520px) {
  .project-title { font-size: 3rem; }
  .project-hero { padding-top: 48px; }
  .project-back { padding: 0 10px; font-size: .84rem; }
  .project-brand small { display: none; }
  .menu-items, .product-grid, .avalanche-strip { grid-template-columns: 1fr; }
  .table-tile { min-height: 92px; }
  .activity-table { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Automation Command Center */
.automation-page { --accent: #f0c96f; --accent-2: #7bcba0; --paper: #efe9db; }
.automation-hero { background-color: #15120d; background-image: linear-gradient(rgba(240,201,111,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(240,201,111,.055) 1px, transparent 1px); background-size: 52px 52px; }
.automation-hero-window { overflow: hidden; border: 1px solid rgba(240,201,111,.2); border-radius: var(--radius); background: rgba(15,13,9,.86); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.automation-hero-body { position: relative; min-height: 470px; display: grid; align-items: center; padding: 22px; }
.automation-core { position: absolute; left: 10%; top: 50%; width: 210px; height: 210px; border: 1px solid rgba(240,201,111,.22); border-radius: 50%; transform: translateY(-50%); }
.automation-core::before, .automation-core::after { content: ""; position: absolute; border: 1px solid rgba(240,201,111,.13); border-radius: 50%; }
.automation-core::before { inset: 28px; }.automation-core::after { inset: 60px; }
.automation-core > span { position: absolute; inset: 77px; z-index: 2; display: grid; place-items: center; border-radius: 50%; color: #15120d; background: var(--accent); font-size: .74rem; font-weight: 950; box-shadow: 0 0 44px rgba(240,201,111,.24); }
.automation-core > i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px rgba(123,203,160,.48); }
.automation-core > i:nth-of-type(1) { top: 4%; left: 48%; }.automation-core > i:nth-of-type(2) { right: 7%; top: 56%; }.automation-core > i:nth-of-type(3) { left: 17%; bottom: 8%; }.automation-core > i:nth-of-type(4) { left: 2%; top: 37%; }
.hero-flow-list { position: relative; z-index: 3; width: min(350px, 88%); display: grid; justify-self: end; padding: 14px; border: 1px solid rgba(240,201,111,.17); border-radius: var(--radius); background: rgba(20,17,11,.78); backdrop-filter: blur(15px); }
.hero-flow-list article { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(240,201,111,.11); }
.hero-flow-list article:last-child { border-bottom: 0; }
.hero-flow-list article > i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
.hero-flow-list span { color: rgba(245,239,230,.52); font-size: .63rem; }
.hero-flow-list b { display: block; margin-bottom: 4px; color: var(--text); font-size: .76rem; }
.hero-flow-list em { color: var(--accent-2); font-size: .58rem; font-style: normal; font-weight: 950; }
.automation-app { background: #12100b; }
.automation-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; padding: 14px; border-bottom: 1px solid rgba(240,201,111,.15); }
.automation-toolbar > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; }
.automation-toolbar small { grid-column: 2; color: rgba(245,239,230,.48); font-size: .68rem; }
.live-dot { width: 9px; height: 9px; grid-row: 1 / span 2; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px rgba(123,203,160,.54); }
.automation-workspace { display: grid; }
.automation-sidebar { display: grid; gap: 14px; padding: 14px; border-bottom: 1px solid rgba(240,201,111,.14); background: #17140e; }
.automation-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.automation-stats article { padding: 12px; border: 1px solid rgba(240,201,111,.13); border-radius: var(--radius); background: rgba(255,255,255,.035); }
.automation-stats span { display: block; color: rgba(245,239,230,.46); font-size: .6rem; text-transform: uppercase; }
.automation-stats strong { display: block; margin-top: 6px; color: var(--accent); font-size: 1.18rem; }
.workflow-list { display: grid; gap: 7px; }
.workflow-card { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(240,201,111,.12); border-radius: var(--radius); color: var(--text); text-align: left; background: rgba(255,255,255,.035); }
.workflow-card.is-active { border-color: var(--accent); background: rgba(240,201,111,.08); }
.workflow-card > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245,239,230,.3); }
.workflow-card > i.is-on { background: var(--accent-2); box-shadow: 0 0 10px rgba(123,203,160,.38); }
.workflow-card span { display: grid; gap: 3px; }
.workflow-card small { color: rgba(245,239,230,.43); font-size: .58rem; }
.workflow-card em { color: rgba(245,239,230,.42); font-size: .55rem; font-style: normal; }
.workflow-form { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid rgba(240,201,111,.13); }
.workflow-form .project-kicker { margin-bottom: 0; }
.workflow-form label { display: grid; gap: 5px; color: rgba(245,239,230,.58); font-size: .66rem; font-weight: 850; }
.workflow-form input, .workflow-form select { min-height: 38px; width: 100%; padding: 0 9px; border: 1px solid rgba(240,201,111,.15); border-radius: var(--radius); color: var(--text); background: #211c12; }
.workflow-detail { min-height: 520px; padding: 18px; background-image: linear-gradient(rgba(240,201,111,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(240,201,111,.045) 1px, transparent 1px); background-size: 34px 34px; }
.workflow-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 30px; }
.workflow-detail-head h3 { margin-bottom: 5px; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 400; }
.workflow-detail-head p { margin-bottom: 0; font-size: .77rem; }
.workflow-actions { display: flex; gap: 7px; }
.workflow-toggle { min-height: 38px; padding: 0 11px; border: 1px solid rgba(240,201,111,.17); border-radius: var(--radius); color: rgba(245,239,230,.62); background: rgba(255,255,255,.05); font-size: .68rem; font-weight: 900; }
.workflow-toggle.is-on { color: #122018; background: var(--accent-2); }
.flow-canvas { position: relative; display: grid; gap: 13px; max-width: 620px; margin-inline: auto; }
.flow-step { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: center; padding: 14px; border: 1px solid rgba(240,201,111,.16); border-radius: var(--radius); background: rgba(20,17,11,.88); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: 34px; top: calc(100% + 1px); width: 1px; height: 13px; background: rgba(240,201,111,.35); }
.flow-step > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #15120d; background: var(--accent); font-size: .64rem; font-weight: 950; }
.flow-step b { display: block; margin-bottom: 4px; font-size: .8rem; }
.flow-step small { color: rgba(245,239,230,.45); font-size: .62rem; }
.flow-step em { color: var(--accent-2); font-size: .58rem; font-style: normal; font-weight: 900; }
.event-console { min-height: 280px; padding: 14px; border-top: 1px solid rgba(240,201,111,.14); background: #0d0c09; }
.event-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(240,201,111,.13); color: rgba(240,201,111,.52); font-size: .58rem; letter-spacing: .1em; }
.event-head b { color: var(--accent-2); }
.event-log { display: grid; gap: 8px; margin-top: 12px; }
.event-log article { display: grid; grid-template-columns: auto 1fr; gap: 9px; color: rgba(245,239,230,.55); font-family: Consolas, monospace; font-size: .62rem; line-height: 1.5; }
.event-log article span { color: var(--accent); }

/* Hospitality Guest Portal */
.hospitality-page { --accent: #76d5cd; --accent-2: #e6b17e; --paper: #ecf1ed; }
.hospitality-hero { background: #061519; }
.hospitality-hero-image { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,20,24,.98) 0%, rgba(5,20,24,.8) 46%, rgba(5,20,24,.18) 100%), url("assets/images/projects/avalanche-saona-island.webp") center / cover no-repeat; }
.hospitality-hero::before { z-index: 1; }
.guest-hero-card { position: relative; z-index: 2; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border: 1px solid rgba(118,213,205,.24); border-radius: var(--radius); background: rgba(4,25,29,.5); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.guest-hero-card > small { color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.guest-hero-card > .guest-weather { position: absolute; top: 20px; right: 20px; color: rgba(245,239,230,.66); font-size: .66rem; }
.guest-hero-card h2 { margin: 25px 0 14px; font-size: 3.2rem; line-height: .92; }
.guest-hero-card > p { max-width: 360px; }
.guest-hero-card > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 22px; padding: 14px; border: 1px solid rgba(118,213,205,.2); border-radius: var(--radius); background: rgba(5,20,24,.48); }
.guest-hero-card > div span { grid-row: span 2; color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.guest-hero-card > div small { color: rgba(245,239,230,.46); }
.guest-app { background: #07171a; }
.guest-app-top { display: grid; gap: 14px; padding: 14px; border-bottom: 1px solid rgba(118,213,205,.16); }
.guest-app-top > div:first-child { display: grid; gap: 3px; }
.guest-app-top > div:first-child strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.guest-app-top > div:first-child span { color: rgba(245,239,230,.45); font-size: .62rem; }
.guest-tabs { display: flex; gap: 6px; overflow-x: auto; }
.guest-tabs button { min-height: 36px; flex: 0 0 auto; padding: 0 10px; border-radius: var(--radius); color: rgba(245,239,230,.55); background: transparent; font-size: .66rem; font-weight: 900; }
.guest-tabs button.is-active { color: #07171a; background: var(--accent); }
.guest-badge { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(118,213,205,.2); border-radius: 50%; color: var(--accent); font-size: .62rem; font-weight: 900; }
.guest-app-layout { display: grid; }
.guest-panel { min-height: 620px; padding: 18px; background: #0b2024; }
.guest-welcome-panel { position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 22px; border-radius: var(--radius); background: #0a2429; }
.guest-welcome-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.guest-welcome-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,22,26,.9), transparent); }
.guest-welcome-panel > *:not(img) { position: relative; z-index: 2; }
.guest-welcome-panel small { color: var(--accent); font-size: .62rem; letter-spacing: .1em; }
.guest-welcome-panel h3 { margin: 12px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 2.4rem; font-weight: 400; }
.guest-welcome-panel p { margin-bottom: 0; color: rgba(245,239,230,.62); }
.guest-quick-grid { display: grid; gap: 9px; margin-top: 14px; }
.guest-quick-grid article { padding: 15px; border: 1px solid rgba(118,213,205,.13); border-radius: var(--radius); background: rgba(255,255,255,.04); }
.guest-quick-grid span { color: var(--accent); font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.guest-quick-grid h4 { margin: 10px 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 400; }
.guest-quick-grid p { margin-bottom: 0; color: rgba(245,239,230,.48); font-size: .7rem; }
.stay-summary { display: grid; align-content: start; gap: 14px; padding: 18px; border-top: 1px solid rgba(118,213,205,.16); background: #e9efea; color: #07171a; }
.stay-summary p { color: #5a6b67; }
.stay-summary h3 { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 400; }
.stay-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.stay-meta article { padding: 11px; border: 1px solid rgba(7,23,26,.1); border-radius: var(--radius); background: rgba(255,255,255,.54); }
.stay-meta span { display: block; color: #6f7d79; font-size: .58rem; text-transform: uppercase; }
.stay-meta strong { display: block; margin-top: 5px; font-size: .85rem; }
.stay-bookings { display: grid; gap: 8px; }
.stay-bookings article { display: grid; gap: 3px; padding: 10px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.56); }
.stay-bookings small { color: #64736f; }
.stay-total { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(7,23,26,.12); }
.stay-total strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }
.itinerary-days { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 18px; }
.itinerary-days button { min-width: 76px; min-height: 54px; display: grid; gap: 3px; place-content: center; border: 1px solid rgba(118,213,205,.14); border-radius: var(--radius); color: rgba(245,239,230,.56); background: rgba(255,255,255,.04); }
.itinerary-days button.is-active { color: #07171a; background: var(--accent); }
.itinerary-days small { font-size: .55rem; }
.itinerary-list { display: grid; gap: 11px; }
.itinerary-item { display: grid; grid-template-columns: 58px 1fr; gap: 13px; padding: 14px; border: 1px solid rgba(118,213,205,.13); border-radius: var(--radius); background: rgba(255,255,255,.035); }
.itinerary-item > span { color: var(--accent); font-family: Georgia, "Times New Roman", serif; }
.itinerary-item h4 { margin: 0 0 5px; font-size: .9rem; }
.itinerary-item p { margin-bottom: 0; color: rgba(245,239,230,.46); font-size: .68rem; }
.experience-grid { display: grid; gap: 10px; }
.experience-card { overflow: hidden; border: 1px solid rgba(118,213,205,.14); border-radius: var(--radius); background: rgba(255,255,255,.04); }
.experience-card img { width: 100%; height: 180px; object-fit: cover; }
.experience-card > div { padding: 13px; }
.experience-card small { color: var(--accent); font-size: .58rem; }
.experience-card h4 { margin: 8px 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 400; }
.experience-card p { margin-bottom: 12px; color: rgba(245,239,230,.48); font-size: .68rem; }
.experience-card footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.experience-card button { min-height: 36px; padding: 0 10px; border-radius: var(--radius); color: #07171a; background: var(--accent); font-size: .65rem; font-weight: 900; }
.experience-card button.is-added { color: var(--text); background: rgba(255,255,255,.1); }
.concierge-layout { display: grid; gap: 14px; }
.concierge-form { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(118,213,205,.14); border-radius: var(--radius); background: rgba(255,255,255,.04); }
.concierge-form label { display: grid; gap: 5px; color: rgba(245,239,230,.58); font-size: .68rem; font-weight: 850; }
.concierge-form select, .concierge-form textarea { width: 100%; padding: 10px; border: 1px solid rgba(118,213,205,.16); border-radius: var(--radius); color: var(--text); background: #112b2f; }
.concierge-form textarea { min-height: 100px; resize: vertical; }
.request-list { display: grid; gap: 8px; }
.request-list article { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 11px; border-left: 3px solid var(--accent-2); background: rgba(255,255,255,.04); }
.request-list article span { grid-column: 1 / -1; color: rgba(245,239,230,.45); font-size: .66rem; }
.request-list article em { color: var(--accent-2); font-size: .58rem; font-style: normal; font-weight: 900; }

@media (min-width: 680px) {
  .automation-workspace { grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); }
  .automation-sidebar { border-right: 1px solid rgba(240,201,111,.14); border-bottom: 0; }
  .event-console { grid-column: 1 / -1; }
  .guest-app-top { grid-template-columns: minmax(180px,.6fr) 1fr auto; align-items: center; }
  .guest-quick-grid, .experience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 960px) {
  .automation-workspace { grid-template-columns: minmax(250px,.58fr) minmax(450px,1fr) minmax(230px,.52fr); }
  .event-console { grid-column: auto; border-top: 0; border-left: 1px solid rgba(240,201,111,.14); }
  .automation-hero-body { min-height: 560px; }
  .automation-core { width: 280px; height: 280px; }.automation-core::before { inset: 38px; }.automation-core::after { inset: 82px; }.automation-core > span { inset: 104px; }
  .hero-flow-list { width: 390px; }
  .guest-app-layout { grid-template-columns: minmax(0,1fr) minmax(320px,.48fr); }
  .stay-summary { border-top: 0; border-left: 1px solid rgba(118,213,205,.16); }
  .experience-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .concierge-layout { grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); }
}

@media (max-width: 520px) {
  .automation-hero-body { min-height: 440px; }
  .automation-core { left: -35px; opacity: .55; }
  .hero-flow-list { width: 96%; }
  .automation-toolbar .button { width: 100%; }
  .workflow-detail-head .workflow-actions { width: 100%; }
  .workflow-detail-head .workflow-actions .button, .workflow-toggle { flex: 1; }
  .guest-hero-card h2 { font-size: 2.6rem; }
  .guest-app-top { grid-template-columns: 1fr auto; }
  .guest-tabs { grid-column: 1 / -1; grid-row: 2; }
  .guest-badge { grid-column: 2; grid-row: 1; }
  .experience-card img { height: 220px; }
}