/* landing.css — Deckhand landing page. Mobile-first (375px base). */
/* Does NOT style reader, bookshelf, or auth pages — those have their own CSS. */

:root {
  --bg-deep: #080a12;
  --bg-primary: #0e1018;
  --bg-elevated: #14161f;
  --bg-card: #181a28;
  --bg-card-hover: #1f2236;
  --fg-primary: #e8eaf0;
  --fg-secondary: #8a8ca2;
  --fg-muted: #4e5068;
  --accent: #e8553d;
  --accent-soft: rgba(232,85,61,.1);
  --accent-glow: rgba(232,85,61,.05);
  --accent-hover: #f06a52;
  --gold: #f0c060;
  --cyan: #4ec9b8;
  --rose: #e8607a;
  --border: rgba(255,255,255,.06);
  --border-accent: rgba(232,85,61,.2);
  --radius: 12px;
  --radius-lg: 20px;
  --font-display: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  background: var(--bg-deep);
  color: var(--fg-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== ANIMATION ===== */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ===== BUTTONS ===== */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px;
  background:linear-gradient(135deg, var(--accent) 0%, #c43a22 100%);
  color:#fff; font-family:var(--font-body); font-size:.95rem; font-weight:600;
  border-radius:100px; text-decoration:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(232,85,61,.3), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.btn-primary svg { flex-shrink:0; }
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform:translateX(-100%); transition:transform .45s ease;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(232,85,61,.4); }
.btn-primary:hover::after { transform:translateX(100%); }
.btn-primary.btn-lg { padding:16px 40px; font-size:1.05rem; }

.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px;
  background:rgba(255,255,255,.04); color:var(--fg-primary);
  font-family:var(--font-body); font-size:.95rem; font-weight:500;
  border:1px solid rgba(255,255,255,.1); border-radius:100px;
  text-decoration:none; transition:all .2s ease; backdrop-filter:blur(6px);
}
.btn-secondary:hover { border-color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--accent); font-family:var(--font-body); font-size:.9rem; font-weight:500;
  text-decoration:none; transition:color .2s, gap .2s;
}
.btn-ghost:hover { color:var(--accent-hover); gap:10px; }

/* ===== SECTION TITLES ===== */
.section-title { font-family:var(--font-display); font-size:1.5rem; font-weight:400; letter-spacing:.02em; margin-bottom:8px; }
.section-sub { color:var(--fg-secondary); font-size:.85rem; margin-bottom:28px; line-height:1.6; }

/* ===== NAV ===== */
.landing-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
  background:rgba(8,10,18,.85); backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--border); transition:background .3s;
}
.nav-brand { display:flex; align-items:center; gap:8px; text-decoration:none; }
.nav-brand-icon { color:var(--accent); flex-shrink:0; }
.nav-brand-text { font-family:var(--font-display); font-size:1.05rem; font-weight:400; color:var(--fg-primary); letter-spacing:.04em; }
.nav-actions { display:flex; gap:6px; align-items:center; }
.nav-link {
  color:var(--fg-secondary); font-size:.82rem; text-decoration:none;
  padding:8px 14px; border-radius:100px; transition:color .2s, background .2s;
}
.nav-link:hover { color:var(--fg-primary); background:rgba(255,255,255,.05); }
.nav-cta {
  padding:8px 20px; background:var(--accent); color:#fff;
  font-size:.8rem; font-weight:600; border-radius:100px;
  text-decoration:none; transition:background .2s, transform .2s;
}
.nav-cta:hover { background:var(--accent-hover); transform:translateY(-1px); }

/* ===== HERO ===== */
.hero {
  position:relative; padding:100px 20px 56px; text-align:center; overflow:hidden;
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-deep);
}
.hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(80px); }
.hero-glow--1 { top:-30%; left:40%; width:500px; height:500px; background:radial-gradient(circle, rgba(232,85,61,.1) 0%, transparent 70%); }
.hero-glow--2 { bottom:-20%; right:-5%; width:350px; height:350px; background:radial-gradient(circle, rgba(78,201,184,.06) 0%, transparent 70%); }
.hero-glow--3 { top:40%; left:-10%; width:300px; height:300px; background:radial-gradient(circle, rgba(240,192,96,.04) 0%, transparent 70%); }

