/* ============================================================
   home.css — HTS Engineering v3
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  background: linear-gradient(135deg, #07101d 0%, #0c1a31 48%, #14355a 100%);
  color: #fff;
  padding: 1.25rem 0 5rem;
  overflow: hidden;
}
.home-hero__bg { position: absolute; inset: 0; pointer-events: none }
.home-hero__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .2;
}
.home-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.home-hero__glow--1 { width: 600px; height: 600px; top: -200px; right: -100px; background: rgba(14,165,233,.18) }
.home-hero__glow--2 { width: 400px; height: 400px; bottom: -100px; left: -100px; background: rgba(56,189,248,.1) }
.home-hero .breadcrumb { border-color: rgba(255,255,255,.08); margin-bottom: var(--sp-xl) }
.home-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; position: relative; z-index: 1 }
.home-hero__copy { display: flex; flex-direction: column; gap: 1.5rem }
.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #fff;
}
.home-hero__title em { color: var(--clr-accent); font-style: italic }
.home-hero__lead { font-size: 1.0625rem; color: rgba(255,255,255,.68); line-height: 1.8; max-width: 580px }
.home-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap }
.home-hero__proof { display: grid; grid-template-columns: repeat(4,1fr); gap: .875rem }
.proof-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 1.125rem 1rem; backdrop-filter: blur(8px); text-align: center }
.proof-chip strong { display: block; font-size: 1.625rem; font-weight: 900; color: var(--clr-accent); line-height: 1.1; margin-bottom: .375rem }
.proof-chip span { font-size: .75rem; color: rgba(255,255,255,.55); line-height: 1.4 }

/* Visual frame */
.home-hero__frame {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 1.25rem;
  box-shadow: 0 40px 100px rgba(2,8,23,.4);
  backdrop-filter: blur(10px);
  position: relative;
}
.home-hero__frame-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem }
.home-hero__dots { display: flex; gap: .375rem }
.home-hero__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3) }
.home-hero__frame-label { font-size: .625rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4) }
.home-hero__media { display: grid; grid-template-columns: 1.1fr .9fr; gap: .875rem }
.home-hero__img-main { position: relative; border-radius: 20px; overflow: hidden; min-height: 380px; background: var(--clr-border) }
.home-hero__img-main img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0 }
.home-hero__img-cap { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; padding: .75rem 1rem; border-radius: 12px; background: rgba(7,16,29,.72); backdrop-filter: blur(8px); color: #fff; font-size: .75rem; line-height: 1.5; border: 1px solid rgba(255,255,255,.1) }
.home-hero__img-cap strong { display: block; font-size: .8125rem; margin-bottom: .25rem }
.home-hero__img-stack { display: grid; gap: .875rem }
.home-hero__img-stack figure { border-radius: 18px; overflow: hidden; min-height: 176px; background: var(--clr-border) }
.home-hero__img-stack img { width:100%;height:100%;object-fit:cover }
.home-hero__float-card { position: absolute; right: -1rem; bottom: 1.25rem; width: 240px; padding: 1.125rem; border-radius: 18px; background: #fff; color: var(--clr-text); box-shadow: var(--shadow-xl); z-index: 2 }
.home-hero__float-card strong { display: block; font-size: .9375rem; font-weight: 800; margin-bottom: .375rem }
.home-hero__float-card p { font-size: .75rem; color: var(--clr-text-muted); margin: 0 }

/* ── TRUST STRIP ──────────────────────────────────────────── */
.home-trust { background: var(--clr-soft); border-bottom: 1px solid var(--clr-border); padding-block: 1.125rem }
.home-trust__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem }
.home-trust__item { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; font-weight: 600; color: var(--clr-text-muted) }
.home-trust__item strong { font-size: .8125rem; color: var(--clr-text) }
.home-trust__item span { font-size: .6875rem; color: var(--clr-text-muted) }
.home-trust__icon { font-size: 1.125rem; flex-shrink: 0 }

/* ── OVERVIEW ─────────────────────────────────────────────── */
.home-overview__grid { display: grid; grid-template-columns: 1fr 420px; gap: 3rem; align-items: start }
.home-overview__answer { background: linear-gradient(180deg, var(--clr-soft) 0%, #f1f7fd 100%); border: 1px solid var(--clr-border-2); border-radius: var(--radius); padding: 2.5rem }
.home-overview__list { display: grid; gap: .875rem; margin-top: 1.25rem; list-style: none; padding: 0 }
.home-overview__item { display: flex; gap: .875rem; align-items: flex-start; padding: .875rem 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--clr-border) }
.home-overview__check { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #dbeafe; color: #1d4ed8; font-weight: 900; font-size: .875rem }
.home-overview__dark-card { background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-2) 100%); border-radius: var(--radius); padding: 2rem; color: #fff }
.home-overview__chips { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.25rem 0 }
.home-overview__chip { padding: .5rem .875rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: .8125rem; font-weight: 700; color: rgba(255,255,255,.8) }
.home-overview__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; margin-bottom: 1.5rem }
.home-overview__metrics > div { background: rgba(255,255,255,.04); padding: 1.125rem; text-align: center }
.home-overview__metrics strong { display: block; font-size: 1.75rem; font-weight: 700; color: var(--clr-accent); line-height: 1 }
.home-overview__metrics span { font-size: .6875rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .05em }
.home-overview__img { border-radius: 16px; overflow: hidden; margin-top: 0 }
.home-overview__img img { width:100%;height:auto;object-fit:cover }

/* ── SERVICES ─────────────────────────────────────────────── */
.home-svc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: var(--sp-2xl); flex-wrap: wrap }
.home-svc__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem }
.home-svc__card { padding: 1.625rem }
.home-svc__icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem }
.home-svc__cat { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem }
.home-svc__card h3 { font-size: 1rem; font-weight: 800; margin-bottom: .625rem }
.home-svc__card p { font-size: .875rem; color: var(--clr-text-muted); line-height: 1.65; margin-bottom: 1rem }

