/* ============================================================
   VIJIN.AI — Individuals · 3 bespoke section rebuilds (SCOPED)
   Replaces the distorted decorative-geometry layouts with calm,
   aligned, product-grade compositions. Prefix: ivx-
   Theme-aware (dark + light) · RTL-first. Background untouched.
   ============================================================ */
/* fill html behind the body so the scrollbar gutter & any area below the
   document never reveal the browser's black — matches the theme base */
html{background:var(--bg-0)}
.ivx-sec{
  --ivx-card:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.006) 50%,rgba(255,255,255,.018));
  --ivx-cardbg:transparent;
  --ivx-inner:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  --ivx-innerbg:transparent;
  --ivx-border:rgba(157,123,255,.2);
  --ivx-border-2:rgba(157,123,255,.13);
  --ivx-shadow:0 26px 58px -32px rgba(0,0,0,.9);
  --ivx-track:rgba(157,123,255,.14);
}
[data-theme="light"] .ivx-sec{
  --ivx-card:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08));
  --ivx-cardbg:transparent;
  --ivx-inner:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  --ivx-innerbg:transparent;
  --ivx-border:rgba(123,108,240,.18);
  --ivx-border-2:rgba(123,108,240,.12);
  --ivx-shadow:0 24px 46px -32px rgba(20,16,40,.5);
  --ivx-track:rgba(90,71,200,.12);
}
.ivx-card{background:var(--ivx-card),var(--ivx-cardbg);border:1px solid var(--ivx-border);
  border-radius:22px;-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
  box-shadow:var(--ivx-shadow),inset 0 1px 0 rgba(255,255,255,.06)}
.ivx-tnum{font-feature-settings:'tnum';font-variant-numeric:tabular-nums}

/* ============================================================
   SECTION 1 · «واجهة احترافية تعرض قيمتك» — media-kit + checklist
   ============================================================ */
.ivx-profile{display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:stretch;margin-top:38px}

/* --- the media-kit mockup card --- */
.ivx-kit{position:relative;padding:24px 24px 20px;overflow:hidden}
.ivx-kit::before{content:"";position:absolute;inset-inline:0;top:0;height:120px;pointer-events:none;
  background:radial-gradient(120% 100% at 70% 0,color-mix(in oklab,var(--violet) 30%,transparent),transparent 70%);opacity:.55}
