:root{
  /* ChatGPT-like dark */
  --pageBg:#0f1115;
  --pageBg2:#11151c;
  --surface:#141820;
  --surface2:#171c25;
  --border:rgba(255,255,255,.10);

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);

  /* Accent (keep for writing/buttons only) */
  --accent1:#B08D2E;  /* darker gold */
  --accent2:#E6D4A8;  /* champagne */
  --accentSolid:#8A6A14;

  --shadow:0 18px 50px rgba(0,0,0,.35);
  --r:18px;
  --r2:26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--pageBg);
  line-height:1.45;
}
a{color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* Header floating on hero */
.header{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  background:rgba(15,17,21,.42);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-row{
  height:76px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  width:34px;height:34px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:600;font-size:15px;color:#fff}
.brand-sub{font-size:12px;color:rgba(255,255,255,.78);margin-top:3px}

.nav{display:flex;align-items:center;gap:22px;font-size:14px}
.nav a{
  text-decoration:none;
  color:rgba(255,255,255,.90);
  padding:8px 10px;border-radius:999px;
}
.nav a:hover{background:rgba(255,255,255,.10)}
.nav-cta{
  border:1px solid rgba(255,255,255,.22);
  padding:9px 14px;
  background:rgba(255,255,255,.08);
}

/* HERO full screen slideshow */
.hero{
  position:relative;
  min-height:100vh;
  padding-top:76px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.slideshow{
  position:absolute;inset:0;
  z-index:0;
  background:#0b1220;
}
.slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 900ms ease, transform 1400ms ease;
  filter:saturate(1.02) contrast(1.03);
}
.slide.is-active{opacity:1;transform:scale(1.00)}
.hero-overlay{
  position:absolute;inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(2,6,23,.72) 0%, rgba(2,6,23,.48) 40%, rgba(2,6,23,.22) 70%, rgba(2,6,23,.10) 100%),
    linear-gradient(180deg, rgba(2,6,23,.20) 0%, rgba(2,6,23,.08) 45%, rgba(2,6,23,.82) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 0 42px;
}
.hero-kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,235,180,.92);
}
.hero-title{
  margin:0 0 18px;
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.05;
  letter-spacing:-.02em;
  max-width:22ch;

  /* Keep gradient only on the writing */
  background:linear-gradient(90deg, #ffffff 0%, #F3E9D2 25%, #D9C08C 55%, #B08D2E 78%, #ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}
.btn.primary{
  color:#1b1406;
  background:linear-gradient(135deg, #F3E9D2 0%, #B08D2E 55%, #8A6A14 100%);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);
}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.full{width:100%}

.hero-bottom{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.dots{display:flex;gap:8px;flex-wrap:wrap}
.dot{
  width:26px;height:4px;border-radius:999px;border:0;
  background:rgba(255,255,255,.22);
  cursor:pointer;padding:0;
}
.dot.is-active{background:rgba(255,255,255,.82)}
.hint{font-size:12px;color:rgba(255,255,255,.70);letter-spacing:.10em;text-transform:uppercase}
.fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;padding:24px;text-align:center;
}

/* Sections now dark */
.section{padding:72px 0;background:var(--pageBg)}
.section.alt{
  background:var(--pageBg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.section-head h2{margin:0;font-size:26px;letter-spacing:-.01em;color:var(--text)}
.section-head p{margin:0;color:var(--muted);max-width:72ch}

/* Products placeholder: grey boxes */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.product-card{
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ph{
  height:160px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.p-body{padding:14px}
.p-title{font-weight:600;color:var(--text)}
.p-sub{margin-top:6px;color:var(--muted);font-size:13.5px}

/* Systems */
.systems{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.muted{color:var(--muted)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pill{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
}
.panel{
  border-radius:var(--r2);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:18px;
}
.panel h3{margin:0 0 10px;color:var(--text)}
.panel p{margin:0 0 14px;color:var(--muted)}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.contact-lines{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.label{display:inline-block;min-width:84px;color:rgba(255,255,255,.58)}
.contact-lines a{color:rgba(255,255,255,.90);text-decoration:none}
.contact-lines a:hover{text-decoration:underline}

.form{
  border-radius:var(--r2);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:18px;
}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
label{font-size:12px;color:rgba(255,255,255,.62)}
input,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  padding:12px 12px;
  font:inherit;
  background:rgba(0,0,0,.20);
  color:rgba(255,255,255,.92);
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.45)}
input:focus,textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.fine{margin-top:10px;color:rgba(255,255,255,.50);font-size:12px}

/* Footer (keep dark) */
.footer{
  border-top:1px solid var(--border);
  background:#0b0d12;
  color:var(--text);
}
.footer-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  padding:22px 0;
}
.foot-brand{font-weight:600}
.foot-sub{color:rgba(255,255,255,.62);font-size:12px;margin-top:2px}
.foot-right{color:rgba(255,255,255,.62);font-size:12.5px}

#contact.section{padding-bottom:52px}

/* Responsive */
@media (max-width: 980px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .systems,.contact-grid{grid-template-columns:1fr}
  .hero-title{max-width:28ch}
}
@media (max-width: 680px){
  .nav{display:none}
  .product-grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .container{padding:0 18px}
}

/* BEGIN PRODUCT OVERRIDES */
#productFilters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0 18px;
}
.filter{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  border-radius:999px;
  padding:9px 12px;
  font-size:12.5px;
  cursor:pointer;
}
.filter:hover{background:rgba(255,255,255,.09)}
.filter.is-active{
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.16);
}
.product-media{
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:16px;
}
/* END PRODUCT OVERRIDES */

/* BEGIN PRODUCTS TABS */
.product-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 18px;
}
.tab{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  cursor:pointer;
}
.tab:hover{background:rgba(255,255,255,.09)}
.tab.is-active{
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.16);
}

.products-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:18px;
  align-items:start;
}

.product-detail .pd-kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.product-detail .pd-title{margin:10px 0 6px}
.product-detail .pd-sub{color:rgba(255,255,255,.70);font-size:13px}
.product-detail .pd-blurb{color:rgba(255,255,255,.80);margin:12px 0 12px}
.product-detail .pd-list{margin:0 0 14px;padding-left:18px;color:rgba(255,255,255,.78)}
.product-detail .pd-note{color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.5}

.product-grid--thumbs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.product-thumb{
  text-align:left;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  overflow:hidden;
  cursor:pointer;
  padding:0;
}
.product-thumb:hover{background:rgba(255,255,255,.07)}
.product-thumb.is-active{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
}

.thumb-media{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.thumb-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:14px;
}
.thumb-text{padding:12px 12px 14px}
.thumb-title{font-weight:600;color:rgba(255,255,255,.92)}
.thumb-sub{margin-top:6px;color:rgba(255,255,255,.66);font-size:13px}

@media (max-width: 980px){
  .products-layout{grid-template-columns:1fr}
  .product-grid--thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 620px){
  .product-grid--thumbs{grid-template-columns:1fr}
}
/* END PRODUCTS TABS */

/* BEGIN JPG CUTOUT (visual transparency on dark background) */
.product-media, .thumb-media { isolation:isolate; }
.product-media img[src$=".jpg"], .product-media img[src$=".jpeg"],
.thumb-media img[src$=".jpg"], .thumb-media img[src$=".jpeg"]{
  mix-blend-mode:multiply;
  filter: brightness(1.18) contrast(1.06);
}
/* END JPG CUTOUT */

/* BEGIN ROOM VIDEOS */
.room-section{ padding:0; background:transparent; }
.room-wrap{ position:relative; height:100vh; width:100%; overflow:hidden; }
.room-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.room-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.55) 0%, rgba(2,6,23,.18) 55%, rgba(2,6,23,.08) 100%),
    linear-gradient(180deg, rgba(2,6,23,.10) 0%, rgba(2,6,23,.35) 70%, rgba(2,6,23,.65) 100%);
}
.gradient-text{
  background:linear-gradient(90deg, #ffffff 0%, #F3E9D2 25%, #D9C08C 55%, #B08D2E 78%, #ffffff 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.room-label{
  position:absolute; left:28px; bottom:28px; z-index:2;
  font-size:clamp(28px, 3.6vw, 54px);
  line-height:1.05; letter-spacing:-.02em;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.55));
  user-select:none;
}
/* END ROOM VIDEOS */

