/* ==========================================================================
   SmartCoach K12 — Components (v3: refined / premium)
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--f-display); font-weight: 500; font-size: var(--fs-sm); line-height: 1;
  padding: .8em 1.25em; border-radius: var(--r-full); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur), color var(--dur), border-color var(--dur);
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--ink-900); color: #fff; }
.btn-primary:hover { color:#fff; background: #000; transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-accent { background: var(--accent-600); color:#fff; }
.btn-accent:hover { color:#fff; background: var(--accent-700); transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(63,78,224,.6); }
.btn-ghost { background: #fff; color: var(--ink-800); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--gray-300); color: var(--ink-900); box-shadow: var(--sh-sm); }
.btn-quiet { background: transparent; color: var(--ink-800); padding-inline: .4em; }
.btn-quiet:hover { color: var(--accent-600); }
.btn-quiet .arr { transition: transform var(--dur) var(--ease); }
.btn-quiet:hover .arr { transform: translateX(3px); }
.btn-white { background:#fff; color: var(--ink-900); }
.btn-white:hover { color: var(--ink-900); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-lg { font-size: var(--fs-base); padding: .95em 1.5em; }
.btn-block { width: 100%; }
.btn-inv-ghost { background: transparent; color:#fff; border-color: rgba(255,255,255,.28); }
.btn-inv-ghost:hover { color:#fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* ---- Header / nav ------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur), background var(--dur); }
.header.stuck { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: var(--sp-5); }
.nav-links { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin:0; padding:0; }
.nav-links a { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-sm); color: var(--gray-600); letter-spacing: -0.01em; }
.nav-links a:hover { color: var(--ink-900); }
.nav-right { display: flex; align-items: center; gap: var(--sp-4); }
.nav-signin { font-family: var(--f-display); font-weight:500; font-size: var(--fs-sm); color: var(--ink-800); }

.brand { display:inline-flex; align-items:center; gap: .6em; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-md); color: var(--ink-900); letter-spacing:-.02em; }
.brand:hover { color: var(--ink-900); }
.brand-mark { width: 32px; height: 32px; flex:0 0 auto; border-radius: 9px; }
.brand small { font-weight:600; color: var(--accent-600); }

.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; color: var(--ink-900); }
.drawer { display:none; background: var(--paper); border-top:1px solid var(--line); padding: var(--sp-5); }
.drawer.open { display:block; }
.drawer ul { list-style:none; margin:0 0 var(--sp-4); padding:0; }
.drawer a { display:block; padding: var(--sp-3) 0; font-family: var(--f-display); font-weight:500; color: var(--gray-600); border-bottom:1px solid var(--line); }
.drawer .btn { width:100%; }
@media (max-width: 900px){ .nav-toggle{ display:inline-flex; } .nav-links,.nav-right{ display:none; } }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: clip; padding-block: clamp(3rem,7vw,5.5rem) clamp(2rem,5vw,3.5rem); text-align: center; }
.hero .container { position: relative; z-index: 2; }
.glow { position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: 0; filter: blur(60px); opacity: .7; pointer-events: none; }
.glow .blob { position:absolute; border-radius:50%; }
.glow .b1 { width: 40vw; height: 40vw; left: 6%; top: -6vw; background: var(--blob-1); animation: drift-a 20s var(--ease) infinite; }
.glow .b2 { width: 34vw; height: 34vw; right: 8%; top: -4vw; background: var(--blob-2); animation: drift-b 24s var(--ease) infinite; }
.glow .b3 { width: 30vw; height: 30vw; left: 34%; top: 2vw; background: var(--blob-3); animation: drift-a 26s var(--ease) infinite; }
.glow .b4 { width: 26vw; height: 26vw; right: 26%; top: 0; background: var(--blob-4); animation: drift-b 22s var(--ease) infinite; }
.hero h1 { max-width: 15ch; margin-inline: auto; margin-bottom: var(--sp-5); }
.hero .lead { font-size: clamp(1.05rem,1.8vw,1.3rem); max-width: 52ch; margin-inline: auto; }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--sp-3); justify-content:center; margin-top: var(--sp-6); }
.hero-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-soft); }

/* Chip / eyebrow pill */
.chip-pill { display:inline-flex; align-items:center; gap: .5em; background:#fff; border:1px solid var(--line-2); color: var(--gray-600); border-radius: var(--r-full); padding:.4em .9em .4em .5em; font-size: var(--fs-sm); font-weight:500; box-shadow: var(--sh-xs); margin-bottom: var(--sp-5); }
.chip-pill .tagx { background: var(--accent-50); color: var(--accent-700); font-weight:600; border-radius: var(--r-full); padding:.2em .6em; font-size: var(--fs-xs); }

/* ---- Product frame (browser window) ------------------------------------ */
.frame-wrap { position: relative; margin-top: clamp(2.5rem,5vw,4rem); }
.frame-wrap .prism { position:absolute; inset: -6% 4% -14% 4%; z-index:0; border-radius: 50%; background: var(--g-prism); filter: blur(70px); opacity:.55; }
.frame { position: relative; z-index: 1; background: #fff; border:1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--sh-frame); overflow: hidden; max-width: 1000px; margin-inline:auto; }
.frame-bar { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); background: var(--paper-3); }
.frame-dots { display:flex; gap:6px; } .frame-dots i { width:11px; height:11px; border-radius:50%; background: var(--gray-200); }
.frame-url { flex:1; height: 26px; border-radius: var(--r-full); background: #fff; border:1px solid var(--line); max-width: 320px; margin-inline:auto; display:flex; align-items:center; justify-content:center; gap:6px; font-size: var(--fs-xs); color: var(--gray-400); }
.frame-url svg { width:12px; height:12px; }
.frame-body { padding: var(--sp-5); display:grid; grid-template-columns: 200px 1fr; gap: var(--sp-4); text-align:left; }
@media (max-width: 640px){ .frame-body { grid-template-columns: 1fr; } .frame-side { display:none; } }
.frame-side { border-right:1px solid var(--line); padding-right: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-3); }
.side-item { display:flex; align-items:center; gap: var(--sp-3); font-family: var(--f-display); font-size: var(--fs-sm); color: var(--gray-500); font-weight:500; }
.side-item.on { color: var(--accent-700); }
.side-item .ic { width:26px; height:26px; border-radius:8px; background: var(--paper-2); display:grid; place-items:center; }
.side-item.on .ic { background: var(--accent-50); }
.side-item .ic svg { width:15px; height:15px; }

/* dashboard rows */
.mrow { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border:1px solid var(--line); }
.mrow + .mrow { margin-top: var(--sp-3); }
.mrow.hot { border-color: var(--accent-200); background: var(--accent-50); }
.mavatar { width:34px; height:34px; border-radius: 9px; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-family:var(--f-display); font-weight:600; font-size:.72rem; }
.mline { height:8px; border-radius:5px; background: var(--gray-200); }
.meter { height:7px; border-radius:5px; background: var(--gray-200); overflow:hidden; margin-top:7px; }
.meter i { display:block; height:100%; width:0; border-radius:5px; background: var(--g-accent); transition: width 1.3s var(--ease-out); }
.mtag { font-family: var(--f-display); font-size:.68rem; font-weight:600; color: var(--accent-700); background: #fff; border:1px solid var(--line); padding:.28em .6em; border-radius: var(--r-full); }
.frame-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-4); }
.frame-head b { font-family: var(--f-display); font-size: var(--fs-md); color: var(--ink-900); font-weight:600; }

