/* =========================================================
   Noventra — Artificial Intelligence overview (ai/index.html).
   Shared light-page blocks are in light.css.
   ========================================================= */

/* ---- hero: an agent task board beside the heading ---- */
.ai-hero .page-hero-grid{align-items:center}
@media(min-width:960px){ .ai-hero .page-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(340px,460px)} }
.ai-hero .page-lead{margin-top:1.4rem}

.ai-visual{position:relative; padding:clamp(3.4rem,5vw,4rem) clamp(1rem,2vw,1.6rem); border-radius:28px; overflow:hidden;
           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 40px 80px -46px rgba(230,53,0,.9)}
/* a dot grid, like the orange band */
.ai-visual::before{content:""; position:absolute; inset:0; pointer-events:none;
                   background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px); background-size:20px 20px;
                   -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%); mask-image:linear-gradient(180deg, #000, transparent 85%)}
.ai-board{position:relative; z-index:1; max-width:340px; margin:0 auto; padding:1.3rem 1.3rem 1rem; border-radius:20px;
          background:#fff; box-shadow:0 30px 60px -30px rgba(80,20,0,.7)}
.ai-board-title{margin:0 0 .8rem; padding-bottom:.7rem; border-bottom:2px solid var(--ink);
                font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.ai-board ul{list-style:none; margin:0; padding:0; display:grid}
.ai-board li{display:grid; grid-template-columns:auto 1fr; column-gap:.75rem; align-items:center; padding:.55rem 0;
             font-size:.92rem; font-weight:600; color:var(--ink)}
.ai-board li + li{border-top:1px solid var(--line)}
.ai-board li small{grid-column:2; font-size:.72rem; font-weight:500; color:var(--muted)}
.ai-board i{grid-row:span 2; display:grid; place-items:center; width:26px; height:26px; border-radius:8px;
            border:2px solid var(--line); background:#fff}
.ai-board i svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.ai-board li.done i{border-color:var(--red); background:var(--red)}
.ai-board li.busy i{border-color:var(--red)}
.ai-board li.busy i::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--red);
                           animation:aiPulse 1.4s ease-in-out infinite}
.ai-board li:not(.done):not(.busy){color:var(--muted)}
@keyframes aiPulse{50%{transform:scale(.55); opacity:.5}}
.ai-chip{position:absolute; z-index:2; display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .8rem;
         border-radius:999px; font-size:.74rem; font-weight:700; color:var(--ink); background:#fff;
         box-shadow:0 14px 30px -14px rgba(80,20,0,.7)}
.ai-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--red)}
.ai-chip-a{left:1rem; top:1rem}
.ai-chip-b{right:1rem; bottom:1rem}
@media(max-width:520px){
  .ai-chip{position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:1rem .3rem 0}
  .ai-visual{padding:1.4rem 1rem; text-align:center}
  .ai-board{text-align:left}
}

/* ---- the two tracks: AI-Solutions and AI Agents & Automation ---- */
.ai-tracks{display:grid; gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:960px){ .ai-tracks{grid-template-columns:1fr 1fr} }
.ai-track{display:flex; flex-direction:column; border-radius:26px; overflow:hidden; background:var(--paper);
          border:1px solid var(--line); transition:box-shadow .3s, transform .3s cubic-bezier(.2,.7,.2,1)}
.ai-track:hover{transform:translateY(-4px); box-shadow:0 40px 70px -46px rgba(13,14,17,.55)}
.ai-track-image{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--red)}
.ai-track-image img{display:block; width:100%; height:100%; object-fit:cover;
                    transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ai-track:hover .ai-track-image img{transform:scale(1.03)}
.ai-track-body{display:flex; flex-direction:column; flex:1; padding:clamp(1.4rem,2.6vw,2.2rem)}
.ai-track-label{margin:0 0 .5rem; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red)}
.ai-track h3{margin:0; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.1; letter-spacing:-.03em; font-weight:800}
.light-main .ai-track h3 a{color:var(--ink); text-decoration:none}
.light-main .ai-track h3 a:hover{color:var(--red)}
.ai-track-lead{margin:.7rem 0 1.4rem; line-height:1.65; color:var(--text)}
.ai-track-parts{list-style:none; margin:0 0 1.6rem; padding:0; display:grid}
.ai-track-parts li + li{border-top:1px solid var(--line)}
.light-main .ai-track-parts a{display:grid; grid-template-columns:1fr auto; column-gap:1rem; padding:.75rem 0;
                              text-decoration:none; color:var(--ink)}
.light-main .ai-track-parts a::after{content:"→"; grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--red); transition:transform .2s}
.ai-track-parts b{grid-column:1; font-size:.95rem}
.ai-track-parts span{grid-column:1; font-size:.84rem; line-height:1.45; color:var(--muted)}
.light-main .ai-track-parts a:hover b{color:var(--red)}
.light-main .ai-track-parts a:hover::after{transform:translateX(3px)}
.ai-track .btn-large{align-self:flex-start; margin-top:auto; color:#fff}

/* ---- autonomy levels: three steps that build up ---- */
.ai-levels{list-style:none; margin:0; padding:0; display:grid; gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:900px){ .ai-levels{grid-template-columns:repeat(3, minmax(0,1fr)); align-items:end} }
.ai-levels li{position:relative; padding:clamp(1.5rem,2.6vw,2.2rem); border-radius:22px; background:var(--surface);
              border:1px solid var(--line); overflow:hidden}
/* a bar that fills up per level: more autonomy, more orange */
.ai-levels li::before{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--line)}
.ai-levels li::after{content:""; position:absolute; left:0; bottom:0; height:6px; background:var(--red)}
.ai-levels li:nth-child(1)::after{width:33.3%}
.ai-levels li:nth-child(2)::after{width:66.6%}
.ai-levels li:nth-child(3)::after{width:100%}
@media(min-width:900px){
  .ai-levels li:nth-child(1){min-height:200px}
  .ai-levels li:nth-child(2){min-height:230px}
  .ai-levels li:nth-child(3){min-height:260px}
}
.ai-level-step{display:block; margin-bottom:1.4rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
.ai-levels h3{margin:0 0 .4rem; font-size:1.4rem; letter-spacing:-.02em; color:var(--ink)}
.ai-levels p{margin:0; line-height:1.6; color:var(--text)}
.ai-levels-note{display:flex; align-items:center; gap:.7rem; margin:1.6rem 0 0; font-weight:600; color:var(--ink)}
.ai-levels-note::before{content:"!"; flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
                        font-weight:800; color:#fff; background:var(--red)}

/* ---- principles on the orange band ---- */
.ai-principles{list-style:none; margin:0; padding:0; display:grid; gap:clamp(.8rem,1.6vw,1.2rem)}
@media(min-width:700px){ .ai-principles{grid-template-columns:1fr 1fr} }
@media(min-width:1100px){ .ai-principles{grid-template-columns:repeat(4, 1fr)} }
.ai-principles li{padding:1.5rem 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)}
.ai-principles h3{margin:0 0 .4rem; font-size:1.15rem; color:#fff}
.ai-principles p{margin:0; line-height:1.55; color:rgba(255,255,255,.88)}

/* ---- foundation: two text cards ---- */
.ai-foundation{display:grid; gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:900px){ .ai-foundation{grid-template-columns:1fr 1fr} }
.ai-foundation-card{padding:clamp(1.6rem,3vw,2.4rem); border-radius:24px; background:var(--surface); border:1px solid var(--line)}
.ai-foundation-card h3{margin:0 0 .8rem; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink)}
.ai-foundation-card p{margin:0; line-height:1.75; color:var(--text)}
.ai-foundation-card p + p{margin-top:1rem}
.light-main .ai-foundation-link a{font-weight:700; text-decoration:none}
.ai-foundation-link a::after{content:" →"}

/* ---- results: numbered list in three columns ---- */
.ai-results{list-style:none; margin:0; padding:0; display:grid; gap:0 clamp(1.4rem,3vw,3rem); counter-reset:result}
@media(min-width:760px){ .ai-results{grid-template-columns:1fr 1fr} }
@media(min-width:1100px){ .ai-results{grid-template-columns:repeat(3, 1fr)} }
.ai-results li{display:flex; gap:1rem; align-items:baseline; padding:1.3rem 0; border-top:1px solid var(--line);
               counter-increment:result; font-size:1.08rem; font-weight:600; line-height:1.45; color:var(--ink)}
.ai-results li::before{content:counter(result, decimal-leading-zero); flex:none; font-size:.78rem; font-weight:800; color:var(--red)}

@media(prefers-reduced-motion:reduce){
  .ai-board li.busy i::after{animation:none}
  .ai-track, .ai-track:hover, .ai-track-image img{transition:none; transform:none}
}