/* ══════════════════════════════════════════════════
   INTRO STRIP
══════════════════════════════════════════════════ */
.intro-strip {
  padding:40px 48px; text-align:center;
  background:var(--intro-bg);
  transition:background .6s ease;
  position:relative;
}
.intro-strip p {
  font-family:'Nunito',sans-serif;
  font-size:clamp(15px,1.8vw,19px); font-weight:600;
  color:rgba(255,255,255,.75); line-height:1.8;
  max-width:760px; margin:0 auto;
}
.intro-strip p strong { color:white; }

/* ══════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════ */
.section { padding:96px 48px; max-width:1160px; margin:0 auto; }
.sec-label {
  font-family:'Nunito Sans',sans-serif; font-size:10px;
  font-weight:700; letter-spacing:3.5px; text-transform:uppercase;
  color:var(--text-secondary);
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  transition:color .5s;
}
.sec-label::before {
  content:''; width:18px; height:2px;
  background:var(--mg); border-radius:1px;
  transition:background .5s;
}
.sec-title {
  font-family:'Baloo 2',cursive;
  font-size:clamp(28px,4vw,44px); font-weight:800;
  color:var(--text-primary); line-height:1; margin-bottom:16px;
  transition:color .5s;
}
.sec-sub {
  font-family:'Nunito',sans-serif; font-size:17px; font-weight:400;
  color:var(--text-secondary); line-height:1.7;
  max-width:560px; margin-bottom:56px; transition:color .5s;
}
#experience { background:var(--section-bg); transition:background .6s ease; }

/* ══════════════════════════════════════════════════
   EXPERIENCE CARDS — with 3D tilt
══════════════════════════════════════════════════ */
.what-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; }
.what-card {
  background:var(--card-bg); border-radius:24px; padding:40px 32px;
  border:1px solid var(--card-border); position:relative; overflow:hidden;
  cursor:default;
  transition:box-shadow .4s ease, background .5s, border-color .5s;
  transform-style:preserve-3d;
  will-change:transform;
}
/* Colour accent top bar */
.what-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:24px 24px 0 0;
  transition:height .3s var(--spring);
}
.what-card:hover::before { height:6px; }
.what-card.feel::before { background:linear-gradient(90deg,var(--mg),var(--mg-l)); }
.what-card.immerse::before { background:linear-gradient(90deg,var(--sk),var(--sk-l)); }
.what-card.connect::before { background:linear-gradient(90deg,var(--fr),var(--fr-m)); }
[data-theme="light"] .what-card:hover {
  box-shadow:0 20px 48px rgba(30,21,8,.1), 0 8px 16px rgba(30,21,8,.06);
}
[data-theme="dark"] .what-card:hover {
  box-shadow:0 20px 48px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.3);
}
/* Shimmer on hover */
.what-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06) 0%, transparent 65%);
  opacity:0; transition:opacity .3s; pointer-events:none; border-radius:24px;
}
.what-card:hover::after { opacity:1; }

.what-number {
  font-family:'Baloo 2',cursive; font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--text-meta);
  margin-bottom:20px; display:block; transition:color .5s;
}
.what-icon {
  margin-bottom:20px;
  transition:transform .4s var(--spring);
}
.what-card:hover .what-icon { transform:scale(1.08) rotate(-3deg); }
.what-title {
  font-family:'Baloo 2',cursive; font-size:28px; font-weight:800;
  color:var(--text-primary); margin-bottom:12px; line-height:1; transition:color .5s;
}
.what-desc {
  font-family:'Nunito',sans-serif; font-size:14px;
  color:var(--text-secondary); line-height:1.7; transition:color .5s;
}