/* uncen.ai home page. Dark palette from base.html, amber accent. */
:root {
  --ld-accent: #f59e0b;
  --ld-accent-soft: rgba(245, 158, 11, 0.14);
  --ld-ink: #e6edf3;
  --ld-muted: #98a4b3;
  --ld-panel: #131a22;
  --ld-panel-2: #1a2330;
  --ld-line: #2a3542;
}

.ld-section { margin: 0 auto 4.5rem; max-width: 1180px; padding-inline: 16px; }
.ld-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--ld-ink); letter-spacing: -0.01em; margin-bottom: .4rem; }
.ld-lede { color: var(--ld-muted); font-size: 1.05rem; max-width: 62ch; margin-bottom: 1.6rem; }
.ld-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 12px; font-weight: 700; text-decoration: none; transition: transform .15s, background .15s; }
.ld-btn:hover { transform: translateY(-1px); text-decoration: none; }
.ld-btn-primary { background: var(--ld-accent); color: #14100a; }
.ld-btn-primary:hover { background: #fbbf24; color: #14100a; }
.ld-btn-ghost { border: 1px solid var(--ld-line); color: var(--ld-ink); background: transparent; }
.ld-btn-ghost:hover { border-color: var(--ld-accent); color: var(--ld-ink); }

/* Hero */
.ld-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-block: 2.5rem 1rem; }
.ld-hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; color: var(--ld-ink); margin-bottom: 1rem; }
.ld-hero h1 em { font-style: normal; color: var(--ld-accent); }
.ld-hero-sub { font-size: 1.15rem; color: var(--ld-muted); max-width: 54ch; margin-bottom: 1.6rem; }
.ld-hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; }
.ld-hero-micro { color: var(--ld-muted); font-size: .88rem; max-width: 48ch; }
.ld-hero-media { position: relative; border-radius: 18px; overflow: hidden; background: var(--ld-panel); border: 1px solid var(--ld-line); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.ld-hero-media video, .ld-hero-media img { display: block; width: 100%; max-height: 60vh; object-fit: cover; background: #000; }
.ld-hero-caption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; background: var(--ld-panel-2); border-top: 1px solid var(--ld-line); }
.ld-hero-caption strong { color: var(--ld-ink); display: block; font-size: .98rem; }
.ld-hero-caption span { color: var(--ld-muted); font-size: .82rem; }
.ld-hero-empty { padding: 4rem 1rem; text-align: center; color: var(--ld-muted); }

/* Flow cards */
.ld-flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.ld-flow-card { display: block; padding: 1.3rem 1.3rem 1.2rem; border-radius: 16px; background: var(--ld-panel); border: 1px solid var(--ld-line); color: var(--ld-ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.ld-flow-card:hover { border-color: var(--ld-accent); transform: translateY(-2px); color: var(--ld-ink); text-decoration: none; }
.ld-flow-card .ld-flow-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--ld-accent-soft); color: var(--ld-accent); font-size: 1.25rem; margin-bottom: .9rem; }
.ld-flow-card h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: .35rem; }
.ld-flow-card p { color: var(--ld-muted); font-size: .95rem; margin: 0; }
.ld-flow-card .ld-flow-go { display: inline-block; margin-top: .9rem; color: var(--ld-accent); font-weight: 700; font-size: .9rem; }

/* Proof strip */
.ld-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--ld-line); border: 1px solid var(--ld-line); border-radius: 16px; overflow: hidden; }
.ld-proof-tile { background: var(--ld-panel); padding: 1.3rem 1.2rem; }
.ld-proof-tile .ld-proof-n { font-size: 2rem; font-weight: 900; color: var(--ld-ink); letter-spacing: -0.02em; line-height: 1; }
.ld-proof-tile .ld-proof-l { color: var(--ld-muted); font-size: .88rem; margin-top: .4rem; }
.ld-proof-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: .4rem; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: ld-pulse 1.8s infinite; }
@keyframes ld-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* Same world */
.ld-world { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; }
.ld-world-media { border-radius: 16px; overflow: hidden; border: 1px solid var(--ld-line); background: var(--ld-panel); }
.ld-world-media img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.ld-world-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.ld-world-list li { display: flex; gap: .7rem; align-items: baseline; color: var(--ld-ink); }
.ld-world-list li b { color: var(--ld-accent); font-weight: 800; min-width: 7.5rem; }
.ld-world-list li span { color: var(--ld-muted); }

