:root {
  --sg-base: #08090D;
  --sg-surface: #12131A;
  --sg-violet: #7C5CFF;
  --sg-cyan: #22D3EE;
  --sg-magenta: #F472B6;
  --sg-glass-bg: rgba(255,255,255,0.06);
  --sg-glass-border: rgba(255,255,255,0.12);
  --sg-text-primary: rgba(255,255,255,0.92);
  --sg-text-secondary: rgba(255,255,255,0.60);
  --sg-text-muted: rgba(255,255,255,0.36);
  --side-pad: clamp(20px,5vw,64px);
  --max-w: 1120px;
  --ease-emerge: cubic-bezier(.22,.61,.36,1);
  --ease-out-expo: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.2,.8,.2,1);
  --dur-hover: .18s; --dur-state: .24s; --dur-reveal: .72s;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
.nav-hamburger{display:none}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--sg-base);color:var(--sg-text-primary);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── Canvas ── */
#shader-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 var(--side-pad);height:52px;background:rgba(8,9,13,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--sg-glass-border)}
.nav-logo{font-weight:700;font-size:16px;color:#fff;text-decoration:none;letter-spacing:2px;text-transform:uppercase}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--sg-text-secondary);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:#fff}

/* ── Section ── */
.sec{position:relative;z-index:1;padding:28px var(--side-pad)}
.sec-inner{max-width:var(--max-w);width:100%;margin:0 auto}
.sec-label{font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--sg-violet);margin-bottom:12px}
.sec-title{font-weight:700;font-size:clamp(24px,3vw,36px);color:#fff;line-height:1.2;margin-bottom:16px}
.sec-text{font-size:14px;color:var(--sg-text-secondary);line-height:1.8;margin-bottom:12px}
.sec-text-sm{font-size:13px;color:var(--sg-text-secondary);line-height:1.8;margin-bottom:12px}

/* ── Hero ── */
.hero{padding:56px var(--side-pad) 88px;text-align:center;position:relative;min-height:min(88vh,700px);display:flex;align-items:center}
.hero-inner{max-width:720px;margin:0 auto}
.hero-brand{font-weight:700;font-size:clamp(48px,9vw,100px);letter-spacing:6px;text-transform:uppercase;color:#fff;line-height:1;margin-bottom:12px;opacity:0;transform:translateY(20px);animation:up .6s ease forwards .1s}
.hero-brand .dv{color:var(--sg-violet)}
.hero-cn{font-size:clamp(15px,2.2vw,20px);font-weight:600;letter-spacing:3px;color:var(--sg-text-primary);margin-bottom:24px;opacity:0;animation:up .5s ease forwards .2s}
.hero-desc{font-size:14px;color:var(--sg-text-secondary);max-width:500px;line-height:1.8;margin:0 auto 20px;opacity:0;animation:up .5s ease forwards .3s}
.hero-cta{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:12px 28px;background:var(--sg-violet);color:#fff;border:none;border-radius:8px;text-decoration:none;transition:color var(--dur-hover),background-color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover),box-shadow var(--dur-hover);box-shadow:0 2px 16px rgba(124,92,255,0.3);opacity:0;animation:up .5s ease forwards .4s}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(124,92,255,0.4)}
.hero-ctas{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;opacity:0;animation:up .5s ease forwards .4s}
.hero-ctas .hero-cta{opacity:1;animation:none}
.hero-cta-ghost{background:transparent;border:1px solid var(--sg-glass-border);color:var(--sg-text-secondary);box-shadow:none}
.hero-cta-ghost:hover{transform:translateY(-1px);color:#fff;border-color:var(--sg-violet);box-shadow:none}
.hero-metrics{display:flex;justify-content:center;gap:40px;margin-top:24px;opacity:0;animation:up .5s ease forwards .5s}
.hero-metric .val{font-weight:700;font-size:24px;color:#fff}
.hero-metric .lbl{font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--sg-text-muted);margin-top:2px}
@keyframes up{to{opacity:1;transform:translateY(0)}}

/* ── About ── */
.about-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-card{background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:10px;padding:18px;transition:background-color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover),box-shadow var(--dur-hover)}
.stat-card:hover{background:rgba(255,255,255,0.07);transform:translateY(-2px);box-shadow:0 4px 20px rgba(124,92,255,0.06)}
.stat-val{font-weight:700;font-size:28px;color:#fff;line-height:1}
.stat-lbl{font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--sg-text-muted);margin-top:4px;display:block}

/* ── Capabilities ── */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.cap-card{background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:10px;padding:20px;text-align:left;transition:background-color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover),box-shadow var(--dur-hover)}
.cap-card:hover{background:rgba(255,255,255,0.09);transform:translateY(-1px)}
.cap-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(124,92,255,0.1);border-radius:8px;color:var(--sg-violet);margin-bottom:12px}
.cap-card h3{font-weight:600;font-size:14px;color:#fff;margin-bottom:6px}
.cap-card p{font-size:12px;color:var(--sg-text-secondary);line-height:1.5}

/* ── Categories ── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.cat-card{background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:10px;padding:20px 16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;text-align:left;transition:background-color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover),box-shadow var(--dur-hover);position:relative;overflow:hidden}
.cat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cat-accent,var(--sg-violet));opacity:0;transition:opacity .3s}
.cat-card::after{content:'';position:absolute;inset:0;border-radius:10px;opacity:0;transition:opacity .3s;background:radial-gradient(circle at 50% 0%,var(--cat-accent,rgba(124,92,255,0.15)),transparent 60%)}
.cat-card:hover{background:rgba(255,255,255,0.09);transform:translateY(-3px);border-color:rgba(255,255,255,0.16);box-shadow:0 8px 40px rgba(0,0,0,0.3)}
.cat-card:hover::before{opacity:1}
.cat-card:hover::after{opacity:1}
.cat-card[data-c="sugar"]{--cat-accent:#ffcc00}
.cat-card[data-c="phospho"]{--cat-accent:var(--sg-cyan)}
.cat-card[data-c="small"]{--cat-accent:var(--sg-magenta)}
.cat-card[data-c="pep"]{--cat-accent:#F472B6}
.cat-card[data-c="compound"]{--cat-accent:#34D399}
.cat-card[data-c="polyphenol"]{--cat-accent:#FB923C}
.cat-num{font-size:9px;font-weight:500;letter-spacing:2px;color:var(--sg-text-muted);margin-bottom:10px}
.cat-card h3{font-weight:600;font-size:15px;color:#fff;line-height:1.3;margin-bottom:4px}
.cat-en{font-size:11px;color:var(--sg-text-muted);margin-bottom:10px}
.cat-desc{font-size:12px;color:var(--sg-text-secondary);line-height:1.5;margin-top:auto}
.cat-icon{width:48px;height:48px;margin-bottom:14px;opacity:.8}

/* ── Product Detail ── */
.prod-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prod-dot{width:6px;height:6px;border-radius:2px;flex-shrink:0}
.prod-head h2{font-weight:700;font-size:20px;color:#fff}
.prod-tag{font-size:9px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border:1px solid var(--sg-glass-border);border-radius:4px;color:var(--sg-text-muted)}
.prod-desc{font-size:13px;color:var(--sg-text-secondary);line-height:1.7;margin-bottom:16px;max-width:600px}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.prod-item{padding:14px 16px;background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:8px;transition:background-color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover);position:relative;overflow:hidden}
.prod-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sg-violet);opacity:0;transition:opacity .3s}
.prod-item:hover{background:rgba(255,255,255,0.09);transform:translateX(3px);border-color:rgba(124,92,255,0.15)}
.prod-item:hover::before{opacity:1}
.prod-item .name{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px;display:flex;align-items:center;gap:8px}
.prod-item .prod-icon{width:18px;height:18px;flex-shrink:0;opacity:.7}
.prod-item .en{font-size:10px;color:var(--sg-text-muted);margin-bottom:4px}
.prod-item .info{font-size:12px;color:var(--sg-text-secondary);line-height:1.5}
.prod-item .spec{font-size:10px;color:var(--sg-text-muted);margin-top:4px;letter-spacing:0.3px}
.prod-item .badge{display:inline-block;font-size:8px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-top:4px}
.badge-novel{background:rgba(251,146,60,0.15);color:#FB923C}
.badge-medicinal{background:rgba(52,211,153,0.15);color:#34D399}
.badge-fda{background:rgba(34,211,238,0.15);color:var(--sg-cyan)}

/* Product colors */
.pg-sugar .prod-dot{background:#ffcc00}.pg-sugar .prod-tag{color:#ffcc00;border-color:rgba(255,204,0,0.2)}
.pg-phospho .prod-dot{background:var(--sg-cyan)}.pg-phospho .prod-tag{color:var(--sg-cyan);border-color:rgba(34,211,238,0.2)}
.pg-small .prod-dot{background:var(--sg-magenta)}.pg-small .prod-tag{color:var(--sg-magenta);border-color:rgba(244,114,182,0.2)}
.pg-pep .prod-dot{background:#F472B6}.pg-pep .prod-tag{color:#F472B6;border-color:rgba(244,114,182,0.2)}
.pg-compound .prod-dot{background:#34D399}.pg-compound .prod-tag{color:#34D399;border-color:rgba(52,211,153,0.2)}
.pg-polyphenol .prod-dot{background:#FB923C}.pg-polyphenol .prod-tag{color:#FB923C;border-color:rgba(251,146,60,0.2)}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:32px}
.contact-brand .logo{font-weight:700;font-size:20px;color:#fff;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.contact-brand p{font-size:13px;color:var(--sg-text-secondary);line-height:1.7;margin-bottom:8px}
.contact-col h4{font-weight:600;font-size:10px;color:var(--sg-text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:2px}
.contact-col a,.contact-col p{display:block;font-size:13px;color:var(--sg-text-secondary);text-decoration:none;margin-bottom:8px;transition:color .2s}
.contact-col a:hover{color:var(--sg-violet)}
.app-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px}
.app-tag{font-size:10px;font-weight:500;padding:5px 12px;background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:6px;color:var(--sg-text-secondary);transition:color var(--dur-hover),background-color var(--dur-hover),border-color var(--dur-hover)}
.app-tag:hover{background:rgba(124,92,255,0.1);color:#fff}
.contact-bottom{padding-top:16px;border-top:1px solid var(--sg-glass-border);display:flex;justify-content:space-between;font-size:10px;color:var(--sg-text-muted)}
.contact-bottom a{color:var(--sg-text-muted);text-decoration:none;transition:color .2s}
.contact-bottom a:hover{color:var(--sg-violet)}

/* ── Inquiry Form ── */
.inquiry-form{margin-top:32px;padding:28px;background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:12px}
.inquiry-form h4{font-weight:600;font-size:14px;color:#fff;margin-bottom:4px}
.inquiry-form .form-sub{font-size:12px;color:var(--sg-text-muted);margin-bottom:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--sg-text-muted);margin-bottom:6px}
.form-group input,.form-group textarea,.form-group select{background:rgba(255,255,255,0.04);border:1px solid var(--sg-glass-border);border-radius:8px;padding:10px 14px;font-size:13px;color:#fff;font-family:inherit;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--sg-violet)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.form-checks{display:flex;flex-wrap:wrap;gap:8px}
.form-check{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--sg-glass-border);border-radius:6px;font-size:12px;color:var(--sg-text-secondary);cursor:pointer;transition:color var(--dur-hover),background-color var(--dur-hover),border-color var(--dur-hover);user-select:none}
.form-check:hover{border-color:rgba(124,92,255,0.3);color:#fff}
.form-check.active{background:rgba(124,92,255,0.12);border-color:var(--sg-violet);color:#fff}
.form-check input{display:none}
.form-submit{margin-top:20px;display:flex;align-items:center;gap:12px}
.form-submit .cta-btn{border:none;cursor:pointer;font-family:inherit}
.form-note{font-size:11px;color:var(--sg-text-muted);line-height:1.5}
.cta-btn{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:12px 24px;background:var(--sg-violet);color:#fff;border-radius:8px;text-decoration:none;transition:color var(--dur-hover),background-color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover),box-shadow var(--dur-hover);box-shadow:0 2px 16px rgba(124,92,255,0.3)}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(124,92,255,0.45)}
.cta-btn:active{transform:scale(0.97)}

.sec:nth-child(odd)::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(124,92,255,0.03),transparent);pointer-events:none;z-index:-1}
.sec:nth-child(even)::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 80% 50%,rgba(34,211,238,0.025),transparent);pointer-events:none;z-index:-1}
/* ── Soft section seams (out-of-flow glow, zero height cost) ── */
.seam{position:relative;height:1px;margin:0;background:none}
.seam::before{content:"";position:absolute;inset:-48px 0;pointer-events:none;
  background:radial-gradient(120% 100% at 30% 50%,rgba(124,92,255,.05),transparent 60%),
             radial-gradient(120% 100% at 70% 50%,rgba(34,211,238,.04),transparent 60%)}
/* ── Divider (sister pages keep their hard dividers) ── */
.divider{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--sg-violet),var(--sg-cyan),transparent);margin:0;opacity:.3}

/* ── Scroll Animations ── */
.anim{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1);
  transition-delay:calc(var(--i,0)*80ms);
}
.anim.in{opacity:1;transform:translateY(0)}

/* ── Reduced motion: every animated element at its final state ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-scroll-cue svg,img.kb{animation:none!important}
  .anim,.anim-left,.anim-right,.anim-scale-up,.anim-band{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .hero-parallax{opacity:1!important;transform:none!important}
  .ix-viz .ix-bar-fill{transition:none!important;transform:scaleX(var(--r,1))!important}
  .floating-cta,.scroll-rail-indicator{transition:none!important}
  .how-step::after{transition:none!important;opacity:1!important;transform:scaleX(1)!important}
}
.anim-scale{opacity:0;transform:scale(0.96);transition:opacity .5s ease,transform .5s ease}
.anim-scale.in{opacity:1;transform:scale(1)}
.anim-left{opacity:0;transform:translateX(-30px);transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i,0)*80ms)}
.anim-left.in{opacity:1;transform:translateX(0)}
.anim-right{opacity:0;transform:translateX(30px);transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i,0)*80ms)}
.anim-right.in{opacity:1;transform:translateX(0)}
.anim-scale-up{opacity:0;transform:scale(0.85);transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i,0)*80ms)}
.anim-scale-up.in{opacity:1;transform:scale(1)}
/* blur-emerge headings (section titles + application-band h3) */
.anim.anim-blur{opacity:0;transform:translateY(10px);filter:blur(4px);
  transition:opacity .72s var(--ease-emerge),transform .72s var(--ease-emerge),filter .72s var(--ease-emerge)}
.anim.anim-blur.in{opacity:1;transform:none;filter:blur(0)}
/* full-bleed band images: slow settle reveal */
.anim-band{opacity:0;transform:scale(1.04);
  transition:opacity .8s var(--ease-emerge),transform .8s var(--ease-emerge)}
.anim-band.in{opacity:1;transform:scale(1)}

/* ── Nav Scroll State ── */
.nav.scrolled{
  background:rgba(8,9,13,0.97);
  box-shadow:0 2px 24px rgba(0,0,0,0.4);
  height:48px;
}

/* ── Enhanced Card Hover ── */
.cap-card{background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:10px;padding:20px;text-align:left;transition:background-color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover),box-shadow var(--dur-hover);position:relative;overflow:hidden}
.cap-card::before{content:'';position:absolute;inset:0;border-radius:10px;opacity:0;transition:opacity .3s;background:radial-gradient(circle at 50% 0%,rgba(124,92,255,0.12),transparent 70%)}
.cap-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sg-violet);opacity:0;transition:opacity .3s}
.cap-card:hover{background:rgba(255,255,255,0.09);transform:translateY(-3px);border-color:rgba(124,92,255,0.2);box-shadow:0 8px 32px rgba(124,92,255,0.08)}
.cap-card:hover::before,.cap-card:hover::after{opacity:1}

.how-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:28px;
  position:relative
}
.how-grid>div{position:relative}
.how-step:not(:last-child)::after{
  content:'';
  position:absolute;
  top:calc(50% - 1px);
  right:-10px;
  width:20px;
  height:2px;
  background:linear-gradient(90deg,var(--sg-violet),var(--sg-cyan));
  opacity:0;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out-expo),opacity .18s ease-out;
  transition-delay:calc(var(--i,0)*90ms + 120ms)
}
.how-grid.in .how-step::after{opacity:1;transform:scaleX(1)}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.case-card{padding:24px;background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:10px}
.case-card .case-label{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.case-card h3{font-size:15px;font-weight:600;color:#fff;margin-bottom:12px;line-height:1.4}
.case-step{margin-bottom:10px}
.case-step-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--sg-text-muted);margin-bottom:3px}
.case-step-text{font-size:13px;color:var(--sg-text-secondary);line-height:1.6}
.case-result{margin-top:12px;padding-top:12px;border-top:1px solid var(--sg-glass-border)}
.case-result .case-step-label{color:#34D399}
.case-result .case-step-text{color:#fff;font-weight:500}
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── Index Tags ── */
/* ingredient index jump menus (选单跳转) */
.idx-jump{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.idx-jump-label{font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--sg-text-muted)}
.idx-select{appearance:none;-webkit-appearance:none;min-width:240px;padding:10px 38px 10px 14px;background-color:var(--sg-glass-bg);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a6a6a6' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;border:1px solid var(--sg-glass-border);border-radius:8px;font-size:12px;font-weight:500;color:var(--sg-text-secondary);cursor:pointer;transition:color var(--dur-hover),background-color var(--dur-hover),border-color var(--dur-hover);font-family:inherit}
.idx-select:hover{border-color:rgba(124,92,255,0.3);color:#fff}
.idx-select:focus{outline:none;border-color:var(--sg-violet);color:#fff}
.idx-select option,.idx-select optgroup{background:var(--sg-surface);color:var(--sg-text-secondary)}
.idx-select optgroup{font-weight:600}

/* ── Mobile Topic Nav ── */
.mobile-topic-nav{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:200;display:none;flex-direction:column;gap:6px;align-items:flex-end}
.mobile-topic-nav a{display:flex;align-items:center;gap:4px;text-decoration:none;font-size:9px;font-weight:500;letter-spacing:0.5px;color:rgba(255,255,255,0.18);transition:color var(--dur-hover);white-space:nowrap}
.mobile-topic-nav a:hover{color:rgba(255,255,255,0.4)}
.mobile-topic-nav a.active{color:var(--sg-violet)}
.mobile-topic-nav .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--sg-text-muted);transition:background-color var(--dur-hover),border-color var(--dur-hover);flex-shrink:0}
.mobile-topic-nav a:hover .dot,.mobile-topic-nav a.active .dot{border-color:var(--sg-violet);background:var(--sg-violet)}

/* ── Responsive ── */
@media(max-width:1024px){
  .about-inner{grid-template-columns:1fr;gap:32px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .index-grid{grid-template-columns:repeat(2,1fr)}
  .func-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:768px){
  /* ── Mobile Typography (16px base for readability) ── */
  body{font-size:16px;line-height:1.7}
  
  /* ── Nav Mobile ── */
  .nav{height:56px;padding:0 16px}
  .nav-logo{font-size:18px}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:56px;
    left:0;
    right:0;
    background:rgba(8,9,13,0.98);
    backdrop-filter:blur(20px);
    padding:16px;
    gap:0;
    border-bottom:1px solid var(--sg-glass-border)
  }
  .nav-links.open li{padding:0}
  .nav-links.open a{
    display:block;
    padding:14px 16px;
    font-size:15px;
    letter-spacing:0.5px;
    border-radius:8px;
    transition:background .2s
  }
  .nav-links.open a:hover{background:rgba(255,255,255,0.06)}
  .nav-hamburger{
    display:flex;
    padding:8px;
    min-width:44px;
    min-height:44px;
    align-items:center;
    justify-content:center
  }
  .nav-hamburger span{width:20px;height:2px}
  
  /* ── Side Padding ── */
  :root{--side-pad:20px}
  
  /* ── Sections Mobile ── */
  .sec{padding:20px var(--side-pad)}
  .sec-label{font-size:12px;letter-spacing:2px;margin-bottom:10px}
  .sec-title{font-size:clamp(22px,6vw,28px);line-height:1.3;margin-bottom:14px}
  .sec-text{font-size:15px;line-height:1.8;margin-bottom:14px}
  
  /* ── Hero Mobile ── */
  .hero{padding:72px var(--side-pad) 88px;text-align:center}
  .hero-brand{font-size:clamp(40px,12vw,56px);letter-spacing:4px;margin-bottom:8px}
  .hero-cn{font-size:15px;letter-spacing:2px;margin-bottom:20px}
  .hero-desc{font-size:15px;line-height:1.8;margin:0 auto 24px;max-width:100%}
  .hero-points{
    flex-direction:column;
    gap:16px;
    margin-bottom:24px;
    align-items:center
  }
  .hero-points>div{font-size:14px}
  .hero-cta{
    font-size:14px;
    padding:14px 32px;
    min-height:48px
  }
  .hero-metrics{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-top:32px
  }
  .hero-metric .val{font-size:28px}
  .hero-metric .lbl{font-size:11px;margin-top:4px}
  
  /* ── About Mobile ── */
  .about-inner{grid-template-columns:1fr;gap:32px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:16px}
  .stat-val{font-size:32px}
  .stat-lbl{font-size:11px;margin-top:6px}
  
  /* ── Capabilities Mobile ── */
  .cap-grid{grid-template-columns:1fr;gap:12px}
  .cap-card{padding:18px}
  .cap-icon{width:36px;height:36px;margin-bottom:10px}
  .cap-card h3{font-size:15px;margin-bottom:8px}
  .cap-card p{font-size:14px;line-height:1.6}
  
  /* ── Categories Mobile ── */
  .cat-grid{grid-template-columns:1fr;gap:12px}
  .cat-card{padding:18px 16px}
  .cat-num{font-size:10px;margin-bottom:8px}
  .cat-card h3{font-size:16px;margin-bottom:6px}
  .cat-en{font-size:12px;margin-bottom:8px}
  .cat-desc{font-size:14px;line-height:1.6}
  
  /* ── Product Detail Mobile ── */
  .prod-head{gap:8px;margin-bottom:12px}
  .prod-head h2{font-size:22px}
  .prod-tag{font-size:10px;padding:4px 10px}
  .prod-desc{font-size:14px;line-height:1.8;margin-bottom:16px}
  .prod-grid{grid-template-columns:1fr;gap:10px}
  .prod-item{padding:16px}
  .prod-item .name{font-size:15px;margin-bottom:4px}
  .prod-item .en{font-size:11px;margin-bottom:6px}
  .prod-item .info{font-size:13px;line-height:1.6}
  .prod-item .spec{font-size:11px;margin-top:6px}
  .prod-item .badge{font-size:9px;padding:3px 8px;margin-top:6px}
  
  /* ── How Grid Mobile ── */
  .how-grid{grid-template-columns:1fr;gap:12px}
  .how-step:not(:last-child)::after{display:none}
  .case-grid{grid-template-columns:1fr;gap:12px}
  .index-grid{grid-template-columns:1fr;gap:12px}
  .func-grid{grid-template-columns:1fr;gap:12px}
  
  /* ── Index Jump Menus Mobile ── */
  .idx-jump{gap:10px}
  .idx-select{
    width:100%;
    min-width:0;
    padding:12px 38px 12px 14px;
    font-size:13px;
    min-height:44px
  }
  
  /* ── Contact Mobile ── */
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .contact-brand .logo{font-size:22px;margin-bottom:14px}
  .contact-brand p{font-size:14px;line-height:1.8;margin-bottom:10px}
  .contact-col h4{font-size:11px;margin-bottom:14px}
  .contact-col a,.contact-col p{font-size:14px;margin-bottom:10px;min-height:44px;display:flex;align-items:center}
  .app-tags{gap:8px;margin-bottom:24px}
  .app-tag{font-size:12px;padding:8px 14px;min-height:44px}
  .contact-bottom{flex-direction:column;gap:8px;text-align:center;font-size:11px}
  .cta-btn{font-size:14px;padding:14px 28px;min-height:48px}
  .inquiry-form{padding:20px}
  .form-row{grid-template-columns:1fr}
  .form-checks{gap:8px}
  .form-check{min-height:44px;font-size:13px}
  
  /* ── Mobile Topic Nav ── */
  .mobile-topic-nav{
    display:flex;
    right:12px;
    gap:8px
  }
  .mobile-topic-nav a{font-size:10px;padding:4px 0}
  .mobile-topic-nav .dot{width:10px;height:10px}
  
  /* ── Animations Mobile (faster) ── */
  .anim{transition-duration:.4s}
  .anim.in{opacity:1;transform:none}
  /* 初始横向位移在窄屏会把 stat-card 顶出视口(385>375 横向滚动),移动端改纵向入场 */
  .anim-left,.anim-right{transform:translateY(20px)}
}

/* nav dropdown */
.nav-drop { position: relative; }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 190px;
  background: var(--sg-surface); border: 1px solid var(--sg-glass-border); border-radius: 10px;
  padding: 8px; z-index: 60; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: block; }
.nav-menu a { display: block; padding: 8px 12px; font-size: 13px; color: var(--sg-text-secondary);
  border-radius: 6px; white-space: nowrap; }
.nav-menu a:hover { color: var(--sg-text-primary); background: var(--sg-glass-bg); }
@media (max-width: 768px) {
  .nav-menu { position: static; display: block; border: none; background: none; padding: 0 0 0 16px; }
}

/* client segment chips */
.seg-chips{display:flex;flex-wrap:wrap;gap:10px}
.seg-chips span{display:inline-block;font-size:12px;color:var(--sg-text-secondary);padding:8px 14px;border:1px solid var(--sg-glass-border);border-radius:8px;background:var(--sg-glass-bg)}


/* category cards with imagery */
.cat-card{padding-top:0}
.cat-card img{width:100%;height:130px;object-fit:cover;display:block;
  border-radius:10px 10px 0 0;filter:brightness(0.85) saturate(0.92);transition:filter .25s}
.cat-card:hover img{filter:brightness(1.05) saturate(1)}
.cat-num{padding-top:16px}

/* merged services: two blocks inside one #services section */
#services .sec-inner + .sec-inner{margin-top:44px}

/* application bands */
.app-band { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  max-width: 1280px; margin: 0 auto 24px; }
.app-band.reverse .app-band-img { order: 2; }
.app-band-img { position: relative; overflow: hidden; }
.app-band-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
/* 图文融合: 冷紫轻罩 + 两侧边缘渐隐, 让照片融进玻璃面板 */
.app-band-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: rgba(70,58,130,0.08);
  background-image: linear-gradient(90deg, rgba(8,9,13,0.45), rgba(8,9,13,0) 25%, rgba(8,9,13,0) 75%, rgba(8,9,13,0.45)); }
.app-band-text { padding: clamp(24px, 4vw, 56px); background: var(--sg-surface);
  border: 1px solid var(--sg-glass-border); border-left: none; }
.app-band.reverse .app-band-text { border-left: 1px solid var(--sg-glass-border); border-right: none; }
.app-band-text h3 { font-size: 20px; margin-bottom: 12px; }
.app-band-text p { font-size: 13px; color: var(--sg-text-secondary); line-height: 1.7; margin-bottom: 16px; }
.app-chips a { display: inline-block; font-size: 11px; color: var(--sg-text-muted);
  padding: 5px 10px; border: 1px solid var(--sg-glass-border); border-radius: 6px; margin: 0 8px 8px 0;
  transition: color var(--dur-hover) var(--ease-out-expo), background-color var(--dur-hover) var(--ease-out-expo),
    border-color var(--dur-hover) var(--ease-out-expo), transform var(--dur-hover) var(--ease-out-expo); }
.app-chips a:hover { border-color: var(--sg-violet); color: #fff; transform: translateY(-1px); }
@media (max-width: 768px) {
  .app-band, .app-band.reverse .app-band-img { grid-template-columns: 1fr; order: 0; }
  .app-band-text { border: 1px solid var(--sg-glass-border); border-top: none; }
}


/* video band */
.video-band { position: relative; height: 60vh; min-height: 380px; max-height: 560px; overflow: hidden; }
.video-band video, .video-band img.kb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-band img.kb { animation: kb 24s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }

/* svh stage variant */
@supports (min-height:100svh){ .hero{min-height:min(88svh,700px)} }

/* ── Hero parallax layer (own transform owner; entrance animations untouched) ── */
.hero-parallax{width:100%;transform:translate3d(0,var(--hero-y,0px),0);opacity:var(--hero-o,1)}

/* ── Hero scroll cue (shine on inner SVG only) ── */
.hero-scroll-cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:44px;min-height:44px;padding:6px 8px;
  background:none;border:none;cursor:pointer;color:var(--sg-text-secondary);font-family:inherit}
.hero-scroll-cue svg{width:18px;height:18px;animation:hintShine 3.2s ease-in-out infinite}
.hero-scroll-cue span{font-size:10px;font-weight:500;letter-spacing:2px}
.hero-scroll-cue:focus-visible{outline:2px solid var(--sg-violet)}
@keyframes hintShine{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}

/* ── Floating quote CTA (constant-size arrow) ── */
.floating-cta{position:fixed;right:24px;bottom:max(24px,env(safe-area-inset-bottom));
  transform:translateY(24px);opacity:0;pointer-events:none;z-index:90;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sg-violet);border-radius:999px;padding:12px 22px;
  font-size:12px;font-weight:600;letter-spacing:1px;color:#fff;text-decoration:none;
  box-shadow:0 4px 24px rgba(124,92,255,.35);
  transition:opacity .25s ease-out,transform .25s var(--ease-spring)}
