/*
 * Il sito pubblico — foglio di stile del disegno approvato (v8).
 *
 * Questo file è il disegno approvato del sito, portato dentro la piattaforma
 * senza cambiarlo: colori, misure, ombre, animazioni e punti di rottura sono
 * quelli del file consegnato. Le uniche differenze sono meccaniche e stanno
 * tutte qui in cima:
 *
 *  1. ogni regola è chiusa dentro `.opero-site`, così la vetrina non tocca i
 *     colori dell'applicazione (che condivide il layout radice) e viceversa;
 *  2. `:root` e `body` del file originale diventano il contenitore `.opero-site`;
 *  3. il carattere passa da `Inter` a `var(--font-inter)`, che è il nome che
 *     gli dà `next/font` nel layout radice;
 *  4. in fondo al file — e solo lì — stanno le poche aggiunte che il disegno
 *     non poteva prevedere: il modulo demo che parte davvero e le pagine legali.
 *
 * Chi ritocca il disegno lavora su questo file. Chi ritocca il comportamento
 * lavora su `components/feature/site/interactions.ts`.
 */

/*
 * Il ripristino.
 *
 * Il file approvato è stato disegnato su una pagina nuda, con i valori del
 * browser. Qui dentro c'è invece il reset di Tailwind, che azzera i margini
 * dei paragrafi, la misura dei titoli e i pallini degli elenchi: senza questo
 * blocco il sito si vedrebbe compresso, con le spaziature sbagliate. `revert`
 * riporta ai valori del browser, e le regole del disegno ripartono da lì.
 */
.opero-site,
.opero-site *,
.opero-site *::before,
.opero-site *::after {
  border-style: revert;
  border-width: revert;
  border-color: revert;
}
.opero-site h1,
.opero-site h2,
.opero-site h3,
.opero-site h4,
.opero-site h5,
.opero-site h6,
.opero-site p,
.opero-site ul,
.opero-site ol,
.opero-site li,
.opero-site dl,
.opero-site dd,
.opero-site blockquote,
.opero-site figure,
.opero-site hr,
.opero-site fieldset,
.opero-site table {
  margin: revert;
  padding: revert;
  font-size: revert;
  font-weight: revert;
  list-style: revert;
}
.opero-site button,
.opero-site input,
.opero-site textarea,
.opero-site select {
  all: revert;
}

.opero-site{
  --ink:#111;--muted:#6f716d;--line:#e7e7df;--soft:#f7f7f3;--white:#fff;
  --accent:#00A3E0;--accent-strong:#007DB3;--accent-soft:#DDF5FD;--dark:#111;
  --radius:28px;--shadow:0 22px 70px rgba(10,13,14,.10);--shadow-soft:0 12px 35px rgba(10,13,14,.07);--max:1220px;
}
.opero-site, .opero-site *{box-sizing:border-box}
html:has(.opero-site){scroll-behavior:smooth}
.opero-site{margin:0;font-family:var(--font-inter),ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
.opero-site a{color:inherit;text-decoration:none}
.opero-site button,
.opero-site input,
.opero-site textarea{font:inherit}
.opero-site img,
.opero-site svg{max-width:100%;display:block}
.opero-site .wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.opero-site .section{padding:96px 0}
.opero-site .section-sm{padding:58px 0}
.opero-site .muted{color:var(--muted)}
.opero-site .nav-shell{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(231,231,223,.8)}
.opero-site .nav{min-height:76px;display:flex;align-items:center;gap:26px}
.opero-site .brand{display:flex;align-items:center;min-width:132px}
.opero-site .brand img{width:124px;height:auto}
.opero-site .nav-links{display:flex;align-items:center;gap:25px;margin-left:10px;font-size:14px;color:#666}
.opero-site .nav-links a{position:relative;padding:28px 0}
.opero-site .nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:17px;height:2px;background:var(--accent-strong);transition:.25s}
.opero-site .nav-links a:hover:after,
.opero-site .nav-links a.active:after{right:0}
.opero-site .nav-links a.active{color:#111;font-weight:750}
.opero-site .nav-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.opero-site .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:45px;padding:12px 18px;border-radius:13px;border:1px solid var(--line);font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;position:relative;overflow:hidden}
.opero-site .btn:hover{transform:translateY(-2px)}
.opero-site .btn-dark{background:#111;color:#fff;border-color:#111;box-shadow:0 10px 24px rgba(17,17,17,.13)}
.opero-site .btn-light{background:#fff}
.opero-site .btn-accent{background:var(--accent);border-color:var(--accent);color:#111}
.opero-site .menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;align-items:center;justify-content:center}
.opero-site .mobile-menu{display:none;padding:0 0 14px}
.opero-site .mobile-menu.open{display:grid}
.opero-site .mobile-menu a{padding:12px 2px;border-bottom:1px solid var(--line);font-weight:700}
.opero-site .mobile-menu .btn{margin-top:10px}
.opero-site .progress-top{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--accent-strong);z-index:100;pointer-events:none}
.opero-site .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;color:#62645f}
.opero-site .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.opero-site .display{font-size:clamp(46px,6.2vw,86px);line-height:.94;letter-spacing:-.064em;margin:20px 0 22px}
.opero-site .section-title{font-size:clamp(38px,4.8vw,66px);line-height:.98;letter-spacing:-.052em;margin:16px 0 18px}
.opero-site .lead{font-size:19px;color:var(--muted);max-width:720px}
/*
 * Il titolo e quello che viene dopo si toccano.
 *
 * Sotto il titolo di pagina c'erano due spazi impilati che facevano lo
 * stesso mestiere: il fondo del titolo e il colmo della sezione seguente —
 * 118 pixel dove c'è una `section-sm`, 156 dove c'è una `section`. Adesso
 * lo spazio lo tiene il titolo, uno solo, e la sezione dopo attacca da lì.
 */
.opero-site .page-hero{padding:85px 0 30px}
.opero-site .page-hero + .section,
.opero-site .page-hero + .section-sm{padding-top:0}
/* Se la sezione dopo apre con un titolo suo, un filo d'aria: due titoli
   incollati si leggono come uno solo andato storto. */
.opero-site .page-hero + .section:has(.section-title),
.opero-site .page-hero + .section-sm:has(.section-title){padding-top:34px}
.opero-site .page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
.opero-site .page-hero p{font-size:19px;color:var(--muted);max-width:670px}
.opero-site .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.opero-site .accent-mark{position:relative;display:inline-block;z-index:0}
.opero-site .accent-mark:after{content:"";position:absolute;z-index:-1;left:-3%;right:-3%;height:21%;bottom:8%;border-radius:7px;background:var(--accent);transform:rotate(-1.3deg)}
.opero-site .hero-home{padding:78px 0 56px;position:relative;overflow:hidden}
.opero-site .hero-home:before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(0,163,224,.26),rgba(0,163,224,0) 67%)}
.opero-site .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.opero-site .hero-home h1{font-size:clamp(54px,6.8vw,96px);line-height:.89;letter-spacing:-.072em;margin:20px 0 24px}
.opero-site .hero-home p{font-size:20px;color:var(--muted);max-width:670px}
.opero-site .hero-proof{display:flex;gap:19px;flex-wrap:wrap;margin-top:25px;font-size:13px;color:#7e807b}
.opero-site .proof-dot{display:inline-block;width:7px;height:7px;background:#5bc879;border-radius:50%;margin-right:7px}
.opero-site .browser{background:#fff;border:1px solid #deded7;border-radius:26px;box-shadow:var(--shadow);overflow:hidden;will-change:transform}
.opero-site .browser-top{height:46px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 15px;background:#fbfbf9}
.opero-site .browser-dot{width:9px;height:9px;border-radius:50%;background:#d8d8d2}
.opero-site .browser-url{margin-left:9px;height:26px;flex:1;border-radius:8px;background:#efefea;color:#9a9a94;font-size:10px;display:flex;align-items:center;padding:0 10px}
.opero-site .mock-app{display:grid;grid-template-columns:124px 1fr;min-height:430px}
.opero-site .mock-side{background:#121212;padding:17px 10px;color:#aaa}
.opero-site .mock-brand{color:#fff;font-size:13px;font-weight:900;margin:0 7px 18px}
.opero-site .side-i{font-size:9px;padding:9px 8px;border-radius:8px;margin-bottom:4px}
.opero-site .side-i.active{background:#2b2b2b;color:#fff}
.opero-site .mock-main{background:#f6f6f2;padding:20px}
.opero-site .mock-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px}
.opero-site .mock-head h3{font-size:23px;letter-spacing:-.04em;margin:2px 0}
.opero-site .mock-head small{font-size:9px;color:#888}
.opero-site .tiny-btn{font-size:8px;font-weight:800;background:#111;color:#fff;border-radius:999px;padding:8px 10px}
.opero-site .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opero-site .stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px}
.opero-site .stat.accent{background:var(--accent);border-color:var(--accent)}
.opero-site .stat small{font-size:8px;color:#888}
.opero-site .stat strong{display:block;font-size:18px;margin-top:3px}
.opero-site .jobs{margin-top:9px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.opero-site .job{display:grid;grid-template-columns:6px 1fr auto;gap:8px;align-items:center;padding:9px 0;border-top:1px solid #efefea}
.opero-site .job:first-child{border-top:0}
.opero-site .job-bar{height:31px;background:#111;border-radius:9px}
.opero-site .job:nth-child(2) .job-bar{background:var(--accent)}
.opero-site .job b{font-size:9px}
.opero-site .job span{display:block;font-size:7px;color:#888}
.opero-site .badge{font-size:7px;background:#f1f1ec;padding:4px 6px;border-radius:999px}
.opero-site .home-choices{padding:62px 0 100px}
.opero-site .choice-head{text-align:center;max-width:760px;margin:0 auto 34px}
.opero-site .choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.opero-site .choice-card{border:1px solid var(--line);border-radius:24px;padding:26px;min-height:250px;background:#fff;transition:.25s;position:relative;overflow:hidden}
.opero-site .choice-card:hover{box-shadow:var(--shadow-soft);transform:translateY(-4px)}
.opero-site .choice-card .icon{width:51px;height:51px;border-radius:15px;background:var(--soft);display:grid;place-items:center;font-size:24px;margin-bottom:40px}
.opero-site .choice-card h3{font-size:23px;letter-spacing:-.035em;margin:0 0 8px}
.opero-site .choice-card p{font-size:13px;color:var(--muted);margin:0 0 20px}
.opero-site .choice-card .go{font-size:13px;font-weight:850;position:absolute;bottom:22px}
.opero-site .flow-panel{background:#111;color:#fff;border-radius:36px;padding:48px;overflow:hidden;position:relative}
.opero-site .flow-panel:after{content:"";position:absolute;width:330px;height:330px;border:62px solid rgba(0,163,224,.12);right:-170px;top:-160px;border-radius:50%}
.opero-site .flow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:30px;position:relative;z-index:2}
.opero-site .flow-step{background:#1c1c1c;border:1px solid #303030;border-radius:17px;padding:17px;min-height:125px;transition:.2s;cursor:pointer}
.opero-site .flow-step:hover,
.opero-site .flow-step.active{border-color:var(--accent);transform:translateY(-3px)}
.opero-site .flow-step strong{display:block;font-size:13px}
.opero-site .flow-step span{display:block;font-size:9px;color:#9b9b9b;margin-top:6px}
.opero-site .flow-icon{width:31px;height:31px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#111;font-size:12px;font-weight:900;margin-bottom:22px}
.opero-site .feature-slider{border:1px solid var(--line);border-radius:32px;overflow:hidden;background:var(--soft);box-shadow:var(--shadow-soft)}
.opero-site .slider-top{display:flex;gap:8px;overflow:auto;padding:14px;background:#fff;border-bottom:1px solid var(--line);scrollbar-width:none}
.opero-site .slider-top::-webkit-scrollbar{display:none}
.opero-site .slide-tab{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:800;cursor:pointer}
.opero-site .slide-tab.active{background:#111;color:#fff;border-color:#111}
.opero-site .slides{position:relative;min-height:520px}
.opero-site .feature-slide{display:none;grid-template-columns:.88fr 1.12fr;gap:42px;padding:44px;align-items:center}
.opero-site .feature-slide.active{display:grid;animation:slideIn .45s ease}
.opero-site .feature-slide h2{font-size:clamp(36px,4.6vw,62px);line-height:.97;letter-spacing:-.052em;margin:11px 0 16px}
.opero-site .feature-slide p{color:var(--muted)}
.opero-site .feature-list{display:grid;gap:9px;margin-top:24px}
.opero-site .feature-list div{display:flex;gap:9px;align-items:center;font-size:14px}
.opero-site .feature-list i{width:23px;height:23px;background:#111;color:#fff;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:10px}
.opero-site .ui-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow-soft)}
.opero-site .ui-row{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;border-bottom:1px solid #efefea;font-size:12px}
.opero-site .ui-row:last-child{border:0}
.opero-site .ui-row b{font-size:13px}
.opero-site .ui-value{font-weight:900}
.opero-site .ui-bar{height:10px;border-radius:99px;background:#ecece6;overflow:hidden;margin:18px 0}
.opero-site .ui-bar i{display:block;height:100%;width:74%;border-radius:inherit;background:#111}
.opero-site .ui-big{font-size:38px;font-weight:950;letter-spacing:-.06em}
.opero-site .slider-controls{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border-top:1px solid var(--line)}
.opero-site .slider-arrows{display:flex;gap:7px}
.opero-site .round-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px}
.opero-site .dots{display:flex;gap:6px}
.opero-site .dot{width:7px;height:7px;background:#d8d8d3;border:0;border-radius:50%;padding:0}
.opero-site .dot.active{width:24px;border-radius:99px;background:#111}
.opero-site .phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.opero-site .phone{background:#111;border-radius:35px;padding:8px;box-shadow:0 25px 55px rgba(0,0,0,.16)}
.opero-site .phone-screen{background:#f6f6f2;min-height:500px;border-radius:28px;padding:16px}
.opero-site .notch{width:78px;height:18px;background:#111;border-radius:999px;margin:0 auto 20px}
.opero-site .phone h4{font-size:24px;letter-spacing:-.05em;margin:2px 0 16px}
.opero-site .phone-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;margin-bottom:9px}
.opero-site .phone-card.accent{background:var(--accent);border-color:var(--accent)}
.opero-site .phone-card.dark{background:#111;border-color:#111;color:#fff}
.opero-site .phone-card b{display:block;font-size:11px}
.opero-site .phone-card span{font-size:8px;color:#888}
.opero-site .phone-card.dark span{color:#aaa}
.opero-site .phone-action{margin-top:14px;background:#111;color:#fff;border-radius:13px;padding:13px;text-align:center;font-size:10px;font-weight:850}
.opero-site .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.opero-site .price-card{border:1px solid var(--line);border-radius:26px;padding:30px;background:#fff;position:relative;min-height:570px;display:flex;flex-direction:column}
/* In colonna il gettone si allargherebbe quanto il cartoncino: resta pillola. */
.opero-site .price-card > .price-tag{align-self:flex-start}
.opero-site .price-card.featured{background:#111;color:#fff;border-color:#111;transform:translateY(-12px)}
.opero-site .price-tag{position:absolute;top:18px;right:18px;background:var(--accent);color:#111;border-radius:999px;font-size:10px;font-weight:900;padding:7px 9px}
.opero-site .price-name{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.opero-site .price-number{font-size:45px;font-weight:950;letter-spacing:-.06em;margin:18px 0 5px}
.opero-site .price-number small{font-size:13px;font-weight:700;letter-spacing:0;color:#888}
.opero-site .price-card.featured .price-number small,
.opero-site .price-features{list-style:none;padding:0;margin:23px 0 30px;display:grid;gap:11px}
.opero-site .price-features li{font-size:13px;display:flex;gap:9px}
.opero-site .price-features li:before{content:"✓";font-weight:950}
.opero-site .price-card.featured .price-features li:before{color:var(--accent)}
.opero-site .price-card .btn{margin-top:auto}
.opero-site .team-intro{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:end}
.opero-site .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
.opero-site .person{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff}
.opero-site .portrait{height:390px;background:linear-gradient(135deg,#f6f6f0,#e7e7de);display:grid;place-items:center;position:relative}
.opero-site .person-info{padding:24px}
.opero-site .person-info h3{font-size:27px;letter-spacing:-.04em;margin:0 0 4px}
.opero-site .person-info p{color:var(--muted);margin:0}
.opero-site .vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.opero-site .vision-card{border:1px solid var(--line);border-radius:22px;padding:24px;background:var(--soft)}
.opero-site .vision-card .icon{width:43px;height:43px;border-radius:13px;background:#fff;display:grid;place-items:center;font-size:21px;margin-bottom:33px}
.opero-site .vision-card h3{margin:0 0 8px;letter-spacing:-.025em}
.opero-site .vision-card p{font-size:13px;color:var(--muted);margin:0}
.opero-site .sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:38px}
.opero-site .sector{border:1px solid var(--line);border-radius:20px;padding:21px;background:#fff}
.opero-site .sector-icon{width:45px;height:45px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:22px;margin-bottom:28px}
.opero-site .sector b{display:block}
.opero-site .sector span{font-size:12px;color:var(--muted)}
.opero-site .faq-list{max-width:900px;margin:38px auto 0}
.opero-site .faq-item{border-top:1px solid var(--line)}
.opero-site .faq-item:last-child{border-bottom:1px solid var(--line)}
.opero-site .faq-q{width:100%;background:none;border:0;padding:20px 0;display:flex;justify-content:space-between;text-align:left;font-size:17px;font-weight:850;cursor:pointer}
.opero-site .faq-q span:last-child{font-size:22px;transition:.25s}
.opero-site .faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
.opero-site .faq-a{display:grid;grid-template-rows:0fr;transition:.3s}
.opero-site .faq-a>div{overflow:hidden;color:var(--muted)}
.opero-site .faq-item.open .faq-a{grid-template-rows:1fr}
.opero-site .faq-a p{padding:0 0 20px;margin:0}
.opero-site .demo-card{background:var(--accent);border-radius:36px;padding:60px;display:grid;grid-template-columns:1fr .72fr;gap:40px;align-items:end}
.opero-site .demo-card h2{font-size:clamp(40px,5vw,68px);line-height:.95;letter-spacing:-.055em;margin:0 0 14px}
.opero-site .demo-card p{color:#07506F;max-width:630px}
.opero-site .demo-actions{display:flex;justify-content:flex-end}
.opero-site .demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.opero-site .field{display:grid;gap:6px}
.opero-site .field.full{grid-column:1/-1}
.opero-site .field label{font-size:12px;font-weight:800}
.opero-site .field input,
.opero-site .field textarea{border:1px solid var(--line);border-radius:13px;padding:13px;background:#fff;font-size:16px}
.opero-site .field textarea{min-height:120px;resize:vertical}
.opero-site footer{border-top:1px solid var(--line);padding:31px 0 44px;color:#858782}
.opero-site .footer-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.opero-site .footer-row img{width:100px}
.opero-site .footer-links{display:flex;gap:18px;font-size:12px;margin-left:auto}
.opero-site .footer-copy{font-size:12px}
.opero-site .reveal{opacity:0;transform:translateY(18px);transition:.55s ease}
.opero-site .reveal.show{opacity:1;transform:none}
.opero-site .magnetic{will-change:transform;transition:transform .18s ease-out}
.opero-site .magnetic.is-near{transition:transform .07s linear}
.opero-site .tap-pop{animation:tapPop .42s ease}
.opero-site .ripple{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);animation:ripple .58s ease-out;pointer-events:none}
.opero-site .btn-light .ripple,
.opero-site .round-btn .ripple{background:rgba(17,17,17,.15)}
@keyframes tapPop{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1)}}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(22);opacity:0}}
@keyframes slideIn{from{opacity:.15;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(max-width:1050px){
.opero-site .nav-links{display:none}
.opero-site .menu-btn{display:flex}
.opero-site .nav-actions .btn-light{display:none}
.opero-site .hero-grid,
.opero-site .page-hero-grid,
.opero-site .team-intro,
.opero-site .demo-card{grid-template-columns:1fr}
.opero-site .choice-grid{grid-template-columns:repeat(3,1fr)}
.opero-site .flow-row{grid-template-columns:repeat(4,1fr)}
.opero-site .feature-slide{grid-template-columns:1fr}
.opero-site .phone-grid{grid-template-columns:repeat(3,1fr)}
.opero-site .sector-grid{grid-template-columns:repeat(2,1fr)}
.opero-site .demo-actions{justify-content:flex-start}
.opero-site .price-card.featured{transform:none}
}
@media(max-width:730px){
.opero-site .wrap{width:min(var(--max),calc(100% - 24px))}
.opero-site .section{padding:72px 0}
.opero-site .page-hero{padding:55px 0 24px}
.opero-site .hero-home{padding-top:52px}
.opero-site .hero-home h1{font-size:58px}
.opero-site .hero-home p,
.opero-site .lead{font-size:17px}
.opero-site .hero-grid{grid-template-columns:1fr}
.opero-site .browser{margin-top:12px}
.opero-site .mock-app{grid-template-columns:1fr}
.opero-site .mock-side{display:none}
.opero-site .stats{grid-template-columns:1fr}
.opero-site .choice-grid,
.opero-site .price-grid,
.opero-site .team-grid,
.opero-site .vision-grid,
.opero-site .sector-grid{grid-template-columns:1fr}
.opero-site .flow-panel{padding:30px 20px;border-radius:27px}
.opero-site .flow-row{grid-template-columns:1fr 1fr}
.opero-site .feature-slide{padding:27px 20px}
.opero-site .slides{min-height:0}
.opero-site .phone-grid{grid-template-columns:1fr;max-width:350px;margin-left:auto;margin-right:auto}
.opero-site .price-card{min-height:auto}
.opero-site .portrait{height:330px}
.opero-site .demo-card{padding:42px 24px;border-radius:27px}
.opero-site .demo-form{grid-template-columns:1fr}
.opero-site .footer-links{margin-left:0;flex-basis:100%;flex-wrap:wrap}
.opero-site .nav{min-height:68px}
.opero-site .brand img{width:110px}
}
@media(prefers-reduced-motion:reduce){
html:has(.opero-site){scroll-behavior:auto}
.opero-site .reveal{opacity:1;transform:none;transition:none}
.opero-site .magnetic{transition:none!important}
.opero-site .billing-thumb{transition:none}
.opero-site .feature-slide.active{animation:none}
.opero-site .tap-pop{animation:none}
}
/* standalone page router */
.opero-site .site-page{display:none;opacity:0;transform:translateY(10px)}
.opero-site .site-page.active{display:block;animation:pageEnter .34s ease forwards}
@keyframes pageEnter{to{opacity:1;transform:none}}
.opero-site .nav-links a[data-route].active{color:#111;font-weight:800}
.opero-site .mobile-menu a[data-route].active{color:#111;background:var(--accent-soft)}
.opero-site .route-status{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:750;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.opero-site .route-status.show{opacity:1;transform:translateX(-50%) translateY(0)}
.opero-site .magnetic{transform-origin:center;backface-visibility:hidden}
.opero-site .magnetic.is-near{filter:saturate(1.02)}
.opero-site .icon,
.opero-site .sector-icon,
.opero-site .flow-icon,
.opero-site .feature-list i,
.opero-site .browser-dot,
.opero-site .job-bar,
.opero-site .notch{will-change:transform}
@media (hover:hover) and (pointer:fine){
.opero-site .choice-card,
.opero-site .vision-card,
.opero-site .sector,
.opero-site .price-card,
.opero-site .phone-card,
.opero-site .ui-card{transition:box-shadow .2s,border-color .2s,transform .12s}
.opero-site .choice-card:hover,
.opero-site .vision-card:hover,
.opero-site .sector:hover,
.opero-site .phone-card:hover,
.opero-site .ui-card:hover{box-shadow:var(--shadow-soft)}
}
@media(max-width:730px){
.opero-site .site-page.active{animation-duration:.22s}
.opero-site .route-status{bottom:12px;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ===== V5: RESTORED PREMIUM VISUALS + MOTION ===== */
.opero-site .restored-hero{padding:86px 0 70px;overflow:hidden;position:relative}
.opero-site .restored-hero:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,163,224,.28),rgba(0,163,224,0) 67%);right:-170px;top:-190px;pointer-events:none;animation:ambientGlow 7s ease-in-out infinite alternate}
.opero-site .restored-hero .hero-grid{display:grid;grid-template-columns:1.01fr .99fr;align-items:center;gap:58px}
.opero-site .restored-hero h1{font-size:clamp(56px,7vw,96px);line-height:.89;letter-spacing:-.071em;color:#101010;max-width:760px;margin:18px 0 26px}
.opero-site .restored-hero p{font-size:20px;line-height:1.55;color:#6d6d6d;max-width:620px;margin:0 0 30px}
.opero-site .restored-hero .hero-marker{position:relative;display:inline-block;z-index:1}
.opero-site .restored-hero .hero-marker:after{content:"";position:absolute;left:-2%;right:-2%;height:19%;bottom:6%;background:var(--accent);border-radius:6px;transform:rotate(-1.2deg);z-index:-1;animation:markerBreath 4.8s ease-in-out infinite}
.opero-site .restored-hero .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.opero-site .restored-hero .hero-note{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:#7b7b77}
.opero-site .restored-hero .hero-note .pulse{width:8px;height:8px;border-radius:50%;background:#67bd76;animation:pulseDot 2s ease-in-out infinite}
.opero-site .restored-hero .hero-visual{position:relative;min-height:590px;perspective:1100px}
.opero-site .restored-hero .hero-visual:after{content:"";position:absolute;inset:76px -10px 2px 42px;background:linear-gradient(135deg,#fff4b5,#f7f7f3 58%,#ededE8);border-radius:42px;transform:rotate(1deg);z-index:0;animation:backPlate 8s ease-in-out infinite alternate}
.opero-site .restored-hero .dashboard{position:absolute;z-index:2;top:10px;right:0;width:96%;background:#fff;border:1px solid #deded7;border-radius:26px;box-shadow:0 30px 85px rgba(20,20,20,.14);overflow:hidden;transform:rotate(.45deg)}
.opero-site .restored-hero .dash-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #ecece6;background:#fbfbf9}
.opero-site .restored-hero .dash-logo{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800}
.opero-site .restored-hero .dash-logo img{width:72px;height:auto}
.opero-site .restored-hero .dots{display:flex;gap:5px}
.opero-site .restored-hero .dots i{display:block;width:7px;height:7px;border-radius:50%;background:#d8dcda}
.opero-site .restored-hero .dots i:first-child{background:var(--accent);animation:dotBlink 2.2s ease-in-out infinite}
.opero-site .restored-hero .dash-body{display:grid;grid-template-columns:125px 1fr;min-height:425px}
.opero-site .restored-hero .side{padding:20px 12px;background:#121212;border:0;color:#aaa}
.opero-site .restored-hero .side-item{height:31px;border-radius:9px;margin-bottom:7px;display:flex;align-items:center;padding:0 9px;font-size:9px;font-weight:700;color:#aaa;gap:8px}
.opero-site .restored-hero .side-item.active{background:#2a2a2a;color:#fff}
.opero-site .restored-hero .side-icon{width:10px;height:10px;border:1.6px solid currentColor;border-radius:3px}
.opero-site .restored-hero .dash-content{padding:24px;background:#f6f6f2}
.opero-site .restored-hero .mini-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.opero-site .restored-hero .mini-head h3{margin:0;font-size:21px;letter-spacing:-.035em}
.opero-site .restored-hero .mini-head small{color:#858b88}
.opero-site .restored-hero .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.opero-site .restored-hero .stat{background:#fff;border:1px solid #e7e7df;border-radius:14px;padding:14px}
.opero-site .restored-hero .stat small{display:block;color:#7f8582;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.opero-site .restored-hero .stat strong{display:block;font-size:18px;margin-top:5px}
.opero-site .restored-hero .stat.good{background:var(--accent);border-color:var(--accent)}
.opero-site .restored-hero .job-card{margin-top:12px;border:1px solid #eaedeb;border-radius:16px;padding:14px;background:#fff}
.opero-site .restored-hero .job-row{display:grid;grid-template-columns:46px 1.4fr 1fr 74px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #f0f2f1;font-size:9px}
.opero-site .restored-hero .job-row:last-child{border:0}
.opero-site .restored-hero .time-pill{background:#f1f3f2;border-radius:8px;padding:5px 6px;text-align:center;font-weight:800}
.opero-site .restored-hero .status{justify-self:end;padding:5px 8px;border-radius:99px;background:#D8F3FC;color:#07506F;font-size:8px;font-weight:800}
.opero-site .restored-hero .status.gray{background:#efefea;color:#6f6f69}
.opero-site .restored-hero .phone{position:absolute;z-index:5;bottom:0;left:-12px;width:190px;background:#101211;border-radius:31px;padding:7px;box-shadow:0 28px 70px rgba(0,0,0,.22);transform:rotate(1.8deg)}
.opero-site .restored-hero .phone-screen{background:#f6f6f2;border-radius:25px;min-height:368px;overflow:hidden;padding:18px 13px 13px}
.opero-site .restored-hero .phone-notch{width:62px;height:15px;background:#101211;border-radius:99px;margin:-14px auto 15px}
.opero-site .restored-hero .app-head{font-size:9px;color:#7c827f}
.opero-site .restored-hero .app-head strong{display:block;color:#111;font-size:20px;margin-top:3px;letter-spacing:-.04em}
.opero-site .restored-hero .today-card{margin-top:13px;background:#111;color:#fff;border-radius:18px;padding:15px}
.opero-site .restored-hero .today-card small{font-size:8px;color:#b9bfbc}
.opero-site .restored-hero .today-card h4{font-size:13px;margin:4px 0 10px}
.opero-site .restored-hero .location-pill{display:inline-flex;background:var(--accent);color:#111;border-radius:99px;padding:5px 7px;font-size:7px;font-weight:800}
.opero-site .restored-hero .app-action{background:#fff;border:1px solid #e5e8e7;border-radius:13px;padding:10px;margin-top:8px;font-size:9px;font-weight:750;display:flex;justify-content:space-between}
.opero-site .restored-hero .app-tabs{display:flex;justify-content:space-between;margin-top:14px;padding-top:9px;border-top:1px solid #e7e9e8;font-size:7px;font-weight:750}
.opero-site .restored-hero .app-tabs span:first-child{color:#111}
.opero-site .restored-hero .app-tabs span{color:#9aa09d}
.opero-site .restored-hero .float-chip{position:absolute;z-index:6;right:-20px;bottom:56px;background:#fff;border:1px solid #e5e5df;box-shadow:var(--shadow-soft);padding:12px 15px;border-radius:16px;font-size:11px;font-weight:800;display:flex;align-items:center;gap:9px}
.opero-site .restored-hero .float-chip .check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent);font-size:12px}
/* restored feature slider */
.opero-site .restored-slider{background:#fff;overflow:hidden}
.opero-site .restored-slider .slider-head{display:flex;justify-content:space-between;align-items:flex-end;gap:34px}
.opero-site .restored-slider .slider-controls{display:flex;gap:8px;flex:none}
.opero-site .restored-slider .slider-btn{width:49px;height:49px;border-radius:14px;border:1px solid #dfdfd8;background:#fff;color:#111;font-size:20px;cursor:pointer;transition:.2s}
.opero-site .restored-slider .slider-btn.dark{background:#111;color:#fff;border-color:#111}
.opero-site .restored-slider .feature-slider{margin-top:44px;border:1px solid #e5e5de;border-radius:32px;background:#f7f7f3;overflow:hidden;box-shadow:0 18px 54px rgba(20,20,20,.06)}
.opero-site .restored-slider .feature-track{display:flex;transition:transform .62s cubic-bezier(.2,.75,.25,1);will-change:transform}
.opero-site .restored-slider .feature-slide{flex:0 0 100%;min-width:100%;display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:center;padding:52px;min-height:500px}
.opero-site .restored-slider .slide-copy{max-width:470px}
.opero-site .restored-slider .slide-kicker{display:block;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#4F6E7B;margin-bottom:18px}
.opero-site .restored-slider .slide-copy h3{font-size:clamp(36px,4.4vw,58px);line-height:.96;letter-spacing:-.055em;margin:0 0 18px;color:#111}
.opero-site .restored-slider .slide-copy p{font-size:16px;color:#74746f;margin:0;max-width:460px}
.opero-site .restored-slider .slide-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.opero-site .restored-slider .slide-pills span{background:#fff;border:1px solid #dfdfd8;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:850;color:#555}
.opero-site .restored-slider .slide-demo{min-height:330px;border-radius:24px;display:flex;flex-direction:column;justify-content:center;transition:transform .35s ease,box-shadow .35s ease}
.opero-site .restored-slider .light-demo{background:#fff;border:1px solid #e5e5df;padding:24px;box-shadow:0 15px 40px rgba(20,20,20,.06)}
.opero-site .restored-slider .demo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.opero-site .restored-slider .demo-head strong{font-size:14px}
.opero-site .restored-slider .demo-head span{font-size:10px;color:#8c8c86}
.opero-site .restored-slider .invoice-ui{border:1px solid #e7eae8;border-radius:16px;overflow:hidden;background:#fff}
.opero-site .restored-slider .inv-row{display:grid;grid-template-columns:1fr 84px 86px;gap:8px;padding:13px 14px;border-bottom:1px solid #eef0ef;font-size:11px}
.opero-site .restored-slider .inv-row.head{background:#f7f8f7;color:#8a908d}
.opero-site .restored-slider .paid{font-weight:800;background:#D8F3FC;color:#07506F;padding:3px 6px;border-radius:99px;text-align:center}
.opero-site .restored-slider .pending{font-weight:800;color:#6a6e6c;background:#eff1f0;padding:3px 6px;border-radius:99px;text-align:center}
.opero-site .restored-slider .quote-demo{background:#111;padding:28px}
.opero-site .restored-slider .quote-paper{background:#fff;border-radius:18px;padding:25px;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.opero-site .restored-slider .quote-top{display:flex;justify-content:space-between;font-size:10px;color:#85857f;border-bottom:1px solid #ecece6;padding-bottom:12px}
.opero-site .restored-slider .quote-top b{color:#111;letter-spacing:.08em}
.opero-site .restored-slider .quote-client{display:grid;gap:2px;padding:19px 0}
.opero-site .restored-slider .quote-client small{font-size:8px;color:#999}
.opero-site .restored-slider .quote-client strong{font-size:17px}
.opero-site .restored-slider .quote-client span{font-size:10px;color:#777}
.opero-site .restored-slider .quote-line,
.opero-site .restored-slider .quote-total{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-top:1px solid #eeeeea;font-size:11px}
.opero-site .restored-slider .quote-total{margin-top:7px;padding-top:16px;align-items:flex-end}
.opero-site .restored-slider .quote-total strong{font-size:22px;letter-spacing:-.035em}
.opero-site .restored-slider .calendar-ui{display:grid;grid-template-columns:46px repeat(4,1fr);border:1px solid #e6e9e7;border-radius:16px;overflow:hidden;font-size:8px}
.opero-site .restored-slider .cal-cell{min-height:44px;border-right:1px solid #eff1f0;border-bottom:1px solid #eff1f0;padding:5px}
.opero-site .restored-slider .cal-head{min-height:24px;background:#f7f8f7;font-weight:800}
.opero-site .restored-slider .cal-job{background:#D8F3FC;border-radius:6px;padding:5px;font-weight:800}
.opero-site .restored-slider .cal-job.dark{background:#161918;color:#fff}
.opero-site .restored-slider .report-demo{background:var(--accent);padding:27px}
.opero-site .restored-slider .report-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.opero-site .restored-slider .report-top div{display:grid}
.opero-site .restored-slider .report-top small{font-size:9px;color:#07506F}
.opero-site .restored-slider .report-top strong{font-size:19px}
.opero-site .restored-slider .report-ok{background:#111;color:#fff;border-radius:999px;padding:6px 9px;font-size:8px;font-weight:900}
.opero-site .restored-slider .report-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 14px}
.opero-site .restored-slider .report-stats div{background:rgba(255,255,255,.72);border-radius:13px;padding:12px}
.opero-site .restored-slider .report-stats small{font-size:8px;color:#07506F;display:block}
.opero-site .restored-slider .report-stats b{font-size:16px}
.opero-site .restored-slider .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.opero-site .restored-slider .photo{aspect-ratio:1.5;border-radius:6px;background:linear-gradient(135deg,#c8c8bd,#f4f4eb)}
.opero-site .restored-slider .report-note{margin-top:14px;background:#111;color:#fff;border-radius:14px;padding:13px;display:grid;gap:3px}
.opero-site .restored-slider .report-note small{font-size:8px;color:#aaa}
.opero-site .restored-slider .report-note span{font-size:10px}
.opero-site .restored-slider .crm-ui{display:grid;grid-template-columns:.7fr 1.3fr;border:1px solid #e5e8e6;border-radius:18px;overflow:hidden;min-height:320px;background:#fff;box-shadow:0 15px 40px rgba(20,20,20,.06)}
.opero-site .restored-slider .crm-list{background:#f8f9f8;border-right:1px solid #e9ecea;padding:10px}
.opero-site .restored-slider .crm-name{padding:12px;border-radius:9px;font-size:11px;margin-bottom:5px}
.opero-site .restored-slider .crm-name.active{background:#111;color:#fff;font-weight:800}
.opero-site .restored-slider .crm-detail{padding:30px}
.opero-site .restored-slider .crm-detail h5{font-size:20px;margin:0 0 5px}
.opero-site .restored-slider .crm-line{height:8px;border-radius:99px;background:#eef0ef;margin:9px 0}
.opero-site .restored-slider .crm-line.short{width:62%}
.opero-site .restored-slider .crm-docs{display:flex;gap:7px;margin-top:16px}
.opero-site .restored-slider .crm-doc{flex:1;background:#f6f7f6;border:1px solid #e8ebe9;border-radius:9px;padding:16px 8px;font-size:10px;font-weight:800}
.opero-site .restored-slider .bank-demo-wrap{background:#ddd9cd;padding:28px}
.opero-site .restored-slider .bank-ui{background:#111;color:#fff;border-radius:18px;padding:16px;min-height:270px;display:flex;flex-direction:column;justify-content:center}
.opero-site .restored-slider .bank-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #2c302e;font-size:9px}
.opero-site .restored-slider .bank-row:last-child{border:0}
.opero-site .restored-slider .bank-ui strong{font-size:13px}
.opero-site .restored-slider .bank-ui small{display:block;color:#8e948f;font-size:8px;margin-bottom:2px}
.opero-site .restored-slider .bank-tag{background:var(--accent);color:#111;font-size:7px;font-weight:850;padding:4px 7px;border-radius:99px}
.opero-site .restored-slider .slider-footer{display:flex;justify-content:space-between;align-items:center;padding:18px 23px;border-top:1px solid #e3e3dc;background:#fff}
.opero-site .restored-slider .slider-dots{display:flex;gap:7px}
.opero-site .restored-slider .slider-dot{width:8px;height:8px;border:0;border-radius:50%;background:#d3d3cd;padding:0;cursor:pointer;transition:.25s}
.opero-site .restored-slider .slider-dot.active{width:28px;border-radius:99px;background:#111}
.opero-site .restored-slider .slider-count{font-size:11px;color:#9a9a94}
.opero-site .restored-slider .slider-count b{color:#111}
/* restored operator phones */
.opero-site .restored-app{background:#fff;overflow:hidden}
.opero-site .restored-app .app-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:72px;align-items:center}
.opero-site .restored-app .app-benefits{display:grid;gap:13px;margin-top:30px}
.opero-site .restored-app .app-benefit{display:flex;gap:13px;align-items:flex-start;font-size:14px}
.opero-site .restored-app .tick{width:24px;height:24px;flex:none;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}
.opero-site .restored-app .phones{position:relative;min-height:590px;perspective:1100px}
.opero-site .restored-app .phone-lg{position:absolute;width:235px;background:#0d0f0e;padding:8px;border-radius:37px;box-shadow:0 28px 64px rgba(0,0,0,.17)}
.opero-site .restored-app .phone-lg .screen{min-height:492px;border-radius:30px;background:#f8f9f8;padding:22px 15px 16px;overflow:hidden}
.opero-site .restored-app .phone-lg.one{left:0;top:58px;transform:rotate(-6deg)}
.opero-site .restored-app .phone-lg.two{left:31%;top:0;z-index:2}
.opero-site .restored-app .phone-lg.three{right:0;top:64px;transform:rotate(6deg)}
.opero-site .restored-app .mobile-title{font-size:22px;line-height:1;letter-spacing:-.045em;margin:12px 0 16px}
.opero-site .restored-app .mobile-sub{font-size:8px;color:#8d9490}
.opero-site .restored-app .work-tile{border:1px solid #e5e8e6;background:#fff;border-radius:16px;padding:13px;margin:9px 0}
.opero-site .restored-app .work-tile.dark{background:#111;color:#fff}
.opero-site .restored-app .work-time{font-size:8px;font-weight:800;color:#838a86}
.opero-site .restored-app .work-tile.dark .work-time{color:#b4bbb7}
.opero-site .restored-app .work-name{font-size:12px;font-weight:850;margin-top:4px}
.opero-site .restored-app .work-meta{font-size:8px;color:#858c88;margin-top:5px}
.opero-site .restored-app .work-tile.dark .work-meta{color:#b1b7b4}
.opero-site .restored-app .bottom-nav{display:flex;justify-content:space-around;border-top:1px solid #e4e7e5;margin-top:18px;padding-top:12px;font-size:7px;color:#8c938f}
.opero-site .restored-app .bottom-nav .sel{color:#111;font-weight:850}
.opero-site .restored-app .month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:7px;text-align:center}
.opero-site .restored-app .day{padding:7px 0;border-radius:7px}
.opero-site .restored-app .day.job{background:#111;color:#fff;font-weight:800}
.opero-site .restored-app .day.today{background:var(--accent);color:#111;font-weight:900}
.opero-site .restored-app .profile-card{background:#111;color:#fff;border-radius:18px;padding:17px;margin-top:12px}
.opero-site .restored-app .avatar{width:44px;height:44px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#111;font-weight:900}
.opero-site .restored-app .profile-menu{margin-top:12px}
.opero-site .restored-app .profile-menu div{padding:12px 2px;border-bottom:1px solid #e8ebe9;font-size:9px;font-weight:750;display:flex;justify-content:space-between}
/* Motion: visible but controlled */
@keyframes ambientGlow{from{transform:scale(.94);opacity:.72}to{transform:scale(1.08);opacity:1}}
@keyframes markerBreath{0%,100%{transform:rotate(-1.2deg) scaleX(.98)}50%{transform:rotate(-.5deg) scaleX(1.03)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(103,189,118,.28)}50%{box-shadow:0 0 0 8px rgba(103,189,118,0)}}
@keyframes backPlate{from{transform:rotate(.3deg) translate3d(-4px,4px,0)}to{transform:rotate(1.8deg) translate3d(5px,-5px,0)}}
@keyframes dotBlink{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}
@keyframes softLift{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes contentSweep{0%{opacity:.35;transform:translateX(-8px)}100%{opacity:1;transform:none}}
@keyframes tilePulse{0%,100%{box-shadow:0 0 0 rgba(0,163,224,0)}50%{box-shadow:0 9px 24px rgba(0,163,224,.12)}}
.opero-site .restored-hero .phone{animation:softLift 4.4s ease-in-out infinite}
.opero-site .restored-hero .float-chip{animation:softLift 3.7s ease-in-out infinite reverse}
.opero-site .restored-app .phone-lg.one .screen{animation:softLift 5.4s ease-in-out infinite}
.opero-site .restored-app .phone-lg.two .screen{animation:softLift 4.8s ease-in-out .7s infinite}
.opero-site .restored-app .phone-lg.three .screen{animation:softLift 5.2s ease-in-out 1.2s infinite}
.opero-site .restored-hero .status:not(.gray){animation:tilePulse 2.8s ease-in-out infinite}
.opero-site .restored-slider .feature-slide.is-current .slide-demo{animation:contentSweep .55s ease both}
.opero-site .restored-slider .feature-slide.is-current .slide-pills span{animation:contentSweep .4s ease both}
.opero-site .restored-slider .feature-slide.is-current .slide-pills span:nth-child(2){animation-delay:.08s}
.opero-site .restored-slider .feature-slide.is-current .slide-pills span:nth-child(3){animation-delay:.16s}
.opero-site .magnetic{transform-style:preserve-3d}
.opero-site .magnetic.is-near{filter:saturate(1.03)}
.opero-site .magnetic.is-near::after{animation:none}
@media (hover:hover) and (pointer:fine){
.opero-site .restored-slider .slide-demo:hover{box-shadow:0 22px 55px rgba(20,20,20,.11)}
.opero-site .restored-app .work-tile:hover,
.opero-site .restored-hero .stat:hover{box-shadow:0 12px 32px rgba(20,20,20,.08)}
}
@media(max-width:1050px){
.opero-site .restored-hero .hero-grid,
.opero-site .restored-app .app-grid{grid-template-columns:1fr}
.opero-site .restored-hero .hero-visual{max-width:760px;width:100%;margin:0 auto}
.opero-site .restored-app .phones{max-width:700px;width:100%;margin:auto}
.opero-site .restored-slider .feature-slide{grid-template-columns:1fr;gap:28px;min-height:auto;padding:42px}
.opero-site .restored-slider .slide-copy{max-width:720px}
}
@media(max-width:730px){
.opero-site .restored-hero{padding-top:52px}
.opero-site .restored-hero h1{font-size:58px}
.opero-site .restored-hero p{font-size:17px}
.opero-site .restored-hero .hero-visual{min-height:465px}
.opero-site .restored-hero .dashboard{width:98%;right:-7px}
.opero-site .restored-hero .dash-body{grid-template-columns:82px 1fr;min-height:342px}
.opero-site .restored-hero .side{padding:12px 7px}
.opero-site .restored-hero .side-item{font-size:0;padding:0;justify-content:center}
.opero-site .restored-hero .dash-content{padding:15px}
.opero-site .restored-hero .stat-grid{grid-template-columns:1fr 1fr}
.opero-site .restored-hero .stat:nth-child(3){display:none}
.opero-site .restored-hero .job-row{grid-template-columns:38px 1fr 62px}
.opero-site .restored-hero .job-row span:nth-child(3){display:none}
.opero-site .restored-hero .phone{width:150px;left:-3px}
.opero-site .restored-hero .phone-screen{min-height:290px}
.opero-site .restored-hero .float-chip{right:-4px;bottom:24px}
.opero-site .restored-app .phones{min-height:488px;transform:scale(.82);transform-origin:top center;margin-bottom:-82px}
.opero-site .restored-app .phone-lg{width:210px}
.opero-site .restored-app .phone-lg.one{left:-7%}
.opero-site .restored-app .phone-lg.two{left:27%}
.opero-site .restored-app .phone-lg.three{right:-7%}
.opero-site .restored-slider .slider-head{align-items:flex-start;flex-direction:column}
.opero-site .restored-slider .slider-controls{align-self:flex-end;margin-top:-50px}
.opero-site .restored-slider .feature-slider{border-radius:24px}
.opero-site .restored-slider .feature-slide{padding:28px 20px}
.opero-site .restored-slider .slide-copy h3{font-size:39px}
.opero-site .restored-slider .slide-demo{min-height:270px}
.opero-site .restored-slider .inv-row{font-size:9px;grid-template-columns:1fr 62px 70px;padding:10px}
}
@media(max-width:490px){
.opero-site .restored-hero h1{font-size:49px}
.opero-site .restored-hero .phone{display:none}
.opero-site .restored-hero .dashboard{transform:none}
.opero-site .restored-app .phones{transform:scale(.64);margin-left:-16%;width:132%;margin-bottom:-170px}
.opero-site .restored-slider .slider-controls{align-self:flex-start;margin-top:4px}
.opero-site .restored-slider .feature-slide{padding:24px 16px}
.opero-site .restored-slider .slide-copy h3{font-size:35px}
.opero-site .restored-slider .slide-demo{padding:16px}
.opero-site .restored-slider .quote-demo,
.opero-site .restored-slider .report-demo,
.opero-site .restored-slider .bank-demo-wrap{padding:16px}
.opero-site .restored-slider .report-stats{grid-template-columns:1fr 1fr}
.opero-site .restored-slider .report-stats div:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
.opero-site .restored-hero:before,
.opero-site .restored-hero .hero-marker:after,
.opero-site .restored-hero .hero-note .pulse,
.opero-site .restored-hero .hero-visual:after,
.opero-site .restored-hero .phone,
.opero-site .restored-hero .float-chip,
.opero-site .restored-app .phone-lg .screen{animation:none!important}
}
/* ===== V6 · INTERAZIONI FUNZIONI / PREZZI / SETTORI ===== */
.opero-site .interaction-note{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:9px 12px;border:1px solid #e4e4dd;background:#fff;border-radius:999px;font-size:10px;font-weight:850;color:#6d6d67;box-shadow:0 7px 20px rgba(20,20,20,.04)}
.opero-site .interaction-note:before{content:"↗";width:21px;height:21px;border-radius:7px;background:var(--accent);color:#111;display:grid;place-items:center;font-size:11px;font-weight:950}
.opero-site .restored-slider .inv-row:not(.head),
.opero-site .restored-slider .quote-line,
.opero-site .restored-slider .quote-total,
.opero-site .restored-slider .cal-job,
.opero-site .restored-slider .report-stats>div,
.opero-site .restored-slider .photo,
.opero-site .restored-slider .crm-name,
.opero-site .restored-slider .crm-doc,
.opero-site .restored-slider .bank-row{cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,opacity .22s ease}
.opero-site .restored-slider .inv-row:not(.head):hover,
.opero-site .restored-slider .quote-line:hover,
.opero-site .restored-slider .cal-job:hover,
.opero-site .restored-slider .crm-name:hover,
.opero-site .restored-slider .bank-row:hover{transform:translateY(-2px)}
.opero-site .restored-slider .inv-row.is-selected{background:#EAF8FD;box-shadow:inset 3px 0 0 var(--accent)}
.opero-site .restored-slider .inv-row.status-flash{animation:statusFlash .46s ease}
@keyframes statusFlash{0%{transform:scale(1)}45%{transform:scale(1.018)}100%{transform:scale(1)}}
.opero-site .restored-slider .quote-paper{position:relative;overflow:hidden}
.opero-site .restored-slider .quote-paper.is-sent:after{content:"PRONTO ✓";position:absolute;right:18px;top:55px;border:2px solid #191919;border-radius:8px;padding:6px 9px;font-size:10px;font-weight:950;letter-spacing:.08em;transform:rotate(-7deg);animation:stampIn .42s cubic-bezier(.2,.9,.25,1.25);background:rgba(216,243,252,.86)}
@keyframes stampIn{from{opacity:0;transform:scale(1.8) rotate(-16deg)}to{opacity:1;transform:scale(1) rotate(-7deg)}}
.opero-site .restored-slider .quote-line.active-line{background:#fff8cf;margin-inline:-8px;padding-inline:8px;border-radius:8px}
.opero-site .restored-slider .quote-total.active-line{transform:scale(1.025);color:#111}
.opero-site .restored-slider .cal-job.is-picked{box-shadow:0 0 0 3px rgba(0,163,224,.32),0 8px 20px rgba(20,20,20,.12);transform:translateY(-3px) scale(1.035)}
.opero-site .restored-slider .report-stats>div.is-picked{background:#fff;box-shadow:0 8px 20px rgba(20,20,20,.12);transform:translateY(-3px)}
.opero-site .restored-slider .photo.is-picked{transform:scale(1.06) rotate(-1.5deg);box-shadow:0 10px 24px rgba(20,20,20,.18)}
.opero-site .restored-slider .photo.is-picked:after{content:"✓";display:grid;place-items:center;position:absolute;inset:auto 6px 6px auto;width:22px;height:22px;border-radius:50%;background:#111;color:#fff;font-size:10px;font-weight:950}
.opero-site .restored-slider .photo{position:relative}
.opero-site .restored-slider .crm-name.active{box-shadow:0 8px 20px rgba(20,20,20,.13)}
.opero-site .restored-slider .crm-detail.client-change{animation:clientChange .34s ease}
@keyframes clientChange{0%{opacity:.35;transform:translateX(8px)}100%{opacity:1;transform:none}}
.opero-site .restored-slider .bank-row.is-picked{background:#242825;margin-inline:-8px;padding-inline:8px;border-radius:9px;border-bottom-color:transparent}
.opero-site .restored-slider .bank-row.is-picked .bank-tag{transform:scale(1.07)}
/* pricing promo */
.opero-site .price-grid{align-items:stretch}
.opero-site .price-card{cursor:pointer;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease,background .28s ease}
.opero-site .price-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(0,163,224,.22),transparent 38%);opacity:0;transition:opacity .25s;pointer-events:none}
.opero-site .price-card:hover:before,
.opero-site .price-card.selected:before{opacity:1}
.opero-site .price-card .price-name,
.opero-site .price-card .price-offer,
.opero-site .price-card .ideal-for,
.opero-site .price-card .price-features,
.opero-site .price-card .btn,
.opero-site .price-card .price-tag{position:relative;z-index:2}
.opero-site .price-offer{margin:18px 0 11px;min-height:92px}
.opero-site .old-price{display:flex;align-items:baseline;gap:6px;color:#77776f;font-weight:850;font-size:22px}
/*
 * Il prezzo di listino, sbarrato.
 *
 * Il `line-through` del browser passa orizzontale a metà cifra: su 39.90 e
 * 129.90 cade sulla barra del 9 e del 3 e il numero non si legge più. Qui la
 * riga è un elemento a parte, sottile e inclinata: taglia il prezzo — si vede
 * benissimo che è cancellato — ma incrocia ogni cifra in un punto solo.
 */
.opero-site .old-price .old-value{position:relative;display:inline-block;text-decoration:none;font-variant-numeric:tabular-nums}
.opero-site .old-price .old-value::after{
  content:"";
  position:absolute;
  left:-6%;right:-6%;top:50%;
  height:2px;
  border-radius:2px;
  background:#E0342B;
  transform:translateY(-50%) rotate(-10deg);
  transform-origin:center;
  pointer-events:none;
}
.opero-site .old-price small{font-size:12px;color:#9a9a93}
/* Sul cartoncino nero il grigio sparisce e il rosso scuro non stacca. */
.opero-site .price-card.featured .old-price{color:#9d9d96}
.opero-site .price-card.featured .old-price small{color:#83837c}
.opero-site .price-card.featured .old-price .old-value::after{background:#FF6B60}
.opero-site .new-price{display:flex;align-items:baseline;gap:8px;margin-top:1px}
.opero-site .new-price strong{font-size:45px;line-height:1;font-weight:950;letter-spacing:-.06em;color:#111}
.opero-site .price-card.featured .new-price strong{color:#fff}
.opero-site .new-price small{font-size:13px;font-weight:750;color:#858580}
.opero-site .price-card.featured .new-price small{color:#aaa}
.opero-site .lifetime-mini{display:inline-flex;margin-top:9px;border-radius:999px;padding:6px 8px;background:#D8F3FC;color:#074A68;font-size:9px;font-weight:900}
.opero-site .price-card.featured .lifetime-mini{background:var(--accent);color:#111}
/* sectors */
.opero-site .sector-grid{gap:16px}
.opero-site .sector{position:relative;min-height:235px;padding:24px;cursor:pointer;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease,background .28s ease}
.opero-site .sector:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-75px;top:-75px;background:var(--sector-soft,#f4f4ef);transition:transform .35s ease,opacity .35s ease;opacity:.7}
.opero-site .sector:hover:before,
.opero-site .sector.selected:before{transform:scale(1.45);opacity:1}
.opero-site .sector:after{content:"↗";position:absolute;right:20px;bottom:19px;width:31px;height:31px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:900;background:#fff;transition:.25s}
.opero-site .sector:hover:after,
.opero-site .sector.selected:after{background:#111;color:#fff;border-color:#111;transform:translate(2px,-2px)}
.opero-site .sector.selected{border-color:#111;box-shadow:0 20px 55px rgba(20,20,20,.11);background:#fff}
.opero-site .sector b,
.opero-site .sector span,
.opero-site .sector-icon{position:relative;z-index:2}
.opero-site .sector b{font-size:17px;letter-spacing:-.025em}
.opero-site .sector>span{display:block;max-width:190px;margin-top:5px;line-height:1.45}
.opero-site .sector-icon{width:58px;height:58px;border-radius:18px;margin-bottom:31px;background:var(--sector-soft,#f5f5f0);color:var(--sector-color,#111);border:1px solid rgba(17,17,17,.06);box-shadow:inset 0 1px rgba(255,255,255,.8);transition:box-shadow .25s,background .25s}
.opero-site .sector-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.9,.25,1.3)}
.opero-site .sector:hover .sector-icon svg,
.opero-site .sector.selected .sector-icon svg{transform:scale(1.13) rotate(-5deg)}
.opero-site .sector.selected .sector-icon{box-shadow:0 10px 24px color-mix(in srgb,var(--sector-color,#111) 15%,transparent)}
.opero-site .sector-detail{margin-top:18px;background:#111;color:#fff;border-radius:25px;padding:26px 28px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;min-height:128px;overflow:hidden;position:relative}
.opero-site .sector-detail:after{content:"";position:absolute;width:170px;height:170px;border:40px solid rgba(0,163,224,.10);border-radius:50%;right:-70px;top:-100px}
.opero-site .sector-detail-copy{position:relative;z-index:2}
.opero-site .sector-detail small{color:var(--accent);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.opero-site .sector-detail h3{margin:4px 0 6px;font-size:24px;letter-spacing:-.04em}
.opero-site .sector-detail p{margin:0;color:#a8aaa8;font-size:12px;max-width:700px}
.opero-site .sector-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:2}
.opero-site .sector-tool{padding:8px 10px;border-radius:999px;background:#232323;border:1px solid #353535;color:#ddd;font-size:9px;font-weight:800}
.opero-site .sector-detail.swap .sector-detail-copy,
.opero-site .sector-detail.swap .sector-tools{animation:sectorSwap .36s ease}
@keyframes sectorSwap{0%{opacity:.15;transform:translateY(7px)}100%{opacity:1;transform:none}}
/*
 * L'approfondimento del mestiere.
 *
 * Sotto il cartoncino nero, e con lo stesso colore del settore scelto: la
 * pastiglia dell'icona, la barretta dei titoli e i numeri della giornata
 * prendono `--sector-color`, che il blocco si porta dietro. Otto blocchi
 * stanno nel documento, uno solo senza `hidden` — il colore non è una
 * decorazione, è il filo che lega il cartoncino premuto a quello che si apre.
 */
.opero-site .sector-deep{margin-top:14px}
.opero-site .sector-deep-block{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-soft);
  padding:34px 34px 30px;
  position:relative;
  overflow:hidden;
}
.opero-site .sector-deep-block:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:var(--sector-color,#111);
  opacity:.85;
}
.opero-site .sector-deep-block[hidden]{display:none}
.opero-site .sector-deep-block.swap{animation:sectorSwap .36s ease}
/* `min(...,100%)` e non `320px` secco: il blocco taglia quello che esce
   (`overflow:hidden`), e su un telefono stretto la colonna più larga della
   card si sarebbe portata via l'ultima lettera di ogni riga. */
.opero-site .deep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:34px}
.opero-site .deep-title{
  margin:0 0 16px;
  font-size:17px;
  font-weight:850;
  letter-spacing:-.015em;
  display:flex;
  align-items:center;
  gap:10px;
}
.opero-site .deep-title:before{
  content:"";
  width:16px;height:3px;border-radius:2px;flex:none;
  background:var(--sector-color,#111);
}
/* I problemi: si leggono come frasi sentite in ditta, non come una lista. */
.opero-site .deep-pains{list-style:none;margin:0;padding:0}
.opero-site .deep-pains li{
  position:relative;
  padding:0 0 0 24px;
  margin-bottom:13px;
  font-size:15.5px;
  line-height:1.6;
  color:#3d3f3b;
}
.opero-site .deep-pains li:before{
  content:"";
  position:absolute;left:2px;top:9px;
  width:8px;height:8px;border-radius:50%;
  background:var(--sector-color,#111);
  opacity:.45;
}
.opero-site .deep-closing{
  margin:20px 0 0;
  padding-left:16px;
  border-left:3px solid var(--sector-color,#111);
  font-size:16.5px;
  font-weight:700;
  line-height:1.55;
  letter-spacing:-.01em;
}
.opero-site .deep-fixes{display:grid;gap:11px}
.opero-site .deep-fix{background:var(--soft);border-radius:16px;padding:15px 17px}
.opero-site .deep-fix b{display:block;font-size:15px;font-weight:850;letter-spacing:-.01em}
.opero-site .deep-fix p{margin:5px 0 0;color:var(--muted);font-size:14.5px;line-height:1.62}
/* La giornata: cinque passi in riga, che scendono uno sotto l'altro da stretti. */
.opero-site .deep-flow{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.opero-site .deep-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(184px,100%),1fr));gap:20px;
}
.opero-site .deep-steps li{position:relative;padding-top:4px}
.opero-site .deep-steps i{
  display:grid;place-items:center;
  width:27px;height:27px;border-radius:9px;
  background:var(--sector-soft,var(--soft));
  color:var(--sector-color,#111);
  font-style:normal;font-size:12px;font-weight:900;
  border:1px solid rgba(17,17,17,.06);
}
.opero-site .deep-steps b{display:block;margin-top:11px;font-size:15px;font-weight:850;letter-spacing:-.01em}
.opero-site .deep-steps span{display:block;margin-top:5px;color:var(--muted);font-size:14.5px;line-height:1.6}
.opero-site .deep-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
@media(max-width:730px){
.opero-site .sector-detail{grid-template-columns:1fr}
.opero-site .sector-tools{justify-content:flex-start}
.opero-site .sector-deep-block{padding:26px 22px 24px}
.opero-site .deep-grid{gap:28px}
.opero-site .deep-actions .btn{flex:1 1 100%}
.opero-site .price-offer{min-height:auto}
.opero-site .new-price strong{font-size:41px}
}
@media(max-width:480px){
.opero-site .sector{min-height:205px}
.opero-site .sector-icon{width:54px;height:54px;margin-bottom:24px}
.opero-site .sector-detail{padding:23px}
}
/*
 * Mensile o annuale — l'interruttore sopra i cartoncini.
 *
 * Due segmenti di larghezza uguale e un cursore che scorre: la larghezza del
 * cursore è mezza pista, quindi `translateX(100%)` lo porta esattamente sul
 * secondo segmento senza doverne misurare nessuno da JavaScript.
 */
.opero-site .billing-row{display:flex;justify-content:flex-end;margin-bottom:24px}
.opero-site .billing-switch{
  position:relative;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--soft);
}
.opero-site .billing-thumb{
  position:absolute;
  top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);
  border-radius:999px;
  background:#111;
  box-shadow:0 7px 18px rgba(20,20,20,.20);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.opero-site .billing-switch[data-billing="annual"] .billing-thumb{transform:translateX(100%)}
.opero-site .billing-option{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 19px;
  border:0;background:none;cursor:pointer;
  border-radius:999px;
  font-size:13px;font-weight:800;letter-spacing:-.005em;white-space:nowrap;
  color:var(--muted);
  transition:color .3s ease;
}
.opero-site .billing-option[aria-checked="true"]{color:#fff}
.opero-site .billing-option:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.opero-site .billing-save{
  border-radius:999px;padding:3px 7px;
  background:var(--accent);color:#06222D;
  font-size:10px;font-weight:900;
}
/* Quanto esce dal conto una volta l'anno: si vede solo se si paga così. */
.opero-site .price-billed{display:none;margin-top:10px;font-size:11.5px;font-weight:750;color:#7c7c76}
.opero-site .price-grid[data-billing="annual"] .price-billed{display:block}
.opero-site .price-card.featured .price-billed{color:#9d9d96}

/*
 * «Ideale per» — a chi serve il piano.
 *
 * Prima era un paragrafo grigio di tre righe sotto un prezzo da 49 pixel: la
 * frase più importante del cartoncino, letta da nessuno. Adesso è un riquadro
 * suo, con il filetto azzurro a sinistra che lo stacca dall'elenco delle
 * funzioni, e dentro ci sono tre parole grandi invece di una frase.
 */
.opero-site .ideal-for{
  margin-top:20px;
  padding:14px 16px 16px;
  border-radius:16px;
  border-left:3px solid var(--accent);
  background:#EAF6FE;
}
.opero-site .price-card.featured .ideal-for{background:#15191c}
.opero-site .ideal-head{display:flex;align-items:center;gap:9px}
.opero-site .ideal-icon{
  width:30px;height:30px;flex:none;
  border-radius:10px;
  display:grid;place-items:center;
  background:#fff;color:var(--accent-strong);
  box-shadow:0 2px 7px rgba(6,60,90,.09);
}
.opero-site .price-card.featured .ideal-icon{background:#23282c;color:var(--accent);box-shadow:none}
.opero-site .ideal-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.opero-site .ideal-label{font-size:12.5px;font-weight:800;letter-spacing:-.005em;color:var(--accent-strong)}
.opero-site .price-card.featured .ideal-label{color:var(--accent)}
.opero-site .ideal-text{
  display:block;margin-top:11px;
  font-size:20px;line-height:1.22;font-weight:800;letter-spacing:-.032em;
  color:#1b1e21;
  /* Due righe di spazio anche a chi ne riempie una: così i tre riquadri
     finiscono alla stessa altezza e gli elenchi sotto partono in pari. */
  min-height:2.44em;
}
.opero-site .price-card.featured .ideal-text{color:#fff}

/* === V7 refinements: pricing + circular founders === */
.opero-site .price-grid{gap:22px;align-items:stretch}
.opero-site .price-card{
  border:1px solid #e2e2da;
  border-radius:30px;
  padding:34px 32px;
  background:linear-gradient(180deg,#fff 0%,#fbfbf8 100%);
  box-shadow:0 12px 34px rgba(20,20,20,.045);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .32s ease,background .28s ease;
}
.opero-site .price-card:hover{border-color:#cfcfc4;box-shadow:0 27px 68px rgba(20,20,20,.12)}
.opero-site .price-card::after{content:"";position:absolute;left:30px;right:30px;top:0;height:4px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,#111 0 38%,transparent 38%);opacity:.18;transition:.3s;pointer-events:none}
.opero-site .price-card:hover::after,
.opero-site .price-card.selected::after{opacity:1;background:linear-gradient(90deg,#111 0 58%,var(--accent) 58% 100%)}
.opero-site .price-card.featured{
  background:linear-gradient(160deg,#0d0d0d 0%,#171717 100%);
  border-color:#111;
  padding-top:82px;
  transform:translateY(-12px);
  box-shadow:0 23px 60px rgba(0,0,0,.19);
}
.opero-site .price-card.featured:hover{box-shadow:0 32px 82px rgba(0,0,0,.30),0 0 0 1px rgba(0,163,224,.22)}
.opero-site .price-card.featured::after{background:linear-gradient(90deg,var(--accent) 0 74%,rgba(255,255,255,.18) 74%);opacity:1}
.opero-site .price-card .price-name{font-size:13px;letter-spacing:.11em;color:#6f6f69;margin-bottom:2px}
.opero-site .price-card.featured .price-name{color:#e9e9e4;padding-right:0}
.opero-site .price-tag{
  top:25px;left:32px;right:auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px 8px 10px;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,163,224,.22);
  letter-spacing:.055em;
}
.opero-site .price-tag::before{content:"★";font-size:10px;line-height:1}
.opero-site .price-offer{margin-top:20px;padding-bottom:18px;border-bottom:1px solid #ecece6}
.opero-site .price-card.featured .price-offer{border-bottom-color:#2c2c2c}
.opero-site .old-price{font-size:21px;opacity:1}
.opero-site .new-price{margin-top:6px;align-items:flex-end}
.opero-site .new-price strong{font-size:49px;letter-spacing:-.065em;line-height:.9}
.opero-site .lifetime-mini{margin-top:13px;padding:7px 11px;font-size:10.5px;letter-spacing:.005em;box-shadow:inset 0 0 0 1px rgba(17,17,17,.05)}
.opero-site .price-features{gap:8px;margin-top:20px;margin-bottom:26px}
.opero-site .price-features li{
  padding:9px 10px;
  border-radius:11px;
  background:rgba(255,255,255,.72);
  border:1px solid #ecece6;
  align-items:center;
  transition:border-color .18s ease,background .18s ease;
}
.opero-site .price-card.featured .price-features li{background:#1c1c1c;border-color:#2c2c2c;color:#efefeb}
/* Le voci dell'elenco non si spostano più al passaggio: non sono comandi,
   e quel mezzo centimetro le faceva sembrare tali. L'unica riga che si
   muove è quella dello spazio, che si apre davvero. */
.opero-site .price-features li:hover{border-color:#d2d2c8;background:#fff}
.opero-site .price-card.featured .price-features li:hover{background:#232323;border-color:#3a3a3a}
.opero-site .price-features li:before{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;font-size:9px}
.opero-site .price-card.featured .price-features li:before{background:var(--accent);color:#111}
.opero-site .price-card .btn{min-height:48px;border-radius:14px;box-shadow:0 9px 22px rgba(20,20,20,.08)}
.opero-site .price-card.featured .btn{box-shadow:0 11px 26px rgba(0,163,224,.16)}
.opero-site .price-card.selected{transform:translateY(-6px) scale(1.012)}
.opero-site .price-card.featured.selected{transform:translateY(-18px) scale(1.015)}
/*
 * La retroilluminazione del cartoncino scelto.
 *
 * La spunta non c'è più: era un dischetto da 27 pixel in un angolo, su una
 * scheda alta seicento, e non la vedeva nessuno. Al suo posto si accende la
 * luce dietro — una fioritura che parte forte e si posa, e poi respira piano
 * perché lo stato resti evidente anche a chi arriva dopo l'animazione.
 *
 * È un'ombra dell'elemento e non un figlio: il cartoncino ha `overflow:hidden`
 * per via del filetto in cima, quindi un alone disegnato dentro verrebbe
 * tagliato sul bordo. L'ombra propria no, esce.
 */
@keyframes backlight{
  0%{box-shadow:0 12px 34px rgba(20,20,20,.045)}
  40%{box-shadow:0 0 0 2px var(--accent),0 24px 62px rgba(0,163,224,.52),0 0 100px 14px rgba(0,163,224,.44)}
  100%{box-shadow:0 0 0 2px var(--accent),0 18px 48px rgba(0,163,224,.34),0 0 64px 5px rgba(0,163,224,.26)}
}
@keyframes backlightBreathe{
  0%,100%{box-shadow:0 0 0 2px var(--accent),0 18px 48px rgba(0,163,224,.34),0 0 64px 5px rgba(0,163,224,.26)}
  50%{box-shadow:0 0 0 2px var(--accent),0 21px 56px rgba(0,163,224,.46),0 0 86px 11px rgba(0,163,224,.37)}
}
.opero-site .price-card.selected{
  z-index:3;
  border-color:var(--accent);
  animation:backlight .6s cubic-bezier(.2,.8,.2,1) forwards,
            backlightBreathe 3.8s ease-in-out .6s infinite;
}
/* Chi ha chiesto meno movimento la luce ce l'ha lo stesso, ma ferma. */
@media(prefers-reduced-motion:reduce){
.opero-site .price-card.selected{
  animation:none;
  box-shadow:0 0 0 2px var(--accent),0 18px 48px rgba(0,163,224,.34),0 0 64px 5px rgba(0,163,224,.26);
}
}
/* Circular founder portraits */
.opero-site .team-grid{gap:32px;max-width:980px;margin-left:auto;margin-right:auto}
.opero-site .person{
  overflow:visible;
  padding:34px 30px 30px;
  border-radius:30px;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%,#fafaf7 100%);
  box-shadow:0 14px 38px rgba(20,20,20,.055);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.opero-site .person:hover{border-color:#d2d2c9;box-shadow:0 25px 62px rgba(20,20,20,.11)}
.opero-site .portrait{
  width:min(270px,78%);
  aspect-ratio:1/1;
  height:auto;
  margin:4px auto 28px;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 35% 28%,#fff 0 16%,#f2f2eb 42%,#dfdfd5 100%);
  border:9px solid #f5f5ef;
  box-shadow:0 18px 46px rgba(20,20,20,.13),0 0 0 1px #deded5;
}
.opero-site .portrait::before{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(17,17,17,.06);pointer-events:none}
.opero-site .person-info{padding:0 8px 4px}
.opero-site .person-info h3{font-size:29px;margin-bottom:7px}
.opero-site .person-info p{font-size:13px;line-height:1.55;max-width:360px;margin:0 auto}
@media(max-width:730px){
.opero-site .price-grid{gap:18px}
.opero-site .price-card.featured{transform:none;padding-top:78px}
.opero-site .price-card.selected,
.opero-site .price-card.featured.selected{transform:scale(1.008)}
.opero-site .team-grid{gap:22px}
.opero-site .person{padding:28px 20px}
.opero-site .portrait{width:min(240px,78%);margin-bottom:24px}
}
/*
 * Lo spazio in più, scelto dalla riga che lo dichiara.
 *
 * «5 GB di spazio incluso» era già l'ultima riga dell'elenco, ed era lì che
 * uno si chiedeva «e se me ne serve di più?». Adesso quella riga si apre e
 * la risposta è dentro il cartoncino, invece che in una card più in basso
 * con un totale che non si capiva di cosa fosse.
 *
 * La riga si veste da sola: `li` torna un contenitore nudo e la pillola —
 * spunta compresa — la disegna il bottone, perché una riga che si apre non
 * poteva restare la riga rigida delle altre.
 */
.opero-site .price-features li.feature-space{display:block;padding:0;background:none;border-color:transparent}
.opero-site .price-features li.feature-space:before{content:none}
.opero-site .price-features li.feature-space:hover{background:none;border-color:transparent}
.opero-site .price-card.featured .price-features li.feature-space,
.opero-site .price-card.featured .price-features li.feature-space:hover{background:none;border-color:transparent}
.opero-site .space-line{
  width:100%;
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;
  border-radius:11px;
  border:1px solid #ecece6;
  background:rgba(255,255,255,.72);
  font:inherit;font-size:13px;color:inherit;text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.opero-site .space-line:before{
  content:"\2713";
  width:20px;height:20px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:#111;color:#fff;font-size:9px;font-weight:950;
}
.opero-site .space-line:hover{background:#fff;border-color:#d2d2c8}
.opero-site .space-line:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.opero-site .price-card.featured .space-line{background:#1c1c1c;border-color:#2c2c2c;color:#efefeb}
.opero-site .price-card.featured .space-line:before{background:var(--accent);color:#111}
.opero-site .price-card.featured .space-line:hover{background:#232323;border-color:#3a3a3a}
.opero-site .space-text{flex:1}
/*
 * Il più è disegnato, non scritto.
 *
 * Il glifo «+» di Inter si appoggia all'asse matematico e non al centro del
 * quadratone: dentro un quadratino di 22 pixel il suo inchiostro cadeva un
 * pixel e mezzo sotto il centro, e si vedeva. Due tratti in un viewBox
 * quadrato stanno al centro per costruzione — e ruotati di 45 gradi fanno
 * una croce giusta, che il glifo non garantiva.
 */
.opero-site .space-plus{
  width:22px;height:22px;flex:none;
  border-radius:7px;
  background:#111;color:#fff;
  display:grid;place-items:center;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease;
}
.opero-site .space-plus svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.opero-site .price-card.featured .space-plus{background:var(--accent);color:#111}
.opero-site .space-line[aria-expanded="true"] .space-plus{transform:rotate(45deg)}
/* Con lo spazio in più la riga si accende: il prezzo grande è cambiato. */
.opero-site .space-line.has-space{border-color:var(--accent);background:#EAF6FE}
.opero-site .price-card.featured .space-line.has-space{background:#15191c;border-color:var(--accent)}
.opero-site .space-choices{
  display:grid;gap:4px;
  margin-top:6px;padding:6px;
  border-radius:12px;
  border:1px solid #ecece6;
  background:rgba(255,255,255,.6);
}
.opero-site .price-card.featured .space-choices{background:#161616;border-color:#2c2c2c}
.opero-site .space-choice{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:8px 9px;
  border-radius:9px;border:1px solid transparent;background:none;
  font:inherit;font-size:12.5px;font-weight:650;color:inherit;text-align:left;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.opero-site .space-choice:hover{background:#fff;border-color:#e2e2da}
.opero-site .price-card.featured .space-choice:hover{background:#202020;border-color:#3a3a3a}
.opero-site .space-choice:focus-visible{outline:2px solid var(--accent-strong);outline-offset:1px}
.opero-site .space-choice b{font-weight:800;font-size:11.5px;opacity:.72}
.opero-site .space-choice[aria-pressed="true"]{background:var(--accent);color:#06222D;border-color:var(--accent);font-weight:800}
.opero-site .space-choice[aria-pressed="true"] b{opacity:.9}

/* === V8: le scorciatoie illustrate della home === */
.opero-site .choice-grid-visual{gap:18px}
.opero-site .choice-grid-visual .choice-card{min-height:286px;padding:27px 27px 25px;border-radius:27px;background:linear-gradient(160deg,#fff 0%,#fbfbf8 100%);box-shadow:0 10px 30px rgba(20,20,20,.045);isolation:isolate}
.opero-site .choice-grid-visual .choice-card:before{content:"";position:absolute;width:180px;height:180px;left:-72px;top:-78px;border-radius:50%;background:var(--choice-soft);opacity:.9;z-index:-1;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.opero-site .choice-grid-visual .choice-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--choice-x,25%) var(--choice-y,20%),color-mix(in srgb,var(--choice-accent) 18%,transparent),transparent 36%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:-1}
.opero-site .choice-grid-visual .choice-card:hover{transform:translateY(-7px);border-color:#d7d7ce;box-shadow:0 25px 65px rgba(20,20,20,.13),0 7px 18px color-mix(in srgb,var(--choice-accent) 12%,transparent)}
.opero-site .choice-grid-visual .choice-card:hover:before{transform:scale(1.22);opacity:1}
.opero-site .choice-grid-visual .choice-card:hover:after{opacity:1}
.opero-site .choice-icon-shell{width:68px;height:68px;border-radius:21px;background:var(--choice-soft);display:grid;place-items:center;margin-bottom:33px;position:relative;border:1px solid color-mix(in srgb,var(--choice-accent) 42%,#fff);box-shadow:0 15px 34px color-mix(in srgb,var(--choice-accent) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.9);transition:box-shadow .3s ease}
.opero-site .choice-icon-shell svg{width:34px;height:34px;fill:none;stroke:#111;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2;transition:transform .35s cubic-bezier(.2,.9,.25,1.3)}
.opero-site .choice-orbit{position:absolute;width:28px;height:28px;border:1px dashed color-mix(in srgb,var(--choice-accent) 72%,#777);border-radius:50%;right:-9px;top:-7px;opacity:.7;animation:choiceOrbit 8s linear infinite}
.opero-site .choice-orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--choice-accent);right:-2px;top:8px;box-shadow:0 3px 10px color-mix(in srgb,var(--choice-accent) 55%,transparent)}
@keyframes choiceOrbit{to{transform:rotate(360deg)}}
.opero-site .choice-card:hover .choice-icon-shell svg{transform:scale(1.12) rotate(-4deg)}
.opero-site .choice-card:hover .choice-icon-shell{box-shadow:0 20px 42px color-mix(in srgb,var(--choice-accent) 30%,transparent),inset 0 1px 0 #fff}
.opero-site .choice-kicker{display:block;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:#999;margin-bottom:5px}
.opero-site .choice-grid-visual .choice-card h3{font-size:24px}
.opero-site .choice-grid-visual .choice-card .go{display:flex;align-items:center;gap:7px}
.opero-site .choice-grid-visual .choice-card .go b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;font-size:11px;transition:.25s}
.opero-site .choice-grid-visual .choice-card:hover .go b{background:var(--choice-accent);color:#111;transform:translateX(3px) rotate(-7deg)}
@media(max-width:730px){
.opero-site .choice-grid-visual .choice-card{min-height:260px}
}
@media(prefers-reduced-motion:reduce){
.opero-site .choice-orbit{animation:none}
}
/*
 * Il contenitore della vetrina.
 *
 * Sono le poche cose che nel file originale le dava il `<body>` e qui vanno
 * ridette al contenitore: la misura del testo (il browser parte da 16px, la
 * piattaforma da 15), il tema sempre chiaro anche per chi ha lasciato
 * l'applicazione in scuro, e l'altezza piena perché sotto l'ultima sezione non
 * si veda il fondo scuro dell'applicazione.
 *
 * `overflow-x: clip` e non `hidden`: `hidden` avrebbe reso il contenitore un
 * riquadro che scorre per conto suo, e la barra in cima — che è `sticky` —
 * avrebbe smesso di restare attaccata al bordo dello schermo.
 */
.opero-site {
  font-size: 16px;
  font-weight: 400;
  color-scheme: light;
  min-height: 100dvh;
  overflow-x: clip;
}

/* Il puntatore a mano sui riquadri che si selezionano davvero. */
.opero-site .price-card,
.opero-site .sector,
.opero-site .faq-q,
.opero-site .slider-btn,
.opero-site .slider-dot {
  cursor: pointer;
}

/*
 * Il modulo della demo.
 *
 * Nel file approvato il modulo era una finta: si premeva e compariva un
 * messaggio. Qui la richiesta parte davvero (`/api/public/contact`), quindi
 * servono i tre stati che una finta non ha — campo sbagliato, invio in corso,
 * richiesta arrivata. Le forme sono quelle del disegno: stessi raggi, stessi
 * colori, stessa spaziatura.
 */
.opero-site .field input[aria-invalid="true"],
.opero-site .field textarea[aria-invalid="true"] {
  border-color: #e0503f;
  background: #fff6f4;
}
.opero-site .field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #c8341f;
}
.opero-site .form-note {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.opero-site .form-note a {
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.opero-site .form-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #f0c9c2;
  background: #fff6f4;
  color: #8f2a19;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
}
.opero-site .form-done {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-soft);
}
.opero-site .form-done h2 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.opero-site .form-done p {
  margin: 0 0 18px;
  color: var(--muted);
}
.opero-site .btn[disabled] {
  opacity: 0.62;
  cursor: default;
  transform: none;
}

/*
 * Le pagine legali.
 *
 * Non stavano nel file approvato — lì i quattro collegamenti in fondo erano
 * segnaposto — ma i testi esistono e sono quelli che si leggevano prima. Qui
 * prendono la tipografia della vetrina: stessa colonna stretta, stesse forme
 * delle card, stesso giallo del marchio sui numeri dei paragrafi.
 */
.opero-site .legal {
  max-width: 820px;
}
.opero-site .legal-lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 68ch;
}
.opero-site .legal-intro {
  font-size: 16.5px;
  line-height: 1.72;
  max-width: 74ch;
}
.opero-site .legal-summary {
  margin-top: 34px;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.opero-site .legal-summary strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.opero-site .legal-summary ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px 28px;
  font-size: 15px;
}
@media (min-width: 731px) {
  .opero-site .legal-summary ol {
    grid-template-columns: 1fr 1fr;
  }
}
.opero-site .legal-summary a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.opero-site .legal-rows {
  margin: 34px 0 0;
  border-top: 1px solid var(--line);
}
.opero-site .legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}
.opero-site .legal-row dt {
  width: 190px;
  flex: none;
  color: var(--muted);
  font-size: 15px;
}
.opero-site .legal-row dd {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
/* I recapiti di Opero Sagl: email e telefoni si leggono come testo, il collegamento è una comodità */
.opero-site .legal-row dd a,
.opero-site .legal-section p a,
.opero-site .sup-faq p a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.opero-site .legal-section {
  margin-top: 44px;
  scroll-margin-top: 110px;
}
.opero-site .legal-section h2 {
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.opero-site .legal-section h2 i {
  font-style: normal;
  color: var(--accent-strong);
  margin-right: 10px;
}
.opero-site .legal-section p {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--muted);
  max-width: 74ch;
}
.opero-site .legal-section ul {
  max-width: 74ch;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.72;
}
.opero-site .legal-table {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.opero-site .legal-table table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
.opero-site .legal-table th {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.opero-site .legal-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  vertical-align: top;
}
.opero-site .legal-table tr:last-child td {
  border-bottom: 0;
}
.opero-site .legal-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  border: 1px dashed var(--accent-strong);
  background: var(--accent-soft);
  color: #07506F;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
}
.opero-site .legal-note b {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
.opero-site .legal-pending {
  display: inline-block;
  border: 1px dashed var(--line);
  background: var(--soft);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 700;
}
.opero-site .legal-updated {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* Le pagine di mestiere: stesse forme del resto, elenco puntato compreso. */
.opero-site .sector-points {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 34px;
}
.opero-site .sector-point {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
}
.opero-site .sector-point h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.opero-site .sector-point p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.66;
}

/*
 * Il badge «PIÙ SCELTO».
 *
 * Nel file approvato la pillola nasceva assoluta (`top:18px;right:18px`) e una
 * regola successiva la riportava nel flusso senza azzerare quegli scarti: la
 * pillola finiva stampata sopra la parola «TEAM», che si leggeva «TEA». Qui
 * gli scarti si tolgono e la pillola prende la sua riga, sopra il nome del
 * piano — la separazione che il disegno voleva e non riusciva a tenere.
 */
.opero-site .price-card .price-tag {
  top: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

/*
 * Le fotografie dei fondatori, dentro il cerchio.
 *
 * `cover` le ritaglia senza deformarle: una foto in verticale schiacciata in un
 * cerchio è il modo più veloce di rovinare una pagina che funziona.
 */
.opero-site .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/*
 * La riga della promessa, sotto la hero.
 *
 * Nel file approvato il markup c'è ma il foglio di stile non la nomina mai:
 * le quattro parole finivano attaccate («UfficioOperatoriClientiAmministrazione»)
 * e i pallini erano invisibili. Qui prende la spaziatura e i pallini gialli
 * dell'occhiello, che è il linguaggio già usato dal resto della pagina —
 * nessuna forma nuova, solo quella che mancava.
 */
.opero-site .promise {
  margin-top: 34px;
}
.opero-site .promise-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}
.opero-site .promise-inner > strong {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.opero-site .promise-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-left: auto;
}
.opero-site .promise-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.opero-site .promise-points i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 730px) {
  .opero-site .promise-points {
    margin-left: 0;
  }
}

/*
 * Il magnetismo, senza lo sfarfallio.
 *
 * Il disegno chiedeva tre cose insieme su OGNI elemento magnetico — una
 * promozione permanente a livello grafico (`will-change`), un contesto 3D
 * (`transform-style: preserve-3d`) e la faccia posteriore nascosta — e in più
 * un filtro sull'elemento vicino al puntatore. Con i magnetici annidati (la
 * tappa del flusso contiene il suo numero, la card contiene la sua icona) il
 * filtro sul genitore obbliga il figlio a rientrare nel disegno del genitore:
 * il browser smonta e rimonta il livello a ogni movimento del mouse, e per un
 * fotogramma il figlio non c'è — il numero «03» che sparisce mentre si passa
 * sopra le tappe.
 *
 * Il movimento resta identico: stessa attrazione, stessa rotazione, stessa
 * scala, stessi tempi. Cambia solo come il browser lo disegna — un livello
 * grafico si crea quando l'elemento si sta muovendo davvero, e non prima.
 *
 * Il filtro `saturate(1.03)` sull'elemento vicino è l'unica cosa tolta: era
 * un 3% di colore in più che nessuno vede, e il costo era il difetto qui
 * sopra. Se lo si rivuole, si rimette togliendo la riga `filter: none`.
 */
.opero-site .magnetic {
  transform-style: flat;
  backface-visibility: visible;
  will-change: auto;
}
.opero-site .magnetic.is-near {
  will-change: transform;
  filter: none;
}

/*
 * La pagina è visibile di suo; l'animazione la accompagna dentro.
 *
 * Prima lo stato di partenza era «trasparente» e a renderla visibile era
 * l'animazione d'ingresso: se quella non partiva o non finiva — scheda aperta
 * in secondo piano, browser che risparmia — restava una pagina servita e
 * invisibile. Ora il default è visibile e l'animazione fa solo la sua parte:
 * a schermo si vede esattamente la stessa cosa.
 */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.opero-site .site-page.active {
  opacity: 1;
  transform: none;
}


/*
 * I riquadri finali di ogni pagina — l'invito, sempre lo stesso.
 *
 * In fondo a ogni pagina c'è un riquadro che chiude il discorso: «Meno
 * ufficio. Più lavoro.», «La vera funzione è il collegamento tra tutte le
 * altre.», «L'ufficio organizza. Il team esegue.». Erano di due tipi
 * diversi — la card gialla piena e il pannello nero — e adesso sono una cosa
 * sola: fondo azzurro chiarissimo, anello decorativo in alto a destra, titolo
 * nero grande, testo grigio, bottone Pantone 299 C.
 *
 * Il bersaglio è stretto di proposito: `> .section-sm:last-child`, cioè
 * l'ultima sezione della pagina. Le card normali dentro le pagine — comprese
 * le altre `.demo-card` e il pannello nero del flusso in home, che non è
 * l'ultima sezione — restano esattamente come sono.
 */
.opero-site {
  --final-cta-bg: #EAF5FA;
  --final-cta-border: #D2E8F2;
  --final-cta-ring: #B9D9E8;
  --final-cta-inner: rgba(255, 255, 255, .34);
  --final-cta-text: #737A79;
}

.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel {
  background: var(--final-cta-bg) !important;
  color: #111 !important;
  border: 1px solid var(--final-cta-border) !important;
  border-radius: 52px !important;
  padding: 68px 74px !important;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
  isolation: isolate;
}

/* L'anello grande che esce dal bordo in alto a destra. */
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -170px;
  top: -210px;
  border: 62px solid var(--final-cta-ring);
  opacity: .82;
  pointer-events: none;
  z-index: 0;
}

/* Il cerchio pieno, più chiaro, dentro l'anello. */
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  right: -10px;
  top: -34px;
  background: var(--final-cta-inner);
  pointer-events: none;
  z-index: 0;
}

/* Il contenuto sta sopra la decorazione, sempre. */
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card > *,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card > *,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card > *,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card > *,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card > *,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card > *,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel > * {
  position: relative;
  z-index: 1;
}

/* Titolo, descrizione, bottone: uno sotto l'altro, a sinistra. */
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 28px !important;
}

.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card h2,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card h2,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card h2,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card h2,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card h2,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card h2,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel h2 {
  font-size: clamp(46px, 5.4vw, 74px);
  line-height: .98;
  letter-spacing: -.058em;
  color: #111;
  margin: 0 0 20px;
  max-width: 1180px;
}

.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel p {
  font-size: 20px;
  line-height: 1.55;
  /* `!important` perché il pannello del flusso si scriveva il grigio scuro
     in linea, quando il fondo era nero. */
  color: var(--final-cta-text) !important;
  max-width: 980px;
  margin: 0;
}

.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card .demo-actions,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card .demo-actions,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card .demo-actions,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card .demo-actions,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card .demo-actions,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card .demo-actions,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel .demo-actions,
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card .hero-actions,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card .hero-actions,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card .hero-actions,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card .hero-actions,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card .hero-actions,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card .hero-actions,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel .hero-actions {
  justify-content: flex-start;
}

.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel .btn {
  background: #00A3E0 !important;
  border-color: #00A3E0 !important;
  color: #111 !important;
  min-height: 64px !important;
  padding: 18px 28px !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 900;
}

@media (max-width: 1050px) {
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel {
    padding: 56px 46px !important;
    border-radius: 40px !important;
  }
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel::before {
    width: 420px;
    height: 420px;
    border-width: 50px;
    right: -150px;
    top: -180px;
  }
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel::after {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 730px) {
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel {
    padding: 42px 26px !important;
    border-radius: 30px !important;
  }
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card::before,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel::before {
    width: 300px;
    height: 300px;
    border-width: 36px;
    right: -110px;
    top: -130px;
  }
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card::after,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel::after {
    width: 140px;
    height: 140px;
    right: -20px;
    top: -24px;
  }
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card p,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel p {
    font-size: 17px;
  }
.opero-site .site-page[data-route="home"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="app"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="prezzi"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="settori"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="chi-siamo"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="faq"] > .section-sm:last-child .demo-card .btn,
.opero-site .site-page[data-route="funzioni"] > .section-sm:last-child .flow-panel .btn {
    min-height: 56px !important;
    padding: 16px 22px !important;
  }
}

/*
 * La barra in cima, sul telefono.
 *
 * Sotto i 1050px il disegno nasconde «Accedi» e lascia solo «Prova Opero».
 * Su uno schermo da 390px quel bottone non ci stava: andava a capo — «Prova /
 * Opero» — diventava alto il doppio e usciva dalla barra, che è alta 76px.
 *
 * Qui il bottone resta su una riga sola e si stringe come si stringe tutto il
 * resto della pagina. «Accedi» non torna nella barra — lo spazio per due
 * azioni non c'è — ma sta in fondo al menu, che sul telefono è il posto dove
 * uno lo cerca: prima non c'era da nessuna parte.
 */
.opero-site .nav-actions .btn {
  white-space: nowrap;
}
@media (max-width: 730px) {
  .opero-site .nav {
    gap: 12px;
  }
  .opero-site .nav-actions {
    gap: 7px;
  }
  .opero-site .nav-actions .btn {
    font-size: 13.5px;
    padding: 10px 14px;
    min-height: 42px;
    border-radius: 12px;
  }
  .opero-site .menu-btn {
    width: 42px;
    height: 42px;
  }
  /* Nel menu i due bottoni sono uno sotto l'altro, e il secondo non ha
     bisogno dello stacco che separa le voci dalla prima azione. */
  .opero-site .mobile-menu .btn + .btn {
    margin-top: 8px;
  }
}