/* ==========================================================
   ONE ARCYS — DEVELOPERS (Unified BG + Improved Styles)
   Fix: background split between .oaDev and .oaTrack
========================================================== */

/* ---------- Unified canvas for the entire section ---------- */
#developers{
  position: relative;
  background: transparent;
  overflow: hidden;              /* keep glow inside the section */
  isolation: isolate;            /* keeps pseudo layers contained */
  padding: 0;                    /* we control spacing per block */
}

/* BIG unified background */
#developers::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index: 0;
  pointer-events:none;
  background:
    radial-gradient(1200px 720px at 16% 14%, rgba(43,196,227,.14), transparent 60%),
    radial-gradient(980px 680px at 84% 22%, rgba(255,45,85,.10), transparent 64%),
    radial-gradient(980px 740px at 50% 92%, rgba(43,196,227,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%, rgba(255,255,255,.02));
  filter: saturate(1.05);
  opacity: .98;
}

/* Subtle sheen + vignette (no hard seam) */
#developers::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index: 0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(43,196,227,.08), transparent),
    radial-gradient(1200px 800px at 50% 40%, transparent 55%, rgba(0,0,0,.32) 92%);
  mask-image: radial-gradient(circle at 48% 28%, #000 0 58%, transparent 74%);
  opacity: .55;
}

/* Make sure content stays above background */
#developers > *{
  position: relative;
  z-index: 1;
}

/* ---------- IMPORTANT: disable per-block backgrounds ---------- */
.oaDev::before,
.oaDev::after,
.oaTrack::before,
.oaTrack::after{
  content: none !important;
}

/* ---------- Shared container sizing ---------- */
.oaDev__inner,
.oaTrack__inner{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ---------- Section spacing + soft separator ---------- */
.oaDev{
  position: relative;
  padding: 86px 0 56px;
}

.oaTrack{
  position: relative;
  padding: 56px 0 92px;
}

/* Soft separator between both blocks (no harsh line) */
.oaTrack{
  margin-top: 10px;
}
.oaTrack::before{
  /* (we disabled ::before above) so do separator using an inner shadow element approach */
}
.oaTrack__inner{
  position: relative;
}
.oaTrack__inner::before{
  content:"";
  position:absolute;
  top: -26px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  opacity: .55;
}
.oaTrack__inner::after{
  content:"";
  position:absolute;
  top: -60px;
  left: 50%;
  width: min(980px, 92vw);
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(43,196,227,.10), transparent 70%);
  opacity: .55;
  pointer-events:none;
}

/* ==========================================================
   Buttons (shared)
========================================================== */
.oaBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 650;
  font-size: 13.5px;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.oaBtn--primary{
  color: rgba(10,13,18,.96);
  background: linear-gradient(135deg, rgba(43,196,227,.98), rgba(43,196,227,.70));
  border: 1px solid rgba(43,196,227,.55);
  box-shadow:
    0 18px 54px rgba(43,196,227,.16),
    0 12px 36px rgba(0,0,0,.38);
}

.oaBtn--ghost{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.30);
}

.oaBtn:hover{ transform: translateY(-1px); }
.oaBtn--primary:hover{
  box-shadow:
    0 22px 74px rgba(43,196,227,.22),
    0 16px 44px rgba(0,0,0,.44);
}
.oaBtn--ghost:hover{
  border-color: rgba(43,196,227,.28);
  box-shadow: 0 20px 64px rgba(0,0,0,.38);
}

/* ==========================================================
   DEV BLOCK (oaDev)
========================================================== */
.oaDev__head{
  text-align: left;
  max-width: 860px;
  margin: 0 0 28px;
}

.oaDev__kicker{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.oaDev__pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .22px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
.oaDev__pill--ghost{
  background: rgba(10,13,18,.38);
  border: 1px solid rgba(43,196,227,.18);
}

.oaDev__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 12px 38px rgba(0,0,0,.45);
}

.oaDev__sub{
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.74);
  max-width: 72ch;
}

.oaDev__ctas{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.oaDev__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items:start;
}

.oaDev__cards{
  display:grid;
  gap: 12px;
}

/* Cards */
.oaDevCard{
  display:flex;
  gap: 12px;
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 74px rgba(0,0,0,.44);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .22s ease, box-shadow .22s ease;
}
.oaDevCard:hover{
  transform: translateY(-2px);
  border-color: rgba(43,196,227,.22);
  box-shadow: 0 30px 94px rgba(0,0,0,.52);
}

.oaDevCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 28% 22%, rgba(43,196,227,.18), transparent 55%),
    radial-gradient(circle at 75% 58%, rgba(255,45,85,.12), transparent 60%);
  opacity:.55;
}
.oaDevCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

.oaDevCard__icon{
  position:relative;
  z-index:2;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: rgba(10,13,18,.95);
  background: linear-gradient(135deg, rgba(43,196,227,.92), rgba(43,196,227,.58));
  border: 1px solid rgba(43,196,227,.45);
  box-shadow: 0 18px 46px rgba(43,196,227,.14);
  flex: 0 0 44px;
}

.oaDevCard__body{
  position:relative;
  z-index:2;
  min-width: 0;
}

.oaDevCard__title{
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
}

.oaDevCard__text{
  margin: 0 0 10px;
  font-size: 13.7px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}

.oaDevCard__list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 6px;
}

.oaDevCard__list li{
  display:flex;
  gap: 9px;
  align-items:flex-start;
  color: rgba(255,255,255,.78);
  font-size: 12.8px;
}

.oaDevCard__list i{
  margin-top: 2px;
  color: rgba(43,196,227,.95);
}

/* Right side sticky */
.oaDev__side{
  position: sticky;
  top: 92px;
}

/* Stats panel */
.oaDevStats{
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 98px rgba(0,0,0,.52);
  overflow:hidden;
}

.oaDevStats__top{
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}

.oaDevStats__title{
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 850;
  color: rgba(255,255,255,.92);
}

.oaDevStats__sub{
  margin: 0;
  font-size: 13.4px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}

.oaDevStats__grid{
  padding: 14px 16px 8px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.oaStat{
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(10,13,18,.33);
  border: 1px solid rgba(255,255,255,.08);
}

.oaStat__num{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.94);
}

.oaStat__label{
  margin-top: 4px;
  font-size: 12.2px;
  color: rgba(255,255,255,.66);
}

/* Code block */
.oaDevCode{
  margin: 10px 16px 14px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(43,196,227,.16);
  background: rgba(10,13,18,.55);
  box-shadow: 0 22px 80px rgba(0,0,0,.48);
}

.oaDevCode__bar{
  display:flex;
  align-items:center;
  gap: 7px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.oaDevCode__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}

.oaDevCode__label{
  margin-left: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

.oaDevCode__pre{
  margin:0;
  padding: 12px 12px 14px;
  font-size: 12.2px;
  line-height: 1.55;
  color: rgba(230,245,255,.86);
  overflow:auto;
  max-height: 230px;
}

/* Mini tags */
.oaDev__mini{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  padding: 0 16px 16px;
}
.oaDev__miniItem{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}
.oaDev__miniItem i{
  color: rgba(43,196,227,.95);
}

/* ==========================================================
   TRACK BLOCK (oaTrack) — keeps your original structure
========================================================== */

.oaTrack__head{
  max-width: 900px;
  margin: 0 0 26px;
}

.oaTrack__kicker{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.oaTrack__pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .22px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
.oaTrack__pill--ghost{
  background: rgba(10,13,18,.38);
  border: 1px solid rgba(43,196,227,.18);
}

.oaTrack__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.3vw, 42px);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 12px 38px rgba(0,0,0,.45);
}

.oaTrack__sub{
  margin: 0;
  font-size: 15.4px;
  line-height: 1.65;
  color: rgba(255,255,255,.74);
  max-width: 72ch;
}

.oaTrack__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items:start;
}

.oaTrack__stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* Tracking cards */
.oaTCard{
  position:relative;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 84px rgba(0,0,0,.44);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .22s ease, box-shadow .22s ease;
}
.oaTCard:hover{
  transform: translateY(-2px);
  border-color: rgba(43,196,227,.22);
  box-shadow: 0 32px 104px rgba(0,0,0,.54);
}

.oaTCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 18%, rgba(43,196,227,.18), transparent 55%),
    radial-gradient(circle at 78% 60%, rgba(255,45,85,.12), transparent 60%);
  opacity:.55;
}
.oaTCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

.oaTCard__top{
  position:relative;
  z-index:2;
  padding: 14px 14px 10px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.oaTCard__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: rgba(10,13,18,.95);
  background: linear-gradient(135deg, rgba(43,196,227,.92), rgba(43,196,227,.58));
  border: 1px solid rgba(43,196,227,.45);
  box-shadow: 0 18px 46px rgba(43,196,227,.14);
  flex: 0 0 44px;
}

.oaTCard__meta{ min-width:0; }

