@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root { --ink:#101828; --ink-soft:#526070; --navy:#172a46; --blue:#426b9b; --blue-light:#dce9f5; --paper:#f7f8fa; --white:#fff; --line:rgba(16,40,70,.12); --sans:'DM Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; z-index:1000; left:16px; top:-60px; padding:10px 16px; color:white; background:var(--navy); border-radius:8px; transition:top .2s; }
.skip-link:focus { top:16px; }
.site-header { position:fixed; z-index:100; width:100%; top:0; transition:background .25s,box-shadow .25s; }
.site-header.scrolled { background:rgba(247,248,250,.9); box-shadow:0 1px 0 var(--line); backdrop-filter:blur(18px); }
.nav-wrap { height:80px; display:flex; align-items:center; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-mark { width:35px; height:35px; fill:none; stroke:var(--blue); stroke-width:2; }
.brand-mark circle { fill:var(--blue-light); }
.brand-copy { display:flex; flex-direction:column; line-height:1; }
.brand-copy strong { font-size:16px; letter-spacing:.1em; }
.brand-copy small { margin-top:6px; color:#718096; font-size:7px; letter-spacing:.16em; }
.desktop-nav { display:flex; align-items:center; gap:34px; margin-left:auto; }
.desktop-nav a { color:#4a596c; font-size:13px; transition:color .2s; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { color:var(--blue); }
.nav-cta { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; color:white; background:var(--navy); border-radius:999px; font-size:12px; font-weight:600; transition:background .2s,transform .2s; }
.nav-cta:hover { background:var(--blue); transform:translateY(-2px); }
.menu-button,.mobile-nav { display:none; }
.hero { position:relative; min-height:100svh; padding-top:80px; overflow:hidden; background:radial-gradient(circle at 76% 38%,rgba(121,164,207,.14),transparent 27%),var(--paper); }
.hero::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:linear-gradient(rgba(23,42,70,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,42,70,.035) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.hero-grid { position:relative; z-index:1; min-height:calc(100svh - 154px); display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:80px; }
.hero-copy { padding:68px 0; }
.eyebrow,.section-kicker { color:var(--blue); font-size:11px; font-weight:600; letter-spacing:.18em; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 26px; }
.eyebrow span { width:30px; height:1px; background:currentColor; }
.hero h1 { margin:0; font-size:clamp(62px,7vw,100px); font-weight:600; line-height:1.05; letter-spacing:-.065em; }
.hero h1 em { color:var(--blue); font-style:normal; }
.hero-lead { max-width:510px; margin:30px 0 0; color:var(--ink-soft); font-size:18px; line-height:1.85; }
.hero-actions { display:flex; gap:12px; margin-top:38px; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:0 24px; border-radius:999px; font-size:13px; font-weight:600; transition:transform .2s,background .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:var(--navy); box-shadow:0 12px 28px rgba(23,42,70,.16); }
.button-primary:hover { background:var(--blue); }
.button-quiet { border:1px solid var(--line); background:rgba(255,255,255,.55); }
.button-quiet:hover { background:white; }
.hero-visual { position:relative; aspect-ratio:1; display:grid; place-items:center; }
.visual-orbit { position:absolute; border:1px solid rgba(66,107,155,.22); border-radius:50%; }
.orbit-outer { width:88%; height:88%; }
.orbit-inner { width:58%; height:58%; border-style:dashed; animation:rotate 45s linear infinite; }
.visual-star { position:relative; z-index:2; width:168px; height:168px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--navy); box-shadow:0 30px 70px rgba(23,42,70,.22); }
.visual-star svg { width:74px; fill:none; stroke:#b9d2ea; stroke-width:1.5; }
.visual-star circle { fill:#b9d2ea; }
.visual-label { position:absolute; padding:9px 15px; color:#4c6078; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.78); box-shadow:0 10px 28px rgba(23,42,70,.07); backdrop-filter:blur(8px); font-size:11px; letter-spacing:.12em; }
.label-top { top:7%; left:38%; }.label-right { right:1%; top:52%; }.label-bottom { bottom:8%; left:26%; }
.hero-foot { position:relative; z-index:2; height:74px; display:flex; align-items:center; gap:34px; border-top:1px solid var(--line); color:#788596; font-size:11px; letter-spacing:.08em; }
.hero-foot span + span::before { content:''; display:inline-block; width:3px; height:3px; margin-right:34px; vertical-align:middle; border-radius:50%; background:#aab5c2; }
.section { padding:140px 0; }
.vision-section { background:white; }
.section-heading { display:grid; grid-template-columns:1fr 3fr; gap:40px; }
.section-kicker { margin:0; padding-top:13px; }
.section-title { max-width:900px; margin:0; font-size:clamp(42px,5vw,68px); font-weight:600; line-height:1.28; letter-spacing:-.05em; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:96px; background:var(--line); border:1px solid var(--line); }
.value-card { min-height:310px; padding:34px; background:white; transition:background .25s; }
.value-card:hover { background:#f8fafc; }
.value-card > span { color:#8b98a8; font-size:10px; }
.value-card h3 { margin:92px 0 16px; font-size:30px; font-weight:600; }
.value-card p { max-width:260px; margin:0; color:var(--ink-soft); font-size:14px; line-height:1.8; }
.product-note { display:grid; grid-template-columns:1fr 1.8fr auto; align-items:end; gap:60px; margin-top:30px; padding:52px; color:white; background:var(--navy); }
.product-note .section-kicker { color:#a9c7e3; padding:0; }
.product-note h3 { margin:13px 0 0; font-size:38px; }
.product-note > p { max-width:550px; margin:0; color:rgba(255,255,255,.67); font-size:15px; line-height:1.85; }
.product-note > span { color:#a9c7e3; font-size:10px; white-space:nowrap; }
.principle-section { color:white; background:#101d31; }
.principle-layout { display:grid; grid-template-columns:1.35fr 1fr; gap:110px; align-items:start; }
.section-kicker.light { color:#9ebfdc; margin-bottom:28px; padding:0; }
.section-title.light { color:white; font-size:clamp(40px,4.4vw,62px); }
.principle-list { border-top:1px solid rgba(255,255,255,.16); }
.principle-list > div { display:grid; grid-template-columns:48px 1fr; padding:27px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.principle-list > div > span { color:rgba(255,255,255,.36); font-size:9px; }
.principle-list p { display:flex; flex-direction:column; gap:8px; margin:0; }
.principle-list strong { font-size:16px; }
.principle-list small { color:rgba(255,255,255,.56); font-size:12px; line-height:1.7; }
.about-section { padding:150px 0; background:#eef3f7; }
.about-grid { display:grid; grid-template-columns:1fr 3fr; gap:40px; }
.about-copy h2 { margin:0; font-size:clamp(44px,5.2vw,72px); font-weight:600; line-height:1.25; letter-spacing:-.055em; }
.about-copy > p { max-width:650px; margin:34px 0 0; color:var(--ink-soft); font-size:16px; line-height:1.9; }
.site-footer { padding:68px 0 24px; background:white; }
.footer-top { min-height:130px; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); }
.footer-links { display:flex; gap:32px; padding-top:12px; }
.footer-links a { color:#536174; font-size:12px; }
.footer-links a:hover { color:var(--blue); }
.footer-bottom { display:flex; justify-content:space-between; padding-top:22px; color:#8b96a4; font-size:10px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.08s; }.reveal-delay-2 { transition-delay:.16s; }.reveal-delay-3 { transition-delay:.24s; }
@keyframes rotate { to { transform:rotate(360deg); } }
@media (max-width:920px) {
  .nav-cta { display:none; }.hero-grid { grid-template-columns:1fr; gap:0; padding-top:70px; }.hero-copy { padding-bottom:10px; }.hero-visual { width:min(570px,90%); margin:0 auto; }
  .section-heading,.about-grid { grid-template-columns:1fr 2.5fr; }.principle-layout { grid-template-columns:1fr; gap:70px; }.product-note { grid-template-columns:1fr 2fr; }.product-note > span { display:none; }
}
@media (max-width:700px) {
  .shell { width:min(100% - 32px,620px); }.site-header { background:rgba(247,248,250,.9); backdrop-filter:blur(16px); }.nav-wrap { height:70px; }.desktop-nav { display:none; }
  .menu-button { width:44px; height:44px; margin-left:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; border:0; border-radius:50%; background:var(--navy); cursor:pointer; }.menu-button span { width:16px; height:1px; background:white; transition:transform .25s; }.menu-button[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-button[aria-expanded="true"] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { display:block; max-height:0; overflow:hidden; background:rgba(247,248,250,.98); transition:max-height .3s ease; }.mobile-nav.open { max-height:calc(100vh - 70px); border-top:1px solid var(--line); }.mobile-nav nav { width:min(100% - 32px,620px); margin:auto; padding:16px 0 26px; display:flex; flex-direction:column; }.mobile-nav a { min-height:50px; display:flex; align-items:center; border-bottom:1px solid var(--line); font-size:15px; }
  .hero { padding-top:70px; }.hero-grid { min-height:auto; display:block; padding-top:86px; }.hero-copy { padding:0; }.hero h1 { font-size:clamp(54px,16vw,72px); }.hero-lead { font-size:16px; }.hero-actions { flex-direction:column; }.hero-visual { width:100%; margin:54px auto 34px; }.visual-star { width:126px; height:126px; }.visual-star svg { width:56px; }.visual-label { padding:7px 11px; font-size:9px; }
  .hero-foot { height:70px; justify-content:space-between; gap:0; }.hero-foot span + span::before { display:none; }.section { padding:92px 0; }.section-heading,.about-grid { grid-template-columns:1fr; gap:28px; }.section-title { font-size:clamp(38px,11vw,50px); }
  .value-grid { grid-template-columns:1fr; margin-top:58px; }.value-card { min-height:230px; padding:28px; }.value-card h3 { margin-top:54px; }.product-note { grid-template-columns:1fr; gap:25px; padding:32px 28px; }
  .principle-layout { gap:55px; }.section-title.light { font-size:clamp(38px,10vw,48px); }.about-section { padding:96px 0; }.about-copy h2 { font-size:clamp(40px,11vw,52px); }
  .footer-top { display:block; }.footer-links { padding:34px 0; flex-wrap:wrap; gap:22px; }.footer-bottom { display:block; line-height:2; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }