/* XHJ Supply Chain — shared stylesheet (all languages) */

:root { --navy:#071d30; --ink:#112b3d; --muted:#6c7b85; --line:#dbe5e8; --ice:#eef6f6; --lime:#b9e94b; --orange:#f2a445; }
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#fff;line-height:1.6}

/* ---- per-language font stacks ---- */
html[lang="zh-CN"] body{font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif}
html[lang="ja"] body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"MS PGothic",sans-serif}
html[lang="ar"] body{font-family:"Noto Naskh Arabic","Segoe UI",Tahoma,"Traditional Arabic",Arial,sans-serif}

.wrap{width:min(1180px,calc(100% - 48px));margin:auto}

/* ---- top bar ---- */
.top{background:#071d30;color:#d4e3e9;font-size:13px;position:relative;z-index:5}
.top .wrap{height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top a{color:inherit;text-decoration:none}
.top-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:18px;flex-shrink:0}

/* ---- language picker (no JS) ---- */
.langpick{position:relative}
.langpick>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid rgba(255,255,255,.25);border-radius:2px;user-select:none;white-space:nowrap}
.langpick>summary::-webkit-details-marker{display:none}
.langpick>summary:after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px}
.langpick[open]>summary:after{transform:rotate(180deg);margin-top:-3px}
.langpick>summary:hover{border-color:var(--lime);color:var(--lime)}
.langmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:#0d2f45;border:1px solid rgba(255,255,255,.18);min-width:150px;padding:6px 0;box-shadow:0 14px 30px rgba(0,0,0,.32);z-index:20}
.langmenu a{display:block;padding:8px 16px;font-size:13px;white-space:nowrap}
.langmenu a:hover{background:rgba(185,233,75,.14);color:var(--lime)}
.langmenu a[aria-current="true"]{color:var(--lime);font-weight:700}

