
/* VOLIQA v38 — alignment + responsive network + full-width bot/historical */

:root{
  --v38-cyan:#31dcff;
  --v38-green:#43ef7d;
  --v38-purple:#bd52ff;
  --v38-amber:#ffbf4a;
  --v38-red:#ff6578;
  --v38-line:#174a5c;
  --v38-panel:#031018;
}

/* ----- HEADER ----- */
.v13-navin{
  grid-template-columns:auto 1fr auto!important;
  grid-template-areas:"logo links actions"!important;
  align-items:center!important;
}
.v13-logo img{
  height:88px!important;
  width:auto!important;
  max-width:360px!important;
}
.v38-mobile-nav{display:none}

/* ----- NETWORK: directly below menu, clean and aligned ----- */
.v38-network-section{
  background:#02080d;
  padding:14px 0 18px;
  border-top:1px solid rgba(49,220,255,.12);
  border-bottom:1px solid rgba(49,220,255,.12);
}
.v38-network{
  position:relative;
  min-height:310px;
  display:grid;
  grid-template-columns:300px 190px 180px 1fr;
  grid-template-areas:
    "label core outputs result"
    "inputs core outputs result";
  align-items:center;
  column-gap:34px;
  padding:26px;
  border:1px solid #17495b;
  border-radius:18px;
  background:#031018;
  overflow:hidden;
}
.v38-network-label{
  grid-area:label;
  align-self:end;
  color:var(--v38-cyan);
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  margin-bottom:12px;
}
.v38-inputs{
  grid-area:inputs;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  z-index:2;
}
.v38-inputs span,
.v38-outputs span{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:52px;
  padding:8px 11px;
  border:1px solid #18495a;
  border-radius:10px;
  background:#03131c;
  font-size:10px;
  font-weight:900;
  color:#e9f6fb;
}
.v38-inputs small,
.v38-outputs small{
  margin-top:3px;
  font-size:8px;
  font-weight:600;
  color:#7994a0;
}
.v38-core{
  grid-area:core;
  z-index:3;
  width:176px;
  height:176px;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid var(--v38-cyan);
  border-radius:50%;
  background:radial-gradient(circle,rgba(49,220,255,.12),rgba(3,16,24,.95) 62%);
  box-shadow:0 0 26px rgba(49,220,255,.12);
}
.v38-core>b{font-size:62px;line-height:.9;color:var(--v38-cyan)}
.v38-core>strong{font-size:22px;color:#fff}
.v38-core>small{font-size:8px;color:#9ab2bd;letter-spacing:.06em}
.v38-outputs{
  grid-area:outputs;
  z-index:3;
  display:grid;
  gap:8px;
}
.v38-outputs .sent{border-color:#2b7f45;color:#64ef8b}
.v38-outputs .rad{border-color:#23749d;color:#56cbff}
.v38-outputs .hun{border-color:#75339d;color:#d06cff}
.v38-outputs .pro{border-color:#936b18;color:#ffd063}
.v38-outputs .ris{border-color:#85313b;color:#ff7584}
.v38-result{
  grid-area:result;
  z-index:3;
  justify-self:center;
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:left;
  color:#fff;
}
.v38-result b{font-size:20px;letter-spacing:.03em}
.v38-result small{margin-top:10px;color:#a0b5be;line-height:1.5}
.v38-result strong{color:var(--v38-green)}
.v38-network-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.42;
  pointer-events:none;
  z-index:1;
}

/* ----- Remove the old blurred/dead hero area completely ----- */
.v35-hero{
  min-height:0!important;
  padding:24px 0 16px!important;
  background:#02070b!important;
}
.v35-hero:before{display:none!important}
.v35-hero .wrap{
  min-height:0!important;
  display:block!important;
  align-items:initial!important;
}
.v35-hero-copy{padding:0!important}

/* ----- Status sits clearly below a separator ----- */
.v22-status{
  margin-top:0!important;
  padding:16px 0!important;
  border-top:1px solid rgba(49,220,255,.18)!important;
}
.v22-status-title{
  position:static!important;
  margin:0!important;
  padding:13px 16px 10px!important;
  border-bottom:1px solid rgba(49,220,255,.12)!important;
  text-align:left!important;
}

/* ----- Dashboard: one clean vertical hierarchy ----- */
.v13-dashboard{
  grid-template-columns:1fr!important;
  gap:16px!important;
}
.v13-botcard{
  width:100%!important;
  grid-template-columns:minmax(0,1fr) minmax(520px,.9fr)!important;
  grid-template-areas:
    "copy dog"
    "cta cta"!important;
  min-height:0!important;
  align-items:center!important;
  gap:28px!important;
  padding:28px!important;
}
.v13-botcard>div:first-child{grid-area:copy!important;min-width:0}
.v13-botcard .v13-dog{
  grid-area:dog!important;
  width:100%!important;
  height:520px!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
  background:#02090f!important;
  border:1px solid rgba(184,76,255,.28)!important;
  border-radius:16px!important;
}
.v13-botcard .v13-botcta{
  grid-area:cta!important;
  width:100%!important;
}
.v13-performance{
  width:100%!important;
  min-height:0!important;
  padding:24px!important;
}
.v13-performance .v13-panel-title{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:start!important;
  gap:14px!important;
}
.v13-performance .v13-panel-title b{
  font-size:22px!important;
  line-height:1.2!important;
}
.v13-performance .v13-panel-title small{
  font-size:11px!important;
  text-align:right!important;
}

/* Right market column is also full width below the historical panel */
.v13-right{
  width:100%!important;
  grid-column:1/-1!important;
}

/* ----- Hunter overview: text left, crisp dog right ----- */
.v35-hunter-overview-grid{
  grid-template-columns:minmax(0,1fr) minmax(520px,.9fr)!important;
  align-items:center!important;
  gap:28px!important;
}
.v35-hunter-dog{
  min-height:0!important;
  height:520px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#02090f!important;
}
.v35-hunter-dog img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  image-rendering:auto!important;
}
.v35-dog-glow{display:none!important}

/* ----- Footer logo same visual scale as top logo ----- */
.v36-footer-brand img{
  height:88px!important;
  width:auto!important;
  max-width:360px!important;
  object-fit:contain!important;
}

/* ----- Floating action dock remains discreet ----- */
.v36-float-actions{
  right:16px!important;
  bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px))!important;
}

/* ----- MOBILE ----- */
@media(max-width:900px){
  .v13-navin{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"logo actions"!important;
    gap:10px!important;
    padding:10px 0!important;
  }
  .v13-logo img{
    height:72px!important;
    max-width:275px!important;
  }
  .v13-links,
  #v13-mobile-menu,
  .v13-hamb{
    display:none!important;
  }
  .v13-actions{
    grid-area:actions!important;
    justify-self:end!important;
  }

  .v38-mobile-nav{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    padding:8px max(16px,calc((100vw - 1180px)/2)) 12px;
    background:#02080d;
    border-top:1px solid rgba(49,220,255,.09);
    border-bottom:1px solid rgba(49,220,255,.12);
  }
  .v38-mobile-nav a{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 6px;
    border:1px solid #17495b;
    border-radius:9px;
    background:#04131b;
    color:#dcecf3;
    text-decoration:none;
    font-size:9px;
    font-weight:900;
    text-align:center;
  }
  .v38-mobile-nav .join{
    color:#fff;
    background:linear-gradient(90deg,#9139ef,#256eff,#22d7df);
  }

  .v38-network{
    grid-template-columns:1fr!important;
    grid-template-areas:"label" "inputs" "core" "outputs" "result"!important;
    gap:18px!important;
    min-height:0!important;
    padding:18px!important;
  }
  .v38-network-lines{display:none!important}
  .v38-network-label{align-self:auto;margin:0}
  .v38-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v38-core{width:150px;height:150px}
  .v38-outputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v38-result{text-align:center;justify-self:center}
  .v38-result small{text-align:center}

  .v13-botcard{
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "dog" "cta"!important;
    padding:18px!important;
    gap:16px!important;
  }
  .v13-botcard .v13-dog{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    object-fit:contain!important;
  }
  .v13-performance .v13-panel-title{
    grid-template-columns:1fr!important;
  }
  .v13-performance .v13-panel-title small{
    text-align:left!important;
  }
  .v35-hunter-overview-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .v35-hunter-dog{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
  }
  .v36-footer-brand img{
    height:72px!important;
    max-width:275px!important;
  }
}

@media(max-width:600px){
  .v13-logo img{height:66px!important;max-width:245px!important}
  .v38-mobile-nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding-left:14px;
    padding-right:14px;
  }
  .v38-network-section{padding:10px 0 12px}
  .v38-network{padding:14px!important;border-radius:15px}
  .v38-inputs span,.v38-outputs span{min-height:50px}
  .v38-core{width:132px;height:132px}
  .v38-core>b{font-size:48px}
  .v38-core>strong{font-size:20px}
  .v35-hero{padding:18px 0 12px!important}
  .v13-botcard .v13-dog,
  .v35-hunter-dog{
    aspect-ratio:1/1!important;
  }
  .v36-footer-brand img{height:66px!important;max-width:245px!important}
}
