:root{
  --orange:#F57C00; --sky:#29B6F6; --charcoal:#0B1220; --slate:#111827; --mist:#F7FAFC;
  --border:#E5E7EB; --muted:#6B7280; --shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--slate); background:var(--mist); line-height:1.45}

.container{max-width:1120px; margin:0 auto; padding:0 24px}
.row{display:flex}
.center-y{align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap-8{gap:.5rem}.gap-12{gap:.75rem}.gap-16{gap:1rem}.gap-20{gap:1.25rem}.gap-24{gap:1.5rem}
.mt-12{margin-top:.75rem}.mt-16{margin-top:1rem}.mt-20{margin-top:1.25rem}.mt-24{margin-top:1.5rem}.mt-32{margin-top:2rem}
.p-24{padding:1.5rem}
.max-w{max-width:42rem}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.leading-tight{line-height:1.1}
.caption{font-size:.8rem}
.muted{color:#6b7280}.muted-strong{color:#4B5563}
.brand-accent{color:var(--sky)}

.logo{height:36px;width:auto;border-radius:6px}.logo.lg{height:56px}
.sep{width:1px;height:12px;background:rgba(255,255,255,.4);display:inline-block;margin:0 .25rem}

.topbar{background:var(--charcoal); color:white; font-size:.8rem; padding:.5rem 0}
.navbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.92); border-bottom:1px solid var(--border)}
.navbar .container{padding:16px 24px}
.brand-title{font-weight:800; letter-spacing:.2px}
.navlinks{display:none;gap:1rem}
.navlinks a{color:inherit; text-decoration:none}
.navlinks a:hover{opacity:.8}
.hide-sm{display:none}
@media(min-width:768px){.navlinks{display:flex}.hide-sm{display:inline-flex}}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border-radius:14px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--orange); color:white}
.btn-sky{background:var(--sky); color:white}
.btn-outline{background:white; border-color:var(--sky); color:var(--sky)}
.btn-outline.light{border-color:rgba(255,255,255,.4); color:white}
.btn:hover{opacity:.92}

.pill{display:inline-flex; align-items:center; border-radius:999px; padding:.35rem .75rem; font-size:.75rem; font-weight:600; background:rgba(41,182,246,.12)}
.pill.sky{color:var(--sky)}
.chip{display:inline-flex; font-size:.7rem; font-weight:700; letter-spacing:.3px; padding:.25rem .6rem; border-radius:9px; background:rgba(41,182,246,.1); color:var(--sky)}
.chip.orange{background:rgba(245,124,0,.1); color:var(--orange)}
.sky{color:var(--sky)}
.orange{color:var(--orange)}