.ivx-kit-bar{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:20px}
.ivx-kit-dots{display:flex;gap:6px}
.ivx-kit-dots i{width:9px;height:9px;border-radius:50%;background:var(--ivx-track)}
.ivx-kit-tag{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  color:var(--violet-2);background:color-mix(in oklab,var(--violet) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--violet) 26%,transparent);padding:5px 11px;border-radius:30px}
.ivx-kit-head{position:relative;display:flex;align-items:center;gap:15px;margin-bottom:18px}
.ivx-kit-av{position:relative;flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 36% 28%,#9b6bff,#6b46e0 70%,#4d2fb0);box-shadow:0 14px 30px -12px rgba(107,70,224,.7)}
.ivx-kit-av svg{width:34px;height:34px}
.ivx-kit-vf{position:absolute;bottom:-2px;inset-inline-start:-2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:#2f8bff;border:3px solid var(--bg-3)}
.ivx-kit-vf svg{width:13px;height:13px}
.ivx-kit-id b{display:block;font-size:19px;font-weight:800;color:var(--head);line-height:1.2}
.ivx-kit-id span{font-size:13px;color:var(--t3)}
.ivx-kit-niche{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.ivx-kit-niche span{font-size:11.5px;font-weight:600;color:var(--t2);padding:5px 11px;border-radius:30px;
  background:color-mix(in oklab,var(--cyan) 10%,transparent);border:1px solid color-mix(in oklab,var(--cyan) 22%,transparent)}

.ivx-kit-metrics{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.ivx-kit-metric{padding:13px 14px;border-radius:15px;background:var(--ivx-inner),var(--ivx-innerbg);border:1px solid var(--ivx-border-2)}
.ivx-kit-metric b{display:block;font-size:21px;font-weight:800;color:var(--head);line-height:1}
.ivx-kit-metric span{display:block;font-size:11px;color:var(--t3);margin-top:5px}
.ivx-kit-metric em{font-style:normal;font-size:11px;font-weight:700;color:var(--pos)}

.ivx-kit-chart{position:relative;padding:14px 14px 8px;border-radius:15px;margin-bottom:16px;
  background:var(--ivx-inner),var(--ivx-innerbg);border:1px solid var(--ivx-border-2)}
.ivx-kit-chart-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ivx-kit-chart-h b{font-size:13px;font-weight:700;color:var(--head)}
.ivx-kit-chart-h span{font-size:12px;font-weight:700;color:var(--cyan)}
.ivx-area{display:block;width:100%;height:62px}

.ivx-kit-plats{position:relative;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.ivx-kit-plat{display:flex;align-items:center;gap:11px}
.ivx-kit-plat-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--p)}
.ivx-kit-plat-ic svg{width:16px;height:16px}
.ivx-kit-plat-nm{font-size:12.5px;font-weight:600;color:var(--t2);min-width:74px}
.ivx-kit-plat-track{flex:1;height:7px;border-radius:30px;background:var(--ivx-track);overflow:hidden}
.ivx-kit-plat-fill{display:block;height:100%;border-radius:30px;background:linear-gradient(90deg,var(--p),color-mix(in oklab,var(--p) 55%,#fff))}
.ivx-kit-plat-n{font-size:12.5px;font-weight:800;color:var(--head);min-width:42px;text-align:start}

.ivx-kit-foot{position:relative;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--ivx-border-2)}
.ivx-kit-foot svg{color:var(--violet-2)}
.ivx-kit-foot b{font-size:13px;font-weight:700;color:var(--head)}
.ivx-kit-foot span{font-size:11.5px;color:var(--t3)}
.ivx-kit-share{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#fff;
  padding:9px 16px;border-radius:30px;background:linear-gradient(120deg,#7b6cf0,#9d7bff 50%,#17d1c6);
  box-shadow:0 12px 26px -12px rgba(123,108,240,.7)}
.ivx-kit-share svg{width:14px;height:14px}

/* --- the "what it includes" checklist --- */
.ivx-incl-wrap{display:flex;flex-direction:column;justify-content:center;gap:18px}
.ivx-incl-lead{font-size:14px;font-weight:600;color:var(--t2);line-height:1.7;max-width:380px}
.ivx-incl-lead b{color:var(--head);font-weight:800}
.ivx-incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ivx-incl li{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:14px;
  background:var(--ivx-inner),var(--ivx-innerbg);border:1px solid var(--ivx-border-2);transition:border-color .22s,transform .22s}
.ivx-incl li:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--c) 46%,transparent)}
.ivx-incl-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 0 22px -4px color-mix(in oklab,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-incl-ic svg{width:18px;height:18px}
.ivx-incl li b{font-size:13.5px;font-weight:700;color:var(--head);line-height:1.35}

/* ============================================================
   SECTION 2 · «تقارير تثبت نموك» — report gallery with mini-viz
   ============================================================ */
.ivx-reports{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.ivx-rep{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.ivx-rep:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c) 48%,transparent);
  box-shadow:0 34px 64px -30px color-mix(in oklab,var(--c) 50%,#000),inset 0 1px 0 rgba(255,255,255,.08)}
.ivx-rep-head{display:flex;align-items:center;gap:11px;padding:17px 18px 13px}
.ivx-rep-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 0 24px -4px color-mix(in oklab,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-rep-ic svg{width:21px;height:21px}
.ivx-rep-head b{font-size:15.5px;font-weight:800;color:var(--head);line-height:1.25}
.ivx-rep-kind{margin-inline-start:auto;font-size:10.5px;font-weight:700;color:var(--c);
  background:color-mix(in oklab,var(--c) 13%,transparent);border:1px solid color-mix(in oklab,var(--c) 26%,transparent);
  padding:4px 9px;border-radius:30px;white-space:nowrap}
.ivx-rep-viz{position:relative;height:96px;margin:2px 16px 0;border-radius:14px;overflow:hidden;
  background:var(--ivx-inner),var(--ivx-innerbg);border:1px solid var(--ivx-border-2);display:grid;place-items:center}
.ivx-rep-viz svg{display:block}
.ivx-rep-desc{padding:13px 18px 0;font-size:13px;line-height:1.65;color:var(--t2);flex:1;text-wrap:pretty}
.ivx-rep-foot{display:flex;align-items:center;gap:7px;padding:13px 18px 16px;margin-top:10px;
  font-size:11.5px;font-weight:700;color:var(--t3)}
.ivx-rep-foot .ivx-rep-pdf{display:inline-flex;align-items:center;gap:5px;color:var(--c)}
.ivx-rep-foot .ivx-rep-pdf svg{width:13px;height:13px}
.ivx-rep-foot .ivx-rep-sep{margin-inline:2px;opacity:.5}

/* report mini-viz primitives */
.ivx-v-donut{transform:rotate(-90deg)}
.ivx-vbars{display:flex;align-items:flex-end;gap:9px;height:64px;padding:0 4px}
.ivx-vbar{width:14px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--c),color-mix(in oklab,var(--c) 45%,transparent))}
.ivx-vbar.is-ghost{background:var(--ivx-track)}
.ivx-seg{display:flex;width:84%;height:13px;border-radius:30px;overflow:hidden;gap:2px}
.ivx-seg i{display:block;height:100%}
.ivx-seg-leg{display:flex;gap:12px;margin-top:11px;font-size:10.5px;font-weight:700;color:var(--t3)}
.ivx-seg-leg span{display:inline-flex;align-items:center;gap:5px}
.ivx-seg-leg b{width:8px;height:8px;border-radius:3px}
.ivx-doc{width:84%;display:flex;flex-direction:column;gap:7px}
.ivx-doc i{height:7px;border-radius:30px;background:var(--ivx-track)}
.ivx-doc i.is-c{background:linear-gradient(90deg,var(--c),transparent)}

/* ============================================================
   SECTION 3 · «اعرف من يتابعك» — audience analytics board
   ============================================================ */
.ivx-board{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:38px}
.ivx-col{display:flex;flex-direction:column;gap:18px}
.ivx-panel{padding:20px}
.ivx-panel-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ivx-panel-h .ivx-ph-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-panel-h .ivx-ph-ic svg{width:17px;height:17px}
.ivx-panel-h b{font-size:15px;font-weight:800;color:var(--head)}
.ivx-panel-h span{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--t3)}

/* interests donut + legend */
.ivx-interests{display:flex;align-items:center;gap:22px}
.ivx-donut-wrap{position:relative;flex:none;width:128px;height:128px;display:grid;place-items:center}
.ivx-donut-wrap svg{transform:rotate(-90deg)}
.ivx-donut-c{position:absolute;text-align:center}
.ivx-donut-c b{display:block;font-size:22px;font-weight:800;color:var(--head);line-height:1}
.ivx-donut-c span{font-size:10.5px;color:var(--t3)}
.ivx-legend{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ivx-legend li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2)}
.ivx-legend .ivx-dot{width:10px;height:10px;border-radius:4px;flex:none}
.ivx-legend .ivx-lg-nm{font-weight:600;color:var(--head);white-space:nowrap}
.ivx-legend .ivx-lg-v{margin-inline-start:auto;font-weight:800;color:var(--t2)}

/* horizontal bars (segments) */
.ivx-hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ivx-hbar-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.ivx-hbar-top b{font-weight:700;color:var(--head)}
.ivx-hbar-top span{font-weight:800;color:var(--c)}
.ivx-hbar-track{height:8px;border-radius:30px;background:var(--ivx-track);overflow:hidden}
.ivx-hbar-fill{display:block;height:100%;border-radius:30px;background:linear-gradient(90deg,var(--c),color-mix(in oklab,var(--c) 50%,#fff))}

/* best-time heat strip */
.ivx-heat{display:flex;gap:5px}
.ivx-heat-col{flex:1;display:flex;flex-direction:column;gap:4px;align-items:center}
.ivx-heat-cell{width:100%;height:13px;border-radius:4px;background:color-mix(in oklab,var(--c) calc(var(--i) * 1%),transparent);
  border:1px solid color-mix(in oklab,var(--c) 14%,transparent)}
.ivx-heat-lab{font-size:9.5px;color:var(--t3);font-weight:600}
.ivx-heat-note{margin-top:11px;font-size:11.5px;color:var(--t3)}
.ivx-heat-note b{color:var(--head);font-weight:700}

/* platform split bars (compact) */
.ivx-split{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ivx-split li{display:flex;align-items:center;gap:10px}
.ivx-split-ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--p)}
.ivx-split-ic svg{width:14px;height:14px}
.ivx-split-track{flex:1;height:7px;border-radius:30px;background:var(--ivx-track);overflow:hidden}
.ivx-split-fill{display:block;height:100%;border-radius:30px;background:linear-gradient(90deg,var(--p),color-mix(in oklab,var(--p) 55%,#fff))}
.ivx-split-v{font-size:12px;font-weight:800;color:var(--head);min-width:34px;text-align:start}

/* insight chips row (loved topics / top post / new reach) */
.ivx-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.ivx-insight{display:flex;align-items:flex-start;gap:12px;padding:16px}
.ivx-insight .ivx-insight-ic{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--c);
  box-shadow:0 8px 20px -10px var(--c),0 0 0 5px color-mix(in oklab,var(--c) 15%,transparent)}
.ivx-insight-ic::after,.ivx-insight-ic::before{display:none !important}
.ivx-insight-ic svg{width:19px;height:19px}
.ivx-insight .ivx-insight-ic{display:grid;place-items:center}
.ivx-insight .ivx-insight-ic,.ivx-insight .ivx-insight-ic svg{color:#fff}
.ivx-insight .ivx-insight-ic svg{position:relative;margin:0}
.ivx-insight b{display:block;font-size:13.5px;font-weight:800;color:var(--head);line-height:1.3}
.ivx-insight span{display:block;font-size:12px;color:var(--t3);margin-top:3px;line-height:1.5}

/* ============================================================
   SECTION 4 · sourceGov «أدوات تبدأ بها فورًا» — tool grid
   ============================================================ */
.ivx-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:36px}
.ivx-tool{display:flex;align-items:center;gap:11px;padding:14px 15px;transition:transform .22s,border-color .22s}
.ivx-tool:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--c) 46%,transparent)}
.ivx-tool-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 0 20px -4px color-mix(in oklab,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-tool-ic svg{width:19px;height:19px}
.ivx-tool b{font-size:13px;font-weight:700;color:var(--head);line-height:1.35}

/* ============================================================
   SECTION 5 · audience «مصمّمة لصنّاع المحتوى» — personas + note
   ============================================================ */
.ivx-note{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;margin-top:30px;
  background:color-mix(in oklab,var(--cyan) 9%,transparent);border:1px dashed color-mix(in oklab,var(--cyan) 36%,transparent)}
.ivx-note-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--cyan);
  background:color-mix(in oklab,var(--cyan) 14%,transparent);border:1px solid color-mix(in oklab,var(--cyan) 30%,transparent)}
.ivx-note b{display:block;font-size:15px;font-weight:800;color:var(--head)}
.ivx-note p{margin:3px 0 0;font-size:13px;color:var(--t2)}
.ivx-personas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.ivx-persona{position:relative;padding:24px 20px;text-align:center;transition:transform .25s,border-color .25s}
.ivx-persona:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c) 46%,transparent)}
.ivx-persona-num{position:absolute;top:14px;inset-inline-end:16px;font-size:12px;font-weight:800;color:var(--c);opacity:.55;font-feature-settings:'tnum'}
.ivx-persona-face{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 0 26px -6px color-mix(in oklab,var(--c) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-persona-face svg{width:26px;height:26px}
.ivx-persona h4{font-size:16px;font-weight:800;color:var(--head);margin:0 0 7px}
.ivx-persona p{font-size:13px;line-height:1.6;color:var(--t2);margin:0}

/* ============================================================
   SECTION 6 · controls «مصمّمة لمساعدتك» — principle list
   ============================================================ */
.ivx-guards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.ivx-guard{display:flex;align-items:center;gap:13px;padding:15px 17px;transition:border-color .22s,transform .22s}
.ivx-guard:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--c) 44%,transparent)}
.ivx-guard-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 50%,#5a47c8));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-guard-ic svg{width:16px;height:16px}
.ivx-guard b{font-size:13.5px;font-weight:600;color:var(--head);line-height:1.5}

