/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#07101f}

/* ── Section ── */
.ci-about{
  width:100%;
  /* min-height:100vh; */
  /* background:linear-gradient(135deg,#07101f 0%,#0b1830 50%,#07101f 100%); */
  display:flex;align-items:center;justify-content:center;
  padding:80px 64px;
  gap:90px;flex-wrap:wrap;
  font-family:'DM Sans',sans-serif;
  position:relative;overflow:hidden;
}

/* dot grid */
.ci-about::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  /* background-image:radial-gradient(circle,rgba(255,255,255,0.022) 1px,transparent 1px); */
  background-size:32px 32px;
}

/* blue radial bloom */
.ci-bloom{
  position:absolute;top:50%;transform:translateY(-50%);
  width:520px;height:520px;border-radius:50%;
  /* background:radial-gradient(circle,rgba(45,105,211,0.13) 0%,transparent 70%); */
  pointer-events:none;
}

/* ── Text side ── */
.ci-text{
  flex:1;min-width:280px;max-width:430px;
  position:relative;z-index:2;
}
.ci-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;font-weight:500;letter-spacing:.25em;text-transform:uppercase;
  color:#2D69D3;margin-bottom:18px;
}
.ci-eyebrow::before{
  content:'';width:24px;height:1.5px;
  background:linear-gradient(90deg,#2D69D3,rgba(45,105,211,0.3));
  flex-shrink:0;
}
.ci-heading{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,3.8vw,48px);
  font-weight:700;line-height:1.12;
  color:#fff;margin-bottom:22px;
}
.ci-heading em{
  font-style:normal;color:#2D69D3;
}
.ci-body{
  font-size:14.5px;font-weight:300;line-height:1.88;
  color:rgba(255,255,255,0.48);
  margin-bottom:40px;max-width:380px;
}
/* stats */
.ci-stats{
  display:flex;align-items:center;gap:0;
  border:1px solid rgba(45,105,211,0.18);
  border-radius:14px;overflow:hidden;
  background:rgba(45,105,211,0.04);
  width:fit-content;
}
.ci-stat{
  padding:18px 28px;text-align:center;
  border-right:1px solid rgba(45,105,211,0.18);
}
.ci-stat:last-child{border-right:none;}
.ci-stat-val{
  font-family:'Playfair Display',serif;
  font-size:26px;font-weight:700;color:#fff;
  line-height:1;margin-bottom:5px;
}
.ci-stat-lbl{
  font-size:9.5px;font-weight:500;
  color:rgba(255,255,255,0.32);
  letter-spacing:.1em;text-transform:uppercase;
}

/* ── Cube side ── */
.ci-cube-wrap{
  width:min(500px, 92vw);
  height:min(500px, 92vw);

  flex:0 0 auto;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
}
.ci-cube-glow{
  position:absolute;

  width:120%;
  height:120%;

  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(45,105,211,0.22) 0%,
    transparent 70%
  );

  pointer-events:none;
}
#ci-canvas{
  width:100%;
  height:100%;

  display:block;
  position:relative;
  z-index:1;
}

.no-copy,
.no-copy * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

canvas {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

/* ── Responsive ── */
@media(max-width:860px){
  .ci-about{padding:64px 32px;gap:56px;}
}
@media(max-width:640px){
  .ci-about{flex-direction:column;padding:0px;gap:48px;min-height:auto;}
  .ci-text{max-width:100%;}
  .ci-stats{width:100%;}
  .ci-stat{flex:1;}
}