/*

  font-family: "Inter", sans-serif;
*/


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



/*----------  Body CSS  ----------*/
:root {
    --font-size: 16px;
    --color-white:#fff;
    --color-white2:#F6F2ED;
    --color-white3:#FEFAF5;
    --color-white4:#F8F6F3;
    --color-btn:#F6F2ED4D;
    --color-btn1:#F6F2ED1A;
    --text-color: #616161;
    --primary-color:#D4F772;
    --title-color:#13140E;
    --color-black1:#1E1E1E;
    --color-black2:#030404;
    --color-black3:#000000;
    --color-gray:#696969;
    --color-gray2:#282828;
    --color-border5:rgb(194 243 97 / 5%);
    --color-border15:rgb(194 243 97 / 15%);
    --black-op3:rgb(15 12 25 / 3%);
    --black-op5:rgb(15 12 25 / 5%);
    --black-op10:rgb(15 12 25 / 10%);
    --black-op15:rgb(15 12 25 / 15%);
    --black-op20:rgb(15 12 25 / 20%);
    --black-op60:rgb(15 12 25 / 60%);
    --black-op80:rgb(15 12 25 / 80%);
    --white-op3:rgb(255 255 255 / 3%);
    --white-op5:rgb(255 255 255 / 5%);
    --white-op7:rgb(255 255 255 / 7%);
    --white-op10:rgb(255 255 255 / 10%);
    --white-op15:rgb(255 255 255 / 15%);
    --white-op20:rgb(255 255 255 / 20%);
    --white-op25:rgb(255 255 255 / 25%);
    --white-op50:rgb(255 255 255 / 50%);
    --white-op60:rgb(255 255 255 / 60%);
    --white-op70:rgb(255 255 255 / 70%);
    --white-op90:rgb(255 255 255 / 90%);
    --primary-op30: rgb(194 243 97 / 30%);
    --transition: 500ms ease-in-out;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --title-font:"Inter", sans-serif;
    --container-width:1400px;

    /* background color */
    --bg-color1:#FCFEF7;
    --bg-color2:#F1F5E6;
    --bg-color3:#F1FFD4;
    --bg-color4:#F8FEE7;



    --color-gradient-1:linear-gradient(180deg, #212121 0%, #171717 100%);
    --border-grdient-1:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 100%);

}


html,
body {
    overflow-x: hidden;
    width: 100%;
	overflow-x: clip;
}
::-webkit-scrollbar-track{
	background-color: var(--title-color);
	border-left: 1px solid var(--title-color);
}
::-webkit-scrollbar{
	width: 7px;
	background-color: var(--title-color);
}
::-webkit-scrollbar-thumb{
	background: var(--primary-color);
}

:root{
    --natural: #fff;
}
body {
    font-size: 16px;
    line-height: 26px;
    color: var(--text-color);
    font-weight: 400;
    font-family:var(--title-font);
    margin: 0;
}

p {
    font-size: 16px;
    line-height: 26px;
    color: var(--text-color);
    font-weight: 400;
    font-family:var(--title-font);
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 40px;
    line-height: 50px;
    color:var(--title-color);
    font-weight: 700;
    font-family:var(--title-font);
    font-style: normal;
    -webkit-transition: .5s;
    transition: .5s;
    margin: 0;
}

h1 {
    font-size: 50px;
}

h2 {
    font-size: 35px;

}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    color:var(--text-color);
}

.text-right{
    text-align: right;
}
.text-white{
    color:var(--color-white)
}
a:focus,
.btn:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    text-decoration: none;
    text-decoration: none;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize !important;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    -webkit-transition: .5s;
    transition: .5s;
}

ul {
    margin: 0px;
    padding: 0px;
}

ul li{
    list-style: none;
}

input:focus,
button:focus {
    border-color: none;
    outline-color: none;
    border: 1px solid none;
}

textarea:focus {
    border-color:var(--text-color);
    outline-color:var(--title-color);
}

label {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

a,
i,
cite,
em,
var,
address,
dfn,
ol,
li,
ul {
    font-style: normal;
    font-weight: 400;
    list-style: none;
}

.white {
    color: #fff !important;
}

figure{
	margin: 0;
}
img{
	max-width: 100%;
}
.section-border {
    border-bottom: 1px solid var(--black-op10);
    flex-grow: 1;
    transform-origin: left;
    transform: scaleX(0);
}
.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.data-img-hover{
	position: relative;
	width: 100%;
}
.data-img-hover img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.data-img-hover canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.data-img-hover canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1 !important;
}
.border-color {
    border-bottom: 1px solid var(--color-border2);
}

.defult-btn a {
    display: inline-block;
    background: var(--primary-color);
    font-family: var(--title-font);
    color: var(--color-white);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.3px;
    padding: 15px 40px;
    margin-top: 30px;
    border-radius: 30px;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}
.defult-btn a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: var(--title-color);
    border-radius: 30px;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: .5s;
    clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
    z-index: -1;
}
.defult-btn a:hover::before {
    clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
}
.defult-btn a svg{
    margin-left: 10px;
}

.auto-container {
    position: static;
    max-width: var(--container-width);
    padding: 0px 15px;
    margin: 0 auto;
    width: 100%;
}
/* Default Background */

*::-moz-selection {
    background: var(--primary-color);
    color: var(--color-white);
    text-shadow: none;
}

::-moz-selection {
    background: var(--primary-color);
    color: var(--color-white);
    text-shadow: none;
}

::selection {
    background: var(--primary-color);
    color: var(--color-white);
    text-shadow: none;
}
::placeholder {
    font-size: 16px;
    color: var(--color-white);
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--color-white);
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--color-white);
}

:-ms-input-placeholder {
    /* IE 10+ */

    color: var(--color-white);
}

:-moz-placeholder {
    /* Firefox 18- */

     color: var(--color-white);
}

/* Contact Area */
.counter_area ::-moz-selection {
    color: #001d23;
    text-shadow: none;
}

.contact_area ::-moz-selection {
    color: #001d23;
    text-shadow: none;
}

.contact_area ::selection {
    color: #001d23;
    text-shadow: none;
}

.contact_area ::placeholder {
    color: #001d23;
    font-size: 16px;
}

.contact_area ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #001d23;
}

.contact_area ::-moz-placeholder {
    /* Firefox 19+ */
    color: #001d23;
}

.contact_area :-ms-input-placeholder {
    /* IE 10+ */
    color: #001d23;
}

.contact_area :-moz-placeholder {
    /* Firefox 18- */
    color: #001d23;
}

.blog_reply ::-moz-selection {
    color: #151948;
}

.blog_reply ::-moz-selection {
    color: #151948;
}

.blog_reply ::selection {
    color: #151948;
}

.blog_reply::placeholder {
    color: #151948;
}

.blog_reply ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #151948;
}

.blog_reply ::-moz-placeholder {
    /* Firefox 19+ */
    color: #151948;
}

.blog_reply :-ms-input-placeholder {
    /* IE 10+ */
    color: #151948;
}

.blog_reply :-moz-placeholder {
    /* Firefox 18- */
    color: #151948;
}
.border_bg {
    border-bottom: 1px solid #cccdd894;
    padding-bottom: 120px;
}
.m-l-50 {
    margin-left: 50px;
}

/* Padding Top Css */
.pt-10{
    padding-top: 10px;
}
.pt-30{
    padding-top: 30px;
}
.pt-22{
    padding-top: 22px;
}


/* padding bottom css */

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-70 {
    padding-bottom: 70px;
}

.pl-130 {
    padding-left: 130px;
}

.pr-0{
    padding-right: 0px;
}

.pl-0{
    padding-left: 0px;
}

.pl-40 {
    padding-left: 40px;
}

.pr-40 {
    padding-right: 40px;
}

/* Fix: service card thumbnails (Realtime Notifications / User's Profile / Realtime Reports etc.)
   render at native image size and get clipped by the card's overflow:hidden. Scale them to the card width instead. */
.service-thumb {
    overflow: hidden;
    border-radius: 10px;
}

.service-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==================================================
   Transformation Journey Section (Değerlendir -> Analiz Et ->
   Planla ve Önceliklendir -> Uygula & Takip Et -> Anlık Ölç)
================================================== */
.transformation-journey-section {
    padding: 120px 0 110px;
    background: linear-gradient(180deg, var(--bg-color1) 0%, #ffffff 100%);
    overflow: hidden;
}

.tj-panel {
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-color4) 100%);
    border: 1px solid #13140E14;
    border-radius: 28px;
    padding: 50px 40px 34px;
    box-shadow: 0px 20px 60px 0px #13140E0D;
}

.tj-flow {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.tj-stage {
    background: #fff;
    border: 1px solid #13140E1A;
    border-radius: 20px;
    box-shadow: 0px 10px 40px 0px #13140E0D;
    padding: 26px 22px;
    flex: 1 1 240px;
    max-width: 264px;
    transition: transform .4s ease, box-shadow .4s ease;
}

.tj-stage:hover {
    transform: translateY(-8px);
    box-shadow: 0px 20px 45px 0px #13140E1F;
}

.tj-stage-hub,
.tj-stage-measure {
    max-width: 296px;
}

.tj-stage-head h3 {
    font-size: 21px;
    line-height: 27px;
    margin-bottom: 6px;
    color: var(--title-color);
}

.tj-stage-head p {
    font-size: 13px;
    line-height: 19px;
    color: var(--text-color);
    margin-bottom: 20px;
}

.tj-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--title-color);
    opacity: .35;
    font-size: 16px;
    flex: 0 0 auto;
    align-self: center;
    animation: tjArrowNudge 1.6s ease-in-out infinite;
}

@keyframes tjArrowNudge {
    0%, 100% {
        transform: translateX(0);
        opacity: .35;
    }
    50% {
        transform: translateX(6px);
        opacity: .8;
    }
}

/* Stage 1: Değerlendir - pill list */
.tj-pill-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--color-white4);
    border-radius: 30px;
    padding: 8px 8px 8px 16px;
    margin-bottom: 10px;
    transition: transform .3s ease, background .3s ease;
}

.tj-pill-list li:last-child {
    margin-bottom: 0;
}

.tj-pill-list li:hover {
    transform: translateX(6px);
    background: var(--bg-color3);
}

.tj-pill-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--title-color);
}

.tj-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .4px;
    transition: transform .3s ease;
}

.tj-pill-list li:hover .tj-pill-badge {
    transform: scale(1.12);
}

.tj-badge-blue { background: #72BBFF; }
.tj-badge-green { background: #8BC34A; }
.tj-badge-teal { background: #4FD1C5; }
.tj-badge-purple { background: #7C8FF5; }

/* Stage 2: Analiz Et */
.tj-analyze-card {
    background: linear-gradient(180deg, #FFF7EC 0%, #FFEFDB 100%);
    border-radius: 16px;
    padding: 20px;
    transition: transform .35s ease;
}

.tj-stage-analyze:hover .tj-analyze-card {
    transform: translateY(-4px);
}

.tj-analyze-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FF9A3D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 14px;
    transition: transform .4s ease;
}

.tj-stage-analyze:hover .tj-analyze-icon {
    transform: rotate(-8deg) scale(1.08);
}

.tj-analyze-card h4 {
    font-size: 14px;
    line-height: 19px;
    margin-bottom: 8px;
    color: var(--title-color);
}

.tj-analyze-card p {
    font-size: 12px;
    line-height: 18px;
    color: var(--text-color);
}

/* Stage 3: Planla ve Önceliklendir - hub */
.tj-hub {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 14px auto 26px;
}

.tj-hub-ring {
    position: absolute;
    inset: 0;
    border: 2px dashed var(--primary-color);
    border-radius: 50%;
    animation: tjSpin 22s linear infinite;
    transition: border-color .3s ease, animation-duration .3s ease;
}

.tj-hub:hover .tj-hub-ring {
    animation-duration: 7s;
    border-color: #97CB2E;
}

@keyframes tjSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

.tj-hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 30px #13140E1A;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    animation: float 4s ease-in-out infinite;
}

.tj-hub-center img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.tj-hub-node {
    position: absolute;
    width: 92px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.tj-hub-node i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 8px 18px #13140E1F;
    transition: transform .35s ease, box-shadow .35s ease;
}

.tj-hub-node span {
    font-size: 11px;
    font-weight: 600;
    color: var(--title-color);
    line-height: 14px;
}

.tj-hub-node:hover i,
.tj-hub-node:focus i {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 12px 22px #13140E33;
}

.tj-node-top { top: -14px; left: 50%; transform: translateX(-50%); }
.tj-node-bottom { bottom: -14px; left: 50%; transform: translateX(-50%); }
.tj-node-left { left: -22px; top: 50%; transform: translateY(-50%); }
.tj-node-right { right: -22px; top: 50%; transform: translateY(-50%); }

.tj-node-blue i { background: #72BBFF; }
.tj-node-purple i { background: #C07BEA; }
.tj-node-green i { background: #8BC34A; }
.tj-node-pink i { background: #F07AA8; }

.tj-node-tip {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 160px;
    transform: translateX(-50%) translateY(6px);
    background: var(--title-color);
    color: #fff;
    font-size: 11px;
    line-height: 15px;
    padding: 8px 10px;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 5;
}

.tj-hub-node:hover .tj-node-tip,
.tj-hub-node:focus .tj-node-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Stage 4: Uygula & Takip Et */
.tj-implement-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-white4);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: background .3s ease, transform .3s ease;
}

.tj-implement-card:last-child {
    margin-bottom: 0;
}

.tj-implement-card .tj-implement-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-color);
    color: var(--title-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: transform .35s ease;
}

.tj-implement-card span {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--title-color);
}

.tj-implement-arrow {
    color: var(--text-color);
    transition: transform .3s ease, color .3s ease;
}

.tj-implement-card:hover {
    background: var(--bg-color3);
    transform: translateX(6px);
}

.tj-implement-card:hover .tj-implement-icon {
    transform: rotate(15deg);
}

.tj-implement-card:hover .tj-implement-arrow {
    transform: translateX(4px);
    color: var(--title-color);
}

/* Stage 5: Anlık Ölç */
.tj-measure-panel li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    border-radius: 12px;
    margin-bottom: 4px;
    transition: background .3s ease;
}

.tj-measure-panel li:not(.tj-measure-muted):hover {
    background: var(--bg-color3);
}

.tj-measure-panel li i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color2);
    font-size: 13px;
    flex: 0 0 auto;
    transition: transform .3s ease;
}

.tj-measure-panel li:hover i {
    transform: scale(1.15);
}

.tj-icon-green { color: #8BC34A; }
.tj-icon-orange { color: #FFB020; }
.tj-icon-purple { color: #7C8FF5; }

.tj-measure-muted { opacity: .5; }
.tj-measure-muted span { font-size: 12px; color: var(--text-color); }

.tj-measure-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tj-measure-info strong {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--title-color);
}

.tj-trend-up {
    font-size: 11px;
    font-weight: 700;
    color: #3FA34D;
}

.tj-trend-up i {
    width: auto;
    height: auto;
    background: none;
    padding: 0;
    margin-right: 2px;
}

/* Stepper */
.tj-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.tj-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    transition: background .3s ease;
}

.tj-step:hover {
    background: var(--bg-color3);
}

.tj-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D9D9D9;
    transition: transform .3s ease, background .3s ease;
}

.tj-step.active .tj-dot,
.tj-step:hover .tj-dot {
    background: var(--primary-color);
    transform: scale(1.3);
}

.tj-step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.tj-step.active .tj-step-label {
    color: var(--title-color);
}

.tj-step-line {
    width: 36px;
    height: 1px;
    background: repeating-linear-gradient(to right, #13140E33 0 4px, transparent 4px 8px);
}

/* Panel footer */
.tj-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #13140E14;
}

.tj-keywords {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-color);
}

.tj-tagline {
    font-size: 15px;
    font-style: italic;
    color: var(--title-color);
}

@media (max-width: 1199px) {
    .tj-flow { gap: 12px; }
    .tj-arrow { display: none; }
}

@media (max-width: 767px) {
    .transformation-journey-section { padding: 80px 0 70px; }
    .tj-panel { padding: 34px 20px 24px; }
    .tj-stage { max-width: 100%; flex-basis: 100%; }
    .tj-hub { margin: 10px auto 30px; }
    .tj-node-left { left: 0; }
    .tj-node-right { right: 0; }
    .tj-panel-footer { justify-content: center; text-align: center; }
}


/*----------  Inner page header (all pages except home)  ----------*/
.inner-header .header-menu ul li a,
.inner-header .header-menu ul li a i,
.inner-header .search-box-btn.search-box-outer i {
    color: var(--color-white);
}
.inner-header .header-btn a {
    background: var(--color-white);
    color: var(--color-black3);
}
.inner-header .header-btn a::before {
    background: var(--color-black3);
}
.inner-header .header-btn a:hover,
.inner-header.sticky .header-btn a:hover {
    color: var(--color-white);
}

/* Top-level menu hover. The theme turns hovered links white, which disappears on the light
   home hero slides. Keep the text colour and mark the hovered item with a bar instead:
   a thin underline, lime on dark headers (inner pages, sticky) and dark on the home header,
   whose slides can be lime or white. li:hover keeps the mark while its dropdown is open. */
.header-menu > ul > li > a::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 12px;
    right: 12px;
    bottom: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s;
}
.header-menu > ul > li:hover > a::after {
    transform: scaleX(1);
}
.saasytech-header-area:not(.inner-header):not(.sticky) .header-menu > ul > li:hover > a,
.saasytech-header-area:not(.inner-header):not(.sticky) .header-menu > ul > li:hover > a i {
    color: var(--title-color);
}
.saasytech-header-area:not(.inner-header):not(.sticky) .header-menu > ul > li > a::after {
    background: var(--title-color);
}
.inner-header .header-menu > ul > li:hover > a,
.inner-header .header-menu > ul > li:hover > a i {
    color: var(--color-white);
}

/* dropdown items are full product names: keep "ve" lowercase (theme capitalizes menu links) */
.header-menu ul .sub_menu li a {
    text-transform: none;
}

/* Mobile menu (meanmenu moves the list out of .header-menu): same names as the desktop
   dropdowns, sub items indented under their parent */
/* theme's ".sticky .sub_menu li a" padding is !important and the mobile bar is .sticky too */
.mean-container .mean-nav ul li li a {
    position: relative;
    float: none;
    width: auto;
    /* top-level items use a 5% side padding (meanmenu) */
    padding-left: calc(5% + 18px) !important;
    background: var(--color-white4);
    text-transform: none;
    opacity: 1;
    color: var(--text-color);
}
.mean-container .mean-nav ul li li a::before {
    content: "";
    position: absolute;
    left: 5%;
    top: 1.45em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 2px var(--title-color);
}

/* Desktop header: six top-level items. Logo and right block take their natural width,
   the menu gets the rest and stays on one line */
@media (min-width: 992px) {
    .header-saas > div:first-child,
    .header-saas > div:last-child {
        flex: 0 0 auto;
        width: auto;
    }
    .header-saas > div:nth-child(2) {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .header-saas .header-menu .nav_scroll {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        white-space: nowrap;
    }
    .header-saas .header-menu .nav_scroll .sub_menu {
        white-space: normal;
    }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .header-saas .header-menu ul li a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 15px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .header-saas .header-menu > ul > li > a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 14px;
    }
    .header-saas .header-right {
        gap: 14px;
    }
    .header-saas .header-logo img {
        max-width: 120px;
    }
}


/*----------  DIMA page: intro + bento feature grid  ----------*/
.dima-intro {
    margin-bottom: 30px;
}
.dima-intro-desc {
    font-size: 17px;
    line-height: 28px;
    color: var(--text-color);
    margin: 0 0 20px;
}

.service-section.style-two .dima-bento .service-single-box {
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
    padding: 32px;
    border-radius: 24px;
    transition: box-shadow .5s, border-color .5s;
}
.service-section.style-two .dima-bento .service-single-box::after,
.service-section.style-two .dima-bento .service-single-box::before {
    border-radius: 24px;
}
.service-section.style-two .dima-bento .service-single-box:hover {
    border-color: var(--primary-color);
    box-shadow: 0 20px 50px var(--black-op10);
}
.service-section.style-two .dima-bento .service-content {
    padding: 0;
}
.service-section.style-two .dima-bento .service-content h2 {
    margin: 0 0 10px;
}
.service-section.style-two .dima-bento .service-content p {
    color: var(--text-color);
    font-weight: 400;
    margin: 0;
}

.dima-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: auto;
    padding-bottom: 40px;
}
.dima-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 22px;
    transition: .5s;
}
.dima-card:hover .dima-card-icon {
    background: var(--pt-navy, var(--title-color));
    color: var(--primary-color);
}
.dima-card-no {
    font-family: var(--title-font);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--black-op20);
    transition: .5s;
}
.dima-card:hover .dima-card-no {
    -webkit-text-stroke-color: var(--pt-navy, var(--title-color));
}

/* wide card */
.service-section.style-two .dima-bento .dima-card--wide .service-content h2 {
    font-size: 30px;
}
.dima-card-body {
    display: flex;
    gap: 32px;
    height: 100%;
}
.dima-card-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
}
.dima-card-media {
    flex: 1 1 50%;
    align-self: center;
}
.dima-card-media img {
    width: 100%;
    border-radius: 16px;
}
/* card 01: maturity radar across the five dimensions (replaces the demo score image) */
.dima-radar {
    margin: 0;
    padding: 18px 18px 16px;
    border: 1px solid var(--black-op10);
    border-radius: 16px;
    background: var(--color-white);
}
.dima-radar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.dima-radar-head span {
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
}
.dima-radar svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--title-font);
}
.dima-radar-grid polygon,
.dima-radar-grid line {
    fill: none;
    stroke: var(--black-op10);
    stroke-width: 1;
}
.dima-radar-grid polygon:last-of-type {
    stroke: var(--black-op20);
}
.dima-radar-levels text {
    font-size: 9px;
    fill: var(--color-gray);
}
.dima-radar-target {
    fill: none;
    stroke: var(--pt-navy, var(--title-color));
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}
.dima-radar-current {
    fill: rgba(212, 247, 114, .55);
    stroke: #9CC435;
    stroke-width: 2;
    stroke-linejoin: round;
}
.dima-radar-dots circle {
    fill: var(--pt-navy, var(--title-color));
    stroke: var(--primary-color);
    stroke-width: 2;
}
.dima-radar-labels text {
    font-size: 13px;
    font-weight: 600;
    fill: var(--title-color);
}
.dima-radar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 6px 0 0;
    padding: 0;
}
.dima-radar-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-color);
}
.dima-radar-legend i {
    display: inline-block;
    width: 18px;
    height: 10px;
    border-radius: 3px;
}
.dima-radar-legend i.is-current {
    background: rgba(212, 247, 114, .55);
    border: 2px solid #9CC435;
}
.dima-radar-legend i.is-target {
    height: 0;
    border-top: 2px dashed var(--pt-navy, var(--title-color));
    border-radius: 0;
}

.dima-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.dima-chips li {
    padding: 6px 16px;
    border: 1px solid var(--black-op15);
    border-radius: 30px;
    background: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
}

/* dark card */
.service-section.style-two .dima-bento .service-single-box.dima-card--dark {
    background: var(--pt-panel, var(--title-color));
    border-color: var(--pt-navy, var(--title-color));
}
.service-section.style-two .dima-bento .service-single-box.dima-card--dark::after {
    background: linear-gradient(120deg, rgba(212, 247, 114, 0.1), rgba(212, 247, 114, 0.6), rgba(212, 247, 114, 0.1));
}
.service-section.style-two .dima-bento .dima-card--dark .service-content h2 {
    color: var(--color-white);
}
.service-section.style-two .dima-bento .dima-card--dark .service-content p {
    color: var(--white-op70);
}
.dima-card--dark .dima-card-no {
    -webkit-text-stroke-color: var(--white-op25);
}
.dima-card--dark:hover .dima-card-no {
    -webkit-text-stroke-color: var(--primary-color);
}
.dima-card--dark:hover .dima-card-icon {
    background: var(--color-white);
    color: var(--title-color);
}

.dima-steps {
    display: flex;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.dima-steps li {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--white-op15);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}
