/* ===== VEXRATECH site — shared styles (responsive + zoom-safe) ===== */
:root{
  --navy:#0f172a; --navy2:#1e293b; --ink:#0f172a; --slate:#475569;
  --line:#e2e8f0; --bg:#ffffff; --soft:#f8fafc;
  --accent:#3b82f6; --accent-d:#2563eb; --ok:#16a34a;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.wrap{width:100%;max-width:calc(100vw - 76px);margin:0 auto;padding:0 clamp(8px,1vw,14px)}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:15px 32px;border-radius:999px;border:none;cursor:pointer;transition:.2s;font-size:clamp(14px,1.6vw,16px)}
.btn:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn.dark{background:var(--navy)}
.eyebrow{color:var(--accent);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:clamp(11px,1.4vw,13px)}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em}
section{padding:clamp(56px,8vw,88px) 0}
.center{text-align:center}
.lead2{color:var(--slate);font-size:clamp(15px,2vw,18px);max-width:720px;margin:14px auto 0}
.soft{background:var(--soft)}

/* test banner */
/* NAV */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:86px;gap:12px}
.nav .logo{height:clamp(50px,6vw,72px);width:auto}
.nav nav a{margin:0 18px;font-weight:600;font-size:clamp(15px,1.7vw,17px);letter-spacing:.02em;color:#33425c}
.nav nav a:hover{color:var(--accent)}
/* Language switcher */
.lang-switch{display:flex;align-items:center;gap:3px;font-size:13px;color:#64748b;margin-left:4px;white-space:nowrap}
.lang-switch span{cursor:pointer;padding:2px 4px;transition:color .15s}
.lang-switch span:hover{color:#e2e8f0}
.lang-switch .active{color:var(--accent);font-weight:600}
.lang-divider{color:#334155;cursor:default!important}
.lang-divider:hover{color:#334155!important}
@media(max-width:820px){.lang-switch{margin-left:auto}}
@media(max-width:820px){.nav nav{display:none}}

/* HERO — Framework-style: dark minimal, product-first */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:start;color:#fff;overflow:hidden;background-color:#080e18;background-repeat:no-repeat,no-repeat;background-image:linear-gradient(90deg,rgba(8,14,24,.96) 0%,rgba(8,14,24,.94) 38%,rgba(8,14,24,.75) 50%,rgba(16,29,51,.35) 62%,rgba(22,36,63,.08) 75%,rgba(26,45,74,0) 88%),url("/assets/v46/media/hero-main-322c1b63.webp");background-size:cover,cover;background-position:center,right center}
.prod-outline{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(320px,560px) 1fr;gap:clamp(20px,4vw,40px);align-items:start;width:100%;padding-top:0;padding-bottom:40px}
.hero-text{max-width:540px}
.hero h1{font-size:clamp(32px,5.6vw,62px);font-weight:800;margin:0 0 20px;letter-spacing:-.03em;line-height:1.08;color:#f1f5fb}
.hero h1 .accent{color:#6aa8e6}
.hero p.lead{font-size:clamp(16px,2.3vw,19px);color:#b4c2d6;max-width:520px;line-height:1.65}
.hero .cta{margin:22px 0 16px;display:flex;gap:14px;flex-wrap:wrap}
.hero .note{font-size:clamp(12px,1.6vw,13px);color:#64748b;margin-top:8px}
.herofeats span{color:#cbd5e1}
.hero-stats{position:absolute;right:clamp(24px,4vw,52px);left:auto;bottom:7%;width:auto;max-width:none;display:flex;flex-wrap:wrap;gap:0;border:1px solid rgba(255,255,255,.14);border-radius:13px;overflow:hidden;z-index:3;background:rgba(8,14,24,.42);backdrop-filter:blur(6px)}
.hero-stats div{padding:13px 22px;text-align:left;border-right:1px solid rgba(255,255,255,.12);border-bottom:none}
.hero-stats div:last-child{border-right:none}
.hero-stats b{display:block;font-size:clamp(22px,3vw,28px);font-weight:800;color:#e2e8f0;line-height:1.1}
.hero-stats b span{font-size:14px;font-weight:500;color:#94a3b8}
.hero-stats small{display:block;font-size:clamp(11px,1.4vw,12.5px);color:#64748b;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:820px){.hero-stats{position:static;width:100%;margin:26px auto 0}}
@media(max-width:820px){.hero{min-height:auto;padding:60px 0 40px;background-color:#080e18;background-repeat:no-repeat,no-repeat;background-image:linear-gradient(180deg,rgba(8,14,24,.94) 0%,rgba(16,29,51,.85) 55%,rgba(22,36,63,.5) 100%),url("/assets/v46/media/hero-main-322c1b63.webp");background-size:cover,cover;background-position:center,center center}.hero-grid{grid-template-columns:1fr;text-align:center}.hero-text{max-width:100%}.hero p.lead{margin-left:auto;margin-right:auto}.hero .cta{justify-content:center}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.04);border-radius:14px;overflow:hidden;margin-top:30px;border:1px solid rgba(255,255,255,.1)}
.stats div{padding:20px 12px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.stats div:last-child{border-right:none}
.stats b{display:block;font-size:clamp(22px,3.4vw,30px);font-weight:800}
.stats span{font-size:clamp(11px,1.5vw,13px);color:#9fb0cb}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}.stats div:nth-child(2){border-right:none}.stats div:nth-child(1),.stats div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.1)}}

/* feature cards */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,22px);margin-top:clamp(30px,5vw,48px)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,28px);transition:.2s}
.card:hover{box-shadow:0 14px 30px rgba(20,36,63,.08);transform:translateY(-3px)}
.card .ic{width:46px;height:46px;border-radius:10px;background:#eaf2ff;color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:14px}
.card h3{font-size:clamp(17px,2.2vw,19px);margin-bottom:8px}
.card p{color:var(--slate);font-size:15px}
@media(max-width:860px){.feat{grid-template-columns:1fr}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.gallery img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* video placeholder */
.video{background:#0e1a30;border-radius:16px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#9fb0cb;text-align:center;border:1px dashed rgba(255,255,255,.25);margin-top:30px;padding:20px}
.video .play{width:70px;height:70px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px}

/* specs */
.specs{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,40px);align-items:center}
table{width:100%;border-collapse:collapse}
td{padding:13px 4px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
td:first-child{color:var(--slate);width:42%}
td:last-child{font-weight:600}
@media(max-width:820px){.specs{grid-template-columns:1fr}}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(30px,5vw,46px)}
.tier{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px);background:#fff;position:relative}
.tier.best{border:2px solid var(--accent);box-shadow:0 16px 40px rgba(59,130,246,.18)}
.tag{position:absolute;top:-12px;left:24px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:4px 12px;border-radius:20px}
.tier h3{font-size:16px;color:var(--slate)}
.price{font-size:clamp(32px,5vw,40px);font-weight:800;margin:8px 0 2px}
.price small{font-size:15px;color:#9aa6b8;text-decoration:line-through;font-weight:600;margin-left:6px}
.tier ul{list-style:none;margin:16px 0 22px}
.tier li{padding:6px 0 6px 24px;position:relative;color:#3a4659;font-size:14px}
.tier li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}

/* trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.trust div{text-align:center}
.trust b{font-size:clamp(24px,3.6vw,30px);color:var(--navy2);font-weight:800;display:block}
.trust span{color:var(--slate);font-size:14px}
@media(max-width:700px){.trust{grid-template-columns:repeat(2,1fr)}}

/* materials chips */
.mchip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 18px;font-weight:600;font-size:14px;color:#33425c}

/* contact */
.contact{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:28px auto 0;text-align:left}
.contact a{color:var(--accent);font-weight:700}
@media(max-width:640px){.contact{grid-template-columns:1fr}}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{font-weight:700;cursor:pointer;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--accent);font-weight:800}
details[open] summary:after{content:"–"}
details p{color:var(--slate);margin-top:10px;font-size:15px}

/* CTA band */
.band{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;text-align:center;border-radius:20px;padding:clamp(40px,6vw,56px) 24px}
.band h2{font-size:clamp(26px,4.4vw,34px);margin-bottom:10px}
.band p{color:#cdd7e8;margin-bottom:24px}

/* footer */
footer{background:var(--ink);color:#9fb0cb;padding:44px 0;font-size:14px}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:flex-start}
footer .frow img{height:36px;opacity:.95;filter:brightness(0) invert(1)}
footer a{color:#cdd7e8}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:22px;padding-top:18px;font-size:12.5px;line-height:1.7;color:#8090a6}
.placeholder-note{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:13px;padding:10px 16px;border-radius:8px;margin:16px auto 0;max-width:720px;text-align:center}

/* generic section title */
.h2c{font-size:clamp(26px,4.4vw,34px);margin-top:10px}

/* ===== Framework-style scrolling marquee ===== */
.marquee{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.marquee .track{display:inline-block;animation:marq 26s linear infinite;font-weight:800;font-size:clamp(20px,3.4vw,34px);letter-spacing:-.01em}
.marquee .track span{margin:0 26px;color:#fff}
.marquee .track span.o{color:var(--accent)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== alternating feature rows (Framework/Bambu) — contained width, card-style media ===== */
.altrow-wrap{padding:0}
.altrow{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:stretch;min-height:clamp(400px,60vh,620px);margin:clamp(40px,6vw,64px) 0}
.altrow .media{background:var(--soft);background-size:cover;background-position:center;min-height:300px;border-radius:20px;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.altrow .copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:20px}
.altrow.dark .copy{background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:clamp(28px,5vw,56px)}
.altrow.dark .copy .lead2{color:#aeb8c8}
.altrow .copy .eyebrow{margin-bottom:10px}
.altrow .copy h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.02em}
.altrow .copy p{font-size:clamp(15px,1.9vw,18px);color:var(--slate);margin-top:12px;max-width:480px}
.altrow.dark .copy p{color:#aeb8c8}
.altrow ul{list-style:none;margin:16px 0 0}
.altrow li{padding:7px 0 7px 24px;position:relative;font-size:15px}
.altrow li:before{content:"▹";position:absolute;left:0;color:var(--accent);font-weight:800}
.altrow .copy .cta{margin-top:24px}
@media(max-width:860px){.altrow{grid-template-columns:1fr}.altrow .media{order:-1;aspect-ratio:16/10;min-height:0}.altrow.rev .media{order:-1}}

/* ===== newsletter / VIP capture ===== */
.signup{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;text-align:center;padding:clamp(48px,7vw,80px) 24px}
.signup h2{font-size:clamp(26px,4.4vw,40px);font-weight:800}
.signup p{color:#cdd7e8;margin:12px auto 0;max-width:560px}
.signup form{display:flex;gap:10px;max-width:480px;margin:26px auto 0;flex-wrap:wrap;justify-content:center}
.signup input{flex:1;min-width:220px;padding:14px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:15px}
.signup input::placeholder{color:#aebacd}

/* hero feature chips */
.herofeats{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.herofeats span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#dce5f2;border-radius:30px;padding:7px 14px;font-size:clamp(12px,1.6vw,13.5px);font-weight:600}
.herofeats span:before{content:"✓";color:var(--accent);font-weight:800}
@media(max-width:820px){.herofeats{justify-content:center}}

/* split image+text */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.split.rev{grid-template-columns:1fr 1.05fr}
.split img{border-radius:18px;width:100%;box-shadow:0 20px 44px rgba(20,36,63,.14)}
.split h2{font-size:clamp(24px,3.6vw,32px)}
.split ul{list-style:none;margin:18px 0 0}
.split li{padding:8px 0 8px 26px;position:relative;color:#3a4659;font-size:15px}
.split li:before{content:"▹";position:absolute;left:0;color:var(--accent);font-weight:800}
@media(max-width:820px){.split,.split.rev{grid-template-columns:1fr}.split .txt{text-align:center}.split ul{display:inline-block;text-align:left}}

/* color options */
.colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,24px);margin-top:clamp(28px,4vw,40px)}
.colorcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center;transition:.2s}
.colorcard:hover{box-shadow:0 14px 30px rgba(20,36,63,.1);transform:translateY(-3px)}
.colorcard img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--soft)}
.colorcard b{display:block;margin-top:12px;font-size:16px}
.colorcard span{color:var(--slate);font-size:13px}
@media(max-width:760px){.colors{grid-template-columns:1fr}}

/* full-width image bands (bg-band1/2.jpg 槽位：到位即铺满，缺失显示深色) */
.imgband{position:relative;min-height:clamp(340px,46vw,540px);display:flex;align-items:center;color:#fff;text-align:center;background-color:#101d33;background-size:cover;background-position:center;background-attachment:scroll}
.imgband.band1{background-image:url("/assets/v46/media/bg-band1-0783e93f-web-v4.webp")}
.imgband.band2{background-image:url("/assets/v46/media/bg-band2-1d1a7b65.webp")}
.imgband:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,15,28,.55),rgba(8,15,28,.72))}
.imgband .wrap{position:relative;z-index:1}
.imgband .eyebrow{color:#7fb0ff}
.imgband h2{font-size:clamp(28px,5vw,50px);font-weight:800;letter-spacing:-.02em}
.imgband p{color:#e3ebf6;max-width:700px;margin:14px auto 0;font-size:clamp(15px,2.1vw,20px)}
.imgband .cta{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* application grid (app-*.jpg 槽位；缺图=彩色卡,优雅降级) */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.appcard{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(160deg,#1f3a5f,#2c5183);display:flex;align-items:flex-end;color:#fff}
.appcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.appcard span{position:relative;z-index:1;padding:14px 16px;font-weight:700;font-size:15px;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.6))}
@media(max-width:700px){.apps{grid-template-columns:repeat(2,1fr)}}

/* sample wall — fixed 2x2 grid (symmetric, uniform crop, no masonry), fills full section width */
.samplewall{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
.samplewall img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--soft)}

/* sticky buy bar (Bambu/crowdfunding style) */
#buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(20,36,63,.08);transform:translateY(110%);transition:transform .3s ease;padding:12px 0}
#buybar.show{transform:translateY(0)}
#buybar .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#buybar .price b{font-size:18px}
#buybar .strike{color:#9aa6b8;text-decoration:line-through;font-size:14px}
@media(max-width:560px){#buybar .inner{justify-content:center}#buybar .price{font-size:14px}}