.card {
  width: 24%;
  min-width: 240px;
  height: 160px;
  margin: 1.5%;
  background-color: #111111;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  perspective: 1000px;
  position: relative;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.card-front {
  background-color: #111111;
}

.card-back {
  background-color: #111111;
  transform: rotateY(180deg);
}

.card-back a {
  margin-top: 0.75rem;
  color: #ffcc00;
  font-weight: bold;
  text-decoration: underline;
  font-size: 0.9rem;
}

.card h3 {
  font-size: 1.25rem;
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card p {
  font-size: 0.9rem;
  color: #e4e6e1;
  margin: 0;
  text-align: center;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2%;
  margin-top: 1.5rem;
}

.card-back {
  background-color: #111111;
  opacity: 1 !important;
  backface-visibility: hidden;
}

/* Domain Card Styles - Simplified Version (No Flip) */
div.domain-card {
  width: 240px;
  height: 140px;
  background-color: #0e0e0e !important;
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 32px 6px #bfa247, 0 0 8px 2px #bfa247, 0 4px 10px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.35s cubic-bezier(0.4,0.2,0.2,1), transform 0.35s cubic-bezier(0.4,0.2,0.2,1);
  font-family: 'Inter', sans-serif;
  position: relative;
  cursor: pointer;
  margin: 12px;
  overflow: hidden;
  /* Disable 3D transforms temporarily */
  transform: none !important;
  transform-style: flat !important;
  -webkit-transform-style: flat !important;
}

div.domain-card:hover {
  box-shadow: 0 0 60px 18px #c7a14add, 0 0 120px 36px #f8e9c255, 0 0 30px 8px #f8e9c299;
  transform: scale(1.09) translateY(-10px) !important;
  z-index: 2;
  backdrop-filter: blur(4px);
}

/* Temporarily disable flip animation */
div.domain-card .domain-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  /* Disable 3D transforms */
  transform-style: flat !important;
  -webkit-transform-style: flat !important;
  transition: none !important;
  transform: none !important;
}

/* Disable hover flip */
div.domain-card:hover .domain-card-inner {
  transform: none !important;
}

/* Show only front content */
div.domain-card .domain-card-front, 
div.domain-card .domain-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  /* Disable backface-visibility */
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  -moz-backface-visibility: visible !important;
  /* Disable 3D transforms */
  transform: none !important;
  transform-style: flat !important;
  -webkit-transform-style: flat !important;
}

div.domain-card .domain-card-front {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color: #0e0e0e !important;
  /* Show front content */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2;
}

div.domain-card .domain-card-back {
  font-size: 14px;
  color: #dddddd;
  background-color: #151515 !important;
  /* Hide back content */
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1;
}

div.domain-card a.more-link {
  margin-top: 10px;
  color: #ffcc00;
  text-decoration: underline;
  font-weight: 500;
  font-size: 13px;
}

