/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
  --bg: #f4f7f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f4f6;
  --text: #1e2a33;
  --text-dim: #4a5d6a;
  --text-muted: #7a8d9a;
  --accent: #2ea8b8;
  --accent2: #1d8fa8;
  --accent-glow: rgba(46,168,184,0.18);
  --accent-subtle: rgba(46,168,184,0.07);
  --white: #ffffff;
  --heading: #0f1c24;
  --border: rgba(0,0,0,0.07);
  --border-hover: rgba(0,0,0,0.14);
  --radius: 16px;
  --radius-sm: 10px;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: auto; /* GSAP handles smooth scroll */ }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ═══════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo {
  font-family: var(--font-body); font-weight: 700;
  font-size: 32px; color: var(--heading); letter-spacing: -0.5px;
}
.loader-logo span { color: var(--accent); }
.loader-bar-track {
  width: 200px; height: 2px; background: rgba(0,0,0,0.08);
  border-radius: 2px; margin-top: 24px; overflow: hidden;
}
.loader-bar {
  height: 100%; width: 0%; background: var(--accent);
  border-radius: 2px; transition: width 0.1s linear;
}
.loader-pct {
  font-size: 12px; color: var(--text-muted);
  margin-top: 12px; font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 32px;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              background 0.3s ease;
}
.nav.hidden { transform: translateY(-100%); }
.nav.scrolled {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(244,247,249,0.82);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.nav-logo {
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.5px; color: var(--heading);
}
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  transition: color 0.25s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--heading); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  background: var(--accent) !important; color: #fff !important;
  padding: 8px 22px !important; border-radius: 100px;
  font-weight: 600 !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(46,168,184,0.25) !important;
}

/* ═══════════════════════════════════════════
   HERO — SCROLL FRAME ANIMATION
   ═══════════════════════════════════════════ */
.hero {
  position: relative;
  height: 500vh; /* long scroll region for pinning */
}
.hero-pin {
  position: relative;
  width: 100%; height: 100vh;
  overflow: hidden;
}
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(244,247,249,0.4) 100%);
  pointer-events: none;
}
.hero-vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 160px 60px rgba(244,247,249,0.6);
  pointer-events: none;
}
/* Corner tech labels */
.hero-tech-label {
  position: absolute; font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.7); letter-spacing: 2px;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.hero-tech-label.tl { top: 24px; left: 32px; }
.hero-tech-label.tr { top: 24px; right: 32px; text-align: right; }
.hero-tech-label.bl { bottom: 24px; left: 32px; }
.hero-tech-label.br { bottom: 24px; right: 32px; text-align: right; }

/* Hero text group */
.hero-text-group {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; z-index: 10;
  pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(46,168,184,0.08);
  border: 1px solid rgba(46,168,184,0.2);
  padding: 6px 18px; border-radius: 100px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 20px;
  opacity: 0; transform: translateY(30px);
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: dotPulse 2s ease infinite;
}
@keyframes dotPulse {
  0%,100%{opacity:1;} 50%{opacity:0.3;}
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 120px);
  line-height: 0.95; font-weight: 400;
  color: var(--heading); overflow: hidden;
}
.hero-title-line {
  display: block; overflow: hidden;
  opacity: 0; transform: translateY(100%);
}
.hero-title em {
  font-style: italic; color: var(--accent);
  text-shadow: 0 0 40px rgba(46,168,184,0.25),
               0 0 80px rgba(46,168,184,0.1);
}
.hero-sub {
  font-size: 17px; color: var(--text-dim);
  max-width: 420px; line-height: 1.7;
  margin-top: 24px;
  opacity: 0; transform: translateY(30px);
}
.hero-scroll-hint {
  position: absolute; bottom: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 2px;
  opacity: 0;
}
.hero-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollLine 2s ease infinite;
}
@keyframes scrollLine {
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* Mid-scroll tagline */
.hero-mid-tagline {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 11; pointer-events: none;
  opacity: 0;
}
.hero-mid-tagline h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  color: var(--heading); text-align: center;
  max-width: 600px; line-height: 1.3;
}
.hero-mid-tagline h2 em {
  color: var(--accent); font-style: italic;
}