.dima-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .dima-card-body {
        flex-direction: column-reverse;
    }
    .dima-steps {
        flex-direction: column;
    }
    .service-section.style-two .dima-bento .dima-card--wide .service-content h2 {
        font-size: 24px;
    }
}

/* DIMA / SUMA / CAFA / WAFA / MedIQ / CORIS: CTA sits directly above the footer, keep a gap below it */
.call-to-action.dima-cta,
.call-to-action.suma-cta,
.call-to-action.cafa-cta,
.call-to-action.wafa-cta,
.call-to-action.mediq-cta,
.call-to-action.coris-cta,
.call-to-action.ddx-cta {
    padding-bottom: 120px;
}
@media (max-width: 991px) {
    .call-to-action.dima-cta,
    .call-to-action.suma-cta,
    .call-to-action.cafa-cta,
    .call-to-action.wafa-cta,
    .call-to-action.mediq-cta,
    .call-to-action.coris-cta,
    .call-to-action.ddx-cta {
        padding-bottom: 80px;
    }
}


/*----------  SUMA page  ----------*/

/* intro description: theme caps centered desc at 48%, widen it here */
.suma-page .sec-title.text-center .section-desc p {
    width: 80%;
}

/* keywords strip */
.suma-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    margin: -10px 0 70px;
    padding: 0;
}
.suma-keywords li {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--title-color);
}
.suma-keywords li + li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 3px var(--bg-color3);
}

/* process flow */
.suma-flow {
    position: relative;
    margin-bottom: 100px;
}
.suma-flow::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 17%;
    right: 17%;
    border-top: 2px dashed var(--black-op15);
}
.suma-flow-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}
.suma-flow-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 28px;
    box-shadow: 0 0 0 10px var(--color-white);
    margin-bottom: 22px;
    transition: .5s;
}
.suma-flow-step:hover .suma-flow-icon {
    background: var(--pt-navy, var(--title-color));
    color: var(--primary-color);
}
.suma-flow-no {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-gray);
    margin-bottom: 6px;
}
.suma-flow-step h3 {
    font-size: 26px;
    font-weight: 600;
    color: var(--title-color);
    margin: 0 0 10px;
}
.suma-flow-step p {
    max-width: 330px;
    margin: 0 auto;
    color: var(--text-color);
}

/* features: sticky aside + list */
.suma-features-aside {
    position: sticky;
    top: 120px;
}
.suma-features-aside .sec-title {
    margin-bottom: 30px;
}

.service-section.style-two.suma-page .service-single-box {
    border-radius: 24px;
}
.service-section.style-two.suma-page .service-single-box::after,
.service-section.style-two.suma-page .service-single-box::before {
    border-radius: 24px;
}
.service-section.style-two.suma-page .service-content {
    padding: 0;
}
.service-section.style-two.suma-page .service-content p {
    margin: 0;
    font-weight: 400;
    color: var(--text-color);
}

.service-section.style-two.suma-page .service-single-box.suma-dimensions {
    padding: 34px;
    background: var(--pt-panel, var(--title-color));
    border-color: var(--pt-navy, var(--title-color));
}
.service-section.style-two.suma-page .service-single-box.suma-dimensions::after {
    background: linear-gradient(120deg, rgba(212, 247, 114, 0.1), rgba(212, 247, 114, 0.6), rgba(212, 247, 114, 0.1));
}
.service-section.style-two.suma-page .suma-dimensions .service-content h2 {
    color: var(--color-white);
    margin-bottom: 10px;
}
.service-section.style-two.suma-page .suma-dimensions .service-content p {
    color: var(--white-op70);
}
.suma-dimension-list {
    margin: 22px 0 0;
    padding: 0;
}
.suma-dimension-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--white-op10);
    font-size: 17px;
    font-weight: 500;
    color: var(--color-white);
}
.suma-dimension-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.suma-dimension-list li i {
    width: 22px;
    text-align: center;
    color: var(--primary-color);
}

.service-section.style-two.suma-page .service-single-box.suma-feature {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 30px;
    margin-bottom: 20px;
    transition: border-color .5s, box-shadow .5s;
}
.service-section.style-two.suma-page .service-single-box.suma-feature:last-child {
    margin-bottom: 0;
}
.service-section.style-two.suma-page .service-single-box.suma-feature:hover {
    border-color: var(--primary-color);
    box-shadow: 0 16px 40px var(--black-op10);
}
.suma-feature-icon {
    flex: 0 0 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--bg-color3);
    border: 1px solid var(--primary-color);
    color: var(--title-color);
    font-size: 22px;
    transition: .5s;
}
.suma-feature:hover .suma-feature-icon {
    background: var(--primary-color);
}
.service-section.style-two.suma-page .suma-feature .service-content h2 {
    margin: 2px 0 6px;
}

/* reporting frameworks panel */
.suma-frameworks {
    position: relative;
    overflow: hidden;
    margin-top: 100px;
    padding: 70px 60px;
    border-radius: 30px;
    background: var(--pt-panel, var(--title-color));
}
.suma-frameworks::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(212, 247, 114, 0.16) 0%, transparent 60%);
    pointer-events: none;
}
.suma-frameworks .row {
    position: relative;
    z-index: 1;
}
.suma-frameworks-points {
    margin: 0;
    padding: 0;
}
.suma-frameworks-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 26px;
    color: var(--white-op70);
}
.suma-frameworks-points li i {
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 13px;
}

.suma-framework-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.suma-framework {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 130px;
    padding: 16px;
    border: 1px solid var(--white-op15);
    border-radius: 20px;
    background: var(--white-op5);
    text-align: center;
    transition: background .5s, border-color .5s;
}
.suma-framework:nth-child(n+4) {
    grid-column: span 3;
}
.suma-framework strong {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
    transition: .5s;
}
.suma-framework span {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    transition: .5s;
}
.suma-framework:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.suma-framework:hover strong,
.suma-framework:hover span {
    color: var(--title-color);
}

.suma-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    margin-top: 24px;
}
.suma-formula span {
    padding: 9px 18px;
    border: 1px solid var(--white-op20);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-white);
}
.suma-formula span.is-result {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--title-color);
    font-weight: 600;
}
.suma-formula i {
    color: var(--primary-color);
    font-size: 13px;
}

/* SUMA responsive */
@media (max-width: 991px) {
    .suma-page .sec-title.text-center .section-desc p {
        width: 100%;
    }
    .suma-keywords {
        margin-bottom: 50px;
    }

    /* flow becomes a vertical timeline */
    .suma-flow {
        margin-bottom: 60px;
    }
    .suma-flow::before {
        display: none;
    }
    .suma-flow-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 18px;
        text-align: left;
        padding: 0 0 30px;
    }
    .suma-flow-step::before {
        content: "";
        position: absolute;
        left: 27px;
        top: 56px;
        bottom: 0;
        border-left: 2px dashed var(--black-op15);
    }
    .suma-flow > div:last-child .suma-flow-step {
        padding-bottom: 0;
    }
    .suma-flow > div:last-child .suma-flow-step::before {
        display: none;
    }
    .suma-flow-icon {
        grid-row: 1 / span 3;
        width: 56px;
        height: 56px;
        font-size: 20px;
        box-shadow: none;
        margin: 0;
    }
    .suma-flow-step h3 {
        font-size: 22px;
        margin-bottom: 6px;
    }
    .suma-flow-step p {
        max-width: none;
        margin: 0;
    }

    .suma-features-aside {
        position: static;
        margin-bottom: 20px;
    }

    .suma-frameworks {
        margin-top: 60px;
        padding: 50px 30px;
    }
    .suma-frameworks-points {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .suma-keywords {
        gap: 8px 14px;
    }
    .suma-keywords li {
        gap: 14px;
        font-size: 13px;
    }

    .service-section.style-two.suma-page .service-single-box.suma-dimensions {
        padding: 26px 22px;
    }
    .service-section.style-two.suma-page .service-single-box.suma-feature {
        flex-direction: column;
        gap: 16px;
        padding: 24px 22px;
    }
    .suma-feature-icon {
        flex-basis: auto;
        width: 50px;
        height: 50px;
        font-size: 19px;
    }
    .service-section.style-two.suma-page .service-content h2 {
        font-size: 20px;
    }

    .suma-frameworks {
        padding: 40px 20px;
        border-radius: 20px;
    }
    .suma-framework-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .suma-framework,
    .suma-framework:nth-child(n+4) {
        grid-column: span 1;
        min-height: 100px;
    }
    .suma-framework:last-child {
        grid-column: span 2;
    }
    .suma-framework strong {
        font-size: 26px;
    }
    .suma-formula {
        flex-direction: column;
    }
}


/*----------  CAFA page  ----------*/

/* intro description: theme caps centered desc at 48%, widen it here */
.cafa-page .sec-title.text-center .section-desc p {
    width: 80%;
}

/* keywords strip */
.cafa-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    margin: -10px 0 70px;
    padding: 0;
}
.cafa-keywords li {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--title-color);
}
.cafa-keywords li + li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 3px var(--bg-color3);
}

/* process flow */
.cafa-flow {
    position: relative;
    margin-bottom: 100px;
}
.cafa-flow::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 17%;
    right: 17%;
    border-top: 2px dashed var(--black-op15);
}
.cafa-flow-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}
.cafa-flow-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 28px;
    box-shadow: 0 0 0 10px var(--color-white);
    margin-bottom: 22px;
    transition: .5s;
}
.cafa-flow-step:hover .cafa-flow-icon {
    background: var(--pt-navy, var(--title-color));
    color: var(--primary-color);
}
.cafa-flow-no {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-gray);
    margin-bottom: 6px;
}
.cafa-flow-step h3 {
    font-size: 26px;
    font-weight: 600;
    color: var(--title-color);
    margin: 0 0 10px;
}
.cafa-flow-step p {
    max-width: 330px;
    margin: 0 auto;
    color: var(--text-color);
}

/* shared card overrides */
.service-section.style-two.cafa-page .service-single-box {
    border-radius: 24px;
}
.service-section.style-two.cafa-page .service-single-box::after,
.service-section.style-two.cafa-page .service-single-box::before {
    border-radius: 24px;
}
.service-section.style-two.cafa-page .service-content {
    padding: 0;
}
.service-section.style-two.cafa-page .service-content p {
    margin: 0;
    font-weight: 400;
    color: var(--text-color);
}

/* scope cards */
.cafa-scopes {
    margin-bottom: 70px;
}
.service-section.style-two.cafa-page .service-single-box.cafa-scope {
    height: calc(100% - 30px);
    padding: 32px 30px;
    transition: border-color .5s, box-shadow .5s;
}
.service-section.style-two.cafa-page .service-single-box.cafa-scope:hover {
    border-color: var(--primary-color);
    box-shadow: 0 16px 40px var(--black-op10);
}
.cafa-scope-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.cafa-scope-no {
    padding: 7px 16px;
    border-radius: 30px;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.cafa-scope-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--black-op15);
    color: var(--title-color);
    font-size: 22px;
    transition: .5s;
}
.cafa-scope:hover .cafa-scope-icon {
    background: var(--pt-navy, var(--title-color));
    border-color: var(--pt-navy, var(--title-color));
    color: var(--primary-color);
}
.service-section.style-two.cafa-page .cafa-scope .service-content h2 {
    margin-bottom: 10px;
}
.service-section.style-two.cafa-page .service-single-box.cafa-scope.is-dark {
    background: var(--pt-panel, var(--title-color));
    border-color: var(--pt-navy, var(--title-color));
}
.service-section.style-two.cafa-page .service-single-box.cafa-scope.is-dark::after {
    background: linear-gradient(120deg, rgba(212, 247, 114, 0.1), rgba(212, 247, 114, 0.6), rgba(212, 247, 114, 0.1));
}
.service-section.style-two.cafa-page .cafa-scope.is-dark .service-content h2 {
    color: var(--color-white);
}
.service-section.style-two.cafa-page .cafa-scope.is-dark .service-content p {
    color: var(--white-op70);
}
.cafa-scope.is-dark .cafa-scope-icon {
    border-color: var(--white-op20);
    color: var(--primary-color);
}
.cafa-scope.is-dark:hover .cafa-scope-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--title-color);
}

/* feature grid */
.service-section.style-two.cafa-page .service-single-box.cafa-feature {
    height: calc(100% - 30px);
    padding: 30px;
    transition: border-color .5s, box-shadow .5s;
}
.service-section.style-two.cafa-page .service-single-box.cafa-feature:hover {
    border-color: var(--primary-color);
    box-shadow: 0 16px 40px var(--black-op10);
}
.cafa-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--bg-color3);
    border: 1px solid var(--primary-color);
    color: var(--title-color);
    font-size: 22px;
    margin-bottom: 22px;
    transition: .5s;
}
.cafa-feature:hover .cafa-feature-icon {
    background: var(--primary-color);
}
.service-section.style-two.cafa-page .cafa-feature .service-content h2 {
    margin-bottom: 8px;
}

/* Rota strip */
.cafa-rota {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 30px;
    border: 1px solid var(--primary-color);
    border-radius: 24px;
    background: var(--bg-color3);
}
.cafa-rota-icon {
    flex: 0 0 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pt-navy, var(--title-color));
    color: var(--primary-color);
    font-size: 24px;
}
.cafa-rota-text {
    flex: 1;
}
.cafa-rota-text h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--title-color);
    margin: 0 0 4px;
}
.cafa-rota-text p {
    margin: 0;
    color: var(--text-color);
}
.cafa-rota-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.cafa-rota-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
    white-space: nowrap;
}
.cafa-rota-steps li + li::before {
    content: "\f061";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--color-gray);
}

/* standards panel */
.cafa-standards {
    position: relative;
    overflow: hidden;
    margin-top: 100px;
    padding: 70px 60px;
    border-radius: 30px;
    background: var(--pt-panel, var(--title-color));
}
.cafa-standards::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(212, 247, 114, 0.16) 0%, transparent 60%);
    pointer-events: none;
}
.cafa-standards .row {
    position: relative;
    z-index: 1;
}
.cafa-standards-points {
    margin: 0;
    padding: 0;
}
.cafa-standards-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 26px;
    color: var(--white-op70);
}
.cafa-standards-points li i {
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 13px;
}

.cafa-standard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.cafa-standard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 130px;
    padding: 22px 24px;
    border: 1px solid var(--white-op15);
    border-radius: 20px;
    background: var(--white-op5);
    transition: background .5s, border-color .5s;
}
.cafa-standard strong {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-white);
    transition: .5s;
}
.cafa-standard span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--primary-color);
    transition: .5s;
}
.cafa-standard:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.cafa-standard:hover strong,
.cafa-standard:hover span {
    color: var(--title-color);
}

.cafa-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    margin-top: 24px;
}
.cafa-formula span {
    padding: 9px 18px;
    border: 1px solid var(--white-op20);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-white);
}
.cafa-formula span.is-result {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--title-color);
    font-weight: 600;
}
.cafa-formula i {
    color: var(--primary-color);
    font-size: 13px;
}

/* CAFA responsive */
@media (max-width: 991px) {
    .cafa-page .sec-title.text-center .section-desc p {
        width: 100%;
    }
    .cafa-keywords {
        margin-bottom: 50px;
    }

    /* flow becomes a vertical timeline */
    .cafa-flow {
        margin-bottom: 60px;
    }
    .cafa-flow::before {
        display: none;
    }
    .cafa-flow-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 18px;
        text-align: left;
        padding: 0 0 30px;
    }
    .cafa-flow-step::before {
        content: "";
        position: absolute;
        left: 27px;
        top: 56px;
        bottom: 0;
        border-left: 2px dashed var(--black-op15);
    }
    .cafa-flow > div:last-child .cafa-flow-step {
        padding-bottom: 0;
    }
    .cafa-flow > div:last-child .cafa-flow-step::before {
        display: none;
    }
    .cafa-flow-icon {
        grid-row: 1 / span 3;
        width: 56px;
        height: 56px;
        font-size: 20px;
        box-shadow: none;
        margin: 0;
    }
    .cafa-flow-step h3 {
        font-size: 22px;
        margin-bottom: 6px;
    }
    .cafa-flow-step p {
        max-width: none;
        margin: 0;
    }

    .cafa-scopes {
        margin-bottom: 40px;
    }

    .cafa-rota {
        flex-wrap: wrap;
    }
    .cafa-rota-steps {
        flex: 0 0 100%;
        flex-wrap: wrap;
    }

    .cafa-standards {
        margin-top: 60px;
        padding: 50px 30px;
    }
    .cafa-standards-points {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .cafa-keywords {
        gap: 8px 14px;
    }
    .cafa-keywords li {
        gap: 14px;
        font-size: 13px;
    }

    .service-section.style-two.cafa-page .service-single-box.cafa-scope,
    .service-section.style-two.cafa-page .service-single-box.cafa-feature {
        height: auto;
        padding: 24px 22px;
    }
    .cafa-scope-head {
        margin-bottom: 26px;
    }
    .service-section.style-two.cafa-page .service-content h2 {
        font-size: 20px;
    }

    .cafa-rota {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px;
    }
    .cafa-rota-icon {
        flex-basis: auto;
    }

    .cafa-standards {
        padding: 40px 20px;
        border-radius: 20px;
    }
    .cafa-standard-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cafa-standard {
        min-height: 0;
    }
    .cafa-standard strong {
        font-size: 22px;
    }
    .cafa-formula {
        flex-direction: column;
    }
}


/* Product pages CTA: product box instead of the theme character image
   (lime outline + glow are baked into images/products/*-box.webp) */
.cta-product-visual {
    position: relative;
    max-width: 320px;
    margin: 20px 60px 10px auto;
}
.cta-product-visual::before {
    content: "";
    position: absolute;
    inset: 10% -15%;
    background: radial-gradient(circle, rgba(212, 247, 114, 0.22) 0%, transparent 65%);
    pointer-events: none;
}
.cta-product-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    animation: product-float 4s ease-in-out infinite alternate;
}
@keyframes product-float {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
    .cta-product-box {
        animation: none;
    }
}
@media (max-width: 991px) {
    .cta-product-visual {
        max-width: 250px;
        margin: 30px auto 20px;
    }
}
@media (max-width: 767px) {
    .cta-product-visual {
        max-width: 230px;
        margin: 40px auto 30px;
    }
}


/*----------  WAFA page  ----------*/

.wafa-page {
    --wafa-water: #7ED6E8;
}
.wafa-page .wafa-intro,
.wafa-page .wafa-dimensions,
.wafa-page .wafa-features,
.wafa-page .wafa-cycle-wrap {
    margin-bottom: 100px;
}

/* intro */
.wafa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
}
.wafa-tags li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--black-op10);
    border-radius: 30px;
    background: var(--bg-color1);
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
    transition: .4s;
}
.wafa-tags li i {
    color: var(--title-color);
    font-size: 13px;
}
.wafa-tags li:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* animated water drop */
.wafa-drop-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}
.wafa-drop {
    position: relative;
    flex: 0 0 auto;
    width: 230px;
    height: 230px;
    margin-top: 40px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    overflow: hidden;
    background: var(--pt-panel, var(--title-color));
    box-shadow: 0 30px 60px var(--black-op20), inset 0 0 0 6px var(--white-op10);
}
/* counter-rotate so the water level stays horizontal inside the rotated drop */
.wafa-drop-water {
    position: absolute;
    z-index: 0;
    inset: -21%;
    transform: rotate(-45deg);
}
.wafa-wave {
    position: absolute;
    left: -60%;
    top: 42%;
    width: 220%;
    height: 220%;
    border-radius: 42%;
    background: var(--primary-color);
    animation: wafa-wave 10s linear infinite;
}
.wafa-wave.is-back {
    z-index: -1;
    top: 34%;
    background: var(--wafa-water);
    opacity: .45;
    animation-duration: 14s;
    animation-direction: reverse;
}
@keyframes wafa-wave {
    to { transform: rotate(360deg); }
}
.wafa-drop-steps {
    margin: 0;
    padding: 0;
}
.wafa-drop-steps li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--black-op15);
    font-size: 24px;
    font-weight: 600;
    color: var(--title-color);
}
.wafa-drop-steps li:last-child {
    border-bottom: 0;
}
.wafa-drop-steps li span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-gray);
}

/* shared card overrides */
.service-section.style-two.wafa-page .service-single-box {
    border-radius: 24px;
}
.service-section.style-two.wafa-page .service-single-box::after,
.service-section.style-two.wafa-page .service-single-box::before {
    border-radius: 24px;
}
.service-section.style-two.wafa-page .service-content {
    padding: 0;
}
.service-section.style-two.wafa-page .service-content p {
    margin: 0;
    font-weight: 400;
    color: var(--text-color);
}

/* assessment dimensions */
.service-section.style-two.wafa-page .service-single-box.wafa-dim {
    position: relative;
    overflow: hidden;
    height: calc(100% - 30px);
    padding: 34px 30px;
    transition: border-color .5s, box-shadow .5s;
}
.service-section.style-two.wafa-page .service-single-box.wafa-dim::before {
    content: "";
    display: block;
    position: absolute;
    inset: auto -20% -70% auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 214, 232, .25) 0%, transparent 70%);
    box-shadow: none;
    transition: .5s;
}
.service-section.style-two.wafa-page .service-single-box.wafa-dim:hover {
    border-color: var(--primary-color);
    box-shadow: 0 16px 40px var(--black-op10);
}
.service-section.style-two.wafa-page .service-single-box.wafa-dim:hover::before {
    inset: auto -10% -50% auto;
}
.wafa-dim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 26px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: var(--pt-navy, var(--title-color));
    transition: .5s;
}
.wafa-dim-icon i {
    transform: rotate(-45deg);
    color: var(--primary-color);
    font-size: 22px;
}
.wafa-dim:hover .wafa-dim-icon {
    background: var(--primary-color);
}
.wafa-dim:hover .wafa-dim-icon i {
    color: var(--title-color);
}
.service-section.style-two.wafa-page .wafa-dim .service-content {
    position: relative;
}
.service-section.style-two.wafa-page .wafa-dim .service-content h2 {
    margin-bottom: 8px;
}

/* impact panel */
.wafa-impact {
    position: relative;
    overflow: hidden;
    margin-bottom: 100px;
    padding: 70px 60px;
    border-radius: 30px;
    background: var(--pt-panel, var(--title-color));
}
.wafa-impact::before {
    content: "";
    position: absolute;
    left: -15%;
    bottom: -60%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(126, 214, 232, 0.14) 0%, transparent 60%);
    pointer-events: none;
}
.wafa-impact .row {
    position: relative;
    z-index: 1;
}
.wafa-impact-points {
    margin: 0;
    padding: 0;
}
.wafa-impact-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 26px;
    color: var(--white-op70);
}
.wafa-impact-points li i {
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 13px;
}

.wafa-matrix {
    padding: 26px;
    border: 1px solid var(--white-op15);
    border-radius: 24px;
    background: var(--white-op5);
}
.wafa-matrix-row {
    display: grid;
    grid-template-columns: 140px repeat(5, 1fr);
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.wafa-matrix-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
}
.wafa-matrix-label i {
    width: 16px;
    color: var(--primary-color);
}
.wafa-matrix-row > span:not(.wafa-matrix-label) {
    height: 44px;
    border-radius: 10px;
    transition: transform .4s;
}
.wafa-matrix-row > span:not(.wafa-matrix-label):hover {
    transform: scale(1.08);
}
.wafa-matrix .c1 { background: rgba(212, 247, 114, .12); }
.wafa-matrix .c2 { background: rgba(212, 247, 114, .35); }
.wafa-matrix .c3 { background: rgba(212, 247, 114, .65); }
.wafa-matrix .c4 { background: var(--primary-color); }
.wafa-matrix-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--white-op60);
}
.wafa-matrix-legend span:first-child {
    margin-right: 4px;
}
.wafa-matrix-legend span:last-child {
    margin-left: 4px;
}
.wafa-matrix-legend i {
    width: 22px;
    height: 10px;
    border-radius: 3px;
}

