/* ========== CSS Reset & Base ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', sans-serif;
  background:#F5F7FA; color:#333; line-height:1.8;
}

/* ========== Color Variables ========== */
:root {
  --deep: #0F2447;
  --orange: #FF7A22;
  --light: #F5F7FA;
  --blue-light: #E8F0FE;
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --blue-50: #eff6ff;
  --purple-50: #faf5ff;
  --orange-light: rgba(255,122,34,0.05);
  --orange10: rgba(255,122,34,0.1);
}

/* ========== Display ========== */
.block { display:block; }
.inline-block { display:inline-block; }
.flex { display:flex; }
.grid { display:grid; }
.contents { display:contents; }
.hidden { display:none; }
.\!hidden { display:none !important; }

/* ========== Flex ========== */
.flex-col { flex-direction:column; }
.flex-row { flex-direction:row; }
.flex-row-reverse { flex-direction:row-reverse; }
.flex-wrap { flex-wrap:wrap; }
.flex-1 { flex:1 1 0%; }
.items-center { align-items:center; }
.items-start { align-items:flex-start; }
.items-end { align-items:flex-end; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.shrink-0 { flex-shrink:0; }

/* ========== Grid ========== */
.grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (min-width:640px) { .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:768px) { .md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .md\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .md\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1024px) { .lg\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .lg\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ========== Gap ========== */
.gap-2 { gap:0.5rem; }
.gap-3 { gap:0.75rem; }
.gap-4 { gap:1rem; }
.gap-6 { gap:1.5rem; }
.gap-8 { gap:2rem; }
.gap-10 { gap:2.5rem; }

/* ========== Space-Y ========== */
.space-y-1 > * + * { margin-top:0.25rem; }
.space-y-2 > * + * { margin-top:0.5rem; }
.space-y-3 > * + * { margin-top:0.75rem; }
.space-y-4 > * + * { margin-top:1rem; }
.space-y-6 > * + * { margin-top:1.5rem; }

/* ========== Padding ========== */
.p-3 { padding:0.75rem; }
.p-4 { padding:1rem; }
.p-5 { padding:1.25rem; }
.p-6 { padding:1.5rem; }
.p-8 { padding:2rem; }
.p-10 { padding:2.5rem; }
.px-3 { padding-left:0.75rem; padding-right:0.75rem; }
.px-4 { padding-left:1rem; padding-right:1rem; }
.px-5 { padding-left:1.25rem; padding-right:1.25rem; }
.px-6 { padding-left:1.5rem; padding-right:1.5rem; }
.px-8 { padding-left:2rem; padding-right:2rem; }
.px-10 { padding-left:2.5rem; padding-right:2.5rem; }
.px-12 { padding-left:3rem; padding-right:3rem; }
.py-1 { padding-top:0.25rem; padding-bottom:0.25rem; }
.py-2 { padding-top:0.5rem; padding-bottom:0.5rem; }
.py-3 { padding-top:0.75rem; padding-bottom:0.75rem; }
.py-4 { padding-top:1rem; padding-bottom:1rem; }
.py-5 { padding-top:1.25rem; padding-bottom:1.25rem; }
.py-12 { padding-top:3rem; padding-bottom:3rem; }
.py-16 { padding-top:4rem; padding-bottom:4rem; }
.py-20 { padding-top:5rem; padding-bottom:5rem; }
.pt-6 { padding-top:1.5rem; }
.pt-16 { padding-top:4rem; }
.pt-20 { padding-top:5rem; }
.pb-4 { padding-bottom:1rem; }
.pb-24 { padding-bottom:6rem; }
.pl-4 { padding-left:1rem; }
.pl-8 { padding-left:2rem; }

/* ========== Margin ========== */
.mx-auto { margin-left:auto; margin-right:auto; }
.mx-4 { margin-left:1rem; margin-right:1rem; }
.my-12 { margin-top:3rem; margin-bottom:3rem; }
.mt-1 { margin-top:0.25rem; }
.mt-2 { margin-top:0.5rem; }
.mt-4 { margin-top:1rem; }
.mt-6 { margin-top:1.5rem; }
.mt-8 { margin-top:2rem; }
.mb-1 { margin-bottom:0.25rem; }
.mb-2 { margin-bottom:0.5rem; }
.mb-3 { margin-bottom:0.75rem; }
.mb-4 { margin-bottom:1rem; }
.mb-6 { margin-bottom:1.5rem; }
.mb-8 { margin-bottom:2rem; }
.mb-10 { margin-bottom:2.5rem; }
.mb-12 { margin-bottom:3rem; }
.mb-16 { margin-bottom:4rem; }
.ml-auto { margin-left:auto; }
.mr-auto { margin-right:auto; }

/* ========== Width/Height ========== */
.w-full { width:100%; }
.w-10 { width:2.5rem; }
.w-14 { width:3.5rem; }
.w-16 { width:4rem; }
.w-40 { width:10rem; }
.w-48 { width:12rem; }
.w-64 { width:16rem; }
.w-80 { width:20rem; }
.h-10 { height:2.5rem; }
.h-14 { height:3.5rem; }
.h-16 { height:4rem; }
.h-40 { height:10rem; }
.h-48 { height:12rem; }
.h-64 { height:16rem; }
.min-w-\[60px\] { min-width:60px; }
.max-w-sm { max-width:24rem; }
.max-w-md { max-width:28rem; }
.max-w-lg { max-width:32rem; }
.max-w-xl { max-width:36rem; }
.max-w-3xl { max-width:48rem; }
.max-w-4xl { max-width:56rem; }
.max-w-5xl { max-width:64rem; }
.max-w-7xl { max-width:80rem; }
@media (min-width:768px) { .md\:w-1\/2 { width:50%; } .md\:w-1\/3 { width:33.333333%; } }
@media (min-width:1024px) { .lg\:w-64 { width:16rem; } }

/* ========== Typography ========== */
.text-xs { font-size:0.75rem; }
.text-sm { font-size:0.875rem; }
.text-base { font-size:1rem; }
.text-lg { font-size:1.125rem; }
.text-xl { font-size:1.25rem; }
.text-2xl { font-size:1.5rem; }
.text-3xl { font-size:1.875rem; }
.text-4xl { font-size:2.25rem; }
.text-5xl { font-size:3rem; }
.text-6xl { font-size:3.75rem; }
.text-7xl { font-size:4.5rem; }
@media (min-width:768px) {
  .md\:text-4xl { font-size:2.25rem; }
  .md\:text-xl { font-size:1.25rem; }
}
@media (min-width:1024px) {
  .lg\:text-5xl { font-size:3rem; }
}

.font-bold { font-weight:700; }
.font-medium { font-weight:500; }
.font-bold-title { font-weight:900; letter-spacing:0.02em; }
.leading-tight { line-height:1.25; }
.leading-relaxed { line-height:1.625; }
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-gradient { background:linear-gradient(135deg,#FF7A22,#FF5722); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.list-disc { list-style-type:disc; }
.list-inside { list-style-position:inside; }

/* ========== Colors - Text ========== */
.text-deep { color:var(--deep); }
.text-white { color:var(--white); }
.text-orange { color:var(--orange); }
.text-gray-300 { color:var(--gray-300); }
.text-gray-400 { color:var(--gray-400); }
.text-gray-500 { color:var(--gray-500); }
.text-gray-600 { color:var(--gray-600); }
.text-gray-700 { color:var(--gray-700); }
.text-red-500 { color:var(--red-500); }
.text-red-600 { color:var(--red-600); }
.text-green-400 { color:var(--green-400); }
.text-green-500 { color:var(--green-500); }
.text-green-600 { color:var(--green-600); }
.text-green-700 { color:var(--green-700); }
.text-orange\/80 { color:rgba(255,122,34,0.8); }
.text-white\/60 { color:rgba(255,255,255,0.6); }
.text-white\/70 { color:rgba(255,255,255,0.7); }
.text-white\/80 { color:rgba(255,255,255,0.8); }

/* ========== Colors - Background ========== */
.bg-deep { background-color:var(--deep); }
.bg-white { background-color:var(--white); }
.bg-light { background-color:var(--light); }
.bg-blue-light { background-color:var(--blue-light); }
.bg-orange { background-color:var(--orange); }
.bg-gray-50 { background-color:var(--gray-50); }
.bg-gray-100 { background-color:var(--gray-100); }
.bg-gray-900 { background-color:var(--gray-900); }
.bg-red-50 { background-color:var(--red-50); }
.bg-green-50 { background-color:var(--green-50); }
.bg-green-500 { background-color:var(--green-500); }
.bg-green-700 { background-color:var(--green-700); }
.bg-blue-50 { background-color:var(--blue-50); }
.bg-purple-50 { background-color:var(--purple-50); }
.bg-orange\/5 { background-color:var(--orange-light); }
.bg-orange\/10 { background-color:var(--orange10); }
.bg-white\/10 { background-color:rgba(255,255,255,0.1); }
.bg-white\/15 { background-color:rgba(255,255,255,0.15); }
.bg-white\/95 { background-color:rgba(255,255,255,0.95); }
.bg-green-700\/5 { background-color:rgba(21,128,61,0.05); }

/* ========== Borders ========== */
.border { border:1px solid;}
.border-t { border-top:1px solid; }
.border-l-4 { border-left:4px solid; }
.border-white { border-color:var(--white); }
.border-orange { border-color:var(--orange); }
.border-gray-100 { border-color:var(--gray-100); }
.border-gray-200 { border-color:var(--gray-200); }
.border-gray-800 { border-color:var(--gray-800); }
.border-red-100 { border-color:var(--red-100); }
.border-green-100 { border-color:var(--green-100); }
.border-green-400 { border-color:var(--green-400); }
.border-white\/20 { border-color:rgba(255,255,255,0.2); }
.border-orange\/10 { border-color:rgba(255,122,34,0.1); }
.border-green-700\/10 { border-color:rgba(21,128,61,0.1); }
.rounded { border-radius:0.25rem; }
.rounded-lg { border-radius:0.5rem; }
.rounded-xl { border-radius:0.75rem; }
.rounded-2xl { border-radius:1rem; }
.rounded-full { border-radius:9999px; }
.overflow-hidden { overflow:hidden; }

/* ========== Effects ========== */
.shadow { box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1); }
.shadow-sm { box-shadow:0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-lg { box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1); }
.backdrop-blur { backdrop-filter:blur(8px); }

/* ========== Position ========== */
.relative { position:relative; }
.absolute { position:absolute; }
.fixed { position:fixed; }
.sticky { position:sticky; }
.top-0 { top:0; }
.top-20 { top:5rem; }
.bottom-0 { bottom:0; }
.bottom-6 { bottom:1.5rem; }
.left-0 { left:0; }
.left-4 { left:1rem; }
.right-0 { right:0; }
.right-4 { right:1rem; }
.right-6 { right:1.5rem; }
.top-1\/2 { top:50%; }
.z-10 { z-index:10; }
.z-40 { z-index:40; }
.z-50 { z-index:50; }
.-translate-y-1\/2 { transform:translateY(-50%); }

/* ========== Transitions ========== */
.transition { transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter; transition-timing-function:cubic-bezier(0.4,0,0.2,1); transition-duration:150ms; }
.transition-colors { transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; transition-timing-function:cubic-bezier(0.4,0,0.2,1); transition-duration:150ms; }
.transition-transform { transition-property:transform; transition-timing-function:cubic-bezier(0.4,0,0.2,1); transition-duration:150ms; }
.object-cover { object-fit:cover; }

/* ========== Hover ========== */
.hover\:text-orange:hover { color:var(--orange); }
.hover\:text-gray-700:hover { color:var(--gray-700); }
.hover\:bg-white:hover { background-color:var(--white); }
.hover\:bg-gray-50:hover { background-color:var(--gray-50); }
.hover\:bg-green-400:hover { background-color:var(--green-400); }
.hover\:bg-green-600:hover { background-color:var(--green-600); }
.hover\:bg-orange\/90:hover { background-color:rgba(255,122,34,0.9); }
.hover\:text-deep:hover { color:var(--deep); }

/* ========== Section Styles ========== */
.section-title { font-size:36px; font-weight:900; color:var(--deep); text-align:center; margin-bottom:16px; }
.section-subtitle { font-size:18px; color:#666; text-align:center; margin-bottom:48px; max-width:700px; margin-left:auto; margin-right:auto; }
.highlight { color:var(--orange); font-weight:700; }

/* ========== Button Styles ========== */
.btn-primary { display:inline-block; background:var(--orange); color:#fff; padding:14px 36px; border-radius:8px; font-weight:700; font-size:16px; transition:all .3s; cursor:pointer; border:none; text-decoration:none; }
.btn-primary:hover { background:#e86a1a; transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,122,34,.35); }
.btn-outline { display:inline-block; border:2px solid #0F2447; color:#0F2447; padding:12px 32px; border-radius:8px; font-weight:700; font-size:16px; transition:all .3s; cursor:pointer; text-decoration:none; background:transparent; }
.btn-outline:hover { background:#0F2447; color:#fff; transform:translateY(-2px); }

/* ========== Card Hover ========== */
.card-hover { transition:all .35s; }
.card-hover:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(15,36,71,.12); }

/* ========== Hero ========== */
.hero-bg { background:linear-gradient(135deg,#0F2447 0%,#1a3a6b 40%,#0F2447 70%,#0d1f3d 100%); position:relative; overflow:hidden; }
.hero-bg::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px); }
.code-dots { position:absolute; color:rgba(255,255,255,.06); font-family:monospace; font-size:14px; line-height:2; pointer-events:none; }

/* ========== Sidebar TOC ========== */
.toc-link { display:block; padding:10px 16px; border-left:3px solid transparent; color:#555; font-size:14px; transition:all .25s; cursor:pointer; text-decoration:none; }
.toc-link:hover, .toc-link.active { border-left-color:var(--orange); color:var(--orange); background:#FFF5EF; }

/* ========== FAQ ========== */
.faq-answer { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-item.open .faq-answer { max-height:300px; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ========== Carousel ========== */
.carousel-track { display:flex; transition:transform .5s ease; }
.carousel-dot { width:10px; height:10px; border-radius:50%; background:#ccc; cursor:pointer; transition:all .3s; }
.carousel-dot.active { background:var(--orange); width:28px; border-radius:5px; }

/* ========== Modal ========== */
.modal { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,.5); z-index:9999; align-items:center; justify-content:center; }
.modal.show { display:flex; }

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#F5F7FA; }
::-webkit-scrollbar-thumb { background:#c1c1c1; border-radius:3px; }

/* ========== Responsive ========== */
.mobile-menu { display:none; }
.desktop-nav { display:flex; }
@media (max-width:768px) {
  .section-title { font-size:26px; }
  .section-subtitle { font-size:15px; margin-bottom:32px; }
  .desktop-nav { display:none; }
  .mobile-menu { display:block; }
  #mobileNav { display:none; }
  #mobileNav.open { display:block; }
  .hero-content { flex-direction:column; text-align:center; }
  .sm\:block { display:block; }
  .md\:hidden { display:none; }
}

@media (min-width:640px) {
  .sm\:block { display:block; }
}

@media (min-width:768px) {
  .md\:block { display:block; }
  .md\:hidden { display:none; }
  .md\:flex-row { flex-direction:row; }
  .md\:flex-row-reverse { flex-direction:row-reverse; }
  .md\:w-1\/2 { width:50%; }
  .md\:w-1\/3 { width:33.333333%; }
  .md\:p-8 { padding:2rem; }
  .md\:p-12 { padding:3rem; }
  .md\:px-8 { padding-left:2rem; padding-right:2rem; }
  .md\:text-4xl { font-size:2.25rem; }
  .md\:text-xl { font-size:1.25rem; }
  .md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (min-width:1024px) {
  .lg\:block { display:block; }
  .lg\:flex-row { flex-direction:row; }
  .lg\:w-64 { width:16rem; }
  .lg\:text-5xl { font-size:3rem; }
  .lg\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}