/* ============================================================
   SECTION 7 · activation «كن جاهزًا للتعاون» — readiness checklist
   ============================================================ */
.ivx-steps{position:relative;display:flex;flex-direction:column;gap:14px;margin-top:36px;max-width:780px}
.ivx-step{display:flex;align-items:flex-start;gap:18px;padding:18px 20px;transition:border-color .22s}
.ivx-step:hover{border-color:color-mix(in oklab,var(--c) 44%,transparent)}
.ivx-step-n{position:relative;flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:18px;font-weight:800;color:#fff;font-feature-settings:'tnum';
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 10px 22px -10px color-mix(in oklab,var(--c) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-step-ic{flex:none;align-self:center;color:var(--c);opacity:.85}
.ivx-step-tx{flex:1}
.ivx-step-tx b{display:block;font-size:15.5px;font-weight:800;color:var(--head);margin-bottom:4px}
.ivx-step-tx p{margin:0;font-size:13px;line-height:1.6;color:var(--t2)}

/* ============================================================
   SECTION 8 · earlyWarning «لا تترك ما يُقال عنك» — signal pipeline
   ============================================================ */
.ivx-pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.ivx-pin{position:relative;padding:20px 18px;transition:transform .25s,border-color .25s}
.ivx-pin:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c) 46%,transparent)}
.ivx-pin-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.ivx-pin-ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 0 22px -4px color-mix(in oklab,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-pin-ic svg{width:21px;height:21px}
.ivx-pin-step{font-size:10.5px;font-weight:800;color:var(--c);opacity:.85;letter-spacing:.04em}
.ivx-pin h4{margin:1px 0 0;font-size:15px;font-weight:800;color:var(--head)}
.ivx-pin p{margin:0;font-size:13px;line-height:1.6;color:var(--t2)}
.ivx-pin-arrow{position:absolute;top:32px;inset-inline-start:-12px;width:24px;height:24px;display:grid;place-items:center;
  color:var(--c);z-index:2;opacity:.6}
.ivx-pin:nth-child(3n+1) .ivx-pin-arrow{display:none}
[dir="rtl"] .ivx-pin-arrow svg{transform:scaleX(-1)}

/* ============================================================
   SECTION 9 · security «خصوصية وأمان» — feature cards + trust chips
   ============================================================ */
.ivx-secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.ivx-secard{padding:22px 20px;transition:transform .25s,border-color .25s}
.ivx-secard:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--c) 46%,transparent)}
.ivx-secard-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:14px;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 0 24px -4px color-mix(in oklab,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-secard-ic svg{width:23px;height:23px}
.ivx-secard b{display:block;font-size:15.5px;font-weight:800;color:var(--head);margin-bottom:7px}
.ivx-secard p{margin:0;font-size:13px;line-height:1.65;color:var(--t2)}
.ivx-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.ivx-chip{position:relative;display:flex;align-items:center;gap:14px;padding:17px 18px;border-radius:18px;overflow:hidden;
  background:var(--ivx-inner),var(--ivx-innerbg);border:1px solid var(--ivx-border-2)}
.ivx-chip::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--pos),transparent);opacity:.6}
.ivx-chip-seal{position:relative;flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;overflow:hidden;
  background:linear-gradient(140deg,var(--pos),#17c7bd);
  box-shadow:0 0 26px -4px color-mix(in oklab,var(--pos) 60%,transparent),0 10px 22px -10px color-mix(in oklab,var(--pos) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.ivx-chip-seal::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--pos) 35%,transparent)}
