@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
--navy: #0b172a;
--navy-2: #122640;
--ink: #142033;
--muted: #667085;
--paper: #f7f9fc;
--white: #ffffff;
--line: #e6eaf0;
--green: #18a47a;
--green-dark: #08785a;
--mint: #e9f8f2;
--gold: #e7b85a;
--shadow: 0 25px 70px rgba(15, 35, 55, .12);
--radius: 22px;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
color: var(--ink);
background: var(--white);
font-family: "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
line-height: 1.6;
}

a {
color: inherit;
text-decoration: none;
}

img,
video {
max-width: 100%;
display: block;
}

/* =========================
TOPBAR
========================= */

.topbar {
height: 76px;
padding: 0 5vw;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 20;
background: rgba(255,255,255,.9);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(230,234,240,.8);
}

.brand,
.footer-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}

.brand strong,
.footer-brand strong {
font-weight: 800;
}

.brand-mark {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
color: white;
font-size: 12px;
font-weight: 800;
letter-spacing: -.03em;
background: linear-gradient(145deg, #1ab587, #08785a);
box-shadow: 0 8px 18px rgba(8,120,90,.2);
}

.brand-mark.big {
width: 58px;
height: 58px;
border-radius: 17px;
font-size: 16px;
}

nav {
display: flex;
align-items: center;
gap: 26px;
font-size: 14px;
font-weight: 600;
}

nav a {
color: #526071;
}

nav a:hover {
color: var(--ink);
}

.nav-cta {
color: white !important;
padding: 11px 17px;
border-radius: 11px;
background: var(--navy);
}

/* =========================
HERO
========================= */

.hero {
min-height: 720px;
padding: 92px 7vw 95px;
display: grid;
grid-template-columns: .92fr 1.08fr;
align-items: center;
gap: 6vw;
background:
radial-gradient(circle at 75% 28%, rgba(24,164,122,.13), transparent 31%),
radial-gradient(circle at 15% 0%, rgba(231,184,90,.12), transparent 26%),
linear-gradient(180deg, #fbfcfe 0%, #f4f8f7 100%);
overflow: hidden;
}

.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--green-dark);
font-size: 13px;
font-weight: 700;
margin-bottom: 22px;
}

.eyebrow span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
}

h1,
h2,
h3 {
font-family: "Manrope", system-ui, sans-serif;
letter-spacing: -.04em;
}

h1 {
font-size: clamp(44px, 5.2vw, 76px);
line-height: 1.01;
margin: 0 0 25px;
color: var(--navy);
}

h1 em,
h2 span {
color: var(--green);
font-style: normal;
}

.hero-text {
max-width: 590px;
font-size: 19px;
color: #5f6d7d;
line-height: 1.7;
}

.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 34px 0 18px;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
min-height: 52px;
padding: 0 21px;
border-radius: 13px;
font-weight: 700;
font-size: 14px;
transition: transform .2s, box-shadow .2s, background .2s;
}

.btn:hover {
transform: translateY(-2px);
}

.btn-primary {
color: white;
background: var(--green);
box-shadow: 0 13px 28px rgba(24,164,122,.22);
}

.btn-primary:hover {
background: var(--green-dark);
}

.btn-secondary {
background: white;
border: 1px solid var(--line);
color: var(--ink);
}

.hero-note {
display: flex;
flex-wrap: wrap;
gap: 15px;
color: #778393;
font-size: 12px;
font-weight: 600;
}

.hero-window {
position: relative;
background: white;
border-radius: 18px;
overflow: visible;
box-shadow: var(--shadow);
border: 1px solid #e8edf1;
transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.window-bar {
height: 38px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 14px;
background: #f2f5f7;
border-radius: 18px 18px 0 0;
}

.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #c9d0d8;
}

.window-title {
margin: 0 auto;
margin-left: 10px;
font-size: 11px;
color: #7b8591;
}

.hero-window img {
width: 100%;
border-radius: 0 0 18px 18px;
}

.floating-card {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255,255,255,.96);
box-shadow: 0 18px 45px rgba(17,39,60,.15);
border: 1px solid rgba(230,234,240,.9);
font-size: 12px;
}

.floating-card small {
display: block;
color: #7a8593;
font-size: 10px;
}

.floating-one {
left: -38px;
bottom: 12%;
}

.floating-two {
right: -34px;
top: 13%;
}

.mini-icon {
width: 29px;
height: 29px;
border-radius: 9px;
display: grid;
place-items: center;
color: var(--green-dark);
background: var(--mint);
font-weight: 800;
}