/* ---- Logo strip --------------------------------------------------------- */
.logostrip { text-align:center; }
.logostrip p { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-5); }
.logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(1.5rem,4vw,3.2rem); }
.logos span { font-family: var(--f-display); font-weight:600; font-size: var(--fs-md); color: var(--gray-400); letter-spacing:-.02em; }

/* ---- Cards -------------------------------------------------------------- */
.card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-2); }

/* Feature grid */
.feature { position: relative; display:flex; flex-direction:column; }
.feature h3 { margin-bottom: var(--sp-2); }
.feature p { color: var(--text-soft); font-size: var(--fs-sm); }
.icon { width:46px; height:46px; display:inline-grid; place-items:center; border-radius: var(--r-md); margin-bottom: var(--sp-4); background: var(--accent-50); color: var(--accent-600); border:1px solid var(--accent-100); }
.icon svg { width:23px; height:23px; }
.icon--mint { background: color-mix(in srgb,var(--mint) 45%,white); color:#0e9268; border-color: color-mix(in srgb,var(--mint) 70%,white); }
.icon--peach { background: color-mix(in srgb,var(--peach) 45%,white); color:#c2521e; border-color: color-mix(in srgb,var(--peach) 70%,white); }
.icon--lav { background: color-mix(in srgb,var(--lav) 45%,white); color: var(--accent-700); border-color: color-mix(in srgb,var(--lav) 70%,white); }
.icon--sky { background: color-mix(in srgb,var(--sky) 45%,white); color:#2b6fb0; border-color: color-mix(in srgb,var(--sky) 70%,white); }

/* Bento */
.bento { display:grid; grid-template-columns: repeat(6,1fr); gap: var(--sp-5); }
.bento .cell { grid-column: span 2; }
.bento .cell.wide { grid-column: span 3; }
.bento .cell.big { grid-column: span 3; grid-row: span 2; }
@media (max-width: 900px){ .bento{ grid-template-columns: repeat(2,1fr);} .bento .cell,.bento .cell.wide,.bento .cell.big{ grid-column: span 1; grid-row:auto;} }
@media (max-width: 560px){ .bento{ grid-template-columns:1fr;} }

.feature--fill { background: var(--g-accent-soft); border-color: var(--accent-100); }
.feature--dark { background: var(--g-dark); color:#c5cbdd; border-color: rgba(255,255,255,.08); }
.feature--dark h3 { color:#fff; } .feature--dark p { color:#a7afc6; }
.feature--dark .icon { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.14); }
.feature--dark .prism-mini { position:absolute; right:-30%; bottom:-30%; width:80%; height:80%; background: var(--g-prism); filter: blur(50px); opacity:.35; border-radius:50%; pointer-events:none; }

/* ---- Pillars ------------------------------------------------------------ */
.pillar { display:flex; align-items:center; gap: var(--sp-3); font-family: var(--f-display); font-weight:500; font-size: var(--fs-sm); color: var(--ink-800); }
.pillar .tick { width:26px; height:26px; flex:0 0 auto; border-radius:7px; display:grid; place-items:center; color: var(--accent-600); background: var(--accent-50); border:1px solid var(--accent-100); }
.pillar .tick svg { width:15px; height:15px; }

/* ---- Stats -------------------------------------------------------------- */
.stat { text-align:left; }
.stat .num { font-family: var(--f-display); font-weight:600; font-size: var(--fs-3xl); line-height:1; color: var(--ink-900); letter-spacing:-.03em; }
.section--dark .stat .num { color:#fff; }
.stat .lbl { display:block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); }
.section--dark .stat .lbl { color:#a7afc6; }

/* ---- Framework tabs ----------------------------------------------------- */
.fw { display:grid; grid-template-columns: 280px 1fr; gap: var(--sp-7); align-items:start; }
@media (max-width: 900px){ .fw { grid-template-columns:1fr; gap: var(--sp-5);} }
.fw-tabs { display:flex; flex-direction:column; gap: var(--sp-2); position: sticky; top: 92px; }
@media (max-width: 900px){ .fw-tabs{ position:static; flex-direction:row; overflow-x:auto; padding-bottom: var(--sp-2);} }
.fw-tab { text-align:left; cursor:pointer; font-family: var(--f-display); background: transparent; border:1px solid transparent; border-radius: var(--r-md); padding: var(--sp-4); transition: all var(--dur) var(--ease); color: var(--gray-500); white-space:nowrap; }
.fw-tab b { display:block; font-size: var(--fs-md); color: var(--ink-800); font-weight:600; }
.fw-tab span { font-size: var(--fs-sm); }
.fw-tab:hover { background: var(--paper-2); }
.fw-tab.active { background:#fff; border-color: var(--line-2); box-shadow: var(--sh-sm); }
.fw-tab.active b { color: var(--accent-700); }
.fw-panel { display:none; }
.fw-panel.show { display:block; animation: fade-up .45s var(--ease-out); }
@keyframes fade-up { from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform:none;} }
.month-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.month-when { font-family: var(--f-display); font-weight:600; font-size: var(--fs-sm); color: var(--accent-600); margin-bottom: var(--sp-2); }
.month-card h4 { margin-bottom: var(--sp-2); }
.month-card p { color: var(--text-soft); font-size: var(--fs-sm); margin:0; }

/* ---- Accordion ---------------------------------------------------------- */
.acc-item { border-bottom:1px solid var(--line); }
.acc-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; display:flex; align-items:center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-1); font-family: var(--f-display); font-weight:600; font-size: var(--fs-md); color: var(--ink-900); }
.acc-q .ic { width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background: var(--accent-50); color: var(--accent-600); border:1px solid var(--accent-100); }
.acc-q .ic svg { width:19px; height:19px; }
.acc-q .chev { margin-left:auto; flex:0 0 auto; color: var(--gray-400); transition: transform var(--dur) var(--ease); }
.acc-item.open .chev { transform: rotate(180deg); color: var(--accent-600); }
.acc-a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.acc-a-inner { padding: 0 var(--sp-1) var(--sp-5) calc(var(--sp-1) + 38px + var(--sp-4)); color: var(--text-soft); }
.acc-a p { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.chips { display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.chip { font-family: var(--f-display); font-size: var(--fs-xs); font-weight:500; color: var(--gray-600); background: var(--paper-2); border:1px solid var(--line); padding:.4em .8em; border-radius: var(--r-full); }

/* ---- Insights ----------------------------------------------------------- */
.post { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.post .thumb { height:150px; display:grid; place-items:center; position:relative; }
.post .thumb::after { content:""; position:absolute; inset:0; background: rgba(14,18,32,.04); }
.post .thumb svg { width:46px; height:46px; color: var(--ink-900); opacity:.5; position:relative; z-index:1; }
.t-a{ background: var(--g-prism);} .t-b{ background: var(--g-prism-2);} .t-c{ background: linear-gradient(120deg,var(--sky),var(--mint));}
.post .body { padding: var(--sp-5); display:flex; flex-direction:column; flex:1; }
.post .meta { display:flex; align-items:center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-3); }
.post .meta b { color: var(--ink-800); font-weight:600; } .post .meta .sep { width:3px; height:3px; border-radius:50%; background: var(--gray-300); }
.post h3 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.rmore { margin-top:auto; font-family: var(--f-display); font-weight:500; font-size: var(--fs-sm); display:inline-flex; align-items:center; gap:6px; }
.rmore svg { transition: transform var(--dur) var(--ease); } .rmore:hover svg { transform: translateX(3px); }

/* ---- Split -------------------------------------------------------------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-8); align-items:center; }
.split--rev .media { order:-1; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; gap:var(--sp-6);} .split--rev .media{ order:0;} }
.check { list-style:none; padding:0; margin: var(--sp-5) 0 0; }
.check li { display:flex; gap: var(--sp-3); align-items:flex-start; margin-bottom: var(--sp-3); color: var(--text-soft); font-size: var(--fs-sm); }
.check svg { flex:0 0 auto; width:20px; height:20px; color: var(--accent-600); margin-top:2px; }
.check strong { color: var(--ink-900); }
.flag { display:inline-flex; align-items:center; gap: .5em; font-family: var(--f-display); font-weight:600; font-size: var(--fs-sm); color: var(--accent-700); background: var(--accent-50); padding:.4em .9em; border-radius: var(--r-full); margin-bottom: var(--sp-4); }
.section--dark .flag { background: rgba(255,255,255,.08); color:#fff; }
.when { font-family: var(--f-display); font-weight:500; color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.section--dark .when { color:#a7afc6; }

/* ---- Forms -------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.field label { display:block; font-family: var(--f-display); font-weight:500; font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--ink-800); }
.field input,.field select,.field textarea { width:100%; font-family: var(--f-body); font-size: var(--fs-base); padding: .8em 1em; border:1px solid var(--line-2); border-radius: var(--r-md); background:#fff; color: var(--ink-900); transition: border-color var(--dur), box-shadow var(--dur); }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color: var(--accent-400); box-shadow: 0 0 0 4px var(--ring); }
.field textarea { min-height: 120px; resize: vertical; }
.form-status { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: color-mix(in srgb,var(--mint) 40%,white); color:#0e7a56; font-weight:500; font-size: var(--fs-sm); }

/* ---- CTA ---------------------------------------------------------------- */
.cta { position: relative; overflow:hidden; border-radius: var(--r-2xl); padding: clamp(2.5rem,6vw,4.5rem); text-align:center; background: var(--g-dark); color:#c5cbdd; }
.cta .prism { position:absolute; inset:-40% -10% auto -10%; height:120%; background: var(--g-prism); filter: blur(80px); opacity:.28; pointer-events:none; }
.cta h2 { color:#fff; position:relative; } .cta p { color:#b6bdd2; position:relative; max-width: 54ch; margin-inline:auto; }
.cta .hero-actions { position:relative; }

/* ---- Footer (light) ----------------------------------------------------- */
.footer { background: var(--paper-2); border-top:1px solid var(--line); padding-block: var(--sp-8) var(--sp-6); }
.footer-grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr 1fr;} }
@media (max-width: 460px){ .footer-grid{ grid-template-columns:1fr;} }
.footer-about p { color: var(--text-soft); font-size: var(--fs-sm); max-width: 40ch; margin-top: var(--sp-4); }
.footer-col h4 { color: var(--ink-900); font-size: var(--fs-sm); font-weight:600; margin-bottom: var(--sp-4); }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom: var(--sp-3); }
.footer-col a { color: var(--text-soft); font-size: var(--fs-sm); } .footer-col a:hover { color: var(--ink-900); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top:1px solid var(--line); font-size: var(--fs-sm); color: var(--gray-400); }
.footer-bottom a { color: var(--gray-400); } .footer-bottom a:hover { color: var(--ink-900); }
.footer-links { display:flex; flex-wrap:wrap; gap: var(--sp-4); }