:root { --ink:#07111f; --navy:#0a1728; --blue:#77b9ef; --paper:#eef3f5; --white:#f7fafb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--white); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; }

.site-header { position:absolute; z-index:10; inset:0 0 auto; height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,4vw,64px); border-bottom:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg,rgba(5,12,22,.78),rgba(5,12,22,.1)); }
.brand { display:flex; align-items:center; gap:13px; font-size:12px; font-weight:700; letter-spacing:.17em; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.58); font-family:Georgia,"Times New Roman",serif; font-size:17px; font-weight:400; }
nav { display:flex; align-items:center; gap:clamp(20px,3vw,42px); }
nav a { font-size:12px; color:#d8e2e9; transition:color .2s ease; }
nav a:hover { color:white; }
.nav-contact { padding:10px 17px; border:1px solid rgba(255,255,255,.38); }
.language-switcher { display:flex; align-items:center; white-space:nowrap; font-size:11px; letter-spacing:.04em; color:#99aebb; }
.language-switcher span { display:flex; align-items:center; }
.language-switcher i { margin:0 8px; color:#526878; font-style:normal; }
.language-switcher a { transition:color .2s ease; }
.language-switcher a:hover,.language-switcher a.active { color:#fff; }

.hero { position:relative; min-height:790px; display:flex; align-items:center; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 72% 44%,rgba(44,112,158,.28),transparent 34%),linear-gradient(105deg,#050c16,#071320 45%,#0c1f33); }
.hero-image { position:absolute; z-index:-3; inset:0; background:url("/annbridge-hero.png") center/cover; opacity:.68; }
.hero::before { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(4,10,19,.96),rgba(5,12,22,.81) 36%,rgba(5,13,24,.24) 72%,rgba(3,9,17,.55)),linear-gradient(180deg,rgba(4,10,18,.1),rgba(4,10,18,.25) 67%,#07111f); }
.hero-grid { position:absolute; z-index:-1; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:90px 90px; mask-image:linear-gradient(90deg,black,transparent 67%); }
.hero-content { width:min(760px,86vw); margin-left:clamp(28px,10vw,148px); padding-top:84px; }
.eyebrow { margin:0 0 26px; color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.21em; }
h1 { max-width:720px; margin-bottom:29px; font-size:clamp(48px,6vw,83px); line-height:1.04; letter-spacing:-.035em; }
.hero-copy { max-width:590px; margin-bottom:38px; color:#c3d0da; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:30px; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 22px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:#dbeaf2; color:var(--ink); }
.text-link { color:#d8e6ee; font-size:13px; }
.text-link span { color:var(--blue); margin-left:5px; }
.hero-index { position:absolute; bottom:32px; right:clamp(30px,5vw,76px); display:flex; gap:24px; color:rgba(220,234,242,.6); font-family:monospace; font-size:9px; letter-spacing:.12em; }

.section { padding:112px clamp(28px,7vw,108px); }
.research-section { background:var(--paper); color:var(--ink); }
.section-heading { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:end; margin-bottom:66px; }
.section-heading h2,.about-section h2 { max-width:650px; margin-bottom:0; font-size:clamp(40px,4.6vw,65px); line-height:1.08; letter-spacing:-.035em; }
.section-heading>p { max-width:470px; margin:0 0 7px auto; color:#52677a; font-size:16px; line-height:1.7; }
.discipline-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #c6d2d9; }
.discipline-card { position:relative; min-height:338px; padding:34px 34px 42px 0; border-right:1px solid #c6d2d9; }
.discipline-card:not(:first-child) { padding-left:34px; }
.discipline-card:last-child { border-right:0; }
.card-number { color:#3675a7; font-size:11px; font-weight:700; letter-spacing:.14em; }
.discipline-card h3 { min-height:66px; margin:54px 0 22px; font-size:28px; line-height:1.15; }
.discipline-card p { max-width:330px; color:#52677a; font-size:15px; line-height:1.7; }
.card-rule { position:absolute; left:0; right:34px; bottom:0; height:2px; transform:scaleX(.15); transform-origin:left; background:#3b7eae; transition:transform .3s ease; }
.discipline-card:not(:first-child) .card-rule { left:34px; }
.discipline-card:hover .card-rule { transform:scaleX(1); }

.method-section { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,125px); align-items:center; min-height:610px; padding:105px clamp(28px,7vw,108px); background:#0b1829; }
.method-copy h2 { margin-bottom:26px; font-size:clamp(40px,4.6vw,65px); line-height:1.1; }
main[lang="en"] .method-copy h2 { font-size:clamp(36px,3.85vw,59px); }
.method-copy h2 span,.about-section h2 span { white-space:nowrap; }
.method-copy>p:last-child { max-width:560px; color:#aebdca; font-size:16px; line-height:1.72; }
.signal-panel { position:relative; min-height:350px; display:flex; flex-direction:column; padding:27px 30px 23px; overflow:hidden; border:1px solid rgba(113,181,228,.42); background:linear-gradient(145deg,rgba(28,63,94,.29),rgba(10,27,46,.5)); box-shadow:inset 0 0 50px rgba(82,165,220,.035); }
.signal-header,.signal-footer { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; }
.signal-header p { margin:0; color:#9bc4df; font-size:9px; font-weight:700; letter-spacing:.18em; }
.signal-header>span { display:flex; align-items:center; gap:8px; color:#6f9fbd; font-family:monospace; font-size:8px; letter-spacing:.12em; }
.signal-header i { width:5px; height:5px; border-radius:50%; background:#80cff6; box-shadow:0 0 0 0 rgba(128,207,246,.5); animation:status-pulse 2s ease-out infinite; }
.waveform { position:relative; flex:1; min-height:230px; margin:13px -8px 10px; overflow:hidden; border-top:1px solid rgba(132,190,225,.12); border-bottom:1px solid rgba(132,190,225,.12); }
.wave-grid { position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(126,184,220,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(126,184,220,.12) 1px,transparent 1px); background-size:36px 36px; }
.waveform svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wave-trace { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.wave-trace-muted { stroke:rgba(92,150,188,.38); stroke-width:1; }
.wave-trace-main { stroke:#83c8ee; stroke-width:1.6; filter:drop-shadow(0 0 5px rgba(93,194,244,.4)); stroke-dasharray:1; stroke-dashoffset:1; animation:trace-draw 4.8s linear infinite; }
.scan-line { position:absolute; top:0; bottom:0; left:-16%; width:16%; border-right:1px solid rgba(141,218,255,.75); background:linear-gradient(90deg,transparent,rgba(95,189,238,.12)); box-shadow:10px 0 24px rgba(79,182,235,.08); animation:signal-scan 4.8s linear infinite; }
.signal-point { fill:#c3eaff; filter:drop-shadow(0 0 5px #75c7ef); opacity:0; animation:point-reveal 4.8s linear infinite; }
.signal-ring { fill:none; stroke:#7dcaf2; stroke-width:1; opacity:0; transform-box:fill-box; transform-origin:center; animation:ring-ping 4.8s linear infinite; }
.point-one,.ring-one { animation-delay:0s; }
.point-two,.ring-two { animation-delay:1.48s; }
.wave-label { position:absolute; padding:4px 6px; border:1px solid rgba(123,194,232,.34); background:rgba(7,21,37,.84); color:#8fbad3; font-family:monospace; font-size:7px; letter-spacing:.1em; opacity:0; animation:label-reveal 4.8s linear infinite; }
.label-one { left:33%; top:37%; }
.label-two { left:64%; top:53%; animation-delay:1.48s; }
.signal-footer { justify-content:flex-start; gap:13px; color:#7ea6bf; font-family:monospace; font-size:8px; letter-spacing:.1em; }
.signal-footer b { color:#4f7188; font-weight:400; }
@keyframes trace-draw { 0%{stroke-dashoffset:1;opacity:.35} 72%,100%{stroke-dashoffset:0;opacity:1} }
@keyframes signal-scan { 0%{transform:translateX(0)} 100%{transform:translateX(725%)} }
@keyframes status-pulse { 0%{box-shadow:0 0 0 0 rgba(128,207,246,.45)} 70%,100%{box-shadow:0 0 0 8px rgba(128,207,246,0)} }
@keyframes point-reveal { 0%,31%{opacity:0} 34%,72%{opacity:1} 78%,100%{opacity:0} }
@keyframes ring-ping { 0%,31%{opacity:0;transform:scale(.5)} 34%{opacity:.85;transform:scale(.5)} 48%{opacity:0;transform:scale(1.8)} 100%{opacity:0} }
@keyframes label-reveal { 0%,32%{opacity:0;transform:translateY(3px)} 36%,67%{opacity:1;transform:translateY(0)} 75%,100%{opacity:0} }

.principles-section { background:#f5f7f7; color:var(--ink); }
.principles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #cad4da; }
.principles-grid article { min-width:0; padding:32px 36px 8px; }
.principles-grid article:first-child { padding-left:0; }
.principles-grid article:last-child { padding-right:0; }
.principles-grid article:not(:first-child) { border-left:1px solid #cad4da; }
.principles-grid h3 { margin-bottom:17px; font-size:24px; }
.principles-grid p { color:#52677a; font-size:15px; line-height:1.7; }

.about-section { display:grid; grid-template-columns:1fr 1fr; gap:clamp(60px,10vw,160px); background:#dce8ee; color:var(--ink); }
main[lang="en"] .about-section h2 { font-size:clamp(35px,3.7vw,57px); }
.about-copy>p { max-width:590px; color:#334d62; font-size:17px; line-height:1.78; }
.about-copy>p:first-child { color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:26px; line-height:1.45; }
.about-copy small { display:block; max-width:570px; margin-top:34px; padding-top:20px; border-top:1px solid #b5c8d2; color:#617788; font-size:11px; line-height:1.6; }

.contact-section { min-height:490px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 24px; text-align:center; background:radial-gradient(circle at 50% 0%,rgba(76,139,184,.22),transparent 45%),#0a1728; }
.contact-section h2 { max-width:910px; margin-bottom:25px; font-size:clamp(38px,4.6vw,66px); line-height:1.08; }
.contact-section>p:not(.eyebrow) { margin-bottom:34px; color:#aebdca; font-size:16px; }
.contact-section .optical-period { position:relative; }
.contact-section .optical-period::after { content:attr(data-punctuation); position:absolute; left:100%; top:0; }
.button.light { border:1px solid #87aec9; color:#e9f3f7; text-transform:none; letter-spacing:.05em; font-weight:400; }
.button.light:hover { background:#dceaf1; color:var(--ink); }

footer { min-height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(28px,5vw,76px); background:#050b14; color:#96a8b8; font-size:10px; letter-spacing:.1em; }
footer div { display:flex; gap:20px; }
footer strong { color:#e5edf2; letter-spacing:.14em; }
footer p { margin:0; }

@media (min-width:801px) {
  main[lang^="zh"] .hero h1 { max-width:none; min-height:2.08em; font-size:clamp(48px,5.2vw,72px); white-space:nowrap; }
  main[lang^="zh"] .contact-section h2 { width:100%; max-width:1500px; min-height:2.16em; font-size:clamp(38px,3.9vw,60px); white-space:nowrap; }
}

@media (max-width:800px) {
  .site-header { height:72px; }
  nav a:not(.nav-contact) { display:none; }
  .language-switcher { position:absolute; top:84px; right:22px; padding:9px 12px; border:1px solid rgba(255,255,255,.14); background:rgba(5,12,22,.72); backdrop-filter:blur(8px); }
  .hero { min-height:720px; }
  .hero-content { margin:0 26px; padding-top:70px; }
  .hero-copy { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-index { display:none; }
  .section { padding:80px 26px; }
  .section-heading,.method-section,.about-section { grid-template-columns:1fr; gap:40px; }
  .section-heading>p { margin:0; }
  .discipline-grid,.principles-grid { grid-template-columns:1fr; }
  .discipline-card,.discipline-card:not(:first-child) { min-height:auto; padding:30px 0 38px; border-right:0; border-bottom:1px solid #c6d2d9; }
  .discipline-card h3 { min-height:auto; margin:28px 0 15px; }
  .card-rule { display:none; }
  .method-section { padding:80px 26px; }
  .principles-grid article,.principles-grid article:not(:first-child) { padding:28px 0; border-left:0; border-bottom:1px solid #cad4da; }
  footer { min-height:130px; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; line-height:1.6; }
}
@media (max-width:480px) {
  .brand { font-size:10px; letter-spacing:.12em; }
  .brand-mark { width:27px; height:27px; }
  .nav-contact { padding:8px 11px; }
  nav { display:none; }
  h1 { font-size:45px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } .wave-trace-main{stroke-dashoffset:0}.scan-line{left:44%}.signal-point,.signal-ring,.wave-label{opacity:1} }