:root {
  --navy:#071b2d;
  --navy2:#0b263e;
  --blue:#0878d1;
  --blue2:#18a0fb;
  --text:#102235;
  --muted:#647383;
  --light:#f4f7f9;
  --line:#dfe6eb;
  --white:#fff;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  scroll-behavior:smooth;
}

body {
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

a {
  color:inherit;
  text-decoration:none;
}

.container {
  width:min(1180px,calc(100% - 48px));
  margin:auto;
}

.header {
  position:absolute;
  z-index:20;
  width:100%;
  color:white;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.nav {
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border:2px solid var(--blue2);
  color:var(--blue2);
  font-size:24px;
  font-weight:800;
  transform:rotate(45deg);
}

.brand-mark::first-letter {
  transform:rotate(-45deg);
}

.brand strong {
  display:block;
  font-size:22px;
  letter-spacing:3px;
}

.brand small {
  display:block;
  font-size:9px;
  letter-spacing:1.5px;
  opacity:.7;
}

nav {
  display:flex;
  align-items:center;
  gap:31px;
  font-size:14px;
}

nav a {
  opacity:.9;
}

nav a:hover {
  opacity:1;
  color:#5fc1ff;
}

nav .cloud {
  border:1px solid rgba(255,255,255,.45);
  padding:10px 16px;
  border-radius:4px;
}

.hero {
  min-height:760px;
  background:
    linear-gradient(100deg,rgba(3,18,31,.96) 0%,rgba(5,29,49,.85) 48%,rgba(5,28,46,.4) 100%),
    radial-gradient(circle at 80% 40%,#1d638b,#061827 65%);
  color:white;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to left,#000,transparent 60%);
}

.hero-content {
  position:relative;
  z-index:2;
  padding-top:80px;
}

.eyebrow,
.section-label {
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:3px;
  margin-bottom:20px;
}

.hero h1 {
  font-size:clamp(54px,7vw,90px);
  line-height:.98;
  letter-spacing:-3px;
  max-width:850px;
}

.hero h1 span {
  color:#45b9ff;
}

.hero-text {
  margin-top:32px;
  max-width:650px;
  color:#c8d5df;
  font-size:19px;
}

.hero-actions {
  display:flex;
  gap:14px;
  margin-top:38px;
}

.btn {
  display:inline-flex;
  padding:14px 23px;
  border-radius:4px;
  font-weight:700;
}

.btn.primary {
  background:var(--blue);
  color:white;
}

.btn.secondary {
  border:1px solid rgba(255,255,255,.45);
}

.coordinates {
  position:absolute;
  right:38px;
  bottom:25px;
  z-index:3;
  font-family:monospace;
  font-size:11px;
  opacity:.5;
}

.intro {
  padding:110px 0;
}

.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}

h2 {
  font-size:clamp(36px,4vw,52px);
  line-height:1.08;
  letter-spacing:-1.5px;
}

.intro-copy {
  color:var(--muted);
  font-size:17px;
}

.intro-copy p + p {
  margin-top:22px;
}

.services {
  background:var(--light);
  padding:110px 0;
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:55px;
}

.section-head > p {
  max-width:440px;
  color:var(--muted);
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.service-card {
  min-height:310px;
  padding:31px;
  background:white;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:.25s ease;
}

.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 40px rgba(15,41,62,.08);
  z-index:2;
}

.service-card.featured {
  background:var(--navy);
  color:white;
}

.service-number {
  font-size:11px;
  color:#9ba9b4;
  font-family:monospace;
}

.service-icon {
  font-size:34px;
  color:var(--blue);
  margin:36px 0 22px;
}

.service-card h3 {
  font-size:20px;
  margin-bottom:12px;
}

.service-card p {
  font-size:14px;
  color:#758391;
}

.service-card.featured p {
  color:#a9bac8;
}

.technology {
  background:var(--navy);
  color:white;
  padding:110px 0;
  overflow:hidden;
}

.technology-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

.technology-visual {
  height:430px;
  position:relative;
  border:1px solid rgba(255,255,255,.15);
  overflow:hidden;
  background:#08243b;
}

.tech-grid-lines {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(50,165,235,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(50,165,235,.16) 1px,transparent 1px);
  background-size:38px 38px;
  transform:perspective(500px) rotateX(55deg) scale(1.6);
}

.target {
  width:140px;
  height:140px;
  border:1px solid #23a8f3;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.target::before,
.target::after {
  content:"";
  position:absolute;
  background:#23a8f3;
}

.target::before {
  height:1px;
  width:220px;
  left:-40px;
  top:69px;
}

.target::after {
  width:1px;
  height:220px;
  top:-40px;
  left:69px;
}

.target span {
  position:absolute;
  width:9px;
  height:9px;
  background:#23a8f3;
  border-radius:50%;
  top:65px;
  left:65px;
}

.point {
  position:absolute;
  width:7px;
  height:7px;
  background:#41bcff;
  border-radius:50%;
  box-shadow:0 0 20px #41bcff;
}

.p1 { left:20%; top:30%; }
.p2 { right:18%; top:20%; }
.p3 { right:28%; bottom:20%; }

.section-label.light {
  color:#43b8ff;
}

.technology-content p {
  color:#9fb2c1;
  font-size:17px;
  margin:28px 0;
}

.tech-list {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.tech-list span {
  border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;
  font-size:12px;
  color:#b9cad6;
}

.workflow {
  padding:110px 0;
}

.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:55px;
}

.step {
  padding:30px 32px;
  border-left:1px solid var(--line);
}

.step:last-child {
  border-right:1px solid var(--line);
}

.step strong {
  font-family:monospace;
  color:var(--blue);
  font-size:12px;
}

.step h3 {
  font-size:22px;
  margin:25px 0 10px;
}

.step p {
  color:var(--muted);
  font-size:14px;
}

.contact {
  background:#0b2b45;
  color:white;
  padding:105px 0;
}

.contact-grid {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:100px;
  align-items:center;
}

.contact p {
  color:#a9bbc9;
  max-width:600px;
  margin:25px 0;
}

.email {
  color:#51bcff;
  font-size:22px;
  font-weight:700;
}

.contact-card {
  background:white;
  color:var(--text);
  padding:38px;
  border-radius:5px;
}

.contact-card span {
  font-size:10px;
  letter-spacing:2px;
  color:var(--blue);
  font-weight:800;
}

.contact-card h3 {
  font-size:29px;
  margin:14px 0;
}

.contact-card p {
  color:var(--muted);
  margin:0 0 25px;
}

.contact-card a {
  color:var(--blue);
  font-weight:800;
}

footer {
  background:#061724;
  color:#7f93a2;
  padding:30px 0;
  font-size:12px;
}

.footer-grid {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-brand strong {
  color:white;
  letter-spacing:2px;
  margin-right:12px;
}

@media (max-width:950px) {
  nav a:not(.cloud) {
    display:none;
  }

  .service-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .intro-grid,
  .technology-grid,
  .contact-grid {
    grid-template-columns:1fr;
    gap:55px;
  }

  .steps {
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px) {
  .container {
    width:min(100% - 30px,1180px);
  }

  .nav {
    height:72px;
  }

  .brand small {
    display:none;
  }

  .hero {
    min-height:690px;
  }

  .hero h1 {
    font-size:52px;
    letter-spacing:-2px;
  }

  .hero-text {
    font-size:16px;
  }

  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
  }

  .service-grid,
  .steps {
    grid-template-columns:1fr;
  }

  .service-card {
    min-height:auto;
  }

  .section-head {
    display:block;
  }

  .section-head > p {
    margin-top:25px;
  }

  .technology-visual {
    height:300px;
  }

  .footer-grid {
    display:block;
  }

  .footer-grid > div + div {
    margin-top:10px;
  }
}

/* MARTRO HERO PHOTO */
.hero {
  background:
    linear-gradient(
      90deg,
      rgba(3, 18, 31, 0.92) 0%,
      rgba(3, 18, 31, 0.78) 38%,
      rgba(3, 18, 31, 0.40) 65%,
      rgba(3, 18, 31, 0.12) 100%
    ),
    url('/images/hero.png') center center / cover no-repeat;
}
cat >> /var/www/martro/css/style.css <<'EOF'

/* MARTRO SERVICE PHOTOS */
.service-card {
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(4, 20, 33, 0.12) 0%,
      rgba(4, 20, 33, 0.30) 38%,
      rgba(4, 20, 33, 0.92) 100%
    );
}

.service-card:nth-child(1) {
  background-image: url('/images/topografie.webp');
}

.service-card:nth-child(2) {
  background-image: url('/images/cadastru.webp');
}

.service-card:nth-child(3) {
  background-image: url('/images/cadastru-sistematic.webp');
}

.service-card:nth-child(4) {
  background-image: url('/images/fotogrammetrie-uav.webp');
}

.service-card:nth-child(5) {
  background-image: url('/images/produse-fotogrammetrice.webp');
}

.service-card:nth-child(6) {
  background-image: url('/images/masuratori-ingineresti.webp');
}

.service-card:nth-child(7) {
  background-image: url('/images/geodezie.webp');
}

.service-card:nth-child(8) {
  background-image: url('/images/date-geospatiale.webp');
}

.service-card .service-number {
  color: rgba(255,255,255,.70);
}

.service-card .service-icon {
  color: #4fc3ff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.service-card h3 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.service-card p,
.service-card.featured p {
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 45px rgba(7,27,45,.22);
}

@media (max-width:600px) {
  .service-card {
    min-height: 340px;
  }
}
EOF