/* Strong Group — Concept Services inspired theme (silver/metal) */ 
:root{
  --bg:#0f1113;
  --surface:#14171a;
  --text:#f3f4f6;
  --muted:#a9b0b6;
  --accent:#cfd3d8;  /* light silver */
  --accent-2:#8c949c; /* medium steel */
  --line:rgba(255,255,255,.1);
  --grad:linear-gradient(135deg,#cfd3d8 0%,#aeb4bb 40%,#8d959d 60%,#c6cacf 100%);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.container{width:min(1120px, 92%); margin-inline:auto}
a{color:var(--text); text-decoration:none}
a:hover{opacity:.9}

.page-hero{padding:90px 0 24px; border-bottom:1px solid var(--line); background:#0d0f11}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(15,17,19,.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-mark{width:38px; height:38px; object-fit:contain; filter:grayscale(100%) contrast(1.2)}
.brand-text{letter-spacing:.3px}
.menu{display:flex; gap:20px; align-items:center}
.menu a{padding:8px 10px; font-weight:500; color:var(--muted)}
.menu a.btn{color:#0f1113}

.btn{display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700; border:1px solid var(--line)}
.btn-primary{background:var(--grad); color:#0d0f11; border-color:transparent; box-shadow:var(--shadow)}
.btn-ghost{background:transparent; color:var(--text)}

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(198,202,207,.35), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(143,151,161,.25), transparent 60%),
    var(--bg);
}
.hero-sheen{
  position:absolute; inset:0;
  background: repeating-linear-gradient(110deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 2px, transparent 2px, transparent 12px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 60%);
  pointer-events:none;
}
.hero-inner{padding:120px 0 80px}
.hero h1{font-size: clamp(32px, 5vw, 58px); line-height:1.1; margin:0 0 14px}
.hero .accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size: clamp(16px, 1.4vw, 20px); max-width: 820px; color:var(--muted)}
.hero-cta{display:flex; gap:12px; margin-top:18px}
.hero-badges{display:flex; gap:20px; margin-top:28px; flex-wrap:wrap}
.badge{background:rgba(255,255,255,.04); border:1px solid var(--line); padding:10px 14px; border-radius:12px}
.badge strong{display:block}

.section{padding:70px 0; border-top:1px solid var(--line)}
.section.alt{background:#0d0f11}
.section h2{font-size: clamp(24px, 3.2vw, 36px); margin:0 0 22px}
.section .accent{color:var(--accent)}

.cards{display:grid; gap:20px}
.cards.two{grid-template-columns: repeat(auto-fit, minmax(300px,1fr));}
.cards.three{grid-template-columns: repeat(auto-fit, minmax(260px,1fr));}
.cards.four{grid-template-columns: repeat(auto-fit, minmax(220px,1fr));}

.card{background: #111417; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow)}
.card img{width:100%; height:180px; object-fit: cover; border-radius:10px; margin-bottom:12px; filter: grayscale(30%)}
.card h3{margin:8px 0 6px}
.card.mini{padding:18px}
.card.mini h3{margin:0 0 8px}
.bullets{margin:10px 0 0; padding:0 0 0 18px; color:var(--muted)}

.strip{padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0d1013}
.marquee{display:flex; align-items:center; gap:26px; overflow:auto; scrollbar-width:none}
.marquee img{height:30px; object-fit:contain; opacity:.8}

.grid.projects{display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));}
.project{background:#101316; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow: var(--shadow)}
.project img{width:100%; height:220px; object-fit:cover; display:block; filter: grayscale(20%)}
.project figcaption{padding:14px}
.project h3{margin:0 0 6px}

.ratio{position:relative; width:100%; padding-bottom:56.25%; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow)}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%}

.testimonial-slider{position:relative; min-height:160px}
.t{display:none; margin:0; background:#101316; border:1px solid var(--line); padding:18px; border-radius:14px}
.t.active{display:block}
.t footer{margin-top:10px; color:var(--muted)}
.dots{display:flex; gap:8px; margin-top:12px}
.dot{width:10px; height:10px; border-radius:999px; border:1px solid var(--accent-2); background:transparent; cursor:pointer}
.dot.active{background:var(--accent-2)}

.contact .contact-wrap{display:grid; gap:24px; grid-template-columns: 1.1fr 1fr}
.contact-list{list-style:none; padding:0; margin:10px 0 0; color:var(--muted)}
.form{background:#101316; border:1px solid var(--line); padding:18px; border-radius:16px}
.grid.two{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.field{display:flex; flex-direction:column; gap:6px}
input, textarea{
  background:#0e1114; border:1px solid var(--line); border-radius:10px; padding:12px; color:var(--text);
}
input:focus, textarea:focus{outline:2px solid var(--accent-2); outline-offset:0}
.actions{display:flex; align-items:center; gap:12px; margin-top:10px}
.form-note{color:var(--muted); font-size:12px}

.site-footer{padding:28px 0; border-top:1px solid var(--line); background:#0c0e10}
.footer-grid{display:grid; gap:12px; grid-template-columns: 1fr auto 1fr; align-items:center}
.brand-row{display:flex; align-items:center; gap:8px}
.brand-mark-sm{width:28px; height:28px; filter:grayscale(100%) contrast(1.1)}
.footer-nav{display:flex; gap:14px}
.muted{color:var(--muted)}
.small{font-size:12px}

@media (max-width: 860px){
  .contact .contact-wrap{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .menu{display:none}
}