/* Features page: cinematic bento layout. Every visual is drawn with CSS/SVG, no third-party images. */
.f-hero{position:relative;text-align:center;padding:clamp(72px,10vw,130px) 0 clamp(36px,6vw,64px);overflow:hidden;isolation:isolate;}
.f-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 0%,rgba(245,243,255,.20),transparent 70%);}
.f-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#c9c9ce;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08);}
.f-kicker i{width:8px;height:8px;border-radius:50%;background:var(--pro-grad);box-shadow:0 0 10px rgba(245,243,255,.7);}
.f-hero h1{font-size:clamp(38px,6.4vw,78px);line-height:1.04;margin:22px auto 0;max-width:15em;}
.f-hero h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.05em;background-image:var(--dusk);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.05em;}
.f-hero p{max-width:40em;margin:22px auto 0;font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:#b4b4bb;}
.f-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;max-width:1140px;margin:0 auto;padding:0 clamp(16px,3vw,28px) 40px;}
.bc{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 26px 0;overflow:hidden;min-height:300px;}
.bc .txt{display:flex;flex-direction:column;gap:8px;position:relative;z-index:2;}
.bc h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15;margin:0;}
.bc p{font-size:14.5px;line-height:1.55;color:#a8a8b0;margin:0;max-width:34em;}
.bc .tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#14122b;background:var(--pro-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px rgba(139,92,246,.28);}
.bc .vis{margin:auto -26px 0;padding:18px 26px 26px;position:relative;z-index:1;}
.c7{grid-column:span 7}.c5{grid-column:span 5}.c4{grid-column:span 4}
@media(max-width:900px){.c7,.c5,.c4{grid-column:span 12}.bc{min-height:0}}

/* Vạch ngăn nhóm "con người/học tập" (Community/Courses/Audit) khỏi nhóm card công cụ phía trên,
   để khách lướt nhanh không bỏ sót — không phải card, chỉ là tiêu đề + gạch ngang giữa 2 nhóm. */
.bento-divider{grid-column:span 12;display:flex;align-items:center;gap:16px;margin:12px 0 -4px;}
.bento-divider h2{font-size:clamp(20px,2.4vw,26px);white-space:nowrap;margin:0;}
.bento-divider .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0));}

/* radar card */
.v-radar{display:flex;justify-content:center;align-items:center;min-height:250px;}
.v-radar .radar-a{width:min(100%,260px);}
.v-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;color:#dcdce2;background:#1b1b1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
.pill.hl{color:#14122b;background:var(--pro-grad);box-shadow:none;}
.pill i{font-size:14px;}

/* search card */
.v-search .box{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:#101012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:14px;color:#d9d9de;}
.v-search .box i{color:#8b8b93;font-size:17px;}
.v-search .box b{font-weight:500;background-image:var(--dusk);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.v-search .where{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.v-search .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:11px 14px;border-radius:14px;background:#131316;font-size:13px;color:#a8a8b0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.v-search .row span:last-child{color:#dcdce2;font-weight:500;}

/* analyze card */
.v-an .item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:14px;background:#131316;margin-top:8px;font-size:13px;color:#b4b4bb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.v-an .item b{font-weight:500;color:#f0f0f4;}
.v-an .bar{flex:1;max-width:120px;height:6px;border-radius:99px;background:#232328;overflow:hidden;}
.v-an .bar i{display:block;height:100%;width:78%;background:var(--pro-grad);border-radius:99px;}

/* project board */
.v-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.v-board .col{background:#101012;border-radius:16px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:flex;flex-direction:column;gap:8px;}
.v-board .col small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8b8b93;}
.v-board .k{padding:10px;border-radius:12px;background:#1a1a1e;font-size:12px;color:#d0d0d6;line-height:1.35;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.v-board .k s{display:block;height:4px;border-radius:99px;background:#2a2a30;margin-top:8px;}
.v-board .k s i{display:block;height:100%;border-radius:99px;background:var(--pro-grad);}

/* goals */
.v-goal{display:flex;align-items:center;gap:22px;}
.ring{position:relative;width:96px;height:96px;flex:none;}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:500;}
.v-goal .meta{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#a8a8b0;}
.v-goal .meta strong{font-size:18px;color:#f0f0f4;font-weight:500;}

/* tools */
.v-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.v-tools div{aspect-ratio:1;border-radius:14px;background:#141417;display:grid;place-items:center;font-size:20px;color:#cfcfd6;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06);}
.v-tools div:nth-child(2){color:#8B5CF6;}

/* compare */
.v-cmp .line{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;font-size:12.5px;color:#a8a8b0;margin-top:10px;}
.v-cmp .tr{height:8px;border-radius:99px;background:#232328;overflow:hidden;}
.v-cmp .tr i{display:block;height:100%;border-radius:99px;background:#5b5b66;}
.v-cmp .tr i.me{background:var(--pro-grad);}
.v-cmp .line b{color:#f0f0f4;font-weight:500;}

/* saved */
.v-saved{display:flex;flex-direction:column;gap:10px;}
.v-saved .g{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;background:#131316;font-size:13px;color:#d0d0d6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.v-saved .g span{color:#8b8b93;font-size:12px;}

.f-end{text-align:center;padding:clamp(56px,8vw,96px) 16px clamp(72px,10vw,120px);}
.f-end h2{font-size:clamp(28px,4.4vw,52px);max-width:16em;margin:0 auto;}
.f-end h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;background-image:var(--dusk);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.05em;}
.f-end p{color:#a8a8b0;margin:16px auto 28px;max-width:34em;}