/* End-scroll product specs overlay */
.hero-end-specs {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 60px; z-index: 12; pointer-events: none;
}
.hero-end-left, .hero-end-right {
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0;
}
.hero-end-left { align-items: flex-start; }
.hero-end-right { align-items: flex-end; text-align: right; }
.hero-spec-item {
  padding: 12px 20px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.hero-spec-value {
  font-size: 28px; font-weight: 700; color: var(--accent);
  letter-spacing: -1px;
}
.hero-spec-label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   SHARED SECTION STYLES
   ═══════════════════════════════════════════ */
.section { padding: 140px 32px; max-width: 1200px; margin: 0 auto; }
.section-tag {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--accent); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.section-tag::before {
  content: ''; width: 28px; height: 3px;
  background: var(--accent); border-radius: 2px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.12; color: var(--heading);
  margin-bottom: 16px;
}
.section-sub {
  font-size: 18px; color: var(--text-dim);
  max-width: 540px; line-height: 1.75;
}
/* Anim helpers */
.anim-up {
  opacity: 0; transform: translateY(60px);
}
.anim-left { opacity: 0; transform: translateX(-60px); }
.anim-right { opacity: 0; transform: translateX(60px); }
.anim-scale { opacity: 0; transform: scale(0.9); }

/* ═══════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════ */
.stats-bar {
  max-width: 1200px; margin: -60px auto 0; padding: 0 32px;
  position: relative; z-index: 20;
}
.stats-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.stat {
  padding: 36px 24px; text-align: center;
  border-right: 1px solid var(--border);
  transition: background 0.3s;
}
.stat:last-child { border-right: none; }
.stat:hover { background: var(--bg-card-hover); }
.stat-value {
  font-size: 36px; font-weight: 700; color: var(--accent);
  letter-spacing: -1.5px; font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════
   DUAL SECTION (2-in-1)
   ═══════════════════════════════════════════ */
.dual-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 60px;
}
.dual-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 52px 44px;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.dual-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.dual-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.dual-card:hover::before { opacity: 1; }
.dual-icon {
  width: 64px; height: 64px;
  background: var(--accent-subtle);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px; font-size: 28px;
}
.dual-card h3 {
  font-size: 24px; font-weight: 700; color: var(--heading);
  margin-bottom: 14px;
}
.dual-card p {
  font-size: 16px; color: var(--text-dim); line-height: 1.75;
}

/* ═══════════════════════════════════════════
   FEATURES SECTION
   ═══════════════════════════════════════════ */
.features-wrap {
  padding: 140px 32px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(46,168,184,0.03) 50%, var(--bg) 100%);
}
.features-inner { max-width: 1200px; margin: 0 auto; }
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 60px;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.feature-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}
/* Mouse glow */
.feature-card .card-glow {
  position: absolute; width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,168,184,0.1) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
  transform: translate(-50%,-50%);
}
.feature-card:hover .card-glow { opacity: 1; }
.feature-icon {
  font-size: 28px; margin-bottom: 22px;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-subtle);
  border-radius: 14px; position: relative; z-index: 1;
}
.feature-card h3 {
  font-size: 19px; font-weight: 700; color: var(--heading);
  margin-bottom: 10px; position: relative; z-index: 1;
}
.feature-card p {
  font-size: 16px; color: var(--text-dim); line-height: 1.7;
  position: relative; z-index: 1;
}
/* Progress bar inside feature cards */
.feature-bar-track {
  margin-top: 20px; height: 3px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px; overflow: hidden;
  position: relative; z-index: 1;
}
.feature-bar-fill {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}

/* Statement quote with scramble */
.statement {
  margin-top: 80px; text-align: center;
  padding: 60px 0;
}
.statement-text {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 44px);
  color: var(--heading); line-height: 1.35;
  max-width: 800px; margin: 0 auto;
}
.statement-text em { color: var(--accent); font-style: italic; }
.scramble-char {
  display: inline-block;
  transition: color 0.1s;
}

/* Counting stats strip */
.count-strip {
  display: flex; justify-content: center; gap: 60px;
  margin-top: 60px; flex-wrap: wrap;
}
.count-item { text-align: center; }
.count-value {
  font-size: 48px; font-weight: 700; color: var(--accent);
  letter-spacing: -2px; font-variant-numeric: tabular-nums;
}
.count-value .count-suffix {
  font-size: 24px; font-weight: 500; color: var(--text-dim);
}
.count-label {
  font-size: 13px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════
   BUILD QUALITY
   ═══════════════════════════════════════════ */
.build-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start; margin-top: 60px;
}
.build-list { display: flex; flex-direction: column; gap: 20px; }
.build-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; border-radius: var(--radius-sm);
  transition: background 0.3s;
}
.build-item:hover { background: var(--bg-card); }
.build-num {
  min-width: 36px; height: 36px;
  background: var(--accent-subtle);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--accent);
}
.build-item h4 {
  font-size: 16px; font-weight: 700; color: var(--heading);
  margin-bottom: 6px;
}
.build-item p {
  font-size: 15px; color: var(--text-dim); line-height: 1.7;
}
.build-sticky {
  position: sticky; top: 120px;
}
.build-sticky img {
  width: 100%; max-width: 440px;
  border-radius: var(--radius);
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.15));
}

/* ═══════════════════════════════════════════
   DESIGNED IN SINGAPORE
   ═══════════════════════════════════════════ */
.singapore-wrap {
  padding: 140px 32px;
  background: linear-gradient(170deg, #edf2f5 0%, var(--bg) 40%, var(--bg) 100%);
  position: relative; overflow: hidden;
}
.singapore-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
/* Skyline silhouette decoration */
.sg-skyline {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 200px; opacity: 0.04;
  pointer-events: none;
}
/* Hero row */
.sg-hero {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  margin-bottom: 80px;
}
.sg-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-subtle);
  border: 1px solid rgba(46,168,184,0.18);
  padding: 8px 20px; border-radius: 100px;
  font-size: 12px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 20px;
}
.sg-flag {
  width: 20px; height: 14px; border-radius: 2px;
  background: linear-gradient(to bottom, #EF3340 50%, #fff 50%);
  border: 1px solid rgba(0,0,0,0.08);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.sg-flag::after {
  content: '☽'; position: absolute; top: -1px; left: 2px;
  font-size: 8px; color: #fff; line-height: 1;
}
.sg-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1; color: var(--heading);
  margin-bottom: 20px;
}
.sg-title em { color: var(--accent); font-style: italic; }
.sg-description {
  font-size: 17px; color: var(--text-dim); line-height: 1.8;
  max-width: 480px;
}
.sg-description strong { color: var(--text); font-weight: 600; }
/* Map / visual side */
.sg-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.sg-map-circle {
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.sg-map-ring {
  position: absolute; inset: -16px;
  border: 1px dashed rgba(46,168,184,0.2);
  border-radius: 50%;
}
.sg-map-ring:nth-child(2) { inset: -36px; border-color: rgba(46,168,184,0.1); }
.sg-map-content { text-align: center; padding: 40px; }
.sg-map-icon { font-size: 48px; margin-bottom: 12px; }
.sg-map-label {
  font-size: 13px; font-weight: 600; color: var(--heading);
  text-transform: uppercase; letter-spacing: 2px;
}
.sg-map-sublabel {
  font-size: 12px; color: var(--text-muted); margin-top: 4px;
  letter-spacing: 1px;
}
.sg-coord {
  position: absolute; font-size: 10px; font-weight: 600;
  color: var(--accent); letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.sg-coord.top { top: 24px; left: 50%; transform: translateX(-50%); }
.sg-coord.bottom { bottom: 24px; left: 50%; transform: translateX(-50%); }
/* Pillar cards */
.sg-pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sg-pillar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  position: relative; overflow: hidden;
}
.sg-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
  border-color: var(--border-hover);
}
.sg-pillar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform 0.3s ease;
}
.sg-pillar:hover::after { transform: scaleX(1); }
.sg-pillar-icon {
  width: 58px; height: 58px;
  background: var(--accent-subtle);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 18px;
}
.sg-pillar h4 {
  font-size: 16px; font-weight: 700; color: var(--heading);
  margin-bottom: 10px;
}
.sg-pillar p {
  font-size: 15px; color: var(--text-dim); line-height: 1.7;
}
/* Quote bar */
.sg-quote {
  margin-top: 60px; padding: 32px 40px;
  background: var(--white);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.sg-quote p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--heading); line-height: 1.5;
  font-style: italic;
}
.sg-quote p em { color: var(--accent); }
.sg-quote-attr {
  font-family: var(--font-body);
  font-size: 13px; color: var(--text-muted);
  margin-top: 12px; font-style: normal;
  letter-spacing: 0.5px;
}

