:root{
  --bg:#ffffff;
  --bg-soft:#faf9f7;
  --border:#eae6e0;
  --text:#1c1a17;
  --text-dim:#66625a;
  --text-mute:#9a958a;
  --brand:#8c2e26;
  --brand-dark:#6e2119;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter', sans-serif; background:var(--bg); color:var(--text); line-height:1.7; font-size:16px;}
.wrap{max-width:1040px; margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}

nav{border-bottom:1px solid var(--border);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:88px;}
.logo-img{height:54px;}
.navlinks{display:flex; gap:40px; font-size:15px; color:var(--text-dim);}
.navlinks a:hover{color:var(--brand);}
.btn{padding:13px 28px; border-radius:6px; font-size:15px; font-weight:600; display:inline-block;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-ghost{color:var(--text);}

.hero{padding:96px 0 110px;}
.hero .wrap{max-width:1100px;}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center;}
.tagline{font-size:15px; font-style:italic; color:var(--brand); margin-bottom:22px;}
h1{font-size:46px; font-weight:700; line-height:1.22; margin-bottom:22px; letter-spacing:-1px;}
.sub{font-size:18px; color:var(--text-dim); margin:0 0 36px; max-width:480px;}

/* OEE HERO VISUAL */
.oee-visual{position:relative; padding:20px 0;}
.oee-card{
  position:relative; background:linear-gradient(155deg,#ffffff 0%,#fbf9f6 100%);
  border-radius:20px; padding:26px; border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(28,26,23,.04), 0 24px 48px -20px rgba(28,26,23,.16);
}
.oee-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.oee-top .t{font-size:13px; font-weight:600; color:var(--text-dim);}
.oee-live{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#1a8f5c;}
.oee-dot{width:7px; height:7px; border-radius:50%; background:#1a8f5c; box-shadow:0 0 0 3px rgba(26,143,92,.18);}

.oee-main{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; margin-bottom:22px;}
.gauge{position:relative; width:112px; height:112px;}
.gauge svg{transform:rotate(-90deg);}
.gauge-val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.gauge-val .n{font-size:26px; font-weight:700; line-height:1;}
.gauge-val .l{font-size:10px; color:var(--text-mute); margin-top:2px; letter-spacing:.5px;}

.mini-kpis{display:flex; flex-direction:column; gap:10px;}
.mini-kpi{display:flex; justify-content:space-between; align-items:center; background:#faf9f7; border-radius:9px; padding:9px 13px;}
.mini-kpi .l{font-size:12px; color:var(--text-dim);}
.mini-kpi .v{font-size:14px; font-weight:700;}
.mini-kpi .bar-track{height:4px; width:64px; background:#eee9e2; border-radius:2px; overflow:hidden; margin-top:5px;}
.mini-kpi .bar-fill{height:100%; border-radius:2px;}

.oee-chart{background:#faf9f7; border-radius:12px; padding:16px 18px; margin-bottom:16px;}
.oee-chart .l{font-size:11px; color:var(--text-mute); margin-bottom:10px; display:block;}

.oee-hook{
  display:flex; gap:11px; align-items:flex-start;
  background:linear-gradient(135deg,#8c2e26 0%,#6e2119 100%);
  border-radius:12px; padding:15px 16px;
  box-shadow:0 10px 24px -10px rgba(140,46,38,.5);
}
.oee-hook .star{color:#f3c9c4; font-size:16px; line-height:1.4;}
.oee-hook .txt{font-size:12.5px; color:#fbe4e2; line-height:1.55;}
.oee-hook .txt b{color:#fff;}

.float-badge{
  position:absolute; top:-14px; left:-14px; background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:9px 14px; box-shadow:0 10px 24px -8px rgba(28,26,23,.18);
  font-size:12px; font-weight:600; display:flex; align-items:center; gap:7px; z-index:2;
}
.float-badge .fdot{width:6px; height:6px; border-radius:50%; background:#d2691e;}

section{padding:120px 0;}
.band{background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.kicker{font-size:14px; color:var(--brand); font-weight:600; margin-bottom:18px; display:block;}
h2{font-size:36px; font-weight:700; margin-bottom:22px; letter-spacing:-0.5px; max-width:600px;}
.lead{font-size:18px; color:var(--text-dim); max-width:560px; margin-bottom:16px;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
.two-col .right p{font-size:16px; color:var(--text-dim); margin-bottom:20px;}

.stack{display:flex; flex-direction:column; gap:44px; margin-top:56px;}
.row{display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:baseline; padding-bottom:36px; border-bottom:1px solid var(--border);}
.row:last-child{border-bottom:none;}
.row .num{font-size:14px; color:var(--text-mute); font-weight:600;}
.row h3{font-size:20px; font-weight:600; margin-bottom:8px;}
.row p{font-size:15.5px; color:var(--text-dim); max-width:520px;}

.approach-list{display:flex; flex-direction:column; margin-top:48px;}
.astep{display:flex; align-items:center; gap:24px; padding:22px 0; border-bottom:1px solid var(--border);}
.astep:first-child{border-top:1px solid var(--border);}
.astep .n{font-size:15px; color:var(--brand); font-weight:700; width:36px;}
.astep .t{font-size:17px; font-weight:500;}
.approach-note{margin-top:32px; font-size:17px; color:var(--text-dim);}
.approach-note b{color:var(--text);}

.about{display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:center;}
.avatar{width:220px; height:220px; border-radius:50%; overflow:hidden; border:1px solid var(--border); flex-shrink:0;}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.about h2{margin-bottom:16px;}
.about p{font-size:16px; color:var(--text-dim); margin-bottom:14px; max-width:520px;}
.about-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.about-tags span{font-size:13px; color:var(--text-dim);}
.about-tags span:not(:last-child)::after{content:'·'; margin-right:8px; color:var(--text-mute);}

.cta{text-align:center;}
.cta .wrap{max-width:600px;}
.cta h2{margin:0 auto 18px; text-align:center;}
.cta p{font-size:17px; color:var(--text-dim); margin-bottom:36px;}

footer{border-top:1px solid var(--border); padding:48px 0; font-size:14px; color:var(--text-mute);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .flogo{height:34px; opacity:.8;}
footer .fmeta{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
footer a:hover{color:var(--brand);}

/* Responsive */
@media (max-width: 860px){
  .navlinks{display:none;}
  .hero{padding:64px 0 72px;}
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  h1{font-size:34px;}
  section{padding:72px 0;}
  h2{font-size:28px;}
  .two-col{grid-template-columns:1fr; gap:32px;}
  .about{grid-template-columns:1fr; text-align:center; gap:28px;}
  .about .avatar{margin:0 auto;}
  .about-tags{justify-content:center;}
  .row{grid-template-columns:1fr; gap:8px;}
  .float-badge{position:static; display:inline-flex; margin-bottom:14px;}
}
@media (max-width: 480px){
  .wrap{padding:0 20px;}
  h1{font-size:28px;}
  .avatar{width:160px; height:160px;}
}