/* =================================================================
   AGG THEME — MAIN STYLESHEET
   Direct translation of Next.js / Tailwind source values.
   Font: Plus Jakarta Sans. Zero Tailwind. Zero frameworks.
   ================================================================= */

/* 1. TOKENS */
:root {
  --bg:          #050a14;
  --amber:       #fbbf24;
  --emerald:     #34d399;
  --font:        'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
  --nav-h:       72px;
}

/* 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--bg);
  color: #ffffff;
  font-family: var(--font);
  font-weight: 500;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }
/* overflow-y must NOT be hidden on the page chrome — it would clip
   the Technology background that bleeds -30vh above/below its section */
#agg-main { overflow: visible; }

/* 3. SCROLL REVEAL */
.agg-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.agg-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .agg-reveal { opacity: 1; transform: none; transition: none; }
}

/* 4. HEADER
   Source: Header.tsx
   fixed top-0 left-0 right-0 z-50
   default: px-5 py-5 md:px-10 md:py-6 bg-transparent
   scrolled: px-5 py-3 md:px-8 bg-black/70 backdrop-blur-md
*/
.agg-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 24px 90px;
  background: transparent;
  transition: all 300ms ease;
}
/* The scrolled tint + blur sits on a pseudo-element instead of on .agg-header
   itself. backdrop-filter turns an element into a containing block for its
   fixed-position descendants, and the mobile drawer (.agg-header__nav) is
   `position: fixed; inset: 0` inside this header — so with the filter on the
   header, gaining .scrolled re-anchored the drawer to the ~56px header box:
   it stopped covering the viewport and its links spilled out over the page.
   The header stays filter-free, so the drawer keeps measuring the viewport. */
.agg-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 300ms ease;
  pointer-events: none;
}
.agg-header.scrolled::before { opacity: 1; }
.agg-header.scrolled {
  padding: 12px 32px;
}
/* WP admin bar offset */
.admin-bar .agg-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .agg-header { top: 46px; }
}

.agg-header__wordmark {
  justify-self: start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: rgba(255,255,255,0.80);
  white-space: nowrap;
}

.agg-header__logomark { justify-self: center; display: flex; align-items: center; }
.agg-logo-img {
  height: 32px;
  width: auto;
  display: block;
  transition: height 300ms ease;
}
.agg-header.scrolled .agg-logo-img { height: 26px; }

.agg-header__nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 36px;
}
.agg-header__nav-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: opacity 300ms ease;
}
.agg-header__nav-link:hover { opacity: 0.70; }

.agg-lang-pill {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  border: 0.5px solid rgba(255,255,255,0.9);
  padding: 5px 14px;
  border-radius: 34px;
  white-space: nowrap;
}

/* TranslatePress language switcher, restyled to match .agg-lang-pill above.
   TranslatePress renders two copies of the same box: an invisible "anchor"
   that reserves layout space, and the real interactive "overlay" positioned
   on top of it — both share the .trp-shortcode-switcher class, which is why
   the rules below aren't scoped to just one. Several properties (background,
   border, border-radius) arrive as inline custom properties from TranslatePress's
   own admin styling UI, which inline styles always win over a stylesheet at
   equal or lower specificity — hence !important here, not a specificity fix.
   Closed, it stays transparent so it reads as the outlined pill it replaces.
   Open, it takes a dark translucent panel: the expanded list sits over whatever
   section follows the header, and on the light sections the white item labels
   were otherwise unreadable. */
.agg-lang-switcher {
  display: inline-flex;
  align-items: center;
}
.agg-lang-switcher .trp-shortcode-switcher__wrapper {
  position: relative;
}
.agg-lang-switcher .trp-shortcode-switcher {
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.9) !important;
  border-radius: 34px !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: border-radius 150ms ease, background-color 150ms ease;
}
.agg-lang-switcher .trp-shortcode-switcher.is-open {
  border-radius: 16px !important;
  background: rgba(8, 12, 20, 0.534) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}
.agg-lang-switcher .trp-language-item__current {
  padding: 5px 14px !important;
  gap: 6px;
}
.agg-lang-switcher .trp-language-item-name {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: inherit !important;
}
.agg-lang-switcher .trp-flag-image {
  width: 16px !important;
  border-radius: 2px !important;
}
.agg-lang-switcher .trp-shortcode-arrow {
  width: 11px;
  height: 11px;
  margin-left: 2px;
  flex-shrink: 0;
}
.agg-lang-switcher .trp-shortcode-arrow path {
  stroke: rgba(255,255,255,0.75);
}
.agg-lang-switcher .trp-switcher-dropdown-list .trp-language-item {
  padding: 6px 14px;
}
.agg-lang-switcher .trp-switcher-dropdown-list .trp-language-item-name {
  color: #ffffff;
  font-size: 13px;
  font-family: inherit;
}
.agg-lang-switcher .trp-switcher-dropdown-list .trp-language-item:hover {
  background: rgba(255,255,255,0.10) !important;
}

/* Hamburger — hidden on desktop, shown ≤767px */
.agg-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 60;
}
.agg-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 300ms ease, opacity 200ms ease;
}
.agg-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.agg-hamburger--open span:nth-child(2) { opacity: 0; }
.agg-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 5. EYEBROW — shared pattern across all sections
   flex items-center gap-2 + amber dot + amber text-lg font-medium tracking-wide
