/* ============================================================================
   Real Nova World — Global Styles (mobile-first)
   说明：
   1) 整合首页与通用样式：导航、Hero 轮播、卡片网格、表单、页脚等
   2) 默认深色主题，跟随系统浅色模式自动优化
   3) 移动优先；桌面端用媒体查询增强观感
   ============================================================================ */

/* ── 主题变量 ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#0b0f1a;
  --card:#121726;
  --muted:#7c86a2;
  --pri:#4da3ff;
  --txt:#e9edf7;
  --acc:#7cf5d1;
  --maxw:1200px;          /* 正文最大宽度 */
  --hero-maxw:1600px;     /* 顶部轮播最大宽度（可调） */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--txt);
  font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}

/* 全站主要块居中排版（列表在各自模块内再左对齐） */
body, .section .container, .hero .container, .footer .container{ text-align:center; }

/* 链接与容器 */
a{color:var(--pri);text-decoration:none}
a:hover{opacity:.9}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ── 基础组件 ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;padding:12px 18px;border-radius:10px;
  background:linear-gradient(135deg,var(--pri),#6ab7ff);
  color:#fff;font-weight:600;box-shadow:var(--shadow)
}
.btn.alt{background:linear-gradient(135deg,var(--acc),#73e6ff);color:#00131b}
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:#0e1a2e;color:var(--acc);border:1px solid #173052;font-size:.8rem
}
.card{background:var(--card);border:1px solid #1e2740;border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:20px;justify-items:center;align-items:start}
.note{color:var(--muted);font-size:.95rem}
.tag{display:inline-block;padding:6px 10px;border:1px solid #253255;border-radius:999px;color:#a6c8ff;margin-right:8px;margin-bottom:8px}

/* ── 顶部导航 ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:10;background:rgba(11,15,26,.7);backdrop-filter:blur(8px);border-bottom:1px solid #161d33}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.4px}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 18px var(--acc)}
.nav a{color:#dfe7ff}
.menu{display:flex;gap:16px;align-items:center}
.menu a:hover{opacity:.85}
.burger{display:inline-flex;flex-direction:column;gap:4px;margin-left:12px}
.burger span{width:24px;height:2px;background:#c9d6ff;border-radius:6px}

/* 抽屉菜单 */
#drawer{position:fixed;inset:0 0 auto 0;background:#0b1020;border-bottom:1px solid #1e2740;display:none;z-index:999}
#drawer.open{display:block}
#drawer a{display:block;padding:14px 18px;border-top:1px solid #1a2340;color:#dfe7ff}

/* 响应式导航可见性 */
@media (max-width:900px){
  .menu a,.menu .btn,.theme-toggle{display:none}
  .menu .mobile{display:inline-flex}
}
@media (min-width:980px){ .menu .mobile{display:none} }

/* ── HERO 顶部轮播：整体容器“限宽 + 居中” ───────────────────────────────── */
.hero{padding-top:14px}

/* ✅ 核心：轮播整体成为一个最大宽度为 --hero-maxw 的居中块 */
.hero-bleed{
  position:relative;
  width:min(100vw,var(--hero-maxw));
  margin:0 auto;                      /* 居中 */
  overflow:hidden;
  border-block:1px solid #1e2740;
}

/* 轨道与单帧 */
.hero-track{
  display:flex;position:relative;height:min(72vh,820px);
  transition:transform .4s ease;will-change:transform;
}
.hero-slide{min-width:100%;height:100%;position:relative;user-select:none;cursor:pointer;background:#0d1a32}
.hero-slide img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;
}

/* 圆点 */
.hero-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#8593b8;opacity:.7}
.hero-dots button[aria-current="true"]{opacity:1;background:#ffffff}

/* 图片失败占位 */
.hero-slide.fallback{background:linear-gradient(135deg,#0d1a32 0%,#0b2a3f 70%) !important;position:relative}
.hero-slide.fallback::after{content:"Image not found";position:absolute;left:16px;bottom:16px;color:#7cf5d1;font-size:14px;opacity:.8}

/* HERO 下文案与 CTA —— 居中 */
.hero h1{font-size:2.1rem;margin:.2rem 0}
.hero p{color:var(--muted);max-width:720px;margin:0 auto}
.hero .cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;justify-content:center}

/* KPI —— 居中 */
.kpis{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;justify-content:center}
.kpis .k{padding:8px 14px;border:1px solid #1e2740;border-radius:12px}

/* ── 四个设计原则（限宽 + 居中） ─────────────────────────────────────────── */
.principle-box{
  display:flex;gap:16px;align-items:center;
  border:1px solid #223055;border-radius:14px;padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  max-width:980px;margin:0 auto;
}
.principle-art{width:52%;height:112px;min-width:260px;border-radius:10px;border:1px solid #223055;display:block}
.principle-meta{flex:1;min-width:220px}
.principle-meta h3{margin:0 0 6px 0}
.principle-meta p{margin:0;color:#9fb3d9}

/* ── 生态 / 案例 ─────────────────────────────────────────────────────────── */
.logos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center;justify-items:center}
.logos .logo-box{background:rgba(255,255,255,.02);border:1px solid #1e2740;border-radius:12px;padding:16px;text-align:center}
.logos .logo-box span{opacity:.8}
.case{display:flex;flex-direction:column;gap:10px;padding:22px;max-width:720px;margin:0 auto}
.case h4{margin:0}
.case .small{color:#9fb3d9;font-size:.9rem}

/* ── Section 标准边距/标题 ────────────────────────────────────────────────── */
.section{padding:56px 0}
.section h2{margin:.2rem 0 1rem;font-size:1.6rem}
.section p.lead{color:var(--muted);max-width:820px;margin:0 auto}

/* 列表保持左对齐提高可读性 */
.list{margin:0 auto;padding:0;list-style:none;max-width:820px;text-align:left}
.list li{padding:10px 0;border-bottom:1px solid #1e2740}

/* ── 图片展示 ─────────────────────────────────────────────────────────────── */
.tile-img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #1e2740;margin-bottom:12px}

/* ✅ 世界分层图：适度大小 + 居中（不再通栏） */
.figure-bleed{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  border-radius:14px;
}
.figure-bleed img{
  width:100%;height:auto;display:block;border-radius:14px;border:1px solid #1e2740;
  object-fit:cover;object-position:center;
}
.figure-fit img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid #1e2740}
.figure-wide{margin:0 0 16px 0}
.figure-wide figcaption{color:var(--muted);margin-top:8px;font-size:.95rem}

/* ── 表单（Book a demo）—— ✅ 居中且限宽 ─────────────────────────────────── */
/* 情况一：元素带有 .demo-card 类（常规） */
.demo-card{
  max-width:860px;
  width:100%;
  margin:0 auto;
  display:block;
}
/* 情况二：你的实际结构是 <div class="container card demo-card ...">。
   用更高优先级把它“钉死”在居中状态，避免被 .container 的宽度规则影响。 */
.container.card.demo-card{
  max-width:860px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  float:none;
}

/* 表单内部控件 */
.form{display:grid;gap:12px;grid-template-columns:1fr}
.form .row{display:grid;gap:12px;grid-template-columns:1fr}
.form input,.form textarea,.form select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid #2a365a;background:#121a2e;color:#e9edf7
}
.form textarea{min-height:110px;resize:vertical}
.form .hint{color:#8aa0cb;font-size:.9rem}

/* ── 页脚 ─────────────────────────────────────────────────────────────────── */
.footer{margin-top:40px;padding:30px 0;border-top:1px solid #1e2740;color:#a9b3cc}
.footer a{color:#a9d4ff}

/* ── 小屏优化 ─────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  .container{padding:0 14px}
  .hero-track{height:56vh}
  .hero .container{padding-top:6px}
  .kpis .k{font-size:.9rem}
  .principle-art{width:100%;min-width:0;height:104px}
  .principle-box{flex-direction:column;align-items:stretch}
  h1{font-size:1.6rem;line-height:1.25}
  h2{font-size:1.3rem;line-height:1.3}
}

/* ── 浅色主题 ─────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8ff; --card:#ffffff; --txt:#0b0f1a; --muted:#4a5675; --pri:#336dff; --acc:#07c7a7; }
  body{background:var(--bg);color:var(--txt)}
  .card{border-color:#e6ebff;box-shadow:0 6px 24px rgba(15,35,95,.08)}
  .badge{background:#eaf1ff;color:#045}
  .logo .dot{box-shadow:none}
  .logos .logo-box,.principle-art{border-color:#dfe6ff}
  .principle-box{border-color:#dfe6ff;background:#fff}
  .form input,.form textarea,.form select{background:#ffffff;color:#0b0f1a;border-color:#d7def7}
}