/* =========================
TRUST STRIP
========================= */

.trust-strip {
display: grid;
grid-template-columns: repeat(4,1fr);
padding: 27px 7vw;
background: var(--navy);
color: white;
}

.trust-strip div {
padding: 0 25px;
border-right: 1px solid rgba(255,255,255,.12);
}

.trust-strip div:first-child {
padding-left: 0;
}

.trust-strip div:last-child {
border-right: 0;
}

.trust-strip strong {
display: block;
font-size: 12px;
letter-spacing: .08em;
}

.trust-strip span {
display: block;
margin-top: 3px;
color: #aebccc;
font-size: 11px;
}

/* =========================
GENERAL SECTIONS
========================= */

.section {
padding: 105px 8vw;
max-width: 1440px;
margin: auto;
}

.section-label {
color: var(--green-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
margin-bottom: 13px;
}

.intro {
max-width: 980px;
text-align: center;
}

.intro .section-label {
margin-bottom: 18px;
}

h2 {
margin: 0;
font-size: clamp(35px, 4vw, 55px);
line-height: 1.08;
color: var(--navy);
}

.lead {
max-width: 780px;
margin: 23px auto 0;
font-size: 18px;
color: var(--muted);
}

/* =========================
FEATURES
========================= */

.features-section {
padding-top: 55px;
}

.section-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 50px;
margin-bottom: 48px;
}

.section-head > p {
max-width: 390px;
color: var(--muted);
margin: 0 0 4px;
}

.feature-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 16px;
}

.feature-card {
min-height: 225px;
padding: 27px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: white;
transition: transform .2s, box-shadow .2s;
}

.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(15,35,55,.08);
}

.feature-card.featured {
background: var(--navy);
color: white;
border-color: var(--navy);
}

.feature-card.featured h3 {
color: white;
}

.feature-card.featured p {
color: #b9c6d5;
}

.icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--mint);
color: var(--green-dark);
font-weight: 800;
margin-bottom: 24px;
}

.feature-card.featured .icon {
background: rgba(24,164,122,.16);
color: #5de0b3;
}

.feature-card h3 {
margin: 0 0 9px;
font-size: 19px;
}

.feature-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.65;
}

/* =========================
SPLIT SECTIONS
========================= */

.split {
display: grid;
grid-template-columns: 1.08fr .92fr;
align-items: center;
gap: 8vw;
}

.split.reverse {
grid-template-columns: .92fr 1.08fr;
}

.split-image {
overflow: hidden;
border-radius: 20px;
border: 1px solid var(--line);
box-shadow: 0 20px 55px rgba(15,35,55,.09);
}

.split-image img {
width: 100%;
}

.split-copy p {
max-width: 550px;
color: var(--muted);
font-size: 17px;
}

.check-list {
padding: 0;
list-style: none;
display: grid;
gap: 10px;
margin-top: 25px;
color: #455264;
font-size: 14px;
font-weight: 600;
}

.check-list li::first-letter {
color: var(--green);
}

.check-list li {
position: relative;
padding-left: 25px;
}

.check-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--green);
font-weight: 800;
}

.text-link {
display: inline-block;
margin-top: 10px;
color: var(--green-dark);
font-weight: 800;
font-size: 14px;
}

/* =========================
VIDEO
========================= */

.video-section {
padding: 100px 8vw;
background: #f4f8f7;
display: grid;
grid-template-columns: .7fr 1.3fr;
align-items: center;
gap: 7vw;
}

.video-copy p {
color: var(--muted);
max-width: 380px;
}

.video-frame {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 70px rgba(15,35,55,.16);
background: #0b172a;
border: 1px solid #dfe6e8;
}

.video-frame video {
width: 100%;
aspect-ratio: 1280/962;
object-fit: contain;
background: #0b172a;
}

/* =========================
MANUALE
========================= */

.manual-section {
padding: 100px 8vw;
background: #ffffff;
text-align: center;
}

.manual-section .section-label {
margin-bottom: 18px;
}

.manual-section h2 {
margin: 0 0 25px;
}

.manual-section p {
max-width: 650px;
margin: 0 auto 30px;
color: var(--muted);
line-height: 1.7;
}

.manual-section a {
display: inline-block;
padding: 12px 20px;
border-radius: 11px;
background: var(--navy);
color: white;
font-weight: 700;
text-decoration: none;
transition: opacity .2s ease;
}

.manual-section a {
opacity: .9;
}




