/* === Bloom Home — link-in-bio (/bio) — Phase W9 ===
 * Creative app-like landing. Mobile-first; centered column on desktop. */
:root{
  --brown:#6E4528; --olive:#5F7138; --cream:#F4ECDD; --gold:#C9A66B;
  --ink:#3A2A1E; --muted:#7E8A5C;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body.bio{
  font-family:'Tajawal',system-ui,sans-serif;
  color:var(--ink); line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 70% -10%, #F4F7EC 0%, #EFEADD 45%, #E7E2D2 100%);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(20px,6vh,56px) 16px 40px;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* floating decorative motif */
.bio-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bio-bg .petal{position:absolute;font-size:34px;opacity:.16;filter:saturate(.6);
  animation:bioFloat 14s ease-in-out infinite;}
.bio-bg .p1{top:8%;right:10%;}
.bio-bg .p2{top:22%;left:8%;animation-delay:-3s;font-size:26px;}
.bio-bg .p3{bottom:14%;left:14%;animation-delay:-6s;}
.bio-bg .p4{bottom:24%;right:8%;animation-delay:-9s;font-size:28px;}
@keyframes bioFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.bio-bg .petal{animation:none;}}

.bio-wrap{position:relative;z-index:1;width:100%;max-width:480px;text-align:center;}

/* header / identity */
.bio-head{margin-bottom:26px;}
.bio-logo{height:82px;width:auto;margin:0 auto 10px;
  filter:drop-shadow(0 8px 18px rgba(110,69,40,.18));}
.bio-wordmark{font-family:'Dancing Script',cursive;font-size:38px;color:var(--brown);line-height:1;}
.bio-tag{margin-top:8px;color:var(--muted);font-size:14.5px;font-weight:500;max-width:340px;margin-inline:auto;}

/* links */
.bio-links{display:flex;flex-direction:column;gap:13px;}
.bio-btn{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  border:1px solid rgba(110,69,40,.10);
  border-radius:18px;padding:15px 18px;
  box-shadow:0 6px 18px rgba(110,69,40,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bio-btn:hover,.bio-btn:focus-visible{transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(110,69,40,.16);background:#fff;}
.bio-btn:active{transform:translateY(-1px) scale(.99);}
.bio-btn-ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:var(--cream);color:var(--brown);}
.bio-btn-label{flex:1;text-align:start;font-weight:700;font-size:16px;color:var(--ink);}
.bio-btn-chev{color:var(--gold);font-size:18px;}

/* per-channel accent */
.bio-btn.ch-whatsapp .bio-btn-ico{background:#E4F8EB;color:#1FA855;}
.bio-btn.ch-store .bio-btn-ico{background:#EAF3DE;color:var(--olive);}
.bio-btn.ch-tiktok .bio-btn-ico{background:#EEE9F3;color:#111;}
.bio-btn.ch-instagram .bio-btn-ico{background:#FCE8EF;color:#C13584;}
.bio-btn.ch-portfolio .bio-btn-ico{background:#F3EADB;color:var(--gold);}

.bio-empty{color:var(--muted);padding:30px 0;}

/* footer */
.bio-foot{margin-top:30px;color:var(--muted);font-size:13.5px;}
.bio-foot-link{font-weight:700;color:var(--olive);}
.bio-foot-sep{margin:0 8px;opacity:.5;}
.bio-copy{margin-top:10px;font-size:12px;opacity:.7;}

@media (min-width:640px){
  .bio-logo{height:92px;}
  .bio-wordmark{font-size:44px;}
  .bio-btn-label{font-size:16.5px;}
}

/* consent banner (reuses tracking.js #bloomConsent) */
#bloomConsent{position:fixed;inset-inline:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid #EFEDE6;box-shadow:0 -6px 20px rgba(0,0,0,.06);}
#bloomConsent .cc-inner{max-width:760px;margin:0 auto;padding:14px 16px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;}
#bloomConsent .cc-text{font-size:13px;color:var(--ink);flex:1;min-width:220px;}
#bloomConsent .cc-text a{color:var(--olive);font-weight:700;}
#bloomConsent .cc-actions{display:flex;gap:8px;}
#bloomConsent .btn{border:none;border-radius:11px;padding:9px 18px;font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer;}
#bloomConsent .btn-primary{background:var(--olive);color:#fff;}
#bloomConsent .btn-ghost{background:var(--cream);color:var(--brown);}