.floating-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.fcta-arrow{width:18px;opacity:.7;transition:opacity .18s,transform .18s var(--ease-out-expo)}
.floating-cta:hover .fcta-arrow,.floating-cta:focus-visible .fcta-arrow{opacity:1;transform:translateX(2px)}
.floating-cta:focus-visible{outline:2px solid var(--sg-violet);outline-offset:2px}
@media(max-width:768px){.floating-cta{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}}

/* ── Left scroll-progress rail (hidden below 1440px) ── */
.scroll-rail{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:80;display:none;
  opacity:0;pointer-events:none;transition:opacity .25s ease-out}
.scroll-rail.visible{opacity:1;pointer-events:auto}
@media (min-width:1440px){.scroll-rail{display:block}}
.scroll-rail ul{list-style:none}
.scroll-rail a{display:flex;align-items:center;border-left:1px solid var(--sg-glass-border);
  padding:10px 16px 10px 28px;min-height:43px;
  font-size:11px;letter-spacing:1px;color:var(--sg-text-secondary);text-decoration:none;
  transition:color var(--dur-hover)}
.scroll-rail li{border-left:none}
.scroll-rail a span{opacity:0;transform:translateX(-6px);white-space:nowrap;
  transition:opacity .16s,transform .18s var(--ease-out-expo)}
