/* ============================================================================
   ATERA TRANSITION - PROFESSIONAL DESIGN LAYER (pro.css)
   Loaded after style.css / custom.css; overrides and extends them.

   Techniques (all plain CSS, no plugin):
   - Fixed-background "slide-over" sections: the picture stays still
     (background-attachment: fixed) while content scrolls over it, then it
     is released when the section ends.
   - Sticky card stacks: cards pin and pile up over the static picture.
   - Transparent glass header that solidifies on scroll.
   Mobile / touch devices and prefers-reduced-motion get safe fallbacks.
   ============================================================================ */

:root {
  --pro-gold: #e8b032;
  --pro-gold-ink: #231a02;
  --pro-glass: rgba(8, 28, 44, 0.74);
  --pro-glass-soft: rgba(255, 255, 255, 0.045);
  --pro-line: rgba(255, 255, 255, 0.10);
  --pro-radius: 20px;
  --pro-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --pro-header-h: 78px;
}

/* sticky + background-attachment need an ancestor that is NOT a scroll
   container: overflow-x:hidden would silently break both. */
#page.site { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { background: var(--bg-dark); }

/* ------------------------------------------------------------------ */
/* Typography polish                                                   */
/* ------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-teal);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section-header { text-align: left; max-width: 760px; margin: 0 0 3.25rem; }
.section-title  { text-align: left; max-width: 760px; margin: 0 0 3rem; }
.section-header h2,
.section-title h2,
.about-section h2,
.services-overview-section h2,
.featured-projects-section h2,
.technology-stack-section h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.1;
  color: var(--text-white);
  font-weight: 400;
  display: block;
  margin-bottom: 1rem;
}
.section-header p,
.section-subtitle,
.section-description { margin-left: 0; margin-right: 0; font-size: 1.12rem; line-height: 1.7; }
.about-section > .section-container > p,
.services-overview-section > .section-container > p,
.featured-projects-section > .section-container > p,
.technology-stack-section > .section-container > p {
  color: var(--text-gray);
  font-size: 1.12rem;
  max-width: 720px;
  margin: 0 0 2.75rem;
  line-height: 1.7;
}
.gradient-text {
  background: linear-gradient(100deg, var(--primary-cyan), var(--pro-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Header: glass, transparent on the home hero                         */
/* ------------------------------------------------------------------ */
.site-header {
  background: rgba(8, 28, 44, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--pro-line);
  box-shadow: none;
  padding: 0;
  transition: background 0.35s var(--pro-ease), box-shadow 0.35s var(--pro-ease);
}
.site-header .header-container { min-height: var(--pro-header-h); }
.site-header.scrolled {
  background: rgba(6, 22, 35, 0.92);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}
body.home .site-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.home .site-header.scrolled {
  background: rgba(6, 22, 35, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--pro-line);
}
.admin-bar.home .site-header { top: 32px; }

.primary-menu a {
  font-family: var(--font-ui);
  font-size: 0.8rem !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.header-actions { display: flex; align-items: center; gap: 1rem; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  background: var(--pro-gold);
  color: var(--pro-gold-ink) !important;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s var(--pro-ease), box-shadow 0.25s var(--pro-ease);
  white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232, 176, 50, 0.35); }
