/* ============ Design tokens — allineati a www.manxx.eu ============ */ :root{ --blue:#1C6CB8; --blue-dark:#155293; --blue-light:#81C2FF; --navy:#182038; --ink:#20282D; --body:#5C6A72; --pale:#EFF6FB; --card:#DCEBFA; --line:#20282D26; --orange:#FF7400; --white:#fff; --r:18px; --shadow:0 18px 50px -28px rgba(24,32,56,.45); --wrap:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth;scrollbar-gutter:stable} html,body{overflow-x:clip} /* lock dello scroll con il modal aperto: va su , perché con overflow-x:clip l'overflow del non propaga più al viewport e il lock non farebbe effetto */ html.qf-lock{overflow:hidden} body{ margin:0;background:var(--white);color:var(--body); font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none} .wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto} h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0} em.s{font-family:"DM Serif Text",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0} strong{color:var(--ink);font-weight:700} /* eyebrow / pill */ .eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--blue);background:#1C6CB81F; padding:6px 12px;border-radius:6px;margin-bottom:20px} .eyebrow.on-dark{color:#BEDCFF;background:#ffffff1f} /* ============ Topbar ============ */ .topbar{background:var(--navy);color:#C3CEDA;font-size:13.5px} .topbar .wrap{display:flex;gap:26px;align-items:center;justify-content:space-between; min-height:44px;flex-wrap:wrap} .topbar span{display:inline-flex;align-items:center;gap:8px} .topbar a{color:#C3CEDA} .topbar a:hover{color:#fff} .dotsep{opacity:.35} /* ============ Header ============ */ header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)} header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px} .logo img{height:68px;width:auto} nav{display:flex;gap:30px;align-items:center} nav a{color:var(--ink);font-weight:500;font-size:15px} nav a:hover{color:var(--blue)} .btn{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff; font-weight:700;font-size:15px;padding:14px 26px;border-radius:100px; transition:transform .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap} .btn:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 12px 26px -12px #1C6CB8AA} .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff59} .btn.ghost:hover{background:#ffffff14;box-shadow:inset 0 0 0 1.5px #fff} .btn.orange{background:var(--orange)} .btn.orange:hover{background:#E56800;box-shadow:0 12px 26px -12px #FF7400AA} /* ============ Hero ============ */ .hero{position:relative;overflow:hidden;color:#fff;padding:96px 0 130px; background:linear-gradient(115deg,#181154 0%,#241A66 42%,#3A2183 78%,#5B2A93 100%)} /* immagine di scena: lo scudo occupa la metà destra e sfuma sul fondo */ .hero-img{position:absolute;inset:0 0 0 auto;width:64%;height:100%;object-fit:cover; object-position:52% center;z-index:0; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%,#000 100%); mask-image:linear-gradient(to right,transparent 0%,#000 30%,#000 100%)} /* velo di leggibilità sulla colonna di testo */ .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(100deg,#140E45E6 0%,#140E45BF 32%,#140E4559 54%,transparent 72%)} .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:170px;pointer-events:none;z-index:1; background:linear-gradient(to bottom,transparent,#140E4559)} .hero .wrap{position:relative;z-index:2} .hero h1{color:#fff;font-size:clamp(38px,5.6vw,66px);max-width:16ch} .hero p.lead{color:#D3DEEA;font-size:clamp(17px,1.5vw,19.5px);max-width:60ch;margin:24px 0 0} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px} .hero .norm{margin-top:30px;font-size:14px;color:#93A6BC} .hero .norm b{color:#BEDCFF;font-weight:600} .hero h1,.hero .lead,.hero .eyebrow{text-shadow:0 2px 24px rgba(13,11,51,.55)} .hero .wrap>*{max-width:min(100%,640px)} /* stat strip — fuori dall'hero (che ha overflow:hidden) e sovrapposto */ .stats-wrap{position:relative;z-index:5;margin-top:-70px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:26px 22px;text-align:center;box-shadow:var(--shadow)} .stat .n{font-size:clamp(34px,3.6vw,46px);font-weight:800;color:var(--blue); letter-spacing:-.035em;line-height:1} .stat .n small{font-size:.5em;font-weight:700;letter-spacing:-.01em} .stat .l{margin-top:10px;font-size:13px;line-height:1.45;color:var(--body)} /* ============ Sections ============ */ section{padding:104px 0} /* l'header è sticky: senza questo margine le ancore finiscono nascoste sotto */ section[id]{scroll-margin-top:104px} #top{scroll-margin-top:0} section.pale{background:var(--pale)} .sec-head{max-width:62ch;margin-bottom:52px} .sec-head h2{font-size:clamp(28px,3.4vw,42px)} .sec-head p{margin:16px 0 0;font-size:17.5px} .pt-tight{padding-top:150px} /* synthesis band */ .synth{background:linear-gradient(120deg,#182038 0%,#1C3F6E 58%,#1C6CB8 130%); color:#fff;border-radius:26px;padding:44px 48px;box-shadow:var(--shadow);position:relative;overflow:hidden} .synth::after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px; border-radius:50%;background:radial-gradient(circle,#81C2FF33,transparent 68%)} .synth h3{color:#fff;font-size:24px;margin-bottom:12px} .synth p{margin:0;color:#D7E4F2;font-size:17.5px;max-width:72ch;position:relative;z-index:2} .synth strong{color:#fff} /* generic cards */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 32px; transition:transform .3s ease,box-shadow .3s ease} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .card.blue{background:var(--card);border-color:transparent} .card h3{font-size:20px;display:flex;align-items:center;gap:14px;margin-bottom:20px} .ico{width:42px;height:42px;flex:none;border-radius:12px;background:var(--blue);color:#fff; display:grid;place-items:center;font-size:19px} .ico.o{background:var(--orange)} ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:15px} ul.ticks li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.6} ul.ticks li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px; border-radius:50%;background:var(--blue)} ul.ticks.o li::before{background:var(--orange)} /* highlight box (Abruzzo) */ .highlight{border-left:5px solid var(--blue);background:var(--card); border-radius:0 var(--r) var(--r) 0;padding:30px 34px} .highlight h3{font-size:19px;margin-bottom:10px} .highlight p{margin:0;font-size:16px} /* alert */ .alert{border:1px dashed #FF740070;background:#FF74000D;border-radius:var(--r); padding:26px 30px;font-size:15.5px;line-height:1.65} .alert b.tag{color:var(--orange);font-weight:700} /* spesa list */ .spesa{display:grid;gap:16px} .item{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start; background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 30px; transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease} .item:hover{border-color:#1C6CB855;transform:translateY(-3px);box-shadow:var(--shadow)} .letter{width:46px;height:46px;border-radius:13px;background:var(--navy);color:#fff; display:grid;place-items:center;font-weight:800;font-size:18px} .item h3{font-size:19px;margin-bottom:8px} .item p{margin:0;font-size:15.5px} .map{margin-top:14px;padding-top:14px;border-top:1px solid var(--line); font-size:14.5px;font-weight:600;color:var(--blue)} .map::before{content:"→ ";opacity:.6} /* steps timeline */ .steps{display:grid;gap:0;margin-top:8px} .step{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:30px 0; border-top:1px solid var(--line)} .step:last-child{border-bottom:1px solid var(--line)} .num{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--blue); display:grid;place-items:center;font-weight:700;color:var(--blue);font-size:17px; background:#fff;position:relative} .step:not(:last-child) .num::after{content:"";position:absolute;top:calc(100% + 8px); left:50%;height:calc(100% + 4px);border-left:2px dotted #1C6CB870} .step h3{font-size:19px;margin-bottom:7px} .step p{margin:0;font-size:15.5px} /* iter table */ .iter{background:var(--navy);border-radius:26px;padding:12px 40px 24px;color:#C3CEDA;box-shadow:var(--shadow)} .iter h3{color:#fff;font-size:20px;padding:26px 0 8px} .row{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:20px 0; border-top:1px solid #ffffff1f;font-size:15.5px;line-height:1.6} .row dt{color:#fff;font-weight:700} .row dd{margin:0} .row strong{color:#BEDCFF} /* CTA */ .cta-box{background:linear-gradient(115deg,#1C6CB8 0%,#155293 55%,#182038 120%); color:#fff;border-radius:26px;padding:52px 56px;display:grid; grid-template-columns:1fr auto;gap:36px;align-items:center;box-shadow:var(--shadow)} .cta-box h2{color:#fff;font-size:clamp(25px,3vw,36px);max-width:20ch} .cta-box p{margin:14px 0 0;color:#D3E2F2;max-width:52ch} .cta-side{text-align:right;font-size:15.5px;line-height:2} .cta-side b{display:block;font-size:19px;color:#fff;margin-bottom:6px} .cta-side a{color:#D3E2F2} .cta-side a:hover{color:#fff} /* footer */ footer{background:var(--navy);color:#8FA0B4;padding:64px 0 34px;font-size:14px} footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:38px; border-bottom:1px solid #ffffff1a} footer img{height:86px;width:auto;margin-bottom:20px} footer h4{color:#fff;font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px} footer a{color:#8FA0B4} footer a:hover{color:#fff} footer p{margin:0 0 8px} .disclaimer{margin-top:30px;font-size:12.5px;line-height:1.7;color:#6E7F94} .copy{margin-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px} /* ============ Modal richiesta ============ */ .qf-overlay{ position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(20,14,69,.62);backdrop-filter:blur(5px); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease} .qf-overlay.open{opacity:1;visibility:visible} .qf-modal{ position:relative;width:100%;max-width:660px;max-height:calc(100vh - 48px);overflow-y:auto; background:#fff;color:var(--ink);border-radius:22px;border-top:4px solid var(--blue); box-shadow:0 30px 80px rgba(20,14,69,.45);padding:42px 40px 34px; transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.4,0,.2,1)} .qf-overlay.open .qf-modal{transform:none} .qf-close{ position:absolute;top:14px;right:14px;width:38px;height:38px;border:none;border-radius:50%; background:transparent;color:var(--body);font-size:22px;line-height:1;cursor:pointer; display:grid;place-items:center;transition:background .2s,color .2s} .qf-close:hover{background:var(--pale);color:var(--blue)} .qf-title{font-size:27px;color:var(--ink);line-height:1.15;margin-bottom:8px;padding-right:36px} .qf-intro{font-size:15px;line-height:1.6;margin:0 0 26px} .qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px} .qf-field{display:flex;flex-direction:column;min-width:0} .qf-field.qf-full{grid-column:1 / -1} .qf-field label{ font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--blue);margin-bottom:7px} .qf-field label .opt{color:var(--body);font-weight:500;letter-spacing:.06em;text-transform:none} .qf-field input,.qf-field select,.qf-field textarea{ font-family:inherit;font-size:15px;color:var(--ink);width:100%; padding:12px 14px;background:#F7FAFD;border:1px solid var(--line);border-radius:12px; transition:border-color .2s,box-shadow .2s,background .2s} .qf-field textarea{resize:vertical;min-height:88px;line-height:1.55} .qf-field input:focus,.qf-field select:focus,.qf-field textarea:focus{ outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px #1C6CB824} .qf-field select{cursor:pointer;appearance:none;padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231C6CB8' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:10px} .qf-consent{display:flex;gap:11px;align-items:flex-start;margin-top:18px; font-size:13.5px;line-height:1.55} .qf-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--blue);cursor:pointer} .qf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .qf-msg{font-size:14px;line-height:1.5;margin:16px 0 0;min-height:1px} .qf-msg.err{color:#B3261E;font-weight:600} .qf-msg.ok{color:#1E7A45;font-weight:600} .qf-submit{ display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%; margin-top:20px;padding:16px 28px;border:none;border-radius:100px; background:var(--blue);color:#fff;font-family:inherit;font-size:15.5px;font-weight:700; cursor:pointer;transition:background .25s,transform .2s,box-shadow .25s} .qf-submit:hover:not(:disabled){background:var(--blue-dark);transform:translateY(-2px); box-shadow:0 14px 30px -14px #1C6CB8} .qf-submit:disabled{opacity:.6;cursor:default} .qf-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--body);text-align:center} /* reveal — progressive enhancement: attivo solo se il JS gira */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .js .rv.in{opacity:1;transform:none} @media(max-width:980px){ .stats{grid-template-columns:1fr 1fr} .grid2,.cta-box{grid-template-columns:1fr} .cta-side{text-align:left} footer .cols{grid-template-columns:1fr} nav{display:none} section{padding:76px 0} .pt-tight{padding-top:120px} .synth,.iter,.cta-box{padding-inline:30px} /* su schermi stretti lo scudo diventa una fascia sotto il testo */ /* su schermi stretti l'immagine resta come atmosfera dietro al testo */ .hero{padding-bottom:130px} .hero-img{width:100%;object-position:center 42%;opacity:.6; -webkit-mask-image:none;mask-image:none} .hero::before{background: linear-gradient(to bottom,#140E45F0 0%,#140E45D9 45%,#140E45B3 100%)} .hero .wrap>*{max-width:100%} } @media(max-width:560px){ body{font-size:16px} .wrap{width:calc(100% - 32px)} section[id]{scroll-margin-top:84px} header .wrap{min-height:76px;gap:12px} .logo img{height:52px} footer img{height:68px} header .btn{font-size:13px;padding:11px 16px} .topbar{font-size:12px} .topbar .wrap{padding-block:8px;text-align:center} .hero{padding:64px 0 110px} .card,.item,.synth,.iter,.cta-box{padding-inline:22px} .highlight{padding:24px 22px} .alert{padding:22px} .qf-modal{padding:34px 20px 26px;border-radius:18px} .qf-grid{grid-template-columns:1fr} .qf-title{font-size:22px} .stats{grid-template-columns:1fr} .item,.step{grid-template-columns:1fr;gap:16px} .step:not(:last-child) .num::after{display:none} .row{grid-template-columns:1fr;gap:6px} .topbar .wrap{justify-content:center;gap:14px} } @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }