/* ============================================================
   variants.css — shared base for all index variant pages
   Includes: reset, CSS vars, header overrides, hero, swiper
   ============================================================ */

:root {
  --d0:#0f1014; --d1:#141618; --d2:#171717; --d3:#1c1c1a; --d4:#222220; --d5:#28281f;
  --border-dim:rgba(255,255,255,0.06); --border-mid:rgba(255,255,255,0.1);
  --text-bright:#f0ede8; --text-mid:rgba(240,237,232,0.52); --text-muted:rgba(240,237,232,0.28);
  --gold:#c9a95a; --gold-dim:rgba(201,169,90,0.28);
  --radius:3px; --bullet-size:20px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--d0); color:var(--text-bright); }

/* ── Header overrides (dark transparent variant) ── */
#site-header { background:transparent!important; border-bottom-color:var(--border-dim)!important; }
#site-header.scrolled { background:rgba(10,10,10,0.95)!important; backdrop-filter:blur(14px); border-bottom-color:var(--border-mid)!important; }
#site-header .logo { color:var(--text-bright)!important; }
#site-header .logo span { color:var(--text-muted)!important; }
#main-nav a { color:rgba(240,237,232,0.4)!important; }
#main-nav a:hover,#main-nav a[aria-current="page"] { color:var(--text-bright)!important; }
#main-nav a[aria-current="page"]::after { background:var(--text-bright)!important; }
.nav-cta { background:rgba(255,255,255,0.08)!important; color:var(--text-bright)!important; border:1px solid rgba(255,255,255,0.14)!important; }
.nav-cta:hover { background:rgba(255,255,255,0.16)!important; }
.hamburger span { background:var(--text-bright)!important; }
@media(max-width:900px) { #main-nav { background:rgba(10,10,10,0.97)!important; border-bottom-color:var(--border-mid)!important; } }

/* ── Hero section ── */
.hero-gradient {
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 75% 55% at 12% 48%,rgba(255,255,255,0.028) 0%,transparent 58%),
    radial-gradient(ellipse 50% 75% at 88% 18%,rgba(255,255,255,0.018) 0%,transparent 52%),
    var(--d0);
  overflow:hidden;
}
.hero-gradient::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,0.022) 0,rgba(255,255,255,0.022) 1px,transparent 1px,transparent 100px),
    repeating-linear-gradient(0deg,rgba(255,255,255,0.017) 0,rgba(255,255,255,0.017) 1px,transparent 1px,transparent 100px);
}
.hero-gradient::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.034;
}
.hero-bottom-border {
  position:absolute; bottom:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08) 20%,rgba(255,255,255,0.08) 80%,transparent);
}
.hero-content {
  position:relative; z-index:1; width:100%; max-width:1320px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:120px 60px 80px; gap:48px;
}
.hero-left { flex:1; min-width:300px; max-width:520px; animation:fadeUp 0.7s ease both 0.2s; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px; font-size:10px; font-weight:600;
  letter-spacing:4px; text-transform:uppercase; color:var(--text-muted); margin-bottom:20px;
}
.hero-eyebrow::before { content:''; width:28px; height:1px; background:rgba(255,255,255,0.14); }
.hero-left h1 {
  font-size:clamp(36px,5vw,68px); font-weight:800; color:var(--text-bright);
  line-height:1.0; letter-spacing:-2.5px; margin-bottom:24px;
}
ul.hero-bullets { list-style:none; padding:0; margin:0 0 32px; }
.bulletpoint {
  display:flex; align-items:center; gap:12px; font-size:14px;
  font-weight:400; color:var(--text-mid); margin-top:14px; line-height:1.4;
}
.bullet-svg { width:var(--bullet-size); height:var(--bullet-size); fill:var(--text-muted); flex-shrink:0; }
.bulletpoint a { display:flex; align-items:center; gap:12px; color:var(--text-mid); text-decoration:none; transition:color 0.2s; }
.bulletpoint a:hover { color:#5b9cff; }
.bulletpoint a:hover .bullet-svg { fill:#5b9cff; }
.hero-cta {
  display:inline-block; margin-top:32px; padding:13px 28px;
  background:rgba(255,255,255,0.08); color:var(--text-bright);
  font-family:'Nunito',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(255,255,255,0.18); transition:all 0.22s; border-radius:var(--radius);
}
.hero-cta:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.34); }
.hero-right { flex:1; min-width:300px; display:flex; align-items:center; justify-content:center; animation:fadeUp 0.7s ease both 0.38s; }
.video-glass { width:100%; max-width:560px; scale:1.3; display:block; }
@media(max-width:900px) {
  .hero-content { padding:100px 24px 60px; flex-direction:column; align-items:flex-start; }
  .hero-right { width:100%; }
  .video-glass { max-width:100%; scale:1; }
}

