/* DEUVtek — homepage styles */
:root{
  --black:#081423; --white:#FFFFFF; --violet:#9B7DFF; --titan:#D7DDE6;
  --blue:#0B2E6B; --cyan:#59F2FF;
  --grey:#C2CCDF; --grey-d:#4A5164;
  --line-w:rgba(255,255,255,.14); --line-b:rgba(0,0,0,.12);
  --disp:'Outfit','Noto Sans TC','Noto Sans JP',sans-serif;
  --sans:'Inter','Noto Sans TC','Noto Sans JP',system-ui,sans-serif;
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--sans);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px;position:relative;z-index:2}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp)}
::selection{background:var(--cyan);color:var(--black)}

/* ===== NAV ===== */
header{position:fixed;top:0;left:0;right:0;z-index:200;transition:.3s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(0,0,0,.9);backdrop-filter:blur(14px);border-color:var(--line-w)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo img{height:26px;display:block;filter:brightness(0) invert(1)}
.menu{display:flex;gap:34px;font-family:var(--disp);font-size:16px;font-weight:400;letter-spacing:.05em}
.menu a{color:var(--grey);padding:8px 0;position:relative;transition:.25s}
.menu a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;background:var(--cyan);transition:.3s}
.menu a:hover{color:var(--white)}
.menu a:hover::after{left:0;right:0}
.nav-right{display:flex;align-items:center;gap:20px}
.langs{font-family:var(--disp);font-size:13.5px;display:flex;gap:2px}
.langs button{all:unset;cursor:pointer;padding:4px 9px;color:var(--grey);border-radius:20px;transition:.2s}
.langs button.on{color:var(--black);background:var(--cyan);font-weight:600}
.langs button:not(.on):hover{color:var(--cyan)}
.btn{font-family:var(--disp);font-size:15.5px;font-weight:500;letter-spacing:.05em;padding:13px 30px;border-radius:999px;transition:.25s;display:inline-block;border:1px solid var(--white);color:var(--white);cursor:pointer}
.btn:hover{background:var(--white);color:var(--black)}
.btn.cy{background:var(--cyan);color:var(--black);border-color:var(--cyan);font-weight:600}
.btn.cy:hover{box-shadow:0 0 40px rgba(89,242,255,.5);transform:translateY(-2px)}
.btn.bkfill{background:var(--black);color:var(--white);border-color:var(--black)}
.btn.bkfill:hover{background:transparent;color:var(--black)}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;padding:150px 0 110px;background:var(--black)}
.hero .glow{position:absolute;width:1300px;height:1300px;border-radius:50%;background:radial-gradient(circle,rgba(11,46,107,.95) 0%,rgba(89,242,255,.16) 45%,transparent 68%);top:-380px;right:-260px;pointer-events:none}
.hero::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(89,242,255,.12) 0%,rgba(11,46,107,.25) 40%,transparent 65%);bottom:-320px;left:-280px;pointer-events:none;animation:pulse 9s ease-in-out infinite}
.kick{font-family:var(--disp);font-size:clamp(20px,1.9vw,24px);font-weight:500;letter-spacing:.22em;color:var(--cyan);margin-bottom:34px}
.hero h1{font-size:clamp(46px,7.2vw,100px);font-weight:500;line-height:1.04;letter-spacing:-.02em;max-width:1120px;color:var(--white)}
.hero h1 .rot{color:var(--cyan);display:inline-block;min-width:.5em;font-weight:700;font-size:calc(1em + 4px)}
.hero .after{margin-top:50px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.hero .lead{font-size:18px;color:var(--grey);max-width:780px}
.hero .lead b{color:var(--white);font-weight:500}

/* ===== MEDIA BAND ===== */
.band{position:relative;height:66vh;min-height:400px;background:var(--blue);overflow:hidden}
.bslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.bslide.show{opacity:1}
.band::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,var(--black) 0%,transparent 16%,transparent 84%,var(--white) 100%)}
.band .tag{position:absolute;left:36px;bottom:56px;z-index:2;font-family:var(--disp);font-size:13px;font-weight:400;letter-spacing:.14em;color:var(--white);background:rgba(0,0,0,.66);border:1px solid var(--line-w);padding:12px 24px;border-radius:999px;backdrop-filter:blur(6px)}
.band .tag b{color:var(--cyan);font-weight:600}