*/
.agg-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px; /* mb-8 */
}
.agg-eyebrow--center { justify-content: center; }
.agg-eyebrow--mb10 { margin-bottom: 40px; } /* mb-10 */
.agg-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--amber);
  flex-shrink: 0;
}
.agg-eyebrow__text {
  color: var(--amber);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

/* 6. CTA BUTTON
   bg-white text-gray-900 font-semibold px-10 py-4 rounded-full
   hover:bg-white/90 transition-colors duration-200 text-base
*/
.agg-cta-btn {
  display: inline-block;
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 40px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: background 200ms ease;
  font-family: var(--font);
  text-decoration: none;
}
.agg-cta-btn:hover { background: rgba(255,255,255,0.90); }

/* 7. HERO
   Source: Hero.tsx
   section: relative min-h-screen flex flex-col overflow-hidden
   bg image: fill object-cover object-center
   fade: absolute inset-x-0 bottom-0 h-1/3
   content: relative z-10 flex flex-col items-center justify-center flex-1 text-center px-6
*/
.agg-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.agg-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33.333%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, #000000 100%);
  z-index: 2;
}
.agg-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 80px
  );
}
.agg-hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: var(--nav-h) 24px 80px;
}
/* Eyebrow inside hero — mb-8 */
.agg-hero__content .agg-eyebrow { margin-bottom: 32px; }

.agg-hero__headline {
  color: #ffffff;
  font-size: clamp(2.5rem, 8vw, 8rem);
  font-weight: 600; /* font-semibold */
  line-height: 1; /* leading-none */
  letter-spacing: -0.025em; /* tracking-tight */
  max-width: 1280px;
  margin-bottom: 32px; /* mb-8 */
}
.agg-hero__subtitle {
  color: rgba(255,255,255,0.75); /* text-white/75 */
  font-size: 18px; /* text-lg */
  line-height: 1.625; /* leading-relaxed */
  max-width: 672px; /* max-w-2xl */
  margin-bottom: 48px; /* mb-12 */
  text-align: center;
}

/* 8. PROBLEM
   Source: Problem.tsx
   div: relative min-h-screen flex items-center justify-center
   inner: flex flex-col items-center text-center px-6 max-w-6xl
   h2: font-semibold leading-tight tracking-tight max-w-5xl mb-8 clamp(2rem,5vw,4rem)
   p: text-white/70 text-base md:text-lg font-medium leading-relaxed max-w-2xl mb-12
*/
/* GRADIENT-1 BACKGROUND IMAGE
   Shared visual background for Problem + Solution.
   Source: page.tsx — absolutely positioned, bleeds across both sections.
   top-[50vh] left-1/2 -translate-x-1/2 -translate-y-[27%]
   w-full min-w-[760px] max-w-none h-auto
*/
.agg-grad-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -27%);
    width: 100%;
    min-width: 760px;
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    display: block;
}

.agg-problem {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    overflow: visible;
}
.agg-problem__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 1152px; /* max-w-6xl */
}
.agg-problem__headline {
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.375; /* leading-tight */
  letter-spacing: -0.025em;
  max-width: 1024px; /* max-w-5xl */
  margin-bottom: 32px; /* mb-8 */
}
.agg-problem__body {
  color: rgba(255,255,255,0.70);
  font-size: 18px; /* md:text-lg */
  font-weight: 500;
  line-height: 1.625; /* leading-relaxed */
  max-width: 672px; /* max-w-2xl */
  margin-bottom: 48px; /* mb-12 */
}

/* 9. SOLUTION
   Source: Solution.tsx
   outer div: relative pt-48 pb-24
   inner: max-w-8xl mx-auto px-6
   intro p: text-center font-medium leading-normal tracking-tight text-white
            max-w-7xl mx-auto mb-28 clamp(1.5rem,3.2vw,2.6rem)
   stats grid: grid grid-cols-2 md:grid-cols-4
   stat item: flex flex-col items-center text-center px-6 py-4
   stat value: text-white font-semibold leading-none mb-3 text-6xl md:text-7xl
   stat desc: text-white/60 text-sm leading-snug mb-6 max-w-[180px]
   stat label: text-emerald-400 text-sm font-semibold
*/
.agg-solution {
    position: relative;
    padding-top: 192px;
    padding-bottom: 0;
    background: transparent;
    overflow: visible;
}

.agg-solution::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

.agg-solution::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        #000000 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}
.agg-solution__inner {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.agg-solution__eyebrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px; /* mb-10 */
}
.agg-solution__intro {
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: #ffffff;
  max-width: 1280px;
  margin: 0 auto 112px;
  font-size: clamp(1.5rem, 3.2vw, 1.6rem);
}

.agg-solution__intro-box {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(0.875rem, 1.2vw, 1.1rem);
}
.agg-solution__brand { color: var(--emerald); }

.agg-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: transparent;
    position: relative;
    z-index: 2;
}
.agg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 24px;
    background: transparent;
}
.agg-stat + .agg-stat {
  border-left: 1px solid rgba(255,255,255,0.15);
}
.agg-stat__value {
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 12px; /* mb-3 */
  font-size: 72px; /* text-7xl on md */
}
.agg-stat__desc {
  color: rgba(255,255,255,0.60);
  font-size: 14px;
  line-height: 1.375;
  margin-bottom: 24px; /* mb-6 */
  max-width: 180px;
}
.agg-stat__label {
  color: var(--emerald);
  font-size: 14px;
  font-weight: 600;
}

/* ── ABOUT US ─────────────────────────────── */
.agg-about {
    position: relative;
    background: transparent;
    padding: 240px 0 220px;
    overflow: visible;
}

.agg-about__inner {
    max-width: 100%;
    margin: 0;
    padding: 0 88px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 127px;
    align-items: start;
}

.agg-about__left {
    position: sticky;
    top: 0;
    padding-top: 0;
}

.agg-about__headline {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
}

.agg-about__body {
    color: rgba(255,255,255,0.60);
    font-size: 16px;
    line-height: 1.625;
    max-width: 380px;
}

.agg-about__bg {
    display: none;
}

.agg-about::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -10%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 40% 50%,
        rgba(103, 255, 193, 0.18) 0%,
        rgba(103, 220, 255, 0.10) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}

.agg-about::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 25%;
    width: 65%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 55% 45%,
        rgba(147, 220, 255, 0.12) 0%,
        rgba(103, 255, 193, 0.06) 45%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(50px);
}

/* Accordion */
.agg-about__accordion {
    display: flex;
    flex-direction: column;
}

.agg-about__item {
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.agg-about__trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
}

.agg-about__trigger-label {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font);
    line-height: 1.3;
}

.agg-about__trigger-icon {
    color: #ffffff;
    flex-shrink: 0;
    transition: transform 300ms ease;
}

.agg-about__item--open .agg-about__trigger-icon {
    transform: rotate(180deg);
}

.agg-about__body-wrap {
    display: none;
    padding-bottom: 24px;
}

.agg-about__item--open .agg-about__body-wrap {
    display: block;
}

.agg-about__item-body {
    color: rgba(255,255,255,0.60);
    font-size: 15px;
    line-height: 1.625;
    max-width: 560px;
}

@media (max-width: 767px) {
    .agg-about__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
    }
    .agg-about__left { position: static; }
}

/* 10. TECHNOLOGY
   Source: Technology.tsx
   section: relative py-32
   bg wrapper: absolute -top-[30vh] -bottom-[30vh] left-0 right-0
   bg image: fill object-cover
   overlay: absolute inset-0 bg-black/60
   glow: absolute -top-40 -left-40 w-[700px] h-[700px] rounded-full opacity-60
   inner: relative z-10 max-w-7xl mx-auto px-6
   cards: flex flex-col md:flex-row md:items-start gap-6 md:gap-0 mb-12 md:mb-0
   card: tech-card group relative flex-1 md:-ml-px
   card image: w-full h-auto select-none pointer-events-none
   card content: absolute inset-0 p-8 flex flex-col
   card content pad per card: pt-8, md:pt-20, md:pt-44, md:pt-72
   num: text-white font-semibold leading-none mb-6 text-7xl md:text-8xl
   title: text-white text-2xl font-semibold leading-snug mb-4
   desc: text-white/55 text-sm leading-relaxed max-w-sm
   accent line: absolute bottom-0 left-0 w-8 h-px bg-emerald-400/50
   heading: tech-heading max-w-5xl md:-mt-30
*/
/* ── TECHNOLOGY ─────────────────────────────── */
.agg-technology {
    position: relative;
    padding: 96px 0 0;
    overflow: hidden;
    background-image: url('../images/tech-bg.png');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Top fade — black to transparent, 30vh tall
   Hides the hard edge where Solution ends */
.agg-technology::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30vh;
    background: linear-gradient(
        to bottom,
        #000000 0%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Bottom fade — transparent to black, 30vh tall
   Blends into the Proving section below */
.agg-technology::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30vh;
    background: linear-gradient(
        to top,
        #000000 0%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

.agg-technology__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    z-index: 0;
    pointer-events: none;
}

.agg-technology__glow {
    position: absolute;
    top: -160px;
    left: -160px;
    width: 700px;
    height: 700px;
    border-radius: 9999px;
    opacity: 0.60;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        circle,
        rgba(31, 157, 107, 0.35) 0%,
        transparent 65%
    );
}

.agg-technology__inner {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.agg-technology__cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

.tech-card {
    position: relative;
    flex: 1;
    margin-left: -1px;
}
.tech-card:first-child { margin-left: 0; }
.tech-card__frame { position: relative; }
.tech-card__img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}
.tech-card__content {
    position: absolute;
    inset: 0;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.tech-card__content--1 { padding-top: 80px; }
.tech-card__content--2 { padding-top: 176px; }
.tech-card__content--3 { padding-top: 288px; }

.tech-card__num {
    display: block;
    color: #ffffff;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 24px;
    font-size: 96px;
}
.tech-card__title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.375;
    margin-bottom: 16px;
}
.tech-card__desc {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    line-height: 1.625;
    max-width: 384px;
}
.tech-card__accent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 1px;
    background: rgba(52,211,153,0.50);
    transform-origin: left;
    transition: transform 300ms ease;
}
.tech-card:hover .tech-card__accent { transform: scaleX(1.5); }

.agg-technology__heading {
    max-width: 1024px;
    margin-top: -120px;
    padding-bottom: 45px;
    position: relative;
    z-index: 10;
}
.agg-technology__h2 {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.375;
    letter-spacing: -0.025em;
    max-width: 820px;
}

