@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --black:#05080e;
  --ink:#080c14;
  --steel-1:#0e131d;
  --steel-2:#141b27;
  --steel-3:#1c2433;
  --line: rgba(176,198,224,.12);
  --line-2: rgba(176,198,224,.22);
  --silver:#c6d0dd;
  --silver-2:#8d9aac;
  --platinum:#eef3f9;
  --bone:#dde5ef;
  --blue:#31aaf3;
  --blue-2:#62c2ff;
  --blue-d:#1c7fd6;
  --navy:#16294a;
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --chrome: linear-gradient(176deg,#f6f9fd 0%,#c9d3e0 40%,#8a98ac 58%,#dfe7f1 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  line-height: 1.65;
  color: var(--bone);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3 { font-family: var(--disp); font-weight: 800; letter-spacing: -0.01em; margin-top:0; }
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.blue { color: var(--blue); }

.blueprint {
  background-image: linear-gradient(rgba(49,170,243,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(49,170,243,.06) 1px,transparent 1px);
  background-size: 48px 48px;
}

/* Nav */
.top-nav { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; padding:1.3rem 1.5rem; }
.brand { display:flex; align-items:center; gap:0.6rem; font-family:var(--disp); font-weight:800; font-size:1.1rem; letter-spacing:0.02em; }
.brand img { height:34px; width:auto; }
.nav-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.nav-links a { font-size:0.92rem; color: var(--silver-2); font-weight:600; }
.nav-links a:hover { color: var(--blue); }

/* Hero */
.hero {
  position:relative;
  background: linear-gradient(180deg, rgba(5,8,14,.55), rgba(5,8,14,.92) 75%, var(--ink)), var(--hero-img) center/cover no-repeat;
  color: var(--bone);
  padding-bottom: 4rem;
}
.hero-content { max-width:1200px; margin:2.5rem auto 0; padding:0 1.5rem; display:grid; grid-template-columns:1.4fr 0.8fr; gap:2rem; align-items:end; }
.idx { display:inline-flex; align-items:baseline; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--blue); text-transform:uppercase; margin-bottom:1rem; }
.idx .no { font-family:var(--disp); font-weight:800; font-size:13px; color:var(--platinum); border-bottom:2px solid var(--blue); padding-bottom:1px; }
h1 { font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.02; margin-bottom:1.1rem; }
.hero-text { font-size:1.05rem; color:var(--silver-2); max-width:600px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:1.5rem; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:700; font-size:0.95rem; padding:0.9rem 1.4rem; border-radius:6px; cursor:pointer; }
.btn-primary { background:var(--blue); color:#05101f; }
.btn-primary:hover { background:var(--blue-2); }
.btn-secondary { border:1px solid var(--line-2); color:var(--bone); }
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); }
.hero-card { background:rgba(20,27,39,.7); border:1px solid var(--line-2); padding:1.4rem; border-radius:0.8rem; backdrop-filter:blur(10px); }
.hero-card h3 { font-size:1rem; margin-bottom:0.8rem; }
.hero-card ul { padding-left:1.1rem; margin-bottom:0; color:var(--silver); font-size:0.92rem; }
.hero-card li { margin-bottom:0.55rem; }

/* Trust strip */
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; max-width:1200px; margin:-1.6rem auto 0; background:var(--line); border:1px solid var(--line); border-radius:0.8rem; overflow:hidden; position:relative; z-index:2; }
.trust-strip > div { background:var(--steel-1); padding:1.1rem; text-align:center; font-family:var(--mono); font-size:0.8rem; letter-spacing:0.04em; color:var(--silver-2); text-transform:uppercase; }

/* Sections */
.section { max-width:1200px; margin:5rem auto; padding:0 1.5rem; }
.section-alt { background:var(--steel-1); padding:3rem 1.5rem; border-radius:1rem; border:1px solid var(--line); }
.section-heading { margin-bottom:2rem; }
.section-heading .idx { margin-bottom:0.8rem; }
.section-heading h2 { font-size:clamp(1.6rem,3vw,2.3rem); }

.about-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; color:var(--silver-2); }

