/* AIC Cloudflare — site-wide styles. Direct port of the live Shopify theme. */

/* Chivo is loaded via <link rel="preconnect"> + <link rel="stylesheet"> in each HTML head for faster paint */
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --aic-bg:           #ffffff;
  --aic-ink:          #121212;
  --aic-ink-soft:     #0a0a0a;
  --aic-red:          #ae1f19;
  --aic-red-dark:     #8e1814;
  --aic-sophron-navy: #03024f;
  --aic-gold:         #D4AF37;
  --aic-gold-hot:     #FFD700;

  --aic-grey-700:  #374151;
  --aic-grey-500:  #6b7280;
  --aic-grey-400:  #9ca3af;
  --aic-grey-300:  #d1d5db;
  --aic-grey-200:  #e5e7eb;
  --aic-grey-100:  #f3f4f6;

  --aic-success-bg: #f0fdf4; --aic-success-fg: #166534; --aic-success-bd: #bbf7d0;
  --aic-error-bg:   #fef2f2; --aic-error-fg:   #991b1b; --aic-error-bd:   #fecaca;
  --aic-info-bg:    #fff7ed; --aic-info-fg:    #7c2d12; --aic-info-bd:    #fed7aa;

  --aic-font:  'Chivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --aic-page-width: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--aic-font); color: var(--aic-ink); background: var(--aic-bg); -webkit-font-smoothing: antialiased; }
body { font-weight: 400; line-height: 1.5; }
h1, h2, h3, h4, h5 { font-family: var(--aic-font); color: var(--aic-ink); font-weight: 500; letter-spacing: -0.005em; }
a { color: var(--aic-ink); text-decoration: none; }
a:hover { text-decoration: none; }
/* Underline only inside long-form text contexts (legal pages, descriptions) */
.aic-prose a, .aic-legal a { text-decoration: underline; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.page-width { max-width: var(--aic-page-width); margin: 0 auto; padding: 0 24px; }

/* ── Global button hover (mirrors base.css .button) ─────────────────── */
.button, .aic-button { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.button:hover, .aic-button:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

/* ── Announcement bar ───────────────────────────────────────────────── */
.aic-announce { width: 100%; background: #fff; border-bottom: 1px solid var(--aic-grey-200); display: flex; justify-content: center; }
.aic-announce-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--aic-ink); font-size: 0.85rem; font-weight: 500; }
.aic-announce-link:hover { text-decoration: none; color: var(--aic-red); }
.aic-announce-link:hover svg { transform: translateX(3px); }
.aic-announce-link svg { width: 14px; height: 10px; transition: transform 0.2s; }

/* ── Header (edge-to-edge, sticky, frosted glass) ───────────── */
.aic-nav { position: sticky; top: 0; z-index: 9999; background: rgba(255,255,255,0.80); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(18,18,18,0.07); transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
/* Frosted glass bar shown immediately (no transparent-until-scroll state). On
   scroll it just gains a little more opacity + a lift shadow. Only the
   background/shadow change — no height change — so there's no layout shake. */
.aic-nav.aic-nav--scrolled { background: rgba(255,255,255,0.90); box-shadow: 0 6px 28px rgba(18,18,18,0.10); border-bottom-color: rgba(18,18,18,0.10); }
/* Where backdrop-blur isn't supported, keep the bar opaque so page content
   never shows through behind the links. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .aic-nav { background: #fff; }
  .aic-nav.aic-nav--scrolled { background: #fff; }
}
.aic-nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 14px 3rem; gap: 24px; max-width: 100%; }
@media (max-width: 750px) { .aic-nav-inner { padding: 12px 1.25rem; } }
.aic-nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.aic-nav-brand:hover { opacity: 0.78; transform: scale(1.03); }
.aic-nav-logo  { height: 56px; width: auto; display: block; }
.aic-nav-links { display: flex; align-items: center; gap: 1.6rem; font-size: 0.9rem; }
#aic-nav-links-left  { flex: 1 1 auto; justify-content: flex-start; margin-left: 2.25rem; }
#aic-nav-links-right { flex: 0 0 auto; justify-content: flex-end; }
.aic-nav-links > a, .aic-nav-dropdown > a { color: var(--aic-ink); font-weight: 600; letter-spacing: 0.005em; line-height: 1; padding: 4px 0; position: relative; transition: color 0.15s; }
/* Underline-on-hover only on flat nav links; dropdown triggers already have a ▾ caret indicator. */
.aic-nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--aic-red); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s ease; }
.aic-nav-links > a:hover, .aic-nav-dropdown > a:hover { color: var(--aic-red); text-decoration: none; }
.aic-nav-links > a:hover::after { transform: scaleX(1); }
.aic-nav-dropdown--sophron > a { color: var(--aic-sophron-navy) !important; }
.aic-nav-dropdown--sophron > a:hover { color: var(--aic-red) !important; }
/* Featured = a gold chip (dark text on a gold fill). Gold *text* was barely
   legible on the light bar; a filled chip reads clearly on both the light bar
   and the dark hero overlay, and signals "featured" deliberately. */
