@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --navy:#062744; --navy-2:#0c3658; --ink:#15324a; --muted:#5d7080; --yellow:#ffd04a; --yellow-soft:#fff3c5; --teal:#2ec4b6; --teal-dark:#158f87; --mist:#f4f7f7; --paper:#fcfdfc; --line:#dbe5e6; --shadow:0 20px 55px rgba(6,39,68,.12); --radius:24px; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.65; overflow-x:hidden; }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page-grid { position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(6,39,68,.035) calc(50% - .5px),rgba(6,39,68,.035) calc(50% + .5px),transparent calc(50% + .5px)); background-size:calc((100% - 48px)/12) 100%; z-index:-1; }
.skip-link { position:fixed; top:10px; left:10px; padding:8px 12px; background:var(--yellow); color:var(--navy); transform:translateY(-140%); transition:transform .2s; z-index:20; font-weight:800; border-radius:6px; }.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:10; background:rgba(252,253,252,.91); border-bottom:1px solid rgba(219,229,230,.7); backdrop-filter:blur(14px); }.header-inner { max-width:var(--max); margin:auto; height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }.brand { display:flex; align-items:center; gap:10px; min-width:max-content; }.brand img { display:block; }.brand span { display:flex; flex-direction:column; line-height:1.08; }.brand strong { font-size:15px; color:var(--navy); letter-spacing:-.5px; }.brand em { color:var(--teal-dark); font-style:normal; font-size:10px; letter-spacing:.12em; font-weight:800; margin-top:3px; }.desktop-nav { display:flex; align-items:center; gap:24px; }.desktop-nav a { position:relative; color:#567083; font-size:13px; font-weight:800; transition:color .2s; }.desktop-nav a:after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--yellow); transform:scaleX(0); transition:transform .2s; }.desktop-nav a:hover,.desktop-nav a.active { color:var(--navy); }.desktop-nav a.active:after { transform:scaleX(1); }.header-actions { display:flex; gap:10px; align-items:center; }.lang-switch,.menu-toggle { border:1px solid var(--line); color:var(--navy); background:#fff; }.lang-switch { height:32px; min-width:42px; padding:0 9px; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.07em; }.lang-switch:hover { border-color:var(--teal); color:var(--teal-dark); }.menu-toggle { display:none; width:38px; height:34px; border-radius:9px; position:relative; }.menu-toggle i { display:block; width:15px; height:1.5px; background:var(--navy); margin:4px auto; transition:.2s; }.mobile-menu { display:none; }
.hero { position:relative; overflow:hidden; min-height:690px; background:linear-gradient(132deg,#f8fbfb 0%,#f8fbfb 52%,#eef6f5 100%); }.hero:before { content:""; position:absolute; width:850px; height:850px; border:1px solid rgba(46,196,182,.13); border-radius:50%; left:-520px; top:65px; }.hero-inner { max-width:var(--max); margin:auto; padding:90px 24px 98px; display:grid; grid-template-columns:1.03fr .97fr; gap:45px; align-items:center; }.eyebrow,.section-kicker { display:flex; align-items:center; gap:9px; color:var(--teal-dark); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }.pulse-dot { width:8px; height:8px; background:var(--teal); border-radius:50%; box-shadow:0 0 0 5px rgba(46,196,182,.13); animation:pulse 2s infinite; }.hero h1 { margin:19px 0 2px; color:var(--navy); font-size:clamp(48px,6.2vw,82px); letter-spacing:-.075em; line-height:.98; font-weight:800; }.hero h1 span { color:var(--teal-dark); }.hero-subtitle { font-size:clamp(18px,2.2vw,25px); color:var(--navy); font-weight:700; letter-spacing:-.04em; margin:13px 0 16px; }.hero-summary { max-width:530px; color:var(--muted); font-size:16px; margin:0; }.hero-actions { display:flex; align-items:center; gap:22px; margin-top:30px; }.button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:13px 17px; border:0; border-radius:10px; font-size:13px; font-weight:800; transition:transform .2s,box-shadow .2s; }.button:hover { transform:translateY(-2px); box-shadow:0 8px 16px rgba(6,39,68,.15); }.button-primary { background:var(--navy); color:white; }.button-primary b { color:var(--yellow); font-size:17px; }.text-link { font-size:13px; color:var(--navy); font-weight:800; border-bottom:1px solid rgba(6,39,68,.35); padding-bottom:3px; }.hero-facts { margin-top:44px; display:flex; gap:0; border-top:1px solid var(--line); padding-top:19px; }.hero-facts>div { min-width:122px; padding-right:18px; margin-right:18px; border-right:1px solid var(--line); }.hero-facts>div:last-child { border:0; }.hero-facts strong { display:block; color:var(--navy); font-size:17px; line-height:1.2; }.hero-facts small { font-size:10px; }.hero-facts span { display:block; margin-top:5px; color:#6a7c89; font-size:10px; line-height:1.25; }.hero-visual { position:relative; height:438px; border-radius:34px; overflow:hidden; background:linear-gradient(145deg,#062744 8%,#104c70 68%,#167a8d); box-shadow:var(--shadow); isolation:isolate; }.visual-background { position:absolute; inset:0; z-index:-2; opacity:.5; background-image:radial-gradient(circle at 75% 30%, rgba(46,196,182,0.35) 0%, rgba(12,70,102,0.6) 55%, rgba(6,39,68,0.95) 100%), linear-gradient(135deg, #062744 0%, #0c4666 50%, #157f8a 100%); background-size:cover; background-position:center; }.visual-orbit { position:absolute; border:1px solid rgba(255,255,255,.22); border-radius:50%; z-index:-1; }.orbit-one { width:470px; height:470px; right:-205px; top:-95px; }.orbit-two { width:335px; height:335px; right:-100px; top:80px; border-color:rgba(255,208,74,.45); }.clinical-stamp { position:absolute; top:28px; left:28px; color:var(--navy); display:flex; align-items:center; gap:8px; background:var(--yellow); border-radius:999px; padding:7px 12px 7px 9px; transform:rotate(-4deg); }.clinical-stamp span { font-size:19px; font-weight:800; line-height:1; }.clinical-stamp small { max-width:75px; font-size:8px; line-height:1.15; font-weight:800; }.product-platform { position:absolute; left:11%; right:10%; bottom:54px; height:250px; display:flex; align-items:center; justify-content:center; }.product-platform:after { content:""; position:absolute; bottom:-13px; width:82%; height:26px; border-radius:50%; background:rgba(1,19,34,.34); filter:blur(12px); z-index:-1; }.product-platform img { max-width:100%; width:450px; filter:drop-shadow(0 18px 16px rgba(0,0,0,.24)); transform:rotate(-5deg); }.visual-caption { position:absolute; right:24px; bottom:25px; display:flex; gap:9px; align-items:flex-start; color:white; font-size:11px; line-height:1.28; font-weight:700; }.visual-caption p { margin:0; }.caption-line { display:block; width:28px; height:1px; margin-top:7px; background:var(--yellow); }.scroll-cue { position:absolute; left:max(24px,calc((100vw - var(--max))/2 + 24px)); bottom:24px; display:flex; gap:8px; align-items:center; color:#567083; font-family:"DM Mono",monospace; font-size:10px; }.scroll-cue span { width:20px; height:31px; border:1px solid #92a6b0; border-radius:20px; position:relative; }.scroll-cue span:after { content:""; position:absolute; left:50%; width:3px; height:3px; border-radius:50%; top:7px; background:var(--teal); animation:scroll 1.5s infinite; }
.section { max-width:var(--max); margin:auto; padding:104px 24px; }.section-intro { max-width:705px; }.section-kicker>span:first-child { color:var(--teal); font-size:13px; }.section-intro h2,.safety-header h2,.references-header h2,.inquiry-copy h2 { margin:13px 0 14px; color:var(--navy); font-size:clamp(30px,4vw,49px); line-height:1.16; letter-spacing:-.06em; }.section-intro>p:last-child,.safety-header>p:last-child { color:var(--muted); font-size:15px; max-width:660px; }.product-layout { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; margin-top:42px; }.spec-card { min-height:250px; background:#fff; padding:25px; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; transition:transform .25s,box-shadow .25s; }.spec-card:hover { transform:translateY(-5px); box-shadow:0 15px 26px rgba(6,39,68,.09); }.spec-card-main { background:var(--navy); color:#fff; border-color:var(--navy); }.spec-card-head { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:800; color:var(--teal-dark); }.spec-card-main .spec-card-head { color:#a9e6df; }.spec-icon { width:25px; height:25px; display:grid; place-items:center; background:var(--yellow-soft); border-radius:7px; color:var(--navy); font-family:"DM Mono",monospace; font-size:9px; }.spec-value { color:var(--navy); margin-top:25px; font-size:37px; line-height:.95; font-weight:800; letter-spacing:-.07em; }.spec-card-main .spec-value { color:var(--yellow); }.spec-value small { font-size:17px; letter-spacing:-.02em; }.spec-word { font-size:25px; letter-spacing:-.05em; }.spec-card p { margin:16px 0 15px; font-size:12px; line-height:1.55; color:var(--muted); }.spec-card-main p { color:#ccdae2; }.source-chip { color:#6a7b88; margin-top:auto; font-family:"DM Mono",monospace; font-size:9px; }.spec-card-main .source-chip { color:#91a9b7; }.product-note { margin-top:20px; border-left:3px solid var(--yellow); display:flex; gap:14px; padding:15px 18px; background:#fffdf5; border-radius:0 12px 12px 0; }.product-note p { margin:0; color:#5b6671; font-size:12px; }.note-badge { width:19px; height:19px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--yellow); color:var(--navy); font-weight:800; font-size:12px; }.commercial-info { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }.commercial-card { min-height:130px; display:flex; flex-direction:column; justify-content:center; padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:#fff; }.commercial-card-highlight { background:#f0fbf9; border-color:rgba(46,196,182,.38); }.commercial-card p { margin:0 0 5px; color:var(--teal-dark); font-family:"DM Mono",monospace; font-size:10px; }.commercial-card strong { color:var(--navy); font-size:15px; line-height:1.35; }.commercial-card span { margin-top:6px; color:var(--muted); font-size:10px; line-height:1.45; }
.mechanism-section { max-width:none; padding:0; background:var(--navy); }.mechanism-shell { max-width:var(--max); margin:auto; padding:104px 24px; display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; }.inverse { padding-top:20px; }.inverse h2 { color:#fff; }.inverse>p:last-child { color:#b1c8d5; }.mechanism-experience { position:relative; min-height:380px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius); padding:34px; overflow:hidden; }.mechanism-track { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; z-index:2; }.track-line { position:absolute; height:1px; left:11%; right:11%; top:20px; background:linear-gradient(90deg,var(--yellow),var(--teal)); opacity:.55; }.mechanism-node { appearance:none; padding:0; border:0; text-align:left; color:#a9c1ce; background:transparent; font-size:11px; font-weight:700; position:relative; z-index:1; }.mechanism-node span { width:41px; height:41px; display:grid; place-items:center; margin-bottom:11px; border-radius:50%; background:#1b4968; color:#fff; border:1px solid rgba(255,255,255,.2); font-family:"DM Mono",monospace; font-size:10px; }.mechanism-node.active { color:#fff; }.mechanism-node.active span { color:var(--navy); background:var(--yellow); border-color:var(--yellow); box-shadow:0 0 0 7px rgba(255,208,74,.12); }.mechanism-panel { position:relative; z-index:1; margin-top:42px; max-width:400px; }.mechanism-panel .panel-label { color:var(--teal); font-family:"DM Mono",monospace; font-size:10px; }.mechanism-panel h3 { color:#fff; margin:8px 0 10px; font-size:26px; letter-spacing:-.05em; line-height:1.15; }.mechanism-panel p { color:#b1c8d5; font-size:13px; margin:0; }.molecule-art { position:absolute; right:-35px; bottom:-48px; width:250px; height:220px; z-index:0; opacity:.8; }.molecule-art span { position:absolute; width:62px; height:62px; background:var(--yellow); border-radius:50%; box-shadow:0 0 0 13px rgba(255,208,74,.08); }.molecule-art span:nth-child(1){ right:48px; top:25px; }.molecule-art span:nth-child(2){ right:120px; top:110px; width:38px;height:38px;background:var(--teal); }.molecule-art span:nth-child(3){ right:7px; bottom:13px;width:25px;height:25px;background:#fff; }.molecule-art i { position:absolute; height:1px; background:rgba(255,255,255,.55); transform-origin:left; }.molecule-art i:nth-of-type(1){ width:104px; right:62px; top:83px; transform:rotate(129deg); }.molecule-art i:nth-of-type(2){ width:80px; right:31px; top:81px; transform:rotate(69deg); }
.context-section { display:grid; grid-template-columns:.82fr 1.18fr; gap:83px; align-items:center; }.context-image { position:relative; height:430px; border-radius:var(--radius); overflow:hidden; background:linear-gradient(145deg,#ffde70,#fff1b8); }.context-image:before,.context-image:after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(6,39,68,.14); }.context-image:before { width:500px; height:500px; top:-280px; left:-300px; }.context-image:after { width:310px; height:310px; bottom:-205px; right:-150px; }.context-symbol { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:177px; height:177px; display:grid; place-items:center; color:#fff; font-size:93px; font-weight:800; letter-spacing:-.11em; background:var(--navy); border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.33); }.context-symbol sup { color:var(--yellow); font-size:28px; align-self:start; margin-top:47px; }.context-grid { position:absolute; inset:0; background-image:radial-gradient(rgba(6,39,68,.28) 1px,transparent 1px); background-size:19px 19px; opacity:.35; }.context-list { margin-top:30px; border-top:1px solid var(--line); }.context-list article { display:grid; grid-template-columns:34px 1fr; gap:15px; padding:20px 0; border-bottom:1px solid var(--line); }.context-number { color:var(--teal-dark); font-family:"DM Mono",monospace; font-size:12px; padding-top:3px; }.context-list h3 { margin:0 0 3px; color:var(--navy); font-size:14px; }.context-list p { margin:0; color:var(--muted); font-size:12px; }
.evidence-section { max-width:none; background:var(--mist); padding-left:max(24px,calc((100vw - var(--max))/2 + 24px)); padding-right:max(24px,calc((100vw - var(--max))/2 + 24px)); }.evidence-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }.evidence-principle { max-width:340px; margin:0 0 12px; padding-left:15px; border-left:2px solid var(--yellow); color:#526b7a; font-size:12px; }.study-tabs { display:flex; gap:10px; margin-top:38px; }.study-tab { flex:1; display:flex; gap:12px; align-items:center; text-align:left; padding:15px 18px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.65); color:#5a7181; transition:.2s; }.study-tab span { font-family:"DM Mono",monospace; font-size:10px; }.study-tab b { display:block; color:inherit; font-size:13px; }.study-tab small { display:block; margin-top:2px; font-size:10px; }.study-tab.active { color:var(--navy); background:#fff; border-color:var(--navy); box-shadow:0 8px 18px rgba(6,39,68,.08); }.evidence-dashboard { display:grid; grid-template-columns:.9fr 1.1fr; gap:21px; margin-top:18px; }.study-summary { background:var(--navy); padding:29px; color:#fff; border-radius:var(--radius); }.study-meta { color:#a7c0cf; font-family:"DM Mono",monospace; text-transform:uppercase; font-size:10px; }.study-summary h3 { margin:8px 0 12px; font-size:27px; line-height:1.16; letter-spacing:-.05em; }.study-summary p { margin:0; color:#c6d7e0; font-size:12px; }.study-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:23px; }.study-tags span { padding:5px 8px; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#d4e1e7; font-size:9px; }.study-link { display:inline-flex; margin-top:24px; color:var(--yellow); font-size:11px; font-weight:800; }.metrics-card { background:#fff; border-radius:var(--radius); padding:29px; }.metrics-intro { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }.metrics-intro h4 { margin:0; color:var(--navy); font-size:15px; }.metrics-intro p { margin:4px 0 0; color:var(--muted); font-size:11px; }.metrics-badge { color:var(--teal-dark); background:#e5f8f5; border-radius:999px; padding:5px 9px; font-family:"DM Mono",monospace; font-size:9px; white-space:nowrap; }.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:23px; }.metric { padding:15px; background:var(--mist); border-radius:13px; }.metric .metric-label { display:block; color:#607789; font-size:10px; line-height:1.35; }.metric strong { display:block; margin:8px 0 2px; color:var(--navy); letter-spacing:-.06em; line-height:1; font-size:28px; }.metric strong small { font-size:14px; letter-spacing:-.02em; }.metric .metric-detail { color:var(--teal-dark); font-family:"DM Mono",monospace; font-size:9px; }.study-limitation { grid-column:1/-1; margin:5px 0 0; padding:12px 14px; color:#667987; background:#fffdf4; border-left:3px solid var(--yellow); font-size:11px; }.evidence-footnote { display:flex; gap:11px; max-width:690px; margin:22px 0 0; color:#60717c; font-size:11px; }.evidence-footnote span { display:grid; place-items:center; flex:0 0 auto; width:19px; height:19px; border-radius:50%; background:var(--yellow); color:var(--navy); font-weight:800; }.evidence-footnote p { margin:0; }
.safety-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:78px; }.safety-header { padding-top:9px; }.accordion-group { border-top:1px solid var(--line); }.accordion-item { border-bottom:1px solid var(--line); }.accordion-item summary { list-style:none; padding:21px 0; display:grid; grid-template-columns:30px 1fr 20px; gap:10px; align-items:center; cursor:pointer; color:var(--navy); }.accordion-item summary::-webkit-details-marker { display:none; }.accordion-item summary span { color:var(--teal-dark); font-family:"DM Mono",monospace; font-size:10px; }.accordion-item summary b { font-size:14px; }.accordion-item summary i { font-style:normal; font-size:22px; color:var(--teal-dark); transition:.2s; }.accordion-item[open] summary i { transform:rotate(45deg); }.accordion-item div { padding:0 28px 21px 40px; }.accordion-item p { margin:0; color:var(--muted); font-size:12px; }.references-section { padding-top:36px; }.references-header { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; }.references-header h2 { max-width:650px; }.reference-list { list-style:none; padding:0; margin:34px 0 0; border-top:1px solid var(--line); }.reference-list li { display:grid; grid-template-columns:51px 1fr; gap:17px; padding:24px 0; border-bottom:1px solid var(--line); }.ref-number { color:var(--teal-dark); font-family:"DM Mono",monospace; font-size:12px; }.reference-list p { margin:0 0 7px; color:#526a79; font-size:12px; }.reference-list strong { color:var(--navy); }.reference-list a { color:var(--teal-dark); font-family:"DM Mono",monospace; font-size:10px; }.reference-list a span { margin-left:4px; color:var(--navy); }
.inquiry-section { background:var(--yellow); position:relative; overflow:hidden; }.inquiry-section:before { content:""; position:absolute; width:720px; height:720px; top:-430px; right:-210px; border:1px solid rgba(6,39,68,.14); border-radius:50%; }.inquiry-section:after { content:""; position:absolute; width:480px; height:480px; bottom:-330px; left:-150px; background:rgba(255,255,255,.27); border-radius:50%; }.inquiry-inner { position:relative; z-index:1; max-width:var(--max); margin:auto; padding:94px 24px; display:grid; grid-template-columns:.83fr 1.17fr; gap:77px; }.inquiry-copy h2 { font-size:clamp(31px,4.4vw,50px); }.inquiry-copy>p:last-of-type { color:#3b5669; font-size:14px; }.contact-details { margin-top:29px; display:flex; flex-direction:column; gap:3px; }.contact-details a { color:var(--navy); font-weight:800; font-size:15px; text-decoration:underline; text-underline-offset:3px; }.contact-details span { color:#4a6574; font-size:11px; }.inquiry-form { padding:27px; border-radius:var(--radius); background:#fffdf7; box-shadow:0 19px 35px rgba(6,39,68,.11); }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.inquiry-form label { display:flex; flex-direction:column; gap:6px; color:var(--navy); font-size:11px; font-weight:800; }.inquiry-form input:not([type=checkbox]),.inquiry-form select,.inquiry-form textarea { width:100%; border:1px solid #d9e1e2; outline:0; padding:10px 11px; color:var(--navy); background:#fff; border-radius:8px; font-weight:500; font-size:12px; transition:border .2s,box-shadow .2s; }.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(46,196,182,.15); }.form-message { margin-top:14px; }.inquiry-form textarea { resize:vertical; min-height:86px; }.consent { margin-top:17px; display:grid!important; grid-template-columns:16px 1fr; gap:8px!important; align-items:start; color:#647680!important; font-size:10px!important; line-height:1.45; font-weight:500!important; }.consent input { margin:2px 0 0; accent-color:var(--teal-dark); }.form-action { margin-top:19px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }.form-status { margin:0; color:#58717c; font-size:10px; }
.site-footer { background:var(--navy); color:#d1e0e7; }.footer-inner { max-width:var(--max); margin:auto; padding:28px 24px; display:grid; grid-template-columns:auto 1fr auto; gap:35px; align-items:center; }.footer-brand strong { color:white; }.footer-brand em { color:var(--yellow); }.footer-inner p { max-width:660px; margin:0; font-size:10px; line-height:1.5; }.footer-inner .footer-partner { color:var(--yellow); font-weight:700; }.footer-inner .footer-disclaimer { margin-top:5px; }.footer-inner small { display:block; margin-top:6px; color:#88a6b8; font-family:"DM Mono",monospace; font-size:9px; }.back-to-top { display:flex; gap:8px; align-items:center; color:var(--yellow); font-size:11px; font-weight:800; }.reveal { animation:reveal .75s both; }.reveal-delay { animation-delay:.15s; }.reveal-delay-2 { animation-delay:.28s; }
@keyframes reveal { from {opacity:0; transform:translateY(20px)} to {opacity:1; transform:none} }@keyframes pulse {50%{box-shadow:0 0 0 9px rgba(46,196,182,0)}}@keyframes scroll {0%,100%{transform:translate(-50%,0);opacity:1}70%{transform:translate(-50%,13px);opacity:0}} 
@media(max-width:900px){ .desktop-nav{display:none}.menu-toggle{display:block}.mobile-menu{padding:0 24px 14px; grid-template-columns:repeat(3,1fr); gap:8px; background:rgba(252,253,252,.96); border-top:1px solid var(--line)}.mobile-menu:not([hidden]){display:grid}.mobile-menu a{padding:9px 10px;background:#fff;border:1px solid var(--line);border-radius:8px;color:#537082;font-size:11px;font-weight:800}.mobile-menu a.active{color:var(--navy);border-color:var(--teal)}.hero{min-height:unset}.hero-inner{grid-template-columns:1fr;gap:43px;padding-top:73px}.hero-copy{max-width:650px}.hero-visual{max-width:650px;width:100%;height:390px}.mechanism-shell,.safety-section,.inquiry-inner{grid-template-columns:1fr;gap:42px}.context-section{gap:48px;grid-template-columns:.72fr 1.28fr}.evidence-dashboard{grid-template-columns:1fr}.inquiry-copy{max-width:630px}.footer-inner{grid-template-columns:auto 1fr}.back-to-top{grid-column:2;justify-self:end}.scroll-cue{display:none} }
@media(max-width:640px){ .commercial-info{grid-template-columns:1fr;gap:10px}.page-grid{display:none}.header-inner{height:65px;padding:0 16px}.hero-inner,.section,.inquiry-inner{padding-left:18px;padding-right:18px}.hero-inner{padding-top:53px;padding-bottom:50px}.hero h1{font-size:49px}.hero-summary{font-size:14px}.hero-actions{gap:16px;align-items:flex-start;flex-direction:column}.hero-facts{margin-top:33px;gap:0}.hero-facts>div{min-width:0;flex:1;margin-right:10px;padding-right:10px}.hero-facts strong{font-size:13px}.hero-facts span{font-size:8px}.hero-visual{height:300px;border-radius:22px}.product-platform{left:4%;right:4%;bottom:31px;height:183px}.product-platform img{width:335px}.clinical-stamp{top:17px;left:17px}.visual-caption{right:16px;bottom:16px;font-size:9px}.section{padding-top:70px;padding-bottom:70px}.section-intro h2,.safety-header h2,.references-header h2,.inquiry-copy h2{font-size:33px}.product-layout{grid-template-columns:1fr;gap:12px;margin-top:29px}.spec-card{min-height:200px}.spec-value{margin-top:19px}.mechanism-shell{padding:70px 18px}.mechanism-experience{padding:22px 18px;min-height:402px}.mechanism-node b{font-size:9px;line-height:1.2}.mechanism-node span{width:34px;height:34px}.track-line{top:17px}.mechanism-panel{margin-top:37px}.molecule-art{right:-86px;bottom:-45px}.context-section{grid-template-columns:1fr;gap:31px}.context-image{height:226px}.context-symbol{width:120px;height:120px;font-size:62px}.context-symbol sup{font-size:18px;margin-top:31px}.evidence-section{padding-left:18px;padding-right:18px}.evidence-heading{display:block}.evidence-principle{margin-top:18px}.study-tabs{margin-top:26px;flex-direction:column}.evidence-dashboard{margin-top:13px}.study-summary,.metrics-card{padding:21px}.study-summary h3{font-size:23px}.metric-grid{grid-template-columns:1fr 1fr;gap:7px}.metric{padding:11px}.metric strong{font-size:23px}.safety-section{padding-top:70px}.references-header{display:block}.reference-list li{grid-template-columns:38px 1fr;gap:8px}.inquiry-inner{padding-top:68px;padding-bottom:68px}.inquiry-form{padding:19px;border-radius:18px}.form-grid{grid-template-columns:1fr}.footer-inner{padding:23px 18px;grid-template-columns:1fr;gap:16px}.back-to-top{grid-column:auto;justify-self:start}.footer-inner p{font-size:9px} }
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Expanded clinical evidence explorer */
.evidence-explorer { margin-top:25px; padding:30px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:0 12px 28px rgba(6,39,68,.06); touch-action:pan-y; }.evidence-visual-head { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; }.evidence-visual-head>div:first-child { max-width:650px; }.chart-eyebrow { margin:0 0 7px; color:var(--teal-dark); font:500 10px "DM Mono",monospace; letter-spacing:.09em; }.evidence-visual-head h3 { margin:0; color:var(--navy); letter-spacing:-.04em; font-size:24px; line-height:1.2; }.evidence-visual-head p:not(.chart-eyebrow) { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }.topic-tabs { display:flex; gap:7px; padding:5px; flex:0 0 auto; background:var(--mist); border-radius:10px; }.topic-tabs button { appearance:none; min-width:93px; padding:8px 10px; border:0; border-radius:7px; color:#6b8190; background:transparent; font-size:10px; font-weight:800; }.topic-tabs button.active { color:var(--navy); background:#fff; box-shadow:0 3px 9px rgba(6,39,68,.09); }.chart-mobile-hint { display:none; margin-top:12px; color:var(--teal-dark); font-size:10px; }.chart-key { display:flex; align-items:center; gap:18px; margin:25px 0 15px; color:#71838f; font:500 9px "DM Mono",monospace; }.chart-key span { display:flex; align-items:center; gap:5px; }.chart-key i { display:block; width:9px; height:9px; border-radius:3px; }.key-citrate { background:var(--teal); }.key-control { background:#b9c7cd; }.chart-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.chart-card { position:relative; min-width:0; padding:18px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(180deg,#fff,#fbfdfd); animation:chart-enter .45s both; animation-delay:var(--delay); }.chart-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }.chart-card-top>span { color:var(--teal-dark); font:500 9px "DM Mono",monospace; text-transform:uppercase; }.citation-button { appearance:none; display:grid; place-items:center; width:27px; height:22px; padding:0; border:1px solid #cae3df; border-radius:6px; color:var(--teal-dark); background:#effaf8; font:500 9px "DM Mono",monospace; }.citation-button:hover,.citation-button:focus-visible { border-color:var(--teal); outline:none; background:#dff6f2; }.chart-card h4 { min-height:39px; margin:13px 0 5px; color:var(--navy); font-size:13px; line-height:1.35; }.chart-value { display:block; color:var(--navy); font-size:25px; letter-spacing:-.06em; line-height:1.1; }.chart-detail { min-height:29px; margin:7px 0 15px; color:#5b7685; font-size:10px; line-height:1.45; }.comparison-bars { border-top:1px solid #edf1f2; padding-top:11px; }.bar-label { display:flex; justify-content:space-between; gap:8px; color:#657b89; font-size:9px; line-height:1.3; }.bar-label b { color:var(--navy); font-family:"DM Mono",monospace; font-weight:500; }.bar-track { height:7px; margin:4px 0 8px; overflow:hidden; border-radius:99px; background:#eaf0f1; }.bar-track i { display:block; width:var(--bar-width); height:100%; border-radius:inherit; animation:grow-bar .8s both; }.bar-citrate { background:var(--teal); }.bar-control { background:#afc1c8; }.chart-note { min-height:65px; margin:12px 0 0; color:#70818c; font-size:9px; line-height:1.48; }.direct-data-ribbon { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin-top:14px; padding:16px 18px; border-radius:14px; background:var(--navy); color:#fff; }.direct-data-label { padding:5px 7px; border-radius:5px; color:var(--navy); background:var(--yellow); font:500 9px "DM Mono",monospace; white-space:nowrap; }.direct-data-ribbon h4 { margin:0 0 2px; font-size:12px; }.direct-data-ribbon p { margin:0; color:#bdd0da; font-size:10px; line-height:1.45; }.ribbon-citation { color:var(--yellow); background:transparent; border-color:rgba(255,255,255,.35); }.ribbon-citation:hover,.ribbon-citation:focus-visible { color:var(--navy); background:var(--yellow); border-color:var(--yellow); }.chart-fallback { margin:18px 0 0; padding:16px 16px 16px 30px; color:#5b7180; background:#f8fbfb; border-left:3px solid var(--teal); font-size:12px; }.reference-modal { width:min(560px,calc(100vw - 32px)); padding:0; border:0; border-radius:18px; color:var(--ink); box-shadow:0 25px 70px rgba(6,39,68,.3); }.reference-modal::backdrop { background:rgba(2,25,43,.58); backdrop-filter:blur(2px); }.reference-modal-inner { position:relative; padding:31px; }.reference-modal-close { position:absolute; right:14px; top:13px; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--navy); font-size:18px; line-height:1; }.reference-modal-label { margin:0 0 10px; color:var(--teal-dark); font:500 11px "DM Mono",monospace; }.reference-modal h3 { margin:0 0 14px; color:var(--navy); font-size:20px; letter-spacing:-.04em; }.reference-modal p { margin:0; color:#56717f; font-size:13px; line-height:1.65; }.reference-modal a { display:inline-flex; margin-top:19px; color:var(--teal-dark); font-size:12px; font-weight:800; border-bottom:1px solid currentColor; }
@keyframes grow-bar { from { width:0; } to { width:var(--bar-width); } } @keyframes chart-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media(max-width:900px){ .chart-card-grid{grid-template-columns:1fr 1fr}.evidence-visual-head{display:block}.topic-tabs{display:inline-flex;margin-top:18px}.chart-note{min-height:54px} }
@media(max-width:640px){ .evidence-explorer{margin-top:18px;padding:18px;border-radius:18px}.evidence-visual-head h3{font-size:20px}.evidence-visual-head p:not(.chart-eyebrow){font-size:11px}.topic-tabs{width:100%;gap:4px}.topic-tabs button{flex:1;min-width:0;padding:8px 4px;font-size:9px}.chart-mobile-hint{display:block}.chart-key{margin:17px 0 12px;gap:11px;font-size:8px}.chart-card-grid{grid-template-columns:1fr;gap:9px}.chart-card{padding:15px}.chart-card h4{min-height:0;margin-top:9px}.chart-detail{min-height:0;margin-bottom:11px}.chart-note{min-height:0}.direct-data-ribbon{grid-template-columns:1fr auto;gap:10px;padding:14px}.direct-data-label{width:max-content}.direct-data-ribbon>div{grid-column:1/-1;grid-row:2}.ribbon-citation{grid-column:2;grid-row:1}.reference-modal-inner{padding:28px 22px 24px} }

/* Clinical workflow training aid */
.workflow-section { padding-top:94px; padding-bottom:108px; }.guide-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }.guide-heading>div { max-width:750px; }.guide-heading h2 { margin:13px 0 14px; color:var(--navy); font-size:clamp(30px,4vw,49px); line-height:1.16; letter-spacing:-.06em; }.guide-heading>div>p:last-child { margin:0; color:var(--muted); font-size:15px; max-width:700px; }.official-video-link { min-width:195px; display:grid; grid-template-columns:28px 1fr; gap:0 9px; align-items:center; padding:13px 14px; border:1px solid #c8dfdc; border-radius:13px; background:#effbf9; color:var(--navy); }.official-video-link>span { grid-row:1 / span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff; font-size:10px; }.official-video-link b { font-size:11px; line-height:1.25; }.official-video-link small { color:var(--teal-dark); font:500 9px "DM Mono",monospace; }.guide-alert { display:flex; gap:12px; margin-top:30px; padding:15px 18px; border:1px solid #f0d680; border-radius:15px; background:#fff8dc; color:#526775; font-size:12px; line-height:1.55; }.guide-alert>span { display:grid; place-items:center; flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:var(--yellow); color:var(--navy); font-weight:800; }.guide-alert strong { color:var(--navy); }.clinical-guide { margin-top:20px; }.clinical-guide-fallback { padding:22px 26px; border:1px solid var(--line); border-radius:var(--radius); color:#516b7a; background:#fbfdfd; font-size:12px; }.clinical-guide-fallback ol { margin:0; padding-left:20px; }.clinical-guide-fallback li+li { margin-top:8px; }.clinical-guide-shell { overflow:hidden; border:1px solid rgba(6,39,68,.13); border-radius:var(--radius); background:#fff; box-shadow:0 18px 36px rgba(6,39,68,.08); }.clinical-step-list { display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--line); background:#f7faf9; }.clinical-step { appearance:none; min-width:0; min-height:75px; padding:14px 15px; display:flex; align-items:center; gap:9px; border:0; border-right:1px solid var(--line); text-align:left; color:#6f8390; background:transparent; transition:background .2s,color .2s; }.clinical-step:last-child { border-right:0; }.clinical-step span { color:#85a1aa; font:500 10px "DM Mono",monospace; }.clinical-step b { font-size:11px; line-height:1.25; }.clinical-step.active { color:var(--navy); background:#fff; box-shadow:inset 0 -3px var(--teal); }.clinical-step.active span { color:var(--teal-dark); }.clinical-stage { min-height:373px; display:grid; grid-template-columns:1.13fr .87fr; gap:20px; padding:33px; background:linear-gradient(130deg,#082d4a 0%,#0c3a5a 64%,#0d5266 100%); color:#fff; }.stage-copy { position:relative; z-index:2; max-width:575px; }.guide-status { display:flex; align-items:center; gap:8px; margin:0; color:#9cded7; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.guide-status span { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(46,196,182,.13); }.guide-step-count { margin:27px 0 7px; color:var(--yellow); font:500 11px "DM Mono",monospace; }.stage-copy h3 { max-width:560px; margin:0; color:#fff; font-size:clamp(24px,2.7vw,34px); line-height:1.18; letter-spacing:-.055em; }.stage-copy>p:not(.guide-status):not(.guide-step-count):not(.guide-reduced) { max-width:560px; margin:13px 0 0; color:#c7d9e2; font-size:13px; line-height:1.7; }.guide-check { display:flex; align-items:flex-start; gap:8px; max-width:560px; margin-top:20px; padding:10px 12px; border-left:2px solid var(--yellow); background:rgba(255,255,255,.08); color:#e2f0f3; font-size:10px; line-height:1.5; }.guide-check i { display:grid; place-items:center; flex:0 0 auto; width:15px; height:15px; border-radius:50%; color:var(--navy); background:var(--yellow); font-style:normal; font-size:10px; font-weight:900; }.guide-reduced { margin:12px 0 0; color:#a3c0cb; font-size:10px; }.clinical-visual { position:relative; min-height:292px; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.025)); }.visual-step-code { position:absolute; top:18px; right:19px; color:rgba(255,255,255,.13); font:500 55px/1 "DM Mono",monospace; }.visual-halo { position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; }.halo-a { width:285px; height:285px; right:-123px; top:-98px; }.halo-b { width:190px; height:190px; left:-93px; bottom:-92px; border-color:rgba(255,208,74,.32); }.guide-catheter { position:absolute; top:46%; right:13%; width:65%; height:74px; transform:translateY(-50%); border-radius:40px 10px 10px 40px; background:#deeff2; box-shadow:0 12px 20px rgba(0,0,0,.16); }.guide-catheter:before { content:""; position:absolute; left:-19px; top:-14px; width:35px; height:101px; border-radius:16px; background:#a8c2c7; }.lumen { position:absolute; left:13px; right:28px; height:15px; border-radius:99px; background:#638995; }.lumen-top { top:18px; }.lumen-bottom { bottom:18px; }.catheter-hub { position:absolute; right:-17px; top:17px; width:25px; height:40px; border-radius:4px; background:var(--yellow); }.catheter-label { position:absolute; right:14px; bottom:4px; color:#406370; font:500 9px "DM Mono",monospace; font-style:normal; }.guide-syringe { position:absolute; top:24%; left:8%; width:142px; height:35px; transform:rotate(-21deg); transition:transform .55s ease,opacity .4s; }.guide-syringe:before { content:""; position:absolute; left:0; top:12px; width:100px; height:11px; border-radius:3px; background:rgba(236,249,250,.9); box-shadow:inset 0 0 0 1px #a5d2d2; }.guide-syringe b { position:absolute; left:82px; top:8px; width:24px; height:19px; border-radius:4px; background:#f5f7f6; }.guide-syringe i { position:absolute; left:104px; top:14px; width:30px; height:4px; background:#d6e7e9; }.guide-syringe em { position:absolute; left:130px; top:15px; width:16px; height:2px; background:var(--yellow); font-style:normal; }.guide-syringe span { position:absolute; left:24px; top:12px; width:12px; height:11px; border-left:3px solid var(--teal); border-right:3px solid var(--teal); }.guide-droplet { position:absolute; width:15px; height:20px; border-radius:50% 50% 50% 3px; background:var(--teal); opacity:0; transform:rotate(45deg); }.drop-one { right:41%; top:33%; }.drop-two { right:28%; top:40%; width:10px; height:13px; }.guide-flow-line { position:absolute; right:18%; top:50%; width:0; height:2px; background:linear-gradient(90deg,var(--teal),rgba(46,196,182,0)); }.guide-verified { position:absolute; left:21%; bottom:24%; display:grid; place-items:center; width:45px; height:45px; border:1px solid rgba(255,208,74,.55); border-radius:50%; color:var(--yellow); font-size:24px; font-weight:800; opacity:.16; transition:opacity .35s,transform .35s; }.clinical-stage[data-phase="verify"] .guide-verified { opacity:1; transform:scale(1.06); }.clinical-stage[data-phase="prepare"] .guide-catheter { box-shadow:0 0 0 7px rgba(46,196,182,.14),0 12px 20px rgba(0,0,0,.16); }.clinical-stage[data-phase="clear"] .guide-flow-line { width:57%; transition:width .6s ease; }.clinical-stage[data-phase="lock"] .guide-syringe { transform:translate(62px,92px) rotate(-2deg); }.clinical-stage[data-phase="next"] .guide-catheter { opacity:.73; }.clinical-stage[data-phase="next"] .guide-syringe { opacity:.18; transform:translate(-30px,-22px) rotate(-21deg); }.clinical-stage[data-playing="true"][data-phase="lock"] .guide-droplet { opacity:1; animation:lock-droplet 1.35s ease-in-out infinite; }.clinical-stage[data-playing="true"][data-phase="lock"] .drop-two { animation-delay:.45s; }.clinical-stage[data-playing="true"] .guide-status span { animation:guide-pulse 1.35s infinite; }.clinical-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 18px; border-top:1px solid var(--line); background:#fbfdfd; }.guide-control,.guide-replay { appearance:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:#5d7584; background:#fff; font-size:10px; font-weight:800; }.guide-control:hover,.guide-replay:hover { border-color:var(--teal); color:var(--teal-dark); }.guide-play { color:#fff; background:var(--navy); border-color:var(--navy); }.guide-play:hover { color:#fff; background:#10496b; border-color:#10496b; }.guide-control:disabled { opacity:.45; cursor:not-allowed; }.guide-replay { margin-left:auto; }.guide-source-note { margin:12px 0 0; color:#71828c; font-size:10px; line-height:1.5; }.guide-source-note a { color:var(--teal-dark); font-family:"DM Mono",monospace; font-weight:800; }.workflow-section + .safety-section { padding-top:85px; }
@keyframes guide-pulse { 50% { box-shadow:0 0 0 8px rgba(46,196,182,0); } } @keyframes lock-droplet { 0% { transform:translate(0,0) rotate(45deg) scale(.7); opacity:0; } 22% { opacity:1; } 100% { transform:translate(77px,64px) rotate(45deg) scale(1); opacity:0; } }
@media(max-width:900px){ .guide-heading{display:block}.official-video-link{display:inline-grid;margin-top:22px}.clinical-stage{grid-template-columns:1fr;min-height:unset}.clinical-visual{min-height:250px}.clinical-step{padding:12px 9px}.clinical-step b{font-size:10px}.workflow-section + .safety-section{padding-top:70px} }
@media(max-width:640px){ .workflow-section{padding-top:70px;padding-bottom:70px}.guide-heading h2{font-size:33px}.guide-heading>div>p:last-child{font-size:14px}.guide-alert{margin-top:22px;padding:13px 14px;font-size:11px}.official-video-link{min-width:0;width:100%;max-width:285px}.clinical-step-list{grid-template-columns:1fr;gap:0;padding:8px;background:#f7faf9}.clinical-step{min-height:42px;padding:9px 10px;border-right:0;border-bottom:1px solid var(--line)}.clinical-step:last-child{border-bottom:0}.clinical-step.active{box-shadow:inset 3px 0 var(--teal)}.clinical-stage{padding:21px 18px;gap:18px}.guide-step-count{margin-top:20px}.stage-copy h3{font-size:25px}.stage-copy>p:not(.guide-status):not(.guide-step-count):not(.guide-reduced){font-size:12px}.clinical-visual{min-height:205px}.guide-catheter{width:72%;right:9%;height:60px}.guide-catheter:before{height:85px;top:-13px}.lumen{left:10px;right:20px;height:12px}.lumen-top{top:14px}.lumen-bottom{bottom:14px}.catheter-hub{top:12px;height:36px}.guide-syringe{top:15%;left:1%;transform:scale(.78) rotate(-21deg);transform-origin:left top}.clinical-stage[data-phase="lock"] .guide-syringe{transform:translate(39px,73px) scale(.78) rotate(-2deg)}.guide-verified{left:11%;bottom:16%;width:38px;height:38px}.guide-flow-line{right:13%;top:49%}.clinical-controls{padding:12px;gap:6px}.guide-control{flex:1;padding:8px 5px;font-size:9px}.guide-play{flex-basis:100%;order:3}.guide-replay{margin-left:0;order:4;flex-basis:100%;font-size:9px}.guide-source-note{font-size:9px}.workflow-section + .safety-section{padding-top:70px} }
@media(prefers-reduced-motion:reduce){ .clinical-stage[data-playing="true"] .guide-droplet,.clinical-stage[data-playing="true"] .guide-status span{animation:none!important} }

/* Academic conference infographic section */
.infographic-section { padding-top:90px; padding-bottom:95px; background:#fff; }
.infographic-header { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:34px; }
.infographic-header>div:first-child { max-width:720px; }
.infographic-downloads { display:flex; flex-wrap:wrap; gap:12px; }
.button-secondary { background:#edf6f5; color:var(--navy); border:1px solid #cce5e1; }
.button-secondary b { color:var(--teal-dark); }
.button-secondary:hover { background:#e1f2f0; }
.infographic-preview-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#f7faf9; box-shadow:0 18px 42px rgba(6,39,68,.08); }
.infographic-preview-frame { position:relative; max-height:560px; overflow:hidden; display:flex; justify-content:center; background:#062744; }
.infographic-preview-frame img { width:100%; max-width:960px; height:auto; display:block; object-fit:cover; object-position:top; filter:drop-shadow(0 15px 30px rgba(0,0,0,.35)); }
.preview-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(6,39,68,.85) 100%); display:flex; align-items:flex-end; justify-content:center; padding-bottom:30px; }
.infographic-meta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); }
.infographic-meta-grid>div { background:#fff; padding:18px 22px; }
.infographic-meta-grid strong { display:block; color:var(--navy); font-size:18px; line-height:1.2; letter-spacing:-.03em; }
.infographic-meta-grid span { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.35; }

/* Interactive FAQ Assistant Widget */
.faq-widget { position:fixed; right:24px; bottom:24px; z-index:99; font-family:Manrope,"PingFang SC","Microsoft YaHei",sans-serif; }
.faq-launcher { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; background:var(--navy); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:999px; box-shadow:0 12px 30px rgba(6,39,68,.3); font-weight:700; font-size:13px; transition:transform .2s,background .2s,box-shadow .2s; }
.faq-launcher:hover { transform:translateY(-2px); background:#0c3658; box-shadow:0 16px 36px rgba(6,39,68,.38); }
.faq-launcher-icon { font-size:15px; }
.faq-launcher-badge { padding:2px 7px; background:var(--yellow); color:var(--navy); border-radius:999px; font:700 9px "DM Mono",monospace; }
.faq-panel { position:absolute; right:0; bottom:64px; width:410px; height:620px; max-height:calc(100vh - 100px); background:#fff; border-radius:24px; border:1px solid rgba(6,39,68,.14); box-shadow:0 24px 60px rgba(6,39,68,.25); display:flex; flex-direction:column; overflow:hidden; animation:faq-pop .25s ease-out; }
@keyframes faq-pop { from { opacity:0; transform:translateY(15px) scale(.96); } to { opacity:1; transform:none; } }
.faq-header { padding:16px 20px; background:var(--navy); color:#fff; display:flex; justify-content:space-between; align-items:center; }
.faq-header-titles h3 { margin:0; font-size:15px; letter-spacing:-.02em; }
.faq-header-titles p { margin:3px 0 0; color:#a8c4d2; font-size:10px; }
.faq-header-actions { display:flex; gap:6px; }
.faq-clear-btn, .faq-close-btn { background:rgba(255,255,255,.12); color:#fff; border:0; width:28px; height:28px; border-radius:50%; font-size:13px; display:grid; place-items:center; transition:background .2s; }
.faq-clear-btn:hover, .faq-close-btn:hover { background:rgba(255,255,255,.25); }
.faq-disclaimer-bar { padding:9px 15px; background:#fffbe8; border-bottom:1px solid #fae69e; display:flex; gap:9px; align-items:flex-start; color:#6d591a; font-size:10px; line-height:1.45; }
.faq-disclaimer-bar span { font-weight:800; color:#a17c06; }
.faq-disclaimer-bar p { margin:0; }
.faq-messages { flex:1; padding:16px; overflow-y:auto; background:#fbfdfd; display:flex; flex-direction:column; gap:14px; }
.faq-msg { display:flex; gap:9px; align-items:flex-start; }
.faq-msg-user { flex-direction:row-reverse; }
.faq-msg-avatar { width:26px; height:26px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-size:12px; flex:0 0 auto; }
.faq-msg-content { max-width:82%; padding:11px 14px; border-radius:14px; font-size:11px; line-height:1.55; }
.faq-msg-system .faq-msg-content, .faq-msg-assistant .faq-msg-content { background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:0 3px 8px rgba(6,39,68,.04); }
.faq-msg-user .faq-msg-content { background:var(--navy); color:#fff; border-bottom-right-radius:4px; }
.faq-user-text { margin:0; word-break:break-word; }
.faq-answer-text { margin:0 0 8px; }
.faq-meta-field { margin-top:6px; padding-top:6px; border-top:1px dashed #e3ebec; font-size:9.5px; color:#5e7280; }
.faq-meta-label { color:var(--teal-dark); margin-right:4px; }
.faq-msg-alert { background:#fff5f5!important; border-color:#f5c2c2!important; }
.faq-alert-tag { margin:0 0 7px; color:#c53030; font-weight:800; font-size:10px; }
.faq-quick-prompts { padding:10px 12px; background:#edf6f5; border-radius:12px; }
.faq-quick-title { margin:0 0 8px; font-size:10px; font-weight:800; color:var(--teal-dark); }
.faq-chips { display:flex; flex-wrap:wrap; gap:6px; }
.faq-chip { background:#fff; border:1px solid #c2e2dd; color:var(--navy); padding:5px 9px; border-radius:999px; font-size:9.5px; font-weight:600; text-align:left; transition:border-color .15s,background .15s; }
.faq-chip:hover { border-color:var(--teal); background:#f2faf9; }
.faq-input-form { padding:12px 14px; background:#fff; border-top:1px solid var(--line); display:flex; gap:8px; }
.faq-input-form input { flex:1; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:11px; outline:0; color:var(--navy); }
.faq-input-form input:focus { border-color:var(--teal); }
.faq-submit-btn { background:var(--teal); color:#fff; border:0; padding:0 14px; border-radius:8px; font-size:11px; font-weight:700; transition:background .2s; }
.faq-submit-btn:hover { background:var(--teal-dark); }

@media(max-width:900px){
  .infographic-header { display:block; }
  .infographic-downloads { margin-top:18px; }
  .infographic-meta-grid { grid-template-columns:1fr 1fr; }
  .faq-panel { width:calc(100vw - 32px); right:-8px; bottom:60px; height:560px; }
}
@media(max-width:640px){
  .infographic-section { padding-top:65px; padding-bottom:70px; }
  .infographic-header h2 { font-size:32px; }
  .infographic-downloads { flex-direction:column; width:100%; }
  .infographic-downloads .button { width:100%; justify-content:center; }
  .infographic-preview-frame { max-height:360px; }
  .infographic-meta-grid { grid-template-columns:1fr; }
  .faq-widget { right:16px; bottom:16px; }
  .faq-launcher-label { display:none; }
  .faq-launcher { padding:12px 14px; }
  .faq-panel { width:calc(100vw - 24px); right:-4px; bottom:56px; height:520px; }
}

.faq-panel[hidden] { display:none !important; }

/* FAQ On-Device AI bar and loading styles */
.faq-mode-bar { padding:8px 16px; background:#f0f7f6; border-bottom:1px solid #d9eae7; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:10px; }
.faq-mode-indicator { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.faq-mode-pill { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-weight:700; font-size:9.5px; }
.pill-fast { background:#e1efee; color:var(--teal-dark); }
.pill-ai { background:var(--teal); color:#fff; }
.faq-mode-sub { color:var(--muted); font-size:9px; }
.faq-ai-toggle-btn { background:var(--navy); color:#fff; border:0; border-radius:999px; padding:4px 10px; font-size:9.5px; font-weight:700; cursor:pointer; transition:background .2s,transform .15s; }
.faq-ai-toggle-btn:hover { background:var(--teal-dark); transform:scale(1.02); }
.faq-ai-loading-bar { padding:8px 16px; background:#fff8e6; border-bottom:1px solid #fae69e; display:flex; align-items:center; gap:8px; font-size:10px; color:#856404; }
.faq-loading-spinner { width:12px; height:12px; border:2px solid #856404; border-top-color:transparent; border-radius:50%; animation:faq-spin 0.8s linear infinite; }
@keyframes faq-spin { to { transform:rotate(360deg); } }
.faq-source-anchor { color:var(--teal-dark); font-weight:700; text-decoration:none; margin-left:2px; }
.faq-source-anchor:hover { text-decoration:underline; }

/* Language toggle switcher pill */
.language-toggle {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.language-toggle:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--teal);
}
.language-toggle .lang-pill {
  opacity: 0.65;
  transition: opacity 0.2s, color 0.2s;
}
.language-toggle .lang-pill.active {
  opacity: 1;
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.language-toggle .lang-sep {
  opacity: 0.4;
  font-size: 9px;
}
.mobile-language-toggle {
  width: 100%;
  margin-top: 12px;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}