/* Hero visuals of the secondary pages (audit, hacked site, showcase site, e-invoicing) */

/* Audit: scores + prioritised findings */
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.scores div{background:rgba(255,255,255,.06);border-radius:14px;padding:12px;text-align:center}
.scores b{display:block;font:700 2rem/1 "Outfit",sans-serif;color:var(--coral)}
.scores span{font-size:.85rem;color:#D3C8E6}
.findings li{grid-template-columns:auto 1fr}
.sev{display:inline-block;min-width:84px;text-align:center;padding:.15em .6em;border-radius:999px;font-weight:700;font-size:.8rem}
.sev-urgent{background:var(--coral);color:var(--ink)}
.sev-important{background:#FBD38D;color:var(--ink)}
.sev-comfort{background:rgba(255,255,255,.14);color:#fff}

/* Hacked site: status badge switching from alert to clean */
.status-swap{position:relative;display:inline-grid}
.status-swap .st{grid-area:1/1;padding:.25em .8em;border-radius:999px;font-weight:700;font-size:.9rem;white-space:nowrap}
.st-alert{background:var(--coral);color:var(--ink)}
.st-ok{background:#6EE7B7;color:var(--ink);opacity:0}
@media (prefers-reduced-motion:reduce){.st-alert{opacity:0}.st-ok{opacity:1}}

/* Showcase site: desktop + phone mock-ups */
.devices{position:relative;padding:0 0 40px 0}
.device-desktop{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:0 30px 60px -30px rgba(53,27,93,.35)}
.device-desktop .browser-bar{margin-bottom:10px}
.mock{display:grid;gap:12px}
.mock i,.mock b,.mock span{display:block;border-radius:6px}
.mock-nav{display:flex;align-items:center;gap:10px}
.mock-nav i{width:70px;height:14px;background:var(--ink)}
.mock-nav b{width:44px;height:8px;background:var(--line)}
.mock-nav b:first-of-type{margin-left:auto}
.mock-hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;padding:14px;background:var(--bg-2);border-radius:12px}
.mock-hero>div{display:grid;gap:8px}
.l1{height:14px;width:90%;background:var(--ink)}
.l2{height:8px;width:70%;background:var(--line)}
.btn-mock{height:22px;width:90px;border-radius:999px!important;background:var(--coral)}
.img-mock{aspect-ratio:4/3;background:linear-gradient(135deg,#A98BE8,var(--mint-pale))}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-cards span{height:54px;background:var(--bg-2)}
.device-phone{position:absolute;right:-6px;bottom:0;width:30%;min-width:110px;background:#fff;border:6px solid var(--ink);border-radius:22px;padding:10px 8px;box-shadow:0 20px 40px -20px rgba(53,27,93,.5)}
.device-phone .mock{gap:8px}
.device-phone .mock-nav i{width:40px;height:10px}
.device-phone .btn-mock{width:70%;height:18px}

/* E-invoicing: flow between three nodes */
.flow{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:28px 26px;box-shadow:0 30px 60px -30px rgba(53,27,93,.45)}
.flow-nodes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.flow-nodes li{display:grid;justify-items:center;gap:10px;font-weight:600;font-size:.95rem}
.flow-nodes .icon{width:58px;height:58px;padding:14px;border-radius:18px;background:rgba(255,255,255,.08);color:#D3C8E6}
.flow-nodes .flow-mid .icon{background:var(--coral);color:var(--ink)}
.flow-track{position:relative;height:4px;margin:22px 16.6% 6px;border-radius:999px;background:rgba(255,255,255,.14)}
.flow-doc{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.flow figcaption{margin-top:18px}

@keyframes swap-out{0%,35%{opacity:1}45%,100%{opacity:0}}
@keyframes swap-in{0%,35%{opacity:0}45%,100%{opacity:1}}
@keyframes travel{0%{left:0}40%{left:50%}55%{left:50%}95%,100%{left:100%}}
@media (prefers-reduced-motion:no-preference){
  .scores div{animation:pop .45s ease both;animation-delay:calc(var(--i) * 150ms + .2s)}
  .findings li{animation-delay:calc(var(--i) * 220ms + .8s)}
  .st-alert{animation:swap-out 3.4s ease forwards 1s}
  .st-ok{animation:swap-in 3.4s ease forwards 1s}
  .recovery .checklist li{animation-delay:calc(var(--i) * 450ms + .4s)}
  .mock>*,.device-phone .mock>*{animation:pop .5s ease both;animation-delay:calc(var(--i) * 160ms + .2s)}
  .flow-doc{animation:travel 4s cubic-bezier(.6,0,.3,1) infinite 1s}
}

/* Local pages: travel zones */
.zones{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:26px;box-shadow:0 30px 60px -30px rgba(53,27,93,.45)}
.zones-map{position:relative;aspect-ratio:16/10;border-radius:18px;background:rgba(255,255,255,.04);overflow:hidden}
.ring{position:absolute;left:38%;top:68%;border-radius:50%;transform:translate(-50%,-50%)}
.ring-1{width:34%;aspect-ratio:1;background:rgba(255,138,115,.35);border:2px solid var(--coral)}
.ring-2{width:66%;aspect-ratio:1;background:rgba(169,139,232,.18);border:2px dashed #A98BE8}
.ring-3{width:130%;aspect-ratio:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.pin{position:absolute;left:38%;top:68%;transform:translate(-50%,-100%);color:var(--coral)}
.pin .icon{width:34px;height:34px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.city{position:absolute;padding:.2em .7em;border-radius:999px;background:rgba(255,255,255,.12);font-weight:600;font-size:.88rem;white-space:nowrap}
.city.is-focus{background:#fff;color:var(--ink)}
.city-perpignan{left:38%;top:74%;transform:translateX(-50%)}
.city-narbonne{left:52%;top:42%}
.city-carcassonne{left:14%;top:14%}
.zones-legend{list-style:none;display:grid;gap:8px;margin-top:16px}
.zones-legend li{display:flex;gap:12px;align-items:center;font-size:.95rem;color:#D3C8E6}
.zones-legend strong{color:#fff;margin-right:6px}
.swatch{flex:none;width:14px;height:14px;border-radius:50%}
.s1{background:var(--coral)}.s2{background:#A98BE8}.s3{background:rgba(255,255,255,.3)}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.85);opacity:.6}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .ring-1{animation:ripple 1.2s ease-out both .2s}
  .ring-2{animation:ripple 1.2s ease-out both .5s}
  .ring-3{animation:ripple 1.2s ease-out both .8s}
  .city{animation:pop .4s ease both 1.2s}
}
/* Automation scenario: tools linked in a row */
.chain{list-style:none;display:flex;justify-content:space-between;position:relative;margin:6px 4px 18px;padding:0}
.chain::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:linear-gradient(90deg,var(--coral),#B9A3E3)}
.chain li{position:relative;display:grid;justify-items:center;gap:6px;color:#D3C8E6;font-size:.85rem}
.chain .icon{display:block;box-sizing:content-box;width:22px;height:22px;padding:13px;border-radius:50%;background:#4A2D78;color:#fff;box-shadow:0 0 0 4px var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .chain::before{transform-origin:left;animation:chain-line 1.2s ease .3s both}
  .chain li{animation:pop .45s ease both;animation-delay:calc(var(--i) * 250ms + .3s)}
}
@keyframes chain-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}