/* ══════════════════════════════════════════════════════════════════════════
   QAFILAH
   A journey through the day: night → dawn → morning → garden → dusk → night.
   Warm, emotional, Islamic-influenced. Dependency-free. Built to last.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Night */
  --night:      #10152E;
  --night-2:    #1A2246;
  --night-3:    #0B0F24;
  /* Dawn */
  --dawn:       #E4886B;
  --dawn-2:     #F0B492;
  --dawn-soft:  #F7DAC6;
  /* Cream / parchment */
  --cream:      #FBF3E4;
  --cream-2:    #F6EAD2;
  --cream-3:    #F1E1C4;
  /* Islamic green */
  --emerald:    #10725F;
  --emerald-2:  #0A4A3E;
  /* Gold (brand) */
  --gold:       #F4B860;
  --gold-deep:  #D8942B;
  --gold-soft:  #FBE7B0;
  /* Ink / text */
  --ink:        #2C2417;
  --ink-soft:   #6E6049;
  --oncream:    #2C2417;
  --ondark:     #FBF3E4;
  --ondark-soft:#D9CDB4;

  --line-warm:  rgba(44,36,23,.12);
  --line-gold:  rgba(216,148,43,.30);
  --line-dark:  rgba(251,231,176,.16);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar:      "Amiri", "Scheherazade New", serif;

  --maxw: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; background: var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* Islamic geometric pattern layer (references #khatam) */
.geo-layer { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold-soft); opacity: .05; z-index: 0; pointer-events: none; }
.geo-soft { opacity: .045; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .1px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .25s; white-space: nowrap;
}
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-gold {
  color: #3A2708; background: linear-gradient(180deg, #FCD98C 0%, var(--gold) 52%, var(--gold-deep) 100%);
  box-shadow: 0 10px 30px rgba(216,148,43,.34), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(216,148,43,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost { color: var(--ondark); background: rgba(251,231,176,.06); border-color: var(--line-dark); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(251,231,176,.14); transform: translateY(-2px); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background .3s, backdrop-filter .3s, border-color .3s; }
.nav.scrolled { background: rgba(16,21,46,.82); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line-dark); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.2px; color: var(--ondark); }
.brand-ar { font-family: var(--font-ar); font-weight: 700; color: var(--gold); font-size: 20px; margin-left: 2px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { color: var(--ondark-soft); font-size: 15px; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--gold); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-dark); border-radius: 12px; background: rgba(251,231,176,.05); cursor: pointer; }
.nav-toggle span { width: 18px; height: 2px; background: var(--ondark); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 6px 24px 22px; background: rgba(16,21,46,.96); backdrop-filter: blur(14px); }
.nav-mobile a { padding: 13px 4px; color: var(--ondark-soft); border-bottom: 1px solid var(--line-dark); font-weight: 500; }
.nav-mobile .btn { margin-top: 14px; }

