/* =========================================================
   Noventra — topic pages: the AI sections and their parts
   (ai/ai-solutions.html, ai/document-processing-agents.html, ...).
   Shared light-page blocks are in light.css.
   ========================================================= */

/* ---- hero: heading beside the illustration ---- */
.topic-hero .page-hero-grid{align-items:center}
@media(min-width:960px){ .topic-hero .page-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.topic-hero h1{font-size:clamp(2.2rem,5vw,3.9rem)}
.topic-hero .page-lead{margin-top:1.3rem; font-size:clamp(1.08rem,1.7vw,1.3rem); color:var(--ink)}
.topic-visual{margin:0; border-radius:clamp(18px,2vw,28px); overflow:hidden; background:var(--red);
              box-shadow:0 40px 80px -46px rgba(230,53,0,.85)}
.topic-visual img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}

/* ---- intro: one large statement ---- */
.topic-intro{max-width:58rem}
.topic-intro p{margin:0; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.6; letter-spacing:-.01em; color:var(--ink)}
.topic-intro p + p{margin-top:1.1rem}

/* ---- content blocks: number and heading on the left, text on the right ---- */
.topic-blocks{display:grid}
.topic-block{display:grid; gap:1rem clamp(2rem,5vw,5rem); padding:clamp(2rem,4vw,3rem) 0; border-top:1px solid var(--line)}
.topic-block:first-child{border-top:0; padding-top:0}
.topic-block:last-child{padding-bottom:0}
@media(min-width:900px){ .topic-block{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.topic-block-head{display:flex; align-items:flex-start; gap:1.1rem}
@media(min-width:900px){ .topic-block-head{position:sticky; top:calc(var(--nav-h) + 1.6rem); align-self:start} }
.topic-num{flex:none; font-size:clamp(2rem,3.4vw,2.6rem); line-height:.9; font-weight:800; letter-spacing:-.04em;
           color:transparent; -webkit-text-stroke:1.5px var(--red)}
.topic-block h2{margin:0; font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.15; letter-spacing:-.03em; font-weight:800; color:var(--ink)}
.topic-block-body > p{margin:0 0 1rem; font-size:1.04rem; line-height:1.78; color:var(--text)}
.topic-block-body > :last-child{margin-bottom:0}

/* bullet lists as check lists */
.topic-checks{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.6rem}
.topic-checks li{display:flex; align-items:flex-start; gap:.8rem; padding:.95rem 1.1rem; border-radius:14px;
                 background:var(--surface); border:1px solid var(--line); line-height:1.55; color:var(--text)}
.topic-checks strong{color:var(--ink)}
.check{flex:none; display:grid; place-items:center; width:24px; height:24px; margin-top:.05rem; border-radius:50%; background:var(--red)}
.check svg{width:14px; height:14px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}

/* links to the parts of a section */
.topic-parts{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.light-main .topic-parts a{display:grid; grid-template-columns:1fr auto; column-gap:1rem; padding:1rem 1.2rem;
                           border-radius:16px; background:var(--surface); border:1px solid var(--line);
                           text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s, box-shadow .2s}
.light-main .topic-parts a::after{content:"→"; grid-column:2; grid-row:1 / span 2; align-self:center; display:grid; place-items:center;
                                  width:32px; height:32px; border-radius:50%; background:rgba(243,56,1,.1); color:var(--red); transition:transform .2s}
.topic-parts b{grid-column:1; font-size:1rem}
.topic-parts span{grid-column:1; margin-top:.2rem; font-size:.9rem; line-height:1.5; color:var(--muted)}
.light-main .topic-parts a:hover{border-color:rgba(243,56,1,.35); transform:translateY(-2px); box-shadow:0 20px 40px -30px rgba(13,14,17,.5)}
.light-main .topic-parts a:hover::after{transform:translateX(3px)}

/* ---- results on the orange band ---- */
.topic-benefits{list-style:none; margin:0; padding:0; display:grid; gap:clamp(.8rem,1.6vw,1.2rem)}
@media(min-width:760px){ .topic-benefits{grid-template-columns:1fr 1fr} }
@media(min-width:1100px){ .topic-benefits{grid-template-columns:repeat(3, 1fr)} }
.topic-benefits li{display:flex; align-items:flex-start; gap:.9rem; padding:1.3rem 1.4rem; border-radius:18px;
                   background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
                   backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
                   font-weight:600; font-size:1.02rem; line-height:1.5; color:#fff}
.topic-benefits strong{font-weight:800}
.light-main .topic-benefits a{color:#fff; text-decoration:underline; text-underline-offset:.18em}
.band-accent .check{background:#fff; box-shadow:0 6px 14px -6px rgba(80,20,0,.5)}
.band-accent .check svg{stroke:var(--red)}

/* ---- the other parts of the same section ---- */
.topic-related{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
@media(min-width:700px){ .topic-related{grid-template-columns:1fr 1fr} }
@media(min-width:1100px){ .topic-related{grid-template-columns:repeat(3, 1fr)} }
.light-main .topic-related a{display:flex; flex-direction:column; height:100%; padding:1.3rem 1.4rem 3.2rem; position:relative;
                             border-radius:18px; background:var(--paper); border:1px solid var(--line); text-decoration:none;
                             transition:border-color .2s, transform .2s, box-shadow .2s, background .2s}
.light-main .topic-related a::after{content:"→"; position:absolute; left:1.4rem; bottom:1.1rem; display:grid; place-items:center;
                                    width:32px; height:32px; border-radius:50%; background:rgba(243,56,1,.1); color:var(--red); transition:transform .2s}
.topic-related b{font-size:1.05rem; color:var(--ink)}
.topic-related span{margin-top:.35rem; font-size:.9rem; line-height:1.5; color:var(--muted)}
.light-main .topic-related a:hover{background:var(--surface); border-color:rgba(243,56,1,.35); transform:translateY(-3px);
                                   box-shadow:0 24px 46px -30px rgba(13,14,17,.5)}
.light-main .topic-related a:hover::after{transform:translateX(3px)}
.light-main .topic-back{font-weight:700; text-decoration:none}
.topic-back::before{content:"← "}

/* ---- numbered steps (how a service works) ---- */
.topic-steps{list-style:none; margin:0 0 1rem; padding:0; counter-reset:step; display:grid}
.topic-steps li{position:relative; display:grid; gap:.35rem; padding:0 0 1.6rem 3.4rem; counter-increment:step}
.topic-steps li:last-child{padding-bottom:0}
.topic-steps li::before{content:counter(step); position:absolute; left:0; top:-.1rem; display:grid; place-items:center;
                        width:2.3rem; height:2.3rem; border-radius:50%; font-weight:800; color:#fff; background:var(--red);
                        box-shadow:0 0 0 5px rgba(243,56,1,.12)}
/* the line that connects the steps */
.topic-steps li:not(:last-child)::after{content:""; position:absolute; left:calc(1.15rem - 1px); top:2.5rem; bottom:.3rem;
                                        width:2px; background:linear-gradient(var(--red), rgba(243,56,1,.15))}
.topic-steps b{font-size:1.08rem; line-height:1.35; color:var(--ink)}
.topic-steps span{line-height:1.75; color:var(--text)}

/* ---- a hero without illustration ---- */
@media(min-width:960px){ .topic-hero-plain .page-hero-grid{grid-template-columns:minmax(0,1fr)} }
.topic-hero-plain .page-lead{max-width:44ch}

/* =========================================================
   Services overview (services/index.html)
   ========================================================= */
.services-hero .page-hero-grid{align-items:center}
@media(min-width:960px){ .services-hero .page-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,420px)} }
.services-hero .page-lead{margin-top:1.4rem}
.services-index{padding:clamp(1.4rem,2.6vw,1.9rem); border-radius:24px; color:#fff;
                background:
                  radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255,170,120,.45), transparent 65%),
                  linear-gradient(140deg, #ff5a1f 0%, #e63500 60%, #c92c00 100%);
                box-shadow:0 34px 70px -40px rgba(230,53,0,.9)}
.services-index > p{margin:0 0 .6rem; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.services-index ol{list-style:none; margin:0; padding:0}
.services-index li + li{border-top:1px solid rgba(255,255,255,.25)}
.light-main .services-index a{display:flex; align-items:center; gap:.9rem; padding:.85rem 0; font-weight:700; line-height:1.35;
                              color:#fff; text-decoration:none}
.services-index a span{flex:none; font-size:.78rem; font-weight:800; color:rgba(255,255,255,.7)}
.light-main .services-index a::after{content:"↓"; margin-left:auto; transition:transform .2s}
.light-main .services-index a:hover::after{transform:translateY(3px)}

.services-group{scroll-margin-top:var(--nav-h)}
.services-group-grid{display:grid; gap:clamp(1.4rem,3vw,3.4rem); align-items:start}
@media(min-width:960px){
  .services-group-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .services-group-grid.no-image{grid-template-columns:minmax(0,1fr)}
  .services-group-grid.no-image .services-group-body{max-width:760px}
  /* every other group has its picture on the right */
  .services-group:nth-of-type(odd) .services-group-image{order:2}
  .services-group-image{position:sticky; top:calc(var(--nav-h) + 1.6rem)}
}
.services-group-image{display:block; border-radius:24px; overflow:hidden; background:var(--red);
                      box-shadow:0 40px 80px -50px rgba(230,53,0,.85)}
.services-group-image img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
                          transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.services-group-image:hover img{transform:scale(1.03)}
.services-group-body h2{margin:0; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.08; letter-spacing:-.03em; font-weight:800}
.light-main .services-group-body h2 a{color:var(--ink); text-decoration:none}
.light-main .services-group-body h2 a:hover{color:var(--red)}
.services-group-lead{margin:.8rem 0 1.5rem; font-size:1.08rem; line-height:1.65; color:var(--text)}
.services-group-body .topic-parts{margin-bottom:1.6rem}
.services-group-body .btn-large{margin-top:0; color:#fff}

@media(prefers-reduced-motion:reduce){
  .light-main .topic-parts a, .light-main .topic-related a, .services-group-image img{transition:none; transform:none}
}