/* app.css source lines: 57-77, 371-420 — landing page, bento layout */
/* ── LANDING ─────────────────────────────────────── */
.landing{padding:40px 0 20px}
.landing-hero{margin-bottom:36px;animation:fadeUp .3s var(--ease-out) both}
.landing-tag{display:inline-flex;align-items:center;gap:6px;background:var(--copper-dim);border:1px solid color-mix(in srgb,var(--copper) 18%,transparent);border-radius:var(--r-pill);padding:4px 12px;font-size:var(--fs-12);font-weight:700;color:var(--link-strong);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.landing-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--vd)}
.landing h2{font-size:var(--fs-28);font-weight:700;color:var(--tx);letter-spacing:-.03em;line-height:1.15;margin-bottom:6px}
.landing>p{color:var(--mt);font-size:13px}

.section-label{display:flex;align-items:center;gap:10px;margin:28px 0 12px;animation:fadeUp .3s var(--ease-out) both}
.section-label-bar{width:3px;height:16px;background:var(--copper);border-radius:2px;flex-shrink:0}
.section-label span{font-size:var(--fs-12);font-weight:700;color:var(--tx2);letter-spacing:.05em;text-transform:uppercase}

.igrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px}
.icard{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);padding:24px 22px 20px;cursor:pointer;transition:all .25s var(--ease-out);text-align:left;position:relative;overflow:hidden;animation:fadeUp .4s var(--ease-out) both}
.icard:hover{transform:translateY(-3px);box-shadow:var(--shl),0 0 0 1px var(--copper-border);border-color:var(--copper-border)}
.lbadge{display:inline-flex;align-items:center;background:var(--copper-dim);color:var(--link-strong);font-size:var(--fs-12);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);margin-bottom:12px;letter-spacing:.05em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--copper) 18%,transparent)}
.icard h3{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:5px;letter-spacing:-.01em;line-height:1.3}
.icard small{font-size:var(--fs-12);color:var(--mt);line-height:1.55;display:block}
.stags{margin-top:14px;display:flex;gap:5px;flex-wrap:wrap}
.stag{font-size:var(--fs-12);background:var(--surf-hi);color:var(--mt);padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--bord2);font-weight:500}

/* ── LANDING HERO (Metascope style) ──────────────── */
.wlc-hero{padding:40px 0 0;animation:fadeUp .3s var(--ease-out) both}
.wlc-tag{display:inline-flex;align-items:center;gap:7px;background:var(--copper-dim);border:1px solid color-mix(in srgb,var(--copper) 18%,transparent);border-radius:var(--r-pill);padding:5px 14px;font-size:var(--fs-12);font-weight:600;color:var(--link-strong);margin-bottom:12px}
.wlc-tag .d{width:6px;height:6px;border-radius:50%;background:var(--vd);flex-shrink:0}
.wlc-title{font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--tx);margin-bottom:6px}
.wlc-sub{font-size:14px;color:var(--mt);font-weight:400;margin-bottom:0}

/* ── BENTO LAYOUT ────────────────────────────────── */
.wlc-bento{display:flex;flex-direction:column;gap:28px;padding:30px 0 50px}
.bento-section{animation:fadeUp .4s var(--ease-out) both}
.bento-section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bento-section-bar{width:3px;height:18px;border-radius:2px;flex-shrink:0}
.bento-section-bar.mg{background:var(--copper)}
.bento-section-bar.n3{background:var(--vd)}
.bento-section-bar.n2{background:var(--cat-6)}
.bento-section-label{font-size:var(--fs-12);font-weight:700;color:var(--tx2);letter-spacing:.06em;text-transform:uppercase}
.bento-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}

/* Bento card base */
.bento-card{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);padding:0;cursor:pointer;transition:all .2s var(--ease-out);position:relative;overflow:hidden;display:flex;flex-direction:column}
.bento-card-inner{padding:22px 20px 18px;display:flex;flex-direction:column;flex:1}
/* top color strip */
.bento-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-card) var(--r-card) 0 0}
.bento-card.mg::before{background:var(--copper)}
.bento-card.n3::before{background:var(--vd)}
.bento-card.n2::before{background:var(--cat-6)}
/* hover effects */
.bento-card:hover{transform:translateY(-5px);box-shadow:var(--shl)}
.bento-card.mg:hover{border-color:color-mix(in srgb,var(--copper) 30%,transparent);box-shadow:var(--shl),0 0 0 1px color-mix(in srgb,var(--copper) 22%,transparent)}
.bento-card.n3:hover{border-color:color-mix(in srgb,var(--vd) 30%,transparent);box-shadow:var(--shl),0 0 0 1px color-mix(in srgb,var(--vd) 25%,transparent)}
.bento-card.n2:hover{border-color:color-mix(in srgb,var(--cat-6) 30%,transparent);box-shadow:var(--shl),0 0 0 1px color-mix(in srgb,var(--cat-6) 25%,transparent)}
/* icon box */
.bento-icon{width:42px;height:42px;border-radius:var(--r-3);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;margin-top:3px;flex-shrink:0}
.bento-card.mg .bento-icon{background:var(--copper-dim)}
.bento-card.n3 .bento-icon{background:color-mix(in srgb,var(--vd) 10%,transparent)}
.bento-card.n2 .bento-icon{background:color-mix(in srgb,var(--cat-6) 10%,transparent)}
/* text */
.bento-nivel{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;font-family:var(--mono)}
.bento-card.mg .bento-nivel{color:var(--link-strong)}
.bento-card.n3 .bento-nivel{color:var(--ok-strong)}
.bento-card.n2 .bento-nivel{color:var(--info-strong)}
.bento-title{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.025em;line-height:1.2;margin-bottom:7px}
.bento-desc{font-size:var(--fs-12);color:var(--mt);line-height:1.6;flex:1;margin-bottom:14px}
/* footer strip */
.bento-foot{display:flex;align-items:center;gap:6px;padding-top:11px;border-top:1px solid var(--bord2)}
.bento-pill{font-size:var(--fs-12);font-weight:700;font-family:var(--mono);padding:3px 9px;border-radius:var(--r-pill)}
.bento-card.mg .bento-pill{background:color-mix(in srgb,var(--copper) 10%,transparent);color:var(--link-strong);border:1px solid color-mix(in srgb,var(--copper) 20%,transparent)}
.bento-card.n3 .bento-pill{background:color-mix(in srgb,var(--vd) 10%,transparent);color:var(--ok-strong);border:1px solid color-mix(in srgb,var(--vd) 20%,transparent)}
.bento-card.n2 .bento-pill{background:color-mix(in srgb,var(--cat-6) 10%,transparent);color:var(--info-strong);border:1px solid color-mix(in srgb,var(--cat-6) 20%,transparent)}