.oaTCard__label{
  font-size: 12.4px;
  color: rgba(255,255,255,.70);
}

.oaTCard__value{
  margin-top: 6px;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.94);
}

.oaTCard__trend{
  margin-left:auto;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,13,18,.34);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  white-space:nowrap;
}
.oaTrend--up i{ color: rgba(43,196,227,.95); }
.oaTrend--flat i{ color: rgba(255,255,255,.55); }

.oaTCard__spark{
  position:relative;
  z-index:2;
  height: 42px;
  margin: 0 14px 10px;
  border-radius: 14px;
  background: rgba(10,13,18,.30);
  border: 1px solid rgba(255,255,255,.07);
  overflow:hidden;
}

.oaTCard__spark canvas{
  width:100%;
  height:100%;
  display:block;
  opacity:.95;
}

.oaTCard__foot{
  position:relative;
  z-index:2;
  padding: 0 14px 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

/* Shared tags */
.oaTag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}
.oaTag i{
  color: rgba(43,196,227,.95);
  font-size: 11px;
}
.oaTag--ghost{
  background: rgba(10,13,18,.28);
  border-color: rgba(43,196,227,.14);
  color: rgba(255,255,255,.72);
}

/* Right panel sticky */
.oaTrack__side{
  position: sticky;
  top: 92px;
}

.oaPanel{
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 98px rgba(0,0,0,.52);
  overflow:hidden;
}

.oaPanel__head{
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:flex-start;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}

.oaPanel__title{
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.oaPanel__sub{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.oaPanel__badge{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(10,13,18,.30);
  border: 1px solid rgba(43,196,227,.14);
}

.oaPipe{
  padding: 14px 16px 4px;
  display:grid;
  gap: 10px;
}
.oaPipe__step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(10,13,18,.28);
  border: 1px solid rgba(255,255,255,.07);
}
.oaPipe__dot{
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgba(43,196,227,.95);
  box-shadow: 0 0 0 4px rgba(43,196,227,.14);
}
.oaPipe__t{
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.90);
}
.oaPipe__d{
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(255,255,255,.68);
}

/* Code block */
.oaPanel__code{
  margin: 10px 16px 14px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(43,196,227,.16);
  background: rgba(10,13,18,.55);
  box-shadow: 0 22px 80px rgba(0,0,0,.48);
}
.oaCodeBar{
  display:flex;
  align-items:center;
  gap: 7px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.oaDot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.oaCodeBar__label{
  margin-left: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.oaCode{
  margin:0;
  padding: 12px 12px 14px;
  font-size: 12.2px;
  line-height: 1.55;
  color: rgba(230,245,255,.86);
  overflow:auto;
  max-height: 220px;
}

.oaPanel__mini{
  padding: 0 16px 16px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.oaMini{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}
.oaMini i{ color: rgba(43,196,227,.95); }

/* ==========================================================
   Reveal animations (finite) — keeps your existing JS
========================================================== */
.oa-reveal,
.oa-reveal2{
  opacity: 0;
  transform: translateY(10px) scale(.99);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.oa-reveal.is-in,
.oa-reveal2.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==========================================================
   Responsive
========================================================== */
@media (max-width: 980px){
  .oaDev__grid{ grid-template-columns: 1fr; }
  .oaTrack__grid{ grid-template-columns: 1fr; }
  .oaTrack__stats{ grid-template-columns: 1fr; }
  .oaDev__side,
  .oaTrack__side{
    position: relative;
    top: 0;
  }
}

@media (max-width: 520px){
  .oaDev{ padding: 76px 0 44px; }
  .oaTrack{ padding: 44px 0 82px; }
  .oaDevStats__grid{ grid-template-columns: 1fr; }
  .oaDevCard{ padding: 14px; }
}

/* ===========================
   ONE ARCYS — INTEGRATIONS
   (Tron/Apple clean, glass)
=========================== */

.oaIntegrations{
  position: relative;
  padding: 72px 0;
  overflow: hidden;
  color: rgba(255,255,255,.92);
}

.oaIntegrations__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 18px;
  position: relative;
  z-index: 2;
}

.oaIntegrations__bg{
  position:absolute;
  inset: 0;
  z-index: 1;
  pointer-events:none;
  background:
    radial-gradient(1200px 620px at 18% 20%, rgba(43,196,227,.10), transparent 62%),
    radial-gradient(1000px 520px at 82% 18%, rgba(255,45,85,.08), transparent 60%),
    radial-gradient(900px 520px at 50% 92%, rgba(43,196,227,.08), transparent 60%);
  filter: saturate(1.05);
}

.oaIntegrations__head{
  text-align: left;
  max-width: 980px;
}

.oaIntegrations__kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.oaChip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(43,196,227,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  letter-spacing: .2px;
}

.oaDot{
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(43,196,227,.85);
  box-shadow: 0 0 0 6px rgba(43,196,227,.10);
}

.oaMini{ opacity:.72; font-weight: 600; }

.oaIntegrations__title{
  font-size: clamp(1.55rem, 2.3vw, 2.35rem);
  line-height: 1.15;
  margin: 10px 0 10px;
  letter-spacing: -0.3px;
}

.oaIntegrations__sub{
  opacity:.78;
  margin: 0 0 18px;
  max-width: 860px;
  line-height: 1.55;
}

.oaIntegrations__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 16px;
}

.oaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
  cursor:pointer;
  white-space: nowrap;
}

.oaBtn--wide{ width: 100%; }

.oaBtn--primary{
  color: #061018;
  background: linear-gradient(135deg, rgba(43,196,227,1), rgba(43,196,227,.70));
  border-color: rgba(43,196,227,.35);
  box-shadow:
    0 18px 40px rgba(43,196,227,.16),
    0 18px 40px rgba(0,0,0,.35);
}

.oaBtn--ghost{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.oaBtn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 48px rgba(0,0,0,.38),
    0 18px 44px rgba(43,196,227,.10);
}

.oaBtn--ghost:hover{ border-color: rgba(43,196,227,.30); }

.oaIntegrations__trust{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  opacity: .92;
}

.oaTrustItem{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.oaIntegrations__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.oaIntCard{
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease;
}

.oaIntCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(43,196,227,.18), transparent 55%),
    radial-gradient(circle at 70% 55%, rgba(255,45,85,.12), transparent 58%),
    radial-gradient(circle at 45% 90%, rgba(43,196,227,.10), transparent 60%);
  opacity: .55;
  filter: blur(10px);
  transform: translate3d(0,0,0);
  transition: opacity .25s ease;
  pointer-events:none;
}

