/* Bencton mockup recreation */
/* CSS Variables */
:root{
  --navy:#0f1e2e;
  --ink:#0d1720;
  --muted:#7b8794;
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#e6ebf2;
  --accent:#ff7a00; /* orange button */
  --accent-ink:#fff;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--navy);
  background:#fff;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92vw);margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);
}
.nav-container{display:flex;align-items:center;gap:24px;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;letter-spacing:.2px}
.brand .brand-text{color:var(--navy)}
.brand-mark{width:28px;height:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:var(--muted);font-weight:500}
.nav a:hover{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 18px;border:1px solid transparent;font-weight:600}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(.95)}
.btn-accent{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:#ccd6e3}
.hamburger{display:none;border:0;background:transparent;gap:4px;flex-direction:column}
.hamburger span{width:24px;height:2px;background:var(--navy);display:block;border-radius:2px}

/* HERO */
.hero{padding:64px 0 32px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.hero h1{font-size:3rem;line-height:1.08;margin:0 0 16px}
.hero h1 span{color:var(--navy)}
.lead{color:var(--muted);font-size:1.05rem;max-width:46ch}
.cta-row{display:flex;gap:14px;margin-top:20px}
.hero-illustration .illo{width:100%;height:auto}

/* SERVICES */
.services{padding:28px 0 8px}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center}
.service .icon{font-size:28px;line-height:1}
.service h3{margin:.5rem 0 .25rem}
.service p{margin:0;color:var(--muted)}

/* PROJECTS */
.projects{padding:28px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.section-head h2{margin:0;font-size:1.5rem}
.view-all{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{border:1px solid var(--line);border-radius:16px;background:#fff;aspect-ratio:16/10;position:relative;overflow:hidden;padding:14px}
.card.dark{background:#0f1e2e;color:#fff;border-color:#0f1e2e}
.card .chart{position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,30,46,0.06), rgba(15,30,46,0.02));mask-image:radial-gradient(60% 60% at 40% 35%, #000 55%, transparent 65%)}

/* ABOUT */
.about{padding:36px 0 64px
  background: linear-gradient(180deg, #f9fafc 0%, #f0f3f8 100%);}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.about-image{border-radius:18px;border:1px solid var(--line);aspect-ratio:16/10;background:
  linear-gradient(180deg,#e9eef6,#f4f7fb);
  position:relative;overflow:hidden}
.about-image:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(200px 120px at 25% 70%, rgba(15,30,46,.08), transparent 60%),
    radial-gradient(300px 200px at 60% 30%, rgba(15,30,46,.09), transparent 60%);
  mix-blend: multiply;
}
.about-copy h2{margin:0 0 12px}
.about-copy p{color:var(--muted);margin:0 0 14px}
.about-copy blockquote{margin:0 0 16px;font-size:1.25rem;font-weight:700;color:var(--navy)}

/* FOOTER */
.site-footer{background:#0f1e2e;color:#dbe4ee;padding:28px 0}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand.foot .brand-text{color:#fff}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-nav a{color:#b9c5d3}
.foot-nav a:hover{color:#fff}
.social{opacity:.7}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .services-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hamburger{display:flex}
  .nav.open{display:flex;position:absolute;inset:64px 0 auto 0;background:#fff;padding:16px;border-bottom:1px solid var(--line);justify-content:center;gap:18px}
  body.noscroll{overflow:hidden}
}
@media (max-width: 560px){
  .services-grid,.cards{grid-template-columns:1fr}
  .hero h1{font-size:2.25rem}
}