/* matrossapp.com home page as an app: left menu, top bar, panels. Uses the tokens of site.css. Our own design. */
body.appsite { display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 8px; background: #0e1120; border-right: 1px solid var(--border); }
.rail-logo img { width: 42px; height: 42px; border-radius: 12px; }
.rail-nav { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.rail-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; color: var(--text-2); text-decoration: none; font-size: 11px; font-weight: 600; text-align: center; }
.rail-nav a svg { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--surface); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-nav a:hover, .rail-nav a.on { color: var(--text); }
.rail-nav a.on svg { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -10px rgba(111, 109, 255, .9); }
.rail-end { margin-top: auto; display: grid; gap: 8px; width: 100%; }
.rail-pro { display: grid; place-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid rgba(111, 109, 255, .5); background: rgba(111, 109, 255, .12); color: var(--text); text-decoration: none; font-size: 10px; text-align: center; }
.rail-pro b { font-size: 13px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rail-help { display: grid; place-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; color: var(--text-2); text-decoration: none; font-size: 10px; text-align: center; }
.rail-help svg { width: 22px; height: 22px; fill: #8a8cff; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: rgba(11, 13, 22, .85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(37, 43, 66, .7); }
.app-crumb { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; font-weight: 600; margin-right: auto; }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.btn.big { padding: 15px 26px; font-size: 16px; }
.app-content { padding: 24px; display: grid; gap: 18px; max-width: 1160px; width: 100%; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel h2 { font: 750 22px var(--font-display); margin: 0; letter-spacing: -.01em; }
.panel .sub { color: var(--text-2); margin: 0 0 18px; }
.welcome { position: relative; overflow: hidden; border-color: rgba(111, 109, 255, .45);
  background: radial-gradient(90% 140% at 100% 0%, rgba(155, 92, 255, .22), transparent 55%), radial-gradient(70% 120% at 0% 100%, rgba(79, 140, 255, .16), transparent 60%), var(--surface); }
.welcome h1 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 44px); background: linear-gradient(90deg, #8fb3ff, #c4a3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome .lead { max-width: 52em; margin: 0 0 22px; color: var(--text-2); }
.welcome .lead a { color: #9fb8ff; text-decoration: none; border-bottom: 1px dashed rgba(159, 184, 255, .5); }
.welcome .lead .hl { color: #ff6b8b; }
.welcome-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.live { font: 750 11px var(--font); background: var(--live); color: #fff; padding: 3px 9px; border-radius: 6px; letter-spacing: .05em; }
.demo-screen { position: relative; height: 260px; padding-bottom: 30px; border-radius: 14px; background: linear-gradient(170deg, #1b2140, #0d1020 70%); border: 1px solid var(--border-strong); display: grid; place-items: center; overflow: hidden; }
.demo-follow { display: grid; justify-items: center; gap: 4px; animation: followIn 4s ease-in-out infinite; }
.demo-ava { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, #4f8cff, #9b5cff, #ff6b8b, #4f8cff); animation: spin 6s linear infinite; }
.demo-ava span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #1a1f33; font: 800 26px var(--font-display); animation: spin 6s linear infinite reverse; }
.demo-follow strong { font: 750 18px var(--font-display); }
.demo-follow em { font-style: normal; font-weight: 700; font-size: 20px; background: linear-gradient(90deg, #8fb3ff, #ff9ab3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.demo-pk { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; height: 22px; border-radius: 7px; overflow: hidden; font: 750 11px var(--font); }
.demo-pk span { display: flex; align-items: center; padding: 0 9px; }
.demo-pk .me { flex: 62; background: linear-gradient(90deg, #ff3d6e, #ff6b8b); }
.demo-pk .them { flex: 38; justify-content: flex-end; background: linear-gradient(90deg, #3c6bff, #4f8cff); }
@keyframes followIn { 0%, 100% { transform: translateY(6px); opacity: .75; } 40%, 70% { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.fact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fact-list li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 15px; }
.fact-list li::before { content: "\2713"; position: absolute; left: 14px; top: 11px; color: var(--ok); font-weight: 800; }
.fact-list b { color: var(--text); }
.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feat-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border); }
.feat-row h3 { margin: 0 0 4px; font: 700 16px var(--font-display); }
.feat-row p { margin: 0; color: var(--text-2); font-size: 14px; }
.feat-row .ic { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.feat-row .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.c1 { background: rgba(255, 107, 139, .14); color: #ff8fa8; }
.ic.c2 { background: rgba(79, 140, 255, .14); color: #8fb3ff; }
.ic.c3 { background: rgba(255, 90, 79, .14); color: #ff8a80; }
.ic.c4 { background: rgba(209, 107, 255, .14); color: #dca3ff; }
.ic.c5 { background: rgba(255, 181, 71, .14); color: #ffcf85; }
.ic.c6 { background: rgba(155, 92, 255, .14); color: #c4a3ff; }
.ic.c7 { background: rgba(61, 220, 151, .14); color: #7ff0bf; }
.ic.c8 { background: rgba(46, 196, 182, .14); color: #7fe5dc; }
.feat-row .badge { position: static; display: inline-block; vertical-align: middle; }
.price-panel { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; border-color: rgba(111, 109, 255, .5);
  background: linear-gradient(160deg, rgba(79, 140, 255, .12), rgba(155, 92, 255, .1)), var(--surface); }
.price-panel .tag { font: 700 13px var(--font); color: #c9b8ff; letter-spacing: .08em; text-transform: uppercase; }
.price-panel .amount { font: 800 46px/1 var(--font-display); margin: 10px 0 4px; }
.price-panel .amount small { font-size: 17px; color: var(--text-2); font-weight: 600; }
.price-panel .free { display: inline-block; margin: 8px 0 10px; padding: 6px 12px; border-radius: 999px; background: rgba(61, 220, 151, .14); color: var(--ok); font-weight: 650; font-size: 14px; }
.price-panel .note { margin: 0; color: var(--text-3); font-size: 14px; max-width: 26em; }
.price-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.price-list li { padding: 12px 14px 12px 40px; border-radius: 12px; background: rgba(11, 13, 22, .4); border: 1px solid var(--border); position: relative; color: var(--text-2); }
.price-list li::before { content: "\2713"; position: absolute; left: 14px; color: var(--ok); font-weight: 800; }
.app-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 8px 4px 24px; color: var(--text-3); font-size: 14px; }
.app-foot nav { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.app-foot a { color: var(--text-2); text-decoration: none; }
@media (max-width: 960px) { .two, .price-panel { grid-template-columns: 1fr; } .feat-list { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  body.appsite { grid-template-columns: 1fr; }
  .rail { position: sticky; top: 0; z-index: 6; height: auto; flex-direction: row; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .rail-logo img { width: 34px; height: 34px; }
  .rail-nav { flex-direction: row; overflow-x: auto; gap: 2px; }
  .rail-nav a { flex: 0 0 auto; padding: 4px 6px; font-size: 10px; }
  .rail-nav a svg { width: 30px; height: 30px; padding: 6px; }
  .rail-end { display: none; }
  .app-top { position: static; padding: 10px 16px; flex-wrap: wrap; }
  .app-crumb { display: none; }
  .app-content { padding: 16px; }
  .panel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .demo-follow, .demo-ava, .demo-ava span { animation: none; } }