/* About / Why Confiado. Built on the shared About inner-page kit in
   /assets/about-story/css/story.css (hero, section template, chapters, tiles, timelines,
   final CTA). Only the pieces this page needs beyond that kit live here. */
.why-page .st-hero::before{background-image:url("../img/hero/why-hero.webp")}
@media(min-width:1041px){
/* Photo-led hero, same treatment as the other About pages: the photo is exactly as tall as the
     section and dissolves horizontally into an ambient background built from its own tones (a blurred
     copy of the photo over a matching gradient). The figure lives inside the shell, so it is offset back
     to the viewport's left edge first. */
.why-page .st-hero{background:linear-gradient(90deg,#d3d0cb 0%,#e5e3df 38%,#f0efec 68%,#f8f8f7 100%)}
.why-page .st-hero::before{inset:-40px;background-size:cover;background-position:left center;filter:blur(38px) saturate(.7);opacity:.6;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 84%);mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 84%)}
.why-page .st-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 90% at 62% 55%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%)}
/* The whole photo stays visible: it is sized to end before the copy column and fades softly on every edge. */
.why-page .st-hero__media{top:50%;bottom:auto;left:calc((100% - 100vw) / 2 + 60px);width:min(48vw,900px);height:auto;transform:translateY(-50%);-webkit-mask-image:none;mask-image:none}
.why-page .st-hero__media img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
}
/* Shared helpers */
.st-caption{margin:14px 0 0;color:var(--st-muted);font-size:12.5px;line-height:1.7;font-weight:600;text-align:center}
.st-caption--top{margin:34px 0 0;color:var(--st-text);font-size:14px;font-weight:750}
.st-s02 .st-caption--top{color:#b9c8da}
.st-flow+.st-caption{margin-top:16px}
.st-evlist--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-evlist--2 .st-evitem{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;text-align:right}
.st-evlist--2 .st-evitem p{font-size:13.5px}
.st-evitem b{display:block;color:var(--st-ink);font-weight:820}
.st-evitem small{display:block;margin-top:2px;color:var(--st-muted);font-size:12px;font-weight:600}
/* Text link (anchor or button) shown under a chapter lead */
.why-link{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;padding:0;border:0;background:none;color:var(--st-blue);font:inherit;font-size:14px;font-weight:800;text-decoration:none;cursor:pointer}
.why-link:hover{text-decoration:underline}
.why-link:focus-visible{outline:2px solid var(--st-blue);outline-offset:3px;border-radius:4px}
/* Detection-to-handling explorer */
.why-seg{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.why-seg button{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--st-line);border-radius:999px;background:#fff;color:var(--st-text);font:inherit;font-size:14px;font-weight:780;cursor:pointer;box-shadow:0 1px 2px rgba(15,32,52,.06);transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .2s ease,box-shadow .25s ease}
.why-seg button:hover{border-color:var(--st-blue);color:var(--st-blue);transform:translateY(-1px)}
.why-seg button[aria-pressed="true"]{background:var(--st-blue);border-color:var(--st-blue);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.3)}
.why-seg button:focus-visible{outline:2px solid var(--st-blue);outline-offset:3px}
.why-seg__i{display:grid;place-items:center;width:20px;height:20px}
.why-seg__i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-flow{position:relative;list-style:none;margin:46px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.why-flow__line{position:absolute;top:34px;left:10%;right:10%;height:4px;border-radius:2px;background:#cfd8e3}
.why-flow__line i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(270deg,#3b82ff,#6366f1,#0ea5a4,#f59e0b,#22a06b);clip-path:inset(0 0 0 calc(100% - var(--p) * 25%));transition:clip-path .7s cubic-bezier(.4,0,.2,1)}
.why-flow__step{position:relative;z-index:1}
.why-flow__step button{display:grid;justify-items:center;gap:4px;width:100%;padding:0 6px 6px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:center}
.why-flow__step button:focus-visible{outline:2px solid var(--c);outline-offset:4px;border-radius:14px}
.why-flow__node{position:relative;display:grid;place-items:center;width:68px;height:68px;margin-bottom:12px;border-radius:50%;background:#fff;border:3px solid color-mix(in srgb,var(--c) 45%,#cfd8e3);color:var(--c);box-shadow:0 6px 16px rgba(15,32,52,.1);transition:background-color .35s ease,border-color .35s ease,color .35s ease,transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s ease}
.why-flow__node svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-flow__node b{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0e1b2b;color:#fff;font-size:12px;font-weight:800;line-height:1}
.why-flow__title{color:var(--st-ink);font-size:17px;font-weight:830;transition:color .3s ease}
.why-flow__q{color:var(--st-muted);font-size:12.5px;font-weight:600;line-height:1.6}
.why-flow__step:hover .why-flow__node{transform:translateY(-3px)}
.why-flow__step.is-done .why-flow__node{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.why-flow__step.is-active .why-flow__node{border-color:var(--c);background:var(--c);color:#fff;transform:scale(1.12);box-shadow:0 12px 26px color-mix(in srgb,var(--c) 45%,transparent)}
.why-flow__step.is-active .why-flow__title{color:var(--c)}
.why-panel{position:relative;display:flex;align-items:center;gap:18px;max-width:720px;margin:34px auto 0;padding:22px 26px 24px;border:1px solid var(--st-line);border-top:4px solid var(--c);border-radius:14px;background:#fff;box-shadow:0 2px 4px rgba(15,32,52,.06),0 14px 30px rgba(15,32,52,.1);overflow:hidden;transition:border-color .4s ease}
.why-panel__icon{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);transition:background-color .4s ease,color .4s ease}
.why-panel__icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-panel__meta{display:flex;align-items:center;gap:8px;margin:0;color:var(--c);font-size:13px;font-weight:800;transition:color .4s ease}
.why-panel__meta i{font-style:normal;opacity:.5}
.why-panel__text{margin:6px 0 0;color:var(--st-ink);font-size:18px;font-weight:780;line-height:1.7}
.why-panel__timer{position:absolute;inset:auto 0 0 0;height:3px;background:color-mix(in srgb,var(--c) 14%,transparent)}
.why-panel__timer i{position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:right}
.why-panel.is-playing .why-panel__timer i{animation:why-timer 3.2s linear forwards}
@keyframes why-timer{to{transform:scaleX(1)}}
@keyframes why-swap{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes why-pop{from{transform:scale(.7)}to{transform:none}}
@keyframes why-ring{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}
@media(prefers-reduced-motion:no-preference){
.why-panel.is-swap .why-panel__body{animation:why-swap .45s ease both}
.why-panel.is-swap .why-panel__icon{animation:why-pop .45s cubic-bezier(.3,1.5,.5,1) both}
.why-flow__step.is-active .why-flow__node::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--c);animation:why-ring 1.8s ease-out infinite}
.why-flow-sec .why-flow__step, .why-flow-sec .why-seg, .why-flow-sec .why-panel{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * .12s + .15s)}
.why-flow-sec.is-revealed .why-flow__step, .why-flow-sec.is-revealed .why-seg, .why-flow-sec.is-revealed .why-panel{opacity:1;transform:none}
}
@media(max-width:860px){
.why-flow{grid-template-columns:1fr;margin-top:34px;gap:6px}
.why-flow__line{top:34px;bottom:34px;left:auto;right:34px;width:4px;height:auto}
.why-flow__line i{clip-path:inset(0 0 calc(100% - var(--p) * 25%) 0)}
.why-flow__step button{grid-template-columns:68px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:0;justify-items:start;align-items:center;padding:6px 0;text-align:right}
.why-flow__node{grid-row:1/3;margin:0}
.why-flow__title{align-self:end}
.why-flow__q{align-self:start}
.why-panel{flex-direction:column;align-items:flex-start;padding:20px}
.why-panel__text{font-size:16px}
}
/* Event strip (dark section): no sequence, so the connector line is hidden */
.why-events::before, .why-events .st-process__line{display:none}
.why-q{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:18px 0 0;padding:0}
.why-q li{display:flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid rgba(143,184,255,.35);border-radius:999px;background:rgba(255,255,255,.06);color:#dbe8f8;font-size:13.5px;font-weight:700}
.why-q__icon{display:grid;place-items:center;width:20px;height:20px;color:#8fb8ff}
.why-q__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Five-item timeline (story bridge) */
@media(min-width:861px){
.st-journey--n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.st-journey--n5::before, .st-journey--n5 .st-journey__line{left:10%;right:10%}
}
@media(min-width:1041px) and (max-width:1320px){
.why-page .st-hero__media{left:calc((100% - 100vw) / 2 + 40px)}
}
@media(max-width:680px){
.st-evlist--2{grid-template-columns:1fr}
}
/* Modular architecture: a core with modules that attach per project level */
.why-lv{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.why-lv button{display:grid;gap:1px;min-width:150px;padding:10px 20px;border:1px solid var(--st-line);border-radius:14px;background:#fff;font:inherit;text-align:center;cursor:pointer;color:var(--st-text);box-shadow:0 1px 2px rgba(15,32,52,.06);transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .2s ease,box-shadow .3s ease}
.why-lv b{font-size:15px;font-weight:820}
.why-lv small{font-size:12px;font-weight:600;color:var(--st-muted);transition:color .3s ease}
.why-lv button:hover{transform:translateY(-1px);border-color:var(--c)}
.why-lv button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--c) 40%,transparent)}
.why-lv button[aria-pressed="true"] small{color:rgba(255,255,255,.88)}
.why-lv button:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.why-orb{--r:190px;position:relative;width:100%;max-width:640px;height:calc(var(--r) * 2 + 96px);margin:34px auto 0}
.why-orb__core{position:absolute;left:50%;top:50%;z-index:2;display:grid;justify-items:center;gap:6px;width:112px;height:112px;margin:-56px 0 0 -56px;align-content:center;border-radius:50%;background:#0e1b2b;color:#fff;font-size:13px;font-weight:820;box-shadow:0 0 0 8px rgba(14,27,43,.08),0 16px 34px rgba(14,27,43,.35)}
.why-orb__core i, .why-orb__sat i{display:grid;place-items:center}
.why-orb__core svg{width:30px;height:30px;fill:none;stroke:#8fb8ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why-orb__arm{position:absolute;left:50%;top:50%;width:var(--r);height:2px;transform-origin:left center;transform:rotate(var(--a))}
.why-orb__arm::before{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,#0e1b2b,var(--c));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.why-orb__sat{position:absolute;right:0;top:50%;display:flex;align-items:center;gap:10px;padding:12px 20px;border:2px solid var(--c);border-radius:999px;background:#fff;color:var(--st-ink);font-size:16px;font-weight:780;white-space:nowrap;box-shadow:0 8px 20px rgba(15,32,52,.12);transform:translate(50%,-50%) rotate(calc(var(--a) * -1)) scale(.8);opacity:.28;filter:grayscale(1);transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .4s ease,filter .4s ease}
.why-orb__sat svg{width:26px;height:26px;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-orb__arm.is-on::before{transform:scaleX(1)}
.why-orb__arm.is-on .why-orb__sat{opacity:1;filter:none;transform:translate(50%,-50%) rotate(calc(var(--a) * -1)) scale(1)}
.why-mod{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#e6efff 0%,#f1f6ff 55%,#e9f1fd 100%)}
/* Concentric rings centred on the core; the spacing is half the satellite radius so the satellites sit on a ring */
.why-orb::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:1500px;height:1500px;transform:translate(-50%,-50%);pointer-events:none;background:repeating-radial-gradient(circle,transparent 0 calc(var(--r) / 2 - 1px),rgba(59,130,255,.26) calc(var(--r) / 2 - 1px) calc(var(--r) / 2));-webkit-mask-image:radial-gradient(circle,#000 0%,#000 14%,transparent 46%);mask-image:radial-gradient(circle,#000 0%,#000 14%,transparent 46%)}
@media(prefers-reduced-motion:no-preference){
.why-orb__core{animation:why-core 2.8s ease-in-out infinite}
}
@keyframes why-core{50%{box-shadow:0 0 0 14px rgba(14,27,43,.04),0 16px 34px rgba(14,27,43,.35)}}
@media(max-width:620px){
.why-orb{--r:124px;height:calc(var(--r) * 2 + 90px)}
.why-orb__core{width:92px;height:92px;margin:-46px 0 0 -46px;font-size:12px}
.why-orb__sat{padding:7px 11px;font-size:12.5px;gap:6px}
.why-orb__sat svg{width:18px;height:18px}
.why-orb__sub{display:none}
.why-lv button{min-width:0;flex:1 1 30%;padding:8px 10px}
}
/* Two-column layout: copy and project levels on the right (first column in RTL), the diagram on the left */
.why-mod__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:40px}
.why-mod__copy .st-head{margin:0}
.why-mod__copy .st-lead{margin-inline:0}
.why-mod .why-lv{flex-direction:column;align-items:stretch;gap:10px;margin-top:28px;max-width:360px}
.why-mod .why-lv button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:12px 18px;text-align:right}
.why-mod .why-orb{--r:175px;margin-top:0}
@media(max-width:1040px){
.why-mod__grid{grid-template-columns:1fr;gap:10px}
.why-mod .why-lv{flex-direction:row;max-width:none;margin-top:22px}
.why-mod .why-lv button{display:grid;justify-content:stretch;text-align:center}
.why-mod .why-orb{margin-top:24px}
}
@media(max-width:620px){
.why-mod .why-orb{--r:124px}
}
/* Management levels: three connected nodes (static) */
.why-net-sec{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#e3e8ee 0%,#f1f3f6 55%,#e5e9ee 100%)}
.why-net-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(52,80,111,.24) 1.6px,transparent 1.8px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 80% at 50% 55%,#000 0%,transparent 100%);mask-image:radial-gradient(70% 80% at 50% 55%,#000 0%,transparent 100%)}
.why-net-sec .st-shell{padding-block:0}
.why-net{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:920px;margin:36px auto 0;padding:0}
.why-net__line{position:absolute;top:46px;left:16.66%;right:16.66%;height:5px;border-radius:3px;background:linear-gradient(270deg,#34506f,#4f7ea6,#d9822b)}
.why-net__node{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:4px;text-align:center}
.why-net__circle{display:grid;place-items:center;width:92px;height:92px;margin-bottom:12px;border-radius:50%;background:var(--c);color:#fff;box-shadow:0 10px 22px color-mix(in srgb,var(--c) 35%,transparent)}
.why-net__circle svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why-net__node b{color:var(--st-ink);font-size:18px;font-weight:830}
.why-net__node small{color:var(--c);font-size:13px;font-weight:700}
.why-net__node ul{list-style:none;display:grid;gap:6px;justify-items:center;margin:12px 0 0;padding:0}
.why-net__node ul li{padding:5px 16px;border:1.5px solid var(--c);border-radius:999px;background:#fff;color:var(--st-ink);font-size:14px;font-weight:760}
@media(max-width:1040px){
.why-net-sec .why-net{margin-top:40px}
}
@media(max-width:620px){
.why-net__circle{width:76px;height:76px}
.why-net__circle svg{width:36px;height:36px}
.why-net__line{top:38px}
.why-net__node b{font-size:13px}
.why-net__node ul li{padding:4px 9px;font-size:11.5px}
}
/* One-off entrance when the section scrolls into view (line draws, nodes rise in sequence) */
@media(prefers-reduced-motion:no-preference){
.why-net__line{transform:scaleX(0);transform-origin:right;transition:transform 1.2s cubic-bezier(.4,0,.2,1) .2s}
.why-net__node{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.why-net__node:nth-of-type(1){transition-delay:.15s}
.why-net__node:nth-of-type(2){transition-delay:.55s}
.why-net__node:nth-of-type(3){transition-delay:.95s}
.why-net-sec.is-revealed .why-net__line{transform:none}
.why-net-sec.is-revealed .why-net__node{opacity:1;transform:none}
}
/* Builder knowledge: linked real screenshots composed into one scene, with support buttons */
.why-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.why-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:1.5px solid var(--st-blue);border-radius:10px;background:#fff;color:var(--st-blue);font-size:15px;font-weight:800;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.why-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(37,99,235,.18)}
.why-btn--primary{background:var(--st-blue);color:#fff}
.why-btn:focus-visible{outline:2px solid var(--st-blue);outline-offset:3px}
.why-know .why-mod__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.why-shots{position:relative;width:100%;max-width:660px;aspect-ratio:16/11;margin:0 auto}
.why-shot{position:absolute;display:block;color:inherit;text-decoration:none;transition:transform .3s ease,filter .3s ease;filter:drop-shadow(0 14px 22px rgba(15,32,52,.22))}
.why-shot img{display:block;width:100%;height:auto}
.why-shot:hover{transform:translateY(-6px);filter:drop-shadow(0 20px 28px rgba(15,32,52,.3))}
.why-shot:focus-visible{outline:2px solid var(--st-blue);outline-offset:4px;border-radius:12px}
.why-shot--cward{right:0;top:2%;width:54%;z-index:1}
.why-shot--configo{left:0;bottom:0;width:62%;z-index:2}
.why-shot--alerto{right:6%;bottom:0;width:27%;z-index:3}
.why-shot__tag{position:absolute;right:50%;bottom:-6px;transform:translateX(50%);display:grid;justify-items:center;padding:6px 16px;border-radius:999px;background:#0e1b2b;color:#fff;white-space:nowrap;filter:none;box-shadow:0 8px 18px rgba(14,27,43,.3)}
.why-shot__tag b{font-size:13px;font-weight:800}
.why-shot__tag small{color:#8fb8ff;font-size:11px;font-weight:700}
@media(prefers-reduced-motion:no-preference){
.why-know .why-shot{opacity:0;transform:translateY(26px) scale(.96);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .3s ease;transition-delay:calc(var(--i) * .22s + .2s)}
.why-know.is-revealed .why-shot{opacity:1;transform:none}
.why-know.is-revealed .why-shot:hover{transform:translateY(-6px);transition-delay:0s}
.why-know .why-mod__copy>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.why-know .why-mod__copy>.why-btns{transition-delay:.25s}
.why-know.is-revealed .why-mod__copy>*{opacity:1;transform:none}
}
@media(max-width:1040px){
.why-know .why-mod__grid{grid-template-columns:1fr}
.why-shots{margin-top:36px}
}
@media(max-width:620px){
.why-shot__tag{padding:4px 10px}
.why-shot__tag b{font-size:11px}
.why-shot__tag small{font-size:11px}
.why-btn{flex:1 1 auto}
}
.why-shot--cward .why-shot__tag{top:-10px;bottom:auto}