/* DevNotes — landing page */
body.view-home .shell { grid-template-columns: minmax(0, 1fr); }
body.view-home .sidebar { display: none; }
@media (max-width: 900px) { body.view-home .sidebar { display: block; } }

.landing-hero { position: relative; overflow: hidden; color: #eef0ff; background:
  radial-gradient(60% 80% at 78% 40%, rgba(124, 58, 237, .42), transparent 70%),
  radial-gradient(45% 60% at 10% 0%, rgba(59, 130, 246, .22), transparent 70%),
  linear-gradient(180deg, #0a0a1f 0%, #0d0b26 60%, #120d33 100%); padding: 64px 38px 120px; }
.landing-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); pointer-events: none; }
.landing-inner { position: relative; max-width: 1164px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #a5b4fc; padding: 6px 13px; border-radius: 99px; background: rgba(99, 102, 241, .14); border: 1px solid rgba(129, 140, 248, .35); }
.landing-copy h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.045em; margin: 20px 0 18px; color: #fff; }
.grad-hero { background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 35%, #60a5fa 70%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-copy p { font-size: 17.5px; line-height: 1.65; color: #b8bdd8; max-width: 540px; margin: 0; }
.landing-hero .hero-actions { margin-top: 30px; gap: 12px; }
.btn-hero { background: linear-gradient(135deg, #60a5fa, #3b82f6); border: 0; color: #fff !important; padding: 13px 24px; font-size: 15px; box-shadow: 0 10px 30px rgba(59, 130, 246, .35); }
.btn-hero:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(15, 18, 45, .6); color: #e0e7ff; border: 1px solid rgba(129, 140, 248, .45); padding: 13px 22px; font-size: 15px; }
.btn-ghost:hover { border-color: #a5b4fc; background: rgba(30, 34, 80, .7); }
.hero-resume { margin-top: 18px; font-size: 13.5px; color: #8f95b8; }
.hero-resume a { color: #c4b5fd; }

.landing-visual { position: relative; }
.hero-art { width: 100%; height: auto; display: block; overflow: visible; }
.hero-art .grid-floor path { stroke: #8b5cf6; stroke-width: 1; }
.hero-art .key { fill: #ddd6fe; opacity: .55; }
.hero-art .pad { fill: #ede9fe; opacity: .35; }
.hero-art .l1 { fill: #a78bfa; }
.hero-art .l2 { fill: #60a5fa; }
.hero-art .l3 { fill: #f472b6; opacity: .85; }
.hero-art .panel { fill: rgba(255,255,255,.06); stroke: rgba(167,139,250,.4); }
.hero-art .dot1 { fill: #f87171; }
.hero-art .dot2 { fill: #fbbf24; }
.hero-art .dot3 { fill: #34d399; }
.hero-art .c-top { fill: #a78bfa; }
.hero-art .c-left { fill: #6d28d9; }
.hero-art .c-right { fill: #4c1d95; }
.hero-art .cb2 .c-top { fill: #93c5fd; }
.hero-art .cb2 .c-left { fill: #3b82f6; }
.hero-art .cb2 .c-right { fill: #1e40af; }
.hero-art .cb3 .c-top { fill: #c4b5fd; }
.hero-art .cb3 .c-left { fill: #7c3aed; }
.hero-art .cb3 .c-right { fill: #5b21b6; }
.hero-art .t-back { fill: rgba(76, 29, 149, .6); }
.hero-art .t-face { fill: #f8f7ff; stroke: rgba(255,255,255,.6); }
.hero-art .t-glyph { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .tl-white .t-glyph { stroke: #ea580c; }
.hero-art .tl-green .t-glyph { stroke: #16a34a; }
.hero-art .tl-sky .t-glyph { stroke: #0284c7; }
.hero-art .tl-violet .t-glyph { stroke: #7c3aed; }
.hero-art .tl-blue .t-glyph { stroke: #2563eb; }
.hero-art .tl-pink .t-glyph { stroke: #db2777; }
.hero-art .tile { animation: dn-float 6s ease-in-out infinite; }
.hero-art .cube { animation: dn-float 7s ease-in-out infinite; }
.hero-art .cb2 { animation-delay: 1.4s; }
.hero-art .cb3 { animation-delay: 2.6s; }
@keyframes dn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.landing-page { padding-top: 0; }
.lstats { position: relative; z-index: 2; margin: -64px 0 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lstat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: #141530; border: 1px solid rgba(129, 140, 248, .22); box-shadow: 0 18px 40px rgba(10, 10, 40, .35); color: #eef0ff; }
.lstat b { display: block; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.lstat span:not(.lstat-icon) { font-size: 13px; color: #a3a8c8; }
.lstat-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.si-orange { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 8px 20px rgba(234, 88, 12, .35); }
.si-violet { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 8px 20px rgba(124, 58, 237, .35); }
.si-pink { background: linear-gradient(135deg, #f472b6, #db2777); box-shadow: 0 8px 20px rgba(219, 39, 119, .35); }
.si-green { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 8px 20px rgba(5, 150, 105, .35); }

.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--primary); white-space: nowrap; }
.link-more:hover { text-decoration: underline; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 48px; }
.path-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; transition: transform .18s, box-shadow .18s, border-color .18s; }
a.path-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.path-card.is-soon { opacity: .75; }
.path-top { display: flex; gap: 14px; align-items: flex-start; }
.path-top h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.path-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.pi-0 { background: linear-gradient(135deg, #f97316, #dc2626); }
.pi-1 { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.pi-2 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.path-route { font-size: 12.5px; color: var(--muted); line-height: 1.6; display: flex; flex-wrap: wrap; gap: 0 5px; }
.path-route span { color: var(--faint); }
.path-route span.live { color: var(--text-2); font-weight: 600; }
.path-route i { font-style: normal; color: var(--faint); }
.path-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.path-bar { flex: 1; height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.path-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #4ade80); }
.path-meta { font-size: 12px; color: var(--muted); margin-top: -8px; }

@media (max-width: 1100px) {
  .landing-inner { grid-template-columns: minmax(0, 1fr); }
  .landing-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .lstats { grid-template-columns: repeat(2, 1fr); }
  .path-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .landing-hero { padding: 36px 16px 96px; }
  .landing-copy p { font-size: 15.5px; }
  .landing-hero .hero-actions .btn { flex: 1; justify-content: center; }
  .lstats { margin-top: -56px; gap: 10px; }
  .lstat { padding: 14px; gap: 10px; }
  .lstat b { font-size: 21px; }
  .lstat-icon { width: 38px; height: 38px; border-radius: 11px; }
  .path-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .hero-art .tile, .hero-art .cube { animation: none; } }
.path-foot .chip { text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 2px 9px; white-space: nowrap; }
.btn-hero, .btn-ghost { white-space: nowrap; }
@media (max-width: 400px) { .btn-hero, .btn-ghost { padding: 12px 14px; font-size: 14px; } }