:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel2:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:#1f2937;
  --brand:#38bdf8;
  --accent:#facc15;
  --radius:18px;
  --shadow:0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#060b16,#0b1220);
  color:var(--text);
  line-height:1.7;
}
a{text-decoration:none;color:inherit}
.page-wrap{
  max-width:1280px;
  margin:30px auto;
  padding:0 22px;
}
.container{max-width:1180px;margin:0 auto}
header{
  background:rgba(6,11,22,.9);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 22px;
}
.nav{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:22px;font-weight:bold;color:var(--brand)}
.nav a{margin-left:14px;font-size:14px;color:var(--muted)}
.nav a:hover{color:#fff}

.hero{
  margin-top:28px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:48px;
}
.hero h1{font-size:44px;color:var(--accent);margin-bottom:14px}
.hero p{color:var(--muted);max-width:760px;font-size:16px}
.btns{margin-top:24px}
.btn{
  display:inline-block;padding:12px 20px;margin-right:12px;
  border-radius:12px;border:1px solid var(--line);
  background:#0f172a;color:#fff;font-size:14px;
  transition:.2s;
}
.btn.primary{background:var(--brand);color:#000;font-weight:bold}
.btn:hover{transform:translateY(-2px)}

.section{
  margin-top:36px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:44px;
}
.section h2{font-size:34px;color:var(--accent);margin-bottom:12px}
.section p.desc{color:var(--muted);max-width:820px;margin-bottom:24px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  transition:.2s;
}
.card:hover{transform:translateY(-4px);border-color:var(--brand)}
.card h3{color:var(--brand);margin-bottom:8px}
.card p{color:var(--muted);font-size:14px}

.table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.table th,.table td{
  padding:14px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.table th{color:var(--brand);text-align:left;background:#020617}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.contact-box{
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  font-size:15px;
}
.contact-box p{margin:6px 0}

footer{
  margin-top:36px;
  background:#020617;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  text-align:center;
  color:#6b7280;
  font-size:13px;
  box-shadow:var(--shadow);
}

@media(max-width:768px){
  .hero{padding:32px}
  .hero h1{font-size:32px}
  .section{padding:30px}
}


/* Mobile Hamburger Menu */
.nav-toggle{
  display:none;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0f172a;
  cursor:pointer;
  position:relative;
}
.nav-toggle span{
  position:absolute;
  left:8px;
  right:8px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:.25s;
}
.nav-toggle span:nth-child(1){top:10px}
.nav-toggle span:nth-child(2){top:17px}
.nav-toggle span:nth-child(3){top:24px}

.nav.open .nav-toggle span:nth-child(1){
  transform:rotate(45deg);
  top:17px;
}
.nav.open .nav-toggle span:nth-child(2){
  opacity:0;
}
.nav.open .nav-toggle span:nth-child(3){
  transform:rotate(-45deg);
  top:17px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:14px;
}

@media(max-width:900px){
  .nav-links{
    position:absolute;
    top:72px;
    right:24px;
    background:linear-gradient(180deg,var(--panel),var(--panel2));
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:14px 16px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    display:none;
    min-width:200px;
  }
  .nav.open .nav-links{
    display:flex;
  }
  .nav-toggle{
    display:block;
  }
}


/* Light Theme (default) */
body.light{
  background:linear-gradient(180deg,#f8fafc,#e5e7eb);
  color:#111827;
}
body.light header,
body.light .hero,
body.light .section,
body.light footer{
  background:#ffffff;
  border-color:#e5e7eb;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
body.light .card,
body.light .contact-box,
body.light .table{
  background:#f9fafb;
  border-color:#e5e7eb;
}
body.light .logo{color:#0284c7}
body.light .btn.primary{color:#fff}
body.light .nav a{color:#374151}
body.light .nav a:hover{color:#111827}

/* Theme Toggle Button */
.theme-toggle{
  margin-left:10px;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0f172a;
  color:#fff;
  font-size:13px;
  cursor:pointer;
}
body.light .theme-toggle{
  background:#e5e7eb;
  color:#111827;
}


/* =========================
   THEME SYSTEM (DEFAULT LIGHT)
   ========================= */

/* Light theme as default (like large websites) */
body{
  background:#f8fafc !important;
  color:#111827 !important;
}

/* Light theme components */
header, .hero, .section, footer{
  background:#ffffff !important;
  border-color:#e5e7eb !important;
  box-shadow:0 8px 24px rgba(0,0,0,.05) !important;
}
.card, .contact-box, .table{
  background:#f9fafb !important;
  border-color:#e5e7eb !important;
}
.logo{color:#2563eb !important;}
.nav a{color:#374151 !important;}
.nav a:hover{color:#111827 !important;}
.btn.primary{
  background:#2563eb !important;
  color:#ffffff !important;
}

/* Dark theme (when body has .dark) */
body.dark{
  background:linear-gradient(180deg,#060b16,#0b1220) !important;
  color:#e5e7eb !important;
}
body.dark header,
body.dark .hero,
body.dark .section,
body.dark footer{
  background:linear-gradient(180deg,#0f172a,#111827) !important;
  border-color:#1f2937 !important;
  box-shadow:0 20px 50px rgba(0,0,0,.35) !important;
}
body.dark .card,
body.dark .contact-box,
body.dark .table{
  background:#0b1220 !important;
  border-color:#1f2937 !important;
}
body.dark .logo{color:#38bdf8 !important;}
body.dark .nav a{color:#9ca3af !important;}
body.dark .nav a:hover{color:#ffffff !important;}
body.dark .btn.primary{
  background:#38bdf8 !important;
  color:#000000 !important;
}

/* Theme toggle button style */
.theme-toggle{
  margin-left:10px;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#f1f5f9;
  color:#111827;
  font-size:13px;
  cursor:pointer;
  transition:.2s;
}
body.dark .theme-toggle{
  background:#0f172a;
  border-color:#1f2937;
  color:#e5e7eb;
}
.theme-toggle:hover{
  transform:translateY(-1px);
}


/* =========================
   FONT COLOR OPTIMIZATION
   ========================= */

/* Light theme text colors */
body{
  color:#111827;
}
.hero h1, .section h2{
  color:#111827;
}
.section p.desc, .card p, .table td, .contact-box p{
  color:#374151;
}
.table th{
  color:#2563eb;
}
.card h3{
  color:#2563eb;
}

/* Dark theme text colors */
body.dark{
  color:#e5e7eb;
}
body.dark .hero h1,
body.dark .section h2{
  color:#facc15;
}
body.dark .section p.desc,
body.dark .card p,
body.dark .table td,
body.dark .contact-box p{
  color:#9ca3af;
}
body.dark .table th,
body.dark .card h3{
  color:#38bdf8;
}


.theme-toggle{
  font-weight:600;
  border-radius:12px;
  padding:8px 16px;
}


/* ===== Mobile Menu Color Fix ===== */
@media(max-width:900px){
  .nav-links{
    background:#ffffff !important;
    color:#111827 !important;
  }
  .nav-links a{
    color:#111827 !important;
  }
  body.dark .nav-links{
    background:#0f172a !important;
    color:#e5e7eb !important;
  }
  body.dark .nav-links a{
    color:#e5e7eb !important;
  }
}


/* ===== Global Text Color Consistency ===== */

/* Light Theme */
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3{
  color:#111827;
}
body:not(.dark) p,
body:not(.dark) li,
body:not(.dark) td{
  color:#374151;
}
body:not(.dark) .desc{
  color:#4b5563;
}
body:not(.dark) footer{
  color:#6b7280;
}

/* Dark Theme */
body.dark h1,
body.dark h2,
body.dark h3{
  color:#facc15;
}
body.dark p,
body.dark li,
body.dark td{
  color:#9ca3af;
}
body.dark .desc{
  color:#9ca3af;
}
body.dark footer{
  color:#6b7280;
}


.hero-image img{
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}
body.dark .hero-image img{
  border-color:#1f2937;
}
@media(max-width:900px){
  .hero-image{
    margin-top:20px;
  }
}


/* ===== Minimal Hamburger Menu ===== */
.nav-toggle{
  background:transparent !important;
  border:none !important;
  width:32px;
  height:28px;
}
.nav-toggle span{
  background:currentColor !important;
  height:2px;
  border-radius:0;
}
@media(max-width:900px){
  .nav-links{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
}


/* ===== Mobile Menu Background Fix ===== */
@media(max-width:900px){
  .nav-links{
    background:rgba(255,255,255,0.96) !important;
    color:#111827 !important;
  }
  body.dark .nav-links{
    background:rgba(15,23,42,0.96) !important;
    color:#e5e7eb !important;
  }
}


/* =========================================================
   V12 OVERRIDES (clean + consistent)
   - Default: Light (enterprise style)
   - Toggle: Dark
   - Mobile menu: readable background, no border/box
   ========================================================= */

/* Minimal hamburger */
.nav-toggle{
  background:transparent !important;
  border:none !important;
  width:34px !important;
  height:30px !important;
  color:inherit;
}
.nav-toggle span{
  background:currentColor !important;
  height:2px !important;
  border-radius:2px !important;
}

/* Theme: default LIGHT */
body{
  background:#f8fafc !important;
  color:#111827 !important;
}

/* Light surfaces */
header, .hero, .section, footer{
  background:#ffffff !important;
  border-color:#e5e7eb !important;
  box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
}
.card, .contact-box, .table{
  background:#f9fafb !important;
  border-color:#e5e7eb !important;
}
.logo{color:#2563eb !important;}
.nav a{color:#374151 !important;}
.nav a:hover{color:#111827 !important;}
.btn.primary{background:#2563eb !important;color:#ffffff !important;}
.hero h1{color:#111827 !important;}
.section h2{color:#111827 !important;}
.section p.desc, .card p, .table td, .contact-box p{color:#374151 !important;}
.card h3, .table th{color:#2563eb !important;}

/* Theme toggle item should look like a menu link */
.nav-links a#themeToggle{
  font-weight:600;
}

/* DARK theme */
body.dark{
  background:linear-gradient(180deg,#060b16,#0b1220) !important;
  color:#e5e7eb !important;
}
body.dark header,
body.dark .hero,
body.dark .section,
body.dark footer{
  background:linear-gradient(180deg,#0f172a,#111827) !important;
  border-color:#1f2937 !important;
  box-shadow:0 20px 50px rgba(0,0,0,.35) !important;
}
body.dark .card,
body.dark .contact-box,
body.dark .table{
  background:#0b1220 !important;
  border-color:#1f2937 !important;
}
body.dark .logo{color:#38bdf8 !important;}
body.dark .nav a{color:#cbd5e1 !important;}
body.dark .nav a:hover{color:#ffffff !important;}
body.dark .btn.primary{background:#38bdf8 !important;color:#000 !important;}
body.dark .hero h1,
body.dark .section h2{color:#facc15 !important;}
body.dark .section p.desc,
body.dark .card p,
body.dark .table td,
body.dark .contact-box p{color:#cbd5e1 !important;}
body.dark .card h3,
body.dark .table th{color:#38bdf8 !important;}

/* Mobile menu: readable background, no border/box */
@media(max-width:900px){
  .nav-links{
    background:rgba(255,255,255,0.96) !important;
    border:none !important;
    box-shadow:none !important;
    right:18px !important;
  }
  .nav-links a{color:#111827 !important;}
  body.dark .nav-links{
    background:rgba(15,23,42,0.96) !important;
  }
  body.dark .nav-links a{color:#e5e7eb !important;}
}

/* Hero title sizing tweaks (EN was too large) */
.hero h1{
  font-size:38px !important;
  line-height:1.15 !important;
  margin-top:0 !important;
}
@media(max-width:768px){
  .hero h1{font-size:30px !important;}
}


/* Table header background in LIGHT mode */
body:not(.dark) .table th{
  background:#f3f4f6 !important;
  color:#1f2937 !important;
}
body:not(.dark) .table tr:nth-child(even) td{
  background:#ffffff !important;
}


/* Hero responsive layout improvement */
.hero{
  display:grid !important;
  grid-template-columns:1.1fr 0.9fr !important;
  gap:36px !important;
  align-items:center !important;
}
.hero h1{
  max-width:640px;
}
.hero p{
  max-width:620px;
}
.hero .btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
@media(max-width:900px){
  .hero{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .hero h1{
    font-size:30px !important;
  }
  .hero .btns{
    flex-direction:row;
    gap:10px;
  }
  .hero .btn{
    padding:10px 16px;
  }
}


/* Secondary button style (了解服务 / Learn More) */
.btn.secondary{
  background:#eef2ff !important;
  color:#1e40af !important;
  border:1px solid #c7d2fe !important;
}
body.dark .btn.secondary{
  background:#1e293b !important;
  color:#93c5fd !important;
  border:1px solid #334155 !important;
}
.btn.secondary:hover{
  opacity:0.85;
}