/* ===== Reset & Variables ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

:root {
  --navy-900:#0a132e;
  --navy-800:#0f1f4a;
  --navy-700:#1a3380;
  --teal-500:#06b6d4;
  --teal-400:#22d3ee;
  --amber-400:#fbbf24;
  --amber-500:#f59e0b;
  --white:#ffffff;
  --gray-50:#f8fafc;
  --gray-100:#f1f5f9;
  --gray-200:#e2e8f0;
  --gray-300:#cbd5e1;
  --gray-400:#94a3b8;
  --gray-500:#64748b;
  --gray-600:#475569;

  --font-display:'Noto Serif SC','PingFang SC',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
  --font-logo:'Noto Serif SC','KaiTi',cursive;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;

  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}

body {
  font-family:var(--font-body);
  background:var(--gray-50);
  color:var(--navy-900);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== SVG icon helper ===== */
.icon-svg { display:inline-flex; align-items:center; justify-content:center; }
.icon-svg svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ===== HEADER ===== */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gray-200);
  transition:var(--transition);
}
.header-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:68px;
}
.logo {
  font-size:20px; font-weight:700; color:var(--navy-800);
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.logo-icon {
  width:36px; height:36px;
  background:linear-gradient(135deg,var(--navy-700),var(--teal-500));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; font-weight:700;
}
.logo span { color:var(--gray-400); font-weight:400; font-size:14px; }
nav { display:flex; gap:36px; }
nav a {
  color:var(--gray-600); text-decoration:none; font-size:14px;
  font-weight:500; position:relative; transition:color .2s;
  padding:4px 0;
}
nav a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:2px; background:var(--teal-500); border-radius:1px;
  transform:scaleX(0); transition:transform .2s;
}
nav a:hover { color:var(--navy-800); }
nav a:hover::after { transform:scaleX(1); }
.mobile-toggle {
  display:none; background:none; border:none; cursor:pointer;
  color:var(--gray-600); padding:4px;
}
.mobile-toggle svg { width:24px; height:24px; }

/* ===== HERO ===== */
.hero {
  padding:140px 24px 100px;
  position:relative; overflow:hidden; color:var(--white);
  background:
    linear-gradient(135deg,rgba(10,19,46,.92) 0%,rgba(15,31,74,.75) 50%,rgba(26,51,128,.6) 100%),
    url('https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1920')
    center/cover no-repeat fixed;
}
.hero::before {
  content:''; position:absolute; top:-40%; right:-10%; width:60%; height:180%;
  background:radial-gradient(ellipse,rgba(6,182,212,.1) 0%,transparent 70%);
  pointer-events:none;
}
.hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:100px;
  background:linear-gradient(to top,var(--gray-50),transparent);
}
.hero-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 18px; border-radius:20px;
  background:rgba(255,255,255,.1); font-size:13px; font-weight:500; margin-bottom:20px;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.hero-badge svg { width:16px; height:16px; color:var(--amber-400); }
.hero h1 {
  font-family:var(--font-display);
  font-size:clamp(38px,5vw,60px); font-weight:700;
  line-height:1.12; margin-bottom:18px;
}
.hero h1 em { font-style:normal; background:linear-gradient(135deg,var(--amber-400),var(--teal-400)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* Fallback for browsers that don't support bg-clip:text */
@supports not (background-clip:text) {
  .hero h1 em { color:var(--amber-400); -webkit-text-fill-color:var(--amber-400); }
}
.hero p {
  font-size:17px; color:rgba(255,255,255,.75);
  max-width:580px; margin-bottom:34px; line-height:1.75;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:var(--radius-sm); font-size:15px;
  font-weight:600; text-decoration:none; transition:var(--transition);
  border:none; cursor:pointer; font-family:var(--font-body);
}
.btn svg { width:18px; height:18px; }
.btn-primary {
  background:var(--white); color:var(--navy-800);
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.btn-outline {
  background:transparent; color:var(--white);
  border:1.5px solid rgba(255,255,255,.25);
}
.btn-outline:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }

/* ===== SECTION ===== */
section { padding:80px 24px; }
.section-inner { max-width:1200px; margin:0 auto; }
.section-label {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--teal-500); margin-bottom:8px;
}
.section-label svg { width:14px; height:14px; }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(26px,3.5vw,38px); font-weight:700;
  color:var(--navy-800); margin-bottom:10px;
}
.section-desc {
  font-size:16px; color:var(--gray-500);
  max-width:560px; margin-bottom:44px; line-height:1.7;
}

