/* ============================================================
   AÉRO-DG Solutions — Homepage Stylesheet
   Design Concept: Elite Warm Black & Brand Amber Grid System
   ============================================================ */

/* ── HOMEPAGE CSS CUSTOM PROPERTIES ─────────────────────── */
:root {
  --hero-h1: clamp(72px, 11vw, 152px);
  --hero-it: clamp(60px, 9vw, 126px);
  --sec-h:   clamp(52px, 7.5vw, 96px);
  --sec-it:  clamp(44px, 6vw, 80px);
}

/* ── HERO SECTION ────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  background: var(--black2);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  padding-top: 0; /* Reset header offset, using relative overlay */
}

/* Ambient warmth top-left */
.hero-glow {
  position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(200,117,28,.07) 0%, transparent 70%);
  top: -120px; left: -120px; pointer-events: none;
}

/* Vertical rule at 58% */
.hero-rule {
  position: absolute; top: 0; bottom: 0; left: 58%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--bd2) 10%, var(--bd2) 90%, transparent 100%);
  pointer-events: none;
}

/* Top meta row */
.hero-top {
  position: relative; z-index: 2;
  padding: 30px 56px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.hero-meta-l {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk4); line-height: 2;
}
.hero-tags { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.htag {
  font-family: var(--font-body); font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--bd-amb);
  padding: 4px 12px; display: inline-block;
}

/* Stats strip — right of hero, absolute */
.hero-stats {
  position: absolute;
  right: 0; top: 80px; bottom: 170px;
  width: 42%;
  border-left: 1px solid var(--bd2);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 52px; z-index: 1;
}
.hst {
  padding: 26px 0;
  border-bottom: 1px solid var(--bd);
  display: flex; flex-direction: column; gap: 5px;
}
.hst:last-child { border-bottom: none; }
.hst-val {
  font-family: var(--font-display);
  font-size: clamp(42px,5.5vw,64px);
  letter-spacing: .02em; color: var(--chalk); line-height: 1;
}
.hst-val em { font-style: normal; color: var(--amber); font-size: .65em; }
.hst-lbl {
  font-family: var(--font-body); font-size: 9px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--chalk4);
}

/* MAIN HEADLINE */
.hero-hl {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 56px; position: relative; z-index: 2;
  padding-bottom: 0;
}
.hl-eyebrow {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 8px;
  display: flex; align-items: center; gap: 14px;
}
.hl-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--amber); }

.hl-h1 {
  font-family: var(--font-display);
  font-size: var(--hero-h1);
  line-height: .88; letter-spacing: .01em;
  color: var(--chalk); text-transform: uppercase;
}
.hl-h1 .w-amber { color: var(--amber); }
.hl-h1 .w-indent { display: block; padding-left: clamp(48px,8vw,130px); }
.hl-h1 .w-serif {
  font-family: var(--font-serif);
  font-style: italic; text-transform: none;
  font-size: var(--hero-it);
  color: var(--amber-xl);
  letter-spacing: -.01em;
  display: block; line-height: 1.05;
  font-weight: 700;
}

/* Hero bottom bar */
.hero-bar {
  position: relative; z-index: 2;
  border-top: 1px solid var(--bd2);
  margin-top: 36px;
  display: grid; grid-template-columns: 58% 42%;
}
.hbar-l {
  padding: 24px 56px; border-right: 1px solid var(--bd2);
  display: flex; align-items: center;
}
.hero-p {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 300;
  color: var(--chalk3); line-height: 1.8; max-width: 460px;
}
.hbar-r {
  padding: 24px 44px;
  display: flex; align-items: center; gap: 18px;
}

/* Buttons */
.btn-a {
  background: var(--amber); color: var(--black);
  padding: 13px 28px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; display: inline-block;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap; border: none; cursor: pointer;
}
.btn-a:hover { background: var(--amber-hi); box-shadow: 0 0 36px rgba(200,117,28,.3); }