@media (max-width: 900px) {
  .sg-hero { grid-template-columns: 1fr; text-align: center; }
  .sg-description { margin: 0 auto; }
  .sg-pillars { grid-template-columns: 1fr 1fr; }
  .sg-map-circle { width: 260px; height: 260px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .sg-pillars { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   SPECS
   ═══════════════════════════════════════════ */
.specs-wrap {
  padding: 140px 32px;
  background: #edf2f5;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.specs-inner { max-width: 1000px; margin: 0 auto; }
.specs-table { margin-top: 60px; }
.spec-row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
  padding: 18px 0; transition: background 0.2s;
}
.spec-row:hover { background: rgba(0,0,0,0.02); }
.spec-label { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.spec-value { font-size: 15px; color: var(--text); font-weight: 500; text-align: right; }

/* ═══════════════════════════════════════════
   SMART CONTROL
   ═══════════════════════════════════════════ */
.smart-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 60px;
}
.smart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.3s;
}
.smart-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.smart-icon {
  width: 58px; height: 58px;
  background: var(--accent-subtle);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 20px;
}
.smart-card h3 {
  font-size: 20px; font-weight: 700; color: var(--heading);
  margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
}
.smart-card p { font-size: 16px; color: var(--text-dim); line-height: 1.75; }

/* ═══════════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════════ */
.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 60px;
}
.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.review-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.review-stars {
  color: #f5a623; font-size: 16px; letter-spacing: 2px;
  margin-bottom: 16px;
}
.review-text {
  font-size: 16px; color: var(--text-dim); line-height: 1.8;
  flex: 1; font-style: italic; margin-bottom: 24px;
}
.review-author {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--border); padding-top: 20px;
}
.review-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-subtle), rgba(46,168,184,0.2));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--accent);
}
.review-name { font-size: 15px; font-weight: 600; color: var(--heading); }
.review-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.reviews-summary {
  display: flex; align-items: center; gap: 24px;
  margin-top: 40px; padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius); flex-wrap: wrap;
}
.reviews-big-score {
  font-size: 48px; font-weight: 700; color: var(--accent);
  line-height: 1; letter-spacing: -2px;
}
.reviews-summary-text { font-size: 14px; color: var(--text-dim); }
.reviews-summary-text strong {
  color: var(--heading); display: block; font-size: 15px; margin-bottom: 2px;
}
.review-bar-container {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
}
.review-bar-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
}
.review-bar-label { color: var(--text-muted); min-width: 12px; text-align: right; }
.review-bar {
  flex: 1; height: 5px; background: rgba(0,0,0,0.06);
  border-radius: 3px; overflow: hidden;
}
.review-bar-fill {
  height: 100%; width: 0; background: var(--accent); border-radius: 3px;
}
.review-bar-count { color: var(--text-muted); min-width: 30px; }

/* ═══════════════════════════════════════════
   SUPPORT / WARRANTY
   ═══════════════════════════════════════════ */
