/* ==========================================================================
   RITIMSol - SOLUTION / PRODUCT PAGE STYLES
   Extends css/style.css. Mobile-first.
   ========================================================================== */

/* ------------------------------------------------------------ Product hero */
.product-hero {
    position:relative;
    color:var(--on-dark);
    background:var(--grad-ink);
    padding:calc(var(--nav-h) + clamp(30px,5vw,54px)) 0 clamp(52px,7vw,86px);
    overflow:hidden;
}
.product-hero h1 { color:var(--on-dark); font-size:clamp(2.05rem,4.8vw,3.3rem); }
.product-hero p { color:var(--on-dark-lead); font-size:clamp(1.02rem,1.6vw,1.18rem); max-width:640px; margin-top:16px; }
.product-hero .hero-cta { margin-top:28px; display:flex; flex-wrap:wrap; gap:14px; }
.product-hero .kpis { display:flex; flex-wrap:wrap; gap:26px; margin-top:30px; }
.product-hero .kpis .k b { display:block; font-size:1.6rem; color:var(--on-dark); line-height:1; }
.product-hero .kpis .k span { font-size:.85rem; color:var(--on-dark-dim); }

/* Large glass product icon */
.product-icon {
    width:clamp(120px,26vw,168px);
    aspect-ratio:1;
    display:flex; align-items:center; justify-content:center;
    margin-inline:auto;
    border-radius:34px;
    background:rgba(255,255,255,.10);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    color:var(--accent-soft);
    font-size:clamp(52px,10vw,72px);
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 30px 60px rgba(0,0,0,.35);
    animation:float 6s var(--ease) infinite;
}

/* ------------------------------------------------------------ Feature boxes */
.feature-box {
    height:100%;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:clamp(24px,3vw,32px);
    box-shadow:var(--sh-sm);
    transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.feature-box:hover { transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:var(--tint-border); }
.feature-box .icon-tile { margin-bottom:18px; }
.feature-box h3 { font-size:1.15rem; margin-bottom:10px; }
.feature-box p { margin-bottom:0; }

/* ------------------------------------------------------------ Benefits panel */
.benefit-section { background:var(--bg-alt); }
.benefit-list { display:grid; gap:16px; }
.benefit-list li { display:flex; gap:14px; align-items:flex-start; font-size:1.05rem; color:var(--text-strong); }
.benefit-list .tick {
    flex:none;
    width:30px; height:30px;
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:var(--ok-bg); color:var(--ok-fg);
    margin-top:2px;
}

/* ------------------------------------------------------------ How it works */
/* The counter must be initialised on the row that wraps the steps: each .step
   sits in its own Bootstrap column, so without a shared ancestor holding the
   counter every step would restart at 1. */
.step-list { counter-reset:step; }
.step {
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:26px 26px 26px 78px;
    box-shadow:var(--sh-sm);
}
.step::before {
    counter-increment:step;
    content:counter(step);
    position:absolute;
    left:22px; top:24px;
    width:40px; height:40px;
    border-radius:12px;
    background:var(--grad-brand);
    color:var(--on-dark);
    font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 22px rgb(var(--primary-rgb) / .3);
}
.step h4 { font-size:1.08rem; margin-bottom:6px; }
.step p { margin-bottom:0; }

/* ------------------------------------------------------------ Demo CTA box */
.demo-box {
    position:relative;
    overflow:hidden;
    border-radius:var(--r-xl);
    background:var(--grad-brand-3);
    background-size:180% 180%;
    color:var(--on-dark);
    padding:clamp(34px,5vw,64px);
    text-align:center;
    box-shadow:var(--sh-lg);
}
.demo-box::after {
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(60% 120% at 0 0,rgba(255,255,255,.22),transparent 55%);
    pointer-events:none;
}
.demo-box > * { position:relative; z-index:1; }
.demo-box h2 { color:var(--on-dark); }
.demo-box p { color:var(--on-brand-soft); max-width:560px; margin:12px auto 24px; }

/* ------------------------------------------------------------ Related solutions */
.related-card {
    display:flex;
    gap:16px;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:20px;
    height:100%;
    box-shadow:var(--sh-sm);
    transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.related-card:hover { transform:translateY(-6px); box-shadow:var(--sh); border-color:var(--tint-border); }
.related-card .icon-tile { width:52px; height:52px; font-size:1.3rem; }
.related-card h4 { font-size:1.02rem; margin-bottom:2px; }
.related-card p { font-size:.9rem; margin:0; color:var(--slate-500); }

@media (max-width:575.98px){
    .product-hero .kpis { gap:18px; }
    .product-icon { margin-top:34px; }
}