/* Shared styles for all 5 Pillar pages.
   Each page sets data-accent on .pillar-hero (blue, green, orange, purple, aqua).
   Body content shared via classes. Vary copy + accent color only. */

.pillar-hero {
  position:relative; padding:120px 0 80px; overflow:hidden;
  background:
    radial-gradient(900px 600px at 90% 0%, rgba(0,97,255,0.22), transparent 60%),
    radial-gradient(700px 500px at -10% 100%, rgba(96,239,255,0.10), transparent 60%),
    linear-gradient(180deg, #0A1124 0%, #0F1A30 100%);
  color:#fff;
}
.pillar-hero[data-accent="blue"]   { --pacc:#0061FF;   --pacc-2:#3F8CFF; }
.pillar-hero[data-accent="green"]  { --pacc:#0E9F6E;   --pacc-2:#36C39B; }
.pillar-hero[data-accent="orange"] { --pacc:#DA5B00;   --pacc-2:#FF9344; }
.pillar-hero[data-accent="purple"] { --pacc:#AB00E7;   --pacc-2:#E15CF5; }
.pillar-hero[data-accent="aqua"]   { --pacc:#00A5D9;   --pacc-2:#60EFFF; }
.pillar-hero::before {
  content:""; position:absolute; right:-200px; top:-200px; width:600px; height:600px;
  background:radial-gradient(circle, var(--pacc), transparent 60%); opacity:0.25; filter:blur(40px); pointer-events:none;
}

.pillar-breadcrumb { font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:18px; }
.pillar-breadcrumb a { color:rgba(255,255,255,0.75); text-decoration:none; }
.pillar-breadcrumb a:hover { color:#fff; }
.pillar-breadcrumb span { color:rgba(255,255,255,0.35); margin:0 8px; }

.pillar-hero-grid {
  display:grid; gap:48px;
  grid-template-columns:1.2fr 1fr; align-items:center;
}
@media (max-width:920px) { .pillar-hero-grid { grid-template-columns:1fr; } }

.pillar-hero h1 {
  color:#fff; font-size:clamp(36px,5vw,56px); font-weight:800;
  line-height:1.06; letter-spacing:-0.02em; max-width:640px;
}
.pillar-hero .lede {
  color:rgba(255,255,255,0.80); font-size:18px;
  max-width:560px; margin-top:20px; line-height:1.55;
}
.pillar-cta { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }

/* The wheel/ring graphic — pillar in question is highlighted */
.pillar-wheel {
  position:relative;
  width:380px; height:380px; margin:0 auto;
  background:
    radial-gradient(circle, rgba(96,239,255,0.06), transparent 60%);
  border-radius:50%;
}
.pillar-wheel::before {
  content:""; position:absolute; inset:30px;
  border:1px dashed rgba(255,255,255,0.18); border-radius:50%;
}
.pillar-wheel::after {
  content:""; position:absolute; inset:100px;
  border:1px dashed rgba(255,255,255,0.12); border-radius:50%;
}
@media (max-width:920px) { .pillar-wheel { width:300px; height:300px; } }
@media (max-width:480px) { .pillar-wheel { width:260px; height:260px; } }

.ring-pillar {
  position:absolute; left:50%; top:50%;
  width:88px; height:88px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16);
  color:#fff; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  transition:all .25s ease;
  /* Position: --pos = 0..4, evenly around the wheel */
  --r:154px;
  --angle:calc(var(--pos) * 72deg - 90deg);
  transform:
    translate(-50%,-50%)
    rotate(var(--angle))
    translate(var(--r), 0)
    rotate(calc(-1 * var(--angle)));
}
@media (max-width:920px) { .ring-pillar { width:72px; height:72px; --r:120px; font-size:11px; } }
@media (max-width:480px) { .ring-pillar { width:62px; height:62px; --r:100px; font-size:10.5px; } }

.ring-pillar:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.30); color:#fff; text-decoration:none; transform:
    translate(-50%,-50%) rotate(var(--angle)) translate(var(--r), 0) rotate(calc(-1 * var(--angle))) scale(1.05); }
.ring-pillar.is-active {
  background:linear-gradient(135deg, var(--pacc) 0%, var(--pacc-2) 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,0.25);
}
.ring-pillar.is-active span { color:#fff; font-weight:800; }
.ring-core {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14);
  color:#fff; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; text-align:center;
  line-height:1.3;
}
@media (max-width:480px) { .ring-core { width:100px; height:100px; font-size:10.5px; } }

/* Capability grid */
.pillar-caps { padding:96px 0; }
.caps-grid { display:grid; gap:20px; grid-template-columns:repeat(2,1fr); max-width:1100px; margin:0 auto; }
@media (max-width:760px) { .caps-grid { grid-template-columns:1fr; } }
.cap-card {
  background:#fff; border:1px solid var(--s60-slate-15); border-radius:16px;
  padding:32px; position:relative;
}
.cap-num {
  font-size:11px; font-weight:800; letter-spacing:0.14em; color:var(--s60-blue);
  margin-bottom:14px; text-transform:uppercase;
}
.cap-card h3 { font-size:22px; font-weight:700; margin:0 0 12px; }
.cap-card > p { font-size:15px; color:var(--s60-slate-600); margin:0 0 18px; line-height:1.55; }

/* Linear flow diagram */
.flow-row {
  display:flex; gap:0; align-items:stretch; max-width:1100px; margin:0 auto; flex-wrap:wrap;
}
.flow-step {
  flex:1; min-width:200px;
  background:#fff; border:1px solid var(--s60-slate-15);
  border-radius:14px; padding:24px; margin:6px;
  position:relative;
}
.flow-step-num {
  width:30px; height:30px; border-radius:50%;
  background:var(--s60-gradient); color:#fff;
  font-size:13px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.flow-step h4 { font-size:18px; font-weight:700; margin:0 0 6px; }
.flow-step p  { font-size:13.5px; color:var(--s60-slate-600); margin:0; line-height:1.5; }
.flow-arrow {
  align-self:center;
  font-size:24px; color:var(--s60-blue); font-weight:700; padding:0 6px;
}
@media (max-width:760px) {
  .flow-row { flex-direction:column; }
  .flow-arrow { transform:rotate(90deg); padding:6px 0; }
}

/* Cross-cutting banner */
.pillar-cross-banner { padding:48px 0; background:#fff; }
.cross-card {
  background:linear-gradient(120deg, #0A1124 0%, #142446 100%);
  color:#fff;
  border-radius:20px; padding:36px;
  display:flex; gap:32px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; max-width:1100px; margin:0 auto;
  position:relative; overflow:hidden;
}
.cross-card::before {
  content:""; position:absolute; right:-80px; top:-100px; width:320px; height:320px;
  background:var(--s60-gradient); opacity:0.20; filter:blur(60px); border-radius:50%;
}
.cross-card > * { position:relative; }
.cross-card h3 { color:#fff; font-size:22px; font-weight:800; margin:8px 0 6px; max-width:520px; }
.cross-card p  { color:rgba(255,255,255,0.78); max-width:520px; margin:0; font-size:15px; }

/* Audience cards */
.audience-row-grid {
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr); max-width:1100px; margin:0 auto;
}
@media (max-width:760px) { .audience-row-grid { grid-template-columns:1fr; } }
.aud-card {
  background:#fff; border:1px solid var(--s60-slate-15); border-radius:14px;
  padding:28px;
}
.aud-card h4 { font-size:18px; font-weight:700; margin:0 0 10px; color:var(--s60-slate-900); }
.aud-card p  { font-size:14.5px; color:var(--s60-slate-600); margin:0; line-height:1.55; }

/* How it works with the other pillars */
.pillar-others { padding:96px 0; }
.others-grid {
  display:grid; gap:14px; grid-template-columns:repeat(4,1fr); max-width:1200px; margin:0 auto;
}
@media (max-width:1024px) { .others-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px)  { .others-grid { grid-template-columns:1fr; } }
.other-card {
  background:#fff; border:1px solid var(--s60-slate-15); border-radius:14px;
  padding:24px; text-decoration:none; color:inherit;
  transition:all .25s ease;
}
.other-card:hover { transform:translateY(-3px); border-color:rgba(0,97,255,0.30); box-shadow:var(--s60-shadow-md); text-decoration:none; }
.oc-num { font-size:11px; font-weight:800; letter-spacing:0.14em; color:var(--s60-blue); margin-bottom:10px; text-transform:uppercase; }
.other-card h4 { font-size:17px; font-weight:700; margin:0 0 8px; color:var(--s60-slate-900); }
.other-card p  { font-size:13px; color:var(--s60-slate-600); margin:0; line-height:1.5; }