/* ============================================================
   Datylux — live hero dashboard (rebuilt from flat PNG)
   Scoped under .dash so it never collides with page styles.
   ============================================================ */

/* ---- New hero shell ---- */
.hero2{position:relative;padding:120px 0 92px;text-align:center;overflow:hidden;}
.hero2 .wrap{display:flex;flex-direction:column;align-items:center;}
.hero2-eyebrow{margin-bottom:18px;}
.hero2-title{
  font-family:'Syne',sans-serif;font-weight:800;line-height:.92;letter-spacing:-.02em;
  width:100%;max-width:100%;
  font-size:clamp(44px,5.7vw,80px);text-transform:lowercase;
}
.hero2-title .l1{display:block;color:#eef6ff;}
.hero2-title .l2{
  display:block;color:transparent;
  background:linear-gradient(96deg,var(--accent,#1677ff),#2aa8ff 55%,#13d8ff);
  -webkit-background-clip:text;background-clip:text;
}
.hero2-lede{
  margin:24px auto 0;max-width:600px;color:#aebfd4;
  font-size:clamp(16px,1.5vw,20px);line-height:1.55;text-wrap:balance;
}
.cta-row2{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:40px;}
.hero2-trust{margin-top:22px;display:flex;align-items:center;gap:10px;color:#7d97b4;font-size:13.5px;}
.hero2-trust .dot{width:6px;height:6px;border-radius:50%;background:#22d778;box-shadow:0 0 10px #22d778;}

/* ---- Dashboard frame + floating icons ---- */
.dash-frame{position:relative;width:min(1160px,100%);margin:56px auto 0;}
.dash-frame::before{
  content:'';position:absolute;inset:-10% -6% 0;z-index:0;pointer-events:none;
  background:radial-gradient(56% 50% at 50% 40%,color-mix(in srgb,var(--accent,#1677ff) 34%,transparent),transparent 70%);
  filter:blur(46px);opacity:.7;
}

.float-ico{
  position:absolute;z-index:3;width:62px;height:62px;border-radius:17px;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 16px 38px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);
}
.float-ico svg{width:30px;height:30px;fill:currentColor;}
/* image-based platform tiles — cropped 3D renders, no chrome (image carries its own shading) */
.float-ico.img-tile{background:none!important;box-shadow:none!important;border-radius:0;width:122px;height:122px;overflow:visible;}
.float-ico.img-tile img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));}
.float-ico.li{left:-122px;top:1%;}
.float-ico.tt{left:-104px;top:31%;}
.float-ico.rd{left:-122px;top:61%;}
.float-ico.me{right:-122px;top:12%;}
.float-ico.xx{right:-104px;top:46%;}
@media(max-width:1300px){ .float-ico{display:none;} }

/* ---- Dashboard panel ---- */
.dash{
  --accent:#1677ff;
  --d-surface:#0a1422;
  --d-surface2:#0c1827;
  --d-card:#0b1726;
  --d-border:rgba(120,160,210,.15);
  --d-line:rgba(120,160,210,.10);
  --d-txt:#eef6ff;
  --d-txt2:#9db2cb;
  --d-txt3:#6a85a3;
  --d-chip:rgba(255,255,255,.04);

  position:relative;z-index:2;display:grid;grid-template-columns:198px 1fr;
  border-radius:18px;overflow:hidden;text-align:left;
  background:linear-gradient(160deg,var(--d-surface2),var(--d-surface));
  border:1px solid var(--d-border);
  box-shadow:0 44px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
.dash--light{
  --d-surface:#eef3fb;
  --d-surface2:#ffffff;
  --d-card:#ffffff;
  --d-border:rgba(20,60,110,.12);
  --d-line:rgba(20,60,110,.10);
  --d-txt:#0c1a2b;
  --d-txt2:#48607e;
  --d-txt3:#8197af;
  --d-chip:rgba(20,60,110,.05);
}

/* sidebar */
.dash__side{padding:18px 14px;border-right:1px solid var(--d-border);background:color-mix(in srgb,var(--d-surface) 60%,#000 6%);}
.dash__brand{display:flex;align-items:center;gap:8px;padding:4px 6px 18px;}
.dash__brand i{width:5px;height:20px;border-radius:3px;background:linear-gradient(180deg,var(--accent),#0891b2);}
.dash__brand span{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;color:var(--d-txt);}
.dash__navlabel{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:var(--d-txt3);padding:6px 8px;}
.dash__nav{display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.dash__navitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;color:var(--d-txt2);font-weight:500;}
.dash__navitem svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;}
.dash__navitem.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--d-txt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);}
.dash__navitem.on svg{color:var(--accent);}

/* main */
.dash__main{min-width:0;padding:16px 18px 20px;display:flex;flex-direction:column;gap:16px;}

/* toolbar */
.dash__toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.tb-group{display:flex;align-items:center;gap:7px;}
.tb-label{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.13em;color:var(--d-txt3);}
.tb-pill{font-size:12px;color:var(--d-txt2);padding:5px 11px;border-radius:7px;border:1px solid var(--d-border);background:var(--d-chip);white-space:nowrap;}
.tb-seg{display:flex;border:1px solid var(--d-border);border-radius:7px;overflow:hidden;}
.tb-seg span{font-size:12px;color:var(--d-txt3);padding:5px 11px;}
.tb-seg span.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--d-txt);}
.tb-plats{display:flex;gap:5px;align-items:center;}
.tb-plat{width:auto;min-width:24px;height:24px;padding:0 8px;border-radius:6px;display:grid;place-items:center;border:1px solid var(--d-border);color:var(--d-txt2);font-size:10.5px;font-weight:600;white-space:nowrap;}
.tb-plat svg{width:13px;height:13px;fill:currentColor;}
.tb-plat.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.hero2 .dash__toolbar{gap:6px;}
.hero2 .tb-plat{height:22px;min-width:22px;padding:0 3px;font-size:8.6px;}
.tb-saved{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--d-txt2);padding:6px 12px;border-radius:7px;border:1px solid var(--d-border);background:var(--d-chip);}
.tb-saved svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}

/* kpi header */
.dash__sec-h{font-size:14px;font-weight:600;color:var(--d-txt);}
.dash__sec-h small{display:block;font-weight:400;font-size:11.5px;color:var(--d-txt3);margin-top:2px;}

/* kpi cards */
.dash__kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.kpi{position:relative;border-radius:11px;padding:13px 13px 8px;background:var(--d-card);border:1px solid var(--d-border);overflow:hidden;}
.kpi::after{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:var(--kc,#2a86ff);opacity:.85;}
.kpi__label{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--d-txt3);text-transform:uppercase;}
.kpi__val{font-size:clamp(18px,1.8vw,24px);font-weight:700;color:var(--d-txt);margin-top:5px;letter-spacing:-.01em;font-family:'Syne',sans-serif;}
.kpi__sub{font-size:10px;color:var(--d-txt3);margin-top:3px;}
.kpi__spark{display:block;width:100%;height:30px;margin-top:8px;}

/* lower row: chart + platforms */
.dash__lower{display:grid;grid-template-columns:1fr 290px;gap:14px;align-items:stretch;}
.dash__card{background:var(--d-card);border:1px solid var(--d-border);border-radius:13px;padding:14px;}

/* chart */
.dash__charthead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.dash__charthead .t{font-size:14px;font-weight:600;color:var(--d-txt);margin-right:auto;}
.chip-row{display:flex;gap:5px;flex-wrap:wrap;}
.chip{font-size:11px;color:var(--d-txt3);padding:4px 9px;border-radius:6px;border:1px solid var(--d-border);}
.chip.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 38%,transparent);}
.chip-ico{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--d-border);color:var(--d-txt3);}
.chip-ico svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}