.scroll-rail a:hover span,.scroll-rail a:focus-within span{opacity:1;transform:none}
.scroll-rail li.active a{color:#fff;font-weight:600}
.scroll-rail li.active a span{opacity:1;transform:none}
.scroll-rail-indicator{position:absolute;left:0;width:2px;background:var(--sg-violet);opacity:0;
  transition:top var(--dur-state) var(--ease-spring),height var(--dur-state) var(--ease-spring),opacity .16s}

/* ── Ingredient Explorer (原料矩阵) ── */
.ingredient-explorer{margin-top:28px;background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);border-radius:12px;padding:20px}
.ingredient-explorer>*{min-width:0}
.ix-head{margin-bottom:14px}
.ix-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:2px}
.ix-sub{font-size:12px;color:var(--sg-text-secondary);margin-top:4px}
.ix-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ix-viz{margin-bottom:14px}
.ix-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;transition:opacity .18s}
.ix-bar-row.is-empty{opacity:.35}
.ix-bar-label{width:112px;flex-shrink:0;font-size:11px;color:var(--sg-text-secondary)}
.ix-bar{flex:1;height:8px;background:rgba(255,255,255,0.12);border-radius:4px;overflow:hidden}
.ix-bar-fill{display:block;width:100%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--cat-accent),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .36s var(--ease-out-expo)}
.ix-viz.in .ix-bar-fill{transform:scaleX(var(--r,1))}
.ix-bar-row[data-c="sugar"]{--cat-accent:#ffcc00}
.ix-bar-row[data-c="phospho"]{--cat-accent:var(--sg-cyan)}
.ix-bar-row[data-c="small"]{--cat-accent:var(--sg-magenta)}
.ix-bar-row[data-c="pep"]{--cat-accent:#F472B6}
.ix-bar-row[data-c="compound"]{--cat-accent:#34D399}
.ix-bar-row[data-c="polyphenol"]{--cat-accent:#FB923C}
.ix-filters{margin-bottom:12px}
.ix-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.ix-chip{font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.5px;
  padding:7px 12px;min-height:32px;background:rgba(255,255,255,0.04);border:1px solid var(--sg-glass-border);border-radius:8px;
  color:var(--sg-text-secondary);cursor:pointer;
  transition:color var(--dur-hover),background-color var(--dur-hover),border-color var(--dur-hover)}
.ix-chip:hover{color:#fff;border-color:rgba(124,92,255,0.3)}
.ix-chip[aria-pressed="true"]{background:rgba(124,92,255,.14);border-color:var(--sg-violet);color:#fff}
.ix-chip:focus-visible{outline:2px solid var(--sg-violet);outline-offset:2px}
.ix-item:focus-visible,.scroll-rail a:focus-visible,.app-chips a:focus-visible{outline:2px solid var(--sg-violet);outline-offset:2px}
.ix-results{max-height:224px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.ix-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;margin-bottom:6px;background:rgba(255,255,255,0.04);border:1px solid var(--sg-glass-border);border-radius:8px;
  text-decoration:none;color:inherit;
  transition:background-color var(--dur-hover),border-color var(--dur-hover)}
.ix-item:hover{background:rgba(255,255,255,0.09);border-color:rgba(124,92,255,0.25)}
.ix-item-name{font-size:13px;font-weight:600;color:#fff}
.ix-item-cat{font-size:11px;color:var(--sg-text-muted);flex-shrink:0}
.ix-hint{font-size:12px;color:var(--sg-text-muted);padding:8px 2px}
.ix-empty{font-size:12px;color:var(--sg-text-secondary);padding:8px 2px}
.ix-clear{margin-left:10px}
.ix-foot{margin-top:16px}
@media (min-width:900px){
  .ingredient-explorer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:12px 24px;padding:20px}
  .ix-head,.ix-foot{grid-column:1/-1}
  .ix-viz{grid-column:1;grid-row:2/4}
  .ix-filters,.ix-results{grid-column:2}
  .ingredient-explorer.is-ready .ix-results{height:130px;max-height:130px}
}