.main-navigation { flex: 1; justify-content: center; }
.header-container { gap: 1.5rem; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.cta-button,
.cta-button.primary,
.cta-button:not(.secondary):not(.outline) {
  background: var(--pro-gold);
  color: var(--pro-gold-ink) !important;
  border: 0;
  border-radius: 999px;
  padding: 1rem 2rem;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 28px rgba(232, 176, 50, 0.22);
  transition: transform 0.25s var(--pro-ease), box-shadow 0.25s var(--pro-ease), background 0.25s;
}
.cta-button:hover,
.cta-button.primary:hover,
.cta-button:not(.secondary):not(.outline):hover {
  background: #f2bf45;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(232, 176, 50, 0.34);
}
.cta-button::after { content: "\2192"; margin-left: 0.6rem; transition: transform 0.25s var(--pro-ease); display: inline-block; }
.cta-button:hover::after { transform: translateX(4px); }
.hero-section .hero-cta .cta-button.secondary,
.cta-button.secondary {
  background: transparent;
  color: var(--text-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  text-decoration: none;
  padding: 1rem 2rem;
}
.hero-section .hero-cta .cta-button.secondary:hover,
.cta-button.secondary:hover { background: rgba(255,255,255,0.08); border-color: #fff; transform: translateY(-3px); box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Generic glass cards                                                 */
/* ------------------------------------------------------------------ */
.card,
.about-card,
.service-preview-card,
.project-preview-card,
.project-card,
.faq-item,
.contact-card,
.news-card,
.coverage-item,
.stakeholder-card {
  background: var(--pro-glass-soft);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.35s var(--pro-ease), border-color 0.35s, box-shadow 0.35s, background 0.35s;
}
.card:hover,
.about-card:hover,
.service-preview-card:hover,
.project-preview-card:hover,
.project-card:hover,
.news-card:hover,
.coverage-item:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 174, 143, 0.55);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ */
/* HOME HERO (full-viewport, fixed picture, proof cards, trust strip)  */
/* ------------------------------------------------------------------ */
.hero-pro {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--pro-header-h) + 70px) 0 150px;
  text-align: left;
  overflow: hidden;
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(90deg, rgba(5, 20, 32, 0.92) 0%, rgba(5, 20, 32, 0.68) 45%, rgba(5, 20, 32, 0.15) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
  background-attachment: scroll, fixed;
}
.hero-pro::before { display: none; }
.hero-pro .hero-grid {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}
.hero-pro .hero-content { max-width: 760px; margin: 0; text-align: left; }
.hero-pro .hero-title {
  font-size: clamp(2.5rem, 5.6vw, 4.9rem);
  line-height: 1.04;
  color: var(--text-white);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
}
.hero-pro .hero-title em {
  font-style: italic;
  background: linear-gradient(100deg, var(--primary-teal), var(--pro-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-pro .hero-subtitle {
  margin: 0 0 2.3rem;
  max-width: 600px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.hero-pro .hero-cta { justify-content: flex-start; align-items: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--pro-line);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 1.7rem;
}
.hero-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-teal); box-shadow: 0 0 0 0 rgba(47,174,143,.6); animation: pro-pulse 2.2s infinite; }
@keyframes pro-pulse { 70% { box-shadow: 0 0 0 10px rgba(47,174,143,0); } 100% { box-shadow: 0 0 0 0 rgba(47,174,143,0); } }

/* floating proof cards */
.hero-proof { position: relative; display: grid; gap: 1.1rem; justify-items: end; }
.proof-card {
  width: min(100%, 360px);
  padding: 1.25rem 1.4rem;
  border-radius: 18px;
  background: rgba(8, 28, 44, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  animation: pro-float 7s ease-in-out infinite;
}
.proof-card:nth-child(2) { margin-right: 48px; animation-delay: -2.3s; }
.proof-card:nth-child(3) { animation-delay: -4.6s; }
@keyframes pro-float { 50% { transform: translateY(-9px); } }
.proof-card .pc-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-gray); display: block; margin-bottom: 0.5rem; }
.proof-card .pc-value { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: #fff; }
.proof-card .pc-value small { font-size: 1.1rem; margin-left: 0.2rem; color: var(--primary-teal); font-family: var(--font-ui); font-weight: 600; }
.proof-card .pc-note { font-size: 0.86rem; color: var(--text-light); margin-top: 0.55rem; line-height: 1.5; }
.pc-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); margin-top: 0.8rem; overflow: hidden; }
.pc-bar i { display: block; height: 100%; width: 87%; background: linear-gradient(90deg, var(--primary-teal), var(--pro-gold)); border-radius: 6px; }
.pc-risk { height: 8px; border-radius: 8px; margin-top: 0.8rem; background: linear-gradient(90deg, #3fcd8c, #e8b032, #d6286e); }
.pc-risk-legend { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-gray); margin-top: 0.35rem; letter-spacing: .08em; text-transform: uppercase; }
.pc-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.pc-tags span { font-size: .72rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(47,174,143,.16); color: #bfeedd; border: 1px solid rgba(47,174,143,.3); }

/* trust strip pinned to bottom of hero */
.trust-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  border-top: 1px solid var(--pro-line);
  background: linear-gradient(180deg, rgba(6,22,35,0) 0%, rgba(6,22,35,0.78) 100%);
}
.trust-strip ul {
  list-style: none;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.5rem 24px 1.7rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.trust-strip li { display: flex; align-items: baseline; gap: 0.7rem; color: var(--text-light); font-size: 0.92rem; }
.trust-strip strong { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: #fff; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.45); border-radius: 14px;
}
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; animation: pro-scroll 1.8s infinite; }
@keyframes pro-scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------------ */
/* PAGE HEROES for inner pages (fixed picture)                         */
/* ------------------------------------------------------------------ */
.page-header,
.page-header-section,
.hero-section:not(.hero-pro) {
  position: relative;
  text-align: left;
  padding: 150px 0 110px;
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(90deg, rgba(5, 20, 32, 0.93) 0%, rgba(5, 20, 32, 0.72) 55%, rgba(5, 20, 32, 0.35) 100%),
    var(--page-hero-img, url('../images/art/band-corridor.jpg'));
  background-size: cover;
  background-position: center;
  background-attachment: scroll, fixed;
  overflow: hidden;
}
.hero-section:not(.hero-pro)::before { display: none; }
.page-header .container,
.page-header-section .header-content,
.hero-section:not(.hero-pro) .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.page-header-section .header-content { max-width: 1240px; }
.page-header h1,
.page-header-section .page-title,
.hero-section:not(.hero-pro) .hero-title {
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.06;
  font-weight: 400;
  color: #fff;
  max-width: 860px;
  margin-left: 0; margin-right: 0;
}
.page-header p,
.page-header-section .page-subtitle,
.hero-section:not(.hero-pro) .hero-subtitle {
  max-width: 680px;
  margin-left: 0; margin-right: 0;
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}
.hero-section:not(.hero-pro) .hero-content { max-width: 1240px; margin: 0 auto; text-align: left; }

/* ------------------------------------------------------------------ */
/* FIXED-BACKGROUND BANDS ("slide-over" sections)                      */
/* ------------------------------------------------------------------ */
.px-band {
  position: relative;
  padding: 130px 0;
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(180deg, rgba(5, 20, 32, 0.80) 0%, rgba(5, 20, 32, 0.50) 45%, rgba(5, 20, 32, 0.82) 100%),
    var(--px-bg);
  background-size: cover;
  background-position: center;
  background-attachment: scroll, fixed;
}
.px-band > .section-container,
.px-band > .container { position: relative; z-index: 2; max-width: 1240px; padding: 0 24px; }
.px-band .section-header h2,
.px-band .section-title h2 { color: #fff; }
.px-band--tall { padding-bottom: 170px; }

/* STICKY CARD STACK: panels pin and pile up over the static picture */
.stack { position: relative; padding-bottom: 6vh; }
.stack-card {
  position: sticky;
  top: calc(var(--pro-header-h) + 26px + (var(--i, 0) * 20px));
  margin-bottom: 8vh;
  padding: 2.4rem 2.6rem;
  border-radius: 26px;
  background: var(--pro-glass);
  border: 1px solid rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 2rem;
  align-items: start;
  transform-origin: center top;
}
.stack-card:last-child { margin-bottom: 0; }
.stack-card .sc-num {
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 0.9;
  background: linear-gradient(180deg, var(--accent, var(--primary-cyan)), rgba(255,255,255,.12));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stack-card .sc-icon { width: 46px; height: 46px; color: var(--accent, var(--primary-cyan)); margin-bottom: 1rem; }
.stack-card .sc-icon svg { width: 100%; height: 100%; }
.stack-card h3 { font-size: 1.9rem; font-weight: 400; color: #fff; margin: 0 0 0.8rem; line-height: 1.15; }
.stack-card .sc-badge { display: inline-block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--pro-gold); border: 1px solid rgba(232,176,50,.45); padding: .25rem .65rem; border-radius: 999px; margin-bottom: .8rem; }
.stack-card p { color: rgba(255,255,255,.8); line-height: 1.75; margin: 0; }
.stack-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.stack-card li {
  position: relative; padding: .7rem 1rem .7rem 2.3rem; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: #eaf3f6; font-size: .95rem; line-height: 1.45;
}
.stack-card li::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--primary-cyan)); }
.stack-card.accent-cyan  { --accent: #35b3d6; }
.stack-card.accent-red   { --accent: #e0407f; }
.stack-card.accent-gold  { --accent: #e8b032; }
.stack-card.accent-green { --accent: #3fcd8c; }
.stack-card.accent-blue  { --accent: #5b9bff; }
.stack-card.accent-teal  { --accent: #2fae8f; }

/* glass tiles used inside bands */
.glass-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.glass-tile {
  padding: 2rem 1.7rem; border-radius: 22px;
  background: var(--pro-glass); border: 1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .35s var(--pro-ease), border-color .35s;
}
.glass-tile:hover { transform: translateY(-8px); border-color: rgba(232,176,50,.6); }
.glass-tile .gt-n { font-family: var(--font-display); font-size: 2.6rem; color: var(--pro-gold); line-height: 1; display: block; margin-bottom: 1rem; }
.glass-tile h3 { color: #fff; font-size: 1.35rem; font-weight: 400; margin: 0 0 .6rem; }
.glass-tile p { color: rgba(255,255,255,.78); margin: 0; line-height: 1.65; font-size: .98rem; }

/* big stat band */
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; text-align: left; }
.stat-band .sb-item { padding-top: 1.4rem; border-top: 2px solid rgba(255,255,255,.25); }
.stat-band .stat-counter { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem) !important; line-height: 1; color: #fff; -webkit-text-fill-color: #fff; background: none; }
.stat-band .sb-item:nth-child(1) { border-top-color: var(--primary-teal); }
.stat-band .sb-item:nth-child(2) { border-top-color: var(--pro-gold); }
.stat-band .sb-item:nth-child(3) { border-top-color: #e0407f; }
.stat-band .sb-item:nth-child(4) { border-top-color: #5b9bff; }
.stat-band p { margin: .8rem 0 0; color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.55; }

/* ------------------------------------------------------------------ */
/* Split sections (text + photo/art)                                    */
/* ------------------------------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; align-items: center; }
.photo-frame {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid var(--pro-line); box-shadow: 0 30px 70px rgba(0,0,0,.45);
  background: var(--bg-navy);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.4rem 1.1rem; font-size: .85rem; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
}
.art-frame { background-size: cover; background-position: center; min-height: 340px; }
.feature-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.1rem; }
.feature-list li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.feature-list .fi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(47,174,143,.16); color: var(--primary-teal); border: 1px solid rgba(47,174,143,.35); }
.feature-list .fi svg { width: 22px; height: 22px; }
.feature-list h4 { margin: 0 0 .25rem; font-size: 1.12rem; color: #fff; font-family: var(--font-ui); font-weight: 600; }
.feature-list p { margin: 0; color: var(--text-gray); line-height: 1.6; }

/* ------------------------------------------------------------------ */
/* Process timeline                                                     */
/* ------------------------------------------------------------------ */
.process { display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 1.6rem; position: relative; counter-reset: step; }
.process::before { content: ""; position: absolute; top: 31px; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, var(--primary-teal), var(--pro-gold), #e0407f); opacity: .55; }
.process .step { position: relative; padding-top: 4.6rem; }
.process .step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.6rem; color: #fff;
  background: var(--bg-dark); border: 2px solid var(--primary-teal); z-index: 1;
}
.process .step:nth-child(2)::before { border-color: var(--pro-gold); }
.process .step:nth-child(3)::before { border-color: #e0407f; }
.process .step:nth-child(4)::before { border-color: #5b9bff; }
.process h3 { color: #fff; font-size: 1.4rem; font-weight: 400; margin: 0 0 .5rem; }
.process p { color: var(--text-gray); line-height: 1.65; margin: 0; }

/* ------------------------------------------------------------------ */
/* Flagship case-study panel                                            */
/* ------------------------------------------------------------------ */
.case-hero {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  border-radius: 28px; overflow: hidden; border: 1px solid var(--pro-line);
  box-shadow: 0 34px 80px rgba(0,0,0,.5); grid-column: 1 / -1;
}
.case-hero .ch-stat {
  padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px;
  background: linear-gradient(160deg, #b0124f 0%, #6c0b34 100%); color: #fff;
}
.case-hero .ch-big { font-family: var(--font-display); font-size: clamp(5rem, 11vw, 9rem); line-height: .9; }
.case-hero .ch-big small { font-size: .26em; font-family: var(--font-ui); font-weight: 600; margin-left: .3rem; }
.case-hero .ch-label { font-size: 1.1rem; max-width: 280px; opacity: .92; line-height: 1.5; }
.case-hero .ch-tag { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.case-hero .ch-body { padding: 3rem; background: var(--pro-glass); }
.case-hero .ch-body h3 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 400; line-height: 1.2; margin: 0 0 1.1rem; }

/* inline stat inside case study (reuses .stat-counter) */
.project-card.flagship { border-radius: 28px; }

/* ------------------------------------------------------------------ */
/* CTA band + footer                                                    */
/* ------------------------------------------------------------------ */
.cta-section {
  position: relative; max-width: none; margin: 0; border-radius: 0; padding: 130px 0;
  text-align: left;
  background-color: var(--bg-dark);
  background-image: linear-gradient(90deg, rgba(5,20,32,.92) 0%, rgba(5,20,32,.6) 100%), var(--px-bg, url('../images/art/band-city.jpg'));
  background-size: cover; background-position: center; background-attachment: scroll, fixed;
}
.cta-section .section-container { max-width: 1240px; }
.cta-section h2 { color: #fff; display: block; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 400; max-width: 760px; line-height: 1.1; }
.cta-section p { margin: 0 0 2rem; max-width: 620px; color: rgba(255,255,255,.82); font-size: 1.15rem; }

.site-footer {
  position: relative; border-top: 0; padding: 90px 0 24px;
  background: linear-gradient(180deg, #071a29 0%, #04111c 100%);
}
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #1f8fae 0 25%, #c21860 25% 50%, #dba62a 50% 75%, #0b1a24 75% 100%); }
.site-footer .footer-container { max-width: 1240px; padding: 0 24px; }
.site-footer h3 { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--primary-teal); }

/* ------------------------------------------------------------------ */
/* Forms (WPForms keeps working; this only restyles)                    */
/* ------------------------------------------------------------------ */
.form-column {
  padding: 2.6rem; border-radius: 26px; background: var(--pro-glass); border: 1px solid var(--pro-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: .9rem 1.1rem !important;
  min-height: 52px;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--primary-teal) !important;
  background: rgba(255,255,255,.1) !important;
  box-shadow: 0 0 0 4px rgba(47,174,143,.2) !important;
  outline: 0;
}
.wpforms-container .wpforms-field-label { color: #fff !important; font-weight: 600 !important; letter-spacing: .02em; }
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
  background: var(--pro-gold) !important; color: var(--pro-gold-ink) !important; border: 0 !important;
  border-radius: 999px !important; padding: 1rem 2.2rem !important; font-weight: 700 !important; letter-spacing: .04em;
  transition: transform .25s var(--pro-ease), box-shadow .25s !important;
}
.wpforms-container .wpforms-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(232,176,50,.32) !important; }

/* ------------------------------------------------------------------ */
/* Scroll reveal                                                        */
/* ------------------------------------------------------------------ */
html.js .reveal { opacity: 0; translate: 0 34px; transition: opacity .8s var(--pro-ease), translate .8s var(--pro-ease), transform .35s var(--pro-ease), border-color .35s, box-shadow .35s, background .35s; transition-delay: calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s, 0s, 0s, 0s; }
html.js .reveal.is-in { opacity: 1; translate: 0 0; }
.fade-in-up { animation: none !important; }

/* ------------------------------------------------------------------ */
/* Responsive + accessibility fallbacks                                 */
/* ------------------------------------------------------------------ */
/* iOS and touch devices ignore background-attachment: fixed -> scroll */
@media (max-width: 1024px), (hover: none) {
  .hero-pro, .px-band, .cta-section, .page-header, .page-header-section, .hero-section:not(.hero-pro) { background-attachment: scroll, scroll; }
}
@media (max-width: 1100px) {
  .hero-pro .hero-grid { grid-template-columns: 1fr; }
  .hero-proof { display: none; }
  .glass-grid, .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .case-hero { grid-template-columns: 1fr; }
  .trust-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scroll-cue { display: none; }
  .hero-pro { padding-bottom: 210px; }
}
@media (max-width: 860px) {
  .stack-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.8rem; top: calc(var(--pro-header-h) + 12px + (var(--i, 0) * 10px)); }
  .stack-card .sc-num { font-size: 2.8rem; }
  .process { grid-template-columns: 1fr; }
  .process::before { display: none; }
  .header-actions .nav-cta { display: none; }
  .px-band { padding: 90px 0; }
  .cta-section { padding: 90px 0; }
}
@media (max-width: 560px) {
  .glass-grid, .stat-band { grid-template-columns: 1fr; }
  .trust-strip ul { gap: .8rem; padding: 1.1rem 20px 1.3rem; }
  .trust-strip strong { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .proof-card, .hero-badge i, .scroll-cue::after { animation: none; }
  html.js .reveal { opacity: 1; translate: none; transition: none; }
  .hero-pro, .px-band, .cta-section, .page-header, .page-header-section, .hero-section:not(.hero-pro) { background-attachment: scroll, scroll; }
}

/* Inline SVG icon sizing (v1.1.0 fix: SVGs had no intrinsic size) */
.sc-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: .9rem; color: var(--accent, var(--primary-cyan)); }
.sc-icon svg { width: 100%; height: 100%; display: block; }
.feature-list .fi { flex: 0 0 44px; }
.feature-list .fi svg { width: 22px; height: 22px; display: block; }

.split h2, .split .eyebrow { text-align: left; }
.split h2::after { margin-left: 0; }

/* v1.1.0 fixes ------------------------------------------------------- */
/* Mobile menu: `.main-navigation ul{display:flex}` (style.css) out-ranked the
   `.primary-menu{display:none}` mobile rule, leaving the menu permanently open. */
@media (max-width: 768px) {
  .main-navigation .primary-menu { display: none; }
  .main-navigation .primary-menu.active { display: flex; }
  .site-header .header-container { position: relative; }
  .main-navigation .primary-menu {
    position: absolute; left: 16px; right: 16px; top: 100%;
    background: rgba(8, 28, 42, .97); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.12); z-index: 120;
  }
  .site-header { background: rgba(8, 28, 42, .92); backdrop-filter: blur(12px); }
}

/* Inner-page banners are full-bleed even when their wrapper is boxed */
.page-header-section {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* Partner / client logo groups (v1.2.0) ------------------------------ */
.logo-groups { display: grid; gap: 2.4rem; margin-top: 2.6rem; }
.logo-group-title { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pro-gold); font-weight: 700; margin: 0 0 1rem; }
.logo-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.logo-tile {
  display: flex; align-items: center; justify-content: center;
  flex: 0 1 230px; min-width: 170px; height: 110px; padding: 14px 22px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .3s ease, box-shadow .3s ease;
}
.logo-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.logo-tile img { max-width: 100%; width: auto; object-fit: contain; display: block; }
@media (max-width: 560px) { .logo-tile { flex: 1 1 calc(50% - .5rem); min-width: 0; height: 96px; padding: 10px 14px; } }
@media (max-width: 560px) { .logo-tile[style*="flex-basis"] { flex: 1 1 100%; } }

/* ===================================================================== */
/* v1.2.2: background video, "Why Atera" tiles, scroll progress          */
/* ===================================================================== */

/* Clipped fixed video: stays still while the section scrolls over it. */
.has-video { isolation: isolate; }
.video-wrap {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  clip-path: inset(0);
  background-size: cover; background-position: center;
}
.video-wrap video {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh;
  object-fit: cover; display: block;
}
.video-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.video-hero::after {
  background:
    linear-gradient(90deg, rgba(5,20,32,.88) 0%, rgba(5,20,32,.58) 48%, rgba(5,20,32,.22) 100%),
    linear-gradient(180deg, rgba(5,20,32,.45) 0%, rgba(5,20,32,0) 30%, rgba(5,20,32,.65) 100%);
}
.video-band::after {
  background: linear-gradient(180deg, rgba(5,20,32,.78) 0%, rgba(5,20,32,.52) 50%, rgba(5,20,32,.84) 100%);
}
.hero-pro.has-video { background-image: none; }
.px-band.has-video { background-image: none; }
.hero-pro .hero-grid, .hero-pro .trust-strip, .hero-pro .scroll-cue { z-index: 2; }
.hero-pro .hero-grid { position: relative; }
/* touch screens and reduced motion: no fixed positioning, no motion */
@media (hover: none), (max-width: 1024px) {
  .video-wrap video { position: absolute; width: 100%; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .video-wrap video { display: none; }
}

/* Why Atera */
.why-section { padding: 120px 0; background: linear-gradient(180deg, var(--bg-dark), var(--bg-navy)); }
.why-section .section-container { max-width: 1240px; padding: 0 24px; }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 3rem; }
.why-tile {
  position: relative; padding: 2.2rem 1.8rem 2rem; border-radius: 18px;
  background: var(--pro-glass); border: 1px solid var(--pro-line);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.why-tile:hover { transform: translateY(-6px); border-color: rgba(47,207,196,.5); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.why-tile img { width: 72px; height: 72px; display: block; margin-bottom: 1.3rem; filter: drop-shadow(0 6px 18px rgba(47,207,196,.35)); }
.why-tile h3 { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; margin: 0 0 .6rem; }
.why-tile p { color: var(--text-gray); line-height: 1.65; margin: 0; }
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } .why-section { padding: 80px 0; } }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); z-index: 200; background: linear-gradient(90deg, var(--primary-teal), var(--pro-gold), #e0407f); pointer-events: none; }
.admin-bar .scroll-progress { top: 32px; }

/* v1.2.2: consistent left-aligned section headings */
.px-band .section-header,
.why-section .section-header,
.trusted-section .section-header,
.featured-projects-section .section-container > h2,
.featured-projects-section .section-container > p { text-align: left; }
.px-band .section-header h2,
.why-section .section-header h2,
.trusted-section .section-header h2,
.featured-projects-section .section-container > h2 { display: block; text-align: left; margin-left: 0; margin-right: auto; max-width: none; }
.px-band .section-header p, .why-section .section-header p { margin-left: 0; text-align: left; }
.px-band .services-cta, .px-band .projects-cta { text-align: left; }
@media (max-width: 560px) { .hero-pro { padding-bottom: 270px; } }

/* v1.3.0: Atera Analytics logo lock-up in the header ------------------ */
.brand-lockup { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; }
.brand-lockup .custom-logo { height: 56px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.brand-lockup .brand-sub {
  font-family: var(--font-ui); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700;
  color: var(--pro-gold); padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.28); line-height: 1;
}
@media (max-width: 560px) { .brand-lockup .custom-logo { height: 44px; } .brand-lockup .brand-sub { display: none; } }
.footer-logo { height: 64px; width: auto; display: block; margin-bottom: 1rem; }

/* v1.3.0: MLOps reference architecture ------------------------------- */
.arch-section { padding: 120px 0; background: linear-gradient(180deg, var(--bg-navy), var(--bg-dark)); }
.arch-section .section-header { text-align: left; max-width: 900px; }
.arch-section .section-header h2 { text-align: left; display: block; margin-left: 0; }
.arch-section .section-header p { text-align: left; margin-left: 0; max-width: 860px; line-height: 1.75; }
.arch { --c-data: #2fae8f; --c-process: #29a9cf; --c-model: #e0407f; --c-storage: #e8b032; --c-deploy: #5b9bff; --c-monitor: #b48cff; margin-top: 2.6rem; display: grid; gap: 1.4rem; }
.arch-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-gray); }
.arch-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .5rem; background: var(--c); vertical-align: -1px; }
.is-data { --c: var(--c-data); } .is-process { --c: var(--c-process); } .is-model { --c: var(--c-model); }
.is-storage { --c: var(--c-storage); } .is-deploy { --c: var(--c-deploy); } .is-monitor { --c: var(--c-monitor); }
.arch-lane { position: relative; padding: 1.5rem 1.4rem 1.4rem; border-radius: 18px; background: var(--pro-glass); border: 1px solid var(--pro-line); }
.arch-lane-label { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; font-family: var(--font-ui); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--pro-gold); }
.arch-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pro-gold); color: #fff; font-size: .8rem; letter-spacing: 0; }
.arch-nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; counter-reset: none; }
.arch-node { position: relative; padding: 1rem 1.1rem 1.05rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 13%, rgba(7,26,40,.8)); border-left: 4px solid var(--c); transition: transform .3s ease, box-shadow .3s ease; }
.arch-node:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.arch-node h4 { margin: 0 0 .35rem; color: #fff; font-family: var(--font-ui); font-size: .98rem; font-weight: 600; }
.arch-node p { margin: 0; color: var(--text-light); font-size: .86rem; line-height: 1.55; opacity: .9; }
.arch-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arch-step { position: absolute; top: .8rem; right: .9rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--c); opacity: .75; }
.arch-lane.lane-pipeline { border-style: dashed; border-color: rgba(41,169,207,.45); }
.arch-loop { margin: 1.1rem 0 0; padding: .8rem 1rem; border-radius: 10px; background: rgba(180,140,255,.1); border: 1px solid rgba(180,140,255,.35); color: var(--text-light); font-size: .9rem; line-height: 1.55; }
.arch-loop span { color: var(--c-monitor); font-size: 1.2rem; margin-right: .3rem; }
@media (max-width: 1100px) { .arch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .arch-steps, .arch-nodes { grid-template-columns: 1fr; } .arch-section { padding: 80px 0; } }

/* v1.3.0 tweaks */
:root { --pro-header-h: 88px; }
.brand-lockup .custom-logo { height: 68px; }
.arch-section .section-header p { color: var(--text-light); }
.site-branding img.custom-logo { max-height: 68px; height: 68px; }
@media (max-width: 560px) { .site-branding img.custom-logo { max-height: 46px; height: 46px; } }

/* v1.3.1 - original MLOps diagram embedded as supplied */
.arch-embed{position:relative;width:100%;height:560px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0a1628;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.arch-frame{display:block;width:100%;height:100%;border:0;background:#0a1628}
.arch-embed.is-open{position:fixed;inset:0;z-index:100000;height:100%!important;border-radius:0;border:0}
html.arch-lock{overflow:hidden}
.arch-hint{margin:.9rem 0 0;font-size:.9rem;opacity:.75;text-align:center}
.arch-hint a{text-decoration:underline}

/* v5.0.0 */
.pp-link{display:inline-block;margin-top:1rem;font-weight:600;color:var(--accent-gold,#f0b429);text-decoration:none}
.pp-link:hover{text-decoration:underline}
.stack-chips-section{padding:5rem 0;background:var(--bg-navy,#0a1628)}
.stack-chips-section .project-tech{max-width:980px;margin:2rem auto 0;gap:.7rem}

/* ================================================================== */
/* v5.1.0 - home-page design language on every page; logo gradients    */
/* ================================================================== */
:root { --grad-logo: linear-gradient(135deg, #22b8d8 0%, #2f86c9 36%, #4a58bb 70%, #6d3fae 100%); }
.site-footer::before { background: var(--grad-logo); }
.stack-card .sc-num { background-image: linear-gradient(180deg, #22b8d8, rgba(109,63,174,.35)); }

/* page hero: the home hero, shorter, single column */
.hero-pro.hero-page { min-height: 74vh; min-height: 74svh; padding: calc(var(--pro-header-h) + 60px) 0 130px; }
.hero-pro.hero-page .hero-grid { grid-template-columns: 1fr; }
.hero-pro.hero-page .hero-title { font-size: clamp(2.4rem, 5.2vw, 4.4rem); max-width: 900px; }
.hero-pro.hero-page .hero-subtitle { max-width: 700px; }
.hero-pro.hero-page .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }

/* generic sections */
.pro-section { position: relative; padding: 110px 0; background: var(--bg-dark); }
.pro-section--alt { background: linear-gradient(180deg, #0b2b40 0%, #0a2436 100%); }
.pro-section > .section-container,
.px-band > .section-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.pro-section .section-header, .px-band .section-header { margin-bottom: 3rem; text-align: left; max-width: 820px; }
.pro-section .section-header h2 { color: #fff; }
.band-sub { margin: 3.2rem 0 1.4rem; font-family: var(--font-ui); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #5fd4ec; font-weight: 600; }
.glass-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glass-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.glass-tile .sc-icon { margin-bottom: .9rem; color: #5fd4ec; }
.glass-tile .sc-icon svg { width: 34px; height: 34px; }
.glass-tile.tech-tile .chip-row { margin-top: 1.1rem; }

/* chips + ticks */
.chip-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip-row .tech-tag, .project-tech .tech-tag { background: rgba(34,184,216,.12); border: 1px solid rgba(34,184,216,.38); color: #c9f0f9; border-radius: 999px; padding: .32rem .85rem; font-size: .8rem; letter-spacing: .02em; }
.tick-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .75rem; }
.tick-list li { position: relative; padding-left: 2rem; color: rgba(255,255,255,.88); line-height: 1.55; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .32rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--grad-logo); }
.tick-list li::after { content: ""; position: absolute; left: .4rem; top: .52rem; width: .3rem; height: .55rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.8); }

/* glass panel + gradient boxes */
.glass-panel { padding: 2.2rem; border-radius: 24px; background: var(--pro-glass); border: 1px solid rgba(255,255,255,.13); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.glass-panel .tick-list { margin-top: 0; }
.grad-card { position: relative; overflow: hidden; padding: 2.4rem; border-radius: 26px; color: #fff; background: var(--grad-logo); box-shadow: 0 26px 60px rgba(34,100,200,.28); }
.grad-card::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.grad-card h2, .grad-card h3 { color: #fff; margin-top: 0; }
.grad-card p { color: rgba(255,255,255,.92); }
.grad-card .eyebrow, .eyebrow.light { color: rgba(255,255,255,.85); }
.grad-card .eyebrow::before { background: rgba(255,255,255,.7); }
.cta-button.light { background: #fff; color: #0a2436; border: 0; }
.cta-button.light:hover { background: #eaf7fb; color: #0a2436; }
.cta-grad-section { padding: 90px 0; background: var(--bg-dark); }
.cta-grad-section .section-container { max-width: 1240px; padding: 0 24px; margin: 0 auto; }
.cta-grad { padding: 4rem 3.5rem; }
.cta-grad h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 400; max-width: 760px; line-height: 1.12; }
.cta-grad p { max-width: 640px; font-size: 1.15rem; margin: 0 0 1.8rem; }
.grad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.grad-tile { padding: 2rem; }
.grad-tile .sc-icon svg { width: 34px; height: 34px; color: #fff; margin-bottom: .6rem; }
.grad-tile:nth-child(2) { background: linear-gradient(135deg, #2f86c9 0%, #4a58bb 55%, #6d3fae 100%); }
.grad-tile:nth-child(3) { background: linear-gradient(135deg, #22b8d8 0%, #2f86c9 100%); }
.grad-tile:nth-child(4) { background: linear-gradient(135deg, #4a58bb 0%, #6d3fae 100%); }

/* split rows */
.cap-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; align-items: center; }
.cap-row h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 400; margin: .4rem 0 1.2rem; }
.cap-row p { color: rgba(255,255,255,.84); line-height: 1.75; }
.stat-panel .sp-item { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.28); font-size: 1.15rem; }
.stat-panel .sp-item:last-child { border-bottom: 0; }
.stat-panel .sp-item b { float: right; font-family: var(--font-display); font-size: 1.7rem; }
.live-card { text-align: left; }
.live-card .cta-button { margin-top: .6rem; }
.stack-pair { display: grid; gap: 1.4rem; }
.agentic-tech { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3rem; margin-top: 3rem; }
.agentic-tech h3, .agentic-tech h4 { color: #fff; margin-top: 0; }
.agentic-tech p { color: rgba(255,255,255,.84); line-height: 1.7; }
.agentic-tech .note { margin-top: 1.2rem; font-size: .95rem; }

/* existing blocks inside the new sections */
.pro-section .projects-grid, .px-band .projects-grid { max-width: none; }
.px-band .usecase-group, .px-band .usecase-group-header h3 { color: #fff; }
.news-wrap .news-grid { max-width: 980px; }
.contact-container { background: var(--bg-dark); }
.contact-container .contact-form-section { padding: 90px 0; }
.mlops-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }

@media (max-width: 1100px) {
  .glass-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-row, .agentic-tech { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 700px) {
  .pro-section { padding: 80px 0; }
  .glass-grid.cols-3, .glass-grid.cols-2, .grad-grid, .mlops-links-grid { grid-template-columns: 1fr; }
  .cta-grad { padding: 2.6rem 1.6rem; }
  .hero-pro.hero-page { min-height: 0; padding-bottom: 100px; }
}

/* v5.1.0 polish */
.hero-pro .hero-title em { background-image: linear-gradient(100deg, #3fd0ea 0%, #5c8ee0 55%, #9a6fe0 100%); }
.project-card .project-tech { margin: 1.1rem 0 1.3rem; }
.usecase-group { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 3.2rem !important; box-shadow: none !important; }
.usecase-group-header { text-align: left !important; margin-bottom: 1.4rem; }
.usecase-group-header h3 { color: #fff; font-size: 1.5rem; font-weight: 400; margin: 0 0 .4rem; }
.usecase-group-header p { color: rgba(255,255,255,.75); max-width: 720px; margin: 0; }
.usecase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.usecase-card { border-radius: 20px; background: var(--pro-glass); border: 1px solid rgba(255,255,255,.12); padding: 1.6rem; }
.usecase-card h4 { color: #fff; font-weight: 400; font-size: 1.2rem; margin: .5rem 0; }
.usecase-card p { color: rgba(255,255,255,.8); line-height: 1.65; }
.usecase-tagline { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #5fd4ec; }

/* v5.1.1 richer Projects & Technology and News */
.glass-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini-results { list-style: none; margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: .45rem; font-size: .92rem; color: rgba(255,255,255,.78); }
.mini-results li::before { content: "✓ "; color: #5fd4ec; font-weight: 700; }
.stack-card .chip-row { margin-top: 1rem; }
.chip-row--light .tech-tag { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }
.plat-tile .tick-list { margin: 1rem 0; }
.plat-tile .chip-row { margin-top: auto; }
.gt-tag { display: inline-block; margin-bottom: .5rem; font-family: var(--font-ui); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #5fd4ec; }
.arch-band .arch-hint { color: rgba(255,255,255,.85); }
.arch-band .arch-hint a { color: #5fd4ec; }
.arch-band .mlops-link-card { background: rgba(8,28,44,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; }
.news-featured-wrap .news-card { padding: 3rem 3.2rem; border-radius: 28px; background: var(--pro-glass); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.news-featured-wrap .news-title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 400; color: #fff; margin: .8rem 0 1rem; max-width: 820px; }
.news-featured-wrap .news-excerpt { font-size: 1.15rem; line-height: 1.8; max-width: 820px; color: rgba(255,255,255,.88); }
.news-featured-wrap .news-date { display: inline-block; padding: .3rem .9rem; border-radius: 999px; background: var(--grad-logo); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.news-grid--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; max-width: none; }
.news-grid--cards .news-card { display: flex; flex-direction: column; gap: .6rem; }
.news-grid--cards .news-card .chip-row { margin-top: auto; padding-top: 1rem; }
.news-card .news-date { display: inline-block; align-self: flex-start; padding: .25rem .8rem; border-radius: 999px; background: var(--grad-logo); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.timeline-grid .glass-tile { position: relative; }
.timeline-grid .gt-n { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; background: var(--grad-logo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 1100px) { .glass-grid.cols-4, .news-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .glass-grid.cols-4, .news-grid--cards { grid-template-columns: 1fr; } .news-featured-wrap .news-card { padding: 2rem 1.5rem; } }
.stack-card .mini-results { display: grid; gap: .4rem; }
.stack-card .mini-results li { background: none; border: 0; padding: 0 0 0 1.4rem; position: relative; font-size: .92rem; }
.stack-card .mini-results li::before { content: "✓"; position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; border-radius: 0; color: #5fd4ec; font-weight: 700; }