.ivx-chip-seal::after{content:"";position:absolute;left:0;right:0;top:0;height:58%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05) 70%,transparent);mix-blend-mode:overlay}
.ivx-chip-seal svg{width:24px;height:24px;position:relative}
.ivx-chip-tx{flex:1;min-width:0}
.ivx-chip-tx b{display:block;font-size:15.5px;font-weight:800;color:var(--head);line-height:1.2}
.ivx-chip-ok{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--pos);margin-top:5px}
.ivx-chip-ok svg{width:13px;height:13px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .ivx-profile{grid-template-columns:1fr;gap:26px}
  .ivx-board{grid-template-columns:1fr}
  .ivx-reports{grid-template-columns:1fr 1fr}
  .ivx-tools{grid-template-columns:repeat(3,1fr)}
  .ivx-pipe{grid-template-columns:1fr 1fr}
  .ivx-secgrid{grid-template-columns:1fr 1fr}
  .ivx-trust{grid-template-columns:1fr 1fr}
  .ivx-pin-arrow{display:none !important}
}
@media(max-width:680px){
  .ivx-reports{grid-template-columns:1fr}
  .ivx-incl{grid-template-columns:1fr}
  .ivx-interests{flex-direction:column;text-align:center}
  .ivx-insights{grid-template-columns:1fr}
  .ivx-kit-metrics{grid-template-columns:1fr 1fr}
  .ivx-tools{grid-template-columns:1fr 1fr}
  .ivx-personas{grid-template-columns:1fr}
  .ivx-guards{grid-template-columns:1fr}
  .ivx-pipe{grid-template-columns:1fr}
  .ivx-secgrid{grid-template-columns:1fr}
  .ivx-trust{grid-template-columns:1fr 1fr}
}

/* ============================================================
   REFINEMENT PASS · glassier sections · glowing reflective icons
   · bigger icons · hero rework (overrides win by source order)
   ============================================================ */
/* 1 · more transparent glass */
.ivx-sec{--ivx-cardbg:transparent;--ivx-innerbg:transparent}
[data-theme="light"] .ivx-sec{--ivx-cardbg:transparent;--ivx-innerbg:transparent}
.ivx-card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* 2 · bigger icon badges */
.ivx-incl-ic{width:42px;height:42px}.ivx-incl-ic svg{width:21px;height:21px}
.ivx-rep-ic{width:48px;height:48px}.ivx-rep-ic svg{width:24px;height:24px}
.ivx-insight-ic{width:52px;height:52px}.ivx-insight-ic svg{width:23px;height:23px}
.ivx-tool-ic{width:44px;height:44px}.ivx-tool-ic svg{width:22px;height:22px}
.ivx-guard-ic{width:40px;height:40px}.ivx-guard-ic svg{width:19px;height:19px}
.ivx-pin-ic{width:50px;height:50px}.ivx-pin-ic svg{width:25px;height:25px}
.ivx-secard-ic{width:54px;height:54px}.ivx-secard-ic svg{width:27px;height:27px}
.ivx-persona-face{width:74px;height:74px}.ivx-persona-face svg{width:33px;height:33px}
.ivx-panel-h .ivx-ph-ic{width:40px;height:40px}.ivx-panel-h .ivx-ph-ic svg{width:20px;height:20px}
.ivx-step-n{width:54px;height:54px;font-size:0}.ivx-step-n svg{width:27px;height:27px}

/* 3 · glossy reflective sheen + stronger glow on every gradient icon badge */
.ivx-incl-ic,.ivx-rep-ic,.ivx-insight-ic,.ivx-tool-ic,.ivx-guard-ic,.ivx-pin-ic,.ivx-secard-ic,
.ivx-persona-face,.ivx-step-n,.ivx-panel-h .ivx-ph-ic,.ivx-hc-av,.ivx-kit-av{position:relative;overflow:hidden}
.ivx-incl-ic::after,.ivx-rep-ic::after,.ivx-insight-ic::after,.ivx-tool-ic::after,.ivx-guard-ic::after,
.ivx-pin-ic::after,.ivx-secard-ic::after,.ivx-persona-face::after,.ivx-step-n::after,
.ivx-panel-h .ivx-ph-ic::after,.ivx-hc-av::after,.ivx-kit-av::after{
  content:"";position:absolute;left:0;right:0;top:0;height:58%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 70%,transparent);mix-blend-mode:overlay}