/* Service / project cards with images */
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.card { position:relative; border-radius:0.9rem; overflow:hidden; border:1px solid var(--line); background:var(--steel-2); min-height:230px; display:flex; align-items:flex-end; }
.card .card-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.card .card-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,8,14,0) 30%, rgba(5,8,14,.92) 100%); }
.card .card-body { position:relative; padding:1.3rem; z-index:1; }
.card h3 { font-size:1.1rem; margin-bottom:0.4rem; color:var(--platinum); }
.card p { color:var(--silver-2); margin-bottom:0; font-size:0.92rem; }

/* Process */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.process-step { position:relative; padding:1.6rem 1.2rem 1.2rem; background:var(--steel-2); border:1px solid var(--line); border-radius:0.9rem; }
.process-step .step-no { font-family:var(--mono); color:var(--blue); font-size:0.85rem; letter-spacing:0.05em; }
.process-step h3 { margin-top:0.6rem; font-size:1.05rem; color:var(--platinum); }
.process-step p { color:var(--silver-2); margin-bottom:0; font-size:0.92rem; }

/* License callout */
.license-callout { display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:center; background:var(--steel-1); border:1px solid var(--blue-d); border-radius:1rem; padding:1.6rem; max-width:1200px; margin:0 auto 5rem; }
.license-callout img { width:100px; }
.license-callout h3 { margin-bottom:0.5rem; color:var(--platinum); }
.license-callout p { color:var(--silver-2); margin-bottom:0.7rem; }
.license-callout a.verify-link { color:var(--blue); font-weight:700; }

/* Guarantees */
.guarantee-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.guarantee-grid .card { min-height:auto; display:block; padding:1.3rem; background:var(--steel-2); }
.guarantee-grid .card h3::before { content:"\2713  "; color:var(--blue); }
.guarantee-grid .card h3 { color:var(--platinum); }

/* Testimonials */
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.testimonial { background:var(--steel-2); border:1px solid var(--line); border-radius:0.9rem; padding:1.4rem; }
.testimonial p.quote { color:var(--bone); font-style:italic; margin-bottom:1rem; }
.testimonial p.attribution { color:var(--silver-2); font-weight:700; margin-bottom:0; font-style:normal; }
.testimonial-featured { background:var(--steel-1); border:1px solid var(--blue-d); border-radius:1rem; padding:1.8rem; margin-bottom:1.2rem; }
.testimonial-featured p.quote { font-size:1.1rem; color:var(--platinum); }
.rating-line { color:var(--silver-2); font-weight:700; margin:-1rem 0 1.5rem; font-family:var(--mono); font-size:0.9rem; }
.rating-line .stars { color:var(--blue); letter-spacing:0.1em; }

/* FAQ */
.faq-item { border-bottom:1px solid var(--line); padding:1.2rem 0; }
.faq-item h3 { font-size:1.02rem; margin-bottom:0.5rem; color:var(--platinum); }
.faq-item p { color:var(--silver-2); margin-bottom:0; }

/* Service areas */
.service-area-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.8rem; }
.service-area-grid a { display:block; padding:1rem; background:var(--steel-2); border:1px solid var(--line); border-radius:0.7rem; font-weight:700; text-align:center; color:var(--silver); }
.service-area-grid a:hover { border-color:var(--blue); color:var(--blue); }

/* Footer */
.footer { background:var(--black); color:var(--silver); padding:2.8rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); }
.footer h2 { color:var(--platinum); }
.footer-links { display:flex; flex-direction:column; gap:0.4rem; }
.footer-links a:hover { color:var(--blue); }
.footer-license { color:var(--silver-2); font-size:0.85rem; margin-top:0.4rem; font-family:var(--mono); }

@media (max-width:860px) {
  .hero-content,.about-grid,.card-grid,.process-grid,.trust-strip,.guarantee-grid,.testimonial-grid,.service-area-grid { grid-template-columns:1fr; }
  .trust-strip { margin-top:1rem; }
  .license-callout { grid-template-columns:1fr; text-align:center; }
  .license-callout img { margin:0 auto; }
}
@media (max-width:640px) {
  .top-nav { flex-direction:column; gap:0.8rem; align-items:flex-start; }
  .hero-actions { flex-direction:column; }
}