.hero-container { position:relative; z-index:1; max-width:520px; margin:0 auto; }

/* ===== PHONE MOCKUP ===== */
.hero-phone { margin:28px auto; max-width:220px; perspective:800px; }
.phone-frame {
  background:#1a1c2e; border:2px solid rgba(255,255,255,.08); border-radius:28px;
  padding:8px; position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06);
  transform:rotateX(2deg); transition:transform .4s ease;
}
.phone-frame:hover { transform:rotateX(0deg) translateY(-4px); }
.phone-notch {
  width:80px; height:6px; background:#0e1018; border-radius:0 0 10px 10px;
  margin:0 auto 8px; position:relative; z-index:2;
}
.phone-screen { background:#111320; border-radius:20px; overflow:hidden; }
.phone-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05);
}
.phone-title { font-size:.72rem; font-weight:600; color:var(--fg-primary); }
.phone-chapter { font-size:.62rem; color:var(--fg-muted); }
.phone-content { padding:14px 16px; min-height:100px; }
.phone-content p { font-size:.68rem; line-height:1.9; color:var(--fg-secondary); margin-bottom:6px; }
.phone-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 16px; border-top:1px solid rgba(255,255,255,.05);
  font-size:.6rem; color:var(--fg-muted);
}
.phone-progress { color:var(--accent); font-weight:600; }

.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; background:var(--accent-soft);
  border:1px solid var(--border-accent); border-radius:100px;
  font-size:.75rem; color:var(--accent); font-weight:500; margin-bottom:24px; letter-spacing:.03em;
}
.hero-badge-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; animation:pulse-d 2s ease-in-out infinite; }
@keyframes pulse-d { 0%,100%{opacity:1} 50%{opacity:.25} }

.hero-title {
  font-family:var(--font-display); font-size:2rem; font-weight:400;
  line-height:1.35; letter-spacing:.02em; margin-bottom:16px;
}
.hero-title .accent, .closing h2 .accent, .section-title .accent {
  background:linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:.88rem; line-height:1.75; color:var(--fg-secondary); margin-bottom:28px; max-width:400px; margin-left:auto; margin-right:auto; }

.hero-genres { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-bottom:28px; }
.genre-tag {
  padding:5px 13px; border:1px solid var(--border); border-radius:100px;
  font-size:.73rem; color:var(--fg-secondary); background:rgba(255,255,255,.02);
  transition:border-color .2s, color .2s, background .2s;
}
.genre-tag:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }

.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0; }
.stat-item:not(:last-child) { border-right:1px solid var(--border); }
.stat-num { font-family:var(--font-display); font-size:1.4rem; font-weight:400; color:var(--fg-primary); line-height:1; }
.stat-num .stat-accent { color:var(--accent); }
.stat-label { font-size:.68rem; color:var(--fg-muted); letter-spacing:.08em; text-transform:uppercase; }

/* ===== FEATURES ===== */
.features { padding:60px 20px; background:var(--bg-primary); position:relative; }
.features::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--border-accent), transparent); }
.features-container { max-width:560px; margin:0 auto; }

.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.feature-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 16px; transition:border-color .3s, transform .3s, box-shadow .3s;
  position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  opacity:0; transition:opacity .3s;
}
.feature-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.35); }
.feature-card:hover::before { opacity:1; }