.ivx-incl-ic::before,.ivx-rep-ic::before,.ivx-insight-ic::before,.ivx-tool-ic::before,.ivx-guard-ic::before,
.ivx-pin-ic::before,.ivx-secard-ic::before,.ivx-persona-face::before,.ivx-step-n::before{
  content:"";position:absolute;left:24%;top:10%;width:42%;height:30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%);filter:blur(2px);opacity:.7}

/* 4 · HERO rework — declutter duplicate rows, balance with a snapshot card */
.sv[data-seg="individuals"] .iv-pills{display:none !important}
.sv[data-seg="individuals"] .iv-hero-stage{display:none !important}
.sv[data-seg="individuals"] .sv-hero-in.ivx-hero-2col{grid-template-columns:1.04fr .8fr !important;gap:50px;align-items:center;min-height:auto}

.ivx-hero-card{--hc-ink:#07134f;--hc-sub:rgba(7,19,79,.62);--hc-line:rgba(7,19,79,.1);--hc-fill:rgba(7,19,79,.045);
  position:relative;align-self:center;width:100%;max-width:392px;margin-inline:auto;padding:22px 22px 19px;border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.74);border:1px solid rgba(123,108,240,.2);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 42px 92px -46px rgba(34,24,94,.45),inset 0 1px 0 rgba(255,255,255,.7)}