/* features: numbered */
.wafa-feature {
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px 28px 28px;
    border-top: 2px solid var(--pt-navy, var(--title-color));
    background: linear-gradient(180deg, var(--bg-color1) 0%, var(--color-white) 100%);
    transition: border-color .5s, background .5s;
}
.wafa-feature:hover {
    border-color: var(--primary-color);
    background: linear-gradient(180deg, var(--bg-color3) 0%, var(--color-white) 100%);
}
.wafa-feature-no {
    display: block;
    margin-bottom: 14px;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--pt-navy, var(--title-color));
    transition: .5s;
}
.wafa-feature:hover .wafa-feature-no {
    color: var(--primary-color);
}
.wafa-feature h3 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--title-color);
    margin: 0 0 8px;
}
.wafa-feature p {
    margin: 0;
    color: var(--text-color);
}

/* continuous cycle */
.wafa-cycle {
    position: relative;
}
.wafa-cycle-step {
    position: relative;
    height: 100%;
    padding: 30px 24px;
    border: 1px solid var(--black-op10);
    border-radius: 24px;
    background: var(--color-white);
    text-align: center;
    transition: border-color .5s, box-shadow .5s;
}
.wafa-cycle > div:not(:last-child) .wafa-cycle-step::after {
    content: "\f061";
    position: absolute;
    top: 50%;
    right: -21px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 12px;
}
.wafa-cycle-step:hover {
    border-color: var(--primary-color);
    box-shadow: 0 16px 40px var(--black-op10);
}
.wafa-cycle-step.is-loop {
    background: var(--pt-panel, var(--title-color));
    border-color: var(--pt-navy, var(--title-color));
}
.wafa-cycle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--bg-color3);
    border: 1px solid var(--primary-color);
    color: var(--title-color);
    font-size: 22px;
}
.wafa-cycle-step.is-loop .wafa-cycle-icon {
    background: var(--primary-color);
}
.wafa-cycle-step.is-loop .wafa-cycle-icon i {
    animation: wafa-wave 6s linear infinite;
}
.wafa-cycle-step h3 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--title-color);
    margin: 0 0 6px;
}
.wafa-cycle-step p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--text-color);
}
.wafa-cycle-step.is-loop h3 {
    color: var(--color-white);
}
.wafa-cycle-step.is-loop p {
    color: var(--white-op70);
}
.wafa-cycle-loop {
    position: relative;
    height: 46px;
    margin: 0 12.5%;
    border: 2px dashed var(--black-op20);
    border-top: 0;
    border-radius: 0 0 30px 30px;
}
.wafa-cycle-loop span {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 30px;
    background: var(--pt-navy, var(--title-color));
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* standards */
.wafa-standards-note {
    margin: 0;
    color: var(--text-color);
}
.wafa-standard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 210px;
    padding: 30px;
    border: 1px solid var(--primary-color);
    border-radius: 24px;
    background: var(--bg-color3);
    transition: background .5s, border-color .5s;
}
.wafa-standard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--pt-navy, var(--title-color));
    color: var(--primary-color);
    font-size: 20px;
}
.wafa-standard strong {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--title-color);
}
.wafa-standard > span:last-child {
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: var(--text-color);
}
.wafa-standard:hover {
    background: var(--pt-panel, var(--title-color));
    border-color: var(--pt-navy, var(--title-color));
}
.wafa-standard:hover .wafa-standard-icon {
    background: var(--primary-color);
    color: var(--title-color);
}
.wafa-standard:hover strong {
    color: var(--color-white);
}
.wafa-standard:hover > span:last-child {
    color: var(--white-op70);
}

@media (prefers-reduced-motion: reduce) {
    .wafa-wave,
    .wafa-cycle-step.is-loop .wafa-cycle-icon i {
        animation: none;
    }
}

/* WAFA responsive */
@media (max-width: 991px) {
    .wafa-page .wafa-intro,
    .wafa-page .wafa-dimensions,
    .wafa-page .wafa-features,
    .wafa-page .wafa-cycle-wrap,
    .wafa-impact {
        margin-bottom: 60px;
    }
    .wafa-drop-wrap {
        justify-content: flex-start;
        margin-top: 40px;
    }
    .wafa-impact {
        padding: 50px 30px;
    }
    .wafa-impact-points {
        margin-bottom: 30px;
    }

    /* cycle: 2x2 grid, arrows and loop line off */
    .wafa-cycle > div {
        margin-bottom: 24px;
    }
    .wafa-cycle > div:not(:last-child) .wafa-cycle-step::after,
    .wafa-cycle-loop {
        display: none;
    }

    .wafa-standards .sec-title {
        margin-bottom: 20px;
    }
    .wafa-standards-note {
        margin-bottom: 30px;
    }
    .wafa-standard {
        margin-bottom: 20px;
        min-height: 0;
    }
}

@media (max-width: 575px) {
    .wafa-drop-wrap {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .wafa-drop {
        width: 170px;
        height: 170px;
        margin-top: 30px;
    }
    .wafa-drop-steps li {
        font-size: 20px;
    }
    .wafa-impact {
        padding: 40px 20px;
        border-radius: 20px;
    }
    .wafa-matrix {
        padding: 18px;
    }
    .wafa-matrix-row {
        grid-template-columns: 100px repeat(5, 1fr);
        gap: 5px;
    }
    .wafa-matrix-label {
        font-size: 12px;
        gap: 6px;
    }
    .wafa-matrix-label i {
        display: none;
    }
    .wafa-matrix-row > span:not(.wafa-matrix-label) {
        height: 34px;
        border-radius: 8px;
    }
    .service-section.style-two.wafa-page .service-single-box.wafa-dim {
        height: auto;
        padding: 26px 22px;
    }
    .service-section.style-two.wafa-page .service-content h2 {
        font-size: 20px;
    }
    .wafa-feature {
        height: auto;
        margin-bottom: 20px;
        padding: 24px 22px;
    }
    .wafa-feature-no {
        font-size: 36px;
    }
}


/*----------  Product page themes (DIMA, SUMA, CAFA, WAFA, MedIQ, CORIS, DDX)  ----------
   Each product view puts .theme-<product> on its breadcrumb, content section and CTA.
   The theme sets colours taken from that product's box; the rules below use them for
   the breadcrumb ground, the CTA ground and the page's dark panels (see each page's CSS). */

.theme-dima {
    /* DIMA box: navy + electric blue */
    --pt-base: #04173F;
    --pt-navy: #07266B;
    --pt-hero:
        radial-gradient(ellipse at 50% 62%, rgba(72, 168, 240, .32) 0%, rgba(72, 168, 240, 0) 45%),
        radial-gradient(circle at 100% 0%, rgba(48, 144, 240, .38) 0%, rgba(48, 144, 240, 0) 40%),
        linear-gradient(160deg, #021338 0%, #07266B 45%, #0D4BB0 78%, #1E78E6 100%);
    --pt-cta:
        radial-gradient(circle at 80% 48%, rgba(72, 168, 240, .40) 0%, rgba(72, 168, 240, 0) 38%),
        radial-gradient(circle at 8% 115%, rgba(48, 144, 240, .40) 0%, rgba(48, 144, 240, 0) 45%),
        linear-gradient(118deg, #021338 0%, #07266B 42%, #0D4BB0 72%, #1E78E6 100%);
    --pt-panel:
        radial-gradient(circle at 100% 0%, rgba(48, 144, 240, .22) 0%, rgba(48, 144, 240, 0) 45%),
        linear-gradient(160deg, #021338 0%, #07266B 58%, #0D4BB0 100%);
    --pt-shadow: rgba(72, 168, 240, .18);
    --pt-box-glow: rgba(144, 192, 240, .28);
    --pt-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%2390C0F0' stroke-opacity='.14'/%3E%3C/svg%3E");
    --pt-pattern-size: 32px 32px;
    --pt-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 190 C210 105 400 275 620 190 S990 80 1200 160' stroke='%2390C0F0' stroke-opacity='.30'/%3E%3Cpath d='M0 235 C230 165 420 295 640 230 S1010 135 1200 205' stroke='%23C0D8F0' stroke-opacity='.18'/%3E%3Cpath d='M0 278 C250 218 445 308 665 268 S1030 188 1200 248' stroke='%23D4F772' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-suma {
    /* SUMA box: forest green + amber */
    --pt-base: #022A22;
    --pt-navy: #03382A;
    --pt-hero:
        radial-gradient(ellipse at 50% 62%, rgba(240, 168, 72, .32) 0%, rgba(240, 168, 72, 0) 45%),
        radial-gradient(circle at 100% 0%, rgba(240, 144, 0, .38) 0%, rgba(240, 144, 0, 0) 40%),
        linear-gradient(160deg, #011A14 0%, #03382A 45%, #0A5236 78%, #136B3E 100%);
    --pt-cta:
        radial-gradient(circle at 80% 48%, rgba(240, 168, 72, .40) 0%, rgba(240, 168, 72, 0) 38%),
        radial-gradient(circle at 8% 115%, rgba(240, 144, 0, .40) 0%, rgba(240, 144, 0, 0) 45%),
        linear-gradient(118deg, #011A14 0%, #03382A 42%, #0A5236 72%, #136B3E 100%);
    --pt-panel:
        radial-gradient(circle at 100% 0%, rgba(240, 144, 0, .22) 0%, rgba(240, 144, 0, 0) 45%),
        linear-gradient(160deg, #011A14 0%, #03382A 58%, #0A5236 100%);
    --pt-shadow: rgba(240, 168, 72, .18);
    --pt-box-glow: rgba(240, 168, 72, .28);
    --pt-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='1.3' fill='%23F0A848' fill-opacity='.30'/%3E%3C/svg%3E");
    --pt-pattern-size: 26px 26px;
    --pt-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 190 C210 105 400 275 620 190 S990 80 1200 160' stroke='%23F0A848' stroke-opacity='.30'/%3E%3Cpath d='M0 235 C230 165 420 295 640 230 S1010 135 1200 205' stroke='%23F0D8A8' stroke-opacity='.18'/%3E%3Cpath d='M0 278 C250 218 445 308 665 268 S1030 188 1200 248' stroke='%23D4F772' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-cafa {
    /* CAFA box: deep petrol + leaf green + sky */
    --pt-base: #03282E;
    --pt-navy: #04363F;
    --pt-hero:
        radial-gradient(ellipse at 50% 62%, rgba(120, 210, 90, .32) 0%, rgba(120, 210, 90, 0) 45%),
        radial-gradient(circle at 100% 0%, rgba(72, 192, 240, .38) 0%, rgba(72, 192, 240, 0) 40%),
        linear-gradient(160deg, #021C24 0%, #04363F 45%, #0A5A48 78%, #1E7F45 100%);
    --pt-cta:
        radial-gradient(circle at 80% 48%, rgba(120, 210, 90, .40) 0%, rgba(120, 210, 90, 0) 38%),
        radial-gradient(circle at 8% 115%, rgba(72, 192, 240, .40) 0%, rgba(72, 192, 240, 0) 45%),
        linear-gradient(118deg, #021C24 0%, #04363F 42%, #0A5A48 72%, #1E7F45 100%);
    --pt-panel:
        radial-gradient(circle at 100% 0%, rgba(72, 192, 240, .22) 0%, rgba(72, 192, 240, 0) 45%),
        linear-gradient(160deg, #021C24 0%, #04363F 58%, #0A5A48 100%);
    --pt-shadow: rgba(120, 210, 90, .18);
    --pt-box-glow: rgba(168, 224, 138, .28);
    --pt-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='3.5' fill='none' stroke='%23A8E08A' stroke-opacity='.26' stroke-width='1.2'/%3E%3C/svg%3E");
    --pt-pattern-size: 36px 36px;
    --pt-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 190 C210 105 400 275 620 190 S990 80 1200 160' stroke='%2390D8F0' stroke-opacity='.30'/%3E%3Cpath d='M0 235 C230 165 420 295 640 230 S1010 135 1200 205' stroke='%23A8E08A' stroke-opacity='.18'/%3E%3Cpath d='M0 278 C250 218 445 308 665 268 S1030 188 1200 248' stroke='%23D4F772' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-wafa {
    /* WAFA box: water blue + aqua */
    --pt-base: #032048;
    --pt-navy: #053A70;
    --pt-hero:
        radial-gradient(ellipse at 50% 62%, rgba(72, 192, 216, .32) 0%, rgba(72, 192, 216, 0) 45%),
        radial-gradient(circle at 100% 0%, rgba(126, 214, 232, .38) 0%, rgba(126, 214, 232, 0) 40%),
        linear-gradient(160deg, #021736 0%, #053A70 45%, #07649E 78%, #0B9CB5 100%);
    --pt-cta:
        radial-gradient(circle at 80% 48%, rgba(72, 192, 216, .40) 0%, rgba(72, 192, 216, 0) 38%),
        radial-gradient(circle at 8% 115%, rgba(126, 214, 232, .40) 0%, rgba(126, 214, 232, 0) 45%),
        linear-gradient(118deg, #021736 0%, #053A70 42%, #07649E 72%, #0B9CB5 100%);
    --pt-panel:
        radial-gradient(circle at 100% 0%, rgba(126, 214, 232, .22) 0%, rgba(126, 214, 232, 0) 45%),
        linear-gradient(160deg, #021736 0%, #053A70 58%, #07649E 100%);
    --pt-shadow: rgba(72, 192, 216, .18);
    --pt-box-glow: rgba(126, 214, 232, .28);
    --pt-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 12c2.6 3.4 4 5.6 4 7.4a4 4 0 0 1-8 0c0-1.8 1.4-4 4-7.4z' fill='%23C0F0F0' fill-opacity='.22'/%3E%3C/svg%3E");
    --pt-pattern-size: 36px 36px;
    --pt-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 190 C210 105 400 275 620 190 S990 80 1200 160' stroke='%237ED6E8' stroke-opacity='.30'/%3E%3Cpath d='M0 235 C230 165 420 295 640 230 S1010 135 1200 205' stroke='%23C0F0F0' stroke-opacity='.18'/%3E%3Cpath d='M0 278 C250 218 445 308 665 268 S1030 188 1200 248' stroke='%23D4F772' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-mediq {
    /* MedIQ box: navy + royal blue + cyan */
    --pt-base: #041C4A;
    --pt-navy: #06286A;
    --pt-hero:
        radial-gradient(circle at 0% 100%, rgba(226, 59, 78, .30) 0%, rgba(226, 59, 78, 0) 38%),
        radial-gradient(ellipse at 50% 62%, rgba(96, 192, 240, .32) 0%, rgba(96, 192, 240, 0) 45%),
        radial-gradient(circle at 100% 0%, rgba(120, 216, 240, .38) 0%, rgba(120, 216, 240, 0) 40%),
        linear-gradient(160deg, #03143A 0%, #06286A 45%, #0A4A9C 78%, #0E78B4 100%);
    --pt-cta:
        radial-gradient(circle at 80% 48%, rgba(96, 192, 240, .40) 0%, rgba(96, 192, 240, 0) 38%),
        radial-gradient(circle at 8% 115%, rgba(226, 59, 78, .38) 0%, rgba(226, 59, 78, 0) 45%),
        linear-gradient(118deg, #03143A 0%, #06286A 42%, #0A4A9C 72%, #0E78B4 100%);
    --pt-panel:
        radial-gradient(circle at 100% 0%, rgba(120, 216, 240, .22) 0%, rgba(120, 216, 240, 0) 45%),
        linear-gradient(160deg, #03143A 0%, #06286A 58%, #0A4A9C 100%);
    --pt-shadow: rgba(96, 192, 240, .18);
    --pt-box-glow: rgba(192, 240, 240, .28);
    --pt-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 13v8M13 17h8' stroke='%23FF8A9A' stroke-opacity='.32' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    --pt-pattern-size: 34px 34px;
    --pt-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 190 C210 105 400 275 620 190 S990 80 1200 160' stroke='%2378D8F0' stroke-opacity='.30'/%3E%3Cpath d='M0 235 C230 165 420 295 640 230 S1010 135 1200 205' stroke='%23FF6B7D' stroke-opacity='.30'/%3E%3Cpath d='M0 278 C250 218 445 308 665 268 S1030 188 1200 248' stroke='%23D4F772' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-coris {
    /* CORIS box: navy + petrol + teal */
    --pt-base: #03243A;
    --pt-navy: #04304A;
    --pt-hero:
        radial-gradient(ellipse at 50% 62%, rgba(46, 200, 180, .32) 0%, rgba(46, 200, 180, 0) 45%),
        radial-gradient(circle at 100% 0%, rgba(0, 144, 144, .38) 0%, rgba(0, 144, 144, 0) 40%),
        linear-gradient(160deg, #021A2C 0%, #04304A 45%, #064A5C 78%, #08625F 100%);
    --pt-cta:
        radial-gradient(circle at 80% 48%, rgba(46, 200, 180, .40) 0%, rgba(46, 200, 180, 0) 38%),
        radial-gradient(circle at 8% 115%, rgba(0, 144, 144, .40) 0%, rgba(0, 144, 144, 0) 45%),
        linear-gradient(118deg, #021A2C 0%, #04304A 42%, #064A5C 72%, #08625F 100%);
    --pt-panel:
        radial-gradient(circle at 100% 0%, rgba(0, 144, 144, .22) 0%, rgba(0, 144, 144, 0) 45%),
        linear-gradient(160deg, #021A2C 0%, #04304A 58%, #064A5C 100%);
    --pt-shadow: rgba(46, 200, 180, .18);
    --pt-box-glow: rgba(144, 216, 216, .28);
    --pt-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='1.3' fill='%2390D8D8' fill-opacity='.30'/%3E%3C/svg%3E");
    --pt-pattern-size: 26px 26px;
    --pt-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 190 C210 105 400 275 620 190 S990 80 1200 160' stroke='%2390D8D8' stroke-opacity='.30'/%3E%3Cpath d='M0 235 C230 165 420 295 640 230 S1010 135 1200 205' stroke='%2390D8D8' stroke-opacity='.18'/%3E%3Cpath d='M0 278 C250 218 445 308 665 268 S1030 188 1200 248' stroke='%23D4F772' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-ddx {
    /* DDX: deep indigo + violet */
    --pt-base: #110B3A;
    --pt-navy: #1C1462;
    --pt-hero:
        radial-gradient(ellipse at 50% 62%, rgba(150, 128, 255, .32) 0%, rgba(150, 128, 255, 0) 45%),
        radial-gradient(circle at 100% 0%, rgba(120, 96, 240, .38) 0%, rgba(120, 96, 240, 0) 40%),
        linear-gradient(160deg, #0B0730 0%, #1C1462 45%, #33239E 78%, #5B45D6 100%);
    --pt-cta:
        radial-gradient(circle at 80% 48%, rgba(150, 128, 255, .40) 0%, rgba(150, 128, 255, 0) 38%),
        radial-gradient(circle at 8% 115%, rgba(120, 96, 240, .40) 0%, rgba(120, 96, 240, 0) 45%),
        linear-gradient(118deg, #0B0730 0%, #1C1462 42%, #33239E 72%, #5B45D6 100%);
    --pt-panel:
        radial-gradient(circle at 100% 0%, rgba(120, 96, 240, .28) 0%, rgba(120, 96, 240, 0) 45%),
        linear-gradient(160deg, #0B0730 0%, #1C1462 58%, #33239E 100%);
    --pt-shadow: rgba(150, 128, 255, .18);
    --pt-box-glow: rgba(190, 176, 255, .30);
    --pt-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect x='13' y='13' width='4' height='4' rx='1' fill='%23BEB0FF' fill-opacity='.26'/%3E%3C/svg%3E");
    --pt-pattern-size: 30px 30px;
    --pt-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 190 C210 105 400 275 620 190 S990 80 1200 160' stroke='%23BEB0FF' stroke-opacity='.30'/%3E%3Cpath d='M0 235 C230 165 420 295 640 230 S1010 135 1200 205' stroke='%23DCD4FF' stroke-opacity='.18'/%3E%3Cpath d='M0 278 C250 218 445 308 665 268 S1030 188 1200 248' stroke='%23D4F772' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}

/* breadcrumb ground (header text stays white on it) */
.breadcumb-section.product-hero {
    overflow: hidden;
    background-color: var(--pt-base);
    background-image: var(--pt-hero);
}
.breadcumb-section.product-hero::before,
.breadcumb-section.product-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    pointer-events: none;
}
/* faint product pattern, fading out towards the edges */
.breadcumb-section.product-hero::before {
    top: 0;
    bottom: 0;
    background: var(--pt-pattern) 0 0 / var(--pt-pattern-size) repeat;
    -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 70%);
}
/* thin wave lines echoing the box artwork */
.breadcumb-section.product-hero::after {
    bottom: 0;
    height: 55%;
    background: var(--pt-waves) center bottom / 100% 100% no-repeat;
}

/* CTA ground instead of the theme's green texture */
.product-cta .row.call-to-bg {
    overflow: hidden;
    background-color: var(--pt-base);
    background-image: var(--pt-cta);
}
.product-cta .row.call-to-bg::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background: var(--pt-waves) center bottom / 100% 100% no-repeat;
    pointer-events: none;
}
.product-cta .cta-product-visual::before {
    background: radial-gradient(circle, var(--pt-box-glow) 0%, transparent 65%);
}
/* theme button is black; hover fill stays lime */
.product-cta .saas-btn a {
    background-color: var(--pt-navy);
}

/*----------  MedIQ page  ----------*/

.mediq-page {
    /* health red, shared with the MedIQ home banner (_HeroV8) */
    --mediq-pulse: #E23B4E;
    --mediq-pulse-bright: #FF4D62; /* on the dark panels */
    --mediq-pulse-soft: #FDECEE;
}
.mediq-page .mediq-intro,
.mediq-page .mediq-bridge,
.mediq-page .mediq-phases-wrap {
    margin-bottom: 100px;
}
.mediq-page .mediq-vitals {
    margin-bottom: 70px;
}

/* intro */
.mediq-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
}
.mediq-keywords li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--black-op10);
    border-radius: 30px;
    background: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
    transition: .4s;
}
/* small medical cross */
.mediq-keywords li::before {
    content: "";
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
        linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
        var(--mediq-pulse);
    transition: .4s;
}
.mediq-keywords li:hover {
    border-color: var(--pt-navy);
    background: var(--pt-navy);
    color: var(--color-white);
}

/* clinical monitor */
.mediq-monitor {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 28px;
    background: var(--pt-panel);
    box-shadow: 0 30px 70px var(--pt-shadow);
}
.mediq-monitor::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--white-op5) 1px, transparent 1px),
        linear-gradient(90deg, var(--white-op5) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.mediq-monitor > * {
    position: relative;
}
.mediq-monitor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mediq-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
}
.mediq-live i {
    font-size: 14px;
    color: var(--mediq-pulse-bright);
    filter: drop-shadow(0 0 6px rgba(255, 77, 98, .7));
    animation: mediq-beat 1.4s ease-in-out infinite;
}
.mediq-monitor-tag {
    flex: none;
    white-space: nowrap;
    padding: 3px 12px;
    border: 1px solid var(--white-op15);
    border-radius: 20px;
    font-size: 12px;
    color: var(--white-op60);
}
.mediq-ecg {
    display: block;
    width: 100%;
    height: 80px;
    margin: 18px 0 22px;
}
.mediq-ecg path {
    fill: none;
    stroke: var(--mediq-pulse-bright);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    filter: drop-shadow(0 0 5px rgba(255, 77, 98, .7));
    animation: mediq-ecg 4s linear infinite;
}
@keyframes mediq-ecg {
    0% { stroke-dashoffset: 100; opacity: 1; }
    75% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
.mediq-monitor-body {
    display: flex;
    align-items: center;
    gap: 30px;
}
.mediq-ring {
    position: relative;
    flex: 0 0 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
/* ring drawn with a mask so the panel gradient shows through the middle */
.mediq-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--primary-color) calc(var(--p) * 1%), var(--white-op10) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
}
.mediq-ring > * {
    position: relative;
}
.mediq-ring-value strong {
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    color: var(--color-white);
}
.mediq-ring-value span {
    font-size: 16px;
    color: var(--white-op60);
}
.mediq-ring-label {
    max-width: 90px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: var(--white-op70);
}
.mediq-scores {
    flex: 1;
    margin: 0;
    padding: 0;
}
.mediq-scores li {
    margin-bottom: 16px;
}
.mediq-scores li:last-child {
    margin-bottom: 0;
}
.mediq-score-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--white-op70);
}
.mediq-score-head b {
    color: var(--color-white);
}
.mediq-bar {
    height: 8px;
    border-radius: 8px;
    background: var(--white-op10);
    overflow: hidden;
}
.mediq-bar i {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(212, 247, 114, .35), var(--primary-color));
}
.mediq-monitor-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid var(--white-op10);
    border-radius: 14px;
    background: var(--white-op5);
    font-size: 14px;
    line-height: 1.4;
    color: var(--white-op70);
}
.mediq-monitor-foot i {
    color: var(--primary-color);
}
.mediq-monitor-foot b {
    color: var(--color-white);
    font-weight: 600;
}

/* definition: four vitals */
.mediq-vital {
    display: flex;
    align-items: center;
    gap: 16px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 22px 24px;
    border: 1px solid var(--black-op10);
    border-radius: 18px;
    background: var(--color-white);
    transition: border-color .4s, box-shadow .4s, transform .4s;
}
.mediq-vital:hover {
    border-color: var(--primary-color);
    box-shadow: 0 16px 40px var(--black-op10);
    transform: translateY(-4px);
}
.mediq-vital-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--mediq-pulse-soft);
    color: var(--mediq-pulse);
    font-size: 20px;
    transition: .4s;
}
.mediq-vital:hover {
    border-color: var(--mediq-pulse);
}
.mediq-vital:hover .mediq-vital-icon {
    background: var(--mediq-pulse);
    color: var(--color-white);
}
.mediq-vital p {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
    color: var(--title-color);
}
.mediq-vital p b {
    font-weight: 700;
    background: linear-gradient(transparent 60%, rgba(226, 59, 78, .22) 60%);
}

/* value proposition bridge */
.mediq-bridge {
    position: relative;
    overflow: hidden;
    padding: 70px 60px;
    border-radius: 30px;
    background: var(--pt-panel);
}
.mediq-bridge::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -40%;
    width: 70%;
    height: 110%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(212, 247, 114, .12) 0%, transparent 60%);
    pointer-events: none;
}
.mediq-bridge > * {
    position: relative;
}
.mediq-bridge .sec-title.text-center .section-desc p {
    width: 70%;
    color: var(--white-op70);
}
.mediq-bridge-row {
    display: flex;
    align-items: stretch;
    margin-top: 50px;
}
.mediq-node {
    flex: 1 1 0;
    padding: 32px;
    border: 1px solid var(--white-op15);
    border-radius: 24px;
    background: var(--white-op5);
}
.mediq-node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    font-size: 22px;
}
.mediq-node-icon.is-red {
    background: var(--mediq-pulse-bright);
    color: var(--color-white);
}
.mediq-node h3 {
    margin: 20px 0 16px;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
}
.mediq-node ul {
    margin: 0;
    padding: 0;
}
.mediq-node ul li {
    position: relative;
    padding: 9px 0 9px 22px;
    border-bottom: 1px dashed var(--white-op10);
    color: var(--white-op70);
}
.mediq-node ul li:last-child {
    border-bottom: 0;
}
.mediq-node ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--primary-color);
}
.mediq-standards span {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--white-op5);
    font-size: 14px;
    color: var(--white-op70);
}
.mediq-standards span:last-child {
    margin-bottom: 0;
}
.mediq-standards b {
    min-width: 44px;
    font-size: 18px;
    color: var(--primary-color);
}
.mediq-link {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
}
.mediq-link-line {
    position: relative;
    flex: 1;
    height: 2px;
    background-image: linear-gradient(90deg, var(--white-op25) 50%, transparent 50%);
    background-size: 10px 2px;
}
.mediq-link-line i {
    position: absolute;
    top: -3px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mediq-pulse-bright);
    animation: mediq-flow 2.4s linear infinite;
}
.mediq-link-line i:nth-child(2) {
    animation-delay: .8s;
}
.mediq-link-line i:nth-child(3) {
    animation-delay: 1.6s;
}
/* right line flows back toward the centre badge */
.mediq-link-line.is-right i {
    animation-direction: reverse;
}
@keyframes mediq-flow {
    0% { left: 0; opacity: 0; }
    15%, 85% { opacity: 1; }
    100% { left: calc(100% - 8px); opacity: 0; }
}
.mediq-link-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--mediq-pulse-bright);
    color: var(--color-white);
    font-size: 28px;
    box-shadow: 0 0 0 10px rgba(255, 77, 98, .18), 0 0 40px rgba(255, 77, 98, .45);
    animation: mediq-beat 1.4s ease-in-out infinite;
}
@keyframes mediq-beat {
    0%, 45%, 100% { transform: scale(1); }
    15% { transform: scale(1.12); }
    30% { transform: scale(.96); }
}