/* ===== SERVICES ===== */
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:24px;
}
.service-card {
  background:var(--white); border-radius:var(--radius-md); padding:32px;
  box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
  transition:var(--transition);
}
.service-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300); }
.service-icon {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.service-icon svg { width:24px; height:24px; }
.service-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
.service-card p { font-size:14px; color:var(--gray-500); line-height:1.7; margin-bottom:14px; }
.service-tags { display:flex; flex-wrap:wrap; gap:6px; }
.service-tags span {
  font-size:12px; padding:3px 10px; border-radius:6px;
  background:var(--gray-100); color:var(--gray-500);
}

/* Link wrapper around service card */
.service-card-link {
  text-decoration:none; color:inherit; display:block;
}
.service-card-link:hover .service-card {
  box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300);
}

/* ===== PRODUCTS ===== */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}
.product-card {
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
  transition:var(--transition); display:flex; flex-direction:column;
}
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.product-img {
  height:130px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);
}
.product-img svg { width:44px; height:44px; }
.product-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.product-body h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
.product-body p { font-size:14px; color:var(--gray-500); line-height:1.7; margin-bottom:12px; flex:1; }
.product-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.product-tags span {
  font-size:12px; padding:3px 10px; border-radius:6px;
  background:var(--gray-100); color:var(--gray-500);
}
.product-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:6px; font-size:14px; font-weight:600;
  background:var(--navy-800); color:var(--white); text-decoration:none; 
  transition:var(--transition); border:none; cursor:pointer;
  font-family:var(--font-body);
}
.product-btn svg { width:16px; height:16px; }
.product-btn:hover { background:var(--navy-700); }

/* ===== WHY US ===== */
.why-section { background:var(--white); }
.why-section .section-inner { text-align:center; }
.why-section .section-desc { margin:0 auto 44px; }
.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.why-card {
  text-align:center; padding:44px 28px;
  background:var(--gray-50); border-radius:var(--radius-md);
  border:1px solid var(--gray-200); transition:var(--transition);
}
.why-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300); }
.why-icon {
  width:48px; height:48px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.why-icon svg { width:24px; height:24px; }
.why-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
.why-card p { font-size:14px; color:var(--gray-500); line-height:1.8; }

/* ===== PERSPECTIVE (博海视角) ===== */
.perspective-section {
  background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
  border-top: 1px solid var(--gray-200);
}
.perspective-section .section-desc { margin:0 auto 44px; text-align:left; }
.perspective-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
.perspective-card {
  background:var(--white); border-radius:var(--radius-md);
  padding:24px; border:1px solid var(--gray-200);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  display:flex; flex-direction:column;
}
.perspective-card:hover {
  box-shadow:var(--shadow-md); transform:translateY(-4px);
  border-color:var(--amber-400);
}
.perspective-card .cat {
  font-size:11px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--teal-500); margin-bottom:6px;
}
.perspective-card h3 {
  font-size:16px; font-weight:600; color:var(--navy-800);
  margin-bottom:8px; line-height:1.4;
}
.perspective-card .meta {
  font-size:12px; color:var(--gray-400); margin-top:auto;
}
.perspective-link {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--navy-700);
  text-decoration:none; margin-top:12px;
  transition:color .2s;
}
.perspective-link:hover { color:var(--teal-500); }
.perspective-link svg { width:14px; height:14px; }
.perspective-actions {
  margin-top:36px; text-align:center;
}
.perspective-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:600; text-decoration:none;
  background:var(--navy-800); color:var(--white);
  transition:var(--transition); border:none; cursor:pointer;
  font-family:var(--font-body);
}
.perspective-btn svg { width:16px; height:16px; }
.perspective-btn:hover {
  background:var(--navy-700); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(15,31,74,.2);
}

/* ===== CONTACT ===== */
.contact-section {
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 100%);
  color:var(--white);
  position:relative; overflow:hidden;
}
.contact-section::before {
  content:''; position:absolute; top:-30%; right:-15%; width:50%; height:150%;
  background:radial-gradient(ellipse,rgba(6,182,212,.06) 0%,transparent 70%);
  pointer-events:none;
}
.contact-section .section-title { color:var(--white); }
.contact-section .section-desc { color:rgba(255,255,255,.55); }
.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
  position:relative; z-index:1;
}
.contact-item {
  padding:24px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  transition:var(--transition);
}
.contact-item:hover { background:rgba(255,255,255,.08); transform:translateY(-2px); }
.contact-item .icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  background:rgba(6,182,212,.12);
  color:var(--teal-400);
}
.contact-item .icon svg { width:20px; height:20px; }
.contact-item h4 {
  font-size:13px; font-weight:500; color:rgba(255,255,255,.45);
  margin-bottom:6px; letter-spacing:1px; text-transform:uppercase;
}
.contact-item .value {
  font-size:16px; color:var(--white); font-weight:500;
}
.contact-item .value a { color:var(--amber-400); text-decoration:none; }
.contact-item .value a:hover { text-decoration:underline; }
.contact-item .value .divider { color:rgba(255,255,255,.2); margin:0 10px; font-size:14px; }
.contact-item .sub { font-size:13px; color:rgba(255,255,255,.3); margin-top:4px; }

