/* ============================================================
   FLUENTLY.IO  V5 — DASHBOARD HERO · 5 PILLARS · DISCOVER · EXPLORE
   Same system (tokens/components), restructured product story.
   ============================================================ */

/* ---------- HERO DASHBOARD ---------- */
.dash{ background:var(--sage); border-radius:var(--r-xl); padding:14px; box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.65);
  border:1px solid var(--edge); display:flex; flex-direction:column; gap:11px; position:relative; z-index:2; min-height:486px; }
.dash__greet{ display:flex; align-items:center; gap:11px; }
.dash__greet .ava{ width:42px; height:42px; border-radius:13px; background:var(--coral-tint); display:grid; place-items:center; overflow:hidden; flex:none; border:1px solid var(--edge); }
.dash__greet .ava img{ width:34px; }
.dash__greet b{ font-size:1rem; line-height:1.1; }
.dash__greet span{ font-size:.78rem; color:var(--muted); font-weight:700; }
.dash__greet .live{ margin-left:auto; }
.dstats{ display:flex; gap:7px; flex-wrap:wrap; }
.dstat{ display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--edge); border-radius:var(--pill);
  padding:.4em .8em; font-weight:800; font-size:.78rem; box-shadow:var(--sh-xs); }
.dstat .k{ color:var(--muted); font-weight:800; }
.dcard{ background:#fff; border:1px solid var(--edge); border-radius:16px; padding:11px 13px; box-shadow:var(--sh-xs);
  display:flex; align-items:center; gap:11px; transition:transform .25s var(--ease), border-color .25s; }
.dcard:hover{ transform:translateY(-2px); border-color:var(--edge-strong); cursor:pointer; }
.dcard .ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex:none; border:1px solid var(--edge); }
.dcard b{ font-size:.92rem; } .dcard .sub{ font-size:.74rem; color:var(--muted); font-weight:700; }
.dcard .go{ margin-left:auto; color:var(--coral); font-weight:900; flex:none; }
.qa{ display:flex; gap:7px; }
.qa button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:#fff; border:1px solid var(--edge);
  border-radius:13px; padding:9px 4px; font-weight:800; font-size:.66rem; cursor:pointer; transition:.18s var(--ease-back); color:var(--charcoal); }
.qa button .em{ font-size:17px; } .qa button:hover{ transform:translateY(-2px); border-color:var(--coral); background:var(--coral-tint); }
.qa button.on{ background:var(--coral); color:#fff; border-color:transparent; }
.dprog{ display:flex; align-items:center; gap:10px; }
.dprog .lbl{ font-size:.74rem; font-weight:800; color:var(--muted); white-space:nowrap; }
.dash__foot{ margin-top:auto; }

/* dashboard <-> conversation toggle inside hero */
.hview{ display:none; } .hview.show{ display:flex; flex-direction:column; gap:11px; flex:1; }

/* ---------- GROW · 5 PILLARS ---------- */
.pillars{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.pillar{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.pillar:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--edge-strong) !important; }
.p-conv{ grid-column:span 3; grid-row:span 2; } .p-trans{ grid-column:span 3; }
.p-adapt{ grid-column:span 3; } .p-play{ grid-column:span 3; } .p-lead{ grid-column:span 3; }
@media(max-width:900px){ .pillar{ grid-column:span 6 !important; grid-row:auto !important; } }
.p-head{ display:flex; align-items:center; gap:11px; }
.pnum{ font-weight:900; font-size:1.5rem; letter-spacing:-.03em; color:var(--muted-soft); line-height:1; }
.p-head .feature-ico{ margin:0; width:42px; height:42px; }
.p-title{ font-weight:900; font-size:1.18rem; letter-spacing:-.02em; }
.p-tag{ color:var(--muted); font-size:.92rem; font-weight:600; }
.scorewrap{ display:flex; align-items:center; gap:12px; }
.score{ --p:0; width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:900; font-size:.92rem;
  background:conic-gradient(var(--coral) calc(var(--p)*1%), var(--sage-deep) 0); position:relative; }
.score::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; }
.score span{ position:relative; z-index:1; }
.flagrow{ display:flex; gap:5px; font-size:18px; flex-wrap:wrap; }
.metric{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:.82rem; }
.metric .bar{ flex:1; height:7px; border-radius:7px; background:var(--sage-deep); overflow:hidden; } .metric .bar i{ display:block; height:100%; border-radius:7px; }

/* ---------- LEARN · DISCOVER ---------- */
.discover{ display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:18px; align-items:start; }
@media(max-width:980px){ .discover{ grid-template-columns:1fr; } }
.langgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.langtile{ display:flex; flex-direction:column; align-items:center; gap:4px; background:#fff; border:1px solid var(--edge);
  border-radius:14px; padding:11px 5px; cursor:pointer; font-weight:800; font-size:.74rem; transition:.18s var(--ease-back); }