/* phases */
.mediq-phase {
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 34px 30px;
    border: 1px solid var(--black-op10);
    border-radius: 24px;
    background: var(--color-white);
    transition: border-color .5s, box-shadow .5s;
}
.mediq-phase:hover {
    border-color: var(--mediq-pulse);
    box-shadow: 0 20px 50px var(--black-op10);
}
.mediq-phase-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--black-op15);
}
.mediq-phase-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--mediq-pulse-soft);
    color: var(--mediq-pulse);
    font-size: 24px;
}
.mediq-phase.is-dark .mediq-phase-icon {
    background: var(--mediq-pulse-bright);
    color: var(--color-white);
}
.mediq-phase-no {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-gray);
}
.mediq-phase h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: var(--title-color);
}
.mediq-phase-list {
    margin: 0;
    padding: 0;
}
.mediq-phase-list li {
    position: relative;
    margin-bottom: 16px;
    padding-left: 34px;
    line-height: 1.55;
    color: var(--text-color);
}
.mediq-phase-list li:last-child {
    margin-bottom: 0;
}
/* check mark */
.mediq-phase-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pt-navy);
}
.mediq-phase-list li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 6px;
    height: 10px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.mediq-phase.is-dark {
    border-color: var(--pt-navy);
    background: var(--pt-panel);
    box-shadow: 0 30px 60px var(--pt-shadow);
}
.mediq-phase.is-dark .mediq-phase-head {
    border-color: var(--white-op15);
}
.mediq-phase.is-dark h3 {
    color: var(--color-white);
}
.mediq-phase.is-dark .mediq-phase-no {
    color: var(--white-op50);
}
.mediq-phase.is-dark .mediq-phase-list li {
    color: var(--white-op70);
}
.mediq-phase.is-dark .mediq-phase-list li::before {
    background: var(--primary-color);
}
.mediq-phase.is-dark .mediq-phase-list li::after {
    border-color: var(--pt-navy);
}

/* prioritisation venn */
.mediq-priority-desc {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 28px;
}
.mediq-priority-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
}
.mediq-priority-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
}
.mediq-priority-legend i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.mediq-priority-legend .is-a,
.mediq-venn-circle.is-a {
    background: rgba(212, 247, 114, .75);
}
.mediq-priority-legend .is-b,
.mediq-venn-circle.is-b {
    background: rgba(126, 214, 232, .45);
}
.mediq-priority-legend .is-c,
.mediq-venn-circle.is-c {
    background: rgba(226, 59, 78, .30);
}
.mediq-venn {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    isolation: isolate;
}
.mediq-venn-circle {
    position: absolute;
    width: 58%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    mix-blend-mode: multiply;
    transition: transform .5s;
}
.mediq-venn-circle.is-a {
    top: 0;
    left: 21%;
}
.mediq-venn-circle.is-b {
    bottom: 4%;
    left: 0;
}
.mediq-venn-circle.is-c {
    bottom: 4%;
    right: 0;
}
.mediq-venn:hover .mediq-venn-circle.is-a { transform: translateY(-6px); }
.mediq-venn:hover .mediq-venn-circle.is-b { transform: translate(-6px, 4px); }
.mediq-venn:hover .mediq-venn-circle.is-c { transform: translate(6px, 4px); }
.mediq-venn-circle em {
    position: absolute;
    font-style: normal;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    color: var(--title-color);
}
.mediq-venn-circle.is-a em {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}
.mediq-venn-circle.is-b em {
    top: 50%;
    left: 12%;
}
.mediq-venn-circle.is-c em {
    top: 50%;
    right: 12%;
}
/* centroid of the three circles */
.mediq-venn-core {
    position: absolute;
    left: 50%;
    top: 54.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--pt-navy);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
    color: var(--color-white);
}
.mediq-venn-core i {
    color: var(--mediq-pulse-bright);
    font-size: 16px;
    animation: mediq-beat 1.4s ease-in-out infinite;
}
.mediq-venn-core::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 2px solid var(--pt-navy);
    border-radius: 50%;
    animation: mediq-core 2s ease-out infinite;
}
@keyframes mediq-core {
    from { transform: scale(.9); opacity: .6; }
    to { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mediq-live i,
    .mediq-link-line i,
    .mediq-link-badge,
    .mediq-venn-core i,
    .mediq-venn-core::after {
        animation: none;
    }
    .mediq-ecg path {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* MedIQ responsive */
@media (max-width: 991px) {
    .mediq-page .mediq-intro,
    .mediq-page .mediq-bridge,
    .mediq-page .mediq-phases-wrap {
        margin-bottom: 60px;
    }
    .mediq-page .mediq-vitals {
        margin-bottom: 40px;
    }
    .mediq-monitor {
        margin-top: 40px;
    }
    .mediq-bridge {
        padding: 50px 30px;
    }
    .mediq-bridge .sec-title.text-center .section-desc p {
        width: 100%;
    }
    .mediq-bridge-row {
        flex-direction: column;
        margin-top: 36px;
    }
    .mediq-link {
        flex: 0 0 auto;
        justify-content: center;
        padding: 22px 0;
    }
    .mediq-link-line {
        display: none;
    }
    .mediq-phase {
        height: auto;
    }
    .mediq-priority .sec-title {
        margin-bottom: 20px;
    }
    .mediq-venn {
        margin-top: 40px;
    }
}

@media (max-width: 575px) {
    .mediq-monitor {
        padding: 22px 18px;
        border-radius: 22px;
    }
    .mediq-monitor-body {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .mediq-ring {
        flex: none;
        width: 150px;
        align-self: center;
    }
    .mediq-bridge {
        padding: 40px 20px;
        border-radius: 20px;
    }
    .mediq-node {
        padding: 26px 22px;
    }
    .mediq-phase {
        padding: 28px 22px;
    }
    .mediq-venn-circle em {
        font-size: 12px;
    }
    .mediq-venn-core {
        width: 74px;
        height: 74px;
        font-size: 10px;
    }
    .mediq-venn-core i {
        font-size: 13px;
    }
}


/*----------  CORIS page  ----------*/

.coris-page {
    --coris-alert: #FFB547;
}
.coris-page .coris-intro,
.coris-page .coris-berg-section,
.coris-page .coris-versus,
.coris-page .coris-flow-wrap,
.coris-page .coris-features {
    margin-bottom: 100px;
}
.coris-page .coris-flow-wrap {
    margin-bottom: 70px;
}

/* intro */
.coris-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
}
.coris-keywords li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--title-color);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    transition: .4s;
}
.coris-keywords li i {
    font-size: 13px;
    color: var(--primary-color);
    transition: .4s;
}
.coris-keywords li:hover {
    background: var(--primary-color);
    color: var(--title-color);
}
.coris-keywords li:hover i {
    color: var(--title-color);
}

/* early warning chart */
.coris-signal {
    margin: 0;
    padding: 28px 28px 24px;
    border-radius: 28px;
    background: var(--title-color);
    box-shadow: 0 30px 70px var(--black-op20);
}
.coris-signal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.coris-signal-head span {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
}
.coris-signal-head em {
    flex: none;
    white-space: nowrap;
    padding: 3px 12px;
    border: 1px solid var(--white-op15);
    border-radius: 20px;
    font-style: normal;
    font-size: 12px;
    color: var(--white-op60);
}
.coris-signal svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 18px 0 12px;
    overflow: visible;
}
.coris-zone {
    fill: rgba(255, 181, 71, .12);
}
.coris-zone-label {
    fill: var(--coris-alert);
    font-size: 11px;
    font-weight: 600;
}
.coris-grid line {
    stroke: var(--white-op10);
    stroke-width: 1;
}
.coris-area {
    fill: url(#coris-area);
}
.coris-fin {
    fill: none;
    stroke: var(--white-op50);
    stroke-width: 2;
    stroke-dasharray: 6 6;
}
.coris-op {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 100;
    animation: coris-draw 2.4s ease-out both;
}
@keyframes coris-draw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}
.coris-alert circle {
    fill: var(--coris-alert);
}
.coris-alert .coris-alert-pulse {
    fill: none;
    stroke: var(--coris-alert);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: coris-pulse 1.8s ease-out infinite;
}
@keyframes coris-pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(3); opacity: 0; }
}
.coris-alert-label {
    fill: var(--coris-alert);
    font-size: 12px;
    font-weight: 600;
}
.coris-axis text {
    fill: var(--white-op60);
    font-size: 11px;
}
.coris-signal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
}
.coris-signal-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--white-op70);
}
.coris-signal-legend i {
    width: 20px;
}
.coris-signal-legend .is-fin {
    border-top: 2px dashed var(--white-op50);
}
.coris-signal-legend .is-op {
    height: 3px;
    border-radius: 3px;
    background: var(--primary-color);
}

/* value proposition: iceberg */
.coris-quote p {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-color);
}
.coris-quote p:last-child {
    margin: 0;
    padding-left: 18px;
    border-left: 4px solid var(--primary-color);
    font-size: 21px;
    font-weight: 500;
    color: var(--title-color);
}
.coris-berg {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    isolation: isolate;
}
/* water below the line */
.coris-berg::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -6%;
    right: -6%;
    top: 182px;
    bottom: -24px;
    border-radius: 0 0 30px 30px;
    background: linear-gradient(180deg, rgba(126, 214, 232, .22) 0%, rgba(126, 214, 232, 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.coris-berg-top {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 170px;
}
.coris-berg-tip {
    width: 180px;
    height: 150px;
    background: linear-gradient(135deg, #EEF7D2 0%, #C9D6A6 100%);
    clip-path: polygon(50% 0, 64% 28%, 78% 55%, 100% 100%, 0 100%, 18% 60%, 34% 30%);
    animation: coris-bob 5s ease-in-out infinite alternate;
}
@keyframes coris-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}
.coris-berg-note {
    position: absolute;
    top: 20px;
    left: calc(50% + 100px);
    padding-left: 16px;
    border-left: 2px solid var(--title-color);
}
.coris-berg-note span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-gray);
}
.coris-berg-note strong {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--title-color);
}
.coris-berg-note small {
    font-size: 14px;
    color: var(--text-color);
}
.coris-berg-water {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 24px;
    margin: 0 -6%;
}
.coris-berg-water::before,
.coris-berg-water::after {
    content: "";
    flex: 1;
    border-top: 2px dashed rgba(19, 20, 14, .25);
}
.coris-berg-water span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--color-gray);
}
.coris-berg-base {
    padding: 64px 70px 80px;
    background: var(--title-color);
    /* narrow top continues the tip, widens under water */
    clip-path: polygon(32% 0, 68% 0, 88% 16%, 100% 45%, 93% 78%, 68% 100%, 34% 97%, 8% 80%, 0 46%, 12% 16%);
    text-align: center;
}
.coris-berg-label {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
}
.coris-berg-base ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
}
.coris-berg-base li {
    padding: 8px 16px;
    border: 1px solid var(--white-op15);
    border-radius: 30px;
    background: var(--white-op5);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    transition: .4s;
}
.coris-berg-base li:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--title-color);
}

/* traditional vs CORIS */
.coris-versus {
    position: relative;
    overflow: hidden;
    padding: 70px 60px;
    border-radius: 30px;
    background: var(--title-color);
}
.coris-versus::before {
    content: "";
    position: absolute;
    right: -20%;
    top: -50%;
    width: 70%;
    height: 130%;
    background: radial-gradient(circle, rgba(212, 247, 114, .12) 0%, transparent 60%);
    pointer-events: none;
}
.coris-versus > * {
    position: relative;
}
.coris-versus-table {
    margin-top: 40px;
}
.coris-versus-row {
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    border-bottom: 1px solid var(--white-op10);
}
.coris-versus-row:last-child {
    border-bottom: 0;
}
.coris-versus-row > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--white-op70);
}
.coris-versus-row > span:first-child {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white-op50);
}
.coris-versus-row > span:last-child {
    background: rgba(212, 247, 114, .08);
    font-weight: 600;
    color: var(--color-white);
}
.coris-versus-row.is-head > span {
    font-size: 17px;
    font-weight: 600;
    color: var(--white-op60);
}
.coris-versus-row.is-head > span:last-child {
    border-radius: 16px 16px 0 0;
    background: var(--primary-color);
    font-weight: 700;
    color: var(--title-color);
}
.coris-versus-row:last-child > span:last-child {
    border-radius: 0 0 16px 16px;
}

/* motto flow */
.coris-flow > div {
    position: relative;
}
.coris-flow > div:not(:last-child)::before,
.coris-flow > div:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 2;
}
/* circle */
.coris-flow > div:not(:last-child)::before {
    right: -14px;
    top: calc(50% - 29px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
}
/* chevron */
.coris-flow > div:not(:last-child)::after {
    right: -3px;
    top: calc(50% - 19px);
    width: 8px;
    height: 8px;
    border: solid var(--title-color);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}
.coris-flow-step {
    position: relative;
    overflow: hidden;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 36px 30px 32px;
    border: 1px solid var(--black-op10);
    border-radius: 24px;
    background: var(--bg-color1);
    transition: background .5s, border-color .5s;
}
.coris-flow-no {
    position: absolute;
    top: 18px;
    right: 26px;
    font-size: 64px;
    line-height: 1;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px var(--black-op15);
    transition: .5s;
}
.coris-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--title-color);
    color: var(--primary-color);
    font-size: 22px;
    transition: .5s;
}
.coris-flow-step h3 {
    margin: 22px 0 10px;
    font-size: 26px;
    font-weight: 600;
    color: var(--title-color);
    transition: .5s;
}
.coris-flow-step p {
    margin: 0;
    color: var(--text-color);
    transition: .5s;
}
.coris-flow-step:hover {
    border-color: var(--title-color);
    background: var(--title-color);
}
.coris-flow-step:hover .coris-flow-no {
    -webkit-text-stroke-color: var(--primary-color);
}
.coris-flow-step:hover .coris-flow-icon {
    background: var(--primary-color);
    color: var(--title-color);
}
.coris-flow-step:hover h3 {
    color: var(--color-white);
}
.coris-flow-step:hover p {
    color: var(--white-op70);
}

/* features */
.coris-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.coris-traits li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    background: var(--title-color);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
}
.coris-traits li i {
    color: var(--primary-color);
}
.coris-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.coris-feature-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid var(--black-op10);
    border-radius: 16px;
    background: var(--color-white);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--title-color);
    transition: border-color .4s, box-shadow .4s;
}
.coris-feature-list li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-color3);
    color: var(--title-color);
    font-size: 16px;
    transition: .4s;
}
.coris-feature-list li:hover {
    border-color: var(--primary-color);
    box-shadow: 0 14px 36px var(--black-op10);
}
.coris-feature-list li:hover i {
    background: var(--primary-color);
}

/* sectors */
.coris-sector {
    position: relative;
    overflow: hidden;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 34px 28px 30px;
    border: 1px solid var(--black-op10);
    border-radius: 24px;
    background: var(--color-white);
    transition: box-shadow .5s;
}
.coris-sector::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s;
}
.coris-sector:hover {
    box-shadow: 0 20px 50px var(--black-op10);
}
.coris-sector:hover::before {
    transform: scaleX(1);
}
.coris-sector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--title-color);
    color: var(--primary-color);
    font-size: 24px;
}
.coris-sector h3 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
    color: var(--title-color);
}
.coris-sector-use {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}
.coris-sector-use::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--coris-alert);
}

@media (prefers-reduced-motion: reduce) {
    .coris-op,
    .coris-alert .coris-alert-pulse,
    .coris-berg-tip {
        animation: none;
    }
}

