@import url('./palette.css');
:root{color-scheme:light;--bg:var(--opero-surface);--surface:#ffffff;--ink:var(--opero-ink);--muted:var(--opero-ink);--line:var(--opero-line);--blue:var(--opero-accent);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth;scroll-padding-top:118px;background:var(--bg)}
body{margin:0;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse 75% 540px at 72% 0%,var(--opero-surface-warm) 0%,transparent 75%),var(--bg)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit}
figure,p,h1,h2,h3{margin:0}
.container{width:min(1240px,calc(100% - 112px));margin-inline:auto}
.eyebrow{color:var(--opero-ink);font-size:12px;letter-spacing:.17em;font-weight:500;text-transform:uppercase;line-height:1.6;margin-bottom:22px}
h1{font-size:clamp(48px,5.5vw,80px);line-height:1.04;font-weight:400;letter-spacing:-.055em}
h1>span{color:var(--opero-ink)}
h2{font-size:clamp(30px,3vw,44px);line-height:1.14;font-weight:400;letter-spacing:-.035em}
h3{font-size:23px;font-weight:400;letter-spacing:-.025em;line-height:1.3}
.lead{color:var(--muted);font-size:19px;line-height:1.7;margin-top:29px;max-width:640px}
.skip-link{position:fixed;z-index:100;left:24px;top:-80px;padding:12px 20px;color:var(--opero-action-ink);background:var(--blue);border-radius:6px}
.skip-link:focus{top:16px}
.main-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.header-row{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:block;flex:0 0 146px;width:146px}
.brand svg{width:146px;height:37px}
.desktop-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.desktop-nav a{font-size:14px;color:var(--muted);white-space:nowrap;padding:14px 0;position:relative;transition:color .2s}
.desktop-nav a:hover,.desktop-nav a[aria-current]{color:var(--ink)}
.desktop-nav a[aria-current]::after{content:"";position:absolute;bottom:4px;height:2px;background:var(--blue);left:0;right:0}
.desktop-nav a:nth-last-child(2){border-left:1px solid var(--line);padding-left:26px}
.intro-link{font-size:14px;white-space:nowrap;color:var(--ink);border:1px solid var(--line);padding:8px 13px;border-radius:999px;margin-left:5px}
.intro-link span{color:var(--opero-ink);margin-left:8px}
.intro-link:hover{border-color:var(--blue)}
.mobile-menu{display:none}
.text-link,.outline-link{display:inline-flex;align-items:center;justify-content:space-between;gap:23px;font-size:16px;font-weight:500;min-height:46px}
.text-link{color:var(--ink);padding:8px 0;border-bottom:1px solid var(--opero-line)}
.text-link svg,.outline-link svg,.card-link svg{height:20px;width:20px;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.text-link:hover svg,.outline-link:hover svg,.service-card:hover .card-link svg{transform:translateX(4px)}
.outline-link{border:1px solid var(--opero-line);border-radius:999px;padding:12px 22px;transition:background .2s}
.outline-link:hover{background:var(--opero-surface-warm)}
.hub-hero{position:relative;padding-top:85px;padding-bottom:65px;text-align:center;overflow:clip}
.hub-hero .lead{margin-inline:auto}
.blue-thread{position:absolute;inset:auto -56px -40px;width:calc(100% + 112px);max-width:none;height:170px;pointer-events:none;z-index:0;opacity:.7;filter:drop-shadow(0 0 8px rgb(0 163 224 / 0.333))}
.choice-section{position:relative;margin-bottom:105px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;background:linear-gradient(125deg,var(--surface),var(--opero-surface-warm));box-shadow:0 16px 45px rgb(0 163 224 / 0.031);overflow:hidden}
.service-card{padding:34px 34px 29px;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);position:relative;transition:background .3s}
.service-card:last-child{border-right:0}
.service-card:hover{background:var(--opero-surface-warm)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:33px}
.service-icon{height:68px;width:76px;stroke:var(--blue);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;fill:none;filter:drop-shadow(0 0 12px rgb(0 163 224 / 0.078))}
.index{font-size:12px;color:var(--muted);letter-spacing:.08em}
.service-card h2{font-size:26px;line-height:1.15;display:flex;align-items:center;justify-content:space-between;gap:12px}
.service-card h2>span{font-size:23px;font-weight:300;color:var(--opero-ink)}
.service-card p{font-size:16px;line-height:1.55;color:var(--muted);margin-top:16px;margin-bottom:30px;max-width:255px}
.card-link{font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding-top:21px;border-top:1px solid var(--line);color:var(--opero-ink)}
.home-about{display:grid;grid-template-columns:1fr 1fr;gap:95px;padding-bottom:94px}
.home-about>div:last-child{padding-top:35px}
.home-about p:not(.eyebrow){font-size:18px;color:var(--muted);line-height:1.75;margin-bottom:23px}
.question-strip{border-top:1px solid var(--line);padding-block:53px 63px;display:flex;align-items:center;justify-content:space-between;gap:35px}
.question-strip .eyebrow{margin-bottom:13px}
.question-strip h2{font-size:31px}
.question-strip>a{flex-shrink:0}
.main-footer{border-top:1px solid var(--line);background:var(--opero-surface-warm)}
.footer-row{min-height:130px;padding-block:28px;display:flex;justify-content:space-between;align-items:center;gap:35px}
.footer-row>p{font-size:18px;letter-spacing:-.02em}
.footer-row>p span{display:block;font-size:13px;color:var(--muted);margin-top:5px;letter-spacing:0}
.footer-row>div{display:flex;align-items:center;gap:27px;font-size:14px;color:var(--muted)}
.footer-row>div>a:hover{color:var(--opero-ink)}
.footer-row .text-link{font-size:14px;border-bottom:0}
.service-hero{padding-top:40px;padding-bottom:80px}
.breadcrumb{display:inline-flex;gap:13px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:49px;min-height:35px}
.breadcrumb:hover{color:var(--opero-ink)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.hero-grid h1{font-size:clamp(42px,4.3vw,64px)}
.hero-grid .lead{font-size:18px;margin-top:25px}
.hero-grid .outline-link{margin-top:30px}
.hero-visual{position:relative;overflow:hidden;border-radius:15px;border:1px solid var(--line);box-shadow:0 25px 70px rgb(0 163 224 / 0.102);background:var(--opero-surface-warm)}
.hero-visual>img{width:100%;aspect-ratio:1.22;object-fit:cover;object-position:center}
.hero-visual::after{content:"";position:absolute;bottom:0;left:0;right:0;height:45%;background:linear-gradient(transparent,rgb(24 24 27 / 0.902));pointer-events:none}
.hero-visual figcaption{position:absolute;z-index:1;bottom:25px;left:25px;right:25px;display:flex;align-items:center;gap:14px;font-size:16px;font-weight:500;color:#fff}
.hero-visual .service-icon{width:37px;height:37px;stroke:var(--opero-accent)}
.overview-section{padding-block:65px 92px;border-top:1px solid var(--line)}
.section-heading{max-width:820px}
.section-heading>p:not(.eyebrow){margin-top:25px;font-size:18px;line-height:1.75;color:var(--muted);max-width:740px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:50px}
.feature-grid article{padding-top:22px;border-top:1px solid var(--line)}
.feature-grid h3{margin-top:19px;margin-bottom:15px}
.feature-grid p{color:var(--muted);font-size:16px;line-height:1.75}
.process-section{background:var(--opero-surface-warm);border-block:1px solid var(--line);padding-block:82px}
.process-section>.container{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}
.process-heading h2{font-size:46px}
.process-list{list-style:none;padding:0;margin:0}
.process-list li{display:grid;grid-template-columns:42px 1fr;gap:25px;padding:24px 0;border-bottom:1px solid var(--line)}
.process-list li:first-child{padding-top:0}
.process-list li:last-child{border-bottom:0;padding-bottom:0}
.step-number{font-size:14px;color:var(--opero-ink);padding-top:4px}
.process-list h3{font-size:23px}
.process-list p{color:var(--muted);margin-top:12px;line-height:1.7}
.demo-section{padding-top:91px;padding-bottom:80px}
.demo-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:36px}
.demo-heading>p{font-size:17px;line-height:1.75;color:var(--muted)}
.demo-media{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--opero-surface-warm);isolation:isolate}
.demo-media>img,.demo-media>video{width:100%;height:100%;object-fit:contain}
.demo-media>img{opacity:1}
.demo-status{position:absolute;bottom:25px;left:25px;display:flex;gap:10px;align-items:center;color:var(--ink);font-size:14px;background:#ffffffed;backdrop-filter:blur(12px);border:1px solid var(--line);padding:10px 15px;border-radius:999px;margin-right:25px}
.demo-status>span{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--blue)}
.fit-section{max-width:800px;text-align:center;padding-block:28px 90px}
.fit-section>p:not(.eyebrow){font-size:18px;color:var(--muted);line-height:1.8;margin-top:24px}
.fit-section .text-link{margin-top:24px}
.more-services{padding-bottom:88px;border-top:1px solid var(--line);padding-top:55px}
.section-top{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:35px}
.section-top h2{font-size:32px}
.section-top>a{flex-shrink:0}
.related-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.related-grid .service-card{padding:28px}
.related-grid .card-top{margin-bottom:21px}
.related-grid .service-icon{height:48px;width:55px}
.related-grid .service-card p{max-width:none}
.about-hero{padding-block:81px 58px}
.about-hero .lead{max-width:690px}
.team-section{display:grid;grid-template-columns:1.08fr .92fr;gap:65px;align-items:center;padding-bottom:97px}
.portrait-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.person:nth-child(2){padding-top:55px}
.portrait-frame{aspect-ratio:4/5;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:var(--opero-surface-warm)}
.portrait-frame svg{width:100%;height:100%}
.person figcaption{padding:22px 0 0}
.person figcaption h2{font-size:24px}
.person-role{color:var(--opero-ink);font-size:14px;margin-top:7px}
.person figcaption>p:not(.person-role){font-size:16px;color:var(--muted);line-height:1.65;margin-top:13px}
.team-story h2{font-size:34px;margin-bottom:27px}
.team-story>p:not(.eyebrow){font-size:17px;color:var(--muted);line-height:1.8;margin-top:18px}
.values-section{border-top:1px solid var(--line);padding-block:63px 90px}
.faq-hero{padding-block:82px 70px}
.faq-layout{display:grid;grid-template-columns:270px 1fr;gap:80px;align-items:start;padding-bottom:93px}
.faq-sidebar{position:sticky;top:140px}
.faq-sidebar nav{display:flex;flex-direction:column}
.faq-sidebar nav a{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--muted)}
.faq-sidebar nav a:hover{color:var(--opero-ink)}
.faq-sidebar nav a>span{color:var(--opero-ink)}
.faq-groups>section{margin-bottom:52px;scroll-margin-top:125px}
.faq-groups>section:last-child{margin-bottom:0}
.faq-groups h2{font-size:29px;margin-bottom:25px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0;font-size:18px;line-height:1.5}
.faq-item>summary::-webkit-details-marker,.mobile-menu>summary::-webkit-details-marker{display:none}
.faq-plus{width:14px;height:14px;position:relative;flex:0 0 14px;color:var(--opero-ink)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;top:6px;left:0;width:14px;height:1px;background:currentColor}
.faq-plus::after{transform:rotate(90deg)}
.faq-item[open] .faq-plus::after{transform:none}
.faq-item[open]>summary{color:var(--opero-ink)}
.faq-answer{padding:0 34px 25px 0}
.faq-answer>p{color:var(--muted);font-size:16px;line-height:1.8}
@media(min-width:1500px){.hub-hero{padding-top:100px;padding-bottom:82px}.service-card{padding:40px}.hero-grid{gap:65px}}
@media(max-width:1180px){.container{width:calc(100% - 72px)}.header-row{gap:22px}.desktop-nav{gap:18px}.desktop-nav a:nth-last-child(2){padding-left:18px}.brand{flex-basis:132px}.brand svg{width:132px}.intro-link{font-size:13px}.service-card{padding:28px}.service-card h2{font-size:23px}.hero-grid{gap:35px}.team-section{gap:40px}.process-section>.container{gap:65px}.faq-layout{gap:55px;grid-template-columns:235px 1fr}}
@media(max-width:1080px){
  .desktop-nav,.intro-link{display:none}.header-row{min-height:82px}.mobile-menu{display:block}
  .mobile-menu>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px;cursor:pointer;font-size:15px;min-height:44px;min-width:82px}
  .mobile-menu>summary>span{height:11px;width:19px;border-block:1px solid var(--ink);position:relative}
  .mobile-menu[open]>summary>span{border:0}.mobile-menu[open]>summary>span::before,.mobile-menu[open]>summary>span::after{content:"";position:absolute;left:0;top:5px;height:1px;width:19px;background:var(--ink);transform:rotate(45deg)}
  .mobile-menu[open]>summary>span::after{transform:rotate(-45deg)}
  .mobile-menu nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;background:var(--surface);box-shadow:0 20px 25px rgb(0 163 224 / 0.071);border-bottom:1px solid var(--line);padding:15px 36px 25px;max-height:calc(100svh - 82px);overflow:auto}
  .mobile-menu nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:17px}
  .mobile-menu nav a:last-child{border-bottom:0;color:var(--opero-ink);font-size:14px;padding-top:19px}
  .mobile-menu nav a[aria-current]{color:var(--opero-ink)}
  .home-about{gap:55px}.service-card h2{font-size:22px}.card-top{margin-bottom:25px}
  .hero-grid h1{font-size:47px}.hero-grid .lead{font-size:17px}
  .hero-visual>img{aspect-ratio:1;object-fit:cover}
  .feature-grid{gap:28px}.team-section{grid-template-columns:1fr;gap:55px}
  .portrait-grid{max-width:800px;gap:28px}.team-story{max-width:720px}
}
@media(max-width:760px){
  html{scroll-padding-top:100px}.container{width:calc(100% - 44px)}.header-row{min-height:76px}.brand,.brand svg{width:126px;flex-basis:126px}.brand svg{height:32px}
  .mobile-menu nav{padding-inline:22px;max-height:calc(100svh - 76px)}
  h1{font-size:48px}h2{font-size:33px}.eyebrow{font-size:11px;margin-bottom:18px}.lead{font-size:17px;line-height:1.75;margin-top:25px}
  .hub-hero{text-align:left;padding-top:58px;padding-bottom:55px}.hub-hero h1{font-size:59px}.hub-hero .lead{margin-left:0}.blue-thread{left:-22px;right:-22px;width:calc(100% + 44px);height:130px;bottom:-5px;opacity:.3}
  .choice-section{margin-bottom:65px}.service-grid{grid-template-columns:1fr}
  .service-card,.service-card:last-child{padding:28px;border-right:0;border-bottom:1px solid var(--line)}.service-card:last-child{border-bottom:0}
  .card-top{margin-bottom:22px}.service-icon{width:62px;height:55px}.service-card h2{font-size:27px}.service-card p{max-width:none;margin-top:12px;margin-bottom:23px}.card-link{padding-top:17px}
  .home-about{grid-template-columns:1fr;gap:23px;padding-bottom:60px}.home-about>div:last-child{padding-top:0}.home-about p:not(.eyebrow){font-size:17px}
  .question-strip{padding-block:38px 48px;align-items:flex-start;flex-direction:column;gap:25px}.question-strip h2{font-size:29px}
  .footer-row{flex-direction:column;align-items:flex-start;gap:20px;padding-block:30px}.footer-row>div{gap:24px;flex-wrap:wrap}.footer-row>div .text-link{padding-top:0;padding-bottom:0}
  .service-hero{padding-top:23px;padding-bottom:51px}.breadcrumb{margin-bottom:31px}.hero-grid{grid-template-columns:1fr;gap:40px}.hero-grid h1{font-size:48px}.hero-grid .lead{font-size:17px}.hero-grid .outline-link{margin-top:25px}.hero-visual>img{aspect-ratio:16/10;object-fit:cover}
  .hero-visual figcaption{bottom:20px;left:20px}.hero-visual .service-icon{width:30px;height:30px}
  .overview-section{padding-block:46px 60px}.section-heading>p:not(.eyebrow){font-size:17px;margin-top:22px}.feature-grid{grid-template-columns:1fr;gap:30px;margin-top:34px}.feature-grid h3{font-size:23px;margin-top:14px;margin-bottom:12px}
  .process-section{padding-block:49px}.process-section>.container{grid-template-columns:1fr;gap:36px}.process-heading h2{font-size:38px}.process-list li{grid-template-columns:28px 1fr;gap:20px;padding-block:25px}.process-list h3{font-size:22px}
  .demo-section{padding-block:57px 46px}.demo-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.demo-heading>p{font-size:16px}.demo-media{border-radius:10px}.demo-status{bottom:12px;left:12px;margin-right:12px;padding:7px 11px;font-size:12px}
  .fit-section{padding-block:20px 57px;text-align:left}.fit-section>p:not(.eyebrow){font-size:17px}.fit-section h2{font-size:32px}
  .more-services{padding-block:38px 50px}.section-top{align-items:flex-start;flex-direction:column;gap:18px}.section-top h2{font-size:30px}.related-grid{grid-template-columns:1fr}.related-grid .service-card{padding:25px}
  .about-hero{padding-block:56px 37px}.about-hero h1{font-size:43px}.team-section{padding-bottom:58px;gap:42px}.portrait-grid{gap:15px}.person:nth-child(2){padding-top:36px}.portrait-frame{border-radius:8px}.person figcaption{padding-top:16px}.person figcaption h2{font-size:21px}.person-role{font-size:13px}.person figcaption>p:not(.person-role){font-size:16px}.team-story h2{font-size:31px;margin-bottom:20px}
  .values-section{padding-block:44px 61px}
  .faq-hero{padding-block:56px 40px}.faq-hero h1{font-size:49px}.faq-layout{grid-template-columns:1fr;gap:40px;padding-bottom:56px}.faq-sidebar{position:static}.faq-sidebar .eyebrow{margin-bottom:10px}.faq-sidebar nav a{font-size:15px;padding-block:11px}.faq-groups h2{font-size:26px;margin-bottom:22px}.faq-item>summary{font-size:17px;gap:22px;padding-block:21px}.faq-answer{padding-right:15px}.faq-groups>section{margin-bottom:41px}
}
@media(max-width:370px){.container{width:calc(100% - 36px)}h1,.hero-grid h1{font-size:42px}.hub-hero h1{font-size:53px}.about-hero h1{font-size:38px}.service-card{padding:23px}.portrait-grid{gap:10px}.person figcaption h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Anteprime delle tre soluzioni nella pagina servizi. */
.page-servizi .service-card{overflow:hidden}.hub-card-visual{aspect-ratio:1.68;position:relative;overflow:hidden;margin:-34px -34px 24px;background:var(--opero-ink)}.hub-card-visual>img{height:100%;width:100%;object-fit:cover}.hub-card-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(24 24 27 / 0.675),transparent 70%)}.hub-card-visual>span{position:absolute;bottom:16px;left:22px;right:22px;z-index:1;color:#fff;font-size:15px;font-weight:500}.page-servizi .card-top{margin-bottom:20px}.page-servizi .service-icon{height:51px;width:60px}.page-servizi .service-card p{max-width:none}.page-servizi .service-card:hover .hub-card-visual>img{filter:brightness(1.06)}
@media(min-width:1500px){.hub-card-visual{margin:-40px -40px 25px}}@media(max-width:1180px){.hub-card-visual{margin:-28px -28px 23px}}@media(max-width:370px){.hub-card-visual{margin:-28px -28px 21px}}

/* Main OPERO surfaces and graphic accents. */
html,body{background:var(--opero-surface)}
.blue-thread stop,.op-flow stop,.op-demo-scope .blue-ribbon stop{stop-color:var(--opero-accent)}
.es-example-link svg,.es-detail-link svg,.op-link svg,.card-link svg,.breadcrumb svg{color:var(--opero-accent)}