
/* =========================================================
   ESPRIQ ANALYTICS
   ========================================================= */

.analytics-page{
    background:#001e29;
    color:#fff;
    min-height:100vh;
}

.analytics-hero{
    min-height:580px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    border-bottom:1px solid rgba(45,220,238,.13);
    padding:70px 7% 60px;
    box-sizing:border-box;
}

.analytics-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:430px;
}

.analytics-radar{
    position:relative;
    width:440px;
    height:440px;
}

.analytics-radar-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
}

.radar-ring{
    fill:none;
    stroke:rgba(45,220,238,.16);
    stroke-width:1;
}

.radar-ring.r1{ r:82px; }
.radar-ring.r2{ r:132px; }
.radar-ring.r3{ r:185px; }

#analytics-lines line{
    stroke:rgba(45,220,238,.21);
    stroke-width:1;
}

.radar-scan{
    stroke:rgba(241,190,61,.55);
    stroke-width:1.1;
    filter:drop-shadow(0 0 6px rgba(241,190,61,.30));
}

.analytics-core{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:156px;
    height:156px;
    border:1px solid rgba(45,220,238,.62);
    border-radius:28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(2,40,53,.97);
    box-shadow:
        0 0 20px rgba(45,220,238,.08),
        inset 0 0 28px rgba(45,220,238,.025);
    z-index:4;
}

.analytics-mark{
    font:900 42px/1 Arial,sans-serif;
    color:#26d8e8;
    text-shadow:0 0 12px rgba(38,216,232,.25);
}

.analytics-core strong{
    margin-top:9px;
    font:900 22px/1 Arial,sans-serif;
}

.analytics-core small{
    margin-top:11px;
    font:700 8.5px/1 Arial,sans-serif;
    letter-spacing:1.05px;
    color:#82a8b5;
    white-space:nowrap;
}

.analytics-node{
    position:absolute;
    width:108px;
    min-height:48px;
    padding:8px 10px;
    border:1px solid rgba(45,220,238,.35);
    border-radius:12px;
    background:rgba(1,34,46,.96);
    box-sizing:border-box;
    text-align:center;
    z-index:5;
    box-shadow:0 6px 18px rgba(0,0,0,.16);
}

.analytics-node span{
    display:block;
    font:800 10px/1 Arial,sans-serif;
    color:#26d8e8;
    margin-bottom:6px;
}

.analytics-node strong{
    font:800 12px/1.1 Arial,sans-serif;
    color:#fff;
}

.analytics-node.active{
    border-color:rgba(241,190,61,.85);
    box-shadow:
        0 0 0 1px rgba(241,190,61,.12),
        0 0 18px rgba(241,190,61,.12);
}

.analytics-copy{
    text-align:right;
    max-width:720px;
    margin-left:auto;
}

.analytics-kicker{
    font:800 14px/1.2 Arial,sans-serif;
    letter-spacing:1.5px;
    color:#efbd3f;
}

.analytics-title{
    margin:22px 0 22px;
    font-size:clamp(54px,6vw,88px);
    line-height:1;
    font-weight:900;
}

.analytics-lead{
    margin:0;
    font-size:19px;
    line-height:2;
    font-weight:500;
    color:#b9d7df;
    max-width:700px;
}

.analytics-actions{
    margin-top:30px;
    display:flex;
    gap:14px;
    justify-content:flex-start;
    flex-direction:row-reverse;
}

.analytics-btn{
    min-height:50px;
    padding:0 24px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:15px;
    font-weight:800;
    box-sizing:border-box;
}

.analytics-btn.primary{
    background:#efbd3f;
    color:#001822;
}

.analytics-btn.secondary{
    border:1px solid #14bfd3;
    color:#fff;
    background:transparent;
}


/* =========================================================
   CONTENT
   ========================================================= */

.analytics-section{
    padding:95px 4%;
}

.analytics-section-head{
    width:1020px;
    max-width:100%;
    margin-left:auto;
    text-align:right;
}

.analytics-section-head span{
    font-size:16px;
    font-weight:700;
    letter-spacing:1.5px;
    color:#efbd3f;
}

.analytics-section-head h2{
    margin:12px 0 17px;
    font-size:48px;
    line-height:1.35;
    font-weight:800;
}

.analytics-section-head p{
    margin:0;
    font-size:20px;
    line-height:1.9;
    font-weight:500;
    color:#9fc4cf;
}