.btn-b {
  color: var(--chalk3);
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; display: flex; align-items: center; gap: 8px;
  transition: color .15s; white-space: nowrap;
  background: none; border: none; cursor: pointer;
}
.btn-b .arr { transition: transform .15s; display: inline-block; }
.btn-b:hover { color: var(--chalk); }
.btn-b:hover .arr { transform: translateX(4px); }

.btn-c {
  border: 1px solid var(--bd-amb); color: var(--amber);
  padding: 12px 28px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; display: inline-block;
  transition: all .2s; white-space: nowrap;
}
.btn-c:hover { background: var(--amber); color: var(--black); box-shadow: 0 0 28px rgba(200,117,28,.24); }

/* ── TICKER ────────────────────────────────────────────── */
.ticker { background: var(--amber); overflow: hidden; }
.ticker-track {
  display: flex; white-space: nowrap;
  animation: scroll 22s linear infinite;
}
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.t-item {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: .16em; color: var(--black); text-transform: uppercase;
  padding: 13px 30px; flex-shrink: 0;
}
.t-sep { color: rgba(8,7,6,.28); padding: 13px 0; flex-shrink: 0; font-size: 7px; }

/* ── SECTION TYPOGRAPHY ────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--amber); }

.sec-h {
  font-family: var(--font-display);
  font-size: var(--sec-h);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--chalk); line-height: .9;
}
.sec-h em {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--sec-it); text-transform: none;
  color: var(--amber-xl); letter-spacing: -.01em;
  display: block; line-height: 1.12; font-weight: 700;
}
.sec-p {
  font-family: var(--font-body); font-size: 13px; font-weight: 300;
  color: var(--chalk3); line-height: 1.85;
}

/* ── SERVICES ──────────────────────────────────────────── */
.services { background: var(--black2); border-bottom: 1px solid var(--bd2); }
.svc-head {
  padding: 84px 56px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
  border-bottom: 1px solid var(--bd2);
}
.svc-head .sec-p { border-left: 2px solid var(--bd-amb); padding-left: 18px; align-self: end; }

.svc-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  background: var(--bd); gap: 1px;
}
.svc-card {
  background: var(--black2); padding: 46px 40px;
  position: relative; overflow: hidden;
  transition: background .22s; cursor: default;
}
.svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.svc-card:hover { background: var(--black3); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover .svc-n { color: var(--amber); }
.svc-card:hover .svc-arr { opacity: 1; transform: translate(0,0); }

.svc-n {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .1em;
  color: var(--black5); margin-bottom: 24px;
  transition: color .2s;
}
.svc-name {
  font-family: var(--font-display); font-size: 28px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--chalk); line-height: .98;
  margin-bottom: 14px;
}
.svc-name em {
  font-family: var(--font-serif); font-style: italic;
  font-size: 22px; text-transform: none;
  color: var(--amber-xl); letter-spacing: -.01em; font-weight: 700;
}
.svc-txt {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 300;
  color: var(--chalk3); line-height: 1.78;
}
.svc-arr {
  position: absolute; bottom: 28px; right: 28px;
  font-size: 18px; color: var(--amber);
  opacity: 0; transform: translate(-7px,7px);
  transition: all .26s;
}

/* ── PROCESS ───────────────────────────────────────────── */
.process {
  background: var(--black); padding: 100px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 88px;
  align-items: start;
  border-bottom: 1px solid var(--bd2);
}
.psteps { margin-top: 44px; }
.pstep {
  display: grid; grid-template-columns: 36px 1fr; gap: 18px;
  padding: 24px 0; border-bottom: 1px solid var(--bd);
}
.pstep:first-child { border-top: 1px solid var(--bd); }
.pn {
  font-family: var(--font-display); font-size: 13px; letter-spacing: .06em;
  color: var(--amber); padding-top: 2px;
}
.pt {
  font-family: var(--font-display); font-size: 21px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--chalk); margin-bottom: 7px; line-height: 1.1;
}
.pd {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 300;
  color: var(--chalk3); line-height: 1.78;
}

