/* Moyako Training — landing page styles. Themeable: every colour is a token, so the same markup renders the dark (Design 1) and light (Design 2) mockups via . */ body[data-moyako-v2].lp{background:var(--bg-primary)} .lp .wrap{max-width:1180px;margin:0 auto;padding:0 22px} .lp a{color:inherit;text-decoration:none} .lp .grad{position:relative;overflow:hidden} .lp .grad::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:520px;z-index:0; background:radial-gradient(60% 60% at 75% 20%, color-mix(in srgb,var(--info) 16%,transparent), transparent 70%), radial-gradient(50% 50% at 20% 10%, color-mix(in srgb,var(--action) 12%,transparent), transparent 70%);pointer-events:none} .lp .grad>*{position:relative;z-index:1} /* nav */ .lp-nav{display:flex;align-items:center;gap:18px;height:74px} .lp-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px} .lp-brand .m{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--action),var(--info));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900} .lp-brand b{color:var(--action)} .lp-nav .links{display:flex;gap:26px;margin:0 auto;font-size:15px;color:var(--muted);font-weight:500} .lp-nav .links a:hover{color:var(--text)} .lp-nav .right{display:flex;align-items:center;gap:12px} .lp-tt{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg-surface);color:var(--text);cursor:pointer;font-size:16px} .lp-login{padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg-surface);color:var(--text);font-weight:600;font-size:14px} .lp-cta{padding:10px 18px;border-radius:11px;background:var(--action);color:#fff;font-weight:700;font-size:14px;border:none;cursor:pointer;box-shadow:0 6px 18px color-mix(in srgb,var(--action) 40%,transparent)} @media(max-width:900px){ .lp-nav .links{display:none} } /* hero */ .lp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:34px 0 60px} @media(max-width:940px){ .lp-hero{grid-template-columns:1fr;gap:28px} } .lp-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em; color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent);border:1px solid color-mix(in srgb,var(--info) 25%,transparent); padding:6px 12px;border-radius:20px;text-transform:uppercase} .lp-h1{font-size:60px;line-height:1.03;font-weight:800;letter-spacing:-.02em;margin:18px 0 16px;color:var(--text)} @media(max-width:940px){ .lp-h1{font-size:44px} } .lp-h1 .u{color:var(--action);position:relative;white-space:nowrap;font-style:italic} .lp-h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;border-radius:8px;background:color-mix(in srgb,var(--action) 45%,transparent);z-index:-1} .lp-sub{font-size:18px;color:var(--muted);max-width:520px;line-height:1.55;margin-bottom:24px} .lp-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px} .lp-btn-primary{padding:14px 26px;border-radius:13px;background:var(--action);color:#fff;font-weight:700;font-size:16px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;box-shadow:0 10px 26px color-mix(in srgb,var(--action) 40%,transparent)} .lp-btn-ghost{padding:14px 24px;border-radius:13px;background:var(--bg-surface);color:var(--text);font-weight:700;font-size:16px;border:1px solid var(--line);cursor:pointer;display:inline-flex;align-items:center;gap:9px} .lp-checks{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted);font-weight:500} .lp-checks span{display:inline-flex;align-items:center;gap:7px} .lp-checks .ck{color:var(--action);font-weight:800} /* hero preview dashboard card */ .lp-preview{background:var(--bg-surface);border:1px solid var(--line);border-radius:22px;padding:20px; box-shadow:0 24px 70px rgba(0,0,0,.35)} body[data-theme="light"] .lp-preview{box-shadow:0 24px 70px rgba(16,27,45,.14)} .lp-preview .pv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .lp-preview .pv-head h3{margin:0;font-size:16px}.lp-preview .pv-head .small{font-size:12px;color:var(--muted)} .pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .pv-tile{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;padding:14px} .pv-tile.wide{grid-column:1/-1} .pv-ring{--pct:82;--band:var(--band-peak);width:108px;height:108px;border-radius:50%;margin:2px auto;position:relative; background:conic-gradient(var(--band) calc(var(--pct)*1%), color-mix(in srgb,var(--muted) 24%,transparent) 0)} .pv-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--bg-raised)} .pv-ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .pv-ring .v b{font-size:26px;color:var(--text)}.pv-ring .v span{font-size:10px;color:var(--action)} .pv-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;color:var(--muted)} .pv-row b{color:var(--text)} .pv-bars{display:flex;gap:6px;align-items:flex-end;height:64px;margin-top:6px} .pv-bars i{flex:1;border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--info) 45%,transparent)} .pv-bars i:nth-child(4){background:var(--action)} .pv-perf{margin:7px 0}.pv-perf .lab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px} .pv-perf .trk{height:8px;background:color-mix(in srgb,var(--muted) 20%,transparent);border-radius:5px;overflow:hidden} .pv-perf .fl{height:100%;border-radius:5px} .pv-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-raised);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:12px;color:var(--muted)} .pv-btn{width:100%;margin-top:10px;padding:9px;border:none;border-radius:10px;background:var(--action);color:#fff;font-weight:700;font-size:13px;cursor:pointer} /* features */ .lp-features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:8px 0 40px} @media(max-width:940px){ .lp-features{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .lp-features{grid-template-columns:1fr} } .lp-feat{background:var(--bg-surface);border:1px solid var(--line);border-radius:18px;padding:22px} body[data-theme="light"] .lp-feat{box-shadow:0 1px 3px rgba(16,27,45,.05)} .lp-feat .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px} .lp-feat h3{margin:0 0 7px;font-size:17px}.lp-feat p{margin:0;font-size:14px;color:var(--muted);line-height:1.5} .ic-g{background:color-mix(in srgb,var(--action) 16%,transparent)} .ic-b{background:color-mix(in srgb,var(--info) 16%,transparent)} .ic-p{background:color-mix(in srgb,#8B5CF6 16%,transparent)} .ic-o{background:color-mix(in srgb,var(--accent) 18%,transparent)} /* sample question band */ .lp-sample{background:var(--bg-surface);border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin-bottom:40px; display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:center} @media(max-width:820px){ .lp-sample{grid-template-columns:1fr} } .lp-sample .tag{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--info);text-transform:uppercase} .lp-sample .q{font-size:24px;color:var(--text);margin:8px 0 16px} .lp-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .lp-opt{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:11px 14px;background:var(--bg-raised);font-size:15px} .lp-opt.ok{border-color:var(--action);background:color-mix(in srgb,var(--action) 12%,transparent)} .lp-opt .k{width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--muted) 22%,transparent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} .lp-opt.ok .k{background:var(--action);color:#fff} .lp-hint{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;padding:16px} .lp-hint .h{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--accent);font-size:14px;margin-bottom:6px} .lp-hint p{margin:0;font-size:13px;color:var(--muted)} /* pricing */ .lp-pricing{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;padding-bottom:44px} @media(max-width:820px){ .lp-pricing{grid-template-columns:1fr} } .lp-price{background:var(--bg-surface);border:1px solid var(--line);border-radius:20px;padding:26px} .lp-price.pro{border:2px solid var(--action);background:color-mix(in srgb,var(--action) 7%,var(--bg-surface))} .lp-price .plan{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;display:flex;gap:10px;align-items:center} .lp-price .rec{background:var(--action);color:#fff;font-size:10px;padding:3px 9px;border-radius:12px;letter-spacing:.04em} .lp-price .amt{font-size:44px;font-weight:800;color:var(--text);margin:8px 0}.lp-price .amt small{font-size:15px;color:var(--muted);font-weight:600} .lp-price ul{list-style:none;margin:14px 0 0;padding:0} .lp-price li{display:flex;gap:9px;align-items:center;font-size:14px;padding:6px 0;color:var(--text)} .lp-price li::before{content:"✓";color:var(--action);font-weight:800} .lp-price .go{margin-top:18px;display:inline-block;width:100%;text-align:center;padding:12px;border-radius:12px;font-weight:700} .lp-price.pro .go{background:var(--action);color:#fff}.lp-price .go.free{background:var(--bg-raised);border:1px solid var(--line);color:var(--text)} /* footer */ .lp-footer{border-top:1px solid var(--line);padding:22px 0;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted)} .lp-footer span{display:inline-flex;align-items:center;gap:7px} .lp-note{text-align:center;font-size:12px;color:var(--muted);padding:0 0 30px}