/* CORIS responsive */
@media (max-width: 991px) {
    .coris-page .coris-intro,
    .coris-page .coris-berg-section,
    .coris-page .coris-versus,
    .coris-page .coris-features {
        margin-bottom: 60px;
    }
    .coris-page .coris-flow-wrap {
        margin-bottom: 30px;
    }
    .coris-signal {
        margin-top: 40px;
    }
    .coris-quote {
        margin-bottom: 40px;
    }
    .coris-versus {
        padding: 50px 30px;
    }
    .coris-flow > div:not(:last-child)::before,
    .coris-flow > div:not(:last-child)::after {
        display: none;
    }
    .coris-flow-step {
        height: auto;
    }
    .coris-features .sec-title {
        margin-bottom: 20px;
    }
    .coris-traits {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .coris-versus-row {
        grid-template-columns: 1fr 1fr;
    }
    .coris-versus-row > span:first-child {
        grid-column: 1 / -1;
        padding-bottom: 0;
    }
    .coris-versus-row.is-head > span:first-child {
        display: none;
    }
    .coris-versus-row > span {
        padding: 14px 16px;
        font-size: 14px;
    }
    .coris-versus-row > span:last-child {
        border-radius: 0;
    }
    .coris-versus-row.is-head > span:last-child {
        border-radius: 12px 12px 0 0;
    }
    .coris-versus-row:last-child > span:last-child {
        border-radius: 0 0 12px 12px;
    }
    .coris-feature-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .coris-signal {
        padding: 22px 18px 18px;
        border-radius: 22px;
    }
    .coris-versus {
        padding: 40px 18px;
        border-radius: 20px;
    }
    /* tip stays centered; the note keeps to the left half so it clears the apex */
    .coris-berg-note {
        left: 0;
        max-width: calc(50% - 30px);
    }
    .coris-berg-note strong {
        font-size: 16px;
    }
    .coris-berg-tip {
        width: 130px;
        height: 130px;
    }
    .coris-berg-base {
        padding: 56px 30px 64px;
    }
    .coris-berg-base li {
        padding: 6px 12px;
        font-size: 12px;
    }
    .coris-flow-step,
    .coris-sector {
        padding: 28px 22px;
    }
}


/* Contact: phone / e-mail are links, keep the heading look */
.contact-location h3 a {
    color: inherit;
    transition: color .3s;
}
.contact-location h3 a:hover {
    color: var(--title-color);
    text-decoration: underline;
}


/*----------  Site forms (newsletter + contact) — see assets/js/forms.js  ----------*/

/* honeypot field: off-screen for people, bots still fill it */
.form-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.form-message {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.form-message:empty {
    display: none;
}
.form-message.is-error { color: #D93025; }
.form-message.is-success { color: #3E7B00; }
.form-message.is-pending { color: var(--text-color); }

/* dark backgrounds (footer) */
.footer-widget-content .form-message.is-error { color: #FF8A80; }
.footer-widget-content .form-message.is-success { color: var(--primary-color); }
.footer-widget-content .form-message.is-pending { color: #AAAAA8; }

.form-box input.is-invalid,
.form-box textarea.is-invalid {
    border-color: #D93025;
}
.subscribe-box input.is-invalid {
    border-bottom-color: #D93025 !important;
}
.footer-widget-content .subscribe-box input.is-invalid {
    border-bottom-color: #FF8A80 !important;
}

/* the contact form message sits between the checkbox and the button */
.contact-form-box .form-message {
    margin: 0 0 16px;
}

.js-site-form button[disabled] {
    opacity: .6;
    cursor: wait;
}

/* ==========================================================
   Home hero: full-bleed product banner (hero-banner.webp)
   The photo leaves its left ~45% empty for the text; the
   floating cards sit on the open spots around the figure.
   ========================================================== */
.hero-section.hero-banner {
    --hero-banner-ratio: calc(941 / 1672);
    overflow: hidden;
    padding: 140px 0 60px;
    min-height: min(calc((100vw - 20px) * var(--hero-banner-ratio)), 920px);
    background: #EEF8D6 url(../images/demo-image/hero-banner.jpg) right center / cover no-repeat;
    background-image: image-set(url(../images/demo-image/hero-banner.webp) type("image/webp"),
                                url(../images/demo-image/hero-banner.jpg) type("image/jpeg"));
}
/* soft wash behind the text column so it stays readable on any crop */
.hero-section.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(242, 250, 223, .75) 0%, rgba(242, 250, 223, .45) 32%, rgba(242, 250, 223, 0) 52%);
}

/* floating cards: only where the photo is wide enough to leave room for them */
.hero-banner .grap-box {
    display: none;
}
@media (min-width: 1200px) {
    .hero-banner .grap-box {
        display: block;
    }
    /* carbon card: above the plant, left of the figure's raised hand */
    .hero-banner .left-card {
        left: 44%;
        top: max(17%, 130px);
        bottom: auto;
    }
    /* performance chart: over the skyline, right of the figure */
    .hero-banner .pie-chart-box {
        display: block;
        right: 2.5%;
        top: 20%;
    }
    .hero-banner .pie-chart-box img {
        width: 190px;
    }
}

/* tablets & phones: text on a plain band, the whole photo underneath it */
@media (max-width: 991px) {
    .hero-section.hero-banner {
        min-height: 0;
        padding: 110px 0 calc((100vw - 20px) * var(--hero-banner-ratio) + 10px);
        background: #F2FADF url(../images/demo-image/hero-banner.jpg) center bottom / 100% auto no-repeat;
        background-image: image-set(url(../images/demo-image/hero-banner.webp) type("image/webp"),
                                    url(../images/demo-image/hero-banner.jpg) type("image/jpeg")),
                          linear-gradient(180deg, #E8F8BB 0%, #F2FADF 100%);
    }
    /* fade the photo's top edge into the band above it */
    .hero-section.hero-banner::before {
        inset: auto 0 0 0;
        height: calc((100vw - 20px) * var(--hero-banner-ratio));
        background: linear-gradient(180deg, #F2FADF 0%, rgba(242, 250, 223, 0) 30%);
    }
}

/* ==========================================================
   Home hero, version 2 (_HeroV2): plain ground, one message,
   one dashboard card with two floating tags, product strip.
   ========================================================== */
.hero-v2 {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0 10px;
    padding: 170px 0 36px;          /* the desktop header overlays the top ~120px */
    border-radius: 20px 20px 0 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(212, 247, 114, .55) 0%, rgba(212, 247, 114, 0) 42%),
        radial-gradient(circle at 0% 100%, rgba(212, 247, 114, .25) 0%, rgba(212, 247, 114, 0) 38%),
        #F8FAF2;
}
/* faint dot grid, fading towards the edges */
.hero-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(rgba(19, 20, 14, .09) 1px, transparent 1.5px) 0 0 / 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%);
}

.hero-v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 12px;
    border: 1px solid rgba(19, 20, 14, .1);
    border-radius: 30px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
}
.hero-v2-eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9BC31F;
    box-shadow: 0 0 0 4px rgba(212, 247, 114, .6);
}
.hero-v2 .hero-v2-title {
    margin: 22px 0 20px;
    font-size: 62px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -1.5px;
}
.hero-v2-title mark {
    padding: 0;
    color: inherit;
    background: linear-gradient(transparent 62%, var(--primary-color) 62%, var(--primary-color) 92%, transparent 92%);
}
.hero-v2 .hero-v2-lead {
    max-width: 480px;
    font-size: 18px;
    line-height: 29px;
}

.hero-v2-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 28px;
    margin-top: 36px;
}
.hero-v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 7px 7px 26px;
    border-radius: 40px;
    background: var(--title-color);
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    transition: .3s;
}
.hero-v2-btn i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--title-color);
    transform: rotate(-45deg);
    transition: .3s;
}
.hero-v2-btn:hover {
    color: #fff;
    box-shadow: 0 12px 30px rgba(19, 20, 14, .18);
}
.hero-v2-btn:hover i {
    transform: rotate(0);
}
.hero-v2-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-color);
}
.hero-v2-trust .avatars img {
    width: 40px;
    height: 40px;
    margin-left: -12px;
    border-width: 3px;
}
.hero-v2-trust .avatars img:first-child {
    margin-left: 0;
}
.hero-v2-trust strong {
    display: block;
    color: var(--title-color);
    font-size: 16px;
}

/* dashboard card */
.hero-v2-visual {
    position: relative;
    max-width: 460px;
    margin: 0 0 0 auto;
    padding: 40px 30px;
}
.hero-v2-card {
    padding: 26px 26px 20px;
    border: 1px solid rgba(19, 20, 14, .06);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(19, 20, 14, .18);
}
.hero-v2-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: var(--text-color);
}
.hero-v2-card-head em {
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(212, 247, 114, .45);
    color: #4F6A00;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}
.hero-v2-metric {
    margin: 6px 0 14px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--title-color);
}
.hero-v2-metric small {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: #4F8A10;
}
.hero-v2-chart {
    display: block;
    width: 100%;
    height: 140px;
    overflow: visible;
}
.hero-v2-chart .grid {
    stroke: rgba(19, 20, 14, .07);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.hero-v2-chart .line {
    fill: none;
    stroke: #9BC31F;
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;             /* pathLength="1" on the path */
    stroke-dashoffset: 1;
    animation: hero-v2-draw 1.6s .3s ease-out forwards;
}
.hero-v2-chart circle {
    fill: #fff;
    stroke: var(--title-color);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}
@keyframes hero-v2-draw {
    to { stroke-dashoffset: 0; }
}
.hero-v2-months {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-gray);
}

/* floating tags */
.hero-v2-float {
    position: absolute;
    padding: 12px 16px;
    border: 1px solid rgba(19, 20, 14, .06);
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px -12px rgba(19, 20, 14, .2);
    animation: hero-v2-float 5s ease-in-out infinite;
}
.hero-v2-float small {
    display: block;
    font-size: 12px;
    color: var(--color-gray);
}
.hero-v2-float strong {
    display: block;
    font-size: 16px;
    color: var(--title-color);
}
.hero-v2-float--carbon {
    top: 0;
    left: -24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero-v2-float-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--primary-color);
    color: var(--title-color);
}
.hero-v2-float--roadmap {
    right: -10px;
    bottom: 0;
    min-width: 170px;
    animation-delay: -2.5s;
}
.hero-v2-progress {
    display: block;
    height: 6px;
    margin-top: 8px;
    border-radius: 6px;
    background: rgba(19, 20, 14, .08);
    overflow: hidden;
}
.hero-v2-progress span {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--title-color);
}
@keyframes hero-v2-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* product strip */
.hero-v2-products {
    display: flex;
    align-items: center;
    gap: 16px 28px;
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid rgba(19, 20, 14, .08);
}
.hero-v2-products-label {
    flex: none;
    font-size: 14px;
    color: var(--color-gray);
}
.hero-v2-products nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hero-v2-products a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(19, 20, 14, .1);
    border-radius: 30px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
    transition: .3s;
}
.hero-v2-products a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot);
}
.hero-v2-products a:hover {
    color: var(--title-color);
    border-color: var(--dot);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .hero-v2-float { animation: none; }
    .hero-v2-chart .line { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 1199px) {
    .hero-v2 .hero-v2-title {
        font-size: 50px;
    }
}
@media (max-width: 991px) {
    .hero-v2 {
        padding: 110px 0 30px;       /* only the 64px mobile bar overlays it here */
    }
    .hero-v2-visual {
        margin: 40px auto 0;
    }
    .hero-v2-products {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 36px;
    }
}
@media (max-width: 575px) {
    .hero-v2 .hero-v2-title {
        font-size: 38px;
        letter-spacing: -.8px;
    }
    .hero-v2 .hero-v2-lead {
        font-size: 16px;
        line-height: 26px;
    }
    .hero-v2-visual {
        padding: 34px 6px 40px;
    }
    .hero-v2-float--carbon {
        left: 0;
    }
    .hero-v2-float--roadmap {
        right: 0;
    }
    .hero-v2-metric {
        font-size: 38px;
    }
}

/* ==========================================================
   Home hero, version 3 (_HeroV3): the .hero-v2 ground and text,
   with the six product boxes on a two-row shelf. The back row
   stands higher so each box's logo (top of the box) stays in view.
   Stage units: % of the stage width (left/width) and height (top).
   ========================================================== */
.hero-v3 .hero-v2-title {
    font-size: 54px;
}
.hero-v3-stage {
    position: relative;
    max-width: 720px;
    margin-left: auto;
}
/* soft light behind the boxes */
.hero-v3-stage::before {
    content: "";
    position: absolute;
    inset: -8% 4% 10%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(212, 247, 114, .35) 60%, rgba(212, 247, 114, 0) 100%);
}
.hero-v3-shelf {
    position: relative;
    aspect-ratio: 100 / 64;
}
/* floor shadow under the front row */
.hero-v3-shelf::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 1%;
    height: 8%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(19, 20, 14, .22), rgba(19, 20, 14, 0));
}
.hero-v3-box {
    position: absolute;
    z-index: 1;
    display: block;
    transition: transform .35s ease, filter .35s ease;
    filter: drop-shadow(0 16px 22px rgba(19, 20, 14, .16));
    animation: hero-v3-rise .8s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: calc(var(--i) * .09s + .1s);
}
.hero-v3-box img {
    display: block;
    width: 100%;
    height: auto;
}
.hero-v3-box.is-back {
    top: 0;
    left: calc(13% + var(--i) * 25%);
    width: 24%;
}
.hero-v3-box.is-front {
    top: 31%;
    left: calc(2% + (var(--i) - 3) * 33%);
    width: 30%;
    z-index: 2;
}
.hero-v3-box:hover,
.hero-v3-box:focus-visible {
    z-index: 5;
    transform: translateY(-5%);
    filter: drop-shadow(0 26px 30px rgba(19, 20, 14, .24));
}
@keyframes hero-v3-rise {
    from {
        opacity: 0;
        transform: translateY(14%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-v3-box { animation: none; transition: none; }
}

@media (max-width: 1199px) {
    .hero-v3 .hero-v2-title {
        font-size: 46px;
    }
}
@media (max-width: 991px) {
    .hero-v3-stage {
        max-width: 600px;
        margin: 44px auto 0;
    }
}
@media (max-width: 575px) {
    .hero-v3 .hero-v2-title {
        font-size: 36px;
    }
}

/* ==========================================================
   Home hero, version 4 (_HeroV4): the .hero-v2 ground and text;
   a presenter cut-out in front of a light disc, with the product
   boxes on an arc in front of her (placement set per box in the view).
   ========================================================== */
.hero-v4 .hero-v2-title {
    font-size: 54px;
}
.hero-v4-stage {
    position: relative;
    max-width: 720px;
    margin-left: auto;
    aspect-ratio: 100 / 86;
}
.hero-v4-disc {
    position: absolute;
    left: 16%;
    top: 10.5%;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #EEF9C8 0%, #DDF29A 70%, #D4F772 100%);
    box-shadow: 0 0 0 18px rgba(212, 247, 114, .18);
}
.hero-v4-floor {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 86%;
    bottom: 1%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(19, 20, 14, .14), rgba(19, 20, 14, .04) 70%, rgba(19, 20, 14, 0));
}
.hero-v4-person {
    position: absolute;
    left: 22%;
    bottom: 20%;
    width: 56%;
    height: auto;
    animation: hero-v4-in 1s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hero-v4-box {
    position: absolute;
    left: var(--x);
    bottom: var(--b);
    width: var(--w);
    z-index: var(--z);
    display: block;
    filter: drop-shadow(0 16px 22px rgba(19, 20, 14, .18));
    transition: transform .35s ease, filter .35s ease;
    animation: hero-v3-rise .8s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: calc(var(--i) * .08s + .35s);
}
.hero-v4-box img {
    display: block;
    width: 100%;
    height: auto;
}
.hero-v4-box:hover,
.hero-v4-box:focus-visible {
    z-index: 5;
    transform: translateY(-6%);
    filter: drop-shadow(0 26px 30px rgba(19, 20, 14, .26));
}
@keyframes hero-v4-in {
    from {
        opacity: 0;
        transform: translateY(4%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-v4-person,
    .hero-v4-box { animation: none; transition: none; }
}

@media (max-width: 1199px) {
    .hero-v4 .hero-v2-title {
        font-size: 46px;
    }
}
@media (max-width: 991px) {
    .hero-v4-stage {
        max-width: 600px;
        margin: 40px auto 0;
    }
}
@media (max-width: 575px) {
    .hero-v4 .hero-v2-title {
        font-size: 36px;
    }
}

/* ==========================================================
   Home hero, version 5 (_HeroV5): the .hero-v2 text plus a chip
   row; large overlapping product boxes on a shared floor, with a
   "Dönüşüm Endeksi" card behind the back row.
   Stage units: % of the stage width (--x, --w) and height (--t, --b).
   ========================================================== */
.hero-v5 {
    padding-bottom: 60px;
    background:
        radial-gradient(ellipse 22% 30% at 0% 100%, rgba(120, 190, 70, .28) 0%, rgba(120, 190, 70, 0) 100%),
        radial-gradient(ellipse 18% 34% at 100% 70%, rgba(120, 190, 70, .26) 0%, rgba(120, 190, 70, 0) 100%),
        radial-gradient(circle at 72% 40%, rgba(212, 247, 114, .38) 0%, rgba(212, 247, 114, 0) 45%),
        linear-gradient(180deg, #FBFDF7 0%, #F3F8EA 100%);
}
/* dot grid only in the top-right corner */
.hero-v5::before {
    -webkit-mask-image: radial-gradient(ellipse at 95% 5%, #000 0%, transparent 45%);
    mask-image: radial-gradient(ellipse at 95% 5%, #000 0%, transparent 45%);
}
/* one wide, faint arc sweeping behind the boxes */
.hero-v5::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 1100px;
    aspect-ratio: 1;
    right: -420px;
    top: -260px;
    border-radius: 50%;
    border: 1.5px solid rgba(155, 195, 31, .28);
    pointer-events: none;
}
.hero-v5 .hero-v2-title {
    font-size: 64px;
}

.hero-v5-platform {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hero-v5-platform span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(19, 20, 14, .08);
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    color: #2E9E3E;
}
.hero-v5 .hero-v5-platform p {
    font-size: 16px;
    line-height: 22px;
}

.hero-v5-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 52px;
    padding-top: 30px;
    border-top: 1px solid rgba(19, 20, 14, .08);
}
.hero-v5-chips a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid rgba(19, 20, 14, .08);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 6px 16px -8px rgba(19, 20, 14, .15);
    font-size: 15px;
    font-weight: 500;
    color: var(--title-color);
    transition: .3s;
}
.hero-v5-chips a::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot);
}
.hero-v5-chips a:hover {
    color: var(--title-color);
    border-color: var(--dot);
    transform: translateY(-2px);
}

/* stage: runs a little past the column towards the page edge */
.hero-v5-stage {
    position: relative;
    width: 112%;
    aspect-ratio: 100 / 80;
}
/* soft floor light under the front row */
.hero-v5-stage::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -3%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
    z-index: 0;
}
.hero-v5-box {
    position: absolute;
    left: var(--x);
    width: var(--w);
    top: var(--t, auto);
    bottom: var(--b, auto);
    z-index: var(--z);
    display: block;
    filter: drop-shadow(0 22px 26px rgba(19, 20, 14, .18));
    transition: transform .35s ease, filter .35s ease;
    animation: hero-v3-rise .8s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hero-v5-box:nth-of-type(2) { animation-delay: .1s; }
.hero-v5-box:nth-of-type(3) { animation-delay: .2s; }
.hero-v5-box:nth-of-type(4) { animation-delay: .3s; }
.hero-v5-box:nth-of-type(5) { animation-delay: .4s; }
.hero-v5-box img {
    display: block;
    width: 100%;
    height: auto;
    /* faint mirror on the glossy floor (Chromium/Safari; others simply skip it) */
    -webkit-box-reflect: below 2px linear-gradient(transparent 82%, rgba(255, 255, 255, .22));
}
.hero-v5-box:hover,
.hero-v5-box:focus-visible {
    z-index: 6;
    transform: translateY(-4%);
    filter: drop-shadow(0 30px 34px rgba(19, 20, 14, .26));
}

/* "Dönüşüm Endeksi" glass card, tucked behind MedIQ */
.hero-v5-index {
    position: absolute;
    left: 54.6%;
    top: -1%;
    width: 40%;
    z-index: 0;
    padding: 18px 20px 26%;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 50px -24px rgba(19, 20, 14, .22);
    animation: hero-v4-in .9s .5s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hero-v5-index-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-color);
}
.hero-v5-index-head span i {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border-radius: 8px;
    background: rgba(212, 247, 114, .55);
    color: #3F7A10;
    font-size: 12px;
}
.hero-v5-index-head em {
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(212, 247, 114, .6);
    color: var(--title-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}
.hero-v5-index-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 8px;
}
.hero-v5-index-body strong {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    color: var(--title-color);
}
.hero-v5-index-body small {
    font-size: 12px;
    font-weight: 500;
    color: #3F8A10;
}
.hero-v5-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 54px;
}
.hero-v5-bars i {
    width: 9px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #C6EC5A, #E7F7B4);
}
.hero-v5-bars i:nth-child(1) { height: 22%; }
.hero-v5-bars i:nth-child(2) { height: 34%; }
.hero-v5-bars i:nth-child(3) { height: 46%; }
.hero-v5-bars i:nth-child(4) { height: 60%; }
.hero-v5-bars i:nth-child(5) { height: 78%; }
.hero-v5-bars i:nth-child(6) { height: 100%; background: linear-gradient(180deg, #9BC31F, #D4F772); }

@media (prefers-reduced-motion: reduce) {
    .hero-v5-box,
    .hero-v5-index { animation: none; transition: none; }
}

@media (max-width: 1399px) {
    .hero-v5 .hero-v2-title { font-size: 56px; }
    .hero-v5-index { padding: 14px 16px 24%; }
    .hero-v5-index-body strong { font-size: 24px; }
    .hero-v5-bars { height: 40px; }
}
@media (max-width: 1199px) {
    .hero-v5 .hero-v2-title { font-size: 48px; }
    .hero-v5-index-body small { display: none; }
}
@media (max-width: 991px) {
    .hero-v5-stage {
        width: 100%;
        max-width: 620px;
        margin: 48px auto 0;
    }
    .hero-v5-chips { margin-top: 36px; }
}
@media (max-width: 575px) {
    .hero-v5 .hero-v2-title { font-size: 38px; }
    .hero-v5-chips a { padding: 7px 14px; font-size: 14px; }
    /* the card is too small to read at phone width; the boxes carry the visual */
    .hero-v5-index { display: none; }
    .hero-v5-stage { margin-top: 36px; }
}

/* ==========================================================
   Home hero, version 6 (_HeroV6): the .hero-v2 text; a laptop
   and a phone showing a ROTA dashboard built in HTML/CSS.
   Inside .hero-v6-stage every size is in cqw (1cqw = 1% of the
   stage width), so the mock-up scales like a picture.
   ========================================================== */
.hero-v6 {
    padding-bottom: 70px;
    background:
        radial-gradient(ellipse 20% 32% at 100% 55%, rgba(110, 185, 60, .30) 0%, rgba(110, 185, 60, 0) 100%),
        radial-gradient(ellipse 24% 26% at 0% 100%, rgba(110, 185, 60, .22) 0%, rgba(110, 185, 60, 0) 100%),
        radial-gradient(circle at 62% 30%, rgba(212, 247, 114, .35) 0%, rgba(212, 247, 114, 0) 45%),
        linear-gradient(180deg, #FFFFFF 0%, #F4F8EC 100%);
    /* dashboard accent; recoloured by product editions such as .hero-v7 */
    --hv-accent: #8DBA1C;
    --hv-soft: rgba(212, 247, 114, .6);
    --hv-area: rgba(155, 195, 31, .16);
    --hv-mark: #DDF59A;
}
.hero-v6::before {
    display: none;
}
.hero-v6 .hero-v2-title {
    font-size: 62px;
}
.hero-v6 .hero-v2-title mark {
    padding: 0 .12em;
    border-radius: .28em;
    background: var(--hv-mark);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.hero-v6 .hero-v6-note {
    padding-left: 22px;
    border-left: 1px solid rgba(19, 20, 14, .15);
    font-size: 16px;
    line-height: 22px;
}

.hero-v6-stage {
    container-type: inline-size;
    position: relative;
    width: 108%;
    aspect-ratio: 100 / 64;
}
/* table shadow under both devices */
.hero-v6-stage::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -2cqw;
    height: 6cqw;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(19, 20, 14, .18), rgba(19, 20, 14, 0));
    z-index: -1;
}

/* --- devices --- */
.hv6-laptop {
    position: absolute;
    left: 0;
    top: 2cqw;
    width: 86cqw;
    transform: perspective(240cqw) rotateY(-7deg);
    transform-origin: left center;
    animation: hero-v4-in 1s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hv6-lid {
    position: relative;
    padding: 1.3cqw;
    border-radius: 2.4cqw 2.4cqw .8cqw .8cqw;
    background: #151617;
    box-shadow: 0 0 0 .25cqw #3A3C40, 0 3cqw 6cqw -2cqw rgba(19, 20, 14, .35);
}
.hv6-lid::before {                      /* camera */
    content: "";
    position: absolute;
    top: .5cqw;
    left: 50%;
    width: .45cqw;
    height: .45cqw;
    border-radius: 50%;
    background: #33363A;
}
.hv6-screen {
    aspect-ratio: 16 / 10;
    border-radius: .6cqw;
    overflow: hidden;
    display: grid;
    grid-template-columns: 11.5cqw 1fr;
}
.hv6-base {
    position: relative;
    left: -5%;
    width: 110%;
    height: 1.8cqw;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: linear-gradient(180deg, #F1F2F3 0%, #C9CCD0 55%, #9EA2A7 100%);
}
.hv6-base::before {                     /* thumb notch */
    content: "";
    position: absolute;
    left: 42%;
    width: 16%;
    height: .55cqw;
    border-radius: 0 0 .6cqw .6cqw;
    background: #B4B8BD;
}
.hv6-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22cqw;
    aspect-ratio: 9 / 19.5;
    padding: .8cqw;
    border-radius: 3.6cqw;
    background: #1A1B1D;
    box-shadow: 0 0 0 .3cqw #4A4D52, 0 3cqw 5cqw -1.5cqw rgba(19, 20, 14, .4);
    z-index: 2;
    animation: hero-v3-rise .9s .35s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hv6-phone-screen {
    position: relative;
    height: 100%;
    padding: 0 1.2cqw;
    border-radius: 2.9cqw;
    overflow: hidden;
}

/* --- dashboard (shared by laptop and phone) --- */
.hv6-dash {
    background: #F6F8F3;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: .9cqw;
    line-height: 1.3;
}
.hv6-dash b { font-weight: 600; }
.hv6-dash small {
    display: block;
    font-size: .68cqw;
    color: #7A7D74;
}
.hv6-dash ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hv6-select {
    padding: .3cqw .7cqw;
    border: 1px solid #E4E7DE;
    border-radius: 2cqw;
    background: #fff;
    font-size: .7cqw;
    white-space: nowrap;
}
.hv6-card {
    padding: 1cqw 1.2cqw;
    border-radius: .9cqw;
    background: #fff;
    box-shadow: 0 .3cqw 1cqw rgba(19, 20, 14, .05);
}
.hv6-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85cqw;
}
.hv6-big {
    margin-top: .4cqw;
    font-size: 2cqw;
    font-weight: 700;
    line-height: 1.1;
}
.hv6-big small {
    display: inline;
    font-size: .68cqw;
    font-weight: 500;
    color: #3F8A10;
}
.hv6-dash svg {
    display: block;
    width: 100%;
    height: 7.5cqw;
    margin-top: .6cqw;
    overflow: visible;
}
.hv6-dash svg .grid {
    stroke: #EEF0EA;
    vector-effect: non-scaling-stroke;
}
.hv6-dash svg .area {
    fill: var(--hv-area);
}
.hv6-dash svg .line {
    fill: none;
    stroke: var(--hv-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hero-v2-draw 1.6s .8s ease-out forwards;
}
.hv6-months {
    display: flex;
    justify-content: space-between;
    margin-top: .3cqw;
    font-size: .6cqw;
    color: #9A9D94;
}
.hv6-mini {
    display: flex;
    align-items: flex-end;
    gap: .18cqw;
    height: 1.5cqw;
}
.hv6-mini i {
    width: .38cqw;
    border-radius: .1cqw;
    background: var(--c);
    opacity: .35;
}
.hv6-mini i:nth-child(1) { height: 35%; }
.hv6-mini i:nth-child(2) { height: 50%; }
.hv6-mini i:nth-child(3) { height: 45%; }
.hv6-mini i:nth-child(4) { height: 72%; opacity: .6; }
.hv6-mini i:nth-child(5) { height: 100%; opacity: 1; }

/* laptop: sidebar */
.hv6-side {
    padding: 1.4cqw .9cqw;
    border-right: 1px solid #ECEEE7;
    background: #fff;
}
.hv6-side img {
    width: 7cqw;
    margin: 0 0 1.4cqw .5cqw;
}
.hv6-side li {
    display: flex;
    align-items: center;
    gap: .6cqw;
    margin-bottom: .25cqw;
    padding: .55cqw .6cqw;
    border-radius: .6cqw;
    font-size: .75cqw;
    color: #6B6E66;
}
.hv6-side li i {
    width: 1cqw;
    text-align: center;
}
.hv6-side li.is-active {
    background: var(--hv-soft);
    color: var(--title-color);
    font-weight: 600;
}

/* laptop: main column */
.hv6-main {
    display: flex;
    flex-direction: column;
    gap: .9cqw;
    min-width: 0;
    padding: 1.1cqw 1.5cqw;
}
.hv6-top {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
}
.hv6-search {
    flex: 1;
    max-width: 24cqw;
    padding: .45cqw .9cqw;
    border: 1px solid #E6E9E1;
    border-radius: 2cqw;
    background: #fff;
    font-size: .7cqw;
    color: #9A9D94;
}
.hv6-search i { margin-right: .5cqw; }
.hv6-top > i { margin-left: auto; }
.hv6-user {
    display: flex;
    align-items: center;
    gap: .5cqw;
    font-size: .7cqw;
}
.hv6-user img {
    width: 2.1cqw;
    height: 2.1cqw;
    border-radius: 50%;
    object-fit: cover;
}
.hv6-user small { font-size: .6cqw; font-weight: 400; }
.hv6-hello {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hv6-hello b {
    font-size: 1.45cqw;
    font-weight: 700;
}
.hv6-modules {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .7cqw;
}
.hv6-module {
    padding: .8cqw .8cqw .7cqw;
    border-radius: .8cqw;
    background: #fff;
    box-shadow: 0 .3cqw 1cqw rgba(19, 20, 14, .05);
}
.hv6-module > i {
    font-size: 1.3cqw;
    color: var(--c);
}
.hv6-module > b {
    display: block;
    margin-top: .4cqw;
    color: var(--c);
    font-size: .9cqw;
    font-weight: 700;
}
.hv6-module > small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .58cqw;
}
.hv6-score {
    display: block;
    margin: .5cqw 0 .4cqw;
    font-size: 1.15cqw;
    font-weight: 700;
}
.hv6-score small {
    display: inline;
    font-size: .6cqw;
    font-weight: 400;
}
.hv6-score em {
    font-size: .6cqw;
    font-style: normal;
    font-weight: 600;
    color: #3F8A10;
}
.hv6-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: .9cqw;
}
.hv6-impact ul {
    margin-top: .8cqw;
}
.hv6-impact li {
    display: grid;
    grid-template-columns: 1.6cqw 1fr auto auto;
    align-items: center;
    gap: .6cqw;
    padding: .65cqw 0;
    border-bottom: 1px solid #F0F2EC;
    font-size: .72cqw;
    color: #5F625A;
}
.hv6-impact li:last-child { border-bottom: 0; }
.hv6-impact li i { color: var(--c); font-size: .95cqw; }
.hv6-impact li b { color: var(--title-color); }
.hv6-dash em {
    font-style: normal;
}
.hv6-impact li em,
.hv6-reports li em {
    padding: .15cqw .5cqw;
    border-radius: 1cqw;
    background: rgba(212, 247, 114, .5);
    color: #3F7A10;
    font-size: .6cqw;
    font-weight: 600;
}
.hv6-reports ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1cqw;
    margin-top: .7cqw;
}
.hv6-reports li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .2cqw .6cqw;
    font-size: .68cqw;
}
.hv6-reports li > i { color: var(--hv-accent); font-size: .9cqw; }
.hv6-reports li em { grid-column: 2; justify-self: start; }
.hv6-reports small { font-size: .56cqw; }

/* phone */
.hv6-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1cqw .5cqw .6cqw;
    font-size: .75cqw;
}
.hv6-island {
    position: absolute;
    top: .7cqw;
    left: 50%;
    width: 6cqw;
    height: 1.7cqw;
    margin-left: -3cqw;
    border-radius: 1cqw;
    background: #0B0B0C;
}
.hv6-status span:last-child { font-size: .6cqw; }
.hv6-phone-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .6cqw 0 1cqw;
    font-size: 1cqw;
}
.hv6-phone-top img { width: 6.5cqw; }
.hv6-phone-screen .hv6-hello b { font-size: 1.25cqw; }
.hv6-phone-screen .hv6-index {
    margin-top: .9cqw;
    padding: .9cqw 1cqw;
}
.hv6-phone-screen .hv6-big { font-size: 1.7cqw; }
.hv6-phone-screen svg { height: 4.5cqw; }
.hv6-dash .hv6-list {
    margin-top: .8cqw;
}
.hv6-list li {
    display: grid;
    grid-template-columns: 1.8cqw 1fr auto .8cqw;
    align-items: center;
    gap: .6cqw;
    margin-bottom: .55cqw;
    padding: .75cqw .8cqw;
    border-radius: .9cqw;
    background: #fff;
    font-size: .78cqw;
}
.hv6-list li > i:first-child { color: var(--c); font-size: 1.1cqw; }
.hv6-list li > i:last-child { color: #A5A89F; font-size: .7cqw; }
.hv6-list b { color: var(--c); font-weight: 700; }
.hv6-list small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .55cqw;
}