/* ===== FOOTER ===== */
footer {
  background:#060d1f; color:rgba(255,255,255,.35);
  padding:32px 24px; text-align:center; font-size:13px;
}
footer a { color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--teal-400); }
footer .sep { margin:0 10px; color:rgba(255,255,255,.1); }

/* ===== CONSULT MODAL ===== */
.consult-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.5); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
  padding:24px;
}
.consult-overlay.open { opacity:1; visibility:visible; }
.consult-modal {
  background:#fff; border-radius:16px; padding:32px;
  max-width:440px; width:100%;
  box-shadow:0 24px 48px rgba(0,0,0,.2);
  position:relative; transform:scale(.95);
  transition:transform .3s;
}
.consult-overlay.open .consult-modal { transform:scale(1); }
.consult-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none;
  font-size:28px; color:var(--gray-400);
  cursor:pointer; line-height:1;
}
.consult-close:hover { color:var(--gray-600); }
.consult-modal h3 {
  font-family:"Noto Serif SC",serif;
  font-size:22px; font-weight:700; color:var(--navy-900);
  margin-bottom:6px;
}
.consult-desc { font-size:14px; color:var(--gray-500); margin-bottom:24px; }
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:13px; font-weight:600;
  color:var(--navy-800); margin-bottom:6px;
}
.form-group input,.form-group textarea {
  width:100%; padding:10px 14px;
  border:1px solid var(--gray-300); border-radius:8px;
  font-size:14px; font-family:inherit;
  transition:border-color .2s;
  background:#fff;
}
.form-group input:focus,.form-group textarea:focus {
  outline:none; border-color:var(--teal-500);
  box-shadow:0 0 0 3px rgba(6,182,212,.12);
}
.consult-submit {
  width:100%; padding:12px; border:none; border-radius:8px;
  background:linear-gradient(135deg,var(--teal-500),#0891b2);
  color:#fff; font-size:15px; font-weight:600;
  cursor:pointer; transition:opacity .2s;
}
.consult-submit:hover { opacity:.9; }
.consult-submit:disabled { opacity:.5; cursor:not-allowed; }
.consult-tip { text-align:center; font-size:13px; color:var(--gray-400); margin-top:12px; }
.consult-tip strong { color:var(--teal-600); }
.consult-success { text-align:center; padding:20px 0; }
.consult-success .success-icon {
  width:56px; height:56px; border-radius:50%;
  background:#10b981; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin:0 auto 16px;
}
.consult-success h4 { font-size:18px; color:var(--navy-900); margin-bottom:6px; }
.consult-success p { font-size:14px; color:var(--gray-500); }

/* ===== FLOAT CONSULT ===== */
.float-btn {
  position:fixed; bottom:28px; right:28px; z-index:99;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  background:linear-gradient(135deg,var(--teal-500),#0891b2);
  color:var(--white);
  box-shadow:0 6px 20px rgba(6,182,212,.35);
  transition:var(--transition);
  border:none; cursor:pointer;
}
.float-btn svg { width:26px; height:26px; }
.float-btn:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 28px rgba(6,182,212,.45); }

/* ===== ANIMATIONS ===== */
.fade-in { opacity:0; transform:translateY(30px); transition:all .7s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in-d1 { transition-delay:.08s; }
.fade-in-d2 { transition-delay:.16s; }
.fade-in-d3 { transition-delay:.24s; }
.fade-in-d4 { transition-delay:.32s; }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
  nav { display:none; }
  nav.open {
    display:flex; flex-direction:column; position:absolute; top:68px;
    left:0; right:0; background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    padding:16px 24px; border-bottom:1px solid var(--gray-200);
    gap:16px;
  }
  .mobile-toggle { display:flex; }
  .hero { padding:120px 24px 70px; background-attachment:scroll; }
  .hero-actions { flex-direction:column; }
  .btn { width:100%; justify-content:center; }
  .services-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .perspective-grid { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .hero h1 { font-size:clamp(28px,8vw,36px); }
  .logo { font-size:17px; }
  .logo span { display:none; }
}