.metrics { border: 1px solid var(--bd2); }
.metric { padding: 28px 34px; border-bottom: 1px solid var(--bd2); transition: background .18s; }
.metric:last-child { border-bottom: none; }
.metric:hover { background: var(--black3); }
.m-lbl {
  font-family: var(--font-body); font-size: 8.5px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 8px;
}
.m-val {
  font-family: var(--font-display); font-size: 44px;
  letter-spacing: .02em; color: var(--chalk); line-height: 1; margin-bottom: 4px;
}
.m-desc {
  font-family: var(--font-body); font-size: 12px; font-weight: 300;
  color: var(--chalk3); line-height: 1.65;
}

/* ── NOD EMERGENCY ─────────────────────────────────────── */
.nod {
  background: var(--black2); border-bottom: 1px solid var(--bd2);
  display: grid; grid-template-columns: 1fr auto;
}
.nod-text {
  padding: 80px 56px; border-right: 1px solid var(--bd2);
}
.nod-h {
  font-family: var(--font-display);
  font-size: clamp(52px,7.5vw,100px);
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--chalk); line-height: .9; margin-bottom: 20px;
}
.nod-h em {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(40px,5.5vw,72px); text-transform: none;
  color: var(--amber-xl); letter-spacing: -.01em;
  display: block; line-height: 1.1; font-weight: 700;
}
.nod-side {
  padding: 80px 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.nod-big {
  font-family: var(--font-display);
  font-size: 86px; letter-spacing: .02em;
  color: var(--amber); line-height: 1; text-align: center;
}
.nod-lbl {
  font-family: var(--font-body); font-size: 9px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk4); text-align: center; margin-bottom: 18px;
}

/* ── TESTIMONIALS ──────────────────────────────────────── */
.testimonials {
  background: var(--black3); border-bottom: 1px solid var(--bd2);
  padding: 100px 56px;
}
.test-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--bd); border: 1px solid var(--bd);
  margin-top: 48px;
}
.test-card {
  background: var(--black3); padding: 38px 34px;
  transition: background .2s;
}
.test-card:hover { background: var(--black4); }
.stars { color: var(--amber); font-size: 12px; letter-spacing: 3px; margin-bottom: 18px; }
.test-q {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15.5px; color: var(--chalk2);
  line-height: 1.62; margin-bottom: 22px; letter-spacing: -.01em;
}
.test-who {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chalk4);
}
.test-who em { font-style: normal; color: var(--amber); }

/* ── ABOUT ─────────────────────────────────────────────── */
.about {
  background: var(--black2); border-bottom: 1px solid var(--bd2);
  padding: 100px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.about-q {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px,2.2vw,27px);
  color: var(--chalk2); line-height: 1.57; letter-spacing: -.01em;
  border-left: 2px solid var(--amber); padding-left: 26px; margin-bottom: 24px;
}
.about-cite {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--chalk4);
  display: flex; align-items: center; gap: 10px;
}
.about-cite::before { content: ''; width: 16px; height: 1px; background: var(--amber); }
.pillars { display: flex; flex-direction: column; }
.pillar {
  display: grid; grid-template-columns: 36px 1fr; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--bd);
}
.pillar:first-child { border-top: 1px solid var(--bd); }
.pil-n {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .06em;
  color: var(--amber); padding-top: 2px;
}
.pil-t {
  font-family: var(--font-display); font-size: 19px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--chalk); margin-bottom: 5px;
}
.pil-d {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 300;
  color: var(--chalk3); line-height: 1.72;
}

/* ── EMERGENCY FAB ─────────────────────────────────────── */
.fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 800;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.fab-tip {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); background: var(--black3);
  border: 1px solid var(--bd-amb); padding: 4px 10px;
  opacity: 0; transition: opacity .2s; pointer-events: none;
  white-space: nowrap;
}
.fab:hover .fab-tip { opacity: 1; }
.fab-btn {
  width: 54px; height: 54px;
  background: var(--amber); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; text-decoration: none;
  position: relative; transition: background .15s;
}
.fab-btn:hover { background: var(--amber-hi); }
.fab-btn::after {
  content: '';
  position: absolute; inset: -3px;
  border: 2px solid rgba(200,117,28,.6);
  animation: fab-ring 2.2s ease-out infinite;
}
@keyframes fab-ring {
  0%   { inset: -3px; opacity: .7; }
  100% { inset: -12px; opacity: 0; }
}