@media (prefers-reduced-motion: reduce) {
    .hv6-laptop,
    .hv6-phone { animation: none; }
    .hv6-dash svg .line { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 1399px) {
    .hero-v6 .hero-v2-title { font-size: 54px; }
}
@media (max-width: 1199px) {
    .hero-v6 .hero-v2-title { font-size: 46px; }
}
@media (max-width: 991px) {
    .hero-v6-stage {
        width: 100%;
        max-width: 680px;
        margin: 48px auto 0;
    }
}
@media (max-width: 575px) {
    .hero-v6 .hero-v2-title { font-size: 38px; }
}

/* ==========================================================
   Home hero slider (Index): V6 then V2 in a Swiper.
   Slides share the tallest slide's height; controls sit at the
   bottom centre, the arrows move to the sides on wide screens.
   ========================================================== */
.hero-slider {
    --swiper-pagination-bullet-horizontal-gap: 0;   /* spacing comes from the dots' flex gap */
    margin: 0 10px;
    border-radius: 20px 20px 0 0;
}
.hero-slider .swiper-slide {
    display: flex;
    height: auto;
}
.hero-slider .hero-v2 {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding-bottom: 90px;      /* room for the dots */
    border-radius: 0;
}
.hero-slider-dots.swiper-pagination-bullets {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 5;
    display: flex;
    gap: 8px;
    width: auto;
    transform: translateX(-50%);
}
.hero-slider-dots .swiper-pagination-bullet {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: rgba(19, 20, 14, .18);
    opacity: 1;
    overflow: hidden;
    transition: width .3s ease;
}
.hero-slider-dots .swiper-pagination-bullet-active {
    width: 42px;
}
/* timer fill inside the active dot */
.hero-slider-dots .swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--title-color);
    transform-origin: left center;
    transform: scaleX(var(--hero-slider-progress, 1));
}
.hero-slider-arrow {
    position: absolute;
    bottom: 20px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(19, 20, 14, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
    color: var(--title-color);
    font-size: 14px;
    cursor: pointer;
    transition: .3s;
}
.hero-slider-prev { left: calc(50% - 100px); }
.hero-slider-next { right: calc(50% - 100px); }
.hero-slider-arrow:hover {
    border-color: var(--title-color);
    background: var(--title-color);
    color: #fff;
}
.hero-slider-arrow.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}
/* wide screens: arrows on the left and right edges, clear of the 1320px container */
@media (min-width: 1500px) {
    .hero-slider-arrow {
        top: 50%;
        bottom: auto;
        width: 48px;
        height: 48px;
        margin-top: -24px;
        font-size: 16px;
    }
    .hero-slider-prev { left: 24px; }
    .hero-slider-next { right: 24px; }
}
@media (max-width: 991px) {
    .hero-slider .hero-v2 { padding-bottom: 80px; }
    .hero-slider-dots.swiper-pagination-bullets { bottom: 26px; }
    .hero-slider-arrow { bottom: 14px; }
}

/* ==========================================================
   Home hero, version 7 (_HeroV7): DIMA edition of version 6.
   Reuses .hero-v6 / .hv6-* and swaps the accent to blue; the
   .hv7-* parts are the digital-maturity cards. Sizes in cqw.
   ========================================================== */
.hero-v7 {
    --hv-accent: #2F7BF6;
    --hv-soft: rgba(47, 123, 246, .12);
    --hv-area: rgba(47, 123, 246, .14);
    --hv-mark: var(--primary-color);
    --hv-up: #1E9E4A;
    /* the theme's original hero ground: lime at the top fading to white */
    background: linear-gradient(360deg, #FFFFFF 0%, #D4F772 100%);
}
.hero-v7 .hero-v2-eyebrow i {
    background: var(--hv-accent);
    box-shadow: 0 0 0 4px rgba(47, 123, 246, .18);
}
.hero-v7 .hero-v2-btn i {
    background: var(--hv-accent);
    color: #fff;
}
.hero-v7 .hv6-side li.is-active {
    color: var(--hv-accent);
}
.hero-v7 .hv6-card-head b i {
    margin-right: .3cqw;
    color: var(--hv-accent);
}
.hero-v7 .hv6-card-head b small {
    font-weight: 400;
}

/* first row: score / priorities / roadmap */
.hv7-row3 {
    display: grid;
    grid-template-columns: .8fr 1.15fr 1fr;
    gap: .9cqw;
}
.hv7-score {
    text-align: center;
}
.hv7-donut {
    position: relative;
    width: 8.6cqw;
    margin: .8cqw auto .5cqw;
}
.hv6-dash .hv7-donut svg {
    width: 100%;
    height: auto;
    margin: 0;
    transform: rotate(-90deg);
}
.hv7-donut circle {
    fill: none;
    stroke-width: 9;
}
.hv7-donut .track {
    stroke: #E6ECF6;
}
.hv7-donut .value {
    stroke: var(--hv-accent);
    stroke-linecap: round;
    animation: hv7-donut 1.4s .6s ease-out backwards;
}
@keyframes hv7-donut {
    from { stroke-dashoffset: 205.8; }   /* = the filled length, so it starts empty */
}
.hv7-donut > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 32%;
}
.hv7-donut b {
    font-size: 2.1cqw;
    font-weight: 700;
    line-height: 1;
}
.hv7-donut small {
    display: inline;
}
.hv6-dash .hv7-up {
    display: block;
    font-size: .72cqw;
    font-weight: 600;
    color: var(--hv-up);
}

.hv7-priorities ul,
.hv7-roadmap ul,
.hv7-perf ul {
    margin-top: .6cqw;
}
.hv7-priorities li {
    display: flex;
    align-items: center;
    gap: .5cqw;
    padding: .38cqw 0;
    font-size: .7cqw;
    color: #4E525B;
}
.hv7-priorities li > i {
    color: var(--hv-accent);
    font-size: .75cqw;
}
.hv7-priorities em {
    margin-left: auto;
    padding: .12cqw .55cqw;
    border-radius: 1cqw;
    font-size: .58cqw;
    font-weight: 600;
}
.hv7-priorities em.is-high { background: #FDE4E4; color: #D23B3B; }
.hv7-priorities em.is-mid  { background: #FFEBD6; color: #C9670E; }
.hv7-priorities em.is-low  { background: #DCF4E3; color: #1E8A43; }

.hv7-roadmap > small {
    margin-top: .2cqw;
}
.hv7-progress {
    position: relative;
    height: .5cqw;
    margin: .6cqw 2.8cqw .5cqw 0;
    border-radius: .5cqw;
    background: #E6ECF6;
}
.hv7-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--hv-accent);
}
.hv7-progress em {
    position: absolute;
    right: -2.8cqw;
    top: 50%;
    transform: translateY(-50%);
    font-size: .62cqw;
    font-weight: 600;
    color: var(--hv-accent);
}
.hv7-roadmap li {
    display: flex;
    align-items: center;
    gap: .45cqw;
    padding: .22cqw 0;
    font-size: .66cqw;
    color: #6B6F78;
}
.hv7-roadmap li i {
    color: #C4CAD4;
    font-size: .75cqw;
}
.hv7-roadmap li.is-done {
    color: var(--title-color);
}
.hv7-roadmap li.is-done i {
    color: var(--hv-accent);
}

/* second row, right: performance */
.hv7-perf li {
    --c: var(--hv-accent);
    display: grid;
    grid-template-columns: 1.4cqw 1fr auto auto;
    align-items: center;
    gap: .6cqw;
    padding: .55cqw 0;
    border-bottom: 1px solid #EEF1F6;
    font-size: .72cqw;
    color: #4E525B;
}
.hv7-perf li:last-child { border-bottom: 0; }
.hv7-perf li > i { color: var(--hv-accent); font-size: .85cqw; }
.hv7-perf em {
    font-size: .68cqw;
    font-weight: 600;
    color: var(--hv-up);
}

/* phone */
.hero-v7 .hv6-phone-top span {
    display: flex;
    gap: .8cqw;
}
.hero-v7 .hv6-phone-screen .hv6-card {
    margin-top: .7cqw;
    padding: .9cqw 1cqw;
}
.hv6-phone-screen .hv7-donut {
    width: 8cqw;
}
.hv6-dash .hv7-phone-chart {
    height: 3.6cqw;
    margin-top: .6cqw;
}
.hv6-phone-screen .hv7-priorities li {
    font-size: .62cqw;
}
.hv7-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6cqw;
    margin-top: .9cqw;
    padding: .8cqw;
    border-radius: 2cqw;
    background: #0E2A5C;
    color: #fff;
    font-size: .75cqw;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .hv7-donut .value { animation: none; }
}

/* ==========================================================
   Home hero, version 8 (_HeroV8): MedIQ edition of version 6.
   Reuses .hero-v6 / .hv6-* with a navy + teal accent; .hv8-* are
   the wordmark, the four-step strip and the MedIQ cards (cqw).
   ========================================================== */
.hero-v8 {
    --hv-accent: #16B79B;
    --hv-soft: rgba(30, 111, 224, .1);
    --hv-area: rgba(22, 183, 155, .16);
    --hv-up: #16A34A;
    --hv8-navy: #0B2F6B;
    --hv8-red: #E23B4E;
    --hv8-red-soft: #FDECEE;
    background:
        radial-gradient(ellipse 22% 30% at 96% 4%, rgba(226, 59, 78, .14) 0%, rgba(226, 59, 78, 0) 100%),
        radial-gradient(ellipse 30% 40% at 78% 8%, rgba(120, 175, 240, .30) 0%, rgba(120, 175, 240, 0) 100%),
        radial-gradient(ellipse 20% 30% at 100% 60%, rgba(22, 183, 155, .16) 0%, rgba(22, 183, 155, 0) 100%),
        radial-gradient(ellipse 26% 30% at 0% 100%, rgba(120, 175, 240, .20) 0%, rgba(120, 175, 240, 0) 100%),
        linear-gradient(180deg, #FFFFFF 0%, #EEF4FB 100%);
}
.hero-v8 .hv6-side li.is-active { color: #1E6FE0; }
.hero-v8 .hero-v2-btn {
    background: var(--hv8-navy);
}
.hero-v8 .hero-v2-btn i {
    background: var(--hv8-red);
    color: #fff;
}

/* left column */
.hv8-wordmark {
    display: inline-block;
    font-size: 104px;
    line-height: .95;
    font-weight: 800;
    letter-spacing: -4px;
    background: linear-gradient(90deg, #0B2F6B 0%, #0D4DA6 48%, #16B79B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hv8-wordmark sup {
    top: -2.4em;
    margin-left: 4px;
    font-size: 22px;
    letter-spacing: 0;
    -webkit-text-fill-color: var(--hv8-navy);
}
.hero-v8 .hv8-title {
    margin-top: 14px;
    font-size: 40px;
    line-height: 1.18;
    font-weight: 700;
    color: var(--hv8-navy);
}
.hv8-rule {
    display: block;
    width: 72px;
    height: 4px;
    margin: 22px 0 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1E6FE0, #2FD6B8);
}
/* ECG line under the title, drawn in once then left as a static trace */
.hv8-pulse {
    display: block;
    width: 160px;
    height: 24px;
    margin: 20px 0 18px;
    overflow: visible;
}
.hv8-pulse path {
    fill: none;
    stroke: var(--hv8-red);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hv8-pulse-draw 1.6s .4s ease-out forwards;
}
@keyframes hv8-pulse-draw {
    to { stroke-dashoffset: 0; }
}
.hero-v8 .hero-v2-lead {
    max-width: 520px;
}
.hv8-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.hv8-steps span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px -10px rgba(11, 47, 107, .35);
    font-size: 22px;
    color: #1E6FE0;
}
.hero-v8 .hv8-steps span {
    background: var(--hv8-red-soft);
    box-shadow: 0 8px 20px -12px rgba(226, 59, 78, .55);
    color: var(--hv8-red);
}
.hv8-steps b {
    display: block;
    font-size: 16px;
    color: var(--hv8-navy);
}
.hv8-steps small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-color);
}
.hero-v8 .hero-v2-actions {
    margin-top: 30px;
}