/* ---- header ---- */
header{height:80px;display:flex;align-items:center;position:absolute;z-index:3;top:38px;left:0;right:0;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.4px;font-size:23px;line-height:1}
.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:500;margin-top:6px;color:#b9e94b}
.nav{display:flex;gap:30px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-size:14px}
.nav .cta{background:var(--lime);color:#0a2633;padding:10px 17px;border-radius:2px;font-weight:700}

/* ---- hero ---- */
.hero{min-height:680px;background:linear-gradient(110deg,rgba(3,22,34,.93),rgba(8,38,53,.72) 53%,rgba(23,91,87,.44)),radial-gradient(circle at 82% 43%,#4c9f8f 0 2%,transparent 2.2%),linear-gradient(125deg,#072237,#0c4c58 55%,#183b52);color:#fff;display:flex;align-items:center;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-130px;bottom:-180px;width:680px;height:680px;border:1px solid rgba(185,233,75,.34);border-radius:50%;box-shadow:0 0 0 85px rgba(185,233,75,.05),0 0 0 170px rgba(185,233,75,.04)}
.hero .wrap{position:relative;z-index:1;padding-top:60px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#c6ef68}
.eyebrow:before{content:"";width:36px;height:2px;background:currentColor}
.hero h1{font-size:clamp(42px,6vw,74px);line-height:1.13;max-width:780px;margin:20px 0;font-weight:800;letter-spacing:-2px}
.hero p{max-width:590px;font-size:17px;color:#d6e3e5;margin:0 0 32px}
.buttons{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 22px;text-decoration:none;font-size:14px;font-weight:700;border-radius:2px}
.btn.primary{background:var(--lime);color:#0b2631}
.btn.secondary{border:1px solid rgba(255,255,255,.55);color:#fff}
.hero-stats{position:absolute;bottom:0;left:0;right:0;z-index:2;border-top:1px solid rgba(255,255,255,.2);background:rgba(4,26,39,.32)}
.hero-stats .wrap{padding:19px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stat b{font-size:22px;color:var(--lime)}
.stat span{font-size:12px;color:#c7d8dd;display:block}

/* ---- sections ---- */
section{padding:90px 0}
.section-tag{font-weight:700;letter-spacing:1.5px;font-size:12px;color:#4c8077;text-transform:uppercase}
.heading{font-size:38px;line-height:1.25;margin:9px 0 15px;letter-spacing:-1px}
.intro{max-width:590px;color:var(--muted);margin:0}
.products{background:var(--ice)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:38px}
.card{min-height:305px;padding:26px;background:#fff;position:relative;overflow:hidden;border:1px solid #e3eded;transition:.2s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(15,52,61,.12)}
.num{font-size:12px;color:#68928a;font-weight:700}
.card .icon{font-size:41px;margin:36px 0 15px;line-height:1}
.card h3{font-size:20px;margin:0 0 9px}
.card p{font-size:13px;color:var(--muted);margin:0}
.card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-55px;bottom:-60px;background:#e9f5d1}
.card:nth-child(2):after{background:#d8eff0}
.card:nth-child(3):after{background:#ffe5c2}
.card:nth-child(4):after{background:#dce7f5}

/* ---- about ---- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:75px;align-items:center}
.split>*{min-width:0}
.panel{height:390px;background:linear-gradient(150deg,#0c3547,#1b786d);position:relative;overflow:hidden}
.panel:before{content:"ENERGY\A SUPPLY\A CHAIN";white-space:pre;position:absolute;left:35px;top:30px;font-size:46px;font-weight:800;line-height:1.08;color:rgba(255,255,255,.14);direction:ltr}
.panel:after{content:"";position:absolute;width:300px;height:300px;border:45px solid var(--lime);right:-90px;bottom:-100px;border-radius:50%;opacity:.86}
.checks{padding:0;margin:25px 0;list-style:none}
.checks li{margin:11px 0;font-size:15px}
.checks li:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:#dff3bf;color:#245934;border-radius:50%;font-weight:bold;margin-inline-end:11px;vertical-align:middle}
.numbers{display:flex;flex-wrap:wrap;gap:20px 36px;margin-top:28px}
.numbers>div{min-width:0}
.numbers b{font-size:28px;display:block}
.numbers span{color:var(--muted);font-size:12px}

/* ---- process ---- */
.process{background:#092438;color:#fff}
.process .section-tag{color:#b9e94b}
.process .heading{max-width:520px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:45px}
.step{padding-inline:26px;border-inline-start:1px solid rgba(255,255,255,.22)}
.step:first-child{padding-inline-start:0;border:none}
.step b{color:var(--lime);font-size:13px}
.step h3{font-size:18px;margin:10px 0}
.step p{font-size:13px;color:#c1d2d8;margin:0}

/* ---- contact + footer ---- */
.contact{padding:0;background:linear-gradient(120deg,#b9e94b,#d9f989)}
.contact .wrap{min-height:215px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.contact h2{margin:0;font-size:35px;line-height:1.25}
.contact p{margin:6px 0 0}
.contact .btn{background:#092438;color:#fff;white-space:nowrap}
footer{background:#061927;color:#b9c9cf;padding:46px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}
.footer-grid h4{color:#fff;margin:0 0 12px;font-size:14px}
.footer-grid p,.footer-grid a{display:block;color:#b9c9cf;text-decoration:none;font-size:13px;margin:4px 0}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:16px;font-size:12px;color:#8399a4}

/* ================= RTL (Arabic) ================= */
html[dir="rtl"] .hero:after{right:auto;left:-130px}
html[dir="rtl"] .panel:before{left:auto;right:35px}
html[dir="rtl"] .panel:after{right:auto;left:-90px}
html[dir="rtl"] .card:after{right:auto;left:-55px}
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .section-tag{letter-spacing:0;text-transform:none}
html[dir="rtl"] .hero h1,
html[dir="rtl"] .heading{letter-spacing:0}
html[dir="rtl"] .brand{letter-spacing:0}
/* Latin/numeric fragments inside RTL text need their own embedding level,
   otherwise the bidi algorithm renders "01 / POWER" as "POWER / 01". */
html[dir="rtl"] .brand small{direction:ltr;unicode-bidi:isolate;text-align:right}
html[dir="rtl"] .num{direction:ltr;unicode-bidi:isolate;text-align:right}
html[dir="rtl"] .step b,
html[dir="rtl"] .stat b{direction:ltr;unicode-bidi:isolate;text-align:right}

/* Japanese: negative tracking hurts CJK */
html[lang="ja"] .hero h1,
html[lang="ja"] .heading{letter-spacing:0}
html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .heading{letter-spacing:-1px}

/* ---- language index (root page) ---- */
.langindex{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(125deg,#072237,#0c4c58 55%,#183b52);color:#fff;text-align:center;padding:40px 20px}
.langindex .brand{font-size:30px;margin-bottom:10px}
.langindex h1{font-size:22px;font-weight:600;margin:26px 0 6px}
.langindex p{color:#b9cdd4;font-size:14px;margin:0 0 28px}
.langgrid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:620px}
.langgrid a{display:block;padding:13px 26px;border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;font-size:15px;border-radius:2px;min-width:135px}
.langgrid a:hover{background:var(--lime);color:#0b2631;border-color:var(--lime)}

/* ---- responsive ---- */
@media(max-width:800px){
  .top .wrap{font-size:11px}
  .top-tag{display:none}
  .top .wrap{justify-content:flex-end}
  .top-right{gap:12px}
  .nav{display:none}
  .hero{min-height:610px}
  .product-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:35px}
  .panel{height:270px}
  .contact .wrap{padding:44px 0;display:block}
  .contact .btn{margin-top:20px}
  .footer-grid{grid-template-columns:1fr}
  .steps .step{margin-bottom:28px}
  .step:nth-child(odd){border-inline-start:none;padding-inline-start:0}
}
@media(max-width:480px){
  .wrap{width:min(100% - 34px,1180px)}
  header{top:38px}
  .hero h1{letter-spacing:-1px}
  html[dir="rtl"] .hero h1,html[lang="ja"] .hero h1{letter-spacing:0}
  .hero-stats .wrap{gap:8px}
  .stat b{font-size:18px}
  .product-grid,.steps{grid-template-columns:1fr}
  .step{border-inline-start:none;padding-inline-start:0}
  .heading{font-size:31px}
  .numbers{gap:22px}
  .langmenu{inset-inline-end:auto;inset-inline-start:auto;right:0}
}