/* ── SCROLL REVEAL ─────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── CONCEPT BANNER ────────────────────────────────────── */
.banner {
  background: var(--amber); padding: 10px 56px;
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--black); text-align: center;
}

/* ── TABLET RESPONSIVE ══════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero */
  .hero-stats { display: none; }
  .hero-rule { display: none; }
  .hero-top { padding: 22px 32px; }
  .hero-hl { padding: 0 32px; }
  .hl-h1 .w-indent { padding-left: clamp(36px,6vw,72px); }
  .hero-bar { grid-template-columns: 1fr; }
  .hbar-l { padding: 20px 32px; border-right: none; border-bottom: 1px solid var(--bd2); }
  .hbar-r { padding: 18px 32px; gap: 14px; }

  /* Services */
  .svc-head { padding: 60px 32px 36px; grid-template-columns: 1fr; gap: 22px; }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .svc-card { padding: 36px 28px; }

  /* Process */
  .process { padding: 72px 32px; grid-template-columns: 1fr; gap: 44px; }
  .metrics { display: grid; grid-template-columns: 1fr 1fr; }
  .metric:nth-child(even) { border-left: 1px solid var(--bd2); }

  /* NOD */
  .nod { grid-template-columns: 1fr; }
  .nod-text { border-right: none; border-bottom: 1px solid var(--bd2); padding: 60px 32px; }
  .nod-side { padding: 44px 32px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 36px; }
  .nod-big { font-size: 68px; }

  /* Testimonials */
  .testimonials { padding: 72px 32px; }
  .test-grid { grid-template-columns: 1fr 1fr; }
  .test-card:nth-child(3) { display: none; }

  /* About */
  .about { padding: 72px 32px; grid-template-columns: 1fr; gap: 44px; }
}

/* ── MOBILE RESPONSIVE ══════════════════════════════════ */
@media (max-width: 640px) {
  .hero-top { padding: 16px 20px; }
  .hero-tags { display: none; }
  .hero-meta-l { font-size: 9px; }
  .hero-hl { padding: 0 20px; }
  .hl-eyebrow { font-size: 9px; letter-spacing: .18em; }
  .hl-h1 .w-indent { padding-left: 28px; }
  .hero-bar { grid-template-columns: 1fr; margin-top: 22px; }
  .hbar-l { padding: 16px 20px; border-right: none; border-bottom: 1px solid var(--bd2); }
  .hero-p { font-size: 13px; }
  .hbar-r { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-a { width: 100%; text-align: center; padding: 14px 20px; }

  .svc-head { padding: 48px 20px 28px; grid-template-columns: 1fr; gap: 18px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { padding: 30px 20px; border-right: none !important; }
  .svc-arr { display: none; }

  .process { padding: 56px 20px; grid-template-columns: 1fr; gap: 38px; }
  .metrics { display: flex; flex-direction: column; }
  .metric:nth-child(even) { border-left: none; }
  .m-val { font-size: 36px; }

  .nod { grid-template-columns: 1fr; }
  .nod-text { padding: 48px 20px; }
  .nod-side { padding: 36px 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .nod-big { font-size: 60px; }
  .nod-lbl { text-align: left; margin-bottom: 12px; }
  .btn-c { width: 100%; text-align: center; }

  .testimonials { padding: 56px 20px; }
  .test-grid { grid-template-columns: 1fr; }
  .test-card:nth-child(2),.test-card:nth-child(3) { display: none; }

  .about { padding: 56px 20px; grid-template-columns: 1fr; gap: 36px; }
  .about-q { font-size: 17px; }

  .fab { bottom: 16px; right: 16px; }
  .fab-btn { width: 50px; height: 50px; font-size: 20px; }
  .banner { padding: 10px 20px; font-size: 9px; }
}