/* ── SOLUTIONS ─────────────────────────────────────────────── */
.home-sol__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: var(--sp-2xl); flex-wrap: wrap }
.home-sol__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem }
.home-sol__card { border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden; transition: transform var(--t-base); background: rgba(255,255,255,.04) }
.home-sol__card:hover { transform: translateY(-4px) }
.home-sol__img { aspect-ratio: 16/10; overflow: hidden; background: rgba(255,255,255,.06) }
.home-sol__img img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease }
.home-sol__card:hover .home-sol__img img { transform: scale(1.05) }
.home-sol__body { padding: 1.375rem }
.home-sol__body h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .5rem }
.home-sol__body p { font-size: .875rem; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 1rem }
.home-sol__link { font-size: .8125rem; font-weight: 700; color: var(--clr-accent); transition: gap .2s }

/* ── WHY ──────────────────────────────────────────────────── */
.home-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center }
.home-why__photo { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 520px }
.home-why__photo img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0 }
.home-why__photo-badge { position: absolute; bottom: 1.5rem; left: 1.5rem; padding: 1rem 1.25rem; border-radius: 16px; background: rgba(7,16,29,.8); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,.12) }
.home-why__photo-badge strong { display: block; font-size: 1.125rem; font-weight: 800; margin-bottom: .25rem }
.home-why__photo-badge span { font-size: .75rem; color: rgba(255,255,255,.6) }
.home-why__feats { display: grid; gap: 1.125rem; margin-top: 1.5rem }
.home-why__feat { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.125rem; border-radius: 16px; background: var(--clr-soft); border: 1px solid var(--clr-border) }
.home-why__feat-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: .125rem }
.home-why__feat strong { display: block; font-size: .9375rem; font-weight: 700; margin-bottom: .25rem }
.home-why__feat p { font-size: .875rem; color: var(--clr-text-muted); line-height: 1.65; margin: 0 }

/* ── PROJECTS ─────────────────────────────────────────────── */
.home-proj__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: var(--sp-2xl); flex-wrap: wrap }
.home-proj__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem }
.home-proj__card { overflow: hidden }
.home-proj__img { aspect-ratio: 16/10; overflow: hidden; background: var(--clr-border) }
.home-proj__img img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease }
.home-proj__card:hover .home-proj__img img { transform: scale(1.05) }
.home-proj__body { padding: 1.5rem }
.home-proj__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem }
.home-proj__body h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem }

/* ── KNOWLEDGE ────────────────────────────────────────────── */
.home-kt__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: var(--sp-2xl); flex-wrap: wrap }
.home-kt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem }
.home-kt__card { overflow: hidden }
.home-kt__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem }
.home-kt__body h3 { font-size: 1rem; font-weight: 700; line-height: 1.4 }
.home-kt__body h3 a { color: var(--clr-text); transition: color .2s }
.home-kt__body h3 a:hover { color: var(--clr-primary) }
.home-kt__body p { font-size: .875rem; color: var(--clr-text-muted); line-height: 1.65 }

/* ── CTA ──────────────────────────────────────────────────── */
.home-cta {
  position: relative;
  background: linear-gradient(135deg, var(--clr-bg) 0%, var(--clr-bg-2) 52%, #123053 100%);
  padding-block: var(--sp-4xl);
  overflow: hidden;
}
.home-cta__bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.home-cta__inner { position: relative; display: grid; grid-template-columns: 1fr 420px; gap: 3rem; align-items: center }
.home-cta__title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; color: #fff; letter-spacing: -.04em; line-height: 1.1; margin-bottom: .875rem }
.home-cta__desc { font-size: 1.0625rem; color: rgba(255,255,255,.62); margin-bottom: 1.5rem }
.home-cta__benefits { display: grid; gap: .75rem }
.home-cta__benefit { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: .9375rem; color: rgba(255,255,255,.8) }
.home-cta__benefit svg { color: var(--clr-accent); flex-shrink: 0; margin-top: 3px }
.home-cta__form-card { background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-xl) }
.hts-form { display: grid; gap: 1rem }
.hts-form__field label { display: block; font-size: .875rem; font-weight: 700; margin-bottom: .5rem; color: var(--clr-text) }
.hts-form__field input,
.hts-form__field select,
.hts-form__field textarea { width: 100%; padding: .875rem 1rem; border-radius: 12px; border: 1px solid var(--clr-border); background: #fff; font-size: .9375rem; transition: border-color .2s, box-shadow .2s }
.hts-form__field input:focus,
.hts-form__field select:focus,
.hts-form__field textarea:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(14,165,233,.12) }
.hts-form__field textarea { resize: vertical; min-height: 90px }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .home-svc__grid { grid-template-columns: repeat(3, 1fr) }
  .home-sol__grid { grid-template-columns: repeat(2, 1fr) }
  .home-hero__inner { grid-template-columns: 1fr }
  .home-hero__visual { display: none }
  .home-overview__grid { grid-template-columns: 1fr }
  .home-cta__inner { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
  .home-svc__grid { grid-template-columns: 1fr 1fr }
  .home-proj__grid,
  .home-kt__grid { grid-template-columns: 1fr 1fr }
  .home-why__grid { grid-template-columns: 1fr }
  .home-hero__proof { grid-template-columns: 1fr 1fr }
}
@media (max-width: 540px) {
  .home-svc__grid,
  .home-sol__grid,
  .home-proj__grid,
  .home-kt__grid { grid-template-columns: 1fr }
}