/* ==========================================================================
   HERO — premium software-house redesign, built on the NexDam Design System.
   Pure HTML/CSS/JS illustration (no stock images, no external libraries).
   Dynamic gradients · light mesh · glow · floating blur shapes ·
   animated stats · premium buttons · subtle mouse parallax + spotlight.
   Fully accessible · respects prefers-reduced-motion.
   ========================================================================== */

.hero-v2{
    position:relative;
    overflow:hidden;
    padding:184px 0 128px;
    isolation:isolate;
}

/* ── Dynamic gradient base + very light mesh ──────────────────────────────── */
.hero-bg{
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(120% 90% at 85% -10%, rgba(0,119,255,.20), transparent 55%),
        radial-gradient(90% 70% at 5% 20%, rgba(0,212,255,.10), transparent 50%),
        linear-gradient(180deg, var(--ds-background) 0%, #061021 100%);
}

/* mesh gradient — soft colour cloud, barely there, slowly breathing */
.hero-mesh{
    position:absolute;
    inset:-20%;
    z-index:-2;
    pointer-events:none;
    opacity:.5;
    background:
        radial-gradient(28% 32% at 20% 30%, rgba(0,162,255,.20), transparent 60%),
        radial-gradient(26% 30% at 80% 25%, rgba(0,212,255,.16), transparent 60%),
        radial-gradient(30% 34% at 65% 75%, rgba(90,110,255,.14), transparent 62%),
        radial-gradient(24% 28% at 30% 80%, rgba(0,150,255,.12), transparent 60%);
    filter:blur(28px);
    animation:hero-mesh-shift 22s ease-in-out infinite alternate;
}

@keyframes hero-mesh-shift{
    0%  { transform:translate3d(0,0,0) scale(1); }
    100%{ transform:translate3d(2%,-2%,0) scale(1.06); }
}

/* faint technical grid, fades toward the bottom */
.hero-grid-lines{
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(0,162,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,162,255,.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

/* ── Glow orbs + floating blur shapes ─────────────────────────────────────── */
.hero-orb{
    position:absolute;
    z-index:-1;
    border-radius:50%;
    filter:blur(60px);
    opacity:.6;
    will-change:transform;
}
.hero-orb-1{
    width:520px; height:520px;
    top:-160px; right:-120px;
    background:radial-gradient(circle, rgba(0,162,255,.55), transparent 65%);
    animation:hero-drift-1 16s ease-in-out infinite;
}
.hero-orb-2{
    width:420px; height:420px;
    bottom:-180px; left:-100px;
    background:radial-gradient(circle, rgba(0,212,255,.4), transparent 65%);
    animation:hero-drift-2 20s ease-in-out infinite;
}

/* small floating blur shapes for depth */
.hero-shape{
    position:absolute;
    z-index:-1;
    border-radius:46% 54% 60% 40% / 48% 44% 56% 52%;
    filter:blur(14px);
    opacity:.5;
    pointer-events:none;
    will-change:transform;
}
.hero-shape-1{
    width:140px; height:140px;
    top:20%; left:46%;
    background:radial-gradient(circle at 30% 30%, rgba(0,212,255,.5), rgba(0,119,255,.12) 70%);
    animation:hero-float-a 12s ease-in-out infinite;
}
.hero-shape-2{
    width:90px; height:90px;
    bottom:16%; left:8%;
    background:radial-gradient(circle at 30% 30%, rgba(120,140,255,.5), transparent 70%);
    animation:hero-float-b 15s ease-in-out infinite;
}
.hero-shape-3{
    width:70px; height:70px;
    top:12%; right:34%;
    background:radial-gradient(circle at 30% 30%, rgba(0,162,255,.5), transparent 70%);
    animation:hero-float-a 18s ease-in-out infinite reverse;
}

@keyframes hero-drift-1{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%    { transform:translate(-40px,40px) scale(1.08); }
}
@keyframes hero-drift-2{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%    { transform:translate(50px,-30px) scale(1.12); }
}
@keyframes hero-float-a{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%    { transform:translate(-18px,-24px) rotate(18deg); }
}
@keyframes hero-float-b{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%    { transform:translate(22px,-16px) rotate(-16deg); }
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.hero-v2-inner{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
    gap:56px;
    align-items:center;
}

/* ── Copy column ──────────────────────────────────────────────────────────── */
.hero-v2-title{
    margin-top:22px;
    font-size:var(--ds-fs-display);
    line-height:var(--ds-lh-tight);
    letter-spacing:var(--ds-ls-tight);
    font-weight:var(--ds-fw-bold);
}
.hero-v2-lead{
    max-width:560px;
    margin-top:22px;
    color:var(--ds-text-muted);
    font-size:17px;
    line-height:var(--ds-lh-body);
}
.hero-v2-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}

/* premium button treatment — shine sweep + refined glow, scoped to hero */
.hero-v2-actions .ds-btn{
    position:relative;
    overflow:hidden;
    background-size:180% 180%;
    background-position:0% 50%;
    transition:transform var(--ds-transition-base),
               box-shadow var(--ds-transition-base),
               background-position .5s var(--ds-ease-out);
}
.hero-v2-actions .ds-btn:not(.ds-btn-outline){
    box-shadow:0 10px 30px rgba(0,119,255,.28);
}
.hero-v2-actions .ds-btn::after{
    content:"";
    position:absolute;
    top:0; left:-120%;
    width:70%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-18deg);
    transition:left .6s var(--ds-ease-out);
    pointer-events:none;
}
.hero-v2-actions .ds-btn:hover{
    transform:translateY(-4px);
    background-position:100% 50%;
    box-shadow:0 16px 44px rgba(0,162,255,.5);
}
.hero-v2-actions .ds-btn-outline:hover{
    box-shadow:0 12px 32px rgba(0,162,255,.22);
}
.hero-v2-actions .ds-btn:hover::after{ left:130%; }
.hero-v2-actions .ds-btn span{ transition:transform var(--ds-transition-base); }
.hero-v2-actions .ds-btn:hover span{ transform:translateX(4px); }
.hero-v2-actions .ds-btn:focus-visible{
    outline:2px solid var(--ds-secondary);
    outline-offset:3px;
}

/* trusted-by badge */
.hero-trusted{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:26px;
    padding:8px 16px 8px 10px;
    border:1px solid var(--ds-border-soft);
    border-radius:var(--ds-radius-pill);
    background:rgba(11,19,35,.55);
    backdrop-filter:blur(8px);
}
.hero-trusted-avatars{ display:flex; }
.hero-trusted-avatars i{
    width:26px; height:26px;
    margin-left:-9px;
    border-radius:50%;
    border:2px solid #0b1323;
    background:linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    font-style:normal;
    display:grid; place-items:center;
    font-size:10px; font-weight:700; color:#03101f;
}
.hero-trusted-avatars i:first-child{ margin-left:0; }
.hero-trusted-avatars i:nth-child(2){ background:linear-gradient(135deg,#5a6eff,#00a2ff); }
.hero-trusted-avatars i:nth-child(3){ background:linear-gradient(135deg,#00d4ff,#0077ff); }
.hero-trusted span{
    font-size:12.5px;
    font-weight:var(--ds-fw-medium);
    color:#c9d8e8;
}
.hero-trusted span strong{ color:#fff; font-weight:var(--ds-fw-semibold); }

.hero-v2-trust{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:26px;
    color:#b9c8d8;
    font-size:12px;
    font-weight:var(--ds-fw-semibold);
    letter-spacing:.05em;
    text-transform:uppercase;
}
.hero-v2-trust span{ display:flex; align-items:center; gap:7px; }
.hero-v2-trust span::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--ds-primary);
    box-shadow:0 0 11px var(--ds-primary);
}

/* ── Stats row ────────────────────────────────────────────────────────────── */
.hero-v2-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:38px;
    max-width:520px;
}
.hero-stat{
    padding:16px 18px;
    border:1px solid var(--ds-border-soft);
    border-radius:var(--ds-radius-md);
    background:rgba(11,19,35,.55);
    backdrop-filter:blur(8px);
    transition:transform var(--ds-transition-base), border-color var(--ds-transition-base);
}
.hero-stat:hover{ transform:translateY(-3px); border-color:var(--ds-border); }
.hero-stat strong{
    display:block;
    font-size:26px;
    font-weight:var(--ds-fw-bold);
    line-height:1;
    background:linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero-stat span{
    display:block;
    margin-top:6px;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ds-text-muted);
}

/* ── Illustrated dashboard ────────────────────────────────────────────────── */
.hero-v2-visual{ position:relative; }

/* big soft glow behind the dashboard */
.hero-v2-visual::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:-8% -6%;
    border-radius:40px;
    background:radial-gradient(60% 60% at 60% 40%, rgba(0,140,255,.4), transparent 70%);
    filter:blur(46px);
    opacity:.8;
    pointer-events:none;
}

.hero-dash-wrap{
    position:relative;
    z-index:1;
    perspective:1600px;
    /* mouse-driven vars (set by JS, default centred/neutral) */
    --mx:50%; --my:35%;
    --px:0px; --py:0px;
    transform:translate3d(var(--px), var(--py), 0);
    transition:transform .25s var(--ds-ease-out);
}
.hero-dash{
    position:relative;
    z-index:2;
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-xl);
    background:linear-gradient(160deg, rgba(15,27,48,.98), rgba(6,13,26,.98));
    box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(0,162,255,.08);
    overflow:hidden;
    transform:rotateY(-9deg) rotateX(4deg);
    transform-style:preserve-3d;
    animation:hero-float 7s ease-in-out infinite;
    transition:transform .5s var(--ds-ease-out);
}
.hero-dash-wrap:hover .hero-dash{
    transform:rotateY(0) rotateX(0);
    animation-play-state:paused;
}

/* light spotlight that follows the mouse across the panel */
.hero-spotlight{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    border-radius:var(--ds-radius-xl);
    opacity:0;
    background:radial-gradient(240px 240px at var(--mx) var(--my),
              rgba(120,210,255,.18), transparent 70%);
    transition:opacity .3s ease;
    mix-blend-mode:screen;
}
.hero-dash-wrap:hover .hero-spotlight{ opacity:1; }

@keyframes hero-float{
    0%,100%{ transform:rotateY(-9deg) rotateX(4deg) translateY(0); }
    50%    { transform:rotateY(-9deg) rotateX(4deg) translateY(-14px); }
}

/* Window chrome */
.hero-dash-bar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 18px;
    border-bottom:1px solid rgba(0,162,255,.12);
    background:rgba(5,11,22,.6);
}
.hero-dash-dot{ width:11px; height:11px; border-radius:50%; }
.hero-dash-dot.r{ background:#ff5f57; }
.hero-dash-dot.y{ background:#febc2e; }
.hero-dash-dot.g{ background:#28c840; }
.hero-dash-url{
    margin-left:12px;
    padding:5px 14px;
    border-radius:var(--ds-radius-pill);
    background:rgba(0,162,255,.08);
    color:#9fc6e8;
    font-size:11px;
    letter-spacing:.03em;
}

.hero-dash-body{
    display:grid;
    grid-template-columns:64px 1fr;
    min-height:360px;
}

/* Sidebar */
.hero-dash-side{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:22px 0;
    border-right:1px solid rgba(0,162,255,.1);
    background:rgba(5,11,22,.4);
}
.hero-dash-ico{
    width:34px; height:34px;
    display:grid; place-items:center;
    border-radius:10px;
    font-size:15px;
    color:var(--ds-text-muted);
    background:rgba(255,255,255,.03);
}
.hero-dash-ico.on{
    color:#fff;
    background:linear-gradient(135deg, var(--ds-primary-deep), var(--ds-primary));
    box-shadow:0 6px 16px rgba(0,119,255,.4);
}

/* Main */
.hero-dash-main{ padding:20px; }
.hero-dash-hi{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.hero-dash-hi h4{ font-size:14px; font-weight:var(--ds-fw-semibold); }
.hero-dash-hi small{ font-size:11px; color:var(--ds-text-muted); }
.hero-live{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:var(--ds-radius-pill);
    background:var(--ds-success-soft); color:var(--ds-success);
    font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.hero-live::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--ds-success); box-shadow:0 0 8px var(--ds-success);
    animation:ds-pulse 1.4s ease-in-out infinite;
}

/* mini metric cards */
.hero-dash-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.hero-metric{
    padding:12px;
    border:1px solid rgba(0,162,255,.12);
    border-radius:12px;
    background:rgba(0,162,255,.04);
}
.hero-metric span{ font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--ds-text-muted); }
.hero-metric strong{ display:block; margin-top:4px; font-size:18px; font-weight:var(--ds-fw-bold); color:#fff; }
.hero-metric em{ font-style:normal; font-size:10px; color:var(--ds-success); }

/* chart */
.hero-chart{
    display:flex;
    align-items:flex-end;
    gap:8px;
    height:96px;
    padding:14px;
    border:1px solid rgba(0,162,255,.1);
    border-radius:14px;
    background:rgba(5,11,22,.4);
    margin-bottom:16px;
}
.hero-bar{
    flex:1;
    border-radius:6px 6px 3px 3px;
    background:linear-gradient(180deg, var(--ds-secondary), var(--ds-primary-deep));
    transform-origin:bottom;
    animation:hero-bar-grow 1s var(--ds-ease-out) both;
}
.hero-bar:nth-child(1){ height:40%; animation-delay:.1s; }
.hero-bar:nth-child(2){ height:62%; animation-delay:.18s; }
.hero-bar:nth-child(3){ height:48%; animation-delay:.26s; }
.hero-bar:nth-child(4){ height:78%; animation-delay:.34s; }
.hero-bar:nth-child(5){ height:56%; animation-delay:.42s; }
.hero-bar:nth-child(6){ height:88%; animation-delay:.5s; opacity:1; }
.hero-bar:nth-child(7){ height:70%; animation-delay:.58s; }
.hero-bar.peak{ background:linear-gradient(180deg, #7fe9ff, var(--ds-primary)); box-shadow:0 0 18px rgba(0,162,255,.5); }

@keyframes hero-bar-grow{
    from{ transform:scaleY(0); opacity:0; }
    to  { transform:scaleY(1); opacity:1; }
}

/* project rows */
.hero-proj{
    display:flex; align-items:center; gap:12px;
    padding:11px 12px; margin-bottom:8px;
    border:1px solid rgba(0,162,255,.1);
    border-radius:12px;
    background:rgba(0,162,255,.03);
}
.hero-proj-ring{
    --p:65;
    width:34px; height:34px; flex-shrink:0; border-radius:50%;
    background:conic-gradient(var(--ds-primary) calc(var(--p)*1%), rgba(255,255,255,.08) 0);
    display:grid; place-items:center;
}
.hero-proj-ring::after{
    content:""; width:24px; height:24px; border-radius:50%;
    background:#0b1323;
}
.hero-proj-info{ flex:1; min-width:0; }
.hero-proj-info strong{ display:block; font-size:12px; }
.hero-proj-info span{ font-size:10px; color:var(--ds-text-muted); }
.hero-proj .ds-badge{ font-size:9px; padding:5px 9px; }

/* floating accent cards */
.hero-chip{
    position:absolute;
    z-index:4;
    display:flex; align-items:center; gap:10px;
    padding:11px 14px;
    border:1px solid var(--ds-border);
    border-radius:14px;
    background:rgba(11,19,35,.9);
    box-shadow:var(--ds-shadow-md);
    backdrop-filter:blur(10px);
    font-size:12px; font-weight:var(--ds-fw-semibold);
    animation:hero-float-chip 5s ease-in-out infinite;
}
.hero-chip small{ display:block; font-size:10px; font-weight:400; color:var(--ds-text-muted); }
.hero-chip-ico{
    width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:14px;
}
.hero-chip-1{ top:26px; left:-34px; }
.hero-chip-1 .hero-chip-ico{ background:var(--ds-success-soft); color:var(--ds-success); }
.hero-chip-2{ bottom:44px; right:-30px; animation-delay:1.6s; }
.hero-chip-2 .hero-chip-ico{ background:var(--ds-primary-soft); color:var(--ds-primary); }

@keyframes hero-float-chip{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-10px); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:960px){
    .hero-v2{ padding:150px 0 90px; }
    .hero-v2-inner{ grid-template-columns:1fr; gap:56px; }
    .hero-dash{ transform:none; animation:none; }
    .hero-dash-wrap:hover .hero-dash{ transform:none; }
    .hero-dash-wrap{ transform:none !important; }
    .hero-chip-1{ left:-14px; }
    .hero-chip-2{ right:-10px; }
    .hero-shape-1{ left:70%; }
}
@media (max-width:560px){
    .hero-v2-stats{ grid-template-columns:1fr 1fr; }
    .hero-chip{ display:none; }
    .hero-dash-body{ grid-template-columns:1fr; }
    .hero-dash-side{
        flex-direction:row; justify-content:center;
        border-right:0; border-bottom:1px solid rgba(0,162,255,.1);
        padding:14px 0;
    }
    .hero-shape{ display:none; }
}

/* ── Reduced motion: kill all movement, keep everything visible ──────────── */
@media (prefers-reduced-motion:reduce){
    .hero-mesh,
    .hero-orb-1,.hero-orb-2,
    .hero-shape,
    .hero-dash,
    .hero-chip,
    .hero-bar,
    .hero-live::before{ animation:none !important; }
    .hero-dash{ transform:none; }
    .hero-dash-wrap{ transform:none !important; }
    .hero-spotlight{ display:none; }
    .hero-v2-actions .ds-btn::after{ display:none; }
}