/* floating glass tiles over the stage */
.hv8-glass {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 8cqw;
    height: 8cqw;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 2cqw;
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    box-shadow: 0 1.5cqw 3cqw -1cqw rgba(11, 47, 107, .25);
    font-size: 3.6cqw;
    color: #7FB2EE;
    animation: hero-v2-float 6s ease-in-out infinite;
}
.hv8-glass--plus { right: 18cqw; top: -7cqw; }
.hv8-glass--heart { right: 1cqw; top: -3cqw; animation-delay: -3s; color: var(--hv8-red); }
.hv8-glass--steth { left: -5cqw; bottom: 12cqw; animation-delay: -1.5s; color: #E8667A; }
.hv8-glass--beat {
    left: 34cqw;
    top: -6cqw;
    width: 6cqw;
    height: 6cqw;
    border-radius: 50%;
    font-size: 2.6cqw;
    color: var(--hv8-red);
    animation-delay: -4.5s;
}
.hv8-glass--beat i { animation: hv8-heartbeat 1.4s ease-in-out infinite; }
@keyframes hv8-heartbeat {
    0%, 40%, 100% { transform: scale(1); }
    10% { transform: scale(1.18); }
    20% { transform: scale(.96); }
    30% { transform: scale(1.12); }
}

/* laptop */
.hv8-side-mark {
    display: inline-block;
    font-size: 1.7cqw;
    font-weight: 800;
    letter-spacing: -.05cqw;
    background: linear-gradient(90deg, #0B2F6B, #16B79B);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hv6-side .hv8-side-mark {
    margin: 0 0 1.4cqw .5cqw;
}
.hv8-top {
    justify-content: flex-end;
}
.hv8-top > i { margin-left: 0; }
.hv8-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .9cqw;
}
.hv8-kpi .hv6-card-head b i,
.hv8-phone-kpi small i,
.hv8-jci .hv6-card-head b i {
    margin-right: .2cqw;
    color: #1E6FE0;
}
.hv8-kpi-value {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: .6cqw 0 .4cqw;
}
.hv8-kpi-value strong {
    font-size: 2.2cqw;
    font-weight: 700;
    line-height: 1;
}
.hv8-kpi-value strong small {
    display: inline;
    font-weight: 400;
    font-size: .8cqw;
}
.hv8-kpi-value em {
    font-size: .7cqw;
    font-weight: 600;
    color: var(--hv-up);
}
.hv8-kpi > small mark {
    padding: 0 .3cqw;
    border-radius: .3cqw;
    background: #DDF5E6;
    color: #15803D;
}
.hv8-kpi > small { color: #16A34A; }
.hv8-bars ul { margin-top: .9cqw; }
.hv8-bars li {
    display: grid;
    grid-template-columns: 7.5cqw 1fr 1.4cqw;
    align-items: center;
    gap: .7cqw;
    padding: .42cqw 0;
    font-size: .7cqw;
    color: #4E525B;
}
.hv8-bars li i {
    height: .75cqw;
    border-radius: .2cqw;
    background: linear-gradient(90deg, var(--c) var(--v), #EEF1F6 var(--v));
}
.hv8-bars li b {
    text-align: right;
    font-size: .7cqw;
}

/* phone */
.hero-v8 .hv6-phone-screen .hv6-card {
    margin-top: .7cqw;
    padding: .8cqw 1cqw;
}
.hero-v8 .hv6-phone-top {
    margin-bottom: .4cqw;
}
.hero-v8 .hv6-phone-top .hv8-side-mark { font-size: 1.4cqw; }
.hv8-phone-kpi .hv8-kpi-value { margin: 0; }
.hv8-phone-kpi .hv8-kpi-value strong { font-size: 1.6cqw; }
.hv8-phone-kpi .hv8-kpi-value strong > small:first-child {
    display: block;
    margin-bottom: .3cqw;
    font-size: .6cqw;
    font-weight: 600;
    color: var(--title-color);
}
.hv6-dash .hv8-phone-kpi svg {
    height: 3cqw;
    margin-top: .4cqw;
}
.hv8-violet {
    --hv-accent: #7C6CF0;
    --hv-area: rgba(124, 108, 240, .16);
}
.hv8-jci-body {
    display: flex;
    align-items: center;
    gap: .8cqw;
    margin-top: .5cqw;
}
.hv8-ring {
    position: relative;
    flex: none;
    width: 6.4cqw;
}
.hv6-dash .hv8-ring svg {
    width: 100%;
    height: auto;
    margin: 0;
    transform: rotate(-90deg);
}
.hv8-ring circle {
    fill: none;
    stroke-width: 11;
}
.hv8-ring .track { stroke: #EEF1F6; }
.hv8-ring b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.2cqw;
    font-weight: 700;
}
.hv8-jci ul li {
    display: flex;
    align-items: center;
    gap: .35cqw;
    padding: .12cqw 0;
    font-size: .52cqw;
    color: #4E525B;
}
.hv8-jci ul li::before {
    content: "";
    width: .5cqw;
    height: .5cqw;
    border-radius: 50%;
    background: var(--c);
}
.hv8-tabs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    padding: .8cqw .6cqw 1.3cqw;
    border-top: 1px solid #EEF1F6;
    background: #fff;
}
.hv8-tabs span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25cqw;
    font-size: .5cqw;
    color: #8A8F99;
}
.hv8-tabs i { font-size: .9cqw; }
.hv8-tabs .is-active { color: #1E6FE0; }

@media (prefers-reduced-motion: reduce) {
    .hv8-glass,
    .hv8-glass--beat i { animation: none; }
    .hv8-pulse path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 1399px) {
    .hv8-wordmark { font-size: 88px; }
    .hero-v8 .hv8-title { font-size: 34px; }
}
@media (max-width: 1199px) {
    .hv8-wordmark { font-size: 76px; letter-spacing: -3px; }
    .hero-v8 .hv8-title { font-size: 30px; }
    .hv8-steps small { display: none; }
}
@media (max-width: 575px) {
    .hv8-wordmark { font-size: 64px; }
    .hero-v8 .hv8-title { font-size: 26px; }
    .hv8-steps { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
    .hv8-steps small { display: block; }
}

/* ==========================================================
   Home hero, version 9 (_HeroV9): CORIS edition. Inherits the
   version 8 layout (.hero-v8 / .hv8-*) and swaps to navy + green;
   .hv9-* are the CORIS-only card parts (cqw inside the stage).
   ========================================================== */
.hero-v9 {
    --hv-accent: #1FAE6E;
    --hv-area: rgba(31, 174, 110, .16);
    --hv8-navy: #0B2A5C;
    background:
        radial-gradient(ellipse 30% 40% at 80% 6%, rgba(90, 200, 190, .26) 0%, rgba(90, 200, 190, 0) 100%),
        radial-gradient(ellipse 20% 30% at 100% 60%, rgba(31, 174, 110, .16) 0%, rgba(31, 174, 110, 0) 100%),
        radial-gradient(ellipse 26% 30% at 0% 100%, rgba(120, 175, 240, .18) 0%, rgba(120, 175, 240, 0) 100%),
        linear-gradient(180deg, #FFFFFF 0%, #EEF5F6 100%);
}
.hero-v9 .hv8-wordmark,
.hero-v9 .hv8-side-mark {
    background-image: linear-gradient(90deg, #0B2A5C 0%, #0B2A5C 18%, #14A66A 30%, #0E7D63 42%, #0B2A5C 56%, #0B2A5C 100%);
}
.hero-v9 .hero-v2-btn i {
    background: #2FD69A;
    color: var(--hv8-navy);
}
.hero-v9 .hv8-rule {
    background: linear-gradient(90deg, #1E6FE0, #2FD69A);
}
.hero-v9 .hv8-steps span {
    background: #E3F6EC;
    box-shadow: none;
    color: var(--hv8-navy);
}

/* laptop */
.hero-v9 .hv8-kpis {
    grid-template-columns: repeat(4, 1fr);
}
.hero-v9 .hv6-hello b {
    font-size: 1.25cqw;
}
.hv6-dash .is-muted {
    color: #7A7D74;
}
.hero-v9 .hv8-kpi-value em {
    padding: .1cqw .4cqw;
    border-radius: .3cqw;
    background: #DDF5E6;
}
.hv9-meter {
    display: block;
    height: .45cqw;
    margin-bottom: .5cqw;
    border-radius: .45cqw;
    background: linear-gradient(90deg, var(--c) var(--v), #EEF1F6 var(--v));
}
.hv9-level {
    padding: .2cqw .6cqw;
    border-radius: .4cqw;
    background: #F5A524;
    color: #fff;
    font-size: .8cqw;
}
.hv9-signal {
    display: flex;
    align-items: flex-end;
    gap: .18cqw;
    height: 1.4cqw;
}
.hv9-signal i {
    width: .38cqw;
    border-radius: .1cqw;
    background: #F5A524;
}
.hv9-signal i:nth-child(1) { height: 40%; }
.hv9-signal i:nth-child(2) { height: 70%; }
.hv9-signal i:nth-child(3) { height: 100%; }
.hv9-alert {
    margin-left: .3cqw;
    font-size: 1.2cqw;
    color: #E5484D;
}
.hero-v9 .hv8-kpi > small i {
    color: #16A34A;
}
.hero-v9 .hv9-row {
    grid-template-columns: 1fr 1fr;
}
.hero-v9 .hv8-bars .hv6-card-head b i {
    margin-right: .3cqw;
    color: var(--hv8-navy);
}

/* floating glass tiles */
.hv9-glass--alert { right: 20cqw; top: -8cqw; color: #43C9C0; }
.hv9-glass--chart { right: 2cqw; top: -4cqw; color: #43C9C0; animation-delay: -3s; }

/* phone */
.hv6-phone-screen .hv8-bars ul { margin-top: .5cqw; }
.hv6-phone-screen .hv8-bars li {
    grid-template-columns: 6cqw 1fr 1.1cqw;
    gap: .4cqw;
    padding: .22cqw 0;
    font-size: .55cqw;
}
.hv6-phone-screen .hv8-bars li i { height: .55cqw; }
.hv6-phone-screen .hv8-bars li b { font-size: .55cqw; }
.hv6-dash .hv9-phone-note {
    margin-top: .3cqw;
    font-size: .55cqw;
    color: #16A34A;
}
.hv9-warn {
    display: flex;
    align-items: flex-start;
    gap: .8cqw;
}
.hv9-warn > i {
    font-size: 1.8cqw;
    color: #F0643C;
}
.hv9-warn b {
    display: block;
    font-size: .7cqw;
}
.hv9-warn strong {
    display: block;
    font-size: 1.6cqw;
    line-height: 1.1;
}
.hv9-warn small {
    font-size: .55cqw;
}

/* ==========================================================
   Phone layout for the V6–V9 heroes: content starts right under
   the mobile bar instead of floating in the middle of the
   slider's shared height, tighter type and spacing, and the
   MedIQ / CORIS steps become one compact row of four.
   ========================================================== */
@media (max-width: 767px) {
    .hero-v6 {
        padding-top: 92px;
        padding-bottom: 44px;
    }
    .hero-slider .hero-v6 {
        align-items: flex-start;
    }
    .hero-v6 .hero-v2-eyebrow {
        padding: 5px 14px 5px 10px;
        font-size: 13px;
    }
    .hero-v6 .hero-v2-title {
        margin: 16px 0 14px;
        font-size: 34px;
        letter-spacing: -.8px;
    }
    .hero-v6 .hero-v2-lead {
        font-size: 15px;
        line-height: 24px;
    }
    .hero-v6 .hero-v2-actions,
    .hero-v8 .hero-v2-actions {
        gap: 14px 18px;
        margin-top: 24px;
    }
    .hero-v6 .hero-v6-note {
        padding-left: 18px;
        font-size: 14px;
        line-height: 19px;
    }
    .hero-v6-stage {
        margin-top: 34px;
    }

    .hv8-wordmark {
        font-size: 56px;
        letter-spacing: -2px;
    }
    .hv8-wordmark sup {
        font-size: 16px;
    }
    .hero-v8 .hv8-title {
        margin-top: 10px;
        font-size: 24px;
    }
    .hv8-pulse {
        margin: 14px 0 12px;
    }
    .hv8-rule {
        margin: 16px 0 14px;
    }
    .hv8-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 22px;
    }
    .hv8-steps span {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
        border-radius: 13px;
        font-size: 18px;
    }
    .hv8-steps b {
        font-size: 13px;
        line-height: 17px;
    }
    .hv8-steps small {
        display: none;
    }
}
@media (max-width: 380px) {
    .hero-v6 .hero-v2-title {
        font-size: 30px;
    }
    .hv8-wordmark {
        font-size: 48px;
    }
    .hero-v8 .hv8-title {
        font-size: 22px;
    }
    .hv8-steps b {
        font-size: 12px;
    }
}

/* ==========================================================
   Device screens fill their full height (V6–V9): the card rows
   share the height left over, charts stretch inside their cards
   and lists spread out, so no empty band is left at the bottom.
   ========================================================== */
/* laptop */
.hv6-main > .hv6-row,
.hv6-main > .hv7-row3 {
    flex: 1 1 0;
    min-height: 0;
}
.hv6-row > .hv6-card,
.hv7-row3 > .hv6-card {
    display: flex;
    flex-direction: column;
}
.hv6-dash .hv6-main .hv6-index svg {
    flex: 1 1 auto;
    height: auto;
    min-height: 6cqw;
}
.hv6-row > .hv6-card > ul,
.hv7-row3 > .hv6-card > ul {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.hv7-row3 > .hv7-score {
    justify-content: center;
}

/* phone: the cards grow to share the free height; charts and lists stretch inside them */
.hv6-phone-screen {
    display: flex;
    flex-direction: column;
    padding-bottom: 1cqw;
}
.hv6-phone-screen:has(> .hv8-tabs) {
    padding-bottom: 5.4cqw;         /* keep clear of the bottom tab bar */
}
.hv6-phone-screen > .hv6-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hv6-phone-screen.hv6-dash > .hv6-card > svg {
    flex: 1 1 auto;
    height: auto;
    min-height: 3cqw;
}
.hv6-phone-screen > .hv6-card > ul {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.hv6-phone-screen > .hv7-phone-btn {
    flex: none;
}
/* CORIS early-warning card keeps its icon beside the text */
.hv6-phone-screen > .hv9-warn {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/* DIMA phone: roadmap card */
.hv7-phone-road .hv6-card-head em {
    font-size: .62cqw;
    font-weight: 600;
    color: var(--hv-accent);
}
.hv7-phone-road .hv7-progress {
    margin: .5cqw 0 .4cqw;
}
.hv7-phone-road > small {
    font-size: .55cqw;
}


/*----------  DDX / DDX+ page  ----------*/

.ddx-page .ddx-intro,
.ddx-page .ddx-impact,
.ddx-page .ddx-about,
.ddx-page .ddx-process,
.ddx-page .ddx-incentives {
    margin-bottom: 100px;
}

/* intro */
.ddx-intro {
    margin-bottom: 60px;
}
.ddx-intro-desc {
    margin-bottom: 22px;
    font-size: 17px;
    line-height: 1.65;
}
.ddx-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px;
    padding: 0;
}
.ddx-badges li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--title-color);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
}
.ddx-badges li i {
    color: var(--primary-color);
}

/* impact: numbers + map */
.ddx-impact {
    position: relative;
    overflow: hidden;
    padding: 60px;
    border-radius: 30px;
    background: var(--pt-panel);
}
.ddx-impact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pt-pattern) 0 0 / var(--pt-pattern-size) repeat;
    -webkit-mask-image: radial-gradient(ellipse at 75% 50%, #000 0%, transparent 65%);
    mask-image: radial-gradient(ellipse at 75% 50%, #000 0%, transparent 65%);
    pointer-events: none;
}
.ddx-impact > * {
    position: relative;
}
.ddx-impact-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
}
.ddx-impact-total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.ddx-impact-total strong {
    font-size: 62px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--color-white);
}
.ddx-impact-total span {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary-color);
}
.ddx-impact-lead {
    margin: 10px 0 36px;
    font-size: 22px;
    font-weight: 500;
    color: var(--white-op70);
}
.ddx-impact-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--white-op15);
}
.ddx-impact-stats b {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
}
.ddx-impact-stats span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--white-op60);
}
.ddx-map {
    margin: 0;
}
.ddx-map svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.ddx-map-land {
    fill: rgba(190, 176, 255, .12);
    stroke: rgba(190, 176, 255, .45);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.ddx-map-pin circle {
    fill: var(--primary-color);
}
.ddx-map-pin .ddx-map-ring {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: ddx-ping 2.4s var(--d) ease-out infinite;
}
@keyframes ddx-ping {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(2.8); opacity: 0; }
}
.ddx-map-pin text {
    fill: var(--color-white);
    font-size: 17px;
    font-weight: 600;
    paint-order: stroke;
    stroke: rgba(11, 7, 48, .7);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.ddx-map figcaption {
    margin-top: 14px;
    font-size: 14px;
    text-align: right;
    color: var(--white-op60);
}

/* what is DDX */
.ddx-about-text p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
}
.ddx-about-text b {
    color: var(--title-color);
}
.ddx-plus {
    margin-top: 28px;
    padding: 24px 26px;
    border: 1px dashed rgba(19, 20, 14, .25);
    border-radius: 20px;
    background: var(--bg-color3);
}
.ddx-plus-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 14px;
    border-radius: 8px;
    background: var(--title-color);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-white);
}
.ddx-plus-tag sup {
    color: var(--primary-color);
}
.ddx-plus p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--title-color);
}
.ddx-dims {
    padding: 32px;
    border: 1px solid var(--black-op10);
    border-radius: 28px;
    background: var(--color-white);
    box-shadow: 0 30px 70px var(--black-op10);
}
.ddx-dims-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.ddx-dims-head span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--title-color);
}
.ddx-dims-head em {
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--primary-color);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--title-color);
}
.ddx-dims ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ddx-dims ol li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    transition: background .4s;
}
.ddx-dims ol li + li {
    margin-top: 4px;
}
.ddx-dims ol li:hover {
    background: var(--bg-color1);
}
.ddx-dim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--title-color);
    color: var(--primary-color);
    font-size: 19px;
    transition: .4s;
}
.ddx-dims ol li:hover .ddx-dim-icon {
    background: var(--primary-color);
    color: var(--title-color);
}
.ddx-dims ol li div {
    flex: 1;
}
.ddx-dims ol b {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--title-color);
}
.ddx-dims ol small {
    font-size: 14px;
    color: var(--text-color);
}
.ddx-dim-no {
    font-size: 30px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px var(--black-op15);
}
.ddx-dims-out {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 22px 0 0;
    border-top: 1px dashed var(--black-op15);
}
.ddx-dims-out li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    background: var(--bg-color3);
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
}

/* how we work */
.ddx-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}
.ddx-steps > li {
    position: relative;
    overflow: hidden;
    padding: 34px 30px 30px;
    border: 1px solid var(--black-op10);
    border-radius: 24px;
    background: var(--bg-color1);
    transition: border-color .5s, box-shadow .5s;
}
.ddx-steps > li:hover {
    border-color: var(--title-color);
    box-shadow: 0 20px 50px var(--black-op10);
}
.ddx-step-no {
    position: absolute;
    top: 18px;
    right: 26px;
    font-size: 60px;
    line-height: 1;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px var(--black-op15);
}
.ddx-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--title-color);
    color: var(--primary-color);
    font-size: 21px;
}
.ddx-steps h3 {
    margin: 20px 0 8px;
    font-size: 23px;
    font-weight: 600;
    color: var(--title-color);
}
.ddx-steps p {
    margin: 0;
    color: var(--text-color);
}
/* the DDX study itself: dark card with its three work streams */
.ddx-steps > li.is-main {
    border-color: transparent;
    background: var(--pt-panel);
}
.ddx-steps > li.is-main .ddx-step-no {
    -webkit-text-stroke-color: var(--primary-color);
}
.ddx-steps > li.is-main .ddx-step-icon {
    background: var(--primary-color);
    color: var(--title-color);
}
.ddx-steps > li.is-main h3 {
    font-size: 28px;
    color: var(--color-white);
}
.ddx-steps > li.is-main p {
    color: var(--white-op70);
}
.ddx-steps > li.is-main ul {
    margin: 26px 0 0;
    padding: 0;
}
.ddx-steps > li.is-main ul li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--white-op15);
    border-radius: 14px;
    background: var(--white-op5);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
}
.ddx-steps > li.is-main ul li + li {
    margin-top: 10px;
}
.ddx-steps > li.is-main ul li i {
    width: 18px;
    color: var(--primary-color);
}
.ddx-steps > li.is-optional {
    border-style: dashed;
    border-color: rgba(19, 20, 14, .25);
    background: var(--color-white);
}
.ddx-step-tag {
    display: inline-block;
    margin-top: 14px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--bg-color3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--title-color);
}

/* incentives */
.ddx-incentives {
    position: relative;
    overflow: hidden;
    padding: 70px 60px;
    border-radius: 30px;
    background: var(--pt-panel);
}
.ddx-incentives-desc {
    margin-bottom: 30px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--white-op70);
}
.ddx-kosgeb {
    margin-top: 20px;
    padding: 34px;
    border: 1px solid var(--white-op15);
    border-radius: 24px;
    background: var(--white-op5);
}
.ddx-kosgeb-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}
.ddx-kosgeb-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    color: var(--title-color);
}
.ddx-kosgeb-head h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
}
.ddx-kosgeb-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}
.ddx-kosgeb-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border-radius: 18px;
    background: var(--color-white);
}
.ddx-kosgeb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--title-color);
    color: var(--primary-color);
    font-size: 21px;
}
.ddx-kosgeb-item h4 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--title-color);
}
.ddx-andor {
    padding: 10px 16px;
    border: 2px solid var(--primary-color);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--primary-color);
}
.ddx-kosgeb-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 26px 0 0;
    padding: 0;
}
.ddx-kosgeb-facts li {
    padding: 18px 20px;
    border-left: 3px solid var(--primary-color);
    border-radius: 0 14px 14px 0;
    background: var(--white-op5);
}
.ddx-kosgeb-facts b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
}
.ddx-kosgeb-facts span {
    font-size: 14px;
    line-height: 1.4;
    color: var(--white-op60);
}
.ddx-note {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--white-op60);
}
.ddx-table-wrap {
    margin-top: 40px;
}
.ddx-table-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
}
.ddx-table-title i {
    color: var(--primary-color);
}
.ddx-table-scroll {
    overflow-x: auto;
    border-radius: 20px;
    background: var(--color-white);
}
.ddx-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 15px;
}
.ddx-table th,
.ddx-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--black-op10);
    vertical-align: middle;
}
.ddx-table tbody th {
    font-weight: 600;
    color: var(--title-color);
}
.ddx-table tbody th.is-sub {
    font-weight: 500;
    color: var(--text-color);
}
.ddx-table tbody th[rowspan] {
    border-right: 1px solid var(--black-op10);
}
.ddx-table td {
    text-align: center;
    font-weight: 600;
    color: var(--title-color);
}
.ddx-table td small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
}
.ddx-table thead th {
    border: 0;
    background: var(--title-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-white);
}
.ddx-table thead th:first-child {
    text-align: left;
}
.ddx-table thead th.is-hl {
    background: var(--primary-color);
    color: var(--title-color);
}
.ddx-table td.is-hl {
    background: rgba(212, 247, 114, .22);
}
.ddx-table td.is-none {
    font-weight: 500;
    font-style: italic;
    color: var(--color-gray);
    background: var(--bg-color1);
}
.ddx-table tr:last-child > * {
    border-bottom: 0;
}
.ddx-table-or td {
    padding: 0;
    background: var(--bg-color1);
}
.ddx-table-or span {
    display: inline-block;
    margin: 10px 0;
    padding: 4px 18px;
    border-radius: 20px;
    background: var(--title-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--primary-color);
}

/* why DDX */
.ddx-why .row {
    margin-top: 50px;
}
.ddx-why-card {
    position: relative;
    overflow: hidden;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 34px 28px 30px;
    border: 1px solid var(--black-op10);
    border-radius: 24px;
    background: var(--color-white);
    transition: box-shadow .5s;
}
.ddx-why-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s;
}
.ddx-why-card:hover {
    box-shadow: 0 20px 50px var(--black-op10);
}
.ddx-why-card:hover::before {
    transform: scaleX(1);
}
.ddx-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--title-color);
    color: var(--primary-color);
    font-size: 23px;
}
.ddx-why-card h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--title-color);
}
.ddx-why-card p {
    margin: 0;
}

/* CTA visual: roadmap report card in place of a product box */
.ddx-report {
    padding: 10px 0 30px;
}
.ddx-report-page {
    position: relative;
    padding: 26px 24px 24px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 30px 60px rgba(11, 7, 48, .45);
    rotate: -4deg; /* separate from transform, which the float animation drives */
    animation: product-float 4s ease-in-out infinite alternate;
}
.ddx-report-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--black-op10);
}
.ddx-report-head span {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--pt-navy);
}
.ddx-report-head sup {
    color: #5B45D6;
}
.ddx-report-head small {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-color);
}
.ddx-report-bars {
    margin: 0;
    padding: 0;
}
.ddx-report-bars li + li {
    margin-top: 10px;
}
.ddx-report-bars span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--title-color);
}
.ddx-report-bars i {
    display: block;
    height: 7px;
    border-radius: 7px;
    background: linear-gradient(90deg, #33239E, #8C78FF) 0 0 / var(--v) 100% no-repeat, #EEEBFA;
}
.ddx-report-road {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 4px;
    background: linear-gradient(var(--black-op10), var(--black-op10)) center / 100% 2px no-repeat;
}
.ddx-report-road i {
    width: 14px;
    height: 14px;
    border: 3px solid var(--color-white);
    border-radius: 50%;
    background: #5B45D6;
    box-shadow: 0 0 0 1px #5B45D6;
}
.ddx-report-road i:last-child {
    background: var(--primary-color);
    box-shadow: 0 0 0 1px var(--title-color);
}
.ddx-report-stamp {
    position: absolute;
    left: -24px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    background: var(--primary-color);
    box-shadow: 0 14px 30px rgba(11, 7, 48, .35);
    font-size: 14px;
    font-weight: 700;
    color: var(--title-color);
    transform: rotate(3deg);
}

@media (prefers-reduced-motion: reduce) {
    .ddx-map-pin .ddx-map-ring,
    .ddx-report-page {
        animation: none;
    }
}

/* DDX responsive */
@media (max-width: 1199px) {
    .ddx-impact-total strong {
        font-size: 52px;
    }
    .ddx-kosgeb-facts {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991px) {
    .ddx-page .ddx-intro,
    .ddx-page .ddx-impact,
    .ddx-page .ddx-about,
    .ddx-page .ddx-process,
    .ddx-page .ddx-incentives {
        margin-bottom: 60px;
    }
    .ddx-impact,
    .ddx-incentives {
        padding: 44px 28px;
    }
    .ddx-map {
        margin-top: 40px;
    }
    .ddx-dims {
        margin-top: 40px;
    }
    .ddx-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .ddx-kosgeb {
        padding: 24px;
    }
    .ddx-kosgeb-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .ddx-kosgeb-item {
        width: 100%;
    }
    .ddx-report-stamp {
        left: -10px;
    }
}
@media (max-width: 575px) {
    .ddx-impact-total strong {
        font-size: 40px;
        letter-spacing: -1px;
    }
    .ddx-impact-total span {
        font-size: 22px;
    }
    .ddx-impact-lead {
        font-size: 18px;
    }
    .ddx-impact-stats b {
        font-size: 22px;
    }
    .ddx-map-pin text {
        font-size: 22px;
    }
    .ddx-dims {
        padding: 20px 14px;
    }
    .ddx-dim-no {
        display: none;
    }
    .ddx-steps {
        grid-template-columns: 1fr;
    }
    .ddx-kosgeb-facts {
        grid-template-columns: 1fr;
    }
}


/*----------  About page  ----------*/

/* intro */
.about-intro {
    padding-bottom: 90px;
}
.about-intro-text {
    padding-right: 30px;
    margin-bottom: 30px;
}
.about-intro-lead {
    margin: 18px 0 26px;
    font-size: 18px;
    line-height: 1.7;
}
.about-intro-lead b {
    color: var(--title-color);
}
.about-intro-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.about-intro-pills li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid #E7E7E7;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    color: var(--title-color);
}
.about-intro-pills li i {
    color: #7BA51C;
}
.about-intro .about-intro-box .teams-member {
    padding-top: 150px;
}
.about-intro-box .designation h2 {
    line-height: 1.4;
}
.about-intro-box-note {
    font-size: 15px;
    color: var(--title-color);
}
.about-intro .about-intro-box.bx2 .review-rating {
    padding-top: 150px;
}
.about-intro-box h1.feature-rating {
    font-size: 50px;
    line-height: 60px;
    color: var(--color-white);
}

/* founder */
.about-founder {
    padding: 0 0 120px;
}
.about-founder-visual {
    position: relative;
    max-width: 440px;
    margin: 0 auto 40px;
    padding: 26px 26px 0;
    border-radius: 30px;
    background:
        radial-gradient(circle at 85% 10%, rgba(212, 247, 114, .9) 0%, rgba(212, 247, 114, 0) 55%),
        var(--bg-color2);
}
.about-founder-visual::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(19, 20, 14, .15);
    border-radius: 22px;
    pointer-events: none;
}
.about-founder-photo {
    position: relative;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    aspect-ratio: 265 / 300;
}
.about-founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.about-founder-badge {
    position: absolute;
    left: -24px;
    bottom: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    background: var(--title-color);
    box-shadow: 0 18px 40px rgba(19, 20, 14, .25);
    animation: float-bob 4s ease-in-out infinite alternate;
}
.about-founder-badge-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-color);
    font-size: 18px;
    color: var(--title-color);
}
.about-founder-badge b {
    display: block;
    font-size: 17px;
    line-height: 1.2;
    color: var(--color-white);
}
.about-founder-badge small {
    font-size: 13px;
    color: var(--white-op70);
}
.about-founder-exp {
    position: absolute;
    top: 46px;
    right: -22px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 18px 40px rgba(19, 20, 14, .12);
}
.about-founder-exp strong {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: var(--title-color);
}
.about-founder-exp span {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text-color);
}
.about-founder-role {
    display: inline-block;
    margin: 12px 0 18px;
    font-size: 18px;
    font-weight: 600;
    color: #7BA51C;
}
.about-founder-bio {
    font-size: 17px;
    line-height: 1.7;
}
.about-founder-bio b {
    color: var(--title-color);
}
.about-founder-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 32px 0 26px;
    padding: 0;
    border: 1px solid #E7E7E7;
    border-radius: 20px;
    overflow: hidden;
}
.about-founder-stats li {
    padding: 20px 18px;
    border-left: 1px solid #E7E7E7;
}
.about-founder-stats li:first-child {
    border-left: 0;
    background: var(--primary-color);
}
.about-founder-stats b {
    display: block;
    margin-bottom: 6px;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--title-color);
    white-space: nowrap;
}
.about-founder-stats span {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-color);
}
.about-founder-stats li:first-child span {
    color: var(--title-color);
}
.about-founder-skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
}
.about-founder-skills li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--title-color);
}
.about-founder-skills li i {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--title-color);
    font-size: 14px;
    color: var(--primary-color);
}
.about-founder-quote {
    position: relative;
    margin: 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--primary-color);
}
.about-founder-quote i {
    position: absolute;
    top: -6px;
    right: 0;
    font-size: 40px;
    color: rgba(19, 20, 14, .06);
}
.about-founder-quote p {
    font-size: 17px;
    font-style: italic;
    color: var(--title-color);
}