/* ===== MANIFESTO (white) ===== */
.manifesto{padding:90px 0;background:var(--white);color:var(--black);position:relative;overflow:hidden}
.mani-mark{position:absolute;left:4vw;top:50%;transform:translateY(-50%);width:62vw;min-width:520px;opacity:.05;pointer-events:none;z-index:1}
.manifesto h2{font-size:clamp(36px,4.6vw,64px);font-weight:600;letter-spacing:-.015em;line-height:1.16;max-width:1020px;color:var(--black)}
.manifesto h2 b{color:var(--blue);font-weight:600}
.manifesto .loopline{margin-top:34px;font-family:var(--disp);font-size:clamp(16px,1.8vw,22px);font-weight:500;color:var(--blue);letter-spacing:.02em}
.manifesto p{margin-top:26px;max-width:660px;color:var(--grey-d);font-size:17px}
.manifesto p b{color:var(--black);font-weight:500}

/* ===== STATS (blue) ===== */
.stats{background:var(--blue);color:var(--white)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:44px 20px;transition:.25s;text-align:center}
.stat:hover{background:rgba(0,0,0,.18)}
.stat b{display:block;font-family:var(--disp);font-size:clamp(30px,3vw,46px);font-weight:300;color:var(--white);font-variant-numeric:tabular-nums;margin-bottom:6px}
.stat b i{font-style:normal;color:var(--cyan)}
.stat small{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);font-family:var(--disp);font-weight:400}

/* ===== SECTION HEAD ===== */
.shead{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:40px}
.shead .idx{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:.26em;color:var(--cyan);text-transform:uppercase;border-left:3px solid var(--cyan);padding-left:14px;line-height:1.25}
.shead h2{font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.015em;line-height:1.1}

/* ===== PLATFORMS (black) ===== */
.platforms{padding:90px 0 70px;background:linear-gradient(rgba(11,46,107,.82),rgba(8,20,35,.88)),url('images/core-lasertech.jpg') center/cover no-repeat var(--blue)}
.prow{display:grid;grid-template-columns:120px 1.1fr 1fr auto;gap:34px;align-items:center;padding:48px 0;border-top:1px solid var(--line-w);transition:.3s;cursor:pointer}
.prow:last-child{border-bottom:1px solid var(--line-w)}
.prow:hover{background:linear-gradient(90deg,transparent,rgba(8,20,35,.4),transparent)}
.prow .picon{width:76px;height:76px;display:block;opacity:.92;transition:.3s;filter:drop-shadow(0 4px 14px rgba(89,242,255,.12))}
.prow .picon svg{width:100%;height:100%}
.prow:hover .picon{opacity:1;transform:scale(1.05);filter:drop-shadow(0 6px 20px rgba(89,242,255,.3))}
.prow h3{font-size:clamp(26px,2.9vw,36px);font-weight:500;color:var(--white)}
.prow h3 small{display:block;font-size:15px;color:var(--grey);font-weight:400;margin-top:6px;letter-spacing:.04em}
.prow p{font-size:16px;color:var(--grey)}
.prow p b{display:block;margin-top:10px;color:var(--cyan);font-weight:500;font-family:var(--disp);font-size:14px;letter-spacing:.14em}
.prow .go{font-size:24px;color:rgba(255,255,255,.55);transition:.25s;font-family:var(--disp);font-weight:300}
.prow:hover .go{color:var(--cyan);transform:translateX(8px)}