/* Two-up cards */
.ld-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

/* Showcase feed reuses existing classes below */
.uncen-category-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.uncen-category-btn { border: 1px solid #3a4654; border-radius: 999px; padding: 6px 12px; background: #1c232c; color: #dbe4ef; font-weight: 700; font-size: .86rem; }
.uncen-category-btn.is-active { background: var(--ld-accent); border-color: #fbbf24; color: #14100a; }
.uncen-category-btn.is-empty { opacity: .48; cursor: not-allowed; }
.uncen-category-cta { color: #b8c2cf; font-size: .95rem; margin-bottom: 16px; min-height: 22px; }
.uncen-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.uncen-video-card { position: relative; background: var(--ld-panel); border: 1px solid var(--ld-line); border-radius: 14px; overflow: hidden; }
.uncen-thread-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(13,110,253,.9); color: #fff; font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.uncen-video-thumb { position: relative; aspect-ratio: 16/9; background: #000; }
.uncen-video-thumb-link { display: block; width: 100%; height: 100%; }
.uncen-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uncen-video-hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 60%); opacity: 0; transition: opacity .15s; }
.uncen-video-card:hover .uncen-video-hover { opacity: 1; }
.uncen-video-hover-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.uncen-video-hover-rating { display: flex; }
.uncen-video-body { padding: 10px 12px 12px; }
.uncen-video-body h3 { font-size: .95rem; font-weight: 700; color: var(--ld-ink); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uncen-video-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ld-muted); font-size: .8rem; }
.uncen-rating-summary { color: #fbbf24; }

/* Pricing */
.ld-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ld-plan { position: relative; padding: 1.3rem; border-radius: 16px; background: var(--ld-panel); border: 1px solid var(--ld-line); color: var(--ld-ink); }
.ld-plan.is-popular { border-color: var(--ld-accent); }
.ld-plan .ld-plan-badge { position: absolute; top: -10px; right: 14px; background: var(--ld-accent); color: #14100a; font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.ld-plan h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .2rem; }
.ld-plan .ld-plan-price { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.02em; }
.ld-plan .ld-plan-price small { font-size: .85rem; color: var(--ld-muted); font-weight: 600; }
.ld-plan p { color: var(--ld-muted); font-size: .9rem; margin: .4rem 0 0; }

/* Dev strip */
.ld-dev { background: #0b0f14; border: 1px solid var(--ld-line); border-radius: 16px; padding: 1.6rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.ld-dev pre { margin: 0; background: #05080b; border: 1px solid var(--ld-line); border-radius: 10px; padding: 1rem; color: #cbd5e1; font-size: .85rem; overflow-x: auto; }
.ld-dev-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* FAQ */
.ld-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.ld-faq details { background: var(--ld-panel); border: 1px solid var(--ld-line); border-radius: 12px; padding: .9rem 1.1rem; color: var(--ld-ink); }
.ld-faq summary { cursor: pointer; font-weight: 700; }
.ld-faq p { margin: .6rem 0 0; color: var(--ld-muted); font-size: .95rem; }

/* Final CTA */
.ld-final { text-align: center; padding: 3rem 1rem; border-radius: 20px; background: linear-gradient(135deg, #1a1408 0%, #131a22 60%); border: 1px solid var(--ld-line); }
.ld-final h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: var(--ld-ink); margin-bottom: 1.2rem; }

.ld-legal { color: var(--ld-muted); font-size: .8rem; max-width: 80ch; margin: 2rem auto 0; padding-inline: 16px; }

@media (max-width: 900px) {
  .ld-hero, .ld-world, .ld-dev { grid-template-columns: 1fr; }
  .ld-hero-media video { display: none; }
  .ld-hero-media img.ld-hero-poster-mobile { display: block; }
}
@media (min-width: 901px) {
  .ld-hero-media img.ld-hero-poster-mobile { display: none; }
}