/* ===========================================================
   Taal landing page (/taal) — Kansa & Pitali
   Loaded after brand.css, on this page only.

   Everything is namespaced under .bloomwave-taal or a .taal-*
   class. There are deliberately NO bare element selectors
   (body, h1, p, img, footer) and no .btn rule, because this
   sheet shares the page with Bootstrap, main.css and the
   shared navbar/footer.
   =========================================================== */

.bloomwave-taal{
  /* Page-local palette. Prefixed --t-* so it cannot collide with
     the brand tokens in brand.css. CTA + trust colours are pulled
     from the brand tokens so buttons match the rest of the site. */
  --t-sand:#EFE6D5;
  --t-sand-2:#E5D8C0;
  --t-bronze:#8A5A2B;
  --t-bronze-d:#5F3D1C;
  --t-brick:#A5331D;
  --t-brass:#C69A3F;
  --t-ink:#2A201A;
  --t-ink-soft:#5B4C3F;
  --t-line:#D8C8AC;
  --t-cta:var(--saffron);
  --t-cta-d:var(--saffron-deep);
  --t-trust:var(--brand);
}

.taal-main{
  background:var(--t-sand);
  color:var(--t-ink);
  font-size:17px;
  line-height:1.6;
}
.taal-main p{margin:0 0 1rem}
.taal-main .wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- page-local button ----------
   Named .taal-btn, not .btn — Bootstrap already owns .btn. */