/* Color variants via modifier class — each card has its own accent */
.feature-card--accent { border-color:rgba(232,85,61,.12); }
.feature-card--accent::before { background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.feature-card--accent:hover { border-color:rgba(232,85,61,.3); }
.feature-card--cyan { border-color:rgba(78,201,184,.1); }
.feature-card--cyan::before { background:linear-gradient(90deg, transparent, var(--cyan), transparent); }
.feature-card--cyan:hover { border-color:rgba(78,201,184,.25); }
.feature-card--gold { border-color:rgba(240,192,96,.1); }
.feature-card--gold::before { background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.feature-card--gold:hover { border-color:rgba(240,192,96,.25); }
.feature-card--rose { border-color:rgba(232,96,122,.1); }
.feature-card--rose::before { background:linear-gradient(90deg, transparent, var(--rose), transparent); }
.feature-card--rose:hover { border-color:rgba(232,96,122,.25); }

.feature-icon-wrap {
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:11px; margin-bottom:14px;
}
.feature-card--accent .feature-icon-wrap { background:rgba(232,85,61,.1); color:var(--accent); }
.feature-card--cyan .feature-icon-wrap { background:rgba(78,201,184,.1); color:var(--cyan); }
.feature-card--gold .feature-icon-wrap { background:rgba(240,192,96,.1); color:var(--gold); }
.feature-card--rose .feature-icon-wrap { background:rgba(232,96,122,.1); color:var(--rose); }

.feature-card h3 { font-family:var(--font-body); font-size:.9rem; font-weight:600; margin-bottom:6px; color:var(--fg-primary); }
.feature-card p { font-size:.76rem; line-height:1.65; color:var(--fg-secondary); }

/* ===== SECTION TAG ===== */
.section-tag {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:600; color:var(--accent); letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:8px;
}

/* ===== HOT NOVELS ===== */
.hot-novels { padding:60px 0; background:var(--bg-deep); position:relative; }
.hot-novels-container { max-width:800px; margin:0 auto; padding:0 20px; }
.hot-novels-header { text-align:center; margin-bottom:28px; }

.novels-scroll {
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:8px 0 20px; scrollbar-width:none;
}
.novels-scroll::-webkit-scrollbar { display:none; }

.novel-card { flex:0 0 130px; scroll-snap-align:start; transition:transform .3s ease; }
.novel-card:hover { transform:translateY(-4px); }

.novel-cover {
  position:relative; width:130px; height:180px; border-radius:var(--radius);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:12px 10px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.5); cursor:pointer; transition:box-shadow .3s;
}
.novel-card:hover .novel-cover { box-shadow:0 10px 32px rgba(0,0,0,.6); }
.novel-cover::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 20%, rgba(0,0,0,.7) 100%); pointer-events:none;
}

