/* ==========================================================================
   Site 3: longmao.mom - 4K Streaming & AI Pavilion Theme (Sunset Orange)
   ========================================================================== */
:root {
  --primary: #ea580c;
  --primary-dark: #c2410c;
  --primary-light: #f97316;
  --accent: #eab308;
  --bg-page: #fffbeb;
  --bg-card: #ffffff;
  --text-main: #1c1917;
  --text-muted: #78716c;
  --border: #fed7aa;
  --radius-lg: 20px;
  --radius-md: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--text-main); background:var(--bg-page); line-height:1.65; }
a { text-decoration:none; color:inherit; }
.str-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Header */
.str-header { position:sticky; top:0; background:rgba(255, 251, 235, 0.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); z-index:1000; }
.str-header .str-container { display:flex; justify-content:space-between; align-items:center; height:74px; }
.str-brand { display:flex; align-items:center; gap:12px; }
.str-brand img { border-radius:12px; box-shadow:0 4px 10px rgba(234,88,12,0.2); }
.str-name { font-size:1.25rem; font-weight:800; color:var(--primary); display:block; line-height:1.2; }
.str-badge { font-size:0.65rem; font-weight:700; color:#ffffff; background:linear-gradient(135deg, #f97316 0%, #ea580c 100%); padding:2px 8px; border-radius:4px; letter-spacing:1px; }
.str-nav { display:flex; align-items:center; gap:26px; list-style:none; }
.str-nav a { font-size:0.95rem; font-weight:700; color:#57534e; }
.str-nav a:hover, .str-nav a.active { color:var(--primary); }
.str-btn-glow { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:999px; background:linear-gradient(135deg, #f97316 0%, #ea580c 100%); color:#ffffff; font-weight:700; font-size:0.92rem; box-shadow:0 4px 16px rgba(234,88,12,0.35); transition:all 0.25s ease; }
.str-btn-glow:hover { transform:scale(1.03); box-shadow:0 6px 22px rgba(234,88,12,0.45); }

/* Split Hero with 4K Player Mockup */
.str-hero { padding: 70px 0 60px; background:linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%); border-bottom:1px solid var(--border); }
.str-hero-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; }
.str-hero-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; background:#ffedd5; border:1px solid #fed7aa; border-radius:999px; color:var(--primary-dark); font-size:0.85rem; font-weight:700; margin-bottom:20px; }
.str-hero h1 { font-size:2.9rem; font-weight:900; line-height:1.2; color:#431407; margin-bottom:18px; }
.str-hero h1 span { color:var(--primary); }
.str-hero p { font-size:1.1rem; color:var(--text-muted); line-height:1.75; margin-bottom:30px; }
.str-hero-cta { display:flex; gap:16px; margin-bottom:26px; }

/* 4K Player Mockup */
.player-mockup { background:#18181b; border-radius:var(--radius-lg); padding:20px; box-shadow:0 20px 50px rgba(0,0,0,0.25); border:1px solid #3f3f46; color:#ffffff; }
.pm-topbar { display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; color:#a1a1aa; padding-bottom:12px; border-bottom:1px solid #27272a; margin-bottom:16px; }
.pm-screen { height:180px; background:radial-gradient(circle at 50% 50%, #292524 0%, #0c0a09 100%); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; border:1px solid #44403c; }
.pm-play-btn { width:54px; height:54px; border-radius:50%; background:var(--primary); color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 0 25px rgba(234,88,12,0.8); cursor:pointer; }
.pm-quality-tag { position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.7); border:1px solid #ea580c; color:#ea580c; font-size:0.75rem; font-weight:800; padding:2px 8px; border-radius:4px; }
.pm-controls { margin-top:14px; }
.pm-progress { height:5px; background:#3f3f46; border-radius:3px; position:relative; overflow:hidden; margin-bottom:10px; }
.pm-progress-bar { width:78%; height:100%; background:linear-gradient(90deg, #ea580c, #f97316); }
.pm-stats { display:flex; justify-content:space-between; font-size:0.8rem; color:#a1a1aa; font-family:monospace; }

/* Section General */
.str-sec { padding: 70px 0; }
.str-sec-title { text-align:center; max-width:680px; margin:0 auto 45px; }
.str-sec-title h2 { font-size:2.2rem; font-weight:800; color:#431407; margin-bottom:10px; }
.str-sec-title p { font-size:1.02rem; color:var(--text-muted); }

/* Streaming Platform Unlock Wall */
.platform-wall { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.pw-card { background:#ffffff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 20px; display:flex; align-items:center; gap:16px; box-shadow:0 8px 24px rgba(234,88,12,0.06); }
.pw-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#ffffff; flex-shrink:0; }
.pw-info h4 { font-size:1.1rem; font-weight:800; margin-bottom:4px; }
.pw-status { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:700; color:#16a34a; background:#dcfce7; padding:2px 8px; border-radius:4px; }

/* AI Suite Showcase */
.ai-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.ai-card { background:#ffffff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:0 8px 24px rgba(0,0,0,0.03); }
.ai-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.ai-card-title { font-size:1.2rem; font-weight:800; color:#1c1917; }
.ai-latency { font-size:0.8rem; font-weight:700; color:#16a34a; background:#dcfce7; padding:3px 10px; border-radius:999px; }

/* Curated Streaming Plans */
.str-plan-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.str-plan-card { background:#ffffff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 26px; box-shadow:0 12px 30px rgba(234,88,12,0.06); display:flex; flex-direction:column; position:relative; }
.str-plan-card.featured { border-color:var(--primary); box-shadow:0 16px 40px rgba(234,88,12,0.15); transform:scale(1.02); }
.str-gold-badge { position:absolute; top:-12px; right:20px; background:linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); color:#ffffff; font-size:0.75rem; font-weight:800; padding:4px 12px; border-radius:999px; }
.str-price { font-size:2.6rem; font-weight:900; color:var(--primary); margin:14px 0 20px; }
.str-price span { font-size:0.95rem; color:var(--text-muted); font-weight:500; }
.str-plan-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; flex-grow:1; }
.str-plan-list li { display:flex; align-items:center; gap:8px; font-size:0.92rem; font-weight:600; }
.str-plan-list li i { color:var(--primary); }

/* Ecosystem */
.str-ecosystem { background:#ffffff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:24px 0; }
.str-eco-title { font-size:0.9rem; font-weight:800; color:var(--primary); margin-bottom:10px; }
.str-eco-tags { display:flex; flex-wrap:wrap; gap:10px; }
.str-eco-item { padding:8px 16px; background:#fff7ed; border:1px solid var(--border); border-radius:6px; font-size:0.85rem; font-weight:700; color:#7c2d12; }
.str-eco-item:hover { border-color:var(--primary); background:#ffffff; }

/* Subpage */
.sub-hero { padding:50px 0 40px; text-align:center; background:linear-gradient(180deg, #ffedd5 0%, #fffbeb 100%); border-bottom:1px solid var(--border); }
.sub-hero h1 { font-size:2.3rem; font-weight:900; color:#431407; margin-bottom:10px; }
.sub-hero p { font-size:1.05rem; color:var(--text-muted); max-width:680px; margin:0 auto; }
.sub-content { max-width:960px; margin:45px auto; background:#ffffff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; box-shadow:0 10px 30px rgba(0,0,0,0.03); }
.sub-content h2 { font-size:1.5rem; font-weight:800; color:#431407; margin:28px 0 12px; }
.sub-content h2:first-child { margin-top:0; }
.sub-content p { font-size:1rem; color:var(--text-muted); line-height:1.8; margin-bottom:16px; }
.sub-content ul { padding-left:20px; margin-bottom:18px; }
.sub-content li { font-size:0.95rem; color:var(--text-muted); line-height:1.8; margin-bottom:6px; }

/* Footer */
.str-footer { background:#ffffff; padding:45px 0 25px; }
.sf-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
.sf-brand p { font-size:0.88rem; color:var(--text-muted); margin-top:10px; max-width:320px; }
.sf-col h5 { font-size:0.95rem; font-weight:800; color:#1c1917; margin-bottom:12px; }
.sf-col ul { list-style:none; display:flex; flex-direction:column; gap:8px; font-size:0.88rem; color:var(--text-muted); }
.sf-col a:hover { color:var(--primary); }
.sf-bottom { padding-top:20px; border-top:1px solid var(--border); text-align:center; font-size:0.82rem; color:#a8a29e; }

/* Floating */
.str-float-dock { position:fixed; bottom:25px; right:25px; display:flex; flex-direction:column; gap:10px; z-index:999; }
.str-dock-up { width:44px; height:44px; border-radius:50%; background:#ffffff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:#1c1917; box-shadow:0 6px 16px rgba(0,0,0,0.08); }
.str-dock-cta { padding:10px 18px; border-radius:999px; background:linear-gradient(135deg, #f97316 0%, #ea580c 100%); color:#ffffff; font-weight:700; font-size:0.88rem; box-shadow:0 6px 20px rgba(234,88,12,0.35); display:flex; align-items:center; gap:6px; }

@media (max-width:992px) {
  .str-hero-grid { grid-template-columns:1fr; }
  .platform-wall, .ai-grid, .str-plan-grid { grid-template-columns:1fr; }
  .sf-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .str-nav { display:none; }
  .sf-grid { grid-template-columns:1fr; }
}