/* =============================================================
   MaxDeploy — Delivery + Spec Sections
   Original visual design, scoped to body.page-products
   No reset / no fonts / no hero / no CTA (system handles those)

   Loaded after products.css via layout.
   ============================================================= */

/* ── Animation Variants ──
   System main.css handles [data-animate] → opacity:0, translateY(24px)
   and [data-animate].visible → opacity:1, translateY(0).
   We only add fadeRight/fadeLeft overrides here. */
[data-animate="fadeRight"] { transform: translateX(-24px); }
[data-animate="fadeLeft"]  { transform: translateX(24px); }
[data-animate="fadeRight"].visible,
[data-animate="fadeLeft"].visible { opacity: 1; transform: translate(0, 0); }

/* ── Float Animation ── */
@keyframes md-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes md-ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.anim-float-1 { animation: md-float 6s ease-in-out infinite; }
.anim-float-2 { animation: md-float 6s ease-in-out infinite 1.5s; }

/* ── Container ── */
.md-container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .md-container { padding-inline: 2rem; } }

/* ── Shared Tokens ── */
.md-g-text {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* sec-label: unified in hero.css */

/* ── Section ── */
.md-section { padding-block: 6rem; }
.md-section--white { background: #fff; }
.md-section--gray  { background: #f8fafc; }
.md-section-header { text-align: center; margin-bottom: 4rem; }
.md-section-heading {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.md-section-subtext {
  color: #475569;
  max-width: 40rem;
  margin-inline: auto;
  line-height: 1.7;
  font-size: 1rem;
}

/* ── Hero Pills (inside system hero) ── */
.md-hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.md-pill {
  display: inline-flex; align-items: center; gap: .375rem;
  border-radius: 9999px; padding: .3rem .85rem;
  font-size: .75rem; font-weight: 600;
}
.md-pill--cyan   { background: rgba(6,182,212,.08);   border: 1px solid rgba(6,182,212,.3);   color: #0891B2; }
.md-pill--violet { background: rgba(139,92,246,.1);   border: 1px solid rgba(139,92,246,.3);  color: #7C3AED; }
.md-pill--green  { background: rgba(16,185,129,.08);  border: 1px solid rgba(16,185,129,.3);  color: #047857; }


/* =============================================================
   DELIVERY SECTION
   ============================================================= */
.md-delivery-layout {
  display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center;
}
@media (min-width: 1024px) {
  .md-delivery-layout { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* Stack */
.md-stack { display: flex; flex-direction: column; align-items: center; gap: 0; }

.md-stack__card {
  width: 100%; border-radius: 1rem; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  position: relative; transition: transform .3s, box-shadow .3s;
}
.md-stack__card:hover { transform: translateY(-3px); }

.md-stack__card--violet {
  background: #fff; border: 1px solid rgba(139,92,246,.2);
  box-shadow: 0 4px 20px rgba(139,92,246,.08), 0 1px 3px rgba(0,0,0,.06);
}
.md-stack__card--violet:hover { box-shadow: 0 12px 36px rgba(139,92,246,.14), 0 0 0 1px rgba(139,92,246,.18); }
.md-stack__card--blue {
  background: #fff; border: 1px solid rgba(59,130,246,.2);
  box-shadow: 0 4px 20px rgba(59,130,246,.08), 0 1px 3px rgba(0,0,0,.06);
}
.md-stack__card--blue:hover { box-shadow: 0 12px 36px rgba(59,130,246,.14), 0 0 0 1px rgba(59,130,246,.18); }

.md-stack__icon {
  width: 2.75rem; height: 2.75rem; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.md-stack__icon--violet { background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.2); color: #7C3AED; }
.md-stack__icon--blue   { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); color: #1d4ed8; }

.md-stack__name { font-weight: 700; font-size: .9375rem; color: #0f172a; }
.md-stack__desc { font-size: .8125rem; color: #64748b; margin-top: .125rem; }

.md-stack__tag {
  margin-left: auto; flex-shrink: 0; font-size: .65rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 9999px; letter-spacing: .08em;
}
.md-stack__tag--violet { background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.2); color: #7C3AED; }
.md-stack__tag--blue   { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); color: #1d4ed8; }

/* Connector */
.md-stack__connector { display: flex; flex-direction: column; align-items: center; height: 2.5rem; position: relative; }
.md-stack__connector-line { width: 2px; flex: 1; background: linear-gradient(to bottom, rgba(59,130,246,.25), rgba(59,130,246,.5)); }
.md-stack__connector-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,.5);
}

/* Arrow */
.md-stack__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: #eff6ff; border: 1px solid rgba(59,130,246,.25);
  color: #1d4ed8; margin-block: .25rem;
}

/* Device Box */
.md-device {
  width: 100%; border-radius: 1.25rem; padding: 2rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border: 1px solid rgba(59,130,246,.25);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: .25rem; position: relative;
  box-shadow: 0 20px 48px rgba(15,23,42,.2), 0 0 0 1px rgba(59,130,246,.12);
}
.md-device__badge {
  position: absolute; top: -1rem;
  background: linear-gradient(135deg, #1d4ed8, #7C3AED);
  color: #fff; font-size: .65rem; font-weight: 700;
  padding: .3rem .9rem; border-radius: 9999px;
  letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(29,78,216,.4);
}
.md-device__icon-wrap {
  width: 4rem; height: 4rem; border-radius: .75rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 1rem;
}
.md-device__name { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -.015em; margin-bottom: .75rem; }
.md-device__name-accent { color: #60A5FA; }
.md-device__tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.md-device__tags span {
  padding: .25rem .75rem; border-radius: 9999px; font-size: .7rem; font-weight: 500;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #94A3B8;
}

/* Feature Cards */
.md-features { display: flex; flex-direction: column; gap: 1rem; }
.md-feat-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem; border-radius: 1rem;
  background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform .3s, box-shadow .3s;
}
.md-feat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(59,130,246,.08), 0 0 0 1px rgba(59,130,246,.12);
}
.md-feat-card__icon {
  width: 3rem; height: 3rem; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.md-feat-card__icon--blue   { background: rgba(59,130,246,.08);  border: 1px solid rgba(59,130,246,.2);  color: #1d4ed8; }
.md-feat-card__icon--violet { background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.2); color: #7C3AED; }
.md-feat-card__icon--amber  { background: rgba(245,158,11,.08);  border: 1px solid rgba(245,158,11,.2);  color: #b45309; }
.md-feat-card__icon--green  { background: rgba(16,185,129,.08);  border: 1px solid rgba(16,185,129,.2);  color: #047857; }
.md-feat-card__title { font-size: .9375rem; font-weight: 700; color: #0f172a; margin-bottom: .375rem; }
.md-feat-card__body  { font-size: .8125rem; color: #64748b; line-height: 1.65; }


/* =============================================================
   SPEC SECTION
   ============================================================= */
.md-spec-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .md-spec-layout { grid-template-columns: 18rem 1fr; gap: 4rem; } }

/* Intro Panel */
.md-spec-intro {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 1.5rem;
  padding: 2rem; box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
@media (min-width: 1024px) { .md-spec-intro { position: sticky; top: 6rem; } }

.md-spec-intro__icon-wrap {
  width: 3rem; height: 3rem; border-radius: .75rem;
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2);
  color: #1d4ed8; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.md-spec-intro__title  { font-size: 2.5rem; font-weight: 900; color: #0f172a; letter-spacing: -.04em; line-height: 1; margin-bottom: .375rem; }
.md-spec-intro__subtitle { font-size: 1rem; font-weight: 600; color: #1d4ed8; margin-bottom: 1.25rem; }
.md-spec-intro__body   { font-size: .875rem; color: #475569; line-height: 1.7; margin-bottom: 1.5rem; }
.md-spec-intro__hint {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .8rem; color: #64748b;
  background: #f8fafc; padding: .875rem 1rem;
  border-radius: .75rem; border: 1px solid #e2e8f0; line-height: 1.6;
}
.md-spec-intro__hint svg { color: #3b82f6; flex-shrink: 0; margin-top: .1rem; }

/* Spec Cards Grid */
.md-spec-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .md-spec-cards { grid-template-columns: repeat(3, 1fr); } }

/* Spec Card */
.md-spec-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 1.5rem;
  overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; cursor: default;
}
.md-spec-card:hover { transform: translateY(-6px); }
.md-spec-card--green:hover  { border-color: rgba(16,185,129,.3);  box-shadow: 0 20px 48px rgba(16,185,129,.1),  0 0 0 1px rgba(16,185,129,.2); }
.md-spec-card--blue:hover   { border-color: rgba(59,130,246,.3);  box-shadow: 0 20px 48px rgba(59,130,246,.1),  0 0 0 1px rgba(59,130,246,.2); }
.md-spec-card--teal:hover   { border-color: rgba(20,184,166,.3);  box-shadow: 0 20px 48px rgba(20,184,166,.1),  0 0 0 1px rgba(20,184,166,.2); }

/* Photo */
.md-spec-card__photo { position: relative; width: 100%; height: 9rem; overflow: hidden; }
.md-spec-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease-in-out; }
.md-spec-card:hover .md-spec-card__photo img { transform: scale(1.08); }
.md-spec-card__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255,255,255,.95) 10%, rgba(255,255,255,.4) 50%, transparent);
}

/* Status */
.md-spec-card__status {
  position: absolute; bottom: .75rem; left: .75rem;
  display: flex; align-items: center; gap: .375rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
.md-spec-card__dot {
  position: relative; width: .5rem; height: .5rem;
  display: flex; align-items: center; justify-content: center;
}
.md-spec-card__dot-ping {
  position: absolute; inset: 0; border-radius: 50%;
  animation: md-ping 1.5s cubic-bezier(0,.2,.8,1) infinite; opacity: .7;
}
.md-spec-card__dot::after {
  content: ''; width: .5rem; height: .5rem; border-radius: 50%;
  display: block; position: relative; z-index: 1;
}
.md-spec-card__dot--green .md-spec-card__dot-ping { background: #34D399; }
.md-spec-card__dot--green::after { background: #10B981; }
.md-spec-card__dot--blue  .md-spec-card__dot-ping { background: #60A5FA; }
.md-spec-card__dot--blue::after  { background: #3B82F6; }
.md-spec-card__dot--teal  .md-spec-card__dot-ping { background: #2DD4BF; }
.md-spec-card__dot--teal::after  { background: #14B8A6; }

/* Card Body */
.md-spec-card__body { padding: 1.25rem; }
.md-spec-card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #e2e8f0;
}
.md-spec-card__name { font-size: 1.125rem; font-weight: 800; color: #0f172a; margin-bottom: .2rem; letter-spacing: -.02em; }
.md-spec-card__tagline { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #64748b; }
.md-spec-card__icon-box {
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .2s;
}
.md-spec-card:hover .md-spec-card__icon-box { transform: scale(1.1); }
.md-spec-card__icon-box--green { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #047857; }
.md-spec-card__icon-box--blue  { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); color: #1d4ed8; }
.md-spec-card__icon-box--teal  { background: rgba(20,184,166,.08); border: 1px solid rgba(20,184,166,.2); color: #0d9488; }

/* Spec List */
.md-spec-list { list-style: none; display: flex; flex-direction: column; gap: .875rem; margin-bottom: 1rem; padding: 0; }
.md-spec-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.md-spec-list__key { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #64748b; flex-shrink: 0; }
.md-spec-list__dot { width: .375rem; height: .375rem; border-radius: 50%; flex-shrink: 0; }
.md-spec-list__dot--green { background: #10B981; }
.md-spec-list__dot--blue  { background: #3B82F6; }
.md-spec-list__dot--teal  { background: #14B8A6; }
.md-spec-list__val {
  font-weight: 700; font-size: .875rem; color: #0f172a;
  text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
}
.md-spec-list__val em { font-style: normal; font-size: .7rem; font-weight: 400; color: #64748b; }

/* Expand Hint */
.md-spec-card__expand-hint {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  font-size: .7rem; color: #64748b; letter-spacing: .08em;
  padding-top: .75rem; border-top: 1px dashed #e2e8f0;
  transition: opacity .25s, height .25s;
}
.md-spec-card:hover .md-spec-card__expand-hint {
  opacity: 0; height: 0; padding-top: 0; border-color: transparent; overflow: hidden;
}

/* Expand Detail */
.md-spec-card__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease-in-out; }
.md-spec-card:hover .md-spec-card__detail { grid-template-rows: 1fr; }
.md-spec-card__detail-inner {
  overflow: hidden; display: flex; flex-direction: column; gap: .625rem;
  opacity: 0; transition: opacity .4s .1s;
}
.md-spec-card:hover .md-spec-card__detail-inner { opacity: 1; }

.md-spec-detail-block {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem;
  padding: .75rem; display: flex; flex-direction: column; gap: .3rem;
  margin-top: .75rem; padding-top: 1rem; border-top: 1px dashed #e2e8f0;
}
.md-spec-detail-block__label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #64748b; }
.md-spec-detail-block__val   { font-size: .8rem; color: #334155; line-height: 1.6; }

.md-spec-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; padding-block: .375rem; border-bottom: 1px solid #e2e8f0; color: #64748b;
}
.md-spec-detail-row:last-child { border-bottom: none; }
.md-spec-detail-row span:last-child { font-weight: 600; color: #334155; }
.md-spec-detail-row--highlight { margin-top: .125rem; }
.md-spec-detail-row--highlight span:last-child { font-family: monospace; font-weight: 700; font-size: .875rem; }
.md-spec-detail-row--green span:last-child { color: #047857; }
.md-spec-detail-row--blue  span:last-child { color: #1d4ed8; }
.md-spec-detail-row--teal  span:last-child { color: #0d9488; }


/* =============================================================
   HERO: Green variant + Pillar Card (listing page)
   (for products listing page — needed when color=green)
   ============================================================= */
body.page-products .arch-card--green { border-color: rgba(16,185,129,.2); }
body.page-products .arch-card--green:hover { box-shadow: 0 20px 48px rgba(16,185,129,.12), 0 0 0 1px rgba(16,185,129,.2); }
body.page-products .arch-card--green .arch-card__link-text { color: #047857; }

/* Detail page green variants */
body.page-products .prod-header__icon--green  { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #047857; }
body.page-products .prod-header__tagline--green { color: #047857; font-size: 1.125rem; font-weight: 600; }
body.page-products .stat-box--green            { background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.15); }
body.page-products .stat-box--green .stat-box__value { color: #047857; }
body.page-products .val-check--green           { background: rgba(16,185,129,.1); color: #047857; }
body.page-products .cap-card__icon--green      { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #047857; }
body.page-products .chip--green                { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.15); color: #047857; }

/* 3-column pillar grid */
@media (min-width: 1024px) {
  body.page-products .arch-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 639px) {
  .md-section { padding-block: 4rem; }
  .md-spec-layout { gap: 2rem; }
  .md-delivery-layout { gap: 2.5rem; }
}