@media (max-width: 767px) {
    .agg-technology { padding: 80px 0; }
    .agg-technology__cards { flex-direction: column; gap: 24px; }
    .tech-card { margin-left: 0; }
    .tech-card__content--1,
    .tech-card__content--2,
    .tech-card__content--3 { padding-top: 32px; }
    .agg-technology__heading { margin-top: 32px; }
}

/* 11. PROVING
   Source: Proving.tsx
   section: relative overflow-hidden py-24 md:py-40
   bg image: fill object-contain object-left pointer-events-none
   inner: relative z-10 px-6 md:px-12 lg:px-20
   headline wrap: md:pl-[34%]
   h2: flex flex-col gap-6 text-white font-semibold leading-[0.92] tracking-tight
       clamp(2.5rem,8.3vw,9.5rem)
   features: md:pl-[34%] mt-20 md:mt-28 grid grid-cols-1 sm:grid-cols-2 gap-x-12 gap-y-14
   odd feature: sm:pl-12 sm:border-l border-white/15
   h3: text-white text-2xl md:text-3xl font-semibold leading-snug mb-4
   p: text-white/55 text-sm leading-relaxed max-w-xs
*/
.agg-proving {
    position: relative;
    overflow: hidden;
    padding: 0 0 0;
}
.agg-proving__bg-img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 75%;
    height: auto;
    transform: translateY(calc(-40% - 8vw));
    pointer-events: none;
    user-select: none;
    z-index: 0;
    display: block;
    mix-blend-mode: screen;
    opacity: 0.8;
}
.agg-proving__bg-glow {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40%;
    height: 60%;
    background: radial-gradient(ellipse at 30% 50%, rgba(31,157,107,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.agg-proving__inner {
  position: relative;
  z-index: 10;
  padding: 0 80px; /* lg:px-20 */
}
.agg-proving__headline-wrap {
  padding-left: 34%;
  padding-top: 361px;
  padding-bottom: 61px;
}
.agg-proving__headline {
  display: flex;
  flex-direction: column;
  gap: 48px;
  color: #ffffff;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-size: clamp(2.5rem, 8.3vw, 9.5rem);
  white-space: nowrap;
}
.agg-proving__features {
  padding-left: 34%;
  margin-top: 112px; /* mt-28 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px; /* gap-x-12 */
  row-gap: 56px; /* gap-y-14 */
}
.agg-proving__feature--bordered {
  padding-left: 48px; /* pl-12 */
  border-left: 1px solid rgba(255,255,255,0.15);
}
.agg-proving__feature h3 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.375;
  margin-bottom: 16px;
}
.agg-proving__feature p {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.625;
  max-width: 320px; /* max-w-xs */
}

/* 12. LIVE STATEMENT
   Source: LiveStatement.tsx
   section: relative bg-black overflow-hidden py-40 flex items-center justify-center
            bg-center bg-no-repeat background-size:50%
   glow: absolute left-1/2 top-1/2 -translate w-[900px] h-[500px]
   inner: relative z-10 max-w-7xl mx-auto px-6 text-center
   p: text-white font-semibold leading-snug tracking-tight clamp(1.5rem,3.4vw,2.6rem)
*/
.agg-live-statement {
  position: relative;
  background: #000000;
  overflow: hidden;
  padding: 316px 197px 266px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
}
.agg-live-statement__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 500px;
  max-width: 120vw;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(31,157,107,0.22) 0%,
    rgba(31,157,107,0.06) 35%,
    transparent 70%);
  z-index: 1;
}
.agg-live-statement__inner {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.agg-live-statement__text {
  color: #ffffff;
  font-family: 'DM Sans', 'Plus Jakarta Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.30;
  letter-spacing: 0;
  text-align: center;
}

/* 13. INNOVATION
   Source: Innovation.tsx
   section: relative bg-black overflow-hidden py-28
   bg: fill object-cover object-center
   inner: relative z-10 max-w-6xl mx-auto px-6
   h2: text-white text-center font-semibold leading-[0.95] tracking-tight mb-6
       clamp(2.5rem,6vw,5rem)
   subtitle: text-white/60 text-center text-sm md:text-base leading-relaxed
             max-w-md mx-auto mb-16
   stat banner: flex flex-col md:flex-row items-start md:items-center
                gap-4 md:gap-8 p-8 mb-12 border border-white/10
   stat value: text-5xl md:text-6xl font-semibold leading-none shrink-0
   stat desc: text-white/70 text-sm md:text-base leading-relaxed
   grid: grid grid-cols-1 lg:grid-cols-2 gap-6
   feature card: flex-1 p-7 rounded-xl border border-white/10
                 hover:border-emerald-400/40 bg gradient
*/
.agg-innovation {
  position: relative;
  background: #000000;
  overflow: hidden;
  padding: 112px 0; /* py-28 */
}
.agg-innovation__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.agg-innovation__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center -70%;
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
}
.agg-innovation__inner {
  position: relative;
  z-index: 10;
  max-width: 1152px; /* max-w-6xl */
  margin: 0 auto;
  padding: 0 24px;
}
.agg-innovation__headline {
  color: #ffffff;
  text-align: center;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 24px; /* mb-6 */
  font-size: clamp(2.5rem, 6vw, 5rem);
}
.agg-innovation__subtitle {
  color: rgba(255,255,255,0.60);
  text-align: center;
  font-size: 16px;
  line-height: 1.625;
  max-width: 448px; /* max-w-md */
  margin: 0 auto 64px; /* mb-16 */
}
.agg-innovation__stat-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px; /* md:gap-8 */
  padding: 32px; /* p-8 */
  margin-bottom: 48px; /* mb-12 */
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(120deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.01) 100%);
}
.agg-innovation__stat-value {
  color: #ffffff;
  font-size: 60px; /* text-6xl on md */
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.agg-innovation__stat-desc {
  color: rgba(255,255,255,0.70);
  font-size: 16px;
  line-height: 1.625;
}
.agg-innovation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; /* gap-6 */
}
.agg-innovation__mockup { display: flex; align-items: center; justify-content: center; }
.agg-innovation__mockup-img { width: 100%; height: auto; }
.agg-innovation__cards { display: flex; flex-direction: column; gap: 24px; }
.agg-innovation__card {
  flex: 1;
  padding: 28px; /* p-7 */
  border-radius: 12px; /* rounded-xl */
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.015) 100%);
  transition: border-color 300ms ease;
}
.agg-innovation__card:hover { border-color: rgba(52,211,153,0.40); }
.agg-innovation__card-title {
  color: #ffffff;
  font-size: 20px; /* text-xl */
  font-weight: 600;
  margin-bottom: 12px; /* mb-3 */
}
.agg-innovation__card-desc {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.625;
}