[data-theme="dark"] .ivx-hero-card{--hc-ink:#f2f0fb;--hc-sub:#a9a6c8;--hc-line:rgba(157,123,255,.18);--hc-fill:rgba(157,123,255,.08);
  background:rgba(20,17,46,.55);border-color:rgba(157,123,255,.24);box-shadow:0 42px 92px -46px #000,inset 0 1px 0 rgba(255,255,255,.08)}
.ivx-hc-glow{position:absolute;inset-inline:0;top:0;height:120px;pointer-events:none;
  background:radial-gradient(120% 100% at 70% 0,rgba(123,108,240,.32),transparent 70%);opacity:.6}
.ivx-hc-top{position:relative;display:flex;align-items:center;gap:13px;margin-bottom:16px}
.ivx-hc-av{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 36% 28%,#9b6bff,#6b46e0 70%,#4d2fb0);box-shadow:0 12px 26px -10px rgba(107,70,224,.7)}
.ivx-hc-av svg{width:28px;height:28px}
.ivx-hc-vf{position:absolute;bottom:-2px;inset-inline-start:-2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#2f8bff;border:3px solid var(--bg-3)}
[data-theme="light"] .ivx-hc-vf{border-color:#fff}
.ivx-hc-vf svg{width:12px;height:12px}
.ivx-hc-id{flex:1}
.ivx-hc-id b{display:block;font-size:17px;font-weight:800;color:var(--hc-ink);line-height:1.2}
.ivx-hc-id span{font-size:12.5px;color:var(--hc-sub)}
.ivx-hc-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#1a8f59;
  background:rgba(26,143,89,.12);border:1px solid rgba(26,143,89,.28);padding:5px 11px;border-radius:30px}
[data-theme="dark"] .ivx-hc-live{color:#52d999;background:rgba(82,217,153,.12);border-color:rgba(82,217,153,.3)}
.ivx-hc-live i{width:7px;height:7px;border-radius:50%;background:currentColor}
@media(prefers-reduced-motion:no-preference){.ivx-hc-live i{animation:io-pulse 1.6s ease-in-out infinite}}
.ivx-hc-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px}
.ivx-hc-stats>div{padding:11px 8px;border-radius:13px;background:var(--hc-fill);border:1px solid var(--hc-line);text-align:center}
.ivx-hc-stats b{display:block;font-size:18px;font-weight:800;color:var(--hc-ink);line-height:1}
.ivx-hc-stats span{display:block;font-size:10.5px;color:var(--hc-sub);margin-top:4px}
.ivx-hc-chart{position:relative;padding:13px 13px 7px;border-radius:13px;margin-bottom:14px;background:var(--hc-fill);border:1px solid var(--hc-line)}
.ivx-hc-chart-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ivx-hc-chart-h b{font-size:12.5px;font-weight:700;color:var(--hc-ink)}
.ivx-hc-chart-h span{font-size:12px;font-weight:800;color:#0a9e94}
[data-theme="dark"] .ivx-hc-chart-h span{color:#17d1c6}
.ivx-hc-chart .ivx-area{height:54px}
.ivx-hc-plats{position:relative;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.ivx-hc-plats .ivx-kit-plat-ic{width:34px;height:34px;border-radius:10px}
.ivx-hc-plats .ivx-kit-plat-ic svg{width:17px;height:17px}
/* snapchat (and any brand-logo chip) — fill the tile with the real logo */
.ivx-plat-img{padding:0;overflow:hidden;background:transparent !important}
.ivx-plat-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

@media(max-width:1000px){
  .sv[data-seg="individuals"] .sv-hero-in.ivx-hero-2col{grid-template-columns:1fr !important;gap:32px}
  .ivx-hero-card{order:2}
}

/* ============================================================
   PASS 2 · stronger frosted glass + sentiment/generations widgets
   ============================================================ */
/* glass: more visibly frosted on the flat dark page (brighter top edge + sheen) */
.ivx-sec{--ivx-cardbg:transparent}
[data-theme="light"] .ivx-sec{--ivx-cardbg:transparent}
.ivx-card{background:linear-gradient(157deg,rgba(255,255,255,.04),rgba(255,255,255,.006) 50%,rgba(255,255,255,.02)),var(--ivx-cardbg);
  border-top-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15);
  box-shadow:var(--ivx-shadow),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.02)}
[data-theme="light"] .ivx-card{background:linear-gradient(157deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 50%,rgba(255,255,255,.07));
  border-top-color:rgba(255,255,255,.55);
  box-shadow:var(--ivx-shadow),inset 0 1px 0 rgba(255,255,255,.45)}

/* generations sub-range label */
.ivx-hbar-top b em{font-style:normal;font-weight:500;color:var(--t3);font-size:11px;margin-inline-start:6px}

/* sentiment widget */
.ivx-sentiment{display:flex;align-items:center;gap:20px}
.ivx-gauge-wrap{flex:none;width:170px}
.ivx-gauge{width:100%;height:auto;display:block}
.ivx-sent-bars{flex:1}
@media(max-width:520px){.ivx-sentiment{flex-direction:column}.ivx-gauge-wrap{width:200px}}

/* full-width platforms panel */
.ivx-board-wide{margin-top:18px}
.ivx-split-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:760px){.ivx-split-row{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:440px){.ivx-split-row{grid-template-columns:1fr}}

/* ============================================================
   PASS 3 · platform coverage + integrated capabilities map
   ============================================================ */
.ivx-cov{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.ivx-cov-card{display:flex;align-items:center;gap:13px;padding:15px 16px;transition:transform .22s,border-color .22s}
.ivx-cov-card:hover{transform:translateY(-3px);border-color:rgba(157,123,255,.4)}
.ivx-cov-card .plat-badge{flex:none;border-radius:13px !important}
.ivx-cov-tx b{display:block;font-size:14.5px;font-weight:800;color:var(--head)}
.ivx-cov-tx span{font-size:11.5px;color:var(--t3)}
@media(max-width:880px){.ivx-cov{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.ivx-cov{grid-template-columns:1fr}}

.ivx-cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px;margin-top:36px;align-items:start}
.ivx-capcol{padding:22px 20px}
.ivx-capcol-h{display:flex;align-items:center;gap:11px;margin-bottom:15px;padding-bottom:14px;border-bottom:1px solid var(--ivx-border-2)}
.ivx-capcol-ic{position:relative;overflow:hidden;flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 46%,#5a47c8));
  box-shadow:0 0 22px -4px color-mix(in oklab,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ivx-capcol-ic svg{width:22px;height:22px}
.ivx-capcol-ic::after{content:"";position:absolute;left:0;right:0;top:0;height:58%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 70%,transparent);mix-blend-mode:overlay}
.ivx-capcol-h b{font-size:15.5px;font-weight:800;color:var(--head);line-height:1.25}
.ivx-capcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ivx-capcol li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--t2);line-height:1.5}
.ivx-capcol li svg{flex:none;margin-top:2px;color:var(--c)}

/* FAQ accordion */
.ivx-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;align-items:start}
.ivx-faq-item{padding:0;overflow:hidden}
.ivx-faq-item summary{display:flex;align-items:center;gap:12px;padding:17px 19px;cursor:pointer;list-style:none}
.ivx-faq-item summary::-webkit-details-marker{display:none}
.ivx-faq-item summary svg{flex:none;color:var(--violet-2);transition:transform .25s}
.ivx-faq-item[open] summary svg{transform:rotate(90deg)}
.ivx-faq-item summary b{flex:1;font-size:14.5px;font-weight:700;color:var(--head);line-height:1.4}
.ivx-faq-item p{margin:0;padding:0 19px 18px 48px;font-size:13.5px;line-height:1.75;color:var(--t2);text-wrap:pretty}
@media(max-width:760px){.ivx-faq{grid-template-columns:1fr}.ivx-faq-item p{padding-inline:19px}}

/* ============================================================
   PASS 4 · feedback from 5 screenshots
   ============================================================ */
/* (4) capabilities — unify card size: equal-width, equal-height rectangles
   grid-auto-rows:1fr keeps EVERY row the same height, so cards stay
   uniform even when the grid wraps to 2 rows at mid widths */
.ivx-cap{grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;align-items:stretch;gap:15px}
.ivx-capcol{height:100%}
@media(max-width:1200px){.ivx-cap{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.ivx-cap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ivx-cap{grid-template-columns:1fr}}

/* (3) orbit floating callouts — fully transparent, no panel behind (float on the page) */
.indv-orbit-card{background:transparent !important;border-color:transparent !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
[data-theme="dark"] .indv-orbit-card{background:transparent !important;
  border-color:transparent !important;box-shadow:none !important}
[data-theme="dark"] .indv-orbit-center{background:radial-gradient(circle at 50% 40%,color-mix(in oklab,#1a1546 70%,transparent),color-mix(in oklab,#090454 55%,transparent)) !important}
/* (2) orbit centre platform tiles spacing */
.indv-orbit-platforms{gap:8px !important}
.indv-orbit-platforms .plat-badge{border-radius:9px !important}

/* (1) hero snapshot card — bigger, more transparent, animated */
.ivx-hero-card{max-width:464px;padding:26px 26px 22px}
.ivx-hero-card{background:rgba(255,255,255,.5)}
[data-theme="dark"] .ivx-hero-card{background:rgba(20,17,46,.42)}
.ivx-hc-av{width:62px;height:62px}.ivx-hc-av svg{width:31px;height:31px}
.ivx-hc-id b{font-size:18.5px}.ivx-hc-id span{font-size:13px}
.ivx-hc-stats b{font-size:20px}.ivx-hc-stats span{font-size:11px}
.ivx-hc-chart .ivx-area{height:60px}
.ivx-hc-plats{gap:11px}
.ivx-hc-plats .ivx-kit-plat-ic{width:42px;height:42px;border-radius:12px}
.ivx-hc-plats .ivx-kit-plat-ic svg{width:21px;height:21px}
.ivx-hc-plats .ivx-kit-plat-ic,.ivx-hc-plats .ivx-plat-img{transition:transform .3s}
.ivx-hc-plats .ivx-kit-plat-ic:hover,.ivx-hc-plats .ivx-plat-img:hover{transform:translateY(-4px) scale(1.06)}
@media(prefers-reduced-motion:no-preference){
  .ivx-hero-card{animation:ivxHeroIn .7s cubic-bezier(.2,.7,.2,1) both, ivxHeroFloat 7s ease-in-out 1.1s infinite}
  .ivx-hc-glow{animation:ivxGlow 6s ease-in-out infinite}
}
@keyframes ivxHeroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ivxHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes ivxGlow{0%,100%{opacity:.45}50%{opacity:.8}}

/* (5) footer — apply site fonts + blend the bottom into the page base (kill the blue glow) */
.lp-foot,.lp-foot *{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
.lp-foot{background:linear-gradient(180deg,transparent 0%,#090454 86%) !important}
[data-theme="light"] .lp-foot{background:linear-gradient(180deg,transparent 0%,#faf6e7 86%) !important}

/* (5b) footer — kill the blue band: let the page's own dark gradient show, add the AURORA ribbon */
.sv[data-seg="individuals"] .lp-foot{background:linear-gradient(180deg,transparent 0%,transparent 15%,color-mix(in oklab,#04030e 80%,transparent) 38%,#04030e 62%,#04030e 100%) !important;position:relative;z-index:1;overflow:hidden;padding-top:150px}
[data-theme="light"] .sv[data-seg="individuals"] .lp-foot{background:linear-gradient(180deg,transparent 0%,transparent 15%,color-mix(in oklab,#faf6e7 80%,transparent) 40%,#faf6e7 64%,#faf6e7 100%) !important}
.sv[data-seg="individuals"] .ivx-foot-deco{position:absolute;left:0;right:0;top:18px;bottom:auto;height:240px;z-index:0;pointer-events:none;overflow:visible;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent)}
.sv[data-seg="individuals"] .ivx-foot-deco{overflow:hidden}
.sv[data-seg="individuals"] .ivx-foot-deco .iv-aurora-svg{width:100%;height:100%;margin-inline-start:0;display:block;overflow:hidden;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
[data-theme="light"] .sv[data-seg="individuals"] .ivx-foot-deco .iv-aurora-svg{mix-blend-mode:normal;opacity:.7}
.sv[data-seg="individuals"] .lp-foot-in{position:relative;z-index:1}

/* ============================================================
   PASS 5 · hero snapshot card — REAL full-color brand logos
   (match the platform-coverage section's badges)
   ============================================================ */
.ivx-hc-plats .plat-badge{width:42px !important;height:42px !important;border-radius:12px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.ivx-hc-plats .plat-badge:hover{transform:translateY(-4px) scale(1.06)}

/* ============================================================
   PASS 6 · "How it works" — 3-step orientation row
   ============================================================ */
.ivx-how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;align-items:stretch}
.ivx-how-step{position:relative;padding:26px 24px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.ivx-how-n{position:absolute;top:18px;inset-inline-end:20px;font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in oklab,var(--c) 55%,transparent);opacity:.5}
.ivx-how-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--c);
  box-shadow:0 9px 22px -10px var(--c),0 0 0 6px color-mix(in oklab,var(--c) 14%,transparent)}
.ivx-how-ic svg{color:#fff}
.ivx-how-step h4{margin:0;font-size:17px;font-weight:800;color:var(--head);line-height:1.3}
.ivx-how-step p{margin:0;font-size:13.5px;line-height:1.75;color:var(--t2);text-wrap:pretty}
.ivx-how-arrow{position:absolute;inset-inline-start:-21px;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--head);
  background:var(--ivx-cardbg,rgba(20,17,46,.7));border:1px solid var(--ivx-border-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[dir="rtl"] .ivx-how-arrow svg{transform:scaleX(-1)}
@media(max-width:760px){
  .ivx-how{grid-template-columns:1fr;gap:30px}
  .ivx-how-arrow{inset-inline-start:50%;inset-inline-end:auto;top:-25px;bottom:auto;transform:translateX(-50%)}
  .ivx-how-arrow svg,[dir="rtl"] .ivx-how-arrow svg{transform:rotate(90deg)}
}

/* ============================================================
   PASS 7 · bring back the agencies-style MOVING background layers
   (the fixed scene's wavy gradient ribbons read as parallax as you
   scroll over them) — they were hidden on this page; restore + match
   ============================================================ */
.sv[data-seg="individuals"] .sv-scene{opacity:.82}
.sv[data-seg="individuals"] .idx-deco-svg path{display:block !important}
/* match the HOMEPAGE brandDeco wave weights exactly (wide, bold lines) */
.sv[data-seg="individuals"] .idx-deco-svg path[stroke="#17d1c6"]{stroke-width:24;opacity:.55}
.sv[data-seg="individuals"] .idx-deco-svg path[stroke="#fd421f"]{stroke-width:22;opacity:.55}
.sv[data-seg="individuals"] .idx-deco-svg path[stroke="url(#idxVioW)"]{display:block !important;stroke-width:22;opacity:.5}
[data-theme="light"] .sv[data-seg="individuals"] .sv-scene{opacity:.7}
/* keep the loved hero aurora ribbon; just make the fixed scene's TOP wave
   sit lower so the two don't pile up near the hero (balanced like other pages) */
.sv[data-seg="individuals"] .idx-deco{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}

/* ============================================================
   PASS 8 · EXACT homepage background ported into this page.
   The fixed .sv-scene inner SVG is swapped to the homepage's
   brandDeco (wide drifting waves + fission constellation) by
   individuals-redesign.js. Here we add the homepage's MOTION &
   texture effects — slow drift, dot-grid, diagonal sweep — scoped
   to this page only. Wave colours stay the homepage natives
   (cyan/violet) which ARE this page's palette: NO colour change.
   ============================================================ */
.sv[data-seg="individuals"] .sv-scene{opacity:.72;animation:ivHbgDrift 26s ease-in-out infinite alternate}
@keyframes ivHbgDrift{0%{transform:scale(1)}100%{transform:scale(1.07) translate(1.6%,-1.6%)}}
.sv[data-seg="individuals"] .sv-scene::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in oklab,var(--violet) 30%,transparent) 1px,transparent 1px);background-size:48px 48px;opacity:.05;-webkit-mask-image:radial-gradient(125% 100% at 50% 0,#000,transparent 78%);mask-image:radial-gradient(125% 100% at 50% 0,#000,transparent 78%)}
.sv[data-seg="individuals"] .sv-scene::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 40%,color-mix(in oklab,var(--cyan) 13%,transparent) 50%,transparent 60%);animation:ivHbgSweep 14s linear infinite}
@keyframes ivHbgSweep{0%{transform:translateX(-22%)}100%{transform:translateX(22%)}}
.sv[data-seg="individuals"] .iv-hbg-svg{position:absolute;inset:0;opacity:.55}
.sv[data-seg="individuals"] .iv-hbg-svg .lp-deco-svg{position:absolute;inset:0;width:100%;height:100%}
[data-theme="light"] .sv[data-seg="individuals"] .sv-scene{opacity:.6}
[data-theme="light"] .sv[data-seg="individuals"] .iv-hbg-svg{opacity:.5}
@media(prefers-reduced-motion:reduce){.sv[data-seg="individuals"] .sv-scene,.sv[data-seg="individuals"] .sv-scene::after{animation:none}}
/* light mode: drop forbidden-on-cream colours from the ported waves */
[data-theme="light"] .sv[data-seg="individuals"] .iv-hbg-svg [fill="#feb602"]{fill:#336aea}
[data-theme="light"] .sv[data-seg="individuals"] .iv-hbg-svg [fill="#52d999"]{fill:#765186}

/* ============================================================
   PASS 9 · DECISION on the glowing line.
   The ported homepage background now supplies all the glow/waves
   across the whole page (incl. under the hero), so the bespoke
   hero aurora ribbon is redundant and was the source of the hard
   seam. Retire it and restore the hero's natural bottom padding —
   the page now matches the homepage exactly (single fixed bg).
   ============================================================ */
/* ============================================================
   PASS 9/10 · HARMONIOUS twin glow waves (hero ↔ footer).
   The ported homepage bg covers the page; on top of it we keep
   TWO matched aurora waves — one just under the hero, one in the
   footer — styled IDENTICALLY (same 240px height + soft vertical
   & horizontal fade masks) so they read as a balanced pair with
   no hard seam. ":not(.ivx-foot-deco)" targets only the hero one;
   the footer wave already has the matching treatment above.
   ============================================================ */
.sv[data-seg="individuals"] .iv-aurora:not(.ivx-foot-deco){display:block !important;
  position:absolute;left:0;right:0;bottom:-24px;top:auto;height:240px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent)}
.sv[data-seg="individuals"] .iv-aurora:not(.ivx-foot-deco) .iv-aurora-svg{width:100%;height:100%;margin-inline-start:0;display:block;mix-blend-mode:screen;
  -webkit-mask-image:none;mask-image:none}
[data-theme="light"] .sv[data-seg="individuals"] .iv-aurora:not(.ivx-foot-deco) .iv-aurora-svg{mix-blend-mode:normal;opacity:.7}
.sv[data-seg="individuals"] .sv-hero{padding-bottom:190px}

/* nudge the hero aurora ribbon down a bit so it clears the header */
.sv[data-seg="individuals"] .iv-aurora:not(.ivx-foot-deco){bottom:-70px}

/* ============================================================
   PASS 11 · section rhythm — a touch more breathing room between
   sections (premium pacing), scoped to this page only.
   ============================================================ */
.sv[data-seg="individuals"] .sv-sec{padding-top:clamp(58px,7vw,98px);padding-bottom:clamp(58px,7vw,98px)}

/* ============================================================
   PASS 12 · hero snapshot card → lighter PREMIUM GLASS so the
   ported hero background glows through it. More transparent
   gradient fill, luminous border + diagonal sheen, kept legible
   with a frosted blur. Scoped to this page.
   ============================================================ */
.ivx-hero-card{
  background:linear-gradient(157deg,rgba(255,255,255,.4),rgba(255,255,255,.24)) !important;
  border:1px solid rgba(123,108,240,.28) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 40px 90px -48px rgba(34,24,94,.5),inset 0 1px 0 rgba(255,255,255,.6) !important}
[data-theme="dark"] .ivx-hero-card{
  --hc-fill:rgba(157,123,255,.06);--hc-line:rgba(157,123,255,.14);
  background:linear-gradient(157deg,rgba(42,34,90,.34),rgba(13,10,36,.24)) !important;
  border-color:rgba(157,123,255,.3) !important;
  box-shadow:0 40px 90px -48px #000,inset 0 1px 0 rgba(255,255,255,.1) !important}
[data-theme="light"] .ivx-hero-card{--hc-fill:rgba(7,19,79,.04);--hc-line:rgba(7,19,79,.08);
  background:linear-gradient(157deg,rgba(255,255,255,.42),rgba(255,255,255,.24)) !important}
/* faint diagonal light streak across the glass */
.ivx-hero-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%)}
.ivx-hc-glow{opacity:.85}

/* hero card illustration (replaces the mock profile snapshot) */
.ivx-hc-illus{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1456/902;
  background:linear-gradient(150deg,rgba(157,123,255,.35),rgba(63,224,214,.22));margin-bottom:16px;
  border:1px solid rgba(123,108,240,.22);box-shadow:0 18px 44px -26px rgba(34,24,94,.5)}
[data-theme="dark"] .ivx-hc-illus{border-color:rgba(157,123,255,.26)}
.ivx-hc-img{display:block;width:100%;height:100%;object-fit:cover}
.ivx-hc-sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,transparent 44%,rgba(255,255,255,.14) 50%,transparent 56%)}

/* unify footer with the rest of the site — drop the dark footer band so the shared lp-foot + standard chrome shows */
.lp-foot{background:transparent !important}
.sv[data-seg="individuals"] .lp-foot{background:transparent !important}
[data-theme="light"] .sv[data-seg="individuals"] .lp-foot{background:transparent !important}
.sv[data-seg="individuals"] .ivx-foot-deco{display:none !important}
.sv[data-seg="individuals"] .sv-hero{padding-bottom:120px}