/* =========================================================
   ORIGINAL STYLES
========================================================== */
:root {
  --primary:#1a5555;
  --green:#6fc4b0;
  --navy:#0b1f33;
  --dark:#07151f;
  --text:#23333c;
  --muted:#71808a;
  --light:#f4f7f7;
  --white:#fff;
  --border:#dfe8e8;
  --max-width:1240px;
}

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

html {
  scroll-behavior:smooth;
}

body {
  font-family:"Noto Sans Thai",sans-serif;
  color:var(--text);
  line-height:1.8;
  background:white;
}

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

img {
  display:block;
  max-width:100%;
}

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

/* HERO */
.hero {
  min-height:720px;
  padding-top:86px;
  display:flex;
  align-items:center;
  color:white;
  background:
    linear-gradient(100deg,rgba(7,21,31,.97),rgba(11,31,51,.84)),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px;
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:70px;
  align-items:center;
}

.eyebrow,
.section-number,
.technical-label,
.footer-title {
  font-family:"DM Mono",monospace;
  letter-spacing:.12em;
  font-size:11px;
}

.eyebrow {
  color:var(--green);
  margin-bottom:20px;
}

.hero h1 {
  font-size:clamp(40px,5.5vw,70px);
  line-height:1.15;
  font-weight:600;
}

.hero h1 span {
  display:block;
  color:var(--green);
  font-family:"Manrope",sans-serif;
  font-size:clamp(20px,2.5vw,30px);
  letter-spacing:.08em;
  margin-top:18px;
}

.hero p {
  margin-top:25px;
  max-width:650px;
  color:rgba(255,255,255,.68);
}

.hero-image {
  position:relative;
  min-height:430px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
}

.hero-image img {
  width:100%;
  height:100%;
  min-height:430px;
  object-fit:cover;
}

.hero-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(7,21,31,.75),transparent 65%);
}

.image-label {
  position:absolute;
  z-index:2;
  bottom:20px;
  left:20px;
  font-family:"DM Mono",monospace;
  font-size:10px;
  letter-spacing:.1em;
  color:white;
}

/* GENERAL */
.section {
  padding:120px 0;
}

.light {
  background:var(--light);
}

.dark {
  background:var(--navy);
  color:white;
}

.two-column {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
}

.section-number {
  color:var(--primary);
}

h2 {
  font-size:clamp(30px,4vw,52px);
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.03em;
}

.content p {
  color:var(--muted);
  margin-top:20px;
}

/* FEATURES */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}

.feature {
  padding:35px;
  min-height:190px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.feature span {
  font-family:"DM Mono",monospace;
  font-size:11px;
  color:var(--primary);
}

.feature h3 {
  margin-top:20px;
  font-size:19px;
  font-weight:600;
}

.feature p {
  color:var(--muted);
  font-size:14px;
  margin-top:8px;
}

/* IMAGE SECTION */
.image-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.image-card {
  height:430px;
  overflow:hidden;
  position:relative;
  background:#dce5e5;
}

.image-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s;
}

.image-card:hover img {
  transform:scale(1.04);
}

.image-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(7,21,31,.65),transparent 60%);
}

.image-caption {
  position:absolute;
  left:22px;
  bottom:20px;
  z-index:2;
  color:white;
  font-family:"DM Mono",monospace;
  font-size:10px;
}

/* STANDARD */
.standard-box {
  padding:55px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.025);
}

.standard {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px;
}

.standard-code {
  font-family:"DM Mono",monospace;
  font-size:24px;
  color:var(--green);
}

.standard p {
  color:rgba(255,255,255,.58);
  font-size:14px;
}

.cta {
  background: var(--primary);
  color: white;
  padding: 100px 0;
}
.cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.cta h2 {
  margin: 0;
  font-weight: 500;
}
.cta p {
  color: rgba(255,255,255,.65);
  margin-top: 10px;
}
.cta a {
  background: white;
  color: var(--primary);
  padding: 17px 28px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
  transition: background-color .25s ease, color .25s ease;
  border-radius: 6px;
}
.cta a:hover {
  background: var(--navy);
  color: white;
}

/* REVEAL */
.reveal {
  opacity:0;
  transform:translateY(25px);
  transition:.8s ease;
}

.reveal.visible {
  opacity:1;
  transform:none;
}

/* FOOTER */
footer {
  background: #071522;
  color: white;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr .7fr .9fr;
  gap: 70px;
  padding: 75px 0;
}

.footer-brand p {
  max-width: 420px;
  margin-top: 20px;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  line-height: 1.9;
}

.footer-title {
  font-size: 12px;
  font-weight: 700;
}

.footer-links {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.footer-links a {
  color: rgba(255,255,255,.42);
  font-size: 12px;
}

.footer-links a:hover {
  color: #72c8b4;
}

.footer-contact {
  margin-top: 20px;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  line-height: 2;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.copyright,
.footer-code {
  color: rgba(255,255,255,.25);
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: .05em;
}


/* =========================================================
   RESPONSIVE
========================================================== */
@media (max-width: 900px) {
  .hero-grid,
  .two-column {
    grid-template-columns:1fr;
  }

  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
}

@media (max-width: 760px) {
  .container {
    width:calc(100% - 30px);
  }

  .hero {
    padding-top:76px;
    min-height:auto;
    padding-bottom:80px;
  }

  .hero-image {
    min-height:330px;
  }

  .hero-image img {
    min-height:330px;
  }

  .section {
    padding:80px 0;
  }

  .feature-grid,
  .image-section,
  .footer-main {
    grid-template-columns:1fr;
  }

  .standard-box {
    padding:30px;
  }

  .footer-bottom {
    flex-direction:column;
    gap:10px;
  }
}

/* =========================================================
   RELATED SERVICES
========================================================== */
.related-services {
  padding: 100px 0 80px;
}

.related-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 55px;
}

.related-header .section-number {
  display: inline-block;
}

.related-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.25;
  margin-top: 12px;
}

.related-header p {
  color: var(--muted);
  margin-top: 14px;
  font-size: 15px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.related-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(11,31,51,0.08);
  border-color: var(--primary);
}

.related-icon {
  font-size: 28px;
  margin-bottom: 18px;
}

.related-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 8px;
}

.related-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  flex: 1;
}

.related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  transition: gap 0.3s ease;
}

.related-card:hover .related-link {
  gap: 12px;
}

@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .related-services {
    padding: 70px 0 50px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .related-card {
    padding: 24px 20px;
  }
}