/* BEGIN BRAND LOGOS */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.brand-logos{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-logo{
  height:22px;
  width:auto;
  display:block;
  opacity:.95;
}
.brand-sep{
  width:1px;
  height:22px;
  background:rgba(255,255,255,.22);
}

/* Hide legacy elements if still present */
.brand-mark, .brand-text{ display:none !important; }

/* If your logos are black-on-transparent and you want them white on dark header, uncomment:
.brand-logo { filter: brightness(0) invert(1); opacity: 1; }
*/
/* END BRAND LOGOS */

/* BEGIN TECH PILLS */
.tech-pills{ margin-top:14px; }
.tech-panel{ margin-top:14px; }

.tech-panel .tech-title{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-.01em;
}
.tech-panel .tech-desc{
  margin:0 0 12px;
  color:rgba(255,255,255,.78);
}
.tech-panel .tech-list{
  margin:0;
  padding-left:18px;
  color:rgba(255,255,255,.72);
}
.pill{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  cursor:pointer;
}
.pill:hover{ background:rgba(255,255,255,.09) }
.pill.is-active{
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.18);
}
/* END TECH PILLS */

/* BEGIN BRAND LOGOS FIX */
.brand-logos{ display:flex; align-items:center; gap:12px; }
.brand-logos picture{ display:block; }
.brand-logo{
  height:22px;
  width:auto;
  display:block;
  opacity:.98;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
/* If your logos are dark and still hard to see, uncomment the next line:
.brand-logo{ filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
*/
/* END BRAND LOGOS FIX */

/* BEGIN HEADER LOGO LOCKUP */
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-logos{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:22px; width:auto; display:block; opacity:.98; }
.brand-sep{ width:1px; height:22px; background:rgba(255,255,255,.22); }
.brand-fallback{ color:rgba(255,255,255,.90); font-weight:600; letter-spacing:-.01em; }
/* END HEADER LOGO LOCKUP */

/* BEGIN LOGO VISIBILITY */
.brand-logo{
  height:22px;
  width:auto;
  object-fit:contain;
  opacity:.95;
  filter: brightness(0) invert(1);
}
.brand-logo.nova{ height:30px; } /* tweak if one still looks taller */
.brand-logo.orvibo{ height:33px; }
/* END LOGO VISIBILITY */

/* BEGIN BUTTON EDGE FIX */
/* Remove the visible white outline/border on primary buttons */
.btn{
  border: 1px solid transparent !important;
  background-clip: padding-box;
  outline: none;
}
.btn:focus{ outline:none; }
.btn.primary{
  border-color: transparent !important;
}
/* Keep ghost buttons bordered, but not bright white */
.btn.ghost{
  border-color: rgba(255,255,255,.14) !important;
}
/* END BUTTON EDGE FIX */

/* BEGIN ROOM CONTROLS */
.room-controls{
  position:absolute;
  left:50%;
  bottom:38px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:3;
}
.room-control{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  cursor:pointer;
  line-height:1;
}
.room-control:hover{ background:rgba(255,255,255,.09) }
.room-control.is-active{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.95);
}
/* END ROOM CONTROLS */