/* =========================
PRIVACY
========================= */

.privacy {
padding-top: 80px;
padding-bottom: 40px;
}

.privacy-card {
padding: 42px 48px;
border-radius: 25px;
background: var(--navy);
color: white;
display: grid;
grid-template-columns: auto 1fr;
gap: 27px;
align-items: start;
}

.privacy-card h2 {
color: white;
font-size: 34px;
}

.privacy-card p {
color: #b9c6d5;
max-width: 850px;
}

.privacy-icon {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 15px;
background: rgba(24,164,122,.18);
color: #5de0b3;
font-size: 22px;
}

/* =========================
COME FUNZIONA
========================= */

.how-it-works {
padding-top: 65px;
padding-bottom: 75px;
}

.how-it-works > h2 {
margin-bottom: 45px;
}

.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

.step-card {
position: relative;
min-height: 220px;
padding: 30px 27px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fbfcfd;
transition: transform .2s, box-shadow .2s, border-color .2s;
}

.step-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15,35,55,.07);
border-color: #d9e4e0;
}

.step-number {
color: var(--green);
font-family: "Manrope", system-ui, sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
margin-bottom: 25px;
}

.step-card h3 {
margin: 0 0 10px;
color: var(--navy);
font-size: 21px;
}

.step-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.65;
}

/* =========================
PRICING
========================= */

.pricing {
display: grid;
grid-template-columns: 1fr 390px;
align-items: center;
gap: 10vw;
padding-top: 80px;
padding-bottom: 110px;
}

.pricing-copy p {
max-width: 570px;
color: var(--muted);
font-size: 17px;
margin: 23px 0 29px;
}

.price-card {
padding: 37px;
border-radius: 25px;
color: white;
background: var(--navy);
box-shadow: 0 25px 65px rgba(15,35,55,.18);
position: relative;
overflow: hidden;
}

.price-card::after {
content:"";
position:absolute;
width:210px;
height:210px;
border-radius:50%;
right:-110px;
top:-110px;
background: rgba(24,164,122,.18);
}

.price-top {
color: #8fe4c7;
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
}

.price {
margin-top: 11px;
font-family: "Manrope";
font-size: 73px;
line-height: 1;
letter-spacing: -.07em;
position: relative;
z-index: 1;
}

.price sup {
font-size: 28px;
vertical-align: top;
top: 13px;
position: relative;
margin-right: 4px;
}

.price-once {
color: #aebccc;
font-size: 12px;
margin-top: 5px;
}

.price-divider {
height: 1px;
background: rgba(255,255,255,.13);
margin: 25px 0 20px;
}

.price-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
color: #d7e0ea;
font-size: 13px;
}

/* Pulsante acquisto */
.price-button {
width: 100%;
margin-top: 28px;
position: relative;
z-index: 2;
}

.price-note {
margin: 12px 0 0;
text-align: center;
color: #8e9baa;
font-size: 11px;
position: relative;
z-index: 2;
}

/* =========================
CTA
========================= */

.cta-section {
padding: 54px 8vw;
background: var(--green);
color: white;
}

.cta-inner {
max-width: 1280px;
margin: auto;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 25px;
align-items: center;
}

.cta-inner .section-label {
color: #b9f3df;
}

.cta-inner h2 {
color: white;
font-size: 32px;
}

.cta-inner p {
margin: 4px 0 0;
color: #d8faef;
font-size: 14px;
}

.btn-light {
color: var(--navy);
background: white;
box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* =========================
CONTATTI
========================= */

.contact {
padding-top: 80px;
padding-bottom: 80px;
}

.contact-card {
padding: 42px 48px;
border: 1px solid var(--line);
border-radius: 25px;
background: #f7faf9;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
}

.contact-card h2 {
font-size: 38px;
}

.contact-card p {
max-width: 650px;
color: var(--muted);
margin: 10px 0 0;
font-size: 15px;
}

/* =========================
FAQ
========================= */

.faq h2 {
margin-bottom: 42px;
}

.faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 45px;
}

details {
border-top: 1px solid var(--line);
padding: 19px 0;
}

summary {
cursor: pointer;
list-style: none;
font-weight: 700;
font-size: 15px;
padding-right: 30px;
position: relative;
}

summary::-webkit-details-marker {
display: none;
}

summary::after {
content: "+";
position: absolute;
right: 0;
color: var(--green);
font-size: 20px;
top: -3px;
}

details[open] summary::after {
content: "−";
}

