/* Shared soft gradient and continuous glass navigation. */
body { background: #091326; }
body::before {
  inset: -12%; background:
    radial-gradient(ellipse at 78% 16%, #42669c75, transparent 48%),
    radial-gradient(ellipse at 12% 48%, #243d6d80, transparent 48%),
    radial-gradient(ellipse at 65% 90%, #52647c40, transparent 48%),
    linear-gradient(145deg, #090f1d, #142640 56%, #0b1428);
  animation: ambient-light 24s ease-in-out infinite alternate;
}
@keyframes ambient-light { to { transform: translate3d(-2%,2%,0) scale(1.04); } }
/* Convex lens rebuilt from archisvaze/liquid-glass; text remains unfiltered. */
.nav {
  isolation:isolate; overflow:hidden; background:transparent;
  border:1px solid #d3e6fa29;
  box-shadow:0 6px 24px #0000002e;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.nav-lens {
  position:absolute; inset:0; z-index:-2; pointer-events:none; border-radius:inherit;
  background:transparent;
  backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
}
.nav.has-convex-lens .nav-lens {
  backdrop-filter:url("#goark-convex-lens");
  -webkit-backdrop-filter:url("#goark-convex-lens");
}
.nav::before {
  content:''; pointer-events:none; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:#eaf4ff03;
  box-shadow:inset 0 0 14px -9px #dbeaffb3,inset 0 1px 0 #ffffff26,inset 0 -1px 0 #bedfff1a;
}
.nav::after {
  content:''; pointer-events:none; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  opacity:0; transition:opacity .3s;
  background:radial-gradient(ellipse 260px 95px at var(--pointer-x,50%) var(--pointer-y,50%),#f0faff12,transparent 75%);
}
@media(hover:hover) and (pointer:fine) { .nav:hover::after { opacity:1; } }
.nav:focus-within { border-color:#d3e6fa88; }
.nav-filter-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.brand { letter-spacing: -1.8px; font-weight: 650; }
.nav nav { gap: 26px; }
.nav nav a { padding-block: 13px; border: 0; transition: color .2s,background .2s; }
.nav nav a:not(.nav-account):hover { border: 0; color: #fff; }
.nav .nav-account {
  background: transparent; border: 0; box-shadow: none; text-shadow: none; gap: 14px; border-radius: 9px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav-account::before,.nav-account::after { display: none; }
.nav .nav-account:hover { transform: none; background: #c9e2ff14; box-shadow: none; }
.hero { padding-block: 95px 85px; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(60px,6.2vw,90px); }
.hero-description { max-width: 440px; }
.hero-visual {
  min-height: 490px; background: radial-gradient(ellipse at 70% 20%,#9bbfff19,transparent 65%),#b5d4ff04;
  box-shadow: 0 30px 65px #0002,inset 0 1px 0 #e2eeff33; border-color: #c6ddff29;
}
.architecture { opacity: .72; }
.drawing-caption { font-size: 14px; min-height: 72px; }
.principles > a { font-size: 10px; letter-spacing: .1em; padding-block: 14px; color: #bdcde4; }
.product-section { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; padding-block: 110px; }
.product-story h2 { font-size: clamp(38px,3.8vw,54px); margin-block: 28px 22px; }
.product-story > p:not(.eyebrow) { font-size: 16px; line-height: 1.9; max-width: 450px; color: var(--muted); }
.product-story .status-pill { font-size: 10px; padding: 7px 12px; }
.feature-list { list-style: none; padding: 0; margin-block: 28px 34px; }
.feature-list li { padding-block: 16px; border-top: 1px solid var(--line); }
.feature-list strong { display: block; font-size: 14px; font-weight: 550; margin-bottom: 7px; }
.feature-list span { display: block; color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 430px; }
.vaults-section { background: #a5c7ff04; border-block: 1px solid #bcd5ff12; }
.vaults-section .product-story { order: 2; }
.vaults-section .demo { order: 1; }
.demo { padding: 25px; border: 1px solid #b6d2ff33; border-radius: 28px; background: #0c192dd9; box-shadow: 0 24px 65px #0003,inset 0 1px 0 #d8eaff1f; min-width: 0; }
.demo-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: .1em; color: #adc3e2; margin-bottom: 24px; }
.demo-label { padding: 6px 9px; border-radius: 8px; background: #a2c5ff0d; font-size: 9px; letter-spacing: 0; color: #cad9ee; }
.demo-toolbar { display: flex; flex-wrap: wrap; gap: 5px; }
.demo-toolbar button { min-height: 42px; padding: 10px 15px; font-size: 12px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: #b8cbe5; transition: background .2s; }
.demo-toolbar button:hover { background: #aacfff15; }
.demo-toolbar button[aria-pressed=true] { color: #f4f8ff; background: #abcfff20; border-color: #a9ccff33; box-shadow: inset 0 1px 0 #dceaff26; }
.metric-plan { display: block; width: 100%; height: auto; margin-block: 12px; }
.dimensions { opacity: 0; transition: opacity .6s ease; }
.metric-demo.has-dimensions .dimensions { opacity: 1; }
.demo-feedback { font-size: 12px; line-height: 1.7; color: #d5e6ff; margin: 12px 0; }
.demo-disclaimer { color: #a9bad4; font-size: 10px; line-height: 1.8; border-top: 1px solid #bdd6ff1a; padding-top: 15px; margin: 15px 0 0; }
.search-label { display: block; font-size: 12px; margin-bottom: 10px; }
.demo-search { display: flex; gap: 10px; align-items: center; border: 1px solid #a6c7ff40; background: #07102066; border-radius: 13px; padding-inline: 14px; margin-bottom: 15px; }
.demo-search > span { font-size: 24px; color: #b9d4fa; }
.demo-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: #eef5ff; padding-block: 14px; font: inherit; font-size: 12px; }
.demo-search input::placeholder { color: #96adcd; }
.categories { margin-bottom: 18px; }.categories button { padding-inline: 12px; font-size: 11px; }
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.family-card { min-width: 0; border: 1px solid #a5c6ff26; border-radius: 16px; padding: 14px; text-align: left; background: #b2d2ff06; color: #dfeaff; transition: transform .2s,background .2s,border-color .2s; }
.family-card:hover { transform: translateY(-3px); background: #b2d2ff0f; border-color: #a5c6ff66; }
.family-card[aria-pressed=true] { border-color: #a5c6ffaa; background: #9cc4ff19; }
.family-card strong { display: block; font-size: 12px; font-weight: 550; line-height: 1.6; }
.family-card > span:last-child { display: block; font-size: 10px; color: #a8bddb; margin-top: 5px; }
.family-art { display: grid; place-items: center; height: 90px; margin-bottom: 14px; background: radial-gradient(ellipse,#6085bd26,transparent 70%); color: #a5c6f5; }
.family-art i { display: block; position: relative; border: 2px solid currentColor; }
.chair i { width: 32px; height: 36px; border-radius: 10px 10px 4px 4px; box-shadow: 0 10px 0 -3px #708fb9; }
.chair i::after { content: ''; position: absolute; top: 42px; left: 12px; width: 2px; height: 12px; background: currentColor; box-shadow: -10px 8px 0 currentColor,10px 8px 0 currentColor; }
.table i { width: 70px; height: 26px; border-radius: 50%; transform: skewY(-8deg); }
.table i::after { content: ''; position: absolute; top: 22px; left: 12px; height: 22px; width: 2px; background: currentColor; box-shadow: 40px 0 0 currentColor; }
.door i { width: 36px; height: 59px; transform: skewY(-8deg); border-radius: 2px; }
.door i::after { content: ''; position: absolute; right: 5px; top: 29px; width: 5px; height: 2px; background: currentColor; }
.window i { width: 65px; height: 48px; box-shadow: inset 0 0 0 4px #8faed133; }
.window i::after { content: ''; position: absolute; top: 0; bottom: 0; left: 29px; width: 2px; background: currentColor; }
.family-detail { padding: 15px; border-radius: 12px; background: #a1c9ff10; border: 1px solid #a1c9ff26; }
.family-detail strong { font-size: 13px; }.family-detail p { margin: 8px 0 0; font-size: 12px; color: #bbd0ed; line-height: 1.8; }
.workflow { background: #0a142740; }.workflow-inner { padding-block: 90px; }
.footer nav { flex-wrap: wrap; }.closing { padding-block: 100px; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease,transform .7s ease; }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media(max-width:1050px) {
  .nav nav { gap: 18px; }.brand { font-size: 30px; }
  .product-section { gap: 35px; }.demo { padding: 20px; }
  .hero { gap: 30px; }.hero h1 { font-size: 68px; }
}
@media(max-width:760px) {
  html { scroll-padding-top: 140px; }
  .nav { height: auto; min-height: 98px; border-radius: 25px; flex-wrap: wrap; gap: 8px; padding: 13px 17px; }
  .nav .brand { font-size: 27px; width: 100%; gap: 7px; }
  .nav nav { width: 100%; gap: 12px; justify-content: space-between; font-size: 10px; }
  .nav nav > a:first-child { display: inline-flex; }
  .nav nav a { padding-block: 10px; }
  .nav .nav-account { padding: 9px 11px; gap: 8px; }
  .hero { padding-block: 50px; gap: 35px; }.hero h1 { font-size: clamp(52px,12vw,74px); }
  .hero-visual { min-height: 390px; }.drawing-caption { font-size: 12px; }
  .principles { gap: 16px; }.principles > a { font-size: 8px; }
  .product-section { grid-template-columns: 1fr; padding-block: 65px; gap: 35px; }
  .vaults-section .product-story,.vaults-section .demo { order: initial; }
  .product-story h2 { font-size: 40px; }.product-story > p:not(.eyebrow) { font-size: 14px; }
  .demo { padding: 18px; border-radius: 22px; }.family-card { padding: 12px; }
  .categories { gap: 2px; }.categories button { padding-inline: 10px; }
  .footer nav { margin-left: 0; gap: 20px; }.closing h2 { font-size: 39px; }
}
@media(max-width:380px) { .nav nav { gap: 6px; font-size: 9px; }.nav .brand img { display: block; }.nav .nav-account { padding-inline: 9px; } }
@media(prefers-reduced-motion:reduce) {
  body::before { animation: none; transform: none; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .dimensions,.family-card,.nav::after { transition: none; }
  .family-card:hover { transform: none; }
}
@media(prefers-reduced-transparency:reduce) { .nav { background:#182943; }.nav-lens,.nav::before,.nav::after { display:none; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .nav { background:#182943; }.nav-lens { display:none; } }
@media(forced-colors:active) {
  .nav { background: Canvas; }.nav-lens,.nav::before,.nav::after { display: none; }
  .demo,.family-card,.demo-search,.family-detail,.demo-toolbar button,.demo-toolbar button[aria-pressed=true] { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  .family-card[aria-pressed=true] { outline: 2px solid Highlight; }
}