/* BEGIN PRIMARY BUTTON EDGE KILL */
.btn.primary,
a.btn.primary,
button.btn.primary{
  border: 0 !important;
  outline: 0 !important;

  /* kills the 1px “ring” effect (usually inset shadow) */
  box-shadow: none !important;

  /* prevents sub-pixel edge artifacts on rounded gradients */
  background-clip: border-box !important;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}

.btn.primary::before,
.btn.primary::after{
  display: none !important;
  content: none !important;
}
/* END PRIMARY BUTTON EDGE KILL */

/* BEGIN HERO READY */
#heroTag,
#heroLine{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

body.hero-ready #heroTag,
body.hero-ready #heroLine{
  opacity: 1;
  transform: none;
}
/* END HERO READY */

/* BEGIN MOBILE LAYOUT */
@media (max-width: 768px){

  body{
    font-size: 15px;
  }

  header.shell{
    padding-inline: 16px;
  }

  .nav{
    gap: 12px;
    font-size: 13px;
  }

  .hero{
    padding: 64px 16px 32px;
    min-height: 100vh;
  }

  .hero-inner{
    flex-direction: column;
    gap: 20px;
  }

  #heroTag{
    font-size: 12px;
    letter-spacing: .16em;
  }

  #heroLine{
    font-size: clamp(24px, 7vw, 32px);
  }

  .hero-sub{
    max-width: 100%;
    font-size: 14px;
  }

  .hero-actions{
    flex-wrap: wrap;
    gap: 10px;
  }

  .product-grid{
    grid-template-columns: 1fr !important;
  }

  .room-label{
    left: 20px;
    bottom: 24px;
    font-size: clamp(22px, 6vw, 30px);
  }

  .room-controls{
    bottom: 20px;
    padding: 6px 10px;
    gap: 8px;
  }

  .room-control{
    padding: 8px 10px;
    font-size: 11px;
  }

  .contact{
    padding: 40px 16px 48px;
  }

  .contact-inner{
    flex-direction: column;
    gap: 24px;
  }

  .contact-form{
    width: 100%;
  }
}
/* END MOBILE LAYOUT */