/* DDX achievement */
.about-ddx-section {
    padding: 0 0 120px;
}
.about-ddx {
    position: relative;
    overflow: hidden;
    padding: 70px 60px;
    border-radius: 30px;
    background: var(--pt-panel);
}
.about-ddx::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pt-pattern) 0 0 / var(--pt-pattern-size) repeat;
    -webkit-mask-image: radial-gradient(ellipse at 75% 50%, #000 0%, transparent 65%);
    mask-image: radial-gradient(ellipse at 75% 50%, #000 0%, transparent 65%);
    pointer-events: none;
}
.about-ddx > * {
    position: relative;
}
.about-ddx-desc {
    margin: 18px 0 28px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--white-op70);
}
.about-ddx-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin: 0 0 36px;
    padding: 24px 0 0;
    border-top: 1px solid var(--white-op15);
}
.about-ddx-stats b {
    display: block;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--primary-color);
}
.about-ddx-stats span {
    font-size: 14px;
    color: var(--white-op70);
}
.about-ddx .saas-btn a {
    background-color: var(--pt-navy);
}

/* real certificates: two cards fanned out, the DDX+ one in front */
.about-certs {
    max-width: 600px;
    margin: 0 0 0 auto;
}
.about-certs-stack {
    position: relative;
    aspect-ratio: 1600 / 1132;
    margin: 0 4% 0 0;
}
.about-certs-item {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 30px 70px -20px rgba(11, 7, 48, .7), 0 0 0 1px rgba(255, 255, 255, .5);
    cursor: zoom-in;
    transition: transform .45s cubic-bezier(.2, .8, .3, 1), box-shadow .45s;
}
.about-certs-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-certs-item.is-back {
    transform: translate(7%, -9%) rotate(5deg) scale(.92);
    filter: brightness(.92);
}
.about-certs-item.is-front {
    z-index: 2;
    transform: rotate(-3deg);
}
.about-certs-stack:hover .about-certs-item.is-back {
    transform: translate(11%, -13%) rotate(7deg) scale(.92);
}
.about-certs-item.is-front:hover {
    transform: rotate(-1deg) translateY(-6px);
}
.about-certs-zoom {
    position: absolute;
    left: 50%;
    bottom: -16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 30px;
    background: var(--primary-color);
    box-shadow: 0 14px 30px rgba(11, 7, 48, .35);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--title-color);
    transform: translateX(-50%);
    pointer-events: none;
}
.about-certs-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.about-certs-caption span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--white-op15);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.about-certs-caption i {
    color: var(--primary-color);
}
.about-certs-caption small {
    font-size: 12px;
    color: var(--white-op70);
}

/* why: 4 tabs instead of 3 years */
.about-why #tabs {
    flex-wrap: wrap;
    gap: 10px;
}
.about-why .tab-btn span {
    margin-right: 4px;
    font-weight: 700;
    color: #7BA51C;
}
.about-why .tab-btn.active {
    background: var(--title-color);
    color: var(--color-white);
}
.about-why .tab-btn.active span {
    color: var(--primary-color);
}
.about-why p.desc {
    min-height: 150px;
}

/* mission */
.about-mission-close {
    margin: 22px 0 30px;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--color-white);
    color: var(--title-color);
}

/* why: ring visual, synced with the tabs */
.about-why-visual {
    position: relative;
    /* the ring's centre sits at 55% of the artwork; shift it back so the ring itself is centred
       (left, not transform, because gs_fade_anim animates transform) */
    left: calc(min(565px, 100%) * -.05);
    max-width: 565px;
    margin: 40px auto 0;
    aspect-ratio: 565 / 508;
    container-type: inline-size;
}
.about-why-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.about-why-core {
    position: absolute;
    left: 24.6%;
    top: 16.1%;
    width: 60.9%;
    height: 67.7%;
    border-radius: 50%;
}
.about-why-core-item {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: scale(.92);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.about-why-core-item.active {
    opacity: 1;
    transform: none;
}
.about-why-core-no {
    font-size: 3cqw;
    font-weight: 700;
    letter-spacing: 1px;
    color: #7BA51C;
}
.about-why-core-item i {
    display: grid;
    place-items: center;
    width: 17cqw;
    height: 17cqw;
    margin: 1.6cqw 0 2.6cqw;
    border-radius: 50%;
    background: var(--title-color);
    font-size: 6.6cqw;
    color: var(--primary-color);
    box-shadow: 0 0 0 2cqw rgba(212, 247, 114, .55);
}
.about-why-core-item b {
    max-width: 85%;
    font-size: 4.6cqw;
    line-height: 1.2;
    color: var(--title-color);
}
.about-why-core-item small {
    margin-top: 1cqw;
    font-size: 2.7cqw;
    color: var(--text-color);
}
.about-why-node {
    position: absolute;
    display: grid;
    place-items: center;
    width: 12cqw;
    height: 12cqw;
    padding: 0;
    border: .9cqw solid var(--primary-color);
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 12px 26px rgba(19, 20, 14, .12);
    font-size: 4.2cqw;
    color: var(--title-color);
    transform: translate(-50%, -50%);
    transition: background .3s ease, color .3s ease, transform .3s ease;
    cursor: pointer;
}
.about-why-node:hover,
.about-why-node.active {
    background: var(--title-color);
    color: var(--primary-color);
    transform: translate(-50%, -50%) scale(1.12);
}
.about-why-node.n1 { left: 24.4%; top: 15.9%; }
.about-why-node.n2 { left: 85.7%; top: 15.9%; }
.about-why-node.n3 { left: 85.7%; top: 84.1%; }
.about-why-node.n4 { left: 24.4%; top: 84.1%; }
.about-why-plane {
    position: absolute;
    left: 0;
    top: -4%;
    width: 14%;
}

/* mission: "Bütünleşik Hizmet" hub diagram */
.about-hub {
    position: relative;
    max-width: 680px;
    aspect-ratio: 680 / 585;
    container-type: inline-size;
}
.about-hub-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #D6D6D6;
    stroke-width: 1.5;
}
.about-hub-lines circle {
    fill: #F4F4F4;
    stroke: #BDBDBD;
}
.about-hub-core {
    position: absolute;
    left: 50%;
    top: 21%;
    display: grid;
    place-items: center;
    width: 35.3%;
    height: 13.3%;
    border: 1px solid #E2E2E2;
    border-radius: 999px;
    background: var(--color-white);
    box-shadow: 0 14px 34px rgba(19, 20, 14, .06);
    transform: translate(-50%, -50%);
}
.about-hub-core img {
    width: 66%;
}
.about-hub-tag {
    position: absolute;
    padding: .55em 1.15em;
    border-radius: 999px;
    background: var(--tag-bg);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 10px 20px rgba(19, 20, 14, .08);
    font-size: max(11px, 2.5cqw);
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    transform: translate(-50%, -50%) rotate(var(--tag-tilt));
}

/* About responsive */
@media (max-width: 1399px) {
    .about-intro .about-intro-box .teams-member,
    .about-intro .about-intro-box.bx2 .review-rating {
        padding-top: 120px;
    }
}
@media (max-width: 1199px) {
    .about-founder-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-founder-stats li:nth-child(3) {
        border-left: 0;
    }
    .about-founder-stats li:nth-child(n+3) {
        border-top: 1px solid #E7E7E7;
    }
    .about-certs {
        margin: 70px auto 0;
    }
}
@media (max-width: 991px) {
    .about-intro-text {
        padding-right: 0;
    }
    .about-founder,
    .about-ddx-section {
        padding-bottom: 80px;
    }
    .about-founder-visual {
        margin-bottom: 50px;
    }
    .about-ddx {
        padding: 44px 28px;
    }
    .about-why p.desc {
        min-height: 0;
    }
}
@media (max-width: 575px) {
    .about-founder-badge {
        left: 0;
    }
    .about-founder-exp {
        right: 0;
    }
    .about-founder-stats b {
        font-size: 22px;
    }
    .about-founder-skills {
        grid-template-columns: 1fr;
    }
    .about-certs-item.is-back {
        transform: translate(5%, -7%) rotate(4deg) scale(.92);
    }
    .about-certs-zoom {
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .about-founder-badge {
        animation: none;
    }
}

/* ==========================================================
   Home "Kurumsal Fayda" cards (Index): AI analysis and business
   impact dashboards built as components. Two columns from 768px,
   one centred column below. The entrance animation only runs
   once JS adds .kf-anim, so without JS everything is visible.
   ========================================================== */
.kf-visual {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    --kf-line: #9BC31F;
    --kf-soft: #EEF8D2;
    --kf-bar: #D2EF85;
}
.kf-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.kf-col:first-child {
    padding-top: 28px;
}
.kf-visual .about-right-bx {
    margin: 0;
}
.kf-card {
    container-type: inline-size;
    padding: 14px;
    border: 8px solid #fff;
    border-radius: 24px;
    background: #F4F4F2 padding-box;
    box-shadow: 0 0 0 1px rgba(19, 20, 14, .1), 0 24px 50px -24px rgba(19, 20, 14, .18);
    color: var(--title-color);
}
.kf-card b,
.kf-card small {
    display: block;
}
.kf-card small {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-color);
}

/* header */
.kf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 14px;
}
.kf-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-color);
    font-size: 18px;
}
.kf-head-text {
    flex: 1 1 0;
    min-width: 0;
}
.kf-head-text b,
.kf-impact-head b {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
}
.kf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #DDF0A8;
    border-radius: 20px;
    background: var(--kf-soft);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.kf-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34A853;
    animation: kf-blink 1.8s ease-in-out infinite;
}
@keyframes kf-blink {
    50% { opacity: .3; }
}

/* narrow card: the badge drops under the title instead of squeezing it */
@container (max-width: 420px) {
    .kf-head-text {
        flex-basis: calc(100% - 54px);
    }
    .kf-badge {
        margin-left: 54px;
    }
}

/* inner white panel with a small header */
.kf-panel {
    padding: 12px 14px;
    border: 1px solid #ECECEC;
    border-radius: 14px;
    background: #fff;
}
.kf-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kf-panel-head b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.kf-select {
    flex: none;
    padding: 2px 10px;
    border: 1px solid #DDDDDD;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.kf-select i {
    margin-left: 3px;
    font-size: 10px;
}

/* line chart: y labels | plot, month labels underneath */
.kf-chart {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    margin-top: 40px;
}
.kf-chart-y,
.kf-chart-x {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 10px;
    color: #8A8A8A;
}
/* labels sit on the plot's grid lines at y = 10, 35 … 110 of 120 */
.kf-chart-y {
    position: relative;
    width: 22px;
    text-align: right;
}
.kf-chart-y li {
    position: absolute;
    right: 0;
    top: calc((10 + var(--k) * 25) / 120 * 100%);
    line-height: 1;
    transform: translateY(-50%);
}
.kf-chart-plot {
    position: relative;
}
.kf-chart-plot svg {
    display: block;
    width: 100%;
    overflow: visible;
}
.kf-chart-plot .grid {
    fill: none;
    stroke: #EDEDED;
    stroke-dasharray: 3 4;
}
.kf-chart-plot .area {
    fill: var(--kf-soft);
}
.kf-chart-plot .line {
    fill: none;
    stroke: var(--kf-line);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
}
.kf-chart-plot .dot {
    fill: #fff;
    stroke: var(--kf-line);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
}
.kf-chart-plot .dot.is-last {
    fill: var(--kf-line);
    stroke: #fff;
}
.kf-chart-plot .pulse {
    fill: var(--primary-color);
    transform-box: fill-box;
    transform-origin: center;
    animation: kf-pulse 2s ease-out infinite;
}
@keyframes kf-pulse {
    from { opacity: .9; transform: scale(1); }
    to { opacity: 0; transform: scale(3.2); }
}
.kf-chart-x {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}
.kf-tip {
    position: absolute;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 9px;
    background: var(--primary-color);
    box-shadow: 0 8px 18px -8px rgba(110, 150, 20, .6);
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
}
.kf-tip b {
    font-size: 13px;
}
.kf-tip b i {
    margin-left: 6px;
    font-size: 10px;
}
.kf-chart-plot .kf-tip {
    right: -4px;
    bottom: calc(74% + 12px);
}

/* three stat tiles */
.kf-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.kf-stats li {
    padding: 10px;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    background: #fff;
}
.kf-stats li > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    border-radius: 9px;
    background: #F1F1F1;
    font-size: 13px;
}
.kf-stats li > span.is-lime {
    background: var(--kf-soft);
    color: #6E9A12;
}
.kf-stats b {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
}
.kf-stats small {
    font-size: 11px;
}
@container (min-width: 380px) {
    .kf-stats li {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: center;
    }
    .kf-stats li > span {
        grid-row: span 2;
        width: 38px;
        height: 38px;
        margin: 0;
        font-size: 15px;
    }
}

/* impact card */
.kf-impact-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 14px;
}
.kf-impact-head > i {
    color: #B5B5B5;
}
.kf-mini-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #2EA44F;
    font-size: 11px;
    color: #fff;
}
.kf-roi {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 14px;
    margin-top: 6px;
}
.kf-roi-value {
    padding-bottom: 22px;
}
.kf-roi-value b {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.5px;
}
.kf-roi-value small {
    max-width: 110px;
    margin-top: 6px;
    font-size: 11px;
}
.kf-bars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    height: 150px;
    padding-top: 46px;
}
.kf-bars .kf-tip {
    top: 0;
    right: -4px;
}
.kf-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}
.kf-bar i {
    width: 100%;
    max-width: 22px;
    height: calc(var(--h) * .8);
    border-radius: 3px 3px 0 0;
    background: var(--kf-bar);
    transform-origin: bottom;
}
.kf-bar.is-last i {
    background: #B3E03A;
}
.kf-bar small {
    margin-top: 6px;
    font-size: 10px;
    color: #8A8A8A;
}

/* narrow card: ROI figure above full-width bars */
@container (max-width: 300px) {
    .kf-roi {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .kf-roi-value {
        padding-bottom: 0;
    }
    .kf-roi-value small {
        max-width: none;
    }
    .kf-bars {
        height: 140px;
    }
}

.kf-status {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ECECEC;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.kf-status li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.kf-status li + li {
    border-top: 1px solid #F0F0F0;
}
.kf-status b {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
}
.kf-status small {
    font-size: 11px;
}
.kf-status-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #F1F1F1;
    font-size: 13px;
}
.kf-status-icon.is-lime {
    background: var(--kf-soft);
    color: #6E9A12;
}
.kf-status-icon.is-amber {
    background: #FFF1CC;
    color: #B7791F;
}
.kf-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    background: #EAF7E4;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}
.kf-pill i {
    font-size: 7px;
    color: #2EA44F;
}
.kf-pill.is-done i {
    font-size: 11px;
}
.kf-pill.is-risk {
    background: #FFF1CC;
}
.kf-pill.is-risk i {
    color: #F2A019;
}
/* very narrow card (lg screens): status pill moves under its title, period select is hidden */
@container (max-width: 300px) {
    .kf-status li {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 6px;
    }
    .kf-status small {
        display: none;
    }
    .kf-pill {
        grid-column: 2;
        justify-self: start;
    }
    .kf-panel-head .kf-select {
        display: none;
    }
}

/* entrance animation, armed by JS (.kf-anim), played per card (.is-in) */
.kf-anim .kf-card .line {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s .2s ease-out;
}
.kf-anim .kf-card .area {
    opacity: 0;
    transition: opacity .8s .9s;
}
.kf-anim .kf-card .dot {
    transform: scale(0);
    transition: transform .35s calc(.3s + var(--i) * .2s) cubic-bezier(.3, 1.6, .5, 1);
}
.kf-anim .kf-card .kf-tip {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s 1.4s, transform .4s 1.4s;
}
.kf-anim .kf-card .kf-bar i {
    transform: scaleY(0);
    transition: transform .7s calc(.2s + var(--i) * .1s) cubic-bezier(.2, .8, .3, 1);
}
.kf-anim .kf-card .kf-status li {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity .45s calc(.5s + var(--i) * .12s), transform .45s calc(.5s + var(--i) * .12s);
}
.kf-anim .kf-card.is-in .line { stroke-dashoffset: 0; }
.kf-anim .kf-card.is-in .area { opacity: 1; }
.kf-anim .kf-card.is-in .dot,
.kf-anim .kf-card.is-in .kf-bar i { transform: none; }
.kf-anim .kf-card.is-in .kf-tip,
.kf-anim .kf-card.is-in .kf-status li {
    opacity: 1;
    transform: none;
}

@media (max-width: 767px) {
    .kf-visual {
        grid-template-columns: minmax(0, 1fr);
        max-width: 440px;
        margin: 50px auto 0;
    }
    .kf-col:first-child {
        padding-top: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kf-badge i,
    .kf-chart-plot .pulse { animation: none; }
}

/* ==========================================================
   Home "Akıllı Dönüşüm Yönetimi" card (Index): scenario
   comparison, plan vs actual and live signals. Reuses the
   .kf-* card parts and their entrance animation; .in-* are the
   pieces only this card has.
   ========================================================== */
.in-visual {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0 auto 30px;
    padding: 0 0 50px 34px;
    --kf-line: #9BC31F;
    --kf-soft: #EEF8D2;
}
/* soft lime glow behind the card */
.in-visual::before {
    content: "";
    position: absolute;
    inset: 0 10% 10% 0;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(212, 247, 114, .55), rgba(212, 247, 114, 0));
}
.in-float {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 12px 16px 12px 12px;
    border-radius: 16px;
    background: var(--title-color);
    box-shadow: 0 18px 40px -12px rgba(19, 20, 14, .45);
    animation: float 4s ease-in-out infinite;
}
.in-float > span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary-color);
    font-size: 15px;
    color: var(--title-color);
}
.in-float b {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--primary-color);
}
.in-float small {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* scenario rows */
.in-scenarios {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.in-scenarios li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 86px;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
}
.in-scenarios .kf-pill {
    justify-self: end;
}
.in-scenarios li + li {
    margin-top: 4px;
}
.in-scenarios li.is-pick {
    border-color: #CFEA7E;
    background: #F8FDEB;
    animation: in-pick 2.6s ease-in-out infinite;
}
@keyframes in-pick {
    50% { box-shadow: 0 0 0 4px rgba(212, 247, 114, .45); }
}
.in-letter {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #F1F1F1;
    font-size: 14px;
    font-weight: 700;
}
.is-pick .in-letter {
    background: var(--title-color);
    color: var(--primary-color);
}
.in-scn-text b {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 13px;
    font-weight: 600;
}
.in-ai {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--primary-color);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}
.in-ai i {
    font-size: 9px;
}
.in-meter {
    display: block;
    height: 6px;
    margin-top: 7px;
    border-radius: 6px;
    background: #EFEFEF;
    overflow: hidden;
}
.in-meter i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: #CFEA7E;
    transform-origin: left;
}
.is-pick .in-meter i {
    background: var(--kf-line);
}
.kf-pill.is-high {
    background: #FDE7E7;
}
.kf-pill.is-high i {
    color: #E5484D;
}

/* plan vs actual + live signals side by side */
.in-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.in-legend {
    display: flex;
    gap: 12px;
    margin: 6px 0 22px;
    font-size: 10px;
    color: #8A8A8A;
}
.in-legend span::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 0;
    margin-right: 5px;
    vertical-align: middle;
    border-top: 2px solid var(--kf-line);
}
.in-legend .is-plan::before {
    border-top: 2px dashed #B9B9B9;
}
.in-plot .plan {
    fill: none;
    stroke: #B9B9B9;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}
.in-plot .kf-tip {
    right: -4px;
    bottom: calc(81% + 10px);
}
.in-plan .kf-chart-x {
    margin-top: 6px;
}
.in-feed .kf-status {
    margin: 8px 0 0;
    border: 0;
    border-radius: 0;
}
.in-feed .kf-status li {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 0;
}

@container (max-width: 460px) {
    .in-split {
        grid-template-columns: minmax(0, 1fr);
    }
}
@container (max-width: 280px) {
    .in-scenarios li {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .in-scenarios .kf-pill {
        grid-column: 2;
        justify-self: start;
    }
}

.kf-anim .kf-card .in-meter i {
    transform: scaleX(0);
    transition: transform .9s calc(.3s + var(--i) * .15s) cubic-bezier(.2, .8, .3, 1);
}
.kf-anim .kf-card.is-in .in-meter i {
    transform: none;
}

@media (max-width: 991px) {
    .in-visual {
        margin-bottom: 60px;
    }
}
@media (max-width: 575px) {
    /* the chip sits above the card instead of floating over it */
    .in-visual {
        padding: 0;
    }
    .in-float {
        position: relative;
        width: max-content;
        margin: 0 auto 14px;
        padding: 8px 14px 8px 8px;
        animation: none;
    }
    .in-float > span {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .in-float b {
        font-size: 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .in-float,
    .in-scenarios li.is-pick { animation: none; }
}

/* ==========================================================
   Home page section spacing (body.home-page, set in Index):
   the template pads every section 90–120px top and bottom,
   which doubles up between neighbours. Light sections now
   share the gap; the dark service band keeps inner padding.
   ========================================================== */
.home-page .feature-section {
    padding: 90px 0 70px;
}
.home-page .about-section {
    padding-bottom: 70px;
}
.home-page .insights-section {
    padding: 10px 0 60px;
}
@media (min-width: 992px) {
    .home-page .in-visual {
        margin-bottom: 0;
    }
}
.home-page .service-section.style-6 {
    padding: 40px 0 60px;
}
.home-page .service-section:not(.style-6) {
    padding: 100px 0 80px;
}
.home-page .brand-section {
    padding-bottom: 70px;
}
@media (max-width: 767px) {
    .home-page .feature-section {
        padding: 60px 0 40px;
    }
    .home-page .about-section {
        padding-bottom: 40px;
    }
    .home-page .insights-section {
        padding: 20px 0 40px;
    }
    .home-page .service-section.style-6 {
        padding: 20px 0 40px;
    }
    .home-page .service-section:not(.style-6) {
        padding: 70px 0 50px;
    }
    .home-page .brand-section {
        padding-bottom: 30px;
    }
}

/* ==========================================================
   Section headings (the .sec-title pill and title) are centred
   once the two-column layouts stack, so every section starts
   the same way on tablets and phones. Intro text keeps its own
   alignment so long paragraphs stay easy to read.
   ========================================================== */
@media (max-width: 991px) {
    .sec-title .section-sub-title,
    .sec-title .section-title {
        text-align: center;
    }
}