.plot{display:grid;grid-template-columns:auto 1fr;gap:8px;}
.plot__y{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--d-txt3);font-family:'DM Mono',monospace;padding:2px 0 18px;text-align:right;}
.plot__main{min-width:0;}
.plot__svg{width:100%;height:210px;display:block;color:var(--accent);}
.plot__x{display:flex;justify-content:space-between;font-size:10px;color:var(--d-txt3);font-family:'DM Mono',monospace;margin-top:4px;}
.dash--lineonly .plot__area{display:none;}

/* platforms */
.plat-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.plat-head .t{font-size:14px;font-weight:600;color:var(--d-txt);}
.plat-head .tot{font-size:11px;color:var(--d-txt3);font-family:'DM Mono',monospace;}
.plat-row{padding:9px 0;border-top:1px solid var(--d-line);}
.plat-row:first-of-type{border-top:0;}
.plat-row__top{display:flex;align-items:center;gap:8px;}
.plat-dot{width:8px;height:8px;border-radius:50%;background:var(--pc,#2aa8ff);box-shadow:0 0 8px var(--pc,#2aa8ff);flex:none;}
.plat-name{font-size:12.5px;color:var(--d-txt);font-weight:500;}
.plat-spend{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--d-txt);font-family:'Syne',sans-serif;}
.plat-row__meta{display:flex;align-items:center;gap:10px;margin-top:5px;padding-left:16px;font-size:10px;color:var(--d-txt3);font-family:'DM Mono',monospace;}
.plat-bar{height:4px;border-radius:3px;background:var(--d-line);margin:7px 0 0 16px;overflow:hidden;}
.plat-bar i{display:block;height:100%;border-radius:3px;background:var(--pc,#2aa8ff);}

/* ---- feature pills ---- */
.feat-pills{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  width:min(1160px,100%);margin:18px auto 0;
}
.feat-pill{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:13px;
  background:rgba(255,255,255,.025);border:1px solid rgba(120,160,210,.16);text-align:left;}
.feat-pill__ico{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  color:var(--accent,#3f8bff);border:1px solid color-mix(in srgb,var(--accent,#1677ff) 30%,transparent);
  background:color-mix(in srgb,var(--accent,#1677ff) 10%,transparent);}
.feat-pill__ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;}
.feat-pill__t{font-size:13px;color:#c4d4e8;line-height:1.3;font-weight:500;}

/* ============================================================
   RESPONSIVE — stacked, mobile-native dashboard
   ============================================================ */
@media(max-width:980px){
  .feat-pills{grid-template-columns:repeat(2,1fr);}
  .dash{grid-template-columns:1fr;}
  /* sidebar becomes a horizontal scroll strip */
  .dash__side{display:flex;align-items:center;gap:10px;border-right:0;border-bottom:1px solid var(--d-border);padding:12px 14px;overflow-x:auto;}
  .dash__brand{padding:0;flex:none;}
  .dash__navlabel{display:none;}
  .dash__nav{flex-direction:row;gap:6px;margin:0;}
  .dash__navitem{white-space:nowrap;padding:7px 12px;}
  .dash__kpis{grid-template-columns:repeat(2,1fr);}
  .dash__lower{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .hero2{padding:96px 0 64px;}
  .hero2-title{font-size:clamp(30px,8.5vw,42px);line-height:.98;}
  .hero2-title .l2{font-size:clamp(19px,6vw,34px);line-height:1.05;}
  .dash-frame{margin-top:34px;}
  .dash__side{overflow:hidden;}
  .dash__navitem:not(.on){display:none;}
  .feat-pills{grid-template-columns:1fr;}
  .dash__main{padding:14px;}
  .dash__toolbar{gap:10px;}
  .tb-group.hide-sm{display:none;}
  .dash__kpis{grid-template-columns:repeat(2,1fr);}
  .kpi__val{font-size:20px;}
  .plot__svg{height:170px;}
}
@media(max-width:400px){
  .dash__kpis{grid-template-columns:1fr;}
}