.analytics-grid{
    margin-top:52px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.analytics-card{
    position:relative;
    min-height:280px;
    padding:31px;
    border:1px solid rgba(45,220,238,.20);
    border-radius:14px;
    background:rgba(1,31,42,.72);
    box-sizing:border-box;
}

.analytics-card:before{
    content:"";
    position:absolute;
    right:-1px;
    top:8px;
    width:3px;
    height:58px;
    background:#efbd3f;
}

.analytics-code{
    font-size:15px;
    font-weight:800;
    color:#26d8e8;
}

.analytics-phase{
    margin-top:18px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.45px;
    color:#7da5b2;
}

.analytics-card h3{
    margin:12px 0 15px;
    font-size:28px;
    line-height:1.45;
    font-weight:800;
}

.analytics-card p{
    margin:0;
    font-size:20px;
    line-height:1.9;
    font-weight:600;
    color:#a8cbd4;
}

.analytics-band{
    margin:0 4% 100px;
    border:1px solid rgba(45,220,238,.20);
    border-radius:14px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow:hidden;
}

.analytics-band-item{
    min-height:155px;
    padding:30px 22px;
    box-sizing:border-box;
    text-align:center;
    border-left:1px solid rgba(45,220,238,.12);
}

.analytics-band-item:first-child{
    border-left:0;
}

.analytics-band-item strong{
    display:block;
    font-size:30px;
    line-height:1.2;
    font-weight:800;
}

.analytics-band-item span{
    display:block;
    margin-top:12px;
    font-size:21px;
    line-height:1.8;
    font-weight:700;
    color:#d0e8ee;
}

.analytics-cta{
    margin:0 4% 110px;
    min-height:210px;
    border:1px solid rgba(45,220,238,.20);
    border-radius:16px;
    padding:38px 42px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.analytics-cta-copy{
    text-align:right;
    margin-left:auto;
}

.analytics-cta-copy span{
    font-size:16px;
    font-weight:700;
    letter-spacing:1.5px;
    color:#efbd3f;
}

.analytics-cta-copy h2{
    margin:12px 0 12px;
    font-size:38px;
    line-height:1.35;
    font-weight:800;
}

.analytics-cta-copy p{
    margin:0;
    color:#9fc4cf;
    font-size:18px;
    line-height:1.8;
}

.analytics-cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:175px;
    min-height:50px;
    padding:0 22px;
    border-radius:9px;
    background:#efbd3f;
    color:#001822;
    font-weight:800;
    text-decoration:none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1100px){

    .analytics-hero{
        grid-template-columns:1fr;
        gap:25px;
    }

    .analytics-copy{
        max-width:100%;
    }

    .analytics-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:700px){

    .analytics-hero{
        padding:45px 22px;
    }

    .analytics-radar{
        transform:scale(.82);
    }

    .analytics-title{
        font-size:50px;
    }

    .analytics-grid{
        grid-template-columns:1fr;
    }

    .analytics-band{
        grid-template-columns:1fr;
    }

    .analytics-band-item{
        border-left:0;
        border-bottom:1px solid rgba(45,220,238,.12);
    }

    .analytics-cta{
        flex-direction:column;
        align-items:stretch;
    }
}



/* =========================================================
   ESPRIQ ANALYTICS RADAR SCALE ONLY V1
   Keep original layout exactly
   ========================================================= */

@media (min-width:1100px){

  html[lang="ar"] .analytics-radar{
    transform:scale(1.16) !important;
    transform-origin:center center !important;
  }

}



/* =========================================================
   ESPRIQ ANALYTICS EN RADAR SCALE V1
   English only - preserve original layout
   ========================================================= */

@media (min-width:1100px){

  html[lang="en"] .analytics-radar{
    transform:scale(1.16) !important;
    transform-origin:center center !important;
  }

}



/* =========================================================
   ESPRIQ ANALYTICS DE RADAR SCALE V1
   German only - preserve original layout
   ========================================================= */

@media (min-width:1100px){

  html[lang="de"] .analytics-radar{
    transform:scale(1.16) !important;
    transform-origin:center center !important;
  }

}



/* =========================================================
   ESPRIQ ANALYTICS DE FINAL POLISH V1
   German only
   ========================================================= */

@media (min-width:1100px){

  /* Move button group left while preserving button order */
  html[lang="de"] .analytics-actions{
    justify-content:flex-end !important;
  }

  /* Improve readability of the core subtitle */
  html[lang="de"] .analytics-core small{
    font-size:10px !important;
    line-height:1.15 !important;
    letter-spacing:.35px !important;
    font-weight:700 !important;
    opacity:1 !important;
  }

}



/* =========================================================
   ESPRIQ ANALYTICS DE CORE SUBTITLE V2
   ========================================================= */

@media (min-width:1100px){

  html[lang="de"] .analytics-core small{
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    color:#9fc7d1 !important;
    opacity:1 !important;
    white-space:nowrap !important;
  }

}



/* =========================================================
   ESPRIQ ANALYTICS DE CORE SUBTITLE FIT V3
   Keep subtitle fully inside the core
   ========================================================= */

@media (min-width:1100px){

  html[lang="de"] .analytics-core small{
    width:142px !important;
    max-width:142px !important;

    font-size:9px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:-.15px !important;

    color:#9fc7d1 !important;
    opacity:1 !important;

    white-space:nowrap !important;
    text-align:center !important;

    margin-left:auto !important;
    margin-right:auto !important;

    box-sizing:border-box !important;
  }

}



/* =========================================================
   ESPRIQ ANALYTICS DE CORE SUBTITLE V4
   readable two-line subtitle
   ========================================================= */

@media (min-width:1100px){

  html[lang="de"] .analytics-core small{
    width:128px !important;
    max-width:128px !important;

    font-size:10px !important;
    line-height:1.28 !important;
    font-weight:800 !important;
    letter-spacing:.15px !important;

    color:#9fc7d1 !important;
    opacity:1 !important;

    white-space:normal !important;
    text-align:center !important;

    margin-top:10px !important;
    margin-left:auto !important;
    margin-right:auto !important;

    box-sizing:border-box !important;
  }

}