.aic-nav-featured { color: #c8961a !important; -webkit-text-fill-color: #c8961a; -webkit-background-clip: border-box; background-clip: border-box; background: none; background-image: none; border: 0; padding: 4px 0; font-weight: 800; }
/* Gold underline on hover (instead of the default red) to match the gold text. */
.aic-nav-links > a.aic-nav-featured::after { background: linear-gradient(90deg, var(--aic-gold), var(--aic-gold-hot)); }
.aic-nav-links > a.aic-nav-featured:hover { color: var(--aic-gold-hot) !important; -webkit-text-fill-color: var(--aic-gold-hot); }
.aic-nav-account { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; color: var(--aic-ink); margin-left: 4px; text-decoration: none; }
.aic-nav-account:hover { background: var(--aic-grey-100); text-decoration: none; }
/* The account avatar is a direct nav child, so kill the sliding red underline bar. */
.aic-nav-links > a.aic-nav-account::after { display: none !important; content: none !important; }
.aic-nav-account svg { width: 30px; height: 30px; }
/* Signed-in: the account icon becomes the member's profile photo (set by
   aic-chrome.js fillAccountAvatar). The SVG stays in the DOM as a fallback. */
.aic-nav-account .aic-nav-avatar { width: 46px; height: 46px; aspect-ratio: 1 / 1; flex: 0 0 auto; border-radius: 50%; object-fit: cover; display: none; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.aic-nav-account.has-avatar { overflow: visible; }
.aic-nav-account.has-avatar svg { display: none; }
.aic-nav-account.has-avatar .aic-nav-avatar { display: block; }
.aic-nav-account.has-avatar:hover { background: transparent; text-decoration: none; }
.aic-nav-account.has-avatar:hover .aic-nav-avatar { transform: scale(1.06); box-shadow: 0 0 0 3px #ae1f19, 0 2px 10px rgba(0,0,0,0.28); }
/* Mobile drawer: show the profile photo as a circular icon next to "My account". */
#aic-drawer-cta-account.has-avatar { display: flex; align-items: center; justify-content: center; gap: 10px; }
.aic-drawer-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
/* Log in — a plain nav link (no box). Inherits the link colour per state
   (dark on the light bar, white over the dark hero) and the red underline on
   hover, like the other links; just nudged right for a little separation. */
.aic-nav-cta { margin-left: 14px; }

/* ── Homepage: header overlays the full-bleed hero banner ──────────────
   The bar is fixed over the dark hero with light text + a WHITE logo (the
   Trading Fair treatment, incl. the Log in button). As soon as the page
   scrolls, .aic-nav--scrolled takes over and it becomes the normal light
   frosted bar with dark text and the RED/colour logo — so these light
   overrides only apply at the very top, while the hero is behind it.
   Mobile keeps the top fully transparent; desktop gets a hint of dark glass
   (see the min-width override below) so the bar reads as glass immediately. */
body.aic-home-hero .aic-nav { position: fixed; left: 0; right: 0; top: 0; }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-logo { filter: brightness(0) invert(1); }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-links > a,
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-dropdown > a { color: rgba(255,255,255,0.88); }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-links > a:hover,
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-dropdown > a:hover { color: #fff; }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-dropdown--sophron > a { color: #dfe2ff !important; }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-dropdown > a::after { color: rgba(255,255,255,0.6); }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-account { color: #fff; }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-account:hover { background: rgba(255,255,255,0.14); }
body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) .aic-nav-burger { color: #fff; }
/* Desktop only: a subtle dark glass at the top (instead of fully transparent)
   so the bar reads as glass instantly while the white logo + light links stay
   legible. Mobile keeps the transparent top. */
@media (min-width: 991px) {
  body.aic-home-hero .aic-nav:not(.aic-nav--scrolled) { background: rgba(12,16,28,0.24); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom-color: rgba(255,255,255,0.10); }
}

/* Dropdowns */
.aic-nav-dropdown { position: relative; padding: 8px 0; }
.aic-nav-dropdown > a::after { content: '▾'; margin-left: 4px; font-size: 0.65rem; color: var(--aic-grey-400); position: relative; top: -1px; }
/* Invisible bridge so the panel stays open as mouse moves down from trigger */
.aic-nav-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.aic-nav-dropdown-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #fff; border: 1px solid rgba(18,18,18,0.05); border-radius: 14px; box-shadow: 0 16px 44px rgba(18,18,18,0.16); padding: 7px 0; min-width: 220px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s; z-index: 60; overflow: hidden; }
.aic-nav-dropdown:hover .aic-nav-dropdown-panel,
.aic-nav-dropdown:focus-within .aic-nav-dropdown-panel { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 0.18s, transform 0.18s, visibility 0s; }
.aic-nav-dropdown-panel a { display: block; padding: 1rem 1.5rem; font-size: 0.9rem; font-weight: 500; color: var(--aic-ink); border-bottom: 1px solid #f0f0f0; transition: padding-left 0.18s ease, background 0.18s ease, color 0.18s ease; }
.aic-nav-dropdown-panel a:last-child { border-bottom: 0; }
.aic-nav-dropdown-panel a:hover { background: linear-gradient(90deg, rgba(174,31,25,0.1), rgba(211,47,47,0.1)); padding-left: 1.85rem; text-decoration: none; color: var(--aic-red); }
.aic-nav-dropdown-panel--sophron a { color: var(--aic-sophron-navy); }
.aic-nav-dropdown-panel--sophron a:hover { color: var(--aic-red); }

/* ── Mobile glass menu (port of theme.liquid .hamburger-toggle + .dropdown-menu) ── */
.aic-nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  cursor: pointer;
  color: var(--aic-ink);
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  position: relative;
  z-index: 10001;
}
.aic-nav-burger:hover { background: rgba(255,255,255,0.40); border-color: rgba(255,255,255,0.35); transform: scale(1.06); }
.aic-nav-burger svg { width: 22px; height: 22px; display: block; }
.aic-nav-burger .aic-nav-burger-icon--close { display: none; }
.aic-nav-burger.is-active .aic-nav-burger-icon--open { display: none; }
.aic-nav-burger.is-active .aic-nav-burger-icon--close { display: block; }

.aic-nav-drawer {
  position: fixed; inset: 0;
  max-height: 0; overflow: hidden;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  z-index: 9998;
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
.aic-nav-drawer.is-open { max-height: 100vh; opacity: 1; pointer-events: auto; }
.aic-nav-drawer-panel {
  width: 100%; max-width: 420px; max-height: 100vh;
  padding: 5rem 1.25rem 2rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  overflow-y: auto;
}
.aic-nav-drawer a,
.aic-nav-drawer .aic-drawer-trigger {
  display: block; width: 100%; text-align: center;
  padding: 1rem 2rem;
  background: rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  font-family: var(--aic-font);
  font-size: 1.05rem; font-weight: 600;
  color: var(--aic-ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.aic-nav-drawer a:hover,
.aic-nav-drawer .aic-drawer-trigger:hover {
  background: rgba(255,255,255,0.40); border-color: rgba(255,255,255,0.35);
  transform: translateY(-2px); text-decoration: none;
}
.aic-nav-drawer a:active,
.aic-nav-drawer .aic-drawer-trigger:active { transform: translateY(0) scale(0.985); background: rgba(255,255,255,0.32); }
.aic-drawer-group { width: 100%; }
.aic-drawer-trigger { position: relative; padding-right: 3rem; }
.aic-drawer-trigger::after {
  content: '▾';
  position: absolute; right: 1.5rem; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}
.aic-drawer-group.is-expanded .aic-drawer-trigger::after { transform: translateY(-50%) rotate(180deg); }
.aic-drawer-submenu {
  max-height: 0; overflow: hidden; opacity: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0 0.5rem;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease, padding 0.25s ease;
}
.aic-drawer-group.is-expanded .aic-drawer-submenu {
  max-height: 600px; opacity: 1; margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
}
.aic-drawer-submenu a { font-size: 0.95rem; padding: 0.75rem 1.25rem; border-radius: 14px; background: rgba(255,255,255,0.18); }

/* Lock scroll while the glass menu is open. The drawer's own backdrop-filter blurs
   whatever shows through, so we don't need to filter page content separately. */
body.aic-menu-open { overflow: hidden; }
/* Header responsiveness — never DROP nav items.
   Previously the bar hid items at 1500/1350/1200 while the burger didn't appear
   until 990, so between those widths (or when zoomed in) links silently vanished
   with no way to reach them. Instead the bar now becomes TWO TIERS when a single
   row runs out of room: the logo keeps the top row and every link wraps onto a
   second tier, staying visible and clickable. The burger only takes over on true
   mobile widths. data-hide-at is intentionally no longer honoured. */
@media (min-width: 991px) and (max-width: 1500px) {
  /* Reserve a column on the right for the pinned profile/login CTA so wrapping
     links never slide under it. */
  .aic-nav-inner {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 92px;
  }
  /* Logo keeps its natural width so the first row of links sits ON THE SAME LINE
     as it; overflow links wrap to the tier below. */
  .aic-nav-brand { flex: 0 0 auto; }
  #aic-nav-links-left {
    flex: 1 1 auto;
    margin-left: 1.5rem;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 1.25rem;
  }
  #aic-nav-links-right {
    flex: 0 1 auto;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 1.25rem;
  }
  /* Profile pic / Log in: always pinned to the top-right corner, vertically
     centred on the logo's row, out of the wrapping flow. Only one of the two is
     ever visible (JS toggles display), so pinning both is safe. */
  #aic-nav-cta-login,
  #aic-nav-cta-account,
  .aic-nav-account {
    position: absolute;
    top: 10px;
    right: 3rem;
    margin: 0;
    height: 56px;             /* == logo height, so top:10px == padding-top */
    display: inline-flex;
    align-items: center;      /* centres text OR avatar on the logo's row */
  }
  .aic-nav-links [data-hide-at] { display: inline-flex; }
}
@media (max-width: 990px)  { .aic-nav-links { display: none; } .aic-nav-burger { display: inline-flex; } }

/* ── Generic page wrap ──────────────────────────────────────────────── */
.aic-wrap { max-width: var(--aic-page-width); margin: 0 auto; padding: 36px 24px 80px; }
.aic-h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 700; margin: 0 0 12px; letter-spacing: -0.03em; line-height: 1.1; }
.aic-lede { font-size: 1.05rem; color: var(--aic-grey-500); margin: 0 0 28px; line-height: 1.55; max-width: 720px; }

/* ── HERO (index.liquid port) ───────────────────────────────────────── */
.aic-hero-section { height: 100vh; height: 100svh; min-height: 540px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; position: relative; }
#AICBanner { position: relative; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-bottom: 200px; }
#AICBanner > img.aic-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.08); will-change: transform; }
#AICBanner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.25) 100%); z-index: 1; pointer-events: none; }
#AICBanner::after  { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(0,0,0,0.15); z-index: 1; pointer-events: none; }
.aic-banner__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; will-change: opacity, transform; }
.aic-hero-stagger { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.aic-hero-stagger.aic-hero-in { opacity: 1; transform: translateY(0); }
.aic-banner__logo { width: 320px; height: auto; margin-bottom: 1.5rem; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.15)); }
.aic-banner__title { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 300; color: #fff; margin: 0 0 2rem; letter-spacing: -0.01em; line-height: 1.1; text-shadow: 0 2px 15px rgba(0,0,0,0.2); }
.aic-banner__buttons { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.aic-banner__buttons .aic-btn {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #fff; border: 1px solid rgba(255,255,255,0.4);
  padding: 14px 64px; font-weight: 600; font-size: 1.15rem; border-radius: 9999px;
  text-decoration: none; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
  cursor: pointer;
}
.aic-banner__buttons .aic-btn:hover {
  background: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.6);
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
}
.aic-banner__buttons .aic-btn:active { transform: translateY(0); }

.aic-scroll-hint { position: absolute; bottom: 28px; left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255,255,255,0.7); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; pointer-events: none; }
.aic-scroll-arrow { width: 10px; height: 10px; border-right: 1.5px solid rgba(255,255,255,0.7); border-bottom: 1.5px solid rgba(255,255,255,0.7); transform: rotate(45deg); animation: aicBounce 2s ease-in-out infinite; box-sizing: border-box; }
@keyframes aicBounce { 0%,100% { transform: rotate(45deg) translateY(0); opacity: 0.5; } 50% { transform: rotate(45deg) translateY(6px); opacity: 1; } }
.aic-hero-section .logo-scroller-wrapper {
  position: absolute; left: 0; right: 0; bottom: 90px; z-index: 9;
  padding: 12px 10px; margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.55) 80%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 749px) {
  .aic-hero-section { min-height: 480px; }
  .aic-banner__logo  { width: 220px; margin-bottom: 0.75rem; }
  .aic-banner__title { font-size: 2.1rem; margin-bottom: 1.5rem; }
  .aic-banner__buttons { flex-direction: column; gap: 10px; width: 100%; padding: 0 3rem; }
  .aic-banner__buttons .aic-btn { padding: 12px 36px; font-size: 1rem; width: 100%; text-align: center; }
  .aic-scroll-hint { bottom: 14px; font-size: 0.6rem; }
  .aic-hero-section .logo-scroller-wrapper { bottom: 56px; padding: 6px 6px; }
  #AICBanner { padding-bottom: 130px; }
  /* Mobile scroller fixes: drop the side fade-mask (some iOS Safari versions
     stop rendering the masked content entirely after scroll-into-view), and
     ensure the track keeps animating. */
  .logo-scroller-container { -webkit-mask-image: none; mask-image: none; }
  .logo-scroller-track { animation-duration: 22s; }
}

/* ── Logo scroller ──────────────────────────────────────────────────── */
.logo-scroller-wrapper { width: 100%; padding: 10px 10px 15px; text-align: center; margin: 0; box-sizing: border-box; flex-shrink: 0; }
.logo-scroller-container { width: 100%; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); contain: layout style paint; transform: translateZ(0); }
.logo-scroller-track { display: flex; align-items: center; gap: 40px; width: fit-content; animation: aic-logo-scroll 30s linear infinite; will-change: transform; transform: translate3d(0,0,0); }
.logo-scroller-track:hover { animation-play-state: paused; }
.logo-item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 160px; height: 60px; transition: transform 0.3s ease; transform: translateZ(0); }
.logo-item:hover { transform: translateZ(0) scale(1.1); }
.logo-item img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; display: block; }
@keyframes aic-logo-scroll { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-33.333%,0,0); } }
@media (max-width: 768px) {
  .logo-scroller-track { gap: 30px; }
  .logo-item { width: 120px; height: 50px; }
  .logo-item img { max-height: 50px; }
}