.cover-genre {
  position:absolute; top:8px; left:8px; z-index:2;
  padding:2px 7px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  border-radius:5px; font-size:.6rem; font-weight:600; color:var(--gold); letter-spacing:.04em;
}
.cover-rank {
  position:absolute; top:8px; right:8px; z-index:2;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); border-radius:5px; font-size:.62rem; font-weight:700; color:#fff;
}
.cover-title {
  position:relative; z-index:2;
  font-family:var(--font-display); font-size:.82rem; font-weight:400;
  color:#fff; line-height:1.35; text-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* Rank badge podium colors */
.cover-rank--1 { background:linear-gradient(135deg, #f0c060, #e8a020); }
.cover-rank--2 { background:linear-gradient(135deg, #a8b4c0, #8895a0); }
.cover-rank--3 { background:linear-gradient(135deg, #cd7f32, #a0622c); }

.novel-info { padding-top:8px; }
.novel-info h4 { font-size:.76rem; font-weight:600; color:var(--fg-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.novel-meta { font-size:.64rem; color:var(--fg-muted); margin-top:2px; display:flex; align-items:center; gap:4px; }
.meta-status { font-size:.58rem; font-weight:600; padding:1px 5px; border-radius:3px; }
.meta-status--live { background:rgba(78,201,184,.12); color:var(--cyan); }
.meta-status--done { background:rgba(140,140,160,.12); color:var(--fg-secondary); }
.novels-cta { text-align:center; margin-top:10px; }

/* ===== READING MODES ===== */
.reading-modes { padding:60px 20px; background:var(--bg-primary); position:relative; }
.reading-modes::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(78,201,184,.18), transparent); }
.reading-modes-container { max-width:560px; margin:0 auto; text-align:center; }

.modes-demo { display:flex; gap:10px; justify-content:center; margin-top:20px; }

.mode-card {
  flex:1; min-width:85px; max-width:140px;
  padding:18px 10px 14px; border-radius:var(--radius); border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:border-color .3s, transform .3s;
}
.mode-card:hover { transform:translateY(-2px); }
.mode-card--day { background:#faf5ee; color:#2a2520; }
.mode-card--eye { background:#c4dbb5; color:#1a2e14; }
.mode-card--night { background:#1a1a2e; color:#c0c4d0; }

.mode-preview { display:flex; flex-direction:column; gap:4px; width:100%; padding:0 4px; margin-bottom:4px; }
.mode-preview-line { display:block; height:3px; border-radius:2px; opacity:.3; }
.mode-card--day .mode-preview-line { background:#2a2520; }
.mode-card--eye .mode-preview-line { background:#1a2e14; }
.mode-card--night .mode-preview-line { background:#c0c4d0; }

.mode-label { font-size:.76rem; font-weight:600; letter-spacing:.03em; }
.mode-desc { font-size:.66rem; opacity:.6; }

/* ===== CLOSING ===== */
.closing { padding:68px 20px; text-align:center; position:relative; overflow:hidden; background:var(--bg-deep); }
.closing::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:450px; height:450px; background:radial-gradient(circle, rgba(232,85,61,.06) 0%, transparent 70%);
  pointer-events:none;
}
.closing-container { max-width:440px; margin:0 auto; position:relative; z-index:1; }
.closing-decoration { margin-bottom:16px; }
.closing h2 { font-family:var(--font-display); font-size:1.7rem; font-weight:400; line-height:1.4; margin-bottom:12px; }
.closing-sub { font-size:.88rem; color:var(--fg-secondary); margin-bottom:28px; line-height:1.7; }
.closing-trust { margin-top:24px; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:5px; font-size:.73rem; color:var(--fg-muted); }
.trust-item svg { opacity:.5; }

/* ===== FOOTER ===== */
.site-footer { padding:28px 20px 22px; border-top:1px solid var(--border); background:var(--bg-primary); }
.footer-container { max-width:560px; margin:0 auto; text-align:center; }
.footer-brand { font-family:var(--font-display); font-size:.9rem; font-weight:400; color:var(--fg-primary); margin-bottom:12px; display:flex; align-items:center; justify-content:center; gap:6px; }
.footer-links { display:flex; justify-content:center; gap:18px; margin-bottom:14px; flex-wrap:wrap; }
.footer-links a { color:var(--fg-secondary); text-decoration:none; font-size:.78rem; transition:color .2s; }
.footer-links a:hover { color:var(--accent); }
.footer-divider { width:36px; height:1px; background:var(--border); margin:0 auto 12px; }
.footer-note { font-size:.68rem; color:var(--fg-muted); line-height:1.5; }

/* ===== TABLET (768px+) ===== */
@media(min-width:768px) {
  .landing-nav { padding:14px 36px; }
  .hero { padding:140px 36px 100px; }
  .hero-title { font-size:2.8rem; }
  .hero-sub { font-size:.95rem; }
  .hero-stats { max-width:400px; margin:0 auto; }
  .stat-num { font-size:1.7rem; }
  .section-title { font-size:1.8rem; }
  .features { padding:80px 36px; }
  .features-container { max-width:860px; }
  .features-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .feature-card { padding:26px 20px; }
  .feature-card h3 { font-size:.98rem; }
  .feature-card p { font-size:.82rem; }
  .hot-novels { padding:80px 0; }
  .hot-novels-container { max-width:920px; padding:0 36px; }
  .novels-scroll { gap:18px; justify-content:center; flex-wrap:wrap; overflow-x:visible; }
  .novel-card { flex:0 0 150px; }
  .novel-cover { width:150px; height:205px; }
  .cover-title { font-size:.9rem; }
  .novel-info h4 { font-size:.82rem; }
  .reading-modes { padding:80px 36px; }
  .modes-demo { gap:14px; }
  .mode-card { padding:24px 14px; max-width:160px; }
  .closing { padding:100px 36px; }
  .closing h2 { font-size:2.4rem; }
  .site-footer { padding:36px 36px 28px; }
}

/* ===== DESKTOP (1024px+) ===== */
@media(min-width:1024px) {
  .hero-title { font-size:3.4rem; }
  .hero-glow--1 { width:700px; height:700px; }
  .hero-phone { max-width:260px; }
  .features-container { max-width:960px; }
  .features-grid { grid-template-columns:repeat(4,1fr); }
  .novel-card { flex:0 0 165px; }
  .novel-cover { width:165px; height:225px; }
  .hot-novels-container { max-width:1020px; }
}