:root{
  --ink:#171717;
  --navy:#17243b;
  --cream:#f8f5ef;
  --paper:#fffdf9;
  --taupe:#b69b7a;
  --gold:#c7a25d;
  --line:#e7ded1;
  --muted:#6f6b66;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"DM Sans",sans-serif;
}
a{color:inherit;text-decoration:none}
.announcement{
  text-align:center;
  font-size:11px;
  letter-spacing:.32em;
  padding:10px 20px;
  background:#eee8df;
}
.site-header{
  position:sticky; top:0; z-index:20;
  height:86px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6vw;
  background:rgba(255,253,249,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.brand img{display:block;width:190px;height:auto}
.nav{display:flex;gap:34px;font-size:14px}
.nav a{position:relative;padding:10px 0}
.nav a:after{content:"";position:absolute;left:0;bottom:4px;width:0;height:1px;background:var(--ink);transition:.25s}
.nav a:hover:after{width:100%}
.menu-toggle{display:none;background:none;border:0;font-size:24px}
.hero{
  min-height:680px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  background:
    radial-gradient(circle at 84% 14%, rgba(199,162,93,.13), transparent 23%),
    linear-gradient(120deg,#f4efe7 0%,#fbf8f3 48%,#efe7dc 100%);
  overflow:hidden;
}
.hero-copy{padding:105px 7vw 80px;align-self:center}
.eyebrow{font-size:12px;letter-spacing:.28em;font-weight:600;color:#997c55;margin:0 0 20px}
h1,h2,h3{font-family:"Playfair Display",serif;font-weight:500;margin:0}
h1{font-size:clamp(54px,6vw,92px);line-height:.95;letter-spacing:-.04em}
h1 em,h2 em{font-weight:500}
.lead{max-width:650px;margin:32px 0;color:#4d4a46;font-size:18px;line-height:1.8}
.hero-actions{display:flex;align-items:center;gap:28px}
.btn{display:inline-flex;padding:16px 26px;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.btn-dark{background:#161616;color:#fff}
.text-link{font-size:13px;border-bottom:1px solid #b9ad9e;padding-bottom:4px}
.hero-art{position:relative;min-height:680px}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}
.orb-1{width:430px;height:430px;background:#e5d6c2;right:-90px;top:30px}
.orb-2{width:290px;height:290px;background:#f9f4ed;left:25px;bottom:40px}
.device-card{
  position:absolute;left:8%;right:8%;top:14%;bottom:10%;
  background:linear-gradient(145deg,#fbfaf7,#e9dfd2);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 35px 80px rgba(55,42,28,.18);
  border-radius:28px;
  padding:42px;
  transform:rotate(-3deg);
}
.screen-label{font-family:"Playfair Display",serif;letter-spacing:.28em;font-size:15px}
.screen-title{font-family:"Playfair Display",serif;font-size:48px;line-height:1.05;margin-top:80px}
.screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:50px}
.screen-grid span{height:110px;border-radius:12px;background:linear-gradient(135deg,#d9c7b1,#f6efe5)}
.benefits{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#fff;
}
.benefits article{padding:28px 32px;display:flex;align-items:center;gap:16px;border-right:1px solid var(--line)}
.benefits article:last-child{border-right:0}
.benefits span{font-size:26px;color:var(--gold)}
.benefits strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.benefits small{color:#8a8580}
.section{padding:110px 7vw}
.section-heading{max-width:760px;margin:0 auto 58px;text-align:center}
.section-heading h2,.about h2,.contact h2,.product-copy h2{font-size:clamp(44px,5vw,70px);line-height:1}
.section-heading p:last-child{color:var(--muted);line-height:1.7}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.category-card{
  min-height:310px;padding:34px;
  background:#f7f3ed;border:1px solid #eee6db;
  display:flex;flex-direction:column;transition:.3s;
}
.category-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(50,40,30,.08)}
.category-card.active{background:#1d2533;color:#fff}
.category-number{font-size:12px;letter-spacing:.2em;color:var(--gold)}
.category-card h3{font-size:34px;margin-top:auto}
.category-card p{color:#7a746c;line-height:1.6}
.category-card.active p{color:#d9dce2}
.category-card span{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);margin-top:20px}
.featured{display:grid;grid-template-columns:1fr 1fr;min-height:680px;background:#eee6dc}
.product-image{display:flex;align-items:center;justify-content:center;padding:60px;background:linear-gradient(145deg,#ded0c1,#f3ece4)}

.product-copy{padding:90px 8vw 80px 7vw;display:flex;flex-direction:column;justify-content:center}
.product-copy p{color:#5e5953;line-height:1.8}
.product-copy ul{list-style:none;padding:0;margin:20px 0}
.product-copy li{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.product-copy li:before{content:"✓";color:var(--gold);margin-right:10px}
.launch-pill{display:inline-block;align-self:flex-start;margin-top:18px;padding:12px 18px;border:1px solid #ba9a70;color:#735c3c;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.about{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:center}
.about-panel p:last-child{max-width:760px;color:var(--muted);font-size:17px;line-height:1.9}
.quote-panel{background:#182338;color:#fff;padding:54px}
.quote-panel span{font-family:"Playfair Display";font-size:80px;color:var(--gold);line-height:.5}
.quote-panel p{font-family:"Playfair Display";font-size:31px;line-height:1.35}
.contact{background:#f4eee6;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.contact-card{background:#fff;padding:44px;border:1px solid var(--line)}
.contact-card a{display:block;font-family:"Playfair Display";font-size:34px;margin:16px 0;color:var(--navy)}
.contact-card small{color:var(--muted)}
footer{text-align:center;padding:70px 7vw 38px;background:#171717;color:#f5f0e8}
footer img{width:190px;filter:invert(1);opacity:.95}
footer p{color:#bbb3aa}
.footer-links{display:flex;justify-content:center;gap:28px;margin:28px 0;font-size:13px}
footer small{color:#807a73}
@media(max-width:900px){
  .site-header{height:72px}
  .brand img{width:150px}
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;padding:25px 7vw;flex-direction:column;border-top:1px solid var(--line)}
  .nav.open{display:flex}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:85px 7vw 55px}
  .hero-art{min-height:520px}
  .benefits{grid-template-columns:1fr 1fr}
  .benefits article:nth-child(2){border-right:0}
  .category-grid{grid-template-columns:1fr 1fr}
  .featured{grid-template-columns:1fr}
  .product-image{min-height:500px}
  .about,.contact{grid-template-columns:1fr}
}
@media(max-width:560px){
  .announcement{font-size:9px;letter-spacing:.2em}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .screen-title{font-size:36px;margin-top:45px}
  .screen-grid span{height:80px}
  .benefits{grid-template-columns:1fr}
  .benefits article{border-right:0;border-bottom:1px solid var(--line)}
  .category-grid{grid-template-columns:1fr}
  .section{padding:80px 6vw}
  .featured{min-height:0}
  .product-image{padding:35px;min-height:430px}
  .product-image img{max-width:92%}
  .contact-card a{font-size:26px}
}


/* v4: clean CSS-rendered product box */
.bundle-stage{
  position:relative;
  width:min(470px,82%);
  aspect-ratio:0.78;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 28px 32px rgba(37,29,20,.22));
}
.bundle-spine{
  position:absolute;
  left:2%;
  top:18%;
  width:15%;
  height:70%;
  background:linear-gradient(180deg,#0a1530,#101c38);
  transform:skewY(-7deg);
  border-left:1px solid rgba(199,162,93,.45);
  border-bottom:2px solid #080f22;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:28px;
}
.bundle-spine span{
  color:#c7a25d;
  font-family:"DM Sans",sans-serif;
  font-size:9px;
  letter-spacing:.28em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  opacity:.9;
}
.bundle-box{
  position:absolute;
  left:13%;
  top:7%;
  width:78%;
  height:82%;
  background:
    radial-gradient(circle at 50% 20%, rgba(54,74,121,.28), transparent 35%),
    linear-gradient(180deg,#14244b 0%,#101d3d 58%,#0c1731 100%);
  border-radius:4px;
  box-shadow:
    inset -12px 0 22px rgba(0,0,0,.18),
    inset 0 -18px 30px rgba(0,0,0,.15);
  transform:perspective(1000px) rotateY(-3deg);
}
.bundle-border{
  position:absolute;
  inset:6%;
  border:2px solid #c7a25d;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#f7efe1;
  padding:14% 8% 9%;
}
.bundle-title{
  font-family:"Playfair Display",serif;
  font-size:clamp(22px,2.45vw,38px);
  letter-spacing:.015em;
  color:#d4ae64;
  line-height:1.08;
  white-space:nowrap;
  max-width:100%;
  transform:scaleX(.94);
  transform-origin:center;
}
.bundle-subtitle{
  margin-top:13px;
  font-size:clamp(10px,1vw,15px);
  letter-spacing:.12em;
  font-weight:600;
}
.bundle-count{
  margin-top:7px;
  font-size:clamp(9px,.9vw,13px);
  letter-spacing:.08em;
  color:#d9dce2;
}
.bundle-mark{
  margin-top:auto;
  font-size:34px;
  line-height:1;
  color:#c7a25d;
}
.bundle-brand{
  margin-top:10px;
  font-family:"DM Sans",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.28em;
  color:#c7a25d;
}
@media(max-width:900px){
  .bundle-stage{width:min(420px,86%)}
}
@media(max-width:560px){
  .bundle-stage{width:min(340px,90%)}
  .bundle-title{font-size:24px;transform:scaleX(.94)}
}