/* ── HERO — night ────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; text-align: center; color: var(--ondark);
  padding: 72px 0 150px; min-height: 90vh; display: flex; align-items: center;
  background: linear-gradient(180deg, #0B0F26 0%, #141B3C 52%, #22284F 100%);
}
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-glow {
  position: absolute; left: 50%; bottom: -60px; width: 900px; max-width: 130%; height: 380px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(244,184,96,.34), rgba(228,136,107,.16) 42%, transparent 70%);
  filter: blur(10px); z-index: 1; animation: dawnPulse 7s var(--ease) infinite;
}
.lanterns { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lantern { position: absolute; width: 15px; height: 22px; border-radius: 8px 8px 11px 11px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep)); box-shadow: 0 0 20px 5px rgba(244,184,96,.5); }
.lantern::before { content: ""; position: absolute; top: -5px; left: 50%; width: 6px; height: 5px; transform: translateX(-50%); background: var(--gold-deep); border-radius: 2px 2px 0 0; }
.lantern::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 2px; height: 6px; transform: translateX(-50%); background: var(--gold-soft); }
.lantern.l1 { top: 20%; left: 13%; animation: floatL 8s var(--ease) infinite; }
.lantern.l2 { top: 30%; right: 16%; transform: scale(.8); animation: floatL 9.5s var(--ease) .8s infinite; }
.lantern.l3 { top: 15%; right: 30%; transform: scale(.62); opacity: .8; animation: floatL 7s var(--ease) 1.6s infinite; }

.geo-layer { }
.hero-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-soft); padding: 8px 18px; border: 1px solid var(--line-gold); border-radius: 999px; background: rgba(244,184,96,.06); margin-bottom: 28px; }
.star-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.06; letter-spacing: -.5px; max-width: 17ch; text-wrap: balance; margin-bottom: 26px; }
.hero-title em { display: block; margin-top: .1em; font-weight: 600; background: linear-gradient(100deg, var(--gold-soft), var(--gold) 45%, var(--dawn-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-sub { font-size: clamp(1.05rem, 1.9vw, 1.24rem); color: var(--ondark-soft); max-width: 56ch; margin-bottom: 34px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
.hero-note { font-size: 13.5px; color: rgba(217,205,180,.7); letter-spacing: .2px; }

/* Silhouette on the horizon */
.hero-scene { position: absolute; left: 0; bottom: 0; width: 100%; height: 130px; z-index: 2; pointer-events: none; }
.hero-scene svg { width: 100%; height: 100%; }
.hero-scene .dune { fill: #090D20; }
.hero-scene .camels { fill: #05070f; }

/* ── HEART — dawn ────────────────────────────────────────────────────────── */
.heart { position: relative; text-align: center; padding: 110px 0 90px;
  background: linear-gradient(180deg, #22284F 0%, #6C3F63 26%, #C9776A 52%, #ECA98A 70%, var(--cream) 96%); }
.heart-inner { position: relative; z-index: 2; max-width: 760px; }
.heart .kicker { color: var(--gold-soft); }
.heart-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.14; letter-spacing: -.4px; color: #FFF7EE; text-wrap: balance; margin: 14px 0 40px; text-shadow: 0 2px 30px rgba(20,10,30,.35); }
.arch-frame { position: relative; padding: 46px 40px 40px; }
.arch-frame .arch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.arch-frame { background: linear-gradient(180deg, rgba(251,243,228,.92), rgba(251,243,228,.86)); border-radius: 160px 160px 22px 22px; box-shadow: 0 30px 70px rgba(90,40,50,.24); }
.heart-body { position: relative; z-index: 1; font-size: 1.14rem; color: var(--ink); margin-bottom: 16px; }
.heart-body strong { color: var(--gold-deep); font-weight: 700; }
.heart-body:last-child { margin-bottom: 0; }
.ornament-divider { display: flex; justify-content: center; padding-top: 54px; }
.ornament-divider svg { width: 210px; height: 26px; }

/* ── A day, together — moments timeline ─────────────────────────────────── */
.daylife { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.moments { max-width: 640px; margin: 0 auto; }
.moment { display: grid; grid-template-columns: 84px 26px 1fr; align-items: start; }
.moment-time { text-align: right; padding: 15px 12px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--gold-deep); }
.moment-rail { position: relative; align-self: stretch; }
.moment-rail::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: -6px; width: 2px; background: rgba(216,148,43,.26); }
.moment:last-child .moment-rail::before { display: none; }
.moment-dot { position: absolute; left: 4px; top: 17px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, #FCD98C, var(--gold-deep)); box-shadow: 0 0 0 5px rgba(244,184,96,.14), 0 0 14px rgba(244,184,96,.55); }
.moment-body { padding: 8px 0 30px 20px; }
.moment-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--ink); margin-bottom: 6px; }
.moment-body p { color: var(--ink-soft); font-size: 1.03rem; }
@media (max-width: 620px) {
  .moment { grid-template-columns: 62px 22px 1fr; }
  .moment-time { font-size: .92rem; padding-right: 8px; }
  .moment-body { padding-left: 14px; }
}

/* ── Section shell + heads ───────────────────────────────────────────────── */
.section { position: relative; padding: 100px 0; }
.kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
.kicker-light { color: var(--gold-soft); }
.sec-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sec-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.14; letter-spacing: -.5px; color: var(--ink); text-wrap: balance; }
.sec-title em { color: var(--gold-deep); font-weight: 600; }
.sec-title.on-dark { color: var(--ondark); }
.sec-title.on-dark em { color: var(--gold-soft); }
.sec-lead { margin-top: 16px; font-size: 1.12rem; color: var(--ink-soft); }
.sec-lead.on-dark { color: var(--ondark-soft); }

/* ── Every generation — morning ─────────────────────────────────────────── */
.gen-section { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.gen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gen-card { text-align: center; background: #FFFDF7; border: 1px solid var(--line-warm); border-radius: 22px; padding: 34px 22px 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.gen-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(90,60,20,.14); border-color: var(--line-gold); }
.gen-arch { width: 80px; height: 96px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 40px 40px 16px 16px; background: linear-gradient(180deg, #FFF6DE, #F6E4BC); border: 1px solid var(--line-gold); box-shadow: inset 0 2px 10px rgba(255,255,255,.7); }
.gen-ico { display: grid; place-items: center; color: var(--gold-deep); }
.gen-ico svg { width: 34px; height: 34px; }
.gen-age { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--emerald); background: rgba(16,114,95,.09); border: 1px solid rgba(16,114,95,.2); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.gen-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin-bottom: 9px; color: var(--ink); }
.gen-card p { font-size: .96rem; color: var(--ink-soft); }

/* ── What's inside — day ────────────────────────────────────────────────── */
.inside-section { background: var(--cream-2); }
.pillar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.pillar { background: #FFFDF7; border: 1px solid var(--line-warm); border-radius: 20px; padding: 28px 22px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.pillar:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(90,60,20,.13); border-color: var(--line-gold); }
.pillar-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 18px; color: var(--gold-deep); background: linear-gradient(180deg, #FFF3D6, #F7E3B7); border: 1px solid var(--line-gold); }
.pillar-ico svg { width: 26px; height: 26px; }
.pillar h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: 8px; color: var(--ink); }
.pillar p { font-size: .93rem; color: var(--ink-soft); }
.pillar strong { color: var(--gold-deep); font-weight: 700; }

/* ── Special — day alt ──────────────────────────────────────────────────── */
.special-section { background: linear-gradient(180deg, var(--cream-2), var(--cream-3)); }
.special-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.special { background: #FFFDF7; border: 1px solid var(--line-warm); border-left: 3px solid var(--gold); border-radius: 8px 18px 18px 8px; padding: 28px 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.special:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(90,60,20,.13); }
.special h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; margin-bottom: 9px; color: var(--ink); }
.special p { font-size: .97rem; color: var(--ink-soft); }

/* ── Values — emerald garden ────────────────────────────────────────────── */
.values-section { background: linear-gradient(165deg, var(--emerald) 0%, var(--emerald-2) 100%); color: var(--ondark); overflow: hidden; }
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; z-index: 2; }
.value { text-align: center; background: rgba(251,243,228,.05); border: 1px solid rgba(251,231,176,.16); border-radius: 20px; padding: 30px 18px; transition: transform .3s var(--ease), background .3s, border-color .3s; }
.value:hover { transform: translateY(-6px); background: rgba(251,243,228,.09); border-color: var(--line-gold); }
.value-ar { display: block; font-family: var(--font-ar); font-size: 2.2rem; line-height: 1; color: var(--gold-soft); margin-bottom: 14px; }
.value h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 8px; color: var(--ondark); }
.value p { font-size: .92rem; color: var(--ondark-soft); }

/* ── Languages ──────────────────────────────────────────────────────────── */
.lang-section { background: var(--cream); text-align: center; }
.lang-inner { max-width: 780px; margin-inline: auto; }
.lang-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.lang-chip { font-size: 1.05rem; font-weight: 600; padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line-gold); background: #FFFDF7; color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s; }
.lang-chip:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(90,60,20,.12); }

/* ── Join — dusk to night ───────────────────────────────────────────────── */
.join { position: relative; overflow: hidden; text-align: center; padding: 120px 0 130px;
  background: linear-gradient(180deg, var(--cream) 0%, #E7A184 26%, #7A4A6A 58%, var(--night) 100%); }
.join .starfield { z-index: 0; }
.join .lanterns { z-index: 1; }
.join .lantern.l1 { top: 40%; left: 14%; } .join .lantern.l3 { top: 32%; right: 16%; }
.join-inner { position: relative; z-index: 3; max-width: 640px; margin-inline: auto; }
.crescent { width: 58px; margin: 0 auto 22px; filter: drop-shadow(0 0 16px rgba(244,184,96,.6)); }
.join-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.1rem); color: #FFF7EE; letter-spacing: -.5px; text-shadow: 0 2px 30px rgba(10,6,20,.5); }
.join-sub { color: #F3E4D5; font-size: 1.14rem; margin: 14px 0 32px; }
.waitlist-form { display: flex; gap: 10px; max-width: 470px; margin: 0 auto 16px; flex-wrap: wrap; }
.waitlist-form input { flex: 1; min-width: 210px; padding: 16px 20px; border-radius: 999px; font: inherit; font-size: 15px; color: #FFF7EE; background: rgba(10,10,25,.34); border: 1px solid rgba(251,231,176,.28); outline: none; transition: border-color .2s; }
.waitlist-form input::placeholder { color: rgba(243,228,213,.6); }
.waitlist-form input:focus { border-color: var(--gold); }
.join-fine { font-size: 13.5px; color: rgba(243,228,213,.72); }

/* ── Footer — night ─────────────────────────────────────────────────────── */
.footer { position: relative; overflow: hidden; background: var(--night); color: var(--ondark-soft); padding: 70px 0 34px; }
.footer-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer-brand { max-width: 320px; }
.footer-brand .brand-name { font-size: 24px; }
.footer-brand p { color: var(--ondark-soft); font-size: .96rem; margin-top: 12px; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h4 { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; }
.footer-col a { display: block; color: var(--ondark-soft); font-size: .95rem; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13.5px; }

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes floatL { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes dawnPulse { 0%,100% { opacity: .72; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lantern, .hero-glow { animation: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .gen-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .special-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav.open .nav-mobile { display: flex; }
  .nav.open { background: rgba(16,21,46,.97); backdrop-filter: blur(14px); border-bottom-color: var(--line-dark); }
}
@media (max-width: 620px) {
  .section { padding: 74px 0; }
  .gen-grid, .pillar-grid, .values-grid { grid-template-columns: 1fr; }
  .hero { padding-bottom: 120px; }
  .btn-lg, .hero-cta { width: 100%; }
  .footer-inner { flex-direction: column; gap: 30px; }
  .arch-frame { padding: 40px 26px 32px; border-radius: 120px 120px 20px 20px; }
}

/* ══ AT A GLANCE ═══════════════════════════════════════════════════════════
   Sits directly under the hero, above the narrative sections.

   Why it exists: the concrete answer to "what does this actually do" used to
   live in #inside, ~490 words down — past the hero, the heart, the day-in-the-
   life and the generations grid. A visitor scanning for substance had to read
   half the page to find any, and when they got there it was labelled in our own
   vocabulary (Daily Deen, Ilm, Amanah Impact) rather than plain words.

   This band is deliberately plain and scannable in about five seconds. The
   narrative below is untouched — it now has something concrete standing in
   front of it rather than doing that job alone.
   ------------------------------------------------------------------------ */
.glance {
  background: var(--cream);
  border-bottom: 1px solid var(--line-warm);
  padding: 30px 0 34px;
}
.glance-in { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.glance-lead {
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--emerald);
  margin: 0 0 20px;
}
.glance-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.glance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 14px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-warm);
}
.glance-item svg { width: 24px; height: 24px; color: var(--gold-deep); flex-shrink: 0; }
.glance-item b { font-size: 13.5px; color: var(--ink); font-weight: 650; line-height: 1.3; }
.glance-item span { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

.glance-note { text-align: center; margin: 20px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.glance-note a { color: var(--gold-deep); font-weight: 650; border-bottom: 1px solid var(--line-gold); }

@media (max-width: 900px) { .glance-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .glance { padding: 24px 0 26px; }
  .glance-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .glance-item { padding: 12px 6px; gap: 7px; }
  .glance-item b { font-size: 12.5px; }
  .glance-item span { font-size: 11.5px; }
}

/* ══ SEASONAL CHALLENGES — sixth pillar ════════════════════════════════════
   The grid was repeat(5,1fr) for exactly five pillars. A sixth would orphan
   one card on a second row, so it becomes six across — which also rhymes with
   the six-item "at a glance" band above it. A mid breakpoint keeps the cards
   from getting too narrow between 1160px and tablet.

   The "coming" chip is not decoration. Seasonal Challenges ships toward
   Ramadan 2027, and the honesty guardrail is that we never present it as
   available today. If it ever reads as live, remove the chip only when
   product confirms it is.
   ------------------------------------------------------------------------ */
.pillar-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) and (min-width: 981px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }

.pillar-soon {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 2px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(216,148,43,.12);
  border: 1px solid var(--line-gold);
  border-radius: 100px;
  padding: 2px 7px;
  white-space: nowrap;
}