@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --black:#05080a;
  --black2:#0c1115;
  --yellow:#ffc400;
  --yellow2:#ffdc45;
  --white:#f7f7f7;
  --muted:#b9c0c5;
  --line:#252d32;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Montserrat,Arial,sans-serif;
  color:var(--white);
  background:var(--black);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),92%);margin:auto}

.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(5,8,10,.94);
  border-bottom:1px solid #171d21;
  backdrop-filter:blur(10px);
}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand img{display:block;width:310px;max-width:55vw;height:auto;mix-blend-mode:screen}
.nav-button,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;font-weight:700;transition:.2s ease;
}
.nav-button{
  padding:10px 18px;border:1px solid var(--yellow);color:var(--yellow);
}
.nav-button:hover{background:var(--yellow);color:#111}

.hero{
  min-height:610px;display:flex;align-items:center;position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 25%,rgba(255,196,0,.09),transparent 28%),
    linear-gradient(135deg,#070a0c 0%,#101519 100%);
}
.stripe{position:absolute;width:260px;height:22px;background:var(--yellow);transform:rotate(-45deg);opacity:.95}
.stripe-left{left:-120px;top:105px}.stripe-right{right:-125px;bottom:105px}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:center;position:relative;z-index:1}
.eyebrow{font-size:12px;letter-spacing:2.5px;font-weight:700;color:var(--yellow)}
h1{font-size:clamp(38px,5vw,68px);line-height:1.05;margin:15px 0 22px;max-width:800px}
.hero-copy p{color:var(--muted);font-size:18px;max-width:700px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{padding:13px 22px}
.btn.primary{background:var(--yellow);color:#111}
.btn.primary:hover{background:var(--yellow2);transform:translateY(-2px)}
.btn.outline{border:1px solid #626a6f;color:var(--white)}
.btn.outline:hover{border-color:var(--yellow);color:var(--yellow)}

.contact-card{
  background:linear-gradient(145deg,#11181d,#070a0c);
  border:1px solid #333b40;border-top:3px solid var(--yellow);
  padding:34px;border-radius:8px;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}
.card-label{font-size:11px;letter-spacing:3px;color:var(--yellow);font-weight:700}
.contact-card h2{font-size:28px;margin:8px 0 12px}
.phone{font-size:23px;font-weight:700}
.phone:hover{color:var(--yellow)}
.card-line{height:1px;background:var(--line);margin:25px 0}
.contact-card p{color:var(--muted);margin:0}

.section{padding:95px 0}
.services{background:#0a0e11}
.section-title{text-align:center;max-width:760px;margin:0 auto 50px}
.section-title>span{color:var(--yellow);font-size:12px;font-weight:700;letter-spacing:2.5px}
.section-title h2,.about h2,.contact h2{font-size:38px;line-height:1.15;margin:10px 0 12px}
.section-title p{color:var(--muted);margin:0}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service{
  padding:28px;background:#0f1519;border:1px solid var(--line);
  min-height:210px;transition:.2s ease;
}
.service:hover{border-color:#5c531f;transform:translateY(-3px)}
.icon{
  width:48px;height:48px;border:1px solid var(--yellow);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--yellow);
  font-weight:800;font-size:18px;margin-bottom:18px;
}
.service h3{margin:0 0 8px;font-size:18px}
.service p{margin:0;color:var(--muted);font-size:14px}

.about{background:#070a0c}
.about-box{
  border:1px solid #272e33;border-left:4px solid var(--yellow);
  padding:45px;display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.about h2{max-width:700px}
.about p{color:var(--muted)}

.contact{background:linear-gradient(180deg,#0a0e11,#05080a)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-info{display:flex;flex-direction:column;gap:12px}
.contact-info a{font-weight:600}
.contact-info a:hover{color:var(--yellow)}
.contact-info p{color:var(--muted);margin-top:8px}

footer{border-top:1px solid var(--line);padding:25px 0;color:#8f989d;font-size:12px}
.footer-inner{display:flex;justify-content:space-between;gap:20px}

@media(max-width:850px){
  .hero{padding:75px 0}
  .hero-grid,.contact-grid{grid-template-columns:1fr;gap:35px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .about-box{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .nav{height:68px}
  .brand img{width:230px}
  .nav-button{padding:8px 12px;font-size:12px}
  h1{font-size:38px}
  .hero-copy p{font-size:16px}
  .service-grid{grid-template-columns:1fr}
  .section{padding:70px 0}
  .section-title h2,.about h2,.contact h2{font-size:30px}
  .about-box{padding:30px}
  .footer-inner{flex-direction:column}
}