:root {
  --bg: #f5f7fa;
  --ink: #111827;
  --muted: #667085;
  --line: #dfe5ec;
  --dark: #09111f;
  --dark-2: #101a2c;
  --brand: #1e6ff2;
  --brand-2: #4f8dff;
  --white: #ffffff;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 82px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  transition: .25s ease;
}
.site-header.scrolled {
  height: 70px;
  background: rgba(9,17,31,.91);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: #fff; }
.brand-mark {
  position: relative;
  width: 42px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 58% 42% 42% 58%;
  transform: rotate(-2deg);
}
.fish-eye { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; left: 9px; top: 8px; }
.fish-tail {
  position: absolute;
  right: -13px;
  top: 5px;
  width: 15px;
  height: 17px;
  border: 2px solid #fff;
  border-left: 0;
  clip-path: polygon(0 50%,100% 0,100% 100%);
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-text strong { font-size: 18px; letter-spacing: .06em; }
.brand-text small { font-size: 8px; letter-spacing: .16em; opacity: .62; }
.site-nav { display: flex; align-items: center; gap: 38px; color: rgba(255,255,255,.76); font-size: 14px; }
.site-nav a { position: relative; padding: 28px 0; transition: .2s; }
.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:20px; height:2px; background:#fff; transition:.25s; }
.site-nav a:hover { color:#fff; }
.site-nav a:hover::after { right:0; }
.nav-toggle { display:none; width:42px; height:42px; border:0; background:transparent; padding:9px; }
.nav-toggle span { display:block; height:2px; margin:6px 0; background:#fff; transition:.2s; }

.hero {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 40%, rgba(40,100,210,.22), transparent 34%),
    linear-gradient(135deg, #08101d 0%, #0b1526 58%, #111f35 100%);
}
.hero-grid { position:absolute; inset:0; opacity:.11; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
.hero-glow { position:absolute; border-radius:50%; filter:blur(10px); }
.hero-glow-one { width:500px; height:500px; right:-200px; top:160px; background:rgba(34,114,255,.13); }
.hero-glow-two { width:300px; height:300px; left:-180px; bottom:0; background:rgba(32,197,160,.07); }
.hero-inner { position:relative; z-index:2; min-height:820px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:80px; padding-top:90px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color:#6f7f94; font-size:12px; font-weight:700; letter-spacing:.18em; }
.eyebrow.light { color:rgba(255,255,255,.54); }
.eyebrow i { width:28px; height:2px; background:var(--brand); }
.hero-copy h1 { margin:28px 0 24px; font-size:clamp(48px,5.3vw,76px); line-height:1.12; letter-spacing:-.045em; font-weight:700; }
.hero-copy h1 em { font-style:normal; color:#73a8ff; }
.hero-copy > p { max-width:650px; margin:0; color:rgba(255,255,255,.66); font-size:17px; line-height:1.95; }
.hero-actions { display:flex; gap:14px; margin-top:38px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-width:148px; height:50px; padding:0 25px; border:1px solid rgba(255,255,255,.18); font-size:14px; font-weight:600; transition:.25s; }
.btn-primary { background:#fff; color:#0b1423; border-color:#fff; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.btn-secondary:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.38); }
.hero-meta { display:flex; gap:34px; margin-top:54px; color:rgba(255,255,255,.39); font-size:12px; letter-spacing:.16em; }
.hero-meta span { position:relative; }
.hero-meta span:not(:last-child)::after { content:""; position:absolute; right:-18px; top:4px; width:1px; height:10px; background:rgba(255,255,255,.18); }

.hero-visual { position:relative; display:flex; justify-content:center; }
.visual-shell { width:100%; max-width:490px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.045); box-shadow:0 35px 100px rgba(0,0,0,.34); backdrop-filter:blur(8px); transform:perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.visual-topbar { height:48px; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.09); }
.visual-topbar span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); }
.visual-topbar b { margin-left:auto; color:rgba(255,255,255,.35); font-size:10px; letter-spacing:.12em; font-weight:500; }
.visual-content { padding:34px; }
.visual-line { height:12px; background:rgba(255,255,255,.12); margin-bottom:12px; }
.line-lg { width:60%; }
.line-md { width:38%; opacity:.55; }
.visual-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px; }
.mini-card { min-height:128px; padding:18px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); }
.mini-card.active { background:linear-gradient(145deg,rgba(50,120,255,.4),rgba(28,77,160,.18)); border-color:rgba(96,150,255,.38); }
.mini-card span { display:block; color:rgba(255,255,255,.32); font-size:10px; }
.mini-card strong { display:block; margin-top:24px; font-size:15px; }
.mini-card small { display:block; margin-top:8px; color:rgba(255,255,255,.45); }
.visual-chart { height:130px; margin-top:18px; padding:18px 16px 0; border:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; gap:10px; }
.visual-chart i { flex:1; min-height:15%; background:linear-gradient(to top,rgba(43,115,245,.35),rgba(106,159,255,.9)); }
.floating-tag { position:absolute; padding:9px 14px; border:1px solid rgba(255,255,255,.15); background:rgba(10,18,31,.82); box-shadow:0 12px 40px rgba(0,0,0,.24); font-size:11px; letter-spacing:.1em; }
.tag-one { left:-22px; top:84px; }
.tag-two { right:-18px; top:190px; }
.tag-three { left:28px; bottom:-18px; }
.hero-bottom-line { position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,var(--brand) 0 24%,transparent 24%); }

.section { padding:120px 0; }
.intro { background:#fff; }
.intro-grid { display:grid; grid-template-columns:280px 1fr; gap:70px; }
.section-label { color:#9aa4b2; font-size:11px; font-weight:700; letter-spacing:.18em; padding-top:10px; }
.section-label span { display:block; color:#1f2937; margin-top:9px; letter-spacing:.08em; }
.intro-content { max-width:760px; }
.intro-content h2, .section-heading h2, .values-content h2, .contact-card h2 { margin:0; font-size:clamp(36px,4.2vw,58px); line-height:1.25; letter-spacing:-.045em; }
.intro-content p { margin:30px 0 0; color:var(--muted); font-size:16px; line-height:2; }

.services { color:#fff; background:var(--dark); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:54px; }
.section-heading h2 { margin-top:18px; }
.section-heading > p { max-width:430px; margin:0; color:rgba(255,255,255,.48); line-height:1.8; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.1); }
.service-card { position:relative; min-height:390px; padding:42px 36px; border-right:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.015); transition:.3s; }
.service-card:hover { background:#fff; color:var(--ink); transform:translateY(-5px); }
.service-no { position:absolute; right:28px; top:24px; color:rgba(255,255,255,.24); font-size:11px; }
.service-card:hover .service-no { color:#9aa4b2; }
.service-icon { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); font-size:18px; }
.service-card:hover .service-icon { border-color:#cfd7e2; color:var(--brand); }
.service-card h3 { margin:70px 0 16px; font-size:23px; }
.service-card p { margin:0; min-height:88px; color:rgba(255,255,255,.48); line-height:1.85; }
.service-card:hover p { color:var(--muted); }
.service-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.service-tags span { padding:7px 10px; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.46); font-size:11px; }
.service-card:hover .service-tags span { border-color:#dfe5ec; color:#6b7280; }

.values { background:#f3f6fa; }
.values-grid { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:110px; }
.values-visual { position:relative; min-height:480px; display:grid; place-items:center; }
.ring { position:absolute; border:1px solid #cfd8e4; border-radius:50%; }
.ring-one { width:390px; height:390px; }
.ring-two { width:280px; height:280px; border-style:dashed; animation:spin 30s linear infinite; }
.ring-three { width:170px; height:170px; border-color:#aabbd1; }
.core { position:relative; z-index:2; width:120px; height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:var(--dark); color:#fff; font-size:25px; font-weight:700; box-shadow:0 22px 50px rgba(10,22,40,.2); }
.core span { margin-top:5px; font-size:8px; letter-spacing:.25em; color:#7ea9ef; }
@keyframes spin { to { transform:rotate(360deg); } }
.values-content h2 { margin-top:20px; }
.value-list { margin-top:45px; border-top:1px solid var(--line); }
.value-item { display:grid; grid-template-columns:58px 1fr; gap:15px; padding:24px 0; border-bottom:1px solid var(--line); }
.value-item b { color:var(--brand); font-size:11px; padding-top:4px; }
.value-item h3 { margin:0 0 8px; font-size:17px; }
.value-item p { margin:0; color:var(--muted); line-height:1.7; }

.contact { padding-top:30px; background:#f3f6fa; }
.contact-card { display:grid; grid-template-columns:1.15fr .85fr; gap:90px; padding:70px; color:#fff; background:linear-gradient(120deg,#0a1322,#12243e); box-shadow:0 30px 80px rgba(15,30,52,.15); }
.contact-card h2 { margin-top:18px; font-size:clamp(35px,4vw,52px); }
.contact-info { align-self:end; }
.contact-info p { color:rgba(255,255,255,.56); line-height:1.8; }
.contact-info a { display:inline-block; margin-top:20px; font-size:20px; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:5px; }
.contact-info small { display:block; margin-top:13px; color:rgba(255,255,255,.3); }

.site-footer { color:#9eabba; background:#07101d; }
.footer-main { display:flex; justify-content:space-between; gap:40px; padding:60px 0 38px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand strong { color:#fff; font-size:18px; }
.footer-brand p { margin:12px 0 0; font-size:13px; }
.footer-links { display:flex; gap:28px; align-items:flex-start; font-size:13px; }
.footer-links a:hover, .icp:hover { color:#fff; }
.footer-bottom { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:12px; }
.icp { transition:.2s; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns:1fr; gap:55px; padding-top:150px; padding-bottom:100px; }
  .hero { min-height:auto; }
  .hero-visual { max-width:620px; margin:0 auto; }
  .intro-grid, .values-grid, .contact-card { grid-template-columns:1fr; gap:50px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:330px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .values-content { order:-1; }
  .contact-card { padding:55px; }
}

@media (max-width: 720px) {
  .container { width:min(calc(100% - 32px),var(--container)); }
  .site-header, .site-header.scrolled { height:68px; }
  .brand-text strong { font-size:15px; }
  .brand-text small { display:none; }
  .brand-mark { width:36px; height:26px; }
  .nav-toggle { display:block; }
  .site-nav { position:absolute; left:16px; right:16px; top:68px; display:none; padding:12px; flex-direction:column; gap:0; align-items:stretch; background:rgba(9,17,31,.98); border:1px solid rgba(255,255,255,.1); }
  .site-nav.open { display:flex; }
  .site-nav a { padding:15px; }
  .site-nav a::after { display:none; }
  .hero-inner { padding-top:125px; }
  .hero-copy h1 { font-size:44px; }
  .hero-copy > p { font-size:15px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .btn { width:100%; }
  .hero-meta { gap:18px; font-size:10px; }
  .hero-meta span:not(:last-child)::after { display:none; }
  .visual-content { padding:20px; }
  .floating-tag { display:none; }
  .section { padding:85px 0; }
  .intro-grid { gap:35px; }
  .intro-content h2, .section-heading h2, .values-content h2, .contact-card h2 { font-size:36px; }
  .values-visual { min-height:350px; overflow:hidden; }
  .ring-one { width:310px; height:310px; }
  .ring-two { width:220px; height:220px; }
  .ring-three { width:140px; height:140px; }
  .contact-card { padding:38px 26px; }
  .footer-main, .footer-bottom { flex-direction:column; align-items:flex-start; }
  .footer-main { padding-top:45px; }
  .footer-bottom { justify-content:center; padding:22px 0; }
  .footer-links { flex-wrap:wrap; }
}