.card{background:white; border:1px solid var(--border); border-radius:24px; padding:1.25rem; box-shadow:var(--shadow)}
.card-title{font-size:1.25rem; font-weight:800}
.tile{background:white; border:1px solid var(--border); border-radius:24px; padding:1.25rem; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.note{border-radius:18px; padding:1rem}
.note.orange{background:rgba(245,124,0,.08)}
.note.sky{background:rgba(41,182,246,.08)}
.overflow{overflow:hidden}

.section{padding:80px 0}
.section-alt{background:white; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-title{margin-top:.75rem; font-size:2rem; font-weight:800}

.cover{position:relative; overflow:hidden; padding:60px 0 80px}
.cover-bg{position:absolute; inset:0; background:
  radial-gradient(1200px 500px at 10% 10%, rgba(41,182,246,0.30), transparent 60%),
  radial-gradient(1000px 500px at 90% 0%, rgba(245,124,0,0.28), transparent 55%),
  linear-gradient(180deg, #ffffff 0%, var(--mist) 60%)}
.grid{display:grid}
.grid-2{display:grid; grid-template-columns:1fr; gap:1rem}
.grid-3{display:grid; grid-template-columns:1fr; gap:1rem}
@media(min-width:768px){.grid-2{grid-template-columns:1.1fr .9fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.ph-img{height:190px; background:#E5E7EB}

.hero-title{margin-top:1rem; font-size:clamp(2rem, 4.5vw, 3.5rem); font-weight:800; letter-spacing:-.02em}
.fade-up{opacity:0; transform:translateY(16px); animation:fadeUp .9s .1s forwards}
@keyframes fadeUp{to{opacity:1; transform:none}}

.badge{display:inline-flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:999px; padding:.6rem 1rem; background:white; box-shadow:var(--shadow)}
.badge-icon{display:flex; align-items:center; justify-content:center; height:40px; width:40px; border-radius:12px; background:rgba(245,124,0,.12); color:var(--orange); font-weight:800}

.bullets{list-style:none; padding-left:0; margin:0}
.bullets li{position:relative; padding-left:1.1rem}
.bullets li::before{content:"•"; position:absolute; left:0; color:var(--orange)}

.contact{display:grid; grid-template-columns:1fr; gap:1.5rem; background:var(--charcoal); color:white; border:1px solid var(--border); border-radius:32px; overflow:hidden; box-shadow:var(--shadow)}
.contact-left{padding:2rem}
.contact-right{padding:1.5rem; background:white; color:var(--slate)}
@media(min-width:860px){.contact{grid-template-columns:1.1fr .9fr}}
.input{width:100%; background:#fff; border:1px solid var(--border); border-radius:16px; padding:.75rem 1rem; font-size:.95rem}

.footer{background:white; border-top:1px solid var(--border); padding:40px 0}

.wa-float{position:fixed; right:24px; bottom:24px; z-index:60; text-decoration:none}
.wa-chip{display:flex; align-items:center; gap:12px; padding:.75rem 1rem; border-radius:999px; background:white; border:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow); transition:opacity .2s}
.wa-chip:hover{opacity:.9}
.wa-badge{height:40px; width:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(41,182,246,.16); font-weight:800}
.wa-cta{height:40px; width:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--orange); color:white; font-weight:800}
/* --- Hero slider --- */
.hero-slider { position: relative; min-height: 280px }
.hero-slide { 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .6s ease; 
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none }
}

/* Controls */
.hero-controls {
  position: absolute; inset: auto 0 0 0; 
  display: flex; justify-content: flex-end; gap:.5rem; 
  padding-top: .75rem;
}
.hero-prev, .hero-next {
  border: 1px solid var(--border);
  background: white;
  color: var(--slate);
  border-radius: 999px;
  width: 40px; height: 40px; 
  font-size: 20px; font-weight: 800; 
  cursor: pointer; box-shadow: var(--shadow);
}
.hero-prev:hover, .hero-next:hover { opacity: .9 }

/* Dots */
.hero-dots { display: flex; gap: .4rem; margin-top: .75rem }
.hero-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #cfd4dc;
}
.hero-dot.is-active { background: var(--sky) }
/* Center the left hero column content */
.cover .container { align-items: center; }
.cover .container > div:first-child {
  text-align: center;
  display: grid;
  justify-items: center;   /* centers buttons, pills, etc. */
}

/* Cover / Hero */
.cover{position:relative; overflow:hidden; padding:72px 0 84px; background:var(--mist)}
.cover-bg{position:absolute; inset:0; background:
  radial-gradient(1200px 500px at 10% 10%, rgba(41,182,246,.30), transparent 60%),
  radial-gradient(1000px 500px at 90% 0%, rgba(245,124,0,.28), transparent 55%),
  linear-gradient(180deg, #ffffff 0%, var(--mist) 60%)}

/* Center everything within the hero */
.hero-center{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;   /* centers buttons, pills, etc. */
  text-align:center;      /* centers text */
  gap: .75rem;
}

/* Keep line length comfortable when centered */
.hero-max{max-width:42rem}
.hero-actions .btn{padding:.8rem 1.25rem}

/* Title and simple fade-in */
.hero-title{margin-top:1rem; font-size:clamp(2rem, 4.5vw, 3.5rem); font-weight:800; letter-spacing:-.02em}
/* Projects: image container */
.project-figure {
  display:block; margin:0; overflow:hidden;
  aspect-ratio:16 / 9;       /* modern browsers keep clean ratio */
  background:#E5E7EB;
}

/* Image sizing + hover */
.project-figure img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .4s ease;
}
.project-figure:hover img { transform:scale(1.03) }