/* 14. CONTACT
   Source: Contact.tsx
   section: relative bg-black overflow-hidden py-32
   inner: max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-16 md:gap-24
   h2: font-semibold tracking-tight mb-6 clamp(2.5rem,5vw,3.5rem)
   body: text-white/55 text-sm md:text-base leading-relaxed max-w-sm mb-10
   links: flex flex-col gap-4
   link: flex items-center gap-3 text-white/80 hover:text-white
*/
.agg-form-disclaimer {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.agg-contact {
  position: relative;
  background: #000000;
  overflow: hidden;
  padding: 128px 0; /* py-32 */
}
.agg-contact__inner {
  position: relative;
  z-index: 10;
  max-width: 1152px; /* max-w-6xl */
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 96px; /* md:gap-24 */
}
.agg-contact__headline {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 24px; /* mb-6 */
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.agg-contact__body {
  color: rgba(255,255,255,0.55);
  font-size: 16px;
  line-height: 1.625;
  max-width: 384px; /* max-w-sm */
  margin-bottom: 40px; /* mb-10 */
}
.agg-contact__links { display: flex; flex-direction: column; gap: 16px; }
.agg-contact__link {
  display: flex;
  align-items: center;
  gap: 12px; /* gap-3 */
  color: rgba(255,255,255,0.80);
  font-size: 16px;
  transition: color 200ms ease;
  text-decoration: none;
}
.agg-contact__link:hover { color: #ffffff; }
.agg-contact__link svg { flex-shrink: 0; }

/* Fluent Forms overrides to match Contact.tsx form style */
.agg-contact__right .ff-el-form-control,
.agg-contact__right input[type="text"],
.agg-contact__right input[type="email"],
.agg-contact__right textarea {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  padding-bottom: 12px !important;
  font-family: var(--font) !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 200ms ease !important;
}
.agg-contact__right .ff-el-form-control:focus,
.agg-contact__right input:focus,
.agg-contact__right textarea:focus {
  border-bottom-color: var(--emerald) !important;
}
.agg-contact__right .ff-el-form-control::placeholder,
.agg-contact__right input::placeholder,
.agg-contact__right textarea::placeholder {
  color: rgba(255,255,255,0.50) !important;
}
.agg-contact__right .ff-btn,
.agg-contact__right button[type="submit"] {
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 16px 48px !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: background 200ms ease !important;
}
.agg-contact__right .ff-btn:hover,
.agg-contact__right button[type="submit"]:hover {
  background: rgba(255,255,255,0.90) !important;
}
.agg-contact__right .ff-el-group { margin-bottom: 40px !important; }
.agg-contact__right label { color: rgba(255,255,255,0.50) !important; font-size: 14px !important; }

/* 15. FOOTER
   Source: Footer.tsx
   footer: relative overflow-hidden bg-cover bg-center bg-no-repeat
   inner: max-w-7xl mx-auto px-8 py-16
   grid: grid grid-cols-1 md:grid-cols-3 gap-12 items-start
   logo: h-12 w-auto
   col title: text-white font-semibold mb-5
   links list: flex flex-col gap-3
   link: text-white/75 hover:text-white text-sm
   contact links: flex flex-col gap-3
   contact link: flex items-center gap-2.5 text-white/75 text-sm
   bottom: mt-16 pt-6 border-t border-white/20 flex justify-between text-white/60 text-xs
*/
.agg-footer {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.agg-footer__inner {
  position: relative;
  z-index: 10;
  max-width: 1280px; /* max-w-7xl */
  margin: 0 auto;
  padding: 64px 32px; /* px-8 py-16 */
}
.agg-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px; /* gap-12 */
  align-items: start;
}
.agg-footer__logo { height: 40px; width: auto; }
.agg-footer__col--brand { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.agg-footer__tagline { color: rgba(255,255,255,0.72); font-size: 14px; }
.agg-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.agg-footer__badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 36px;
  padding: 5px 11px;
}

.agg-footer__newsletter {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 15px 22px;
  background: rgba(0,0,0,0.13);
  border-radius: 10px;
  backdrop-filter: blur(20px);
}
.agg-footer__newsletter-title { color: #ffffff; font-size: 24px; font-weight: 500; margin-bottom: 7px; }
.agg-footer__newsletter-desc { color: rgba(255,255,255,0.7); font-size: 14px; font-family: 'Inter', Arial, Helvetica, sans-serif; }
.agg-footer__newsletter-form { display: flex; align-items: center; gap: 8px; }
.agg-footer__newsletter-input {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9999px;
  padding: 14px 21px;
  color: #ffffff;
  font-size: 14px;
  width: 252px;
  max-width: 100%;
}
.agg-footer__newsletter-input::placeholder { color: #9ca3af; }
.agg-footer__newsletter-btn {
  background: #ffffff;
  color: #050608;
  border: none;
  border-radius: 9999px;
  padding: 13px 20px;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font);
  white-space: nowrap;
}
.agg-footer__newsletter-btn:hover { opacity: 0.85; }
.agg-footer__col-title {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 20px; /* mb-5 */
}
.agg-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
}
.agg-footer__link {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  transition: color 200ms ease;
}
.agg-footer__link:hover { color: #ffffff; }
.agg-footer__contact { display: flex; flex-direction: column; gap: 12px; }
.agg-footer__contact-link {
  display: flex;
  align-items: center;
  gap: 10px; /* gap-2.5 */
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  transition: color 200ms ease;
  text-decoration: none;
}
.agg-footer__contact-link:hover { color: #ffffff; }
.agg-footer__credit {
  color: inherit;
  text-decoration: none;
}
.agg-footer__credit:hover { color: #ffffff; }
.agg-footer__bottom {
  margin-top: 64px; /* mt-16 */
  padding-top: 24px; /* pt-6 */
  border-top: 1px solid rgba(255,255,255,0.20);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px; /* gap-3 */
  color: rgba(255,255,255,0.60);
  font-size: 12px; /* text-xs */
}

/* 16. RESPONSIVE
   Mobile ≤767px | Tablet 768–1279px
*/

/* ── HEADER: hamburger menu ≤1199px ──
   Wider than the general mobile breakpoint on purpose: the horizontal nav's
   width depends on the active language (French/Norwegian labels run
   noticeably longer than English/Italian), and the header grid gives the nav
   column the same width as the wordmark column. Below this width there isn't
   guaranteed room for the longest translated label set without the nav
   running into the centred logo, so the hamburger takes over instead of
   letting that happen. Covers phones too — no separate phone-only header
   block needed. */
@media (max-width: 1199px) {

  /* Header — hamburger on the left, logo on the right. Swaps off the desktop
     1fr/auto/1fr grid because the wordmark is hidden and the nav is fixed,
     which would otherwise leave both items sharing the same track. */
  .agg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    top: 0;
  }
  /* Track the admin bar's real height instead of assuming the mobile one.
     WP only grows #wpadminbar to 46px at ≤782px — across the rest of the
     tablet range it is still 32px, so a flat 46px here pushed the header 14px
     below the bar and left a strip of page showing above it. The ≤782px
     override lives after this block; it can't be nested inside it. */
  .admin-bar .agg-header { top: 32px; }
  .admin-bar .agg-hero { margin-top: 32px; }

  .agg-hamburger { order: 1; }
  .agg-header__logomark { order: 2; margin: 0; }

  /* Hamburger button */
  .agg-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 60;
  }
  .agg-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 300ms ease, opacity 300ms ease;
    transform-origin: center;
  }
  .agg-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .agg-hamburger--open span:nth-child(2) { opacity: 0; }
  .agg-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile nav drawer */
  .agg-header__nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Must reset the desktop `justify-self: end`. Box alignment applies to
       fixed-position boxes too, so with inset:0 it collapses the drawer to
       shrink-to-fit width and pins it right instead of filling the screen. */
    justify-self: stretch;
    background: rgba(5, 10, 20, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 55;
    /* Belt-and-braces against a short containing block (see .agg-header::before)
       and against the drawer being taller than a small landscape viewport. */
    min-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .agg-header__nav.agg-nav--open { display: flex; }

  /* Freeze the page behind an open drawer. Needs the extra .agg-nav-lock
     specificity to beat the inline `body { overflow-y: visible !important }`
     in header.php, which is later in the cascade. */
  body.agg-nav-lock { overflow: hidden !important; }
  .agg-header__nav-link { font-size: 18px; }
  .agg-lang-pill { font-size: 14px; padding: 6px 16px; }
  .agg-lang-switcher .trp-language-item__current { padding: 6px 16px !important; }
  .agg-lang-switcher .trp-language-item-name { font-size: 14px !important; }
  .agg-header__wordmark { display: none; }
}

/* 768–782px is the one band where the bar really is 46px tall. Must come after
   the ≤1199px block above, which resets the offset to 32px; below 768px
   agg_hide_admin_bar_mobile() hides the bar and zeroes the offset outright. */
@media (max-width: 782px) {
  .admin-bar .agg-header { top: 46px; }
  .admin-bar .agg-hero { margin-top: 46px; }
}

/* ── MOBILE ≤767px ── */
@media (max-width: 767px) {

/* Hero */
  .agg-hero__content { padding: var(--nav-h) 20px 60px; margin-top: -240px; }
  .agg-hero__headline { font-size: clamp(2rem, 11vw, 3.5rem); margin-bottom: 20px; }
  .agg-hero__subtitle { font-size: 15px; margin-bottom: 36px; }
  
/* Problem */
  .agg-problem { min-height: 50svh; padding: 10px 0 100px; }
  .agg-problem__inner { padding: 0 20px; margin-top: -80px; }
  .agg-problem__headline { font-size: clamp(1.6rem, 7vw, 2.5rem); margin-bottom: 24px; }
  .agg-problem__body { font-size: 14px; margin-bottom: 32px; }

  /* Solution */
  .agg-solution { padding-top: 80px; }
  .agg-solution__intro { margin-bottom: 56px; font-size: 1.1rem !important; }
  .agg-stats { grid-template-columns: repeat(2, 1fr); }
  .agg-stat + .agg-stat { border-left: none; }
  .agg-stat:nth-child(3),
  .agg-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.15); }
  .agg-stat__value { font-size: 48px; }

  /* About */
  .agg-about { padding: 80px 0 100px; }
  .agg-about__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }
  .agg-about__left { position: static; }
  .agg-about__headline { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .agg-about__body { max-width: 100%; }
  .agg-about__trigger-label { font-size: 15px; }

  /* Technology */
  .agg-technology { padding: 60px 0 60px; margin-top: 0; }
  .agg-technology__cards { flex-direction: column; gap: 16px; }
  .tech-card { margin-left: 0; }
  .tech-card:nth-child(1) .tech-card__content,
  .tech-card:nth-child(2) .tech-card__content,
  .tech-card:nth-child(3) .tech-card__content { padding-top: 32px; }
  .tech-card__num { font-size: 64px; }
  .agg-technology__heading { margin-top: 32px; }
  .agg-technology__inner { padding: 0 20px; }

  /* Proving */
  .agg-proving__bg-img { display: none; }
  .agg-proving__bg-glow { display: none; }
  .agg-proving__inner { padding: 0 20px; }
  .agg-proving__headline-wrap {
    padding-left: 0;
    padding-top: 80px;
    padding-bottom: 40px;
  }
  .agg-proving__headline {
    white-space: normal;
    font-size: clamp(2rem, 12vw, 4rem);
    gap: 16px;
  }
  .agg-proving__features {
    padding-left: 0;
    grid-template-columns: 1fr;
    margin-top: 48px;
    row-gap: 40px;
  }
  .agg-proving__feature--bordered { padding-left: 0; border-left: none; }

  /* Live Statement */
  .agg-live-statement {
    padding: 80px 24px;
    background-size: 180%;
  }
  .agg-live-statement__text { font-size: 20px; line-height: 1.5; }

  /* Innovation */
  .agg-innovation { padding: 80px 0; }
  .agg-innovation__grid { grid-template-columns: 1fr; }
  .agg-innovation__stat-banner { flex-direction: column; gap: 16px; padding: 24px; }
  .agg-innovation__stat-value { font-size: 48px; }
  .agg-innovation__inner { padding: 0 20px; }
  .agg-innovation__headline { max-width: 100%; }

  /* Contact */
  .agg-contact { padding: 80px 0; }
  .agg-contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 20px;
  }

  /* Footer */
  .agg-footer__inner { padding: 48px 20px; }
  .agg-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .agg-footer__bottom { flex-direction: column; gap: 8px; margin-top: 40px; }
  .agg-footer__newsletter { flex-direction: column; align-items: flex-start; margin-top: 40px; }
  .agg-footer__newsletter-form { flex-direction: column; align-items: stretch; width: 100%; }
  .agg-footer__newsletter-input { width: 100%; }

  /* Static pages */
  .agg-page { padding: 120px 0 80px; }
  .agg-page__inner { padding: 0 20px; }
}

/* ── TABLET 768–1279px ── */
@media (min-width: 768px) and (max-width: 1279px) {

  /* Header */
  .agg-header { padding: 20px 32px; }

  /* Hero */
  .agg-hero__headline { font-size: clamp(2.5rem, 7vw, 5rem); }
  .agg-hero__content { margin-top: -200px; }

  /* Problem */
  .agg-problem { padding-bottom: 120px; min-height: auto; }
  .agg-problem__inner { padding: 0 100px; margin-top: -80px; max-width: 600px; margin-left: auto; margin-right: auto; }
  .agg-problem__headline { font-size: clamp(1.6rem, 4vw, 2.5rem); }
  .agg-problem__body { font-size: 14px; }

  /* Solution */
  .agg-solution { padding-top: 80px; padding-bottom: 80px; }
  .agg-solution__inner { padding: 0 48px; }
  .agg-solution__intro { font-size: clamp(1rem, 2vw, 1.3rem) !important; }
  .agg-solution__intro-box { max-width: 500px; }
  .agg-stat__value { font-size: 60px; }
  .agg-stats { grid-template-columns: repeat(2, 1fr); }
  .agg-stat + .agg-stat { border-left: none; }
  .agg-stat:nth-child(2n) { border-left: 1px solid rgba(255,255,255,0.15); }
  .agg-stat:nth-child(3),
  .agg-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.15); }

  /* About */
  .agg-about { padding: 120px 0 160px; }
  .agg-about__inner {
    padding: 0 48px;
    gap: 64px;
    grid-template-columns: 1fr 1.2fr;
  }

  /* Technology */
  .agg-technology__inner { padding: 0 32px; display: flex; flex-direction: column; align-items: center; }
  .agg-technology__heading { order: -1; margin-top: 0; margin-bottom: 40px; width: 100%; }
  .agg-technology__cards { flex-direction: column; gap: 16px; width: 100%; max-width: 600px; }
  .tech-card { margin-left: 0; }
  .tech-card__num { font-size: 72px; }
  .tech-card__img { visibility: hidden; aspect-ratio: 3 / 4; width: 100%; }
  .tech-card__frame {
    background: linear-gradient(
      160deg,
      rgba(31, 157, 107, 0.25) 0%,
      rgba(5, 10, 20, 0.95) 45%,
      rgba(10, 30, 50, 0.98) 100%
    );
    border: 1px solid rgba(103, 255, 193, 0.12);
    border-radius: 4px;
    overflow: hidden;
  }
  .tech-card__content--1,
  .tech-card__content--2,
  .tech-card__content--3 { padding-top: 40px; }

  /* Proving */
  .agg-proving__inner { padding: 0 48px; }
  .agg-proving__headline { font-size: clamp(2.5rem, 6vw, 7rem); }
  .agg-proving__headline-wrap { padding-left: 25%; padding-top: 200px; }
  .agg-proving__features { padding-left: 25%; }

  /* Live Statement */
  .agg-live-statement { padding: 160px 80px; }
  .agg-live-statement__text { font-size: 26px; }

  /* Innovation */
  .agg-innovation__grid { grid-template-columns: 1fr; }
  .agg-innovation__inner { padding: 0 32px; }

  /* Contact */
  .agg-contact__inner {
    padding: 0 32px;
    gap: 48px;
  }

  /* Footer */
  .agg-footer__inner { padding: 64px 32px; }
  .agg-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }

  /* Static pages */
  .agg-page { padding: 140px 0 100px; }
}


