/* Liquid glass + catalogue. .lg gets a per-element refraction filter from liquid.js on Chromium. */
.lg {
  position: relative;
  background: linear-gradient(180deg, rgba(160, 200, 255, .10), rgba(120, 160, 220, .03)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .35),
    inset 0 1px 1px rgba(255, 255, 255, .55),
    inset 0 -1px 1px rgba(255, 255, 255, .12),
    inset 1.5px 0 2px rgba(255, 140, 210, .10),
    inset -1.5px 0 2px rgba(120, 220, 255, .14),
    inset 0 0 24px rgba(255, 255, 255, .05);
}
.lg::before { /* specular rim, brighter top-left */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.08) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lg.lg-live { background: linear-gradient(180deg, rgba(160, 200, 255, .06), rgba(120, 160, 220, .02)) !important; }
@media (prefers-reduced-transparency: reduce) {
  .lg, .lg.lg-live { background: rgba(14, 20, 30, .92) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Hero prompt */
.lg-input { border-radius: 28px !important; }
.lg-input textarea { color: #fff !important; font-size: 15px !important; }
.lg-input textarea::placeholder { color: rgba(255, 255, 255, .62) !important; }
.lg-input button { color: rgba(255, 255, 255, .85) !important; transition: background .15s; }
.lg-input button span { color: rgba(255, 255, 255, .85); }
.lg-input button svg { fill: rgba(255, 255, 255, .85) !important; }
.lg-input button:hover { background: rgba(255, 255, 255, .10) !important; }
.lg-input button[style*="width:40px"] { background: rgba(255, 255, 255, .92) !important; }
.lg-input button[style*="width:40px"] svg { fill: #0b1220 !important; }

/* Nav turns to glass once the page scrolls */
.framer-hd78zt { overflow: visible !important; }
.framer-hd78zt::before { content: ""; position: absolute; inset: -16px 0 0 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: rgba(4, 10, 20, .45); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.scrolled .framer-hd78zt::before { opacity: 1; }

/* Sections sit flush: no template gap between hero, catalogue and footer */
.framer-72rtr7 { gap: 0 !important; }

/* Catalogue */
.cat {
  position: relative; overflow: hidden; padding: 120px 24px 140px; width: 100%; box-sizing: border-box; align-self: stretch;
  font-family: "Geist", "Geist Placeholder", sans-serif; color: #fff;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(70, 150, 255, .35), transparent 70%),
    radial-gradient(40% 25% at 10% 45%, rgba(60, 200, 255, .22), transparent 70%),
    radial-gradient(45% 30% at 90% 80%, rgba(90, 120, 255, .25), transparent 70%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 18%, rgba(0,6,16,.45) 60%, rgba(0,0,0,.85) 88%, #000 100%),
    url(hero.jpg) center / cover no-repeat, #000;
}
.cat-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.cat-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.cat-eyebrow { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
  font: 500 14px/1 "Geist Mono", monospace; letter-spacing: -.02em; }
.cat h2 { margin: 0; font: 400 60px/1 "Instrument Serif", serif; letter-spacing: -.04em; }
.cat h2 em { font-style: italic; }
.cat-sub { margin: 18px 0 0; font-size: 17px; line-height: 1.45; letter-spacing: -.02em; color: rgba(255,255,255,.72); }

.cat-filters { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 40px; padding: 5px; border-radius: 999px; overflow-x: auto; }
.cat-filters button { all: unset; cursor: pointer; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.65); white-space: nowrap; transition: background .2s, color .2s; }
.cat-filters button:hover { color: #fff; }
.cat-filters button.on { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cat-card.lg, .cat-card.lg.lg-live { background: linear-gradient(180deg, rgba(20, 34, 56, .42), rgba(6, 12, 24, .55)) !important; }
.cat-card { border-radius: 28px; padding: 22px; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.cat-card:hover { transform: translateY(-4px); }
.cat-card[hidden] { display: none; }
.cat-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.cat-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(255,255,255,.10); font-size: 12px; font-weight: 500; }
.cat-units { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.65); }
.cat-units i { width: 6px; height: 6px; border-radius: 50%; background: #5ee8a0; box-shadow: 0 0 8px #5ee8a0; }
.cat-vendor { margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }
.cat-card h3 { margin: 4px 0 20px; font-size: 26px; font-weight: 600; letter-spacing: -.04em; }
.cat-card dl { margin: 0 0 24px; display: grid; gap: 10px; }
.cat-card dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cat-card dt { color: rgba(255,255,255,.55); }
.cat-card dd { margin: 0; text-align: right; }
.cat-card footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.cat-price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.cat-price b { font-size: 32px; font-weight: 500; letter-spacing: -.05em; }
.cat-price span { font-size: 12px; color: rgba(255,255,255,.6); }
.cat-reserve { all: unset; cursor: pointer; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background .2s; }
.cat-reserve.lg { border-radius: 999px; }
.cat-reserve:hover { background: rgba(255,255,255,.2) !important; }

@media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cat { padding: 80px 16px 100px; }
  .cat h2 { font-size: 44px; }
  .cat-sub { font-size: 15px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-filters { width: auto; }
}

/* Brand mark in the nav */
.framer-rxc7qd { background-image: url(logo.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; image-rendering: auto !important; }

/* Page-wide film grain, 15% */
.gpu-grain { position: fixed; inset: -50%; z-index: 2147483000; pointer-events: none; opacity: .15;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { .gpu-grain { animation: none; } }

/* Advisor */
.adv { width: 100%; max-width: 750px; margin: -24px auto 0; padding: 0 0; box-sizing: border-box; position: relative; z-index: 5;
  font-family: "Geist", "Geist Placeholder", sans-serif; color: #fff; animation: gpuIn .6s cubic-bezier(.2,.7,.2,1) both; }
.adv[hidden] { display: none; }
.adv-panel { border-radius: 28px; padding: 24px; }
.adv-panel.lg, .adv-panel.lg.lg-live { background: linear-gradient(180deg, rgba(20, 34, 56, .45), rgba(6, 12, 24, .6)) !important; }
.adv-head { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 14px; }
.adv-head img { display: block; width: 22px; height: 22px; object-fit: contain; }
.adv-status { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.6); display: inline-flex; align-items: center; gap: 8px; }
.adv-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5ee8a0; box-shadow: 0 0 8px #5ee8a0; }
.adv.busy .adv-status::before { background: #7fb6ff; box-shadow: 0 0 8px #7fb6ff; animation: pulse 1s ease-in-out infinite; }
.adv.err .adv-status::before { background: #ff7a7a; box-shadow: 0 0 8px #ff7a7a; }
@keyframes pulse { 50% { opacity: .3; } }
.adv-reply { margin: 0; font-size: 22px; line-height: 1.4; letter-spacing: -.03em; font-weight: 400; min-height: 1.4em; }
.adv.busy .adv-reply { color: rgba(255,255,255,.5); }
.adv-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.adv-picks:empty { display: none; }
.adv-pick { border-radius: 20px; padding: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.adv-pick .role { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.adv-pick .nm { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.adv-pick .sp { font-size: 12px; color: rgba(255,255,255,.6); }
.adv-pick .why { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.82); margin: 4px 0; }
.adv-pick .row { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.adv-pick .row b { font-size: 16px; font-weight: 500; }
.adv-pick a { color: #fff; font-size: 12px; text-decoration: none; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.12); }
.adv-pick a:hover { background: rgba(255,255,255,.22); }
.adv-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.7); }
.adv-foot:empty, .adv-foot span:empty { display: none; }
.adv-total b { color: #fff; font-weight: 500; }
.adv-q { font-style: italic; }
.cat-card.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%,100% { box-shadow: 0 18px 50px rgba(0,0,0,.35); } 30% { box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 40px rgba(120,180,255,.6); } }
@media (max-width: 640px) { .adv-reply { font-size: 18px; } .adv-panel { padding: 18px; } }

/* Footer */
.ft { position: relative; width: 100%; box-sizing: border-box; align-self: stretch; overflow: hidden; padding: 80px 24px 32px;
  font-family: "Geist", "Geist Placeholder", sans-serif; color: #fff;
  background: radial-gradient(70% 60% at 50% 120%, rgba(70, 140, 255, .28), transparent 70%), #000;
  border-top: 1px solid rgba(255, 255, 255, .08); }
.ft-inner { max-width: 1180px; margin: 0 auto; }
.ft-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.ft-brand { max-width: 380px; }
.ft-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 20px; font-weight: 600; letter-spacing: .5px; }
.ft-logo img { display: block; width: 28px; height: 28px; object-fit: contain; }
.ft-brand p { margin: 16px 0 0; font-size: 15px; line-height: 1.5; letter-spacing: -.02em; color: rgba(255, 255, 255, .62); }
.ft-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ft-links a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
.ft-links a:hover { color: #fff; }
.ft-x { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; color: #fff !important; }
.ft-x:hover { background: rgba(255, 255, 255, .16) !important; }
.ft-mark { margin: 72px 0 28px; text-align: center; white-space: nowrap; line-height: .9;
  font: 400 clamp(56px, 13.2vw, 190px) / .9 "Instrument Serif", serif; letter-spacing: -.045em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .04));
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.ft-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: rgba(255, 255, 255, .5); }
@media (max-width: 640px) {
  .ft { padding: 64px 16px 28px; }
  .ft-top { flex-direction: column; gap: 28px; }
  .ft-links { gap: 20px; }
  .ft-mark { margin: 48px 0 20px; }
  .ft-bottom { flex-direction: column; }
}

/* App links */
a.gpu-cta { text-decoration: none; color: inherit; display: block; border-radius: 99px; }
a.gpu-cta:focus-visible, a.gpu-cta-m:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gpu-cta-m { margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px;
  background: rgb(49, 49, 53); color: #fafafa; text-decoration: none; font: 600 14px "Geist", sans-serif; }
.adv-pick .acts { display: inline-flex; gap: 6px; }
.adv-pick a.go { background: #fff; color: #0b1220; }
.adv-pick a.go:hover { background: #e4e4e7; }
a.cat-reserve { color: #fff; text-decoration: none; }