.oaIntCard:hover{
  transform: translateY(-2px);
  border-color: rgba(43,196,227,.28);
}

.oaIntCard:hover::before{ opacity: .80; }

.oaIntCard__top{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.oaIntIcon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,13,18,.55);
  border: 1px solid rgba(43,196,227,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
}

.oaIntIcon i{ color: rgba(43,196,227,.92); }

.oaIntTitle{
  font-weight: 900;
  letter-spacing: .2px;
  margin-top: 1px;
}

.oaIntDesc{
  opacity: .74;
  margin-top: 4px;
  line-height: 1.45;
}

.oaIntPills{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 12px;
}

.oaPill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.oaIntList{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 8px;
  opacity: .90;
}

.oaIntList li{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(10,13,18,.35);
  border: 1px solid rgba(255,255,255,.08);
}

.oaIntList i{ color: rgba(43,196,227,.9); }

.oaIntCallout{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(43,196,227,.16);
  margin: 12px 0 12px;
}

.oaIntCallout__badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(43,196,227,.10);
  border: 1px solid rgba(43,196,227,.22);
}

.oaIntCallout__text{
  opacity: .82;
  line-height: 1.45;
}

.oaIntForm{
  display:grid;
  gap: 10px;
  margin-top: 8px;
}

.oaLabel{
  font-weight: 800;
  font-size: .92rem;
  opacity: .92;
  display:grid;
  gap: 6px;
}

.oaInput{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(10,13,18,.48);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.oaInput::placeholder{ color: rgba(255,255,255,.40); }
.oaInput:focus{
  border-color: rgba(43,196,227,.35);
  box-shadow: 0 0 0 6px rgba(43,196,227,.10);
}

.oaIntHint{
  margin-top: 2px;
  opacity: .72;
  display:flex;
  gap: 8px;
  align-items:flex-start;
  line-height: 1.45;
}

.oaIntegrations__foot{
  margin-top: 14px;
}

.oaFootCard{
  border-radius: 18px;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.oaFootTitle{
  font-weight: 900;
  letter-spacing: .2px;
}

.oaFootSub{
  opacity: .75;
  margin-top: 4px;
  line-height: 1.45;
}

.oaFootCard__right{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .oaIntegrations__grid{ grid-template-columns: 1fr; }
  .oaFootCard{ flex-direction: column; align-items: stretch; }
  .oaFootCard__right{ justify-content: flex-start; }
}