/* Tablet 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .agg-proving__bg-img { transform: translateY(-98%); }
}

/* Laptop 1024–1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .agg-proving__bg-img { transform: translateY(-73%); }
}

/* 4K 1536px+ */
@media (min-width: 1536px) {
  .agg-proving__bg-img { transform: translateY(-51%); }
}

/* Hide number input spinners on Fluent Forms phone field */
.agg-contact input[type="number"]::-webkit-inner-spin-button,
.agg-contact input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.agg-contact input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ============================================================
   STATIC PAGES (Privacy Policy, Terms of Service)
   ============================================================ */
.agg-page {
    background: #050a14;
    min-height: 100vh;
    padding: 160px 0 120px;
    position: relative;
    overflow: hidden;
}

.agg-page__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.agg-page__bg-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent 0%, #050a14 100%);
    pointer-events: none;
    z-index: 1;
}

.agg-page__bg-glow {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 800px;
    height: 800px;
    background: radial-gradient(ellipse at 30% 40%, rgba(31, 157, 107, 0.2) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

.agg-page__inner {
    position: relative;
    z-index: 2;
}

.agg-page__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.agg-page__title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.agg-page__content {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.8;
}

.agg-page__content h2 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 48px;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.agg-page__content p {
    margin-bottom: 16px;
}

.agg-page__content a {
    color: #67FFC1;
    text-decoration: none;
}

.agg-page__content a:hover {
    text-decoration: underline;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.agg-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(13, 31, 45, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 40px;
}

.agg-cookie-banner__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.agg-cookie-banner__text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.agg-cookie-banner__link {
    color: #67FFC1;
    text-decoration: none;
}

.agg-cookie-banner__link:hover {
    text-decoration: underline;
}

.agg-cookie-banner__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.agg-cookie-banner__btn {
    padding: 10px 24px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
}

.agg-cookie-banner__btn:hover {
    opacity: 0.85;
}

.agg-cookie-banner__btn--accept {
    background: #67FFC1;
    color: #000000;
    border: none;
}

.agg-cookie-banner__btn--reject {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
    .agg-cookie-banner {
        padding: 20px 24px;
    }
    .agg-cookie-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ============================================================
   COOKIE MODAL
   ============================================================ */
.agg-cookie-banner__btn--customise {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.agg-cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agg-cookie-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.agg-cookie-modal__box {
    position: relative;
    z-index: 1;
    background: #0d1f2d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    margin: 24px;
    overflow: hidden;
}

.agg-cookie-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.agg-cookie-modal__title {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.agg-cookie-modal__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.agg-cookie-modal__close:hover {
    color: #ffffff;
}

.agg-cookie-modal__body {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.agg-cookie-modal__desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.agg-cookie-pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.agg-cookie-pref:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.agg-cookie-pref__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agg-cookie-pref__name {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
}

.agg-cookie-pref__desc {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.agg-cookie-toggle {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.agg-cookie-toggle--locked {
    cursor: default;
}

.agg-cookie-toggle__label {
    color: #67FFC1;
    font-size: 0.75rem;
    font-weight: 600;
}

.agg-cookie-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.agg-cookie-toggle__slider {
    display: block;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    transition: background 0.2s;
    position: relative;
}

.agg-cookie-toggle__slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.agg-cookie-toggle__input:checked + .agg-cookie-toggle__slider {
    background: #67FFC1;
}

.agg-cookie-toggle__input:checked + .agg-cookie-toggle__slider::after {
    transform: translateX(20px);
}

.agg-cookie-modal__footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: flex-end;
}