:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#ffb86b;
  --muted:#94a3b8;
  --glass: rgba(255,255,255,0.04);
  --tile-gap:10px;
  --tile-rows:4;
  --tile-cols:6;
  --tile-size:110px; /* base; responsive adjustments below */
  --transition:600ms cubic-bezier(.2,.9,.3,1);
  --stagger:80ms;
}

.hero{
  min-height:80vh;
  display:flex;align-items:center;justify-content:center;padding:48px;
  gap:40px;box-sizing:border-box;
  background:linear-gradient(180deg,#071022 0%,var(--bg) 100%);color:#e6eef8;
}

.container-hero{
  max-width:1200px;width:100%;display:grid;grid-template-columns:1fr 640px;align-items:center;gap:36px;
}

/* Left column content */
.content-hero{padding:28px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:16px}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:0.06em;margin-bottom:12px;font-size:13px}
.hero h1{font-size:40px;line-height:1.03;margin:0 0 16px; color: #e6eef8;}
p.lead{color:var(--muted);margin:0 0 22px;font-size:15px}
.ctas{display:flex;gap:12px}
.btn-hero{padding:12px 18px;border-radius:10px;border:0;font-weight:700;cursor:pointer; text-decoration: none; display: inline-block;}
.btn-primary-hero{background:linear-gradient(90deg,var(--accent),#ffd8a8);color:#081224}
.btn-ghost-hero{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* Right: tile grid */
.grid-wrap{display:flex;align-items:center;justify-content:center}
.tile-grid{
  width:100%;display:grid;grid-template-rows:repeat(var(--tile-rows),1fr);grid-template-columns:repeat(var(--tile-cols),1fr);gap:var(--tile-gap);
  perspective:1200px;transform-style:preserve-3d;
  padding:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:16px
}
.tile{position:relative;width:100%;padding-top:100%;cursor:pointer;transform-style:preserve-3d}
.tile-inner{position:absolute;inset:0;transition:transform var(--transition);transform-style:preserve-3d}

.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center; background-size: cover; background-position: center;}
.face.front{background-color: #262f3a; box-shadow: 0 6px 18px rgba(2,6,23,0.6);}
.face.back{transform:rotateX(180deg);background:linear-gradient(135deg,#dbe6f7 0%, #fffbf2 100%);color:#081224;font-weight:800}

/* material textures */
.mat-steel{background-image:url('../images/steel-backbone-rising-a-dance-of-rebar-and-formwork-in-the-heart-of-an-ambitious-construction-site-photo.jpg');} 
.mat-concrete{background-image:url('../images/concrete-panels-with-holes-grey-tone-texture-for-industrial-use-free-photo.jpeg');} 
.mat-wood{background-image:url('../images/1-wood-modern-architectural-design-featuring-textured-wood-and-concrete-surfaces-free-photo.jpeg');}
.mat-tile{background-image:url('../images/textured-gray-concrete-tiles-arranged-in-an-artistic-pattern-free-photo.jpeg');}
.mat-wall{background-image:url('../images/industrial-concrete-wall-with-dramatic-downlighting-and-blue-tinted-surface-featuring-geometric-panel-patterns-and-metallic-rivets-in-modern-brutalist-architectural-style-scale-free-photo.jpg');}

.label{position:absolute;left:8px;bottom:8px;padding:6px 8px;border-radius:6px;background:rgba(0,0,0,0.6);font-size:12px; color: white;}

/* flipped state */
.flipped .tile-inner{transform:rotateX(180deg)}

/* Hover depth */
.tile:hover .face.front{transform:translateZ(18px)}

/* Responsive */
@media (max-width:1100px){
  .container-hero{grid-template-columns:1fr}
  .grid-wrap{order:-1;margin-bottom:18px}
}
@media (max-width:720px){
  :root{--tile-rows:3;--tile-cols:4}
  .container-hero{gap:18px}
  .hero h1{font-size:28px}
}

/* small animation helper for wave reveal */
.wave-on .tile-inner{transition-duration: var(--transition)}

/* accessibility focus */
.tile:focus{outline:3px solid rgba(255,184,107,0.18)}