/* ── WHAT WE DO (3 about rows) ──────────────────────────────────────── */
.homepage-whatwedo-padding { padding-top: 27px; padding-bottom: 27px; }
@media (min-width: 750px) { .homepage-whatwedo-padding { padding-top: 36px; padding-bottom: 36px; } }
.about-wrapper { display: flex; flex-direction: column; gap: 2rem; }
.about-row {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.4s ease; cursor: pointer; text-decoration: none; color: inherit;
}
.about-img { flex: 1 1 45%; min-width: 280px; }
.about-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 16px 0 0 16px; }
.about-content { flex: 1 1 50%; padding: 2rem; }
.about-content .subheading { font-size: 0.75rem; font-weight: 600; color: var(--aic-red); text-transform: uppercase; margin-bottom: 0.3rem; letter-spacing: 0.2em; }
.about-content h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 700; margin-bottom: 1.5rem; letter-spacing: -0.03em; line-height: 1.1; }
.about-content p { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1rem; color: #333; }
.about-row:nth-child(even) { flex-direction: row-reverse; }
.about-row:nth-child(even) .about-img img { border-radius: 0 16px 16px 0; }
@media (min-width: 768px) {
  .about-wrapper:hover .about-row { filter: blur(3px) brightness(0.9); opacity: 0.6; transform: scale(0.98); }
  .about-wrapper:hover .about-row:hover { filter: none; opacity: 1; transform: scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
}
@media (max-width: 767px) {
  .about-row { opacity: 1 !important; filter: none !important; transform: scale(1) !important; box-shadow: none !important; }
  .about-row:active { transform: scale(0.97) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }
}

/* ── UNIFIED BANNERS (links.liquid port) ────────────────────────────── */
.unified-banners-section { font-family: var(--aic-font); position: relative; z-index: 0; }
.unified-banner-item { position: relative; height: 30vh; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 0; }
.unified-banner-item:not(:first-child) { margin-top: -1px; }
.unified-banner-item.partnerships-banner { height: 50vh; }
.unified-banner-item > a { position: absolute; inset: 0; z-index: 10; }
.unified-banner-image-container { position: absolute; inset: 0; z-index: 1; }
.unified-banner-image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.unified-banner-item:hover .unified-banner-image-container img { transform: scale(1.05); }
.unified-banner-text { position: relative; z-index: 5; text-align: center; padding: 0 40px; pointer-events: none; width: 100%; line-height: normal; }
.unified-banner-title {
  font-size: clamp(24px, 4vw, 36px); font-weight: 300; margin: 0;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 20px rgba(255,255,255,0.3), 0 2px 10px rgba(0,0,0,0.3), 0 0 40px rgba(255,255,255,0.2);
  letter-spacing: 0.05em;
}

/* Partnerships split-image */
.partnerships-images-container { position: absolute; inset: 0; display: flex; z-index: 1; }
.partnerships-image { width: 50%; height: 100%; overflow: hidden; position: relative; }
.partnerships-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.partnerships-image:first-child img { object-position: center 15%; }
.unified-banner-item:hover .partnerships-image img { transform: scale(1.05); }

/* Initiatives */
.initiatives-section { padding: 60px 20px; background: #fff; }
.initiatives-header, .special-offers-header { text-align: center; margin: 0 0 40px; }
.initiatives-label, .special-offers-label { font-size: 0.75rem; font-weight: 600; color: var(--aic-red); text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 0.15rem; }
.initiatives-subtitle, .special-offers-title { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; color: var(--aic-ink-soft); margin: 0; letter-spacing: -0.03em; line-height: 1.1; }
.initiatives-banners-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1700px; margin: 0 auto; }
@media (max-width: 990px) { .initiatives-banners-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .initiatives-banners-container { grid-template-columns: 1fr; } }
.initiative-banner-item { position: relative; height: 28vh; min-height: 260px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.initiative-banner-item:hover { transform: translateY(-4px); }
.initiative-banner-item > a { position: absolute; inset: 0; z-index: 100; }
.initiative-banner-image-container { position: absolute; inset: 0; z-index: 1; }
.initiative-banner-image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.initiative-banner-item:hover .initiative-banner-image-container img { transform: scale(1.08); }
.initiative-banner-image-container img.qc-zoom { transform: scale(1.1); object-position: center 80%; }
.initiative-banner-item:hover .initiative-banner-image-container img.qc-zoom { transform: scale(1.18); }
.initiative-banner-text { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; text-align: center; padding: 12px; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%); }
.initiative-banner-title { font-size: clamp(14px, 2vw, 18px); font-weight: 500; margin: 0; color: #fff; letter-spacing: 0.02em; }

/* Special Offers */
.special-offers-section { padding: 40px 20px 0; background: #fff; }
.featured-pages-section { padding: 0 20px 40px; background: #fff; }
.featured-pages-section .featured-pages-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .featured-pages-section .featured-pages-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .featured-pages-section .featured-pages-container { grid-template-columns: 1fr; } }

.featured-pages-section .featured-banner {
  position: relative; display: flex; flex-direction: column;
  background: #000; border: 2px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 24px;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(174,31,25,0.2);
  height: 100%; overflow: hidden;
  color: #fff;
}
.featured-pages-section .featured-banner::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,153,0,0.1), transparent);
  transition: left 0.6s ease;
}
.featured-pages-section .featured-banner:hover {
  transform: translateY(-4px);
  border-color: rgba(255,153,0,0.5);
  box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,153,0,0.3);
}
.featured-pages-section .featured-banner:hover::before { left: 100%; }