/* ===== APPLICATIONS (white) ===== */
.apps{padding:90px 0;background:var(--white);color:var(--black)}
.apps .shead h2{color:var(--black)}
.apps .idx{color:var(--blue)}
.apps .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.atile{position:relative;border-radius:24px;overflow:hidden;min-height:400px;display:flex;align-items:flex-start;border:1px solid var(--line-b);transition:.3s}
.atile:hover{border-color:var(--cyan);transform:translateY(-5px);box-shadow:0 24px 60px rgba(8,20,50,.3)}
.atile .bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.05) 100%),url('images/app-cpo.jpg') center/cover;transition:.4s}
.atile:nth-child(2) .bg{background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.05) 100%),url('images/app-micropattern.jpg') center/cover}
.atile:nth-child(3) .bg{background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.05) 100%),url('images/app-3dstacking.jpg') center/cover}
.atile:hover .bg{transform:scale(1.05)}
.atile .in{position:relative;z-index:2;padding:32px}
.atile .cat{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;display:block;margin-bottom:12px}
.atile h3{font-size:27px;font-weight:500;margin-bottom:10px;color:var(--white)}
.atile p{font-size:16px;color:var(--grey)}
.atile .go2{font-family:var(--disp);font-size:14.5px;font-weight:500;letter-spacing:.08em;color:var(--white);margin-top:16px;display:inline-block;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:.25s}
.atile:hover .go2{color:var(--cyan);border-color:var(--cyan)}

/* ===== PRODUCTS (black) ===== */
.modes{padding:90px 0;background:var(--black)}
.modes .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:46px}
.mode{border:1px solid var(--line-w);border-radius:24px;padding:40px 34px 34px;background:rgba(255,255,255,.04);transition:.3s;display:flex;flex-direction:column}
.pimg{margin-top:auto;border-radius:14px;overflow:hidden;border:1px solid var(--line-w)}
.pimg img{width:100%;display:block;transition:.4s}
.mode:hover .pimg img{transform:scale(1.03)}
.mode:hover{border-color:var(--cyan);transform:translateY(-5px);box-shadow:0 24px 50px rgba(89,242,255,.12)}
.mode .step{font-family:var(--disp);font-size:clamp(30px,3vw,44px);font-weight:200;color:#8794B5;display:block;line-height:1}
.mode h3{font-size:25px;font-weight:600;margin:18px 0 4px;color:var(--white)}
.mode .zh{font-family:var(--disp);font-size:15px;color:var(--grey);margin-bottom:12px}
.mode p{font-size:16px;color:var(--grey);padding-bottom:28px}

/* ===== ABOUT (white, quotes) ===== */
.about{padding:90px 0;background:linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.8)),url('images/about-fab.jpg') center/cover no-repeat var(--white);color:var(--black);position:relative;overflow:hidden}
.about .idx{color:var(--blue)}
.about .shead h2{color:var(--black)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px}
.qcard{border:1.5px solid var(--line-b);border-radius:24px;padding:44px 40px;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);transition:.3s;display:flex;flex-direction:column;justify-content:space-between}
.qcard:hover{border-color:var(--blue);transform:translateY(-5px);box-shadow:0 24px 50px rgba(11,46,107,.18)}
.qcard .qm{font-family:var(--disp);font-size:64px;font-weight:200;color:var(--cyan);line-height:.6;margin-bottom:22px}
.qcard blockquote{font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);font-weight:400;line-height:1.5;color:var(--black)}
.qcard blockquote b{color:var(--blue);font-weight:600}
.qcard .who{margin-top:30px;display:flex;align-items:center;gap:16px}
.qcard .ava{width:52px;height:52px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;color:#fff;font-size:17px;flex-shrink:0}
.qcard .who .nm{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--black)}
.qcard .who .ti{font-size:14.5px;color:var(--grey-d)}