.taal-btn{
  display:inline-flex;align-items:center;gap:.5em;border:0;cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;
  padding:.72em 1.25em;border-radius:999px;text-decoration:none;
  transition:transform .12s ease,background .12s ease,color .12s ease;
}
.taal-btn-wa{background:var(--t-cta);color:#fff}
.taal-btn-wa:hover,.taal-btn-wa:focus{background:var(--t-cta-d);color:#fff;text-decoration:none;transform:translateY(-1px)}
.taal-btn-ghost{background:transparent;color:#F6F3E6;border:1.5px solid rgba(233,196,106,.6)}
.taal-btn-ghost:hover,.taal-btn-ghost:focus{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.taal-wa-ic{width:1.05em;height:1.05em;fill:currentColor;flex:none}

/* =========================================================
   HERO — sits inside the shared dark .header.page-header,
   so the fixed navbar keeps its light-on-dark treatment.
   ========================================================= */
.taal-hero .taal-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.taal-hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.1;margin:0}
.taal-hero h1 .em{color:var(--gold-soft)}
.taal-hero .taal-lede{
  font-size:1.12rem;color:#ECE9D8;max-width:38ch;margin:18px 0 26px;line-height:1.7;
}
.taal-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.taal-chips{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:26px;font-size:.95rem;color:#DCE3D4}
.taal-chips span{display:inline-flex;align-items:center;gap:.5em}
.taal-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-soft);flex:none}

.taal-hero-fig{position:relative;margin:0}
.taal-hero-fig img{
  width:100%;height:auto;display:block;border-radius:14px;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.7);
}
.taal-hero-badge{
  position:absolute;left:-10px;bottom:-14px;background:var(--t-bronze-d);color:#F3E7D2;
  font-weight:600;font-size:.9rem;padding:.55em .9em;border-radius:10px;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
}
.taal-hero-badge b{color:#fff}

/* =========================================================
   SOUND — the centrepiece: two players, Kansa vs Pital
   ========================================================= */
.taal-sound{background:linear-gradient(180deg,var(--t-bronze-d),#4A2F16);color:#F4E9D6;padding:64px 0}
.taal-sound .wrap{text-align:center}
.taal-sound h2{font-size:clamp(1.9rem,4.2vw,2.8rem);color:#fff;margin:0}
.taal-sound .taal-lead{color:#E6D3B6;max-width:56ch;margin:14px auto 34px;font-size:1.1rem}

.taal-players{display:grid;grid-template-columns:1fr 1fr;gap:26px;text-align:left}
.taal-player-card{margin:0}
.taal-player-card h3{
  font-size:1.35rem;color:#fff;margin:0 0 4px;display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
}
.taal-player-card h3 .taal-metal-tag{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
}
.taal-player-card.is-kansa h3 .taal-metal-tag{background:rgba(233,196,106,.18);color:var(--gold-soft);border:1px solid rgba(233,196,106,.45)}
.taal-player-card.is-pital h3 .taal-metal-tag{background:rgba(198,154,63,.18);color:#E8C98A;border:1px solid rgba(198,154,63,.5)}
.taal-player-card .taal-player-note{color:#D9C3A2;font-size:.96rem;margin:0 0 14px}

.taal-player{
  aspect-ratio:16/9;background:#2C1C0D;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px -28px #000;
}
.taal-player video{width:100%;height:100%;object-fit:contain;background:#2C1C0D;display:block}
.taal-listen-note{margin-top:26px;color:#D9C3A2;font-size:.98rem}

/* =========================================================
   GENERIC SECTION
   ========================================================= */
.taal-sec{padding:60px 0}
.taal-sec h2{font-size:clamp(1.8rem,3.8vw,2.5rem);color:var(--t-ink);margin:0}
.taal-eyebrow{color:var(--t-brick);font-weight:600;margin-bottom:6px;font-size:.95rem}

/* ---------- pricing ---------- */
.taal-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.taal-metal{
  background:#fff;border-radius:14px;padding:26px 26px 22px;
  border:1px solid var(--t-line);border-top:5px solid var(--t-bronze);
}
.taal-metal.is-brass{border-top-color:var(--t-brass)}
.taal-metal h3{font-size:1.5rem;color:var(--t-bronze-d);margin:0}
.taal-metal.is-brass h3{color:#9A6A1E}
.taal-metal .taal-meta{color:var(--t-ink-soft);font-size:.95rem;margin:2px 0 16px}
.taal-rows{list-style:none;margin:0;padding:0}
.taal-rows li{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-top:1px dashed var(--t-line)}
.taal-rows li:first-child{border-top:0}
.taal-rows .taal-w{color:var(--t-ink)}
/* Matches the .combo-card .price convention on /shop — Poppins keeps the
   lining figures Cormorant Garamond's old-style numerals would spoil. */
.taal-rows .taal-pr{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.2rem;color:var(--kumkum)}
.taal-oos{font-size:.82rem;color:var(--t-cta-d);font-weight:600;margin-left:8px}
.taal-madeto{margin-top:14px;font-size:.9rem;color:var(--t-ink-soft)}
.taal-price-foot{margin-top:20px;color:var(--t-ink-soft);font-size:.96rem}

/* ---------- guarantee ---------- */
.taal-guarantee{
  background:var(--t-sand-2);border-radius:16px;padding:30px;margin-top:6px;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
}
.taal-seal{
  font-family:'Cormorant Garamond',serif;font-weight:700;color:#fff;background:var(--t-trust);
  width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1;flex:none;
}
.taal-seal b{font-size:2.2rem}
.taal-seal small{font-family:'Poppins',sans-serif;font-size:.62rem;letter-spacing:.12em;margin-top:3px}
.taal-guarantee h3{font-size:1.35rem;color:var(--t-ink);margin:0 0 6px}
.taal-guarantee p{margin:0;color:var(--t-ink-soft)}

/* ---------- catalogue gallery ---------- */
.taal-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.taal-gal img{
  width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid var(--t-line);box-shadow:0 10px 26px -18px rgba(95,61,28,.5);
}
.taal-made{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.taal-made span{
  background:#fff;border:1px solid var(--t-line);border-radius:999px;
  padding:.45em 1em;font-size:.94rem;color:var(--t-bronze-d);
}

/* ---------- final CTA ---------- */
.taal-final{background:var(--t-cta);color:#fff;text-align:center;padding:60px 0}
.taal-final h2{color:#fff;font-size:clamp(1.8rem,3.8vw,2.5rem);margin:0}
.taal-final p{color:#FFE9DD;max-width:48ch;margin:12px auto 26px;font-size:1.08rem}
.taal-final .taal-btn-wa{background:#fff;color:var(--t-cta-d)}
.taal-final .taal-btn-wa:hover,.taal-final .taal-btn-wa:focus{background:#FFF3EC;color:var(--t-cta-d)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .taal-players{grid-template-columns:1fr;gap:30px}
}
@media (max-width:820px){
  .taal-hero .taal-hero-grid{grid-template-columns:1fr;gap:30px}
  .taal-hero-fig{order:-1}
  .taal-hero .taal-lede{max-width:none}
  .taal-price-grid{grid-template-columns:1fr}
  .taal-gal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .taal-gal{grid-template-columns:1fr}
  .taal-guarantee{grid-template-columns:1fr;text-align:center;justify-items:center}
  .taal-hero-badge{left:0}
  .taal-btn{font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  .taal-main *,.taal-hero *{transition:none !important;animation:none !important}
}