.langtile .fl{ font-size:23px; line-height:1; } .langtile:hover{ transform:translateY(-2px); border-color:var(--coral); }
.langtile.active{ background:var(--coral); color:#fff; border-color:transparent; }
.langtile.more{ background:var(--sage-tint); color:var(--charcoal); justify-content:center; }
.topicgrid{ display:flex; flex-wrap:wrap; gap:7px; }
.preview{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.discover .ring{ --sz:88px; margin:4px auto; }

/* ---------- EXPLORE · LEADERBOARD ---------- */
.lb{ display:flex; flex-direction:column; gap:7px; }
.lb__h{ display:flex; gap:6px; margin-bottom:4px; }
.lb__row{ display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:13px; background:#fff; border:1px solid var(--edge); transition:.2s; }
.lb__row.me{ background:var(--coral-tint); border-color:var(--coral); }
.lb__row .rk{ width:26px; height:26px; border-radius:9px; display:grid; place-items:center; font-weight:900; font-size:.8rem; flex:none; background:var(--sage-deep); }
.lb__row .rk.g{ background:#eedfa8; color:#806316 } .lb__row .rk.s{ background:#e2e6dd } .lb__row .rk.b{ background:#ecd9c2 }
.lb__row .av{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:900; background:var(--sage); border:1px solid var(--edge); font-size:.8rem; }
.lb__row b{ font-size:.9rem; flex:1; } .lb__row .xp{ font-weight:900; font-size:.84rem; color:var(--coral); }
.lb__row .mv{ font-size:.7rem; font-weight:800; }
.mv.up{ color:#3f7a4f } .mv.dn{ color:#c8492a }

/* ---------- shared section heading block (clean alignment) ---------- */
.sec-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:clamp(26px,3.5vw,42px); }
.sec-top .sec-h{ margin-bottom:6px; } .sec-top .sec-desc{ margin-bottom:0; }
.sec-top__l{ max-width:60ch; }

/* nav: 4 product tabs */
@media(max-width:980px){ .nav__links{ } }

/* ---------- persistent Fluent chatbot (corner) ---------- */
.fab{ position:fixed; right:20px; bottom:20px; z-index:90; width:64px; height:64px; border-radius:50%;
  background:var(--cream-raise); border:1.5px solid var(--coral); box-shadow:var(--sh-lg); display:grid; place-items:center;
  cursor:pointer; transition:transform .3s var(--ease-back); animation:bobbing-sm 5s var(--ease) infinite; }
.fab:hover{ transform:translateY(-4px) scale(1.06); }
.fab img{ width:50px; height:50px; object-fit:contain; }
.fab__on{ position:absolute; top:4px; right:6px; width:11px; height:11px; border-radius:50%; background:#54c08a; border:2px solid var(--cream-raise); z-index:2; }
.fab__tip{ position:absolute; right:72px; bottom:12px; background:#fff; border:1px solid var(--edge); border-radius:14px; padding:8px 12px;
  box-shadow:var(--sh); font-weight:800; font-size:.84rem; white-space:nowrap; opacity:0; transform:translateX(8px); transition:.25s var(--ease); pointer-events:none; }
.fab:hover .fab__tip{ opacity:1; transform:none; }
@media(max-width:600px){ .fab{ width:54px; height:54px; right:14px; bottom:14px; } .fab img{ width:42px; height:42px; } }

/* ---------- glass subtext box under titles ---------- */
.subglass{ display:inline-block; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--edge); border-radius:14px; padding:.6em 1.05em; font-weight:700; color:var(--charcoal);
  box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.6); font-size:1.02rem; line-height:1.4; max-width:54ch; }

/* ---------- grid view tweaks (cleaner rhythm) ---------- */
.pillars{ gap:16px; }
.p-conv{ grid-row:span 2; }
@media(min-width:901px){
  /* row1: 01 (tall) + 02 ; row2: 01 + 03 ; row3: 04 + 05 stacked into a clean 2-up */
  .p-trans{ grid-column:span 3; } .p-adapt{ grid-column:span 3; }
  .p-play{ grid-column:span 3; } .p-lead{ grid-column:span 3 !important; }
}
.discover{ gap:16px; }
.section .sec-top{ align-items:flex-start; }

/* floating section mascot accents */
.secmascot{ position:absolute; width:84px; pointer-events:none; z-index:1; opacity:.96; filter:drop-shadow(0 14px 20px rgba(35,39,31,.16)); }
@media(max-width:760px){ .secmascot{ display:none; } }

/* ---------- GROW · compact overview tiles ---------- */
.ptiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media(max-width:920px){ .ptiles{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .ptiles{ grid-template-columns:repeat(2,1fr); } }
.ptile{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:20px 18px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.ptile:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--edge-strong) !important; }
.ptile .feature-ico{ margin:0; width:46px; height:46px; }
.ptile h3{ font-size:1.06rem; }
.ptile p{ color:var(--muted); font-size:.88rem; font-weight:600; line-height:1.35; }
.ptile .tg{ margin-top:auto; }