/* ===== SUSTAINABILITY (blue) ===== */
.esg{padding:90px 0;background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.55)),url('images/esg-wafer.jpg') center/cover no-repeat var(--white);color:var(--blue);position:relative;overflow:hidden}
.esg .idx{color:var(--blue);border-left-color:var(--blue)}
.esg-tag{font-family:var(--disp);font-size:clamp(36px,4.6vw,64px);font-weight:600;letter-spacing:-.015em;line-height:1.14;max-width:900px}
.esg-tag b{color:#0E8F96;font-weight:600}
.esg .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.pillar{border:1.5px solid rgba(11,46,107,.15);border-radius:24px;padding:36px 32px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);transition:.3s}
.pillar:hover{background:rgba(255,255,255,.9);border-color:var(--blue);transform:translateY(-5px)}
.pillar .pn{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:.3em;color:#0E8F96;text-transform:uppercase}
.pillar h3{font-size:24px;font-weight:600;margin:14px 0 8px;color:var(--blue)}
.pillar p{font-size:16px;color:#33415E}

/* ===== CONTACT (cyan, form) ===== */
.contact{padding:85px 0;background:var(--black);color:var(--white);position:relative;overflow:hidden}
.cta-mark{position:absolute;right:-12vw;top:50%;transform:translateY(-50%);width:60vw;min-width:500px;opacity:.06;filter:brightness(0) invert(1);pointer-events:none}
.contact .cwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.contact h2{font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.contact .sub2{color:rgba(255,255,255,.82);margin-top:22px;font-size:16px;max-width:420px;font-weight:400}
.contact .mini{margin-top:34px;font-size:16px;color:rgba(255,255,255,.85);font-weight:400;line-height:1.8}
.contact .mini .cyname{color:var(--cyan);font-weight:600}
.contact .mini .offc{color:#FFFFFF;font-weight:700}
.contact .mini b{font-weight:600}
form.cform{background:var(--white);border-radius:24px;padding:42px 40px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fg{margin-bottom:18px}
.fg label{display:block;font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-d);margin-bottom:8px}
.fg input,.fg select,.fg textarea{width:100%;border:1.5px solid var(--line-b);border-radius:12px;padding:13px 16px;font-family:var(--sans);font-size:16px;color:var(--black);background:#FAFBFD;outline:none;transition:.2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(89,242,255,.45)}
.fg textarea{min-height:120px;resize:vertical}
form.cform .btn{width:100%;text-align:center;background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;font-size:16px}
form.cform .btn:hover{background:var(--black);border-color:var(--black);box-shadow:0 0 26px rgba(89,242,255,.55)}
.fnote{font-size:13.5px;color:var(--grey-d);margin-top:14px;text-align:center}

/* ===== FOOTER (black, giant logo) ===== */
footer{background:var(--black);padding:65px 0 0;border-top:1px solid var(--line-w)}
.f1{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:56px;padding-bottom:56px}
.fbrand .flogo{height:30px;display:block;filter:brightness(0) invert(1);margin-bottom:18px}
.f1 .tagline{font-size:16px;color:var(--titan);max-width:280px;line-height:1.7;letter-spacing:.03em}
.f1 h5{font-family:var(--disp);font-size:13.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.f1 a{display:block;font-size:16px;color:var(--titan);margin-bottom:13px;transition:.2s;line-height:1.5}
.f1 a:hover{color:var(--cyan)}
.f1 .addr{font-size:15px;color:var(--titan);line-height:1.7;margin-bottom:18px}
.f1 .addr b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--white);margin-bottom:4px}
.f2{border-top:1px solid var(--line-w);padding:26px 0;display:flex;justify-content:space-between;font-size:14.5px;color:#9AA6C2;flex-wrap:wrap;gap:12px;letter-spacing:.03em}
.f2 a{margin-left:26px;color:#9AA6C2}
.f2 a:hover{color:var(--cyan)}
.f-giant{padding:36px 8vw 0;overflow:hidden}
.f-giant img{width:100%;display:block;filter:brightness(0) invert(1);opacity:.9;transform:translateY(8%) scale(.92);transform-origin:center bottom;transition:transform 2.5s cubic-bezier(.22,.8,.3,1)}
.f-giant.vis img{transform:translateY(8%) scale(1)}
.f-giant:hover img{transform:translateY(8%) scale(1.02);transition:transform .6s ease}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes kenburns{0%{transform:scale(1) translateY(0)}50%{transform:scale(1.06) translateY(-1.5%)}100%{transform:scale(1) translateY(0)}}
@keyframes kickSlide{0%{opacity:0;transform:translateX(-64px);letter-spacing:.06em}60%{opacity:1}100%{opacity:1;transform:translateX(0);letter-spacing:.22em}}
.hero .kick{opacity:0;animation:kickSlide 1.15s cubic-bezier(.22,.8,.3,1) .15s forwards}
.hero h1{opacity:0;animation:fadeUp .9s cubic-bezier(.22,.8,.3,1) .35s forwards}
.hero .lead{opacity:0;animation:fadeUp .9s cubic-bezier(.22,.8,.3,1) .6s forwards}
.hero .after .btn{opacity:0;animation:fadeUp .9s cubic-bezier(.22,.8,.3,1) .78s forwards}
.hero .glow{animation:pulse 7s ease-in-out infinite}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.22,.8,.3,1),transform .85s cubic-bezier(.22,.8,.3,1);transition-delay:var(--d,0s)}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-34px);transition:opacity .85s cubic-bezier(.22,.8,.3,1),transform .85s cubic-bezier(.22,.8,.3,1);transition-delay:var(--d,0s)}
.reveal-l.vis{opacity:1;transform:translateX(0)}
.atile .bg{animation:kenburns 22s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-l{opacity:1;transform:none}
  .hero .kick,.hero h1,.hero .lead,.hero .after .btn,  }


/* ===== CJK TYPOGRAPHY (繁中 / 日本語 — 獨立字級・字重・字距) ===== */
html[lang="zh-Hant"] .hero h1,html[lang="ja"] .hero h1{font-size:clamp(36px,5.4vw,68px);font-weight:500;letter-spacing:.02em;line-height:1.25}
html[lang="zh-Hant"] .shead h2,html[lang="ja"] .shead h2{font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:.04em;line-height:1.3}
html[lang="zh-Hant"] .manifesto h2,html[lang="ja"] .manifesto h2{font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:.03em;line-height:1.45}
html[lang="zh-Hant"] .esg-tag,html[lang="ja"] .esg-tag{font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:.03em;line-height:1.45}
html[lang="zh-Hant"] .contact h2,html[lang="ja"] .contact h2{font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:.03em;line-height:1.35}
html[lang="zh-Hant"] .shead .idx,html[lang="ja"] .shead .idx{letter-spacing:.12em;font-size:20px;font-weight:500}
html[lang="zh-Hant"] .prow h3,html[lang="ja"] .prow h3{font-size:clamp(23px,2.3vw,27px);font-weight:500;letter-spacing:.03em}
html[lang="zh-Hant"] .atile h3,html[lang="ja"] .atile h3{font-size:26px;font-weight:500;letter-spacing:.03em}
html[lang="zh-Hant"] .mode h3,html[lang="ja"] .mode h3{font-size:28px;font-weight:500;letter-spacing:.03em}
html[lang="zh-Hant"] .pillar .pn,html[lang="ja"] .pillar .pn{font-size:18px;letter-spacing:.14em}
html[lang="zh-Hant"] .pillar h3,html[lang="ja"] .pillar h3{font-size:23px;font-weight:500;letter-spacing:.03em}
html[lang="zh-Hant"] .qcard blockquote,html[lang="ja"] .qcard blockquote{font-size:clamp(19px,1.9vw,24px);line-height:1.75;letter-spacing:.02em;font-weight:400}
html[lang="zh-Hant"] .manifesto .loopline,html[lang="ja"] .manifesto .loopline{letter-spacing:.08em}
html[lang="zh-Hant"] p,html[lang="ja"] p{letter-spacing:.02em}
html[lang="zh-Hant"] .kick,html[lang="ja"] .kick{letter-spacing:.14em}
html[lang="zh-Hant"] .hero .lead,html[lang="ja"] .hero .lead{line-height:1.85}


.about::before{background:linear-gradient(180deg,var(--blue),rgba(11,46,107,0))}
.platforms::before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
.apps::before{background:linear-gradient(180deg,rgba(9,30,70,.85),rgba(9,30,70,0))}
.modes::before{background:linear-gradient(180deg,#FFFFFF,rgba(255,255,255,0))}
.esg::before{background:linear-gradient(180deg,var(--black),rgba(8,20,35,0))}
.contact::before{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}


/* ===== MOBILE MENU ===== */
.hamb{display:none;background:none;border:none;cursor:pointer;padding:6px}
.mnav{display:none;position:fixed;top:80px;left:0;right:0;z-index:190;background:rgba(8,20,35,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-w);padding:18px 36px 26px}
.mnav.open{display:block}
.mnav a{display:block;font-family:var(--disp);font-size:18px;font-weight:500;color:var(--white);padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav a:active{color:var(--cyan)}
.mnav .mlangs{display:flex;gap:8px;margin-top:18px}
.mnav .mlangs button{all:unset;cursor:pointer;padding:7px 14px;border-radius:999px;font-family:var(--disp);font-size:14px;color:var(--grey);border:1px solid var(--line-w)}
.mnav .mlangs button.on{background:var(--cyan);color:var(--black);border-color:var(--cyan);font-weight:600}

@media(max-width:960px){
  section:not(.hero),.manifesto,.platforms,.apps,.modes,.about,.esg{padding-top:56px!important;padding-bottom:56px!important}
  .contact{padding:56px 0!important}
  .hero{padding:130px 0 60px!important;min-height:0}
  .band{height:52vh;min-height:320px}
  .stat{padding:26px 18px}
  .shead{margin-bottom:26px}
  .prow{padding:30px 0}
  .apps .grid,.modes .grid,.esg .grid,.qgrid{gap:16px}
  .atile{min-height:340px}
  footer{padding:48px 0 0}
  .f1{gap:32px;padding-bottom:36px}
  .menu{display:none}
  .hamb{display:block}
  .nav-right>a.btn{display:none}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat{padding:34px 20px}
  .prow{grid-template-columns:70px 1fr;grid-template-rows:auto auto;gap:12px}
  .prow p{grid-column:2}
  .prow .go{display:none}
  .apps .grid,.modes .grid,.esg .grid{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr}
  .f1{grid-template-columns:1fr 1fr}
  .contact .cwrap{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .hero h1{font-size:clamp(30px,8.4vw,44px)}
  .shead h2{font-size:clamp(24px,6.4vw,30px)}
  .manifesto h2,.esg-tag{font-size:clamp(26px,7vw,34px)}
  .contact h2{font-size:clamp(24px,6.4vw,30px)}
  html[lang="zh-Hant"] .hero h1,html[lang="ja"] .hero h1{font-size:clamp(26px,7.4vw,38px)}
  html[lang="zh-Hant"] .shead h2,html[lang="ja"] .shead h2{font-size:clamp(22px,6vw,28px)}
  html[lang="zh-Hant"] .manifesto h2,html[lang="ja"] .manifesto h2,html[lang="zh-Hant"] .esg-tag,html[lang="ja"] .esg-tag{font-size:clamp(24px,6.4vw,30px)}
  html[lang="zh-Hant"] .contact h2,html[lang="ja"] .contact h2{font-size:clamp(22px,6vw,28px)}
  /* --- mobile reading comfort --- */
  .wrap{padding:0 22px}
  .kick{font-size:clamp(14px,4vw,16px);letter-spacing:.14em;margin-bottom:24px}
  .hero .lead{font-size:16.5px;line-height:1.75}
  .hero .after{flex-direction:column;align-items:flex-start;gap:22px;margin-top:34px}
  .hero-btns{width:100%}
  .hero-btns .btn{flex:1;text-align:center;padding:14px 18px}
  .prow{grid-template-columns:60px 1fr}
  .prow .picon{width:52px;height:52px}
  .prow h3 small{font-size:13.5px}
  .stat b{font-size:clamp(24px,7vw,32px)}
  .stat small{font-size:12px;letter-spacing:.08em}
  .atile .in{padding:24px 20px}
  .mode{padding:26px 22px}
  .qcard{padding:28px 22px}
  .pillar{padding:26px 22px}
  form.cform{padding:26px 20px}
  .contact .cwrap{gap:36px}
  .cta-mark{min-width:0;width:90vw;opacity:.04}
  .f-giant{padding:20px 5vw 0}
  .f2{flex-direction:column;gap:8px}
  .f2 a{margin-left:0;margin-right:20px}
  }

.cic{width:16px;height:16px;display:inline-block;vertical-align:-2.5px;margin-right:9px}