/* ============================================================
   08 · DAO / Governance section (PredictMe DAO)
   ============================================================ */
.dao{
  background:#000000;
  color:#F4F3FA;
  font-family:'Host Grotesk',system-ui,sans-serif;
  padding:72px clamp(20px,4vw,56px) 180px;
  position:relative;
  overflow:hidden;
}
.dao::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
  pointer-events:none;
}
.dao__inner{
  max-width:1260px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:1;
}

/* Left: backlit animated panel */
.dao .panel{position:relative;aspect-ratio:5/4}
.dao .panel__glow{
  position:absolute;
  inset:-14% -10% -22% -10%;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(139,108,245,.28), transparent 70%),
    radial-gradient(40% 40% at 30% 70%, rgba(182,162,255,.16), transparent 70%);
  filter:blur(38px);
  z-index:0;
  animation:daoBreathe 7s ease-in-out infinite;
}
.dao .panel__frame{
  position:relative;
  z-index:1;
  height:100%;
  border:none;
  background:transparent;
  overflow:visible;
  padding:0;
}
.dao .panel__frame::before,
.dao .panel__frame::after{
  content:none;
}
.dao .panel__media{
  position:relative;
  height:100%;
  overflow:visible;
  background:transparent;
}
.dao .panel__tag{
  position:absolute;
  left:18px;bottom:16px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;
  color:#B7BAC2;
  z-index:2;
}

/* Right: copy */
.dao .copy__eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:#B7BAC2;
  display:inline-flex; align-items:center;
  margin:0 0 14px;
}
.dao .copy__title{
  font-family:'Host Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(24px,2.9vw,36px);
  line-height:1.12;
  letter-spacing:-.02em;
  white-space:nowrap;
  margin:0 0 14px;
  padding-bottom:.1em;
  background:linear-gradient(104deg,rgba(255,255,255,0) 43%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 57%),linear-gradient(180deg,#ffffff 0%,#f4f3f9 50%,#cdc8e2 76%,#a58aee 106%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px rgba(115,58,237,.28));
}
.dao .copy__title em{font-style:normal}
.dao .copy__body{
  font-family:'Host Grotesk',sans-serif;
  font-weight:400;
  font-size:clamp(.96rem,1.16vw,1.18rem);
  line-height:1.55;
  letter-spacing:.004em;
  color:#B7BAC2;
  max-width:58ch;
  margin:0 0 14px;
}
.dao .copy__body strong{
  font-weight:600;
  color:#eae7f3;
}
.dao .copy__body--tight{margin:0 0 18px}

.dao .copy__mark-wrap{margin:0 0 18px}
.dao .copy__mark{
  font-family:'Host Grotesk',sans-serif;
  font-weight:600;
  font-size:clamp(17px,1.8vw,22px);
  line-height:1.35;
  color:#ffffff;
}

.dao .copy__signoff{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Host Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(13px,1.5vw,17px);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#F4F3FA;
  margin:18px 0 0;
}

.dao .copy__signoff span{color:#8b6cf5;margin:0 4px}

.dao .pillars{
  border-top:1px solid rgba(255,255,255,.16);
}
.dao .pillar__k{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.16em;
  color:#8b6cf5;
  margin:0 0 8px;
}
.dao .pillar__v{
  font-family:'Host Grotesk',sans-serif;
  font-size:13px;
  line-height:1.5;
  color:#B7BAC2;
  margin:0;
}

/* dip-grid frame: hairlines stop at the grid edges; left edge marked by a vertical line */
.dip-grid{border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16)}
.dip-grid::before,
.dip-grid::after{
  content:"";position:absolute;left:0;
  width:100%;height:1px;background:rgba(255,255,255,.16);pointer-events:none;
}
.dip-grid::before{top:-1px}
.dip-grid::after{bottom:-1px}

@keyframes daoBreathe{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}

@media (max-width:820px){
  .dao{padding:64px 20px}
  .dao .copy__title{white-space:normal}
  .dao__inner{grid-template-columns:1fr;gap:40px}
  .dao .panel{max-width:440px;margin:0 auto;width:100%}
  .dao .pillars{gap:14px}
  .dao .pillar__v{font-size:12px}
}
@media (max-width:440px){
  .dao .pillars{grid-template-columns:1fr;gap:16px;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .dao .panel__glow{animation:none}
}