/* ==========================================================================
   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; }
}

/* ------------------------------------------------------------ Architecture row */
.arch-node .icon-tile { width:64px; height:64px; font-size:1.6rem; margin:0 auto 16px; }
.arch-node h3 { font-size:1.08rem; margin-bottom:6px; }

.arch-link { color:var(--slate-300); font-size:1.7rem; }

.gateway-card {
    background:var(--grad-brand);
    color:var(--on-dark);
    border-radius:var(--r-lg);
    padding:30px 20px;
    box-shadow:var(--sh-glow);
    transition:transform var(--t) var(--ease);
}
.gateway-card:hover { transform:translateY(-8px); }
.gateway-card > i { display:block; font-size:2.2rem; margin-bottom:14px; }
.gateway-card h3 { color:var(--on-dark); font-size:1.15rem; margin-bottom:2px; }
.gateway-card p { color:var(--on-brand-soft); }

/* ------------------------------------------------------------ Workflow list */
.workflow-card {
    list-style:none;
    margin:0;
    padding:clamp(24px,3vw,36px);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-sm);
}
.workflow-step { position:relative; display:flex; align-items:center; gap:18px; padding:12px 0; }
/* Connector between one step and the next: 28px is half the icon, so the line
   starts where the circle ends and spans the two 12px paddings between rows. */
.workflow-step:not(:last-child)::after {
    content:"";
    position:absolute;
    left:27px;
    top:calc(50% + 28px);
    width:2px;
    height:24px;
    background:var(--tint-strong);
}
.workflow-icon {
    flex:none;
    width:56px; height:56px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--grad-brand);
    color:var(--on-dark);
    font-size:1.2rem;
}
.workflow-step h3 { font-size:1.02rem; margin:0; }

/* ------------------------------------------------------------ Spec table */
.spec-table { width:100%; margin:0; }
.spec-table th,.spec-table td { padding:12px 0; border-bottom:1px solid var(--border); font-size:.95rem; }
.spec-table tr:last-child th,.spec-table tr:last-child td { border-bottom:0; padding-bottom:0; }
.spec-table th { text-align:left; width:45%; color:var(--text-strong); font-weight:600; }
.spec-table td { color:var(--text); }

/* ------------------------------------------------------------ FAQ accordion */
.faq-accordion {
    --bs-accordion-bg:var(--surface);
    --bs-accordion-border-color:var(--border);
    --bs-accordion-border-radius:var(--r);
    --bs-accordion-inner-border-radius:var(--r);
    --bs-accordion-btn-color:var(--heading);
    --bs-accordion-btn-bg:var(--surface);
    --bs-accordion-active-color:var(--primary);
    --bs-accordion-active-bg:var(--tint);
    --bs-accordion-btn-focus-box-shadow:0 0 0 3px rgb(var(--primary-rgb) / .25);
    --bs-accordion-body-padding-y:20px;
    max-width:860px;
    margin-inline:auto;
}
.faq-accordion .accordion-item { margin-bottom:12px; border-radius:var(--r); }
.faq-accordion .accordion-button { font-weight:600; font-size:1.02rem; }
.faq-accordion .accordion-body { color:var(--text); }

/* ------------------------------------------------------------ ZTLC illustration
   Driven by CSS animations rather than SVG <animate>, because SMIL ignores
   prefers-reduced-motion and the global rule in style.css cannot reach it. */
.ztlc-viz { border-radius:var(--r-lg); box-shadow:var(--sh-lg); }

.ztlc-led { animation:ztlcBlink 1s steps(1,end) infinite; }
.ztlc-led-b { animation-duration:1.2s; animation-delay:.4s; }
@keyframes ztlcBlink { 0%,49% { opacity:1; } 50%,100% { opacity:.2; } }

/* The gateway glow breathes by radius, not by opacity. */
.ztlc-halo { animation:ztlcHalo 2.5s var(--ease) infinite; }
@keyframes ztlcHalo { 0%,100% { r:95px; } 50% { r:140px; } }

/* Both ends of the turn are spelled out on purpose: with an implicit `from`
   the browser interpolates none -> rotate(360deg), which decomposes to the
   identity matrix and never actually rotates. */
.ztlc-sync { transform-box:fill-box; transform-origin:center; animation:ztlcSpin 5s linear infinite; }
@keyframes ztlcSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.ztlc-flow { animation:ztlcDash .7s linear infinite; }
.ztlc-flow-back { animation-direction:reverse; }
@keyframes ztlcDash { from { stroke-dashoffset:0; } to { stroke-dashoffset:-20; } }

.ztlc-packet,.ztlc-packet-back { animation:ztlcSend 3s linear infinite; }
.ztlc-packet-back { animation-name:ztlcSendBack; }
.ztlc-packet-d1 { animation-delay:1s; }
.ztlc-packet-d2 { animation-delay:2s; }
@keyframes ztlcSend { from { transform:translateX(0); } to { transform:translateX(460px); } }
@keyframes ztlcSendBack { from { transform:translateX(0); } to { transform:translateX(-460px); } }

.ztlc-float { animation:ztlcFloat 3s var(--ease) infinite; }
.ztlc-float-b { animation-duration:3.4s; animation-direction:reverse; }
@keyframes ztlcFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }

@media (prefers-reduced-motion:reduce){
    .ztlc-viz [class^="ztlc-"] { animation:none !important; transform:none !important; }
}