details p {
color: var(--muted);
font-size: 13px;
margin: 10px 0 0;
}

/* =========================
FOOTER
========================= */

footer {
padding: 30px 8vw;
background: #071221;
color: #dfe7ef;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
font-size: 12px;
}

footer p {
margin: 0;
color: #8290a0;
}

footer a {
color: #9aabbc;
transition: color .2s;
}

footer a:hover {
color: white;
}

footer .copyright {
margin-left: auto;
}

/* =========================
TABLET
========================= */

@media (max-width: 1050px) {

nav a:not(.nav-cta) {
display: none;
}

.hero {
grid-template-columns: 1fr;
padding-top: 65px;
}

.hero-copy {
max-width: 800px;
}

.hero-window {
max-width: 900px;
width: 100%;
margin: auto;
}

.feature-grid {
grid-template-columns: repeat(2,1fr);
}

.steps-grid {
grid-template-columns: repeat(2,1fr);
}

.trust-strip {
grid-template-columns: repeat(2,1fr);
gap: 20px 0;
}

.trust-strip div:nth-child(2) {
border-right: 0;
}

.section-head {
display: block;
}

.section-head > p {
margin-top: 18px;
}

.video-section {
grid-template-columns: 1fr;
}

.pricing {
grid-template-columns: 1fr 390px;
gap: 45px;
}

.contact-card {
grid-template-columns: 1fr;
gap: 25px;
}

}

/* =========================
MOBILE
========================= */

@media (max-width: 720px) {

.topbar {
padding: 0 18px;
height: 68px;
}

.nav-cta {
padding: 9px 12px;
font-size: 12px;
}

.hero {
padding: 55px 20px 65px;
}

h1 {
font-size: 45px;
}

.hero-text {
font-size: 16px;
}

.hero-actions {
flex-direction: column;
align-items: stretch;
}

.hero-actions .btn {
width: 100%;
}

.hero-window {
transform: none;
}

.floating-one {
left: 10px;
bottom: 7%;
}

.floating-two {
right: 10px;
top: 7%;
}

.trust-strip {
padding: 25px 20px;
grid-template-columns: 1fr 1fr;
}

.trust-strip div {
padding: 0 12px;
border-right: 0;
}

.trust-strip div:first-child {
padding-left: 0;
}

.section {
padding: 75px 20px;
}

.feature-grid {
grid-template-columns: 1fr;
}

.steps-grid {
grid-template-columns: 1fr;
}

.split,
.split.reverse {
grid-template-columns: 1fr;
gap: 38px;
}

.split.reverse .split-image {
order: -1;
}

.video-section {
padding: 70px 20px;
}

.privacy-card {
grid-template-columns: 1fr;
padding: 32px;
}

.privacy-card h2 {
font-size: 29px;
}

.pricing {
grid-template-columns: 1fr;
padding-bottom: 80px;
}

.price-card {
max-width: 450px;
width: 100%;
}

.cta-inner {
grid-template-columns: 1fr;
}

.contact {
padding-top: 55px;
padding-bottom: 55px;
}

.contact-card {
padding: 32px;
}

.contact-card h2 {
font-size: 32px;
}

.contact-card .btn {
width: 100%;
}

.faq-grid {
grid-template-columns: 1fr;
}

footer {
padding: 25px 20px;
}

footer .copyright {
margin-left: 0;
width: 100%;
}

}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  background: #0b172a;
  color: #ffffff;
  padding: 18px 20px;
  border-radius: 14px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.cookie-banner p {
  margin: 0;
  max-width: 760px;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-buttons button {
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.cookie-reject {
  background: #ffffff;
  color: #0b172a;
}

.cookie-accept {
  background: #22c55e;
  color: #ffffff;
}

.cookie-banner.hidden {
  display: none;
}

@media (max-width: 700px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-buttons {
    width: 100%;
  }

  .cookie-buttons button {
    flex: 1;
  }
}


/* Manuale */
.manual-section {
max-width: 900px;
margin: 0 auto;
padding: 100px 40px;
text-align: center;
}

.manual-section .section-label {
margin-bottom: 20px;
}

.manual-section h2 {
margin-bottom: 25px;
}

.manual-section p {
max-width: 700px;
margin: 0 auto 30px;
}

.manual-section a {
display: inline-block;
padding: 12px 24px;
border-radius: 8px;
background: #22c55e;
color: #ffffff;
text-decoration: none;
font-weight: 600;
}

.manual-section a:hover {
opacity: 0.9;
}