.support-wrap {
  padding: 140px 32px;
  background: linear-gradient(180deg, rgba(46,168,184,0.03) 0%, var(--bg) 100%);
  border-top: 1px solid var(--border);
}
.support-inner { max-width: 1200px; margin: 0 auto; }
.support-hero {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center; margin-top: 60px;
}
.warranty-badge {
  position: relative;
  width: 260px; height: 260px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.warranty-ring {
  position: absolute; inset: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
}
.warranty-ring:nth-child(2) { inset: 16px; border-color: rgba(46,168,184,0.15); }
.warranty-ring:nth-child(3) { inset: 32px; border-color: rgba(46,168,184,0.25); }
.warranty-center { text-align: center; position: relative; z-index: 2; }
.warranty-number {
  font-size: 72px; font-weight: 700; color: var(--accent);
  line-height: 1; letter-spacing: -3px;
}
.warranty-unit {
  font-size: 14px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 3px; margin-top: 4px;
}
.support-detail {
  padding: 16px 20px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 16px;
}
.support-detail .build-num { flex-shrink: 0; }
.support-detail h4 {
  font-size: 16px; font-weight: 700; color: var(--heading); margin-bottom: 4px;
}
.support-detail p { font-size: 15px; color: var(--text-dim); line-height: 1.7; }

.support-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 60px;
}
.support-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 32px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.3s;
}
.support-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.support-card-icon {
  font-size: 30px; margin-bottom: 18px;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-subtle); border-radius: 16px;
}
.support-card h4 {
  font-size: 18px; font-weight: 700; color: var(--heading); margin-bottom: 10px;
}
.support-card p { font-size: 15px; color: var(--text-dim); line-height: 1.7; }

/* ═══════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════ */
.faq-wrap { padding: 140px 32px; }
.faq-inner { max-width: 860px; margin: 0 auto; }
.faq-list { margin-top: 60px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; background: none; border: none;
  padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  text-align: left; font-size: 16px; font-weight: 600; color: var(--heading);
  transition: color 0.25s;
}
.faq-question:hover { color: var(--accent); }
.faq-icon {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 50%; background: var(--accent-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent);
  transition: transform 0.3s, background 0.3s; margin-left: 16px;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--accent); color: #fff;
}
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer-inner {
  padding: 0 0 24px;
  font-size: 16px; color: var(--text-dim); line-height: 1.8;
}

/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */
.contact-wrap {
  padding: 140px 32px;
  background: #edf2f5;
  border-top: 1px solid var(--border);
}
.contact-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 80px; align-items: start;
}
.contact-info h3 {
  font-family: var(--font-display);
  font-size: 36px; color: var(--heading); margin-bottom: 16px; line-height: 1.2;
}
.contact-info > p {
  font-size: 17px; color: var(--text-dim); line-height: 1.75; margin-bottom: 40px;
}
.contact-channels { display: flex; flex-direction: column; gap: 16px; }
.contact-channel {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.3s;
}
.contact-channel:hover { border-color: var(--accent); }
.contact-channel-icon {
  width: 42px; height: 42px;
  background: var(--accent-subtle);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.contact-channel-label {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.contact-channel-value {
  font-size: 15px; color: var(--heading); font-weight: 500; margin-top: 2px;
}
.contact-form {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.contact-form h4 {
  font-size: 18px; font-weight: 600; color: var(--heading); margin-bottom: 24px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-dim); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px; color: var(--text);
  transition: border-color 0.3s; outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group select { appearance: none; cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ═══════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════ */
.cta-wrap {
  padding: 140px 32px; text-align: center;
  position: relative; overflow: hidden;
}
.cta-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(46,168,184,0.08) 0%, transparent 65%);
  pointer-events: none;
  animation: ctaFloat 8s ease infinite;
}
@keyframes ctaFloat {
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-50%) scale(1.15); }
}
.cta-inner { max-width: 600px; margin: 0 auto; position: relative; z-index: 2; }
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  background: linear-gradient(135deg, var(--heading), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.15; margin-bottom: 16px;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff;
  padding: 14px 32px; border-radius: 100px;
  font-weight: 600; font-size: 15px; border: none;
  transition: all 0.3s;
  position: relative;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(46,168,184,0.3);
}
/* Pre-order button states */
.btn-preorder { min-width: 220px; justify-content: center; }
.btn-preorder .btn-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}
.btn-preorder.loading .btn-label { opacity: 0; }
.btn-preorder.loading .btn-spinner {
  display: block; position: absolute;
  left: 50%; top: 50%;
  margin-left: -9px; margin-top: -9px;
}
.btn-preorder.loading {
  pointer-events: none; opacity: 0.75;
}
.btn-preorder.error {
  background: #d44; animation: btnShake 0.4s ease;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@keyframes btnShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text);
  padding: 14px 32px; border-radius: 100px;
  font-weight: 500; font-size: 15px;
  border: 1px solid var(--border-hover);
  transition: all 0.3s;
}
.btn-secondary:hover {
  border-color: var(--accent); color: var(--accent);
}
.btn-group { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }



/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .dual-grid, .build-grid, .smart-grid, .support-hero,
  .contact-inner { grid-template-columns: 1fr; }
  .features-grid, .reviews-grid { grid-template-columns: 1fr 1fr; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .support-cards { grid-template-columns: 1fr; }
  .hero-end-specs { padding: 0 24px; }
  .form-row { grid-template-columns: 1fr; }
  .count-strip { gap: 32px; }
}
@media (max-width: 600px) {
  .features-grid, .reviews-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }
  .hero-end-specs { flex-direction: column; gap: 16px; align-items: center; }
}

/* ═══════════════════════════════════════════
   ELEMENTOR EDITOR OVERRIDES
   GSAP/ScrollTrigger is disabled inside the editor preview, so make
   everything visible and collapse the 500vh pinned hero to one screen.
   ═══════════════════════════════════════════ */
body.elementor-editor-active .anim-up,
body.elementor-editor-active .anim-left,
body.elementor-editor-active .anim-right,
body.elementor-editor-active .anim-scale,
body.elementor-editor-active .hero-badge,
body.elementor-editor-active .hero-title-line,
body.elementor-editor-active .hero-sub,
body.elementor-editor-active .hero-scroll-hint,
body.elementor-editor-active .hero-text-group,
body.elementor-editor-active .warranty-ring {
  opacity: 1 !important;
  transform: none !important;
}
body.elementor-editor-active .loader { display: none !important; }
body.elementor-editor-active .hero { height: auto; }
body.elementor-editor-active .hero-pin { height: 85vh; }
body.elementor-editor-active .hero-mid-tagline,
body.elementor-editor-active .hero-end-specs { display: none !important; }
body.elementor-editor-active .feature-bar-fill { width: 70%; }
body.elementor-editor-active .review-bar-fill { width: 50%; }

/* Neutralize Elementor wrapper spacing so Aerofy sections sit flush,
   exactly like the original page. */
.elementor-widget-aerofy-hero,
.elementor-widget-aerofy-stats,
.elementor-widget-aerofy-dual,
.elementor-widget-aerofy-features,
.elementor-widget-aerofy-build,
.elementor-widget-aerofy-singapore,
.elementor-widget-aerofy-specs,
.elementor-widget-aerofy-smart,
.elementor-widget-aerofy-reviews,
.elementor-widget-aerofy-support,
.elementor-widget-aerofy-faq,
.elementor-widget-aerofy-contact,
.elementor-widget-aerofy-cta {
  width: 100%;
}
.elementor-widget-container { width: 100%; }

/* ═══════════════════════════════════════════
   ELEMENTOR FULL-BLEED BREAKOUT
   Elementor wraps widgets in boxed-width containers with default
   padding. Aerofy sections are designed full-bleed, so pull every
   Aerofy widget back out to the full viewport width regardless of
   the container's Content Width / padding settings.
   ═══════════════════════════════════════════ */
body { overflow-x: clip; } /* 100vw includes the scrollbar; prevent a sliver of horizontal scroll */

.elementor-widget[class*="elementor-widget-aerofy-"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-block-end: 0 !important; /* kill Elementor's default widget spacing */
}
.elementor-widget[class*="elementor-widget-aerofy-"] > .elementor-widget-container {
  width: 100%;
  padding: 0;
}