/* ── Swiper gallery sections ── */
.content-section { position:relative; padding:80px 0; border-bottom:1px solid var(--border-dim); overflow:hidden; }
.content-section.s-arch { background:var(--d2); }
.content-section.s-arch::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 50% 80% at 95% 50%,rgba(255,255,255,0.014) 0%,transparent 60%); }
.content-section.s-product { background:var(--d3); }
.content-section.s-product::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 50% 80% at 5% 50%,rgba(255,255,255,0.012) 0%,transparent 60%); }
.content-inner { position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:0 60px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:48px; }
.content-text { flex:1; min-width:260px; max-width:400px; }
.section-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:9px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.section-eyebrow::before { content:''; width:20px; height:1px; background:rgba(255,255,255,0.12); }
.content-text h2 { font-size:clamp(24px,3vw,36px); font-weight:700; color:var(--text-bright); line-height:1.15; letter-spacing:-1px; margin-bottom:16px; }
.content-text h2 span { color:var(--text-muted); font-weight:300; }
.content-text p { font-size:14px; line-height:1.8; color:var(--text-mid); font-weight:300; margin-bottom:24px; }
.content-text p a { color:var(--text-bright); text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.content-text a.section-cta { display:inline-block; padding:11px 24px; background:rgba(255,255,255,0.07); color:var(--text-bright); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; text-decoration:none; border:1px solid rgba(255,255,255,0.14); transition:all 0.2s; border-radius:var(--radius); }
.content-text a.section-cta:hover { background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.28); }
.content-gallery { flex:1; min-width:280px; max-width:640px; width:100%; }
.gallery-wrapper { position:relative; width:100%; padding-top:62.5%; overflow:hidden; border:1px solid var(--border-dim); }
.gallery-main { position:absolute; inset:0; width:100%; height:100%; }
.gallery-main .swiper-slide { display:flex; align-items:center; justify-content:center; background:#050505; height:100%; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.swiper-button-next,.swiper-button-prev { width:36px; height:36px; background:rgba(255,255,255,0.08); color:var(--text-bright); border:1px solid rgba(255,255,255,0.12); transition:background 0.2s; }
.swiper-button-next:hover,.swiper-button-prev:hover { background:rgba(255,255,255,0.16); }
.swiper-button-next::after,.swiper-button-prev::after { font-size:13px; font-weight:700; }
.swiper-pagination { bottom:14px!important; }
.swiper-pagination-bullet { width:6px; height:6px; background:rgba(255,255,255,0.25); opacity:1; margin:0 3px!important; transition:all 0.2s; }
.swiper-pagination-bullet-active { background:rgba(255,255,255,0.82); transform:scale(1.35); }
@media(max-width:900px) { .content-inner { padding:0 24px; flex-direction:column; } .content-text { max-width:100%; } .content-gallery { width:100%; max-width:100%; } }
@media(max-width:600px) { .content-section { padding:60px 0 0; } .content-inner { padding:0; gap:32px; } .content-text { padding:0 24px; } .gallery-wrapper { border-radius:0; border-left:none; border-right:none; box-shadow:none; } }

/* ── Shared utilities ── */
.tag { font-size:9px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:14px; }
/* footer styles handled by footer.css / footer_script.js */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }