
:root{--primary:#ff6a00;--dark:#0f172a;--text:#334155;--bg:#f8fafc}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;background:#ffffffc9;backdrop-filter:blur(8px);border-bottom:1px solid #e2e8f0;z-index:50}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:800;letter-spacing:.5px;color:var(--dark)}.logo span{color:var(--primary)}
.nav a{color:var(--dark);text-decoration:none;margin-left:20px;font-weight:600}
.btn{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(255,106,0,.25)}
.btn:hover{transform:translateY(-1px)}
.section{padding:56px 0}
.h2{color:var(--dark);font-size:clamp(22px,3vw,34px);margin:0 0 8px 0}
.lead{color:#475569}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(2,8,23,.06)}
.card .imgwrap{width:100%;height:220px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .imgwrap img{max-width:100%;max-height:100%;object-fit:contain;display:block;margin:auto}
.card .p{padding:18px}
.kpis{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.kpi{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;text-align:center}
.kpi strong{display:block;color:var(--dark);font-size:22px}
.breadcrumb{font-size:14px;color:#64748b;margin:10px 0}
.footer{padding:28px 0;border-top:1px solid #e2e8f0;background:#fff;color:#64748b;margin-top:40px}

/* v8 hero variants */
.hero{position:relative}
.hero .imgwrap{width:100%;height:56svh;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.hero .imgwrap img{width:100%;height:100%;object-fit:cover;display:block;margin:auto;object-position:center center}
.hero.hero-cover .imgwrap{height:72svh}
.hero.hero-banner .imgwrap{height:46svh}
.hero.hero-slim .imgwrap{height:34svh}
.hero .overlay-dark{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.10))}
.hero .content{position:absolute;inset:0;display:flex;align-items:center}
.hero .content h1,.hero .content p{color:#fff}

@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero.hero-cover .imgwrap{height:60svh}
  .hero.hero-banner .imgwrap{height:42svh}
  .hero.hero-slim .imgwrap{height:32svh}
}

/* Floating WhatsApp button */
.wh-float{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;text-decoration:none;font-weight:800;padding:12px 14px;border-radius:999px;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.wh-float img{width:22px;height:22px;display:block}
@media (max-width:540px){.wh-float span{display:none}}


/* v9 additional layouts */
.split-hero .imgwrap{height:auto;background:#000}
.split-hero .container{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.split-hero .visual{border-radius:18px;overflow:hidden;box-shadow:0 18px 36px rgba(2,8,23,.25)}
.split-hero .visual img{width:100%;height:60svh;object-fit:cover;display:block}
.zigzag{display:grid;gap:28px}
.zigzag .row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.zigzag .row:nth-child(even){direction:rtl}
.zigzag .row:nth-child(even) > *{direction:ltr}
.zigzag .visual{border-radius:18px;overflow:hidden;box-shadow:0 12px 26px rgba(2,8,23,.15)}
.zigzag .visual img{width:100%;height:360px;object-fit:cover;display:block}
.timeline{position:relative;padding-left:26px;border-left:3px solid #e2e8f0;margin-top:16px}
.timeline .step{margin-bottom:18px}
.timeline .step h4{margin:0 0 4px 0;color:#0f172a}
.timeline .step p{margin:0}
.timeline .step::before{content:"";position:absolute;left:-9px;margin-top:6px;width:14px;height:14px;background:var(--primary);border-radius:999px}
.mosaic{display:grid;gap:14px;grid-template-columns:2fr 1.2fr;grid-auto-rows:210px}
.mosaic .tile{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 12px 24px rgba(2,8,23,.12)}
.mosaic .tile img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic .tile.big{grid-row:span 2}
.columns{display:grid;gap:24px;grid-template-columns:1.3fr 1fr}
@media (max-width: 900px){
  .split-hero .container{grid-template-columns:1fr}
  .zigzag .row{grid-template-columns:1fr}
  .columns{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr;grid-auto-rows:200px}
}