/* Additional safety measures */
.domain-card {
  /* Force 3D rendering context */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.domain-card-inner {
  /* Ensure proper 3D context */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(0);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .domain-card {
    width: 100% !important;
    max-width: 320px !important;
    height: 120px !important;
    margin: 8px auto !important;
  }
  
  .domain-card-front {
    font-size: 14px !important;
    padding: 12px !important;
  }
  
  .domain-card-back {
    font-size: 12px !important;
    padding: 10px !important;
  }
}

@media (max-width: 480px) {
  .domain-card {
    max-width: 280px !important;
    height: 100px !important;
  }
  
  .domain-card-front {
    font-size: 13px !important;
  }
  
  .domain-card-back {
    font-size: 11px !important;
  }
}

/* Image Card Styles - Matching Domain Cards */
.image-card {
  width: 240px;
  height: 140px;
  background-color: #0e0e0e;
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 32px 6px #bfa247, 0 0 8px 2px #bfa247, 0 4px 10px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.35s cubic-bezier(0.4,0.2,0.2,1), transform 0.35s cubic-bezier(0.4,0.2,0.2,1);
  font-family: 'Inter', sans-serif;
  position: relative;
  cursor: pointer;
  margin: 12px;
  overflow: hidden;
  /* Disable 3D transforms */
  transform: none !important;
  transform-style: flat !important;
  -webkit-transform-style: flat !important;
}

.image-card:hover {
  box-shadow: 0 0 60px 18px #c7a14add, 0 0 120px 36px #f8e9c255, 0 0 30px 8px #f8e9c299;
  transform: scale(1.09) translateY(-10px) !important;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.image-card:hover img {
  transform: scale(1.05);
}

/* Mobile optimizations for image cards */
@media (max-width: 768px) {
  .image-card {
    width: 100% !important;
    max-width: 320px !important;
    height: 120px !important;
    margin: 8px auto !important;
  }
}

@media (max-width: 480px) {
  .image-card {
    max-width: 280px !important;
    height: 100px !important;
  }
}

/* Hero Section Text Alignment Overrides - AGGRESSIVE */
.hero-section p,
.hero-section div,
.hero-section .content-box,
.hero-section * {
  text-align: center !important;
  text-align-last: center !important;
  -webkit-text-align-last: center !important;
  -moz-text-align-last: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force center alignment for all text in hero section */
section[style*="background:linear-gradient"] p,
section[style*="background:linear-gradient"] div,
section[style*="background:linear-gradient"] * {
  text-align: center !important;
  text-align-last: center !important;
  -webkit-text-align-last: center !important;
  -moz-text-align-last: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: block !important;
}

/* Target the specific container div */
.hero-section > div {
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Override any potential conflicting styles */
.hero-section p,
.hero-section div {
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
}

/* Specific hero content classes */
.hero-content {
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.hero-text {
  text-align: center !important;
  text-align-last: center !important;
  -webkit-text-align-last: center !important;
  -moz-text-align-last: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Nuclear option - reset everything in hero section */
.hero-section {
  text-align: center !important;
}

.hero-section * {
  text-align: center !important;
  text-align-last: center !important;
  -webkit-text-align-last: center !important;
  -moz-text-align-last: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  display: block !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

/* Hero Section Container Full Width Override */
section[style*="background:linear-gradient"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 80px 20px 60px 20px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Hero Content Full Width Override */
.hero-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Hero Text Full Width Override */
.hero-text {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 auto 32px auto !important;
  box-sizing: border-box !important;
}
.scd-wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.scd-domain{ text-align:center;font-size:clamp(2rem,3.2vw,2.8rem);font-weight:800;letter-spacing:.02em;color:#D6A247;margin:.2rem 0 .4rem}
.scd-eyebrow{letter-spacing:.18em;color:#D6A247;text-transform:uppercase;font-size:.95rem;margin:2rem 0 .8rem}
.scd-headline{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin:.2rem 0 .8rem}
.scd-lede{color:#d9d9d9;max-width:70ch}
.scd-bar{height:2px;width:88px;background:linear-gradient(90deg,#D6A247,transparent);border-radius:8px;margin:1rem auto 1.4rem}

.scd-pillgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 6px}
.scd-pill{border:1px solid rgba(221,183,83,.28);border-radius:999px;padding:.55rem .9rem;text-align:center;color:#f1f1f1;background:rgba(221,183,83,.06)}
@media (max-width:900px){.scd-pillgrid{grid-template-columns:repeat(2,1fr)}}

.scd-box{background:#0e0e0e;border:1px solid rgba(221,183,83,.18);border-radius:14px;padding:18px;box-shadow:0 0 22px rgba(221,183,83,.18);text-align:center !important}
.scd-panel{background:#0d0d0d;border:1px solid rgba(221,183,83,.22);border-radius:14px;padding:18px;box-shadow:0 0 24px rgba(221,183,83,.18)}
.scd-tight p{margin:.35rem 0;color:#cfcfcf}
.scd-kicker{font-weight:700;color:#fff;margin:.2rem 0 .3rem;text-align:center !important}

.scd-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px;text-align:center !important}
.scd-benefits p{margin:.2rem 0;text-align:center !important}
@media (max-width:900px){.scd-benefits{grid-template-columns:1fr}}

.scd-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0}
.scd-stage{background:#0f0f0f;border:1px solid rgba(221,183,83,.16);border-radius:12px;padding:14px;box-shadow:0 0 18px rgba(221,183,83,.16);font-size:1rem}
@media (max-width:900px){.scd-timeline{grid-template-columns:1fr}}

.scd-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.scd-btn{padding:.9rem 1.1rem;border-radius:10px;border:1px solid #b89339;color:#1a1300;background:linear-gradient(180deg,#D6A247,#c9a248);font-weight:700;box-shadow:0 8px 30px rgba(221,183,83,.35);text-decoration:none}

/* Center the value box while keeping left-aligned text */
.scd-wrap[aria-label="What this gives SkyCity"] .scd-box{
  max-width:980px;
  margin:10px auto 0;
}

/* Tighter vertical rhythm between hero pills and value box */
.scd-wrap[aria-label="Intro"]{margin-bottom:8px}

/* Cohesive spacing for evolution panel */
.scd-wrap[aria-label="Why now — evolution"] .scd-panel{padding:22px}
.scd-wrap[aria-label="Why now — evolution"]{margin:26px 0 30px}

/* Keep Set headers breathing after custom sections */
.scd-wrap + .full-width-black{margin-top:20px}