.featured-pages-section .featured-banner-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; height: 100%; justify-content: center; position: relative; z-index: 2; }
.featured-pages-section .featured-banner-image { width: 120px; height: 80px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(255,153,0,0.3)); transition: all 0.4s ease; }
.featured-pages-section .featured-banner.trading-interview-banner .featured-banner-image { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(127,163,212,0.3)); }
.featured-pages-section .featured-banner:hover .featured-banner-image { transform: scale(1.08); }
.featured-pages-section .featured-banner-text { width: 100%; display: flex; flex-direction: column; align-items: center; }
.featured-pages-section .featured-banner-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(174,31,25,0.3), rgba(255,153,0,0.3));
  border: 1px solid rgba(255,153,0,0.4);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: #FF9900; margin-bottom: 10px; max-width: fit-content; white-space: nowrap;
}
.featured-pages-section .featured-banner-title {
  font-size: 18px; font-weight: 700; margin: 0 0 8px;
  background: linear-gradient(135deg, #ae1f19 0%, #d64a1a 50%, #FF9900 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  transition: all 0.3s ease;
}
.featured-pages-section .featured-banner-description { font-size: 13px; color: #c7cbe8; line-height: 1.5; margin: 0 0 10px; }
.featured-pages-section .featured-banner-features { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.featured-pages-section .featured-banner-feature {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(255,153,0,0.1); border: 1px solid rgba(255,153,0,0.2);
  font-size: 11px; color: #ffcc99;
}
.featured-pages-section .featured-banner-feature::before { content: "✓"; color: #FF9900; font-weight: bold; font-size: 12px; }

/* Scalable: teal */
.featured-pages-section .featured-banner.scalable-banner { border-color: rgba(40,235,207,0.25); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(40,235,207,0.15); }
.featured-pages-section .featured-banner.scalable-banner::before { background: linear-gradient(90deg, transparent, rgba(40,235,207,0.15), transparent); }
.featured-pages-section .featured-banner.scalable-banner:hover { border-color: rgba(40,235,207,0.5); box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 30px rgba(40,235,207,0.3); }
.featured-pages-section .featured-banner.scalable-banner .featured-banner-badge { background: linear-gradient(135deg, rgba(26,157,138,0.3), rgba(40,235,207,0.3)); border-color: rgba(40,235,207,0.4); color: #28EBCF; }
.featured-pages-section .featured-banner.scalable-banner .featured-banner-title { background: linear-gradient(135deg, #1a9d8a 0%, #20c4a8 50%, #28EBCF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.featured-pages-section .featured-banner.scalable-banner .featured-banner-image { filter: drop-shadow(0 0 12px rgba(40,235,207,0.3)); }
.featured-pages-section .featured-banner.scalable-banner .featured-banner-feature { background: rgba(40,235,207,0.1); border-color: rgba(40,235,207,0.2); color: #a8efe0; }
.featured-pages-section .featured-banner.scalable-banner .featured-banner-feature::before { color: #28EBCF; }

/* Trading Interview: light-blue */
.featured-pages-section .featured-banner.trading-interview-banner { border-color: rgba(127,163,212,0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(127,163,212,0.15); }
.featured-pages-section .featured-banner.trading-interview-banner::before { background: linear-gradient(90deg, transparent, rgba(127,163,212,0.1), transparent); }
.featured-pages-section .featured-banner.trading-interview-banner:hover { border-color: rgba(127,163,212,0.5); box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 30px rgba(127,163,212,0.25); }
.featured-pages-section .featured-banner.trading-interview-banner .featured-banner-badge { background: linear-gradient(135deg, rgba(26,47,83,0.3), rgba(42,79,115,0.3)); border-color: rgba(127,163,212,0.4); color: #7fa3d4; }
.featured-pages-section .featured-banner.trading-interview-banner .featured-banner-title { background: linear-gradient(135deg, #ffffff 0%, #7fa3d4 50%, #b8c8e0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.featured-pages-section .featured-banner.trading-interview-banner .featured-banner-feature { background: rgba(127,163,212,0.1); border-color: rgba(127,163,212,0.2); color: #b8c8e0; }
.featured-pages-section .featured-banner.trading-interview-banner .featured-banner-feature::before { color: #7fa3d4; }

/* Market Making Games: violet/magenta (sibling product to Trading Interview) */
.featured-pages-section .featured-banner.market-making-games-banner { border-color: rgba(192,132,252,0.35); background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 22px rgba(192,132,252,0.18); }
.featured-pages-section .featured-banner.market-making-games-banner::before { background: linear-gradient(90deg, transparent, rgba(236,72,153,0.15), transparent); }
.featured-pages-section .featured-banner.market-making-games-banner:hover { border-color: rgba(236,72,153,0.55); box-shadow: 0 15px 40px rgba(0,0,0,0.55), 0 0 30px rgba(236,72,153,0.28); }
.featured-pages-section .featured-banner.market-making-games-banner .featured-banner-badge { background: linear-gradient(135deg, rgba(124,58,237,0.32), rgba(236,72,153,0.32)); border-color: rgba(192,132,252,0.45); color: #e9b3ff; }
.featured-pages-section .featured-banner.market-making-games-banner .featured-banner-title { background: linear-gradient(135deg, #ffffff 0%, #c084fc 45%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.featured-pages-section .featured-banner.market-making-games-banner .featured-banner-feature { background: rgba(192,132,252,0.10); border-color: rgba(192,132,252,0.22); color: #f0d4ff; }
.featured-pages-section .featured-banner.market-making-games-banner .featured-banner-feature::before { color: #ec4899; }
.featured-pages-section .featured-banner.market-making-games-banner .featured-banner-image.market-making-games-logo { filter: drop-shadow(0 0 12px rgba(192,132,252,0.45)); width: 160px; }

/* Floating icons inside featured banners */
@keyframes bannerFloat {
  0%,100% { transform: translate(0,0) rotate(0deg);     opacity: 0.35; }
  25%     { transform: translate(10px,-15px) rotate(90deg);  opacity: 0.5; }
  50%     { transform: translate(-8px,-25px) rotate(180deg); opacity: 0.4; }
  75%     { transform: translate(12px,-10px) rotate(270deg); opacity: 0.5; }
}
.banner-float-icon { position: absolute; pointer-events: none; z-index: 1; font-weight: bold; animation: bannerFloat 18s ease-in-out infinite; }

.bybit-banner .banner-float-icon { color: #FF9900; text-shadow: 0 0 12px rgba(255,153,0,0.8), 0 0 24px rgba(255,153,0,0.5); filter: drop-shadow(0 0 6px rgba(255,153,0,0.6)); }
.bybit-banner .banner-float-icon:nth-child(1) { top: 10%; left:  8%; font-size: 20px; animation-duration: 17s; animation-delay: 0s; }
.bybit-banner .banner-float-icon:nth-child(2) { top: 25%; right:10%; font-size: 16px; animation-duration: 21s; animation-delay: 2s; }
.bybit-banner .banner-float-icon:nth-child(3) { bottom: 20%; left: 12%; font-size: 14px; animation-duration: 19s; animation-delay: 4s; }
.bybit-banner .banner-float-icon:nth-child(4) { bottom: 15%; right: 8%; font-size: 18px; animation-duration: 23s; animation-delay: 1s; }
.bybit-banner .banner-float-icon:nth-child(5) { top: 50%; left:  5%; font-size: 12px; animation-duration: 20s; animation-delay: 3s; }

.scalable-banner .banner-float-icon { color: #28EBCF; text-shadow: 0 0 12px rgba(40,235,207,0.8), 0 0 24px rgba(40,235,207,0.5); filter: drop-shadow(0 0 6px rgba(40,235,207,0.6)); }
.scalable-banner .banner-float-icon:nth-child(1) { top: 12%; left:  6%; font-size: 18px; animation-duration: 19s; animation-delay: 1s; }
.scalable-banner .banner-float-icon:nth-child(2) { top: 20%; right: 8%; font-size: 16px; animation-duration: 22s; animation-delay: 3s; }
.scalable-banner .banner-float-icon:nth-child(3) { bottom: 25%; left: 10%; font-size: 14px; animation-duration: 17s; animation-delay: 0s; }
.scalable-banner .banner-float-icon:nth-child(4) { bottom: 10%; right: 12%; font-size: 20px; animation-duration: 21s; animation-delay: 2s; }
.scalable-banner .banner-float-icon:nth-child(5) { top: 45%; right: 5%; font-size: 12px; animation-duration: 24s; animation-delay: 4s; }

.trading-interview-banner .banner-float-icon { color: #ae1f19; text-shadow: 0 0 12px rgba(174,31,25,0.8), 0 0 24px rgba(174,31,25,0.6), 0 0 36px rgba(174,31,25,0.3); filter: drop-shadow(0 0 6px rgba(174,31,25,0.8)); }
.trading-interview-banner .banner-float-icon:nth-child(1) { top: 8%;  left: 6%;  font-size: 22px; animation-duration: 18s; animation-delay: 0s; }
.trading-interview-banner .banner-float-icon:nth-child(2) { top: 15%; right: 8%; font-size: 16px; animation-duration: 22s; animation-delay: 2s; }
.trading-interview-banner .banner-float-icon:nth-child(3) { bottom: 22%; left: 10%; font-size: 18px; animation-duration: 20s; animation-delay: 4s; }
.trading-interview-banner .banner-float-icon:nth-child(4) { bottom: 10%; right: 10%; font-size: 14px; animation-duration: 19s; animation-delay: 1s; }
.trading-interview-banner .banner-float-icon:nth-child(5) { top: 50%; left: 4%; font-size: 16px; animation-duration: 23s; animation-delay: 3s; }
.trading-interview-banner .banner-float-icon:nth-child(6) { top: 35%; right: 5%; font-size: 20px; animation-duration: 17s; animation-delay: 5s; }

.market-making-games-banner .banner-float-icon { color: #ec4899; text-shadow: 0 0 12px rgba(236,72,153,0.8), 0 0 24px rgba(192,132,252,0.55), 0 0 36px rgba(124,58,237,0.35); filter: drop-shadow(0 0 6px rgba(236,72,153,0.7)); }
.market-making-games-banner .banner-float-icon:nth-child(1) { top: 9%;  left: 7%;  font-size: 22px; animation-duration: 18s; animation-delay: 0s; }
.market-making-games-banner .banner-float-icon:nth-child(2) { top: 17%; right: 9%; font-size: 16px; animation-duration: 22s; animation-delay: 2s; }
.market-making-games-banner .banner-float-icon:nth-child(3) { bottom: 24%; left: 10%; font-size: 18px; animation-duration: 20s; animation-delay: 4s; }
.market-making-games-banner .banner-float-icon:nth-child(4) { bottom: 11%; right: 11%; font-size: 14px; animation-duration: 19s; animation-delay: 1s; }
.market-making-games-banner .banner-float-icon:nth-child(5) { top: 52%; left: 4%; font-size: 16px; animation-duration: 23s; animation-delay: 3s; }
.market-making-games-banner .banner-float-icon:nth-child(6) { top: 38%; right: 5%; font-size: 20px; animation-duration: 17s; animation-delay: 5s; }

.tradezero-banner .banner-float-icon { color: #26e986; text-shadow: 0 0 12px rgba(38,233,134,0.8), 0 0 24px rgba(38,233,134,0.5); filter: drop-shadow(0 0 6px rgba(38,233,134,0.6)); }
.tradezero-banner .banner-float-icon:nth-child(1) { top: 10%; left: 7%;  font-size: 18px; animation-duration: 18s; animation-delay: 0s; }
.tradezero-banner .banner-float-icon:nth-child(2) { top: 20%; right: 9%; font-size: 16px; animation-duration: 22s; animation-delay: 2s; }
.tradezero-banner .banner-float-icon:nth-child(3) { bottom: 20%; left: 11%; font-size: 14px; animation-duration: 20s; animation-delay: 4s; }
.tradezero-banner .banner-float-icon:nth-child(4) { bottom: 12%; right: 7%; font-size: 20px; animation-duration: 19s; animation-delay: 1s; }
.tradezero-banner .banner-float-icon:nth-child(5) { top: 45%; left: 4%; font-size: 12px; animation-duration: 23s; animation-delay: 3s; }

/* TradeZero: green */
.featured-pages-section .featured-banner.tradezero-banner { border-color: rgba(38,233,134,0.25); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(38,233,134,0.15); }
.featured-pages-section .featured-banner.tradezero-banner::before { background: linear-gradient(90deg, transparent, rgba(38,233,134,0.15), transparent); }
.featured-pages-section .featured-banner.tradezero-banner:hover { border-color: rgba(38,233,134,0.5); box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 30px rgba(38,233,134,0.3); }
.featured-pages-section .featured-banner.tradezero-banner .featured-banner-badge { background: linear-gradient(135deg, rgba(11,125,79,0.3), rgba(38,233,134,0.3)); border-color: rgba(38,233,134,0.4); color: #26e986; }
.featured-pages-section .featured-banner.tradezero-banner .featured-banner-title { background: linear-gradient(135deg, #0b7d4f 0%, #26e986 50%, #c1f558 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.featured-pages-section .featured-banner.tradezero-banner .featured-banner-image { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(38,233,134,0.3)); }
.featured-pages-section .featured-banner.tradezero-banner .featured-banner-feature { background: rgba(38,233,134,0.1); border-color: rgba(38,233,134,0.2); color: #a8f5cc; }
.featured-pages-section .featured-banner.tradezero-banner .featured-banner-feature::before { color: #26e986; }

/* ── Auth card ──────────────────────────────────────────────────────── */
.aic-auth-wrap { max-width: 480px; margin: 60px auto 100px; padding: 0 20px; }
.aic-auth-card { background: #fff; border: 1px solid var(--aic-grey-200); border-radius: 14px; padding: 32px 28px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.aic-auth-title { font-size: 1.6rem; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.01em; }
.aic-auth-subtitle { font-size: 0.92rem; color: var(--aic-grey-500); margin: 0 0 20px; line-height: 1.45; }
.aic-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .aic-auth-row { grid-template-columns: 1fr; } }
.aic-auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.aic-auth-field label { font-size: 0.8rem; font-weight: 600; color: var(--aic-grey-700); }
.aic-auth-field input { padding: 10px 12px; font-size: 0.95rem; border: 1px solid var(--aic-grey-300); border-radius: 8px; background: #fff; outline: none; font-family: inherit; color: var(--aic-ink); transition: border-color 0.15s, box-shadow 0.15s; }
.aic-auth-field input:focus { border-color: var(--aic-red); box-shadow: 0 0 0 3px rgba(174,31,25,0.12); }
.aic-auth-hint { font-size: 0.78rem; color: var(--aic-grey-500); }
.aic-auth-primary { display: block; width: 100%; padding: 12px 16px; background: var(--aic-red); color: #fff; border: 0; border-radius: 9999px; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.15s, transform 0.2s; }
.aic-auth-primary:hover:not(:disabled) { background: var(--aic-red-dark); transform: scale(1.02); }
.aic-auth-primary:disabled { background: var(--aic-grey-300); cursor: not-allowed; }
.aic-auth-secondary { padding: 10px 16px; background: #fff; color: var(--aic-red); border: 2px solid var(--aic-red); border-radius: 9999px; font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.aic-auth-secondary:hover { background: var(--aic-red); color: #fff; }
.aic-auth-msg { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; line-height: 1.45; }
.aic-auth-msg.error   { background: var(--aic-error-bg); color: var(--aic-error-fg); border: 1px solid var(--aic-error-bd); }
.aic-auth-msg.success { background: var(--aic-success-bg); color: var(--aic-success-fg); border: 1px solid var(--aic-success-bd); }
.aic-auth-msg.info    { background: var(--aic-info-bg);    color: var(--aic-info-fg);    border: 1px solid var(--aic-info-bd); }
.aic-auth-links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 0.85rem; }
.aic-auth-reset-panel { display: none; margin-top: 16px; }
.aic-auth-reset-panel.is-visible { display: block; }

/* ── Footer (light, like the real Shopify site) ─────────────────────── */
.aic-footer { background: #fff; color: var(--aic-ink); border-top: 1px solid var(--aic-grey-200); padding: 48px 24px 32px; margin-top: 60px; }
.aic-footer-social { text-align: center; }
.aic-footer-social-heading { font-size: 1rem; font-weight: 500; color: var(--aic-ink); margin-bottom: 18px; }
.aic-footer-social-icons { display: flex; gap: 18px; justify-content: center; align-items: center; }
.aic-footer-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--aic-grey-100); color: var(--aic-ink); transition: background 0.18s, color 0.18s, transform 0.18s; }
.aic-footer-social-icons a:hover { background: var(--aic-red); color: #fff; transform: translateY(-2px); text-decoration: none; }
.aic-footer-social-icons svg { width: 18px; height: 18px; }
.aic-footer-bottom { max-width: var(--aic-page-width); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--aic-grey-200); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.aic-footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 0.82rem; }
.aic-footer-links a { color: var(--aic-grey-700); }
.aic-footer-links a:hover { color: var(--aic-red); text-decoration: underline; }
.aic-footer-copy { color: var(--aic-grey-500); font-size: 0.78rem; }

/* ── Event filters (flat pill row, mirrors page.event-calendar.liquid) */
.aic-filter-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; padding: 4px 0; margin-bottom: 12px; }
.aic-chip {
  font-size: 0.9rem; background: none; color: var(--aic-ink);
  padding: 0.5rem 1.2rem; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 1.5px solid #e0e0e0; cursor: pointer; font-weight: 600;
  font-family: inherit;
  transition: background-color 0.2s, transform 0.2s, border 0.2s, color 0.2s;
}
.aic-chip:hover { background: #fff !important; transform: scale(1.05); border: 1.5px solid #bbb; }
.aic-chip.is-active { background: var(--aic-red); color: #fff; border: 1.5px solid var(--aic-red); }
.aic-chip.is-active:hover { background: #9a1a15 !important; border: 1.5px solid #9a1a15 !important; }

/* ── Vacancy filter (dropdown panel pattern) ────────────────────────── */
.rv-filter-bar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.rv-filter-toggle {
  font-size: 0.9rem; background: #fff; color: var(--aic-ink);
  padding: 0.5rem 1.2rem; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid #e0e0e0; cursor: pointer; font-weight: 600; font-family: inherit;
  transition: background 0.2s, border 0.2s, color 0.2s;
}
.rv-filter-toggle:hover { background: #f5f5f5; border-color: #bbb; }
.rv-filter-toggle.is-active { border-color: var(--aic-red); color: var(--aic-red); }
.rv-filter-count { background: var(--aic-red); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 9999px; }
.rv-filter-dropdown {
  display: none; width: 100%; max-width: 900px; margin-top: 12px;
  background: #fff; border: 2px solid #e0e0e0; border-radius: 16px;
  padding: 20px 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  animation: rvDropIn 0.2s ease;
}
.rv-filter-dropdown.is-open { display: block; }
@keyframes rvDropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.rv-filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 12px; }
@media (max-width: 900px) { .rv-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .rv-filter-grid { grid-template-columns: 1fr; } }
.rv-filter-input, .rv-filter-select { width: 100%; padding: 9px 10px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 0.9rem; background: #fff; font-family: inherit; }
.rv-filter-input:focus, .rv-filter-select:focus { outline: none; border-color: var(--aic-red); }
.rv-filter-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.rv-clear-btn { padding: 8px 20px; background: #f5f5f5; border: 1.5px solid #e0e0e0; border-radius: 8px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.rv-clear-btn:hover { background: var(--aic-red); color: #fff; border-color: var(--aic-red); }

/* ── Event card (mirrors .event-card from event-calendar) ───────────── */
.aic-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 24px; }
.aic-event-card {
  background: #fff; border: 1px solid #ddd; border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative; z-index: 0;
}
.aic-event-card:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  z-index: 2; text-decoration: none;
}
.aic-event-card-img { aspect-ratio: 16 / 9; background: var(--aic-grey-100); object-fit: cover; width: 100%; display: block; }
.aic-event-card-img-empty { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #fff5f4, #f3f4f6); display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.85rem; }
.aic-event-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.aic-event-card-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.aic-event-pill { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.aic-event-pill--cv        { background: #f3e8ff; color: #6b21a8; }
.aic-event-pill--selection { background: #cffafe; color: #155e75; }
.aic-event-pill--exclusive { background: #fef3c7; color: #92400e; }
.aic-event-pill--draft     { background: #1a1a1a; color: #fff; }
.aic-event-card-title { font-weight: 600; font-size: 1.05rem; color: var(--aic-ink); line-height: 1.3; margin: 0; }
.aic-event-card-meta  { font-size: 0.85rem; color: var(--aic-grey-500); display: flex; flex-direction: column; gap: 3px; }
.aic-event-card-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; align-self: flex-start; }
.aic-event-status-ongoing     { background: #fef3c7; color: #92400e; }
.aic-event-status-deadline    { background: #fee2e2; color: #991b1b; }
.aic-event-status-cap-reached { background: #fee2e2; color: #991b1b; }
.aic-event-status-cap-close   { background: #fef3c7; color: #92400e; }
.aic-event-empty   { padding: 60px 0; text-align: center; color: #9ca3af; font-size: 0.95rem; }
.aic-event-loading { padding: 60px 0; text-align: center; color: #9ca3af; }

/* ── Vacancy card (mirrors .rv-card) ────────────────────────────────── */
.aic-vac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 24px; }
.aic-vac-card {
  background: #fff; border: 2px solid var(--aic-red); border-radius: 24px;
  padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.aic-vac-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(174,31,25,0.15), 0 4px 8px rgba(0,0,0,0.1);
  text-decoration: none;
}
.aic-vac-card-row { display: flex; align-items: center; gap: 12px; }
.aic-vac-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 12px; padding: 6px; transition: transform 0.4s, filter 0.4s, border-color 0.4s; }
.aic-vac-card:hover .aic-vac-logo { filter: drop-shadow(0 4px 12px rgba(174,31,25,0.2)); transform: scale(1.05); border-color: var(--aic-red); }
.aic-vac-logo-empty { width: 56px; height: 56px; background: var(--aic-grey-100); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.7rem; }
.aic-vac-company { font-size: 0.85rem; color: var(--aic-grey-500); font-weight: 600; }
.aic-vac-title   { font-size: 1.1rem; font-weight: 700; color: var(--aic-ink); line-height: 1.3; margin: 0; letter-spacing: -0.005em; }
.aic-vac-meta    { display: flex; gap: 8px; flex-wrap: wrap; }
.aic-vac-pill {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: #fff; color: var(--aic-grey-700); border: 1.5px solid #e0e0e0;
  transition: background 0.3s, border 0.3s, color 0.3s;
}
.aic-vac-card:hover .aic-vac-pill { background: #fff5f5; border-color: var(--aic-red); color: var(--aic-red); }

/* ── ABOUT-US page (port of page.about-us.liquid) ───────────────────── */
.publications-page { position: relative; overflow-x: hidden; }

.section-banner {
  position: relative; width: 100%; height: 85vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: opacity, transform;
}
.section-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.4,0,0.2,1); }
.section-banner:hover img { transform: scale(1.03); }

/* These rules are SCOPED to .section-banner only — `.section-text` and `.section-title` are also used as generic content-section classes on many other pages, so leaking absolute-positioning to them broke every long-form page. */
.section-banner .section-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: center; }
/* Anchor-link offset so deep-linked sections don't end up flush under the sticky nav. */
:where(.aic-section, .mm-section, .prometheus-section, .collaboration-section, .portfolio-section)[id] {
  scroll-margin-top: 80px;
}

.section-banner .section-title {
  font-size: clamp(32px, 5vw, 48px); font-weight: 300; margin: 0;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 20px rgba(255,255,255,0.3), 0 2px 10px rgba(0,0,0,0.3), 0 0 40px rgba(255,255,255,0.2);
  letter-spacing: 0.05em;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
  transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
}
.section-banner:hover .section-title {
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.4), 0 2px 15px rgba(0,0,0,0.4), 0 0 50px rgba(255,255,255,0.3);
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

.section-logos { position: absolute; bottom: 40px; left: 0; right: 0; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 0 20px; box-sizing: border-box; }
.section-logo { width: 100px; max-width: 100px; height: auto; object-fit: contain; opacity: 0.85; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); transition: all 0.4s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; }
.section-banner:hover .section-logo { opacity: 1; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4)); }
.section-banner:hover .section-logo.bybit-banner-logo { filter: brightness(0) invert(1) drop-shadow(0 6px 20px rgba(0,0,0,0.4)); }
.section-logo:nth-child(4) { width: 70px; max-width: 70px; }
.bybit-banner-logo { filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }

.section-articles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 60px 40px;
}
.section-article {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  cursor: pointer; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
}
.section-article:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1; text-decoration: none; }
/* Background image: only the direct-child <img> gets the grayscale dim;
   logos inside section-article-logos-container or with .section-article-logo
   class keep their own filter rules below. */
.section-article > img:not(.section-article-logo) {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  filter: grayscale(80%) brightness(0.7);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), filter 0.6s cubic-bezier(0.4,0,0.2,1);
}
.section-article > img.events-image            { object-position: center 40%; }
.section-article > img.investment-events-image { object-position: center 70%; }
.section-article > img.team-image              { object-position: center 40%; }
.section-article:hover > img:not(.section-article-logo) { transform: scale(1.05); filter: grayscale(0%) brightness(0.9); }

/* Two-stop scrim: light at top, dark at bottom so the title strip has guaranteed contrast */
.section-article::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
                rgba(0,0,0,0.10) 0%,
                rgba(0,0,0,0.10) 45%,
                rgba(0,0,0,0.65) 85%,
                rgba(0,0,0,0.85) 100%);
  transition: background 0.4s ease;
}
.section-article:hover::before {
  background: linear-gradient(180deg,
                rgba(0,0,0,0.15) 0%,
                rgba(0,0,0,0.15) 35%,
                rgba(0,0,0,0.7) 80%,
                rgba(0,0,0,0.9) 100%);
}

/* Title pinned to the bottom of the card (no longer overlapping image content) */
.section-article-text {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 3; text-align: center;
  color: #fff; font-size: clamp(18px, 2.6vw, 26px); font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  letter-spacing: -0.005em; line-height: 1.25;
  padding: 22px 24px 24px;
  pointer-events: none;
}

/* All overlay logos forced white, dropped above the bottom title strip */
.section-article-logo {
  position: absolute; z-index: 3;
  top: 38%; left: 50%; transform: translate(-50%, -50%);
  width: auto; max-width: 55%; max-height: 80px; object-fit: contain;
  opacity: 0.95;
  filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(0,0,0,0.45));
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.section-article:hover .section-article-logo { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }

.section-article-logos-container {
  position: absolute; z-index: 3;
  top: 38%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: 26px;
  opacity: 0.95; transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.section-article-logos-container img {
  width: auto; height: auto; max-width: 130px; max-height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(0,0,0,0.45));
}
.section-article:hover .section-article-logos-container { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }

@media (max-width: 768px) {
  .section-banner { height: 75vh; }
  .section-articles { grid-template-columns: 1fr; gap: 20px; padding: 40px 20px; }
  .section-article-text { font-size: clamp(18px, 4.5vw, 24px); padding: 0 16px; }
}

/* Gallery section */
.image-gallery-section { width: 100%; padding: 80px 40px; background: #f8f8f8; }
.gallery-title { font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: #1a1a1a; text-align: center; margin-bottom: 60px; letter-spacing: -0.01em; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; max-width: 1400px; margin: 0 auto; }
.gallery-item {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: block; text-decoration: none;
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.gallery-item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.2); z-index: 1; text-decoration: none; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4), transparent); color: #fff; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.gallery-item:hover .gallery-item-overlay { opacity: 1; }

@media (max-width: 968px) { .image-gallery-section { padding: 60px 24px; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } }
@media (max-width: 640px) { .image-gallery-section { padding: 40px 20px; } .gallery-title { font-size: 28px; margin-bottom: 40px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Legacy plain toolbar (some pages still use this) — kept for compatibility */
.aic-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding: 12px; background: #fff; border: 1px solid var(--aic-grey-200); border-radius: 10px; }
.aic-toolbar input, .aic-toolbar select { padding: 9px 12px; font-size: 0.9rem; border: 1px solid var(--aic-grey-300); border-radius: 8px; background: #fff; font-family: inherit; color: var(--aic-ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.aic-toolbar input:focus, .aic-toolbar select:focus { border-color: var(--aic-red); box-shadow: 0 0 0 3px rgba(174,31,25,0.12); }
.aic-toolbar input { flex: 1; min-width: 200px; }