/* ═══════════════════════════════════════════
   ELEMENTOR CONTAINER PADDING/GAP RESET
   Elementor gives every container default padding (Site Settings →
   Layout) and a gap between elements. Containers that hold Aerofy
   section widgets should be invisible wrappers, so zero them out.
   Uses :has(), supported by all modern browsers.
   ═══════════════════════════════════════════ */
.e-con:has(> .elementor-widget[class*="elementor-widget-aerofy-"]),
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-aerofy-"]) {
  padding: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  min-height: 0 !important;
}

/* Legacy section/column layout (pre-Flexbox-container Elementor) */
.elementor-section:has(.elementor-widget[class*="elementor-widget-aerofy-"]) > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
}

/* The page wrapper itself sometimes carries padding too */
.elementor[class*="elementor-"]:has(.elementor-widget[class*="elementor-widget-aerofy-"]) {
  padding: 0;
}

/* ═══════════════════════════════════════════
   WP ADMIN BAR OFFSET
   The admin toolbar (logged-in users only) is 32px tall (46px ≤782px)
   and overlaps the fixed nav. Push the nav down by that height.
   ═══════════════════════════════════════════ */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}
/* WP hides the admin bar when printing/scrolled on small screens ≤600px */
@media screen and (max-width: 600px) {
  body.admin-bar .nav { top: 0; }
}

/* ═══════════════════════════════════════════
   STANDALONE SOLID HEADER + HERO LABEL CLEARANCE
   .nav-solid (Customizer → Branding & Navigation → "Solid header bar")
   gives the nav a permanent frosted background so it reads as an
   independent bar instead of floating transparently over the hero.
   The hero's top corner tech labels move down so the fixed nav never
   covers them.
   ═══════════════════════════════════════════ */
.nav.nav-solid {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(244, 247, 249, 0.88);
  border-bottom: 1px solid var(--border);
}
.hero-tech-label.tl { top: 96px; }
.hero-tech-label.tr { top: 96px; }

/* In the Elementor editor, un-fix the nav so the Header widget is
   selectable in place instead of sticking over the whole preview. */
body.elementor-editor-active .nav { position: relative !important; }

/* ═══════════════════════════════════════════
   MOBILE HERO END-SPECS FIX
   On phones the old rule stacked all four spec cards in the screen
   center, covering the product. Instead: two compact columns pinned
   to the bottom of the hero (a 2×2 grid), decorative bottom corner
   labels hidden to avoid collisions.
   ═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero-end-specs {
    flex-direction: row;          /* override earlier column rule */
    top: auto;                    /* unpin from full-height centering */
    bottom: 0;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    padding: 0 16px 28px;
  }
  .hero-end-left,
  .hero-end-right {
    flex: 1 1 0;
    max-width: 200px;
    gap: 10px;
    align-items: stretch;
  }
  .hero-end-right { text-align: center; }
  .hero-end-left  { text-align: center; }
  .hero-spec-item {
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.85);
  }
  .hero-spec-value { font-size: 20px; letter-spacing: -0.5px; }
  .hero-spec-label { font-size: 9px; letter-spacing: 1px; }

  /* tiny decorative corner labels just add clutter on phones */
  .hero-tech-label.bl,
  .hero-tech-label.br { display: none; }
}

/* ═══════════════════════════════════════════
   MOBILE DROPDOWN MENU
   The hamburger button is hidden on desktop. Below 900px the inline
   links collapse into a dropdown panel toggled by the button.
   ═══════════════════════════════════════════ */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: none; background: transparent;
  cursor: pointer; padding: 10px;
  z-index: 2;
}
.nav-toggle-bar {
  display: block; width: 100%; height: 2px;
  background: var(--heading); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }
/* Animate to an X when open */
.nav.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  /* Dropdown panel */
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: rgba(244, 247, 249, 0.97);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    /* collapsed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .nav.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links a {
    font-size: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a::after { display: none; } /* drop the underline hover effect */
  .nav-links a:last-of-type { border-bottom: none; }
  .nav-cta {
    margin-top: 14px;
    text-align: center;
    padding: 14px 24px !important;
  }
}