:root{
  --font-head:"Manrope",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --bg:#fff;--bg-alt:#f3f4f6;--card:#fff;--ink:#101418;--muted:#525b66;
  --line:#e2e5e9;--line-strong:#c4c9d0;
  --accent:#e8590c;--accent-dark:#b7410a;--accent-soft:#feeadf;--on-accent:#fff;
  --header-bg:rgba(255,255,255,.9);
  --footer-bg:#101418;--footer-ink:#c2c8cf;
  --hero-fallback:linear-gradient(135deg,#1f2937,#374151);
  --hero-shade:linear-gradient(90deg,rgba(16,20,24,.88) 0%,rgba(16,20,24,.5) 70%);
  --radius:8px;--radius-btn:6px;
}
h1{font-weight:800;letter-spacing:-.02em}
.hero .wrap{max-width:none}
.hero-inner{max-width:680px}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.25);max-width:680px}
.hero-stats .stat{color:#fff;font-size:1.8rem}
.hero-stats p{color:rgba(255,255,255,.8)}
.svc{border-left:4px solid var(--accent);padding-left:1.2rem}
.svc h3{margin-bottom:.3rem}
.svc p{color:var(--muted);margin:0;font-size:.95rem}
.project{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.project .img{aspect-ratio:4/3;background:var(--hero-fallback);position:relative}
.project .img img{width:100%;height:100%;object-fit:cover}
.project .body{padding:1.2rem}
.project .meta{font-size:.82rem;color:var(--muted);display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.project h3{font-size:1.1rem;margin-bottom:.3rem}
.ba{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);user-select:none}
.ba img,.ba .after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .before-layer{position:absolute;inset:0;background:linear-gradient(135deg,#6b7280,#374151)}
.ba .after-layer{position:absolute;inset:0;background:var(--hero-fallback);clip-path:inset(0 0 0 var(--x,50%))}
.ba .after-layer img{clip-path:none}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:#fff;z-index:2;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.ba .handle::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#111;font-size:.7rem;padding:.4rem .5rem;border-radius:999px;white-space:nowrap;font-weight:700}
.ba .tag{position:absolute;top:.6rem;z-index:2;font-size:.72rem;font-weight:700;background:rgba(0,0,0,.6);color:#fff;padding:.25rem .5rem;border-radius:4px}
.ba .tag.l{left:.6rem}.ba .tag.r{right:.6rem}
.cert{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.cert div{border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.2rem;font-weight:700;font-size:.9rem;color:var(--muted);background:var(--card)}
.file-drop{border:2px dashed var(--line-strong);border-radius:var(--radius);padding:1rem;text-align:center;font-weight:400;color:var(--muted);font-size:.9rem}
.file-drop input{border:0;padding:.4rem 0}
.process{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.process div{padding:1.2rem;border-top:3px solid var(--line)}
.process div b{display:block;font-family:var(--font-head